dev/dcp-app-gate/pages/profile/profileSetUp/changeMobileNumber.vue

<template>
	<view>
		<u-navbar :back-text="i18n('Back')" title-width="300" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
		 :background="background" :title="$i18n.locale=='zh'?'更改手机号':'Change mobile number'"></u-navbar>
		<view class="Unbundling">
			{{i18n('remarkSecPhone1')}}:{{salfPhone}}
		</view>
		<view class="Unbundling" style="font-size: 22upx;">{{i18n('remarkSecPhone2')}}</view>
		<view class="Unbundling-input">
			<u-form :model="form" ref="uForm">
				<!-- <u-form-item label="手机号" :label-width="120">
					<u-input v-model="form.moblie" :border="true" placeholder="请输入手机号" />
				</u-form-item> -->
				<u-form-item label="" :label-width="120" style="">
					<u-input v-model="form.code" :border="true" :placeholder="i18n('EnterVerification')" />
					<text class="code-send" v-if="showText==true" @click="getCodeFor">{{i18n('GetVerification')}}</text>
					<text v-else class=" code">{{second}}s{{i18n('resend')}}</text>
				</u-form-item>
			</u-form>
			<view class="next">
				<u-button type="primary" @click="validCode">{{i18n('Next')}}</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import listCell from '@/components/JumpBox';
	export default {
		components: {
			listCell
		},
		data() {
			return {
				second: 60,
				showText: true,
				form: {
					code: '', //验证码
				},
				moblieNum: '', //手机号
				moblie: '', //手机号
				salfPhone: '',
				phoneUserNum: "",
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
			};
		},
		onShow() {
			// this.phoneUserNum = uni.getStorageSync('loginAccount');
			this.getUserInfoById();


		},
		methods: {
			async getUserInfoById() {
				const result = await this.$myRequest({
					url: '/uc/securitySetting/getUserInfoById',
				});
				this.moblie = result.data.userPreferredMobile;
				if (result) {
					// this.moblieNum = JSON.stringify(result.data.userPreferredMobile);
					this.moblieNum = result.data.userPreferredMobile;
					if (this.moblieNum.length < 12) {
						this.salfPhone = this.moblieNum.substr(0, 3) + '****' + this.moblieNum.substr(7, 4);
					}else{
						this.salfPhone = this.moblieNum.substr(4, 3) + '****' + this.moblieNum.substr(11, 4);
					}

					console.log(this.moblieNum)
					console.log(this.salfPhone)
				} else {
					this.msg(result.msg, "error");
				}
			},
			// 通用跳转
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},
			//校验验证码
			async validCode() {
				if (!this.form.code) {
					this.msg(this.i18n('Verificationcodecannotbeempty'), "warning");
					return false;
				}
				const result = await this.$myRequest({
					url: '/uc/securitySetting/validCode',
					data: {
						mobile: this.moblie,
						code: this.form.code
					}
				});
				if (result.status == '200') {
					this.$mRouter.push({
						route: '/pages/profile/profileSetUp/changeNewMobileNumber'
					});
				} else {
					this.msg(result.msg, "error");
				}

			},
			//获取验证码信息
			async getCodeFor() {
				let language = this.$i18n.locale;
				//获取验证码信息
				const result = await this.$myRequest({
					url: '/ums/umsUsers/registCode',
					data: {
						account: this.moblie,
						service: "TX",
						language
					}
				});
				if (result.status == '200') {
					this.msg(this.i18n('Verificationcodehasbeensent'), "success");
				} else {
					this.msg(result.msg, "error");
				}

				this.showText = false
				let interval = setInterval(() => {
					let times = --this.second
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.second = 60
					this.showText = true
				}, 60000)
			},
			msg(msg, type) {
				if (msg == 'error') {
					msg = this.i18n('ThesystemisbusyPleasetryagainlater') + "！" //系统繁忙，请稍后再试
				}
				return this.$refs.uToast.show({
					title: msg,
					type: type,
					// url: '/pages/user/index'
				})
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body.pages-profile-profileSetUp-setUp uni-page-body {
		background-color: #fff !important;

		.Unbundling {
			margin: 30upx 40upx 40upx 40upx;
			color: #333;
			font-size: 38upx;
			text-align: center;
		}

		.Unbundling-input {
			margin: 0 40upx;

			.uni-input {
				display: inline-block;
				font-size: 30upx;
				line-height: 90upx;
				height: 90upx;
				min-height: 90upx;
				overflow: hidden;
				border: 1px solid #ccc;
				width: 70%;
				vertical-align: middle;
				text-indent: 2em;
			}

			.getCode {
				margin-left: 20upx;
				color: #0000ff;
			}

			.send {
				margin-left: 20upx;
			}

			.code-send {
				margin-left: 48upx;
				color: #0000BF;
			}

			.next {
				margin-top: 100upx;
			}
		}
	}
</style>