# yinyuan

**Repository Path**: kdh-dev/yinyuan123

## Basic Information

- **Project Name**: yinyuan
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-12
- **Last Updated**: 2025-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 婚姻测试系统

一个基于Vue 3的婚姻测试H5网页应用。

## 功能特性

- ✨ 中国风UI设计，红色主题
- 📝 用户信息表单（姓名、性别、生辰）
- 📅 公历/农历日期选择器
- 🎯 立即测试功能（带脉冲动画效果）
- 📋 订单查看系统
- 📜 隐私协议页面
- 💬 客服和投诉侧边栏按钮

## 技术栈

- Vue 3
- Vue Router 4
- Vite 5
- 原生CSS + GSAP（动画时间线与交互）

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 项目结构

```
yinyuan/
├── public/
│   └── image/              # 图片资源
│       ├── background.jpg  # 背景图
│       ├── banner1.jpg     # Banner图
│       └── ...
├── src/
│   ├── components/         # 组件
│   │   └── DatePicker.vue # 日期选择器组件
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── views/             # 页面
│   │   ├── HomePage.vue   # 首页
│   │   ├── PrivacyPage.vue # 隐私政策页
│   │   └── OrdersPage.vue  # 订单页面
│   ├── App.vue            # 根组件
│   ├── main.js            # 入口文件
│   └── style.css          # 全局样式
├── index.html             # HTML模板
├── package.json           # 项目配置
└── vite.config.js         # Vite配置
```

## 页面说明

### 首页 (/)
- 婚姻测试表单
- 姓名、性别、生辰输入
- 日期选择器（支持公历/农历）
- 立即测试按钮（动画效果）
- 隐私协议勾选
- 我的测试订单入口

### 隐私政策页 (/privacy)
- 完整的隐私政策内容
- 信息收集、使用、保护等条款

### 订单页面 (/orders)
- 订单列表展示
- 订单详情查看
- 订单取消功能
- 空状态提示

## 特色功能

### 日期选择器
- 支持公历/农历切换
- 年月日时辰选择
- 确认弹窗验证
- 农历显示（待集成农历库）

### 动画效果
- 使用 GSAP 统一编排加载页六阶段时间线，支持精准进度同步
- 报告页 Canvas 扫光与呼吸缩放由 GSAP ticker 与 tween 驱动
- 首页/弹窗淡入、SVG描边等动效风格统一

### 响应式设计
- 适配移动端和桌面端
- 流畅的触摸交互

## 待完善功能

- [ ] 集成农历转换库
- [ ] 实际的测试算法
- [ ] 后端API对接
- [x] 支付功能（已接入微信JSAPI，需配置）
- [ ] 客服聊天功能
- [ ] 投诉表单

## 微信JSAPI支付对接

- 前端配置文件：`src/config/pay.js`
  - `enabled`：是否启用支付
  - `mock`：是否启用本地模拟，非微信环境可用于联调
  - `apiBase`：后端API前缀
  - `endpoints.createOrder`：创建订单接口路径
  - `endpoints.jsapiParams`：获取JSAPI入参接口路径
  - `notifyUrl`：微信支付异步通知URL（后端）
- 业务封装：`src/services/payment.js`
  - `startJsapiPay(payload)`：创建订单→拉取`getBrandWCPayRequest`参数→唤起支付
- 环境判断与唤起：`src/utils/wechat.js`
  - `isWeChatBrowser()`：判定是否在微信内置浏览器
  - `invokeWeChatPay(params)`：调用`WeixinJSBridge.invoke('getBrandWCPayRequest', ...)`
- 页面改造：`src/views/PaymentPage.vue`
  - 点击“确认支付”在微信环境直接唤起支付；非微信且`mock=false`提示需在微信内完成

### 后端对接约定

- 创建订单接口返回：`{ orderId: string }`
- JSAPI参数接口返回：
  - `appId`
  - `timeStamp`（字符串）
  - `nonceStr`
  - `package`（形如`prepay_id=xxx`）
  - `signType`（如`RSA`或`MD5`）
  - `paySign`

### 本地联调

- 将`src/config/pay.js`中的`mock`设为`true`可跳过微信环境并模拟成功，便于联调流程

## 开发者

北京聚源优教育科技有限公司

## 许可证

Copyright © 2024

## 动画架构（GSAP）

- 依赖：`gsap`
- 加载页：`src/views/LoadingPage.vue`
  - 使用 `gsap.timeline()` 顺序编排六阶段，`onUpdate` 同步进度条
- 报告页：`src/views/ReportPage.vue`
  - 使用 `gsap.ticker` 驱动 Canvas 绘制，`fromTo/to` 控制扫光与缩放
- 资源清理：在页面卸载时 `kill()` 动画并移除 `ticker`
- 适配：检测 `prefers-reduced-motion` 降低时长或精简动效
## Gitee CI/CD Webhook

- 位置：`scripts/webhook-server.js`，配置：`scripts/webhook.config.json`
- 工作流：
  - 接收 Gitee Push Hook → 验证 Token/签名 → 拉取指定分支 → 安装依赖 → 构建 → 部署到目标目录或执行自定义部署命令
- 配置字段：
  - `port`：Webhook 服务端口
  - `token`：Gitee WebHook 的 Token
  - `project_path`：远程服务器上仓库路径
  - `branch`：监听分支
  - `install_cmd`、`build_cmd`：安装与构建命令
  - `dist_path`：构建产物目录
  - `deploy_path`：部署目标目录
  - `deploy_cmd`：自定义部署命令（非空时优先生效）
- 启动：`npm run webhook`（在远程服务器上运行）
- Gitee 设置：
  - WebHook URL: `http://your-server:9000/webhook`
  - 秘钥 Token 与配置 `token` 一致
  - 触发事件：Push
- 部署脚本样例：
  - Linux: `scripts/deploy.linux.sh`
  - Windows: `scripts/deploy.win.ps1`