dev/dcp-app-gate/pages/profile/profileSetUp/changeNewMobileNumber.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.locale=='zh'?'请输入新的手机号码，验证码会发送到新手机上':'Please enter a new mobile phone number and the verification code will be sent to the new mobile phone'}}
		</view>
		<view class="Unbundling-input">
			<u-form :model="form" ref="uForm">
				<u-form-item label="" :label-width="120">
					<view class="moblie">
						<view @click="toGR" style="display: inline-block;">
							<text
								style="max-width:106upx; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;display: inline-block;vertical-align: middle;">
								{{selectName}}</text>
							<text style="vertical-align: middle;"> ({{'+' + select}})</text>
						</view>
					</view>
					<u-input v-model="form.moblie" :border="true" :placeholder="i18n('EnterMobile')" />
				</u-form-item>
				<u-form-item label="" :label-width="120" style="">
					<u-input v-model="form.validCode" :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="update">{{i18n('submit')}}</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import listCell from '@/components/JumpBox';
	import {
		addIntegral
	} from '@/components/addPointDetailByTaskDict'
	export default {
		components: {
			listCell,
			addIntegral
		},
		data() {
			return {
				second: 60,
				showText: true,
				form: {
					moblie: '',
					validCode: '',
				},
				select: '0086',
				selectName: this.$i18n.locale == 'zh' ? '中国' : 'China',
				selectList: '',
				regLogStyle: '3',
				phoneUserNum: "",
				active: '0',
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
			};
		},
		onLoad(options) {
			this.selectList = options.data ? JSON.parse(options.data) : {};
			this.select = this.selectList.id ? this.selectList.id : this.select;
			let countryName = this.$i18n.locale == 'zh' ? this.selectList.cnValue : this.selectList.enValue;
			this.selectName = countryName ? countryName : this.selectName;
		},
		onShow() {

		},
		methods: {
			toGR() {
				uni.navigateTo({
					url: '/pages/public/GlobalRoaming?regLogStyle=' + this.regLogStyle
				})
			},
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},
			async update() {
				if (!this.form.moblie) {
					this.msg(this.i18n('Mobilephonenumbercannotbeempty'), "warning");
					return;
				}
				if (!this.form.validCode) {
					this.msg(this.i18n('Verificationcodecannotbeempty'), "warning");
					return false;
				}
				this.phoneUserNum = this.select + this.form.moblie;

				const result = await this.$myRequest({
					url: '/uc/securitySetting/updateMobile',
					data: {
						mobile: this.phoneUserNum,
						code: this.form.validCode
					}
				});
				if (result.status == '200') {
					this.msg('绑定成功', "success");
					addIntegral("point_task_bind_phone", "20");
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/profile/profileSetUp/accountSecurity'
						})
					}, 1500);
				} else {
					if (this.$i18n.locale == 'zh') {
						this.msg(result.msg, "error");
					} else {
						this.msg(
							'Please confirm that the mobile phone number is not registered and the verification code is entered correctly',
							"error");
					}
				}

			},
			async getCodeFor() {
				if (!this.form.moblie) {
					this.msg(this.i18n('Mobilephonenumbercannotbeempty'), "warning");
					return false;
				}
				let language = this.$i18n.locale;
				this.phoneUserNum = this.select + this.form.moblie;
				//获取验证码信息
				const result = await this.$myRequest({
					url: '/ums/umsUsers/registCode',
					data: {
						account: this.phoneUserNum,
						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;

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

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

			.moblie {
				color: #0000BF;
				margin-right: 20upx;
			}

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