zh_order_food_xcx/pages-my/set-user-phone.vue

<template>
	<view class="flex-common-css bgc-f">
		<Nav title=" " titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css">
			<view class="content-box box-border-box">
				<view class="fw-600 fs-48 fc-3 mb-16">
					更换手机号
				</view>
				<view class="fs-28 fc-6 mb-32">
					一个手机号只能绑定一个账号，绑定的手机账号禁止修改。
				</view>
				<view class="phone-box mb-22">
					<image class="icons" src="@/static/img/my/yzm-icons.png" mode=""></image>
					<input v-model="formData.phone" type="number" class="uni-input b-rad-200" focus placeholder="请输入手机号" />
				</view>
				<view class="flex-justify-space mb-80">
					<view class="phone-box mr-24 common-view-css">
						<image class="icons" src="@/static/img/my/yzm-icons.png" mode=""></image>
						<input v-model="formData.code" type="number" class="uni-input b-rad-200" focus placeholder="请输入验证码" />
					</view>
					<view class="get-code-box" @click="getCode()">
						<view class="get-but fc-57CAFF fs-32 text-align-center b-rad-200">
							{{codeText}}
						</view>
					</view>
				</view>
				<view class="but fs-32 fc-f fw-600 b-rad-200 text-align-center bgc-41ABF5" @click="save()">
					确认
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {userPhone} from '@/api/member.js';
	import {getCode} from '@/api/common.js';
	import tools from '@/service/tools';
	export default {
		components: {},
		data() {
			return {
				formData: {
					phone: '',
					code: ''
				},
				isAJAX:false,
				isCode:false,
				codeText:'获取验证码',
			};
		},
		methods:{
			getCode(){
				if(!this.formData.phone){
					return tools.error('请输入手机号')
				}
				if (this.isCode) {
					return
				}
				this.isCode = true;
				getCode({phone:this.formData.phone,send_type:'update_phone'}).then((res)=>{
					if(res.code === 1){
						this.codeText = 60;
						let timer = setInterval(() => {
						  this.codeText -= 1;
						  if (this.codeText <= 0) {
						    clearInterval(timer);
							this.isCode = false;
							this.codeText = '获取验证码'
						  }
						}, 1000);
					}else{
						this.isCode = false;
						tools.error('获取验证码失败，请稍后重试')
					}
				})
				
			},
			
			save(){
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				userPhone(this.formData).then((res)=>{
					if(res.code === 1){
						this.isAJAX = false;
						tools.success('修改成功');
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages-my/user-info'
							})
						},1500)
						
					}else{
						this.isAJAX = false;
						tools.error(res.msg);
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content-box {
		padding: 32rpx 40rpx 0;
	}

	.phone-box {
		position: relative;
	}

	.uni-input {
		// width: 100%;
		background: #F6F6F6;
		height: 92rpx;
		line-height: 92rpx;
		padding: 0 0 0 68rpx;
	}

	.icons {
		position: absolute;
		top: 30rpx;
		left: 24rpx;
		width: 32rpx;
		height: 32rpx;
	}
	.get-code-box{
		width: 208rpx;
	}
	.get-but{
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		border: 2rpx solid #57CAFF;
	}
	.but{
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
	}
</style>