Browse Source

更新认证相关页面

pull/18/head
徐飞洋 1 month ago
parent
commit
fdd712effe
  1. 41
      pages/profile/authentication/index.js
  2. 50
      pages/profile/authentication/index.wxml
  3. 2
      pages/profile/index.wxml
  4. 152
      pages/profile/index.wxss

41
pages/profile/authentication/index.js

@ -7,8 +7,10 @@ Page({
data: { data: {
idCardFront: '', // 身份证人像面 idCardFront: '', // 身份证人像面
idCardBack: '', // 身份证国徽面 idCardBack: '', // 身份证国徽面
businessLicense: '', // 营业执照
idcard1: null, // 身份证正面文件信息 idcard1: null, // 身份证正面文件信息
idcard2: null, // 身份证反面文件信息 idcard2: null, // 身份证反面文件信息
businessLicenseFile: null, // 营业执照文件信息
name: '', // 姓名 name: '', // 姓名
idNumber: '', // 身份证号 idNumber: '', // 身份证号
address: '', // 居住地址 address: '', // 居住地址
@ -37,6 +39,13 @@ Page({
this.uploadImage('idCardBack'); this.uploadImage('idCardBack');
}, },
/**
* 上传营业执照
*/
uploadBusinessLicense() {
this.uploadImage('businessLicense');
},
/** /**
* 通用图片上传方法 * 通用图片上传方法
* @param {string} field - 上传的字段名 * @param {string} field - 上传的字段名
@ -50,17 +59,27 @@ Page({
success: (res) => { success: (res) => {
const tempFilePaths = res.tempFilePaths; const tempFilePaths = res.tempFilePaths;
if (tempFilePaths && tempFilePaths.length > 0) { if (tempFilePaths && tempFilePaths.length > 0) {
// 更新页面数据 // 根据字段类型更新页面数据
_this.setData({ if (field === 'businessLicense') {
[field === 'idCardFront' ? 'idCardFront' : 'idCardBack']: tempFilePaths[0], _this.setData({
[field === 'idCardFront' ? 'idcard1' : 'idcard2']: { businessLicense: tempFilePaths[0],
path: tempFilePaths[0], businessLicenseFile: {
name: `身份证${field === 'idCardFront' ? '正面' : '反面'}_${new Date().getTime()}.jpg` path: tempFilePaths[0],
} name: `营业执照_${new Date().getTime()}.jpg`
}); }
});
// 模拟识别成功后填充信息 } else {
_this.simulateOcrResult(); _this.setData({
[field === 'idCardFront' ? 'idCardFront' : 'idCardBack']: tempFilePaths[0],
[field === 'idCardFront' ? 'idcard1' : 'idcard2']: {
path: tempFilePaths[0],
name: `身份证${field === 'idCardFront' ? '正面' : '反面'}_${new Date().getTime()}.jpg`
}
});
// 模拟识别成功后填充信息
_this.simulateOcrResult();
}
} }
}, },
fail: (err) => { fail: (err) => {

50
pages/profile/authentication/index.wxml

@ -1,13 +1,4 @@
<view class="container"> <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-section">
<!-- 人像面上传 --> <!-- 人像面上传 -->
@ -43,35 +34,24 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<!-- 信息展示区域 --> <!-- 营业执照上传 -->
<view class="info-section"> <view class="upload-item">
<view class="info-item"> <view class="upload-label">
<view class="info-label">姓名</view> <view class="label-title">营业执照</view>
<view class="info-value">{{name || '上传图片后自动获取'}}</view> <view class="label-desc">上传您的营业执照</view>
</view> </view>
<view class="info-item"> <view class="upload-area" bindtap="uploadBusinessLicense">
<view class="info-label">身份证号</view> <image wx:if="{{businessLicense}}" src="{{businessLicense}}" class="uploaded-image"></image>
<view class="info-value">{{idNumber || '上传图片后自动获取'}}</view> <view wx:else class="upload-placeholder">
</view> <view class="upload-icon">
<view class="info-item"> <text style="font-size: 48rpx;">+</text>
<view class="info-label">居住地址</view> </view>
<view class="info-value">{{address || '上传图片后自动获取'}}</view> <view class="upload-text">点击上传营业执照</view>
</view> </view>
<view class="info-item"> </view>
<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>
<!-- 提示信息 -->
<view class="tip-section">
<text class="tip-text">为了给您提供更好的服务,请选择您当前服务所在区域</text>
</view> </view>
<!-- 认证按钮 --> <!-- 认证按钮 -->

2
pages/profile/index.wxml

@ -55,7 +55,7 @@
</view> </view>
</view> </view>
<!-- 个人认证 --> <!-- 个人认证 -->
<view class="card" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx 0;" bindtap="navigateToAuthentication"> <view class=".card" bindtap="navigateToAuthentication">
<text style="font-size: 28rpx; color: #333;">个人认证</text> <text style="font-size: 28rpx; color: #333;">个人认证</text>
<text style="font-size: 28rpx; color: #999;">></text> <text style="font-size: 28rpx; color: #999;">></text>
</view> </view>

152
pages/profile/index.wxss

@ -1 +1,151 @@
/* pages/profile/index.wxss */ /* pages/profile/index.wxss */
/* 全局样式重置 */
page {
background-color: #f5f5f5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* 容器样式 */
.container {
padding: 20rpx;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
box-sizing: border-box;
background-color: #f5f5f5;
}
/* 卡片样式 */
.card {
background-color: white;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
transform: translateY(-2rpx);
}
/* 标题样式 */
.title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
position: relative;
padding-bottom: 10rpx;
}
.title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 80rpx;
height: 4rpx;
background: linear-gradient(90deg, #1677ff, #1890ff);
border-radius: 2rpx;
}
/* 按钮样式 */
.btn {
width: 100%;
padding: 20rpx;
border-radius: 10rpx;
font-size: 28rpx;
font-weight: bold;
transition: all 0.3s ease;
margin-bottom: 20rpx;
border: none;
outline: none;
}
.btn:hover {
opacity: 0.9;
transform: scale(1.02);
}
.btn:active {
transform: scale(0.98);
}
/* 标签样式 */
.tag {
display: flex;
align-items: center;
padding: 12rpx 24rpx;
border-radius: 24rpx;
margin: 10rpx;
font-size: 26rpx;
font-weight: bold;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
}
.tag:hover {
transform: translateY(-2rpx);
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
}
.tag:active {
transform: scale(0.98);
}
/* 链接项样式 */
.link-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 0;
cursor: pointer;
transition: all 0.3s ease;
}
.link-item:hover {
background-color: rgba(22, 119, 255, 0.05);
border-radius: 10rpx;
}
/* 退出登录按钮样式 */
.logout-btn {
background-color: #ff4d4f;
color: white;
padding: 12rpx 4rpx;
border-radius: 20rpx;
font-size: 20rpx;
width: 176rpx;
display: block;
box-sizing: border-box;
transition: all 0.3s ease;
border: none;
outline: none;
}
.logout-btn:hover {
background-color: #ff7875;
transform: scale(1.05);
}
.logout-btn:active {
transform: scale(0.95);
}
/* 授权登录按钮样式 */
.auth-btn {
margin: 20rpx 0;
transition: all 0.3s ease;
}
.auth-btn:hover {
transform: scale(1.02);
}
.auth-btn:active {
transform: scale(0.98);
}
Loading…
Cancel
Save