SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

pull/18/head
徐飞洋 1 month ago
parent
b90ade750e
commit
c6b861b0a9
7 changed files with 439 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      app.json
  2. 173
      pages/profile/authentication/index.js
  3. 6
      pages/profile/authentication/index.json
  4. 81
      pages/profile/authentication/index.wxml
  5. 165
      pages/profile/authentication/index.wxss
  6. 7
      pages/profile/index.js
  7. 8
      pages/profile/index.wxml

1
app.json
View File

@ -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",

173
pages/profile/authentication/index.js
View File

@ -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() {
}
});

6
pages/profile/authentication/index.json
View File

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

81
pages/profile/authentication/index.wxml
View File

@ -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>

165
pages/profile/authentication/index.wxss
View File

@ -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;
}

7
pages/profile/index.js
View File

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

8
pages/profile/index.wxml
View File

@ -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>
Write Preview
Loading…
Cancel
Save