zhxg_xsbdV1.0/pages/PhoneNumber/PhoneNumber.vue

<template>
	<view class="updata-number">
		<view class="info-message">
			<text class="line">请检查下方手机号是否为当前在用号码</text>
			<text class="line">如不是请修改</text>
			<text class="line">无误后点击"确认"按钮提交</text>
			<text class="line">我们将按此手机号为你注册学校企业微信账号</text>
		</view>
		<view class="list">
			<view class="sm-list" v-for="(item, index) in infoList" :key="index">
				<text>{{ item.label }}</text>
				<text>{{ item.value }}</text>
			</view>
			<view class="sm-list">
				<u--form labelPosition="left" :model="model1" ref="uForm" :borderBottom="false">
					<u-form-item label="手机号码" prop="userInfo.sjh" borderBottom ref="item1" :labelWidth='200'
						:borderBottom="false">
						<u--input v-model="model1.userInfo.sjh" border="none" placeholder="请确认手机号码"
							input-align="right"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<zero-loading v-if="loading"></zero-loading>
			<button @click="doEdit" class="save-button">确认</button>
			<FloatBall />
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		updateNumber,
		GetOwnInfo
	} from "@/api/validApi.js";
	import {
		confirmHmqr
	} from "@/api/toApi.js";
	import FloatBall from "@/pages/compoents/FloatBall.vue";

	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				infoList: [],
				model1: {
					userInfo: {
						sjh: ''
					}
				},
				loading: false,
				xgid: '',

			};
		},
		async onLoad() {
			await this.loadUserInfo();
		},
		methods: {
			async loadUserInfo() {
				try {
					const {
						code,
						data
					} = await GetOwnInfo();
					if (code === 200) {
						this.infoList = [{
								label: '姓名',
								value: data.xsxm
							},
							{
								label: '性别',
								value: data.xb
							},
							{
								label: '考生号',
								value: data.ksh
							},
							{
								label: '身份证号',
								value: data.sfzh
							}
						];
						this.model1.userInfo.sjh = data.sjh;
						this.xgid = data.id;
					}
				} catch (error) {
					console.error('获取信息出错', error);
				}
			},
			async doEdit() {
				const phone = this.model1.userInfo.sjh.trim();
				if (!/^[0-9]{11}$/.test(phone)) {
					wx.showToast({
						title: '手机号必须是11位数字',
						icon: 'none',
						duration: 2000
					});
					this.model1.userInfo.sjh = '';
					return;
				}

				const payload = {
					id: this.xgid,
					isChangeSJHM: 1,
					sjh: phone
				};

				try {
					this.loading = true;
					const response = await updateNumber(payload);
					if (response.code === 200) {
						wx.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 1500
						});
						await this.confirmAndRedirect();
					} else {
						wx.showToast({
							title: '修改失败',
							icon: 'none',
							duration: 2500
						});
					}
				} catch (error) {
					console.error('提交时出错', error);
					wx.showToast({
						title: '提交时出错',
						icon: 'none',
						duration: 1500
					});
				} finally {
					this.loading = false;
				}
			},
			async confirmAndRedirect() {
				try {
					const res = await confirmHmqr();
					if (res.code == 200) {
						uni.redirectTo({
							url: "/pages/newindex/newindex"
						});
					} else {
						wx.showToast({
							title: '确认请求失败',
							icon: 'none',
							duration: 1500
						});
					}
				} catch (error) {
					console.error('确认请求时出错', error);
					this.$refs.uToast.show({
						type: "error",
						message: '请求失败',
						duration: 1500
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.updata-number {
		 .info-message {
		    padding: 10px;
		    background-color: #f8d7da;
		    color: #721c24;
		    border: 1px solid #f5c6cb;
		    border-radius: 5px;
		    // margin-bottom: 10px;
		    font-family: Arial, sans-serif;
		    font-size: 14px;
		  }
		  .line {
		    display: block;
		    text-indent: 20px; /* 控制缩进 */
		    margin-bottom: 8px; /* 控制行间距 */
		  }
		.list {
			display: flex;
			flex-direction: column;
			width: 100%;

			.sm-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				width: 722rpx;
				height: 60rpx;
				border-bottom: 1px solid #EFEFEF;

				text:nth-child(1) {
					margin-top: 15px;
					color: #494949;
				}

				text:nth-child(2) {
					margin-top: 15px;
					color: #808080;
				}

			}
		}

		.save-button {
			position: fixed;
			bottom: 100rpx;
			margin-left: 60rpx;
			width: 80%;
			border-radius: 50rpx;
			background-color: #38B865;
			color: white;
		}
	}
</style>