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
			}
		},
		onLoad() {
			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) {
						this.$mytip.toast('设置成功')
						this.closeModal()
						await this.getUserProfile()
						setTimeout(() => uni.switchTab({ url: '/pages/center/center' }), 1500)
					} else {
						this.$mytip.toast(res.msg || '设置失败')
					}
				} 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')
			},
			async getUserProfile() {
				try {
					const token = this.$getToken()
					const obj = await this.$u.get('/login/userInfo', {}, { WT: token })
					if (!obj.data) return
					const user = obj.data
					this.user = {
						userType: String(user.userType),
						oaAuth: user.oaAuth,
						cusNo: user.cusNo,
						userName: user.userName,
						openId: user.openId
					}
					if (this.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', this.user)
				} catch (e) {}
			}
		},
		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>