feat: 添加个人认证页面及相关功能

app.json

@@ -16,6 +16,7 @@
     "pages/buyer/index",
     "pages/seller/index",
     "pages/profile/index",
+    "pages/profile/authentication/index",
     "pages/favorites/index",
     "pages/notopen/index",
     "pages/create-supply/index",

pages/profile/authentication/index.js

@@ -0,0 +1,173 @@
+// pages/profile/authentication/index.js
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    idCardFront: '', // 身份证人像面
+    idCardBack: '',  // 身份证国徽面
+    name: '',        // 姓名
+    idNumber: '',    // 身份证号
+    address: '',     // 居住地址
+    validStart: '',  // 有效期开始
+    validEnd: ''     // 有效期结束
+  },
+
+  /**
+   * 返回上一页
+   */
+  navigateBack() {
+    wx.navigateBack({ delta: 1 });
+  },
+
+  /**
+   * 上传身份证人像面
+   */
+  uploadIdCardFront() {
+    this.uploadImage('idCardFront');
+  },
+
+  /**
+   * 上传身份证国徽面
+   */
+  uploadIdCardBack() {
+    this.uploadImage('idCardBack');
+  },
+
+  /**
+   * 通用图片上传方法
+   * @param {string} field - 上传的字段名
+   */
+  uploadImage(field) {
+    const _this = this;
+    wx.chooseMedia({
+      count: 1,
+      mediaType: ['image'],
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success(res) {
+        // 获取图片临时路径
+        const tempFilePaths = res.tempFiles;
+        if (tempFilePaths && tempFilePaths.length > 0) {
+          // 更新页面数据
+          _this.setData({
+            [field]: tempFilePaths[0].tempFilePath
+          });
+          
+          // 这里可以添加图片上传到服务器的逻辑
+          // 模拟识别成功后填充信息
+          _this.simulateOcrResult();
+        }
+      },
+      fail(err) {
+        console.error('选择图片失败:', err);
+        wx.showToast({
+          title: '选择图片失败',
+          icon: 'none'
+        });
+      }
+    });
+  },
+
+  /**
+   * 模拟OCR识别结果
+   */
+  simulateOcrResult() {
+    // 模拟识别成功后填充信息
+    this.setData({
+      name: '张三',
+      idNumber: '110101199001011234',
+      address: '北京市朝阳区建国路88号',
+      validStart: '2020-01-01',
+      validEnd: '2030-01-01'
+    });
+  },
+
+  /**
+   * 提交认证
+   */
+  submitAuth() {
+    // 验证是否上传了身份证
+    if (!this.data.idCardFront || !this.data.idCardBack) {
+      wx.showToast({
+        title: '请上传身份证正反面',
+        icon: 'none'
+      });
+      return;
+    }
+
+    // 这里可以添加提交认证信息到服务器的逻辑
+    wx.showLoading({ title: '提交中...' });
+
+    // 模拟提交成功
+    setTimeout(() => {
+      wx.hideLoading();
+      wx.showToast({
+        title: '认证成功',
+        icon: 'success',
+        duration: 1500
+      });
+
+      // 延时返回上一页
+      setTimeout(() => {
+        this.navigateBack();
+      }, 1500);
+    }, 1000);
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+});

pages/profile/authentication/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "个人认证",
+  "navigationBarBackgroundColor": "#07c160",
+  "navigationBarTextStyle": "white"
+}

pages/profile/authentication/index.wxml

