FE_occupationlab_miniProgram/components/realName/realName.vue

<template>
	<uni-popup ref="alertDialog" :is-mask-click="false">
		<view class="realname-wrap">
			<view class="realname-form">
			<uni-forms label-width="70" label-align="right">
				<uni-forms-item label="真实姓名" required>
					<uni-easyinput type="text" v-model.trim="realNameForm.userName" placeholder="请输入真实姓名" />
				</uni-forms-item>
				<uni-forms-item label="学号">
					<uni-easyinput type="text" v-model.trim="realNameForm.workNumber" placeholder="请输入学号" />
				</uni-forms-item>
			</uni-forms>
			</view>
			<view class="btn" @click="realNameSubmit">确认</view>
		</view>
	</uni-popup>
</template>

<script>
	import { checkUserNameOrWorkNumber, updateUserNameOrWorkNumber } from '@/apis/modules/user.js'
	export default {
		data() {
			return {
				realNameForm: {
					userName: '',
					workNumber: '',
				},
			}
		},
		mounted() {
			console.log('realname:')
			// this.handleRealName()
		},
		methods: {
			// 提示填写姓名（登录后调用一次）
			async handleRealName () {
				const res = await checkUserNameOrWorkNumber()
				// 如果没有真实姓名，则弹框提示填写
				if (!res.hasName) this.realNameForm.workNumber = res.workNumber
				this.$refs.alertDialog[res.hasName ? 'close' : 'open']()
			},
			// 真实姓名提交
			async realNameSubmit() {
				const form = this.realNameForm
				if (!form.userName) return this.$util.errMsg('请输入真实姓名！')
				await updateUserNameOrWorkNumber({
					userName: form.userName,
					workNumber: form.workNumber
				})
				this.$refs.alertDialog.close()
			},
		}
	}
</script>

<style scoped lang="scss">
.realname-wrap {
	width: 460rpx;
	background-color: #fff;
	border-radius: 20rpx;
	.realname-form {
		padding: 30rpx 30rpx 0;
	}
	.btn {
		flex: 1;
		padding: 22rpx 16rpx;
		font-size: 24rpx;
		color: #007EFF;
		text-align: center;
		border-top: 1px solid #eee;
	}
}
</style>