shuquAi/pages/user/accountSafe/updateMobile/index.vue

<template>
	<view>
		<!-- #ifdef H5 -->
		<view style="color: #fff;">
			<tn-nav-bar :bottomShadow="false" backgroundColor="#26B3A0">更换手机号</tn-nav-bar>
			<view :style="{height: tobheight+'px'}"></view>
		</view>
		<!-- #endif -->

		<view class="container">
			<view class="textl_ogin">更换手机号</view>
			<!-- 账号密码登录 -->
			<view class="login">
				<view class="input u-flex align-center">
					<u-icon name="phone-fill" color="#26B3A0" size="24"></u-icon>
					<input class="vs-flex-item" v-model="parmas.phone" :maxlength="11" placeholder="原手机号" />
				</view>

				<view class="input u-flex align-center">
					<i class="iconfont icon-yanzhengma" style="color:#26B3A0"></i>
					<input class="vs-flex-item" v-model="parmas.code" :maxlength="11" placeholder="原手机验证码" />
					<view class="" style="width: 250rpx;">
						<u-button style="width: 250rpx;" color='#26B3A0' class="custom-style"
							@tap="getCode">{{tips}}</u-button>
					</view>
				</view>
				<view class="input u-flex align-center">
					<u-icon name="phone-fill" color="#26B3A0" size="24"></u-icon>
					<input class="vs-flex-item" v-model="parmas.newPhone" :maxlength="11" placeholder="新手机号" />
				</view>
				<view class="input u-flex align-center">
					<i class="iconfont icon-yanzhengma" style="color:#26B3A0"></i>
					<input class="vs-flex-item" v-model="parmas.newCode" :maxlength="11" placeholder="新手机验证码" />
					<view class="" style="width: 250rpx;">
						<u-button style="width: 250rpx;" color='#26B3A0' class="custom-style"
							@tap="getCode1">{{tips1}}</u-button>
					</view>
				</view>
			</view>
			<view @click="handleChangePhone()" hover-class="hoversubmit" class="signinnow">修改
			</view>
		</view>
		<view class="wrap">
			<u-toast ref="uToast"></u-toast>
			<u-code :seconds="seconds" @end="" @start="" ref="uCode" @change="codeChange"></u-code>
			<u-code :seconds="seconds1" @end="" @start="" ref="uCode1" @change="codeChange1"></u-code>

		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		sendCode,
		changePhone
	} from '@/api/my/index.js'
	export default {
		data() {
			return {
				tips: '',
				seconds: 60,

				tips1: '',
				seconds1: 60,


				password: true,
				twopassword: true,
				parmas: {
					phone: '',
					newPhone: '',
					code: '',
					newCode: ''
				},
				password2: '',



				tobheight: 45,
				platform: this.$platform.get(),


				userList: [{
						title: '更换手机号',
						icon: 'account-fill',
						path: 'collect-list',
						url: '/pages/user/public/agreement?type=aboutus',
					},
					{
						title: '修改密码',
						icon: 'question-circle-fill',
						path: 'collect-list',
						url: '/pages/user/public/agreement?type=use'
					}
				],
			}
		},
		computed: {
			...mapGetters(['appInfo'])
		},
		onLoad() {

		},
		methods: {
			async handleChangePhone() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.parmas.phone) {
					uni.showToast({
						title: '请输入旧手机号',
						icon: 'none'
					})
					return;
				}
				if (!phoneReg.test(this.parmas.phone)) {
					uni.showToast({
						title: '旧手机号不合法',
						icon: 'none'
					})
					return
				}
				if (!this.parmas.code) {
					uni.showToast({
						title: '请输入原手机验证码',
						icon: 'none'
					})
					return
				}
				if (!this.parmas.newPhone) {
					uni.showToast({
						title: '请输入新手机号',
						icon: 'none'
					})
					return;
				}
				if (!phoneReg.test(this.parmas.newPhone)) {
					uni.showToast({
						title: '新手机号不合法',
						icon: 'none'
					})
					return
				}

				if (!this.parmas.newCode) {
					uni.showToast({
						title: '请输入新手机验证码',
						icon: 'none'
					})
					return
				}

				console.log('修改手机号参数', {
					mobile: this.parmas.phone,
					new_mobile: this.parmas.newPhone,
					code: this.parmas.code,
					new_code: this.parmas.newCode

				});

				let res = await changePhone({
					mobile: this.parmas.phone,
					new_mobile: this.parmas.newPhone,
					code: this.parmas.code,
					new_code: this.parmas.newCode
				})
				console.log('修改手机号返回值', res);
				if (res.code == 0) {
					uni.showToast({
						title: '更换手机号成功',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 1000);
				} else {
					uni.$u.toast(res.msg);
				}
			},

			codeChange(text) {
				this.tips = text;
			},
			codeChange1(text) {
				this.tips1 = text;
			},
			async getCode() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.parmas.phone) {
					uni.showToast({
						title: '请输入原手机号',
						icon: 'none'
					})
					return;
				}
				if (!phoneReg.test(this.parmas.phone)) {
					uni.showToast({
						title: '原手机号不合法',
						icon: 'none'
					})
					return
				}
				if (!this.$refs.uCode.canGetCode) {
					return
				}
				let res = await sendCode({
					mobile: this.parmas.phone
				})
				console.log('验证码返回值', res);
				if (res.code == 0) {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.hideLoading();
					uni.$u.toast(res.msg);
				}
			},


			async getCode1() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.parmas.newPhone) {
					uni.showToast({
						title: '请输入新手机号',
						icon: 'none'
					})
					return;
				}
				if (!phoneReg.test(this.parmas.newPhone)) {
					uni.showToast({
						title: '新手机号不合法',
						icon: 'none'
					})
					return
				}
				if (!this.$refs.uCode1.canGetCode) {
					return
				}
				let res = await sendCode({
					mobile: this.parmas.newPhone
				})
				console.log('新--验证码返回值', res);
				if (res.code == 0) {
					if (this.$refs.uCode1.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode1.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.hideLoading();
					uni.$u.toast(res.msg);
				}
			},
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>