@@ -0,0 +1,81 @@
+<view class="container">
+  <!-- 顶部导航栏 -->
+  <view class="header">
+    <view class="back-btn" bindtap="navigateBack">
+      <text style="font-size: 36rpx;">←</text>
+    </view>
+    <view class="title">个人认证</view>
+    <view class="right-icon"></view>
+  </view>
+
+  <!-- 身份证上传区域 -->
+  <view class="upload-section">
+    <!-- 人像面上传 -->
+    <view class="upload-item">
+      <view class="upload-label">
+        <view class="label-title">人像面</view>
+        <view class="label-desc">上传您身份证头像面</view>
+      </view>
+      <view class="upload-area" bindtap="uploadIdCardFront">
+        <image wx:if="{{idCardFront}}" src="{{idCardFront}}" class="uploaded-image"></image>
+        <view wx:else class="upload-placeholder">
+          <view class="upload-icon">
+            <text style="font-size: 48rpx;">+</text>
+          </view>
+          <view class="upload-text">点击上传人像面</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 国徽面上传 -->
+    <view class="upload-item">
+      <view class="upload-label">
+        <view class="label-title">国徽面</view>
+        <view class="label-desc">上传您身份证国徽面</view>
+      </view>
+      <view class="upload-area" bindtap="uploadIdCardBack">
+        <image wx:if="{{idCardBack}}" src="{{idCardBack}}" class="uploaded-image"></image>
+        <view wx:else class="upload-placeholder">
+          <view class="upload-icon">
+            <text style="font-size: 48rpx;">+</text>
+          </view>
+          <view class="upload-text">点击上传国徽面</view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 信息展示区域 -->
+  <view class="info-section">
+    <view class="info-item">
+      <view class="info-label">姓名</view>
+      <view class="info-value">{{name || '上传图片后自动获取'}}</view>
+    </view>
+    <view class="info-item">
+      <view class="info-label">身份证号</view>
+      <view class="info-value">{{idNumber || '上传图片后自动获取'}}</view>
+    </view>
+    <view class="info-item">
+      <view class="info-label">居住地址</view>
+      <view class="info-value">{{address || '上传图片后自动获取'}}</view>
+    </view>
+    <view class="info-item">
+      <view class="info-label">有效期开始时间</view>
+      <view class="info-value">{{validStart || '上传图片后自动获取'}}</view>
+    </view>
+    <view class="info-item">
+      <view class="info-label">有效期结束时间</view>
+      <view class="info-value">{{validEnd || '上传图片后自动获取'}}</view>
+    </view>
+  </view>
+
+  <!-- 提示信息 -->
+  <view class="tip-section">
+    <text class="tip-text">为了给您提供更好的服务，请选择您当前服务所在区域</text>
+  </view>
+
+  <!-- 认证按钮 -->
+  <view class="auth-btn" bindtap="submitAuth">
+    <text class="auth-btn-text">认证</text>
+  </view>
+</view>

pages/profile/authentication/index.wxss

@@ -0,0 +1,165 @@
+/* pages/profile/authentication/index.wxss */
+
+.container {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding-bottom: 40rpx;
+}
+
+/* 顶部导航栏 */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #07c160;
+  color: white;
+  padding: 20rpx 30rpx;
+  height: 100rpx;
+  box-sizing: border-box;
+}
+
+.back-btn {
+  width: 80rpx;
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  font-size: 32rpx;
+  font-weight: bold;
+  flex: 1;
+  text-align: center;
+}
+
+.right-icon {
+  width: 80rpx;
+}
+
+/* 上传区域 */
+.upload-section {
+  background-color: white;
+  margin: 20rpx 0;
+  padding: 30rpx;
+}
+
+.upload-item {
+  display: flex;
+  margin-bottom: 40rpx;
+  align-items: center;
+}
+
+.upload-label {
+  flex: 1;
+  margin-right: 30rpx;
+}
+
+.label-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.label-desc {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.upload-area {
+  width: 320rpx;
+  height: 200rpx;
+  border: 2rpx dashed #ddd;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.upload-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16rpx;
+}
+
+.upload-text {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.uploaded-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 12rpx;
+}
+
+/* 信息展示区域 */
+.info-section {
+  background-color: white;
+  margin: 20rpx 0;
+  padding: 0 30rpx;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  width: 180rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.info-value {
+  flex: 1;
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 提示信息 */
+.tip-section {
+  padding: 30rpx;
+  margin: 20rpx 0;
+}
+
+.tip-text {
+  font-size: 24rpx;
+  color: #ff6b6b;
+  line-height: 1.5;
+}
+
+/* 认证按钮 */
+.auth-btn {
+  background-color: #07c160;
+  color: white;
+  font-size: 32rpx;
+  font-weight: bold;
+  text-align: center;
+  padding: 30rpx;
+  margin: 0 30rpx;
+  border-radius: 20rpx;
+  margin-top: 40rpx;
+}
+
+.auth-btn-text {
+  display: block;
+}

pages/profile/index.js

@@ -1066,4 +1066,11 @@ Page({
     });
   },
 
+  // 跳转到个人认证页面
+  navigateToAuthentication() {
+    wx.navigateTo({
+      url: '/pages/profile/authentication/index'
+    });
+  },
+
 })

pages/profile/index.wxml

@@ -54,7 +54,11 @@
       </view>
     </view>
   </view>
-  
+  <!-- 个人认证 -->
+  <view class="card" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx 0;" bindtap="navigateToAuthentication">
+    <text style="font-size: 28rpx; color: #333;">个人认证</text>
+    <text style="font-size: 28rpx; color: #999;">＞</text>
+  </view>
   <!-- 位置授权 -->
   <view class="card">
     <view class="title">位置信息</view>
@@ -89,4 +93,4 @@
       {{userType === 'seller' || userType === 'both' ? '已设为卖家' : '设为卖家'}}
     </button>
   </view>
-</view>
+</view>