Просмотр исходного кода

feat(my): 完善实名认证页面功能及样式

- 将理疗师标签修改为商家
- 增加实名认证信息字段:地址、身份证号码、出生日期、性别
- 支持身份证正反面图片上传及删除功能
- 提供出生日期和性别选择器
- 增加上传图片类型参数,区分头像及身份证图片
- 实现表单校验,确保实名认证信息完整且格式正确
- 优化提交逻辑,先提交商家信息再提交实名认证数据
- 处理网络请求异常,提示用户上传或提交失败
- 调整实名认证页面背景图和高度样式
- 注释隐藏订单详情页中的健康理疗师标签显示
zhangtao 3 недель назад
Родитель
Сommit
21eb263c5f
3 измененных файлов с 238 добавлено и 26 удалено
  1. 1 1
      pages.json
  2. 235 23
      pages/my/hehuo.vue
  3. 2 2
      pages/therapist/orderDetail.vue

+ 1 - 1
pages.json

@@ -620,7 +620,7 @@
 				"pagePath": "pages/therapist/therapist",
 				"iconPath": "static/tabbar/therapist.png",
 				"selectedIconPath": "static/tabbar/therapist_.png",
-				"text": "理疗师"
+				"text": "商家"
 			},
 			{
 				"pagePath": "pages/order/index",

+ 235 - 23
pages/my/hehuo.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="hehuo_view">
-			<image src="/static/image/high_zmjs.png"></image>
+			<image class="background_image" src="/static/image/high_zmjs.png"></image>
 			<view class="text_view">
 				<view class="item_view">
 					<view class="item_title">服务城市 </view>
@@ -24,6 +24,27 @@
 					<input type="number" v-model="age" maxlength="11" placeholder="请输入年龄" />
 					<view class="xian"></view>
 				</view>
+				<view class="item_view">
+					<view class="item_title">地址</view>
+					<input type="text" v-model="address" placeholder="请输入地址" />
+					<view class="xian"></view>
+				</view>
+				<view class="item_view">
+					<view class="item_title">身份证号码</view>
+					<input type="text" v-model="idNumber" placeholder="请输入身份证号码" />
+					<view class="xian"></view>
+				</view>
+				<view class="item_view" @click="openBirthdatePicker">
+					<view class="item_title">出生日期</view>
+					<input type="text" v-model="birthdate" placeholder="请选择出生日期" disabled />
+					<view class="xian"></view>
+				</view>
+				<view class="item_view" @click="openSexPicker">
+					<view class="item_title">性别</view>
+					<input type="text" v-model="sexText" placeholder="请选择性别" disabled />
+					<view class="xian"></view>
+				</view>
+			<view class="flex justify-between">
 				<view class="item_view">
 					<view class="item_title">头像上传</view>
 					<view class="flex" style="overflow: hidden;flex-direction: initial;">
@@ -39,7 +60,7 @@
 								</view>
 							</view>
 						</view>
-						<view class="margin-top" @click="addImage()" v-if="headImg.length<=0">
+						<view class="margin-top" @click="addImage('head')" v-if="headImg.length<=0">
 							<view style="width: 150upx;height: 150upx;background: #F5F5F5;"
 								class="flex justify-center align-center">
 								<view>
@@ -54,12 +75,73 @@
 						</view>
 					</view>
 				</view>
-
+				<view class="item_view">
+					<view class="item_title">身份证正面</view>
+					<view class="flex" style="overflow: hidden;flex-direction: initial;">
+						<view v-if="front.length">
+							<view class="margin-top flex margin-right-sm">
+								<view class="flex"
+									style="width: 150upx;height: 150upx;margin-right: 10rpx;position: relative;">
+									<image :src="front" style="width: 100%;height: 100%;"></image>
+									<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
+										@click="frontRemove">
+										<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
+									</view>
+								</view>
+							</view>
+						</view>
+						<view class="margin-top" @click="addImage('front')" v-if="front.length<=0">
+							<view style="width: 150upx;height: 150upx;background: #F5F5F5;"
+								class="flex justify-center align-center">
+								<view>
+									<view class="text-center">
+										<image src="../../static/images/my/add.png"
+											style="width: 54upx;height: 47upx;position: relative;"></image>
+									</view>
+									<view class="text-center text-xs margin-top-xs">上传图片</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="item_view">
+					<view class="item_title">身份证反面</view>
+					<view class="flex" style="overflow: hidden;flex-direction: initial;">
+						<view v-if="back.length">
+							<view class="margin-top flex margin-right-sm">
+								<view class="flex"
+									style="width: 150upx;height: 150upx;margin-right: 10rpx;position: relative;">
+									<image :src="back" style="width: 100%;height: 100%;"></image>
+									<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
+										@click="backRemove">
+										<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
+									</view>
+								</view>
+							</view>
+						</view>
+						<view class="margin-top" @click="addImage('back')" v-if="back.length<=0">
+							<view style="width: 150upx;height: 150upx;background: #F5F5F5;"
+								class="flex justify-center align-center">
+								<view>
+									<view class="text-center">
+										<image src="../../static/images/my/add.png"
+											style="width: 54upx;height: 47upx;position: relative;"></image>
+									</view>
+									<view class="text-center text-xs margin-top-xs">上传图片</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				
+			</view>
 				<!-- <view class="audit_message" v-if="auditContent != '' && bb == 3">拒绝原因:{{auditContent}}</view> -->
 				<view class="save_btn" @tap="save" v-if="bb !=0">提交申请</view>
 				<!-- <view class="save_btn" v-if="status == 0">审核中</view> -->
 			</view>
 		</view>
+		<u-action-sheet :list="sexOptions" v-model="showSex" @click="handleSexSelect"></u-action-sheet>
+		<u-picker v-model="showBirthdate" :params="dateParams" @confirm="handleBirthdateConfirm"></u-picker>
 	</view>
 </template>
 
@@ -77,8 +159,30 @@
 				userName: '',
 				phone: '',
 				age: '',
+				address: '',
+				idNumber: '',
+				birthdate: '',
+				sex: '',
+				sexText: '',
+				front: '',
+				back: '',
+				showSex: false,
+				sexOptions: [{
+					text: '男'
+				}, {
+					text: '女'
+				}],
+				showBirthdate: false,
+				dateParams: {
+					year: true,
+					month: true,
+					day: true,
+					hour: false,
+					minute: false,
+					second: false
+				},
 				headImg: [],
-				bb:true,
+				bb: true,
 			}
 		},
 		onLoad() {
@@ -89,6 +193,27 @@
 			headImgremove(index) {
 				this.headImg = ''
 			},
+			// 身份证正面删除
+			frontRemove() {
+				this.front = ''
+			},
+			// 身份证反面删除
+			backRemove() {
+				this.back = ''
+			},
+			openBirthdatePicker() {
+				this.showBirthdate = true
+			},
+			handleBirthdateConfirm(value) {
+				this.birthdate = value.year + '-' + value.month + '-' + value.day
+			},
+			openSexPicker() {
+				this.showSex = true
+			},
+			handleSexSelect(index) {
+				this.sex = index
+				this.sexText = this.sexOptions[index].text
+			},
 			getChannel() {
 				let userId = this.$queue.getData('userId');
 				this.$Request.getT('/app/artificer/selectAgencyById?userId=' + userId).then(res => {
@@ -102,6 +227,15 @@
 							this.headImg = res.data.img;
 							this.userName = res.data.name;
 							this.phone = res.data.phone;
+							// this.userCertification = res.data.userCertification
+							this.sex = res.data.userCertification.sex
+							this.back = res.data.userCertification.back? res.data.userCertification.back:''
+							this.front = res.data.userCertification.front ? res.data.userCertification.front:''
+							this.idNumber = res.data.userCertification.idNumber
+							this.birthdate = res.data.userCertification.birthdate
+							this.address = res.data.userCertification.address
+							this.sexText = res.data.userCertification.sex==0?'男':'女'
+							
 						}
 						console.log(this.bb)
 						// this.auditContent = res.data.auditContent;
@@ -181,8 +315,38 @@
 					this.$queue.showToast('请上传头像')
 					return;
 				}
+				if (this.address === '') {
+					this.$queue.showToast('请输入地址')
+					return;
+				}
+				if (this.idNumber === '') {
+					this.$queue.showToast('请输入身份证号码')
+					return;
+				}
+				let idNumberReg =
+					/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
+				if (!idNumberReg.test(this.idNumber)) {
+					this.$queue.showToast('请输入正确的身份证号码')
+					return;
+				}
+				if (this.birthdate === '') {
+					this.$queue.showToast('请选择出生日期')
+					return;
+				}
+				if (this.sex === '') {
+					this.$queue.showToast('请选择性别')
+					return;
+				}
+				if (this.front === '') {
+					this.$queue.showToast('请上传身份证正面')
+					return;
+				}
+				if (this.back === '') {
+					this.$queue.showToast('请上传身份证反面')
+					return;
+				}
 				let userId = this.$queue.getData('userId');
-				let data = {
+				let agencyData = {
 					userId: userId,
 					name: this.userName,
 					phone: this.phone,
@@ -190,18 +354,50 @@
 					city: this.city,
 					img: this.headImg,
 				}
-				this.$Request.postJson('/app/artificer/insertAgency', data).then(res => {
+				this.$Request.postJson('/app/artificer/insertAgency', agencyData).then(res => {
 					if (res.code == 0) {
-						uni.hideLoading();
-						this.$queue.showToast('提交成功!');
-						setTimeout(d => {
-							uni.navigateBack();
-						}, 1000);
+						let certificationBody = {
+							back: this.back,
+							front: this.front,
+							idNumber: this.idNumber,
+							name: this.userName,
+							userId: userId
+						}
+						let certificationQuery = [
+							['address', this.address],
+							['birthdate', this.birthdate],
+							['classify', 1],
+							['phone', this.phone],
+							['sex', this.sex],
+							['back',this.back],
+							['front',this.front],
+							['idNumber',this.idNumber],
+							['userName',this.userName],
+							['userId',this.userId],
+						].map(item => item[0] + '=' + encodeURIComponent(item[1])).join('&')
+						let certificationUrl = '/app/userCertification/insert?' + certificationQuery
+						this.$Request.postJson(certificationUrl, certificationBody).then(certificationRes => {
+							uni.hideLoading()
+							if (certificationRes.code == 0) {
+								this.$queue.showToast('提交成功!')
+								setTimeout(() => {
+									uni.navigateBack()
+								}, 1000)
+							} else {
+								this.$queue.showToast(certificationRes.msg || '实名认证提交失败')
+							}
+						}).catch(() => {
+							uni.hideLoading()
+							this.$queue.showToast('网络请求失败,请稍后重试')
+						})
 					} else {
-						uni.hideLoading();
-						this.$queue.showToast(res.msg);
+						uni.hideLoading()
+						this.$queue.showToast(res.msg || '提交申请失败')
 					}
-				});
+				}).catch(() => {
+					uni.hideLoading()
+					this.$queue.showToast('网络请求失败,请稍后重试')
+				})
 			},
 			config: function(name) {
 				var info = null;
@@ -225,7 +421,7 @@
 				}
 				return info;
 			},
-			addImage() {
+			addImage(type) {
 				let that = this
 				uni.chooseImage({
 					count: 1,
@@ -238,10 +434,26 @@
 								filePath: res.tempFilePaths[i],
 								name: 'file',
 								success: (uploadFileRes) => {
-									console.log(uploadFileRes.data)
-									that.headImg = JSON.parse(uploadFileRes.data).data
-									console.log(that.headImg)
-									uni.hideLoading();
+									try {
+										let imageUrl = JSON.parse(uploadFileRes.data).data
+										if (!imageUrl) {
+											throw new Error('上传结果缺少图片地址')
+										}
+										if (type === 'front') {
+											that.front = imageUrl
+										} else if (type === 'back') {
+											that.back = imageUrl
+										} else {
+											that.headImg = imageUrl
+										}
+									} catch (error) {
+										that.$queue.showToast('图片上传失败')
+									}
+									uni.hideLoading()
+								},
+								fail: () => {
+									uni.hideLoading()
+									that.$queue.showToast('图片上传失败')
 								}
 							});
 						}
@@ -258,11 +470,11 @@
 
 	.hehuo_view {
 		width: 750rpx;
-		height: 1830upx;
+		height: 2900upx;
 
-		image {
+		.background_image {
 			width: 750rpx;
-			height: 1830upx;
+			height: 2900upx;
 			background-size: 100%;
 			position: absolute;
 		}
@@ -271,7 +483,7 @@
 			position: absolute;
 			z-index: 1;
 			width: 84%;
-			margin: 660rpx 50rpx 30rpx;
+			margin: 1000rpx 50rpx 30rpx;
 
 			.audit_message {
 				color: red;

+ 2 - 2
pages/therapist/orderDetail.vue

@@ -32,10 +32,10 @@
 					<view class="margin-right-xs text-bold" style="letter-spacing: 3rpx; font-size: 35rpx;">
 						{{order.artificerName}}
 					</view>
-					<view class=" margin-right-xs text-26"
+				<!-- 	<view class=" margin-right-xs text-26"
 						style="color: #FF6E98;background: #FFECF2;border-radius:15rpx;border-radius: 32rpx;width: 152rpx;height: 48rpx;text-align: center;line-height: 48rpx;">
 						健康理疗师
-					</view>
+					</view> -->
 				</view>
 				<view class="padding-bottom-sm flex justify-between">
 					<view class="flex align-center">