RentWeAppFront/pages-biz/profile/profile.vue

<template>
	<view class="u-m-20">
		<u-navbar :is-back="true" title="账号实名信息" :border-bottom="false"></u-navbar>

		<view class="mt-30">
			<u-cell-group>
				<u-cell-item :title="getTitle" :arrow="true" hover-class="none" @click="showModel = true">
					<text class="value-text">{{ showValue || '设置' }}</text>
				</u-cell-item>
			</u-cell-group>
		</view>

		<!-- ======================
		     完全自定义弹窗（扔掉u-modal）
		     样式100%可控 永不转圈 超美观
		========================= -->
		<view class="modal-mask" v-if="showModel" @click="showModel = false"></view>
		<view class="modal-content" v-if="showModel">
			<view class="modal-header">
				<text class="title">设置{{ getTitle }}</text>
			</view>

			<view class="modal-body">
				<input v-model="authCode" :placeholder="'请输入' + getTitle" class="modal-input" />
			</view>

			<view class="modal-footer">
				<view class="btn cancel" @click="closeModal">取消</view>
				<view class="btn confirm" :class="{loading: submitting}" @click="doSubmit">
					<text v-if="!submitting">确定</text>
					<text v-else class="loading-text">提交中...</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		rsaEncrypt
	} from "@/common/utils/ras.js"
	export default {
		data() {
			return {
				user: {
					userType: '',
					oaAuth: null,
					cusNo: null,
					userName: null,
					openId: null
				},
				authCode: '',
				showModel: false,
				submitting: false,
				cardNo: null,
				orgNo: null
			}
		},
		onShow() {
			this.getUserProfile();
		},
		methods: {
			closeModal() {
				this.showModel = false
				this.authCode = ''
			},
			checkIdCard(code) {
				return /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(code);
			},
			checkCreditCode(code) {
				return /^[0-9A-Z]{18}$/.test(code);
			},
			async doSubmit() {
				const userType = String(this.user.userType)
				const input = this.authCode.trim()

				if (!input) {
					this.$mytip.toast(userType === '0' ? '请输入身份证号' : '请输入企业信用代码')
					return
				}
				if (userType === '0' && !this.checkIdCard(input)) {
					uni.showToast({
						title: '身份证格式不正确',
						icon: 'none'
					})
					return
				}
				if (userType === '1' && !this.checkCreditCode(input)) {
					uni.showToast({
						title: '社会信用代码格式错误',
						icon: 'none'
					})
					return
				}

				this.submitting = true
				try {
					const token = this.$getToken()
					const res = await this.$u.post('/login/updateVerifyCode', {
						userType,
						code: userType === '0' ? rsaEncrypt(input) : input
					}, {
						WT: token
					})

					if (res.flag && res.data) {
						this.$mytip.toast('实名成功')
						this.closeModal()
						setTimeout(() => uni.switchTab({
							url: '/pages/center/center'
						}), 1500)
					} else {
						this.$mytip.toast(res.msg || '设置失败,请检查输入的数据或者联系我们的管理员(17371719170)咨询')
					}
				} catch (err) {
					this.$mytip.toast('提交失败')
				} finally {
					this.submitting = false
				}
			},
			applyMask(idCard) {
				if (!idCard || idCard.length !== 18) return idCard
				return idCard.replace(/^(\d{6})\d{8}(\d{4})$/, '$1********$2')
			},
			getUserProfile() {
				const token = this.$getToken()
				let userInfo = uni.getStorageSync('userInfo');
				console.log("实名时查询用户信息")
				let url = `/login/userInfo`;
				this.$u.get(url, {}, {
					'WT': this.$getToken(),
					'USERTYPE': userInfo.userType
				}).then(obj => {
					if (!obj?.flag) {
						return
					}
					const user = obj.data
					this.user = {
						userType: user.userType,
						oaAuth: user.oaAuth,
						cusNo: user.cusNo,
						userName: user.userName,
						openId: user.openId
					}
					if (user.userType === '0') {
						this.cardNo = user.cardNo ? this.applyMask(user.cardNo) : null
						this.orgNo = null
					} else {
						this.orgNo = user.orgNo || null
						this.cardNo = null
					}
					uni.setStorageSync('userInfo', user)
				})


			}
		},
		computed: {
			getTitle() {
				return this.user.userType === '0' ? '身份证号' : '企业社会信用代码'
			},
			showValue() {
				return this.user.userType === '0' ? this.cardNo : this.orgNo
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 页面样式 */
	.mt-30 {
		margin-top: 30rpx;
	}

	.value-text {
		font-size: 28rpx;
		color: #666;
	}

	/* ======================
   自定义弹窗样式（超美观）
========================= */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.modal-content {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 82%;
		background: #fff;
		border-radius: 20rpx;
		z-index: 1000;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
	}

	.modal-input {
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #EEEEEE;
		padding: 0 10rpx;
		box-sizing: border-box;
		color: #333;
	}

	.modal-header {
		padding: 40rpx 30rpx 20rpx;
		text-align: center;
		font-weight: bold;

		.title {
			font-size: 34rpx;
			color: #222;
		}
	}

	.modal-body {
		padding: 20rpx 40rpx 40rpx;
	}

	.modal-footer {
		display: flex;
		border-top: 1rpx solid #f0f0f0;
		height: 96rpx;

		.btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;

			&.cancel {
				color: #666;
				background: #f8f8f8;
			}

			&.confirm {
				color: #fff;
				background: #EA414A;

				&.loading {
					opacity: 0.8;
				}
			}
		}
	}
</style>