mabao/pages/index/editphone.vue

<template>
	<view class="main  bg-white margin-top padding-tb-sm">
		<view class="flex justify-between align-center padding-lr-sm">
			<view class="flex-sub margin-right-sm">
				<u-input v-model="value" :type="type" placeholder="请输入原绑定电话验证码" :border="border" />
			</view>
			<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
			<u-button @click="getCode">{{tips}}</u-button>
		</view>
		<view class="flex justify-between align-center margin-top-sm padding-lr-sm">
			<view class="flex-sub margin-right-sm">
				<u-input v-model="newphone" :type="type" placeholder="请输入新号码" :border="border" />
			</view>
		</view>
		<view class="flex justify-between align-center margin-top-sm padding-lr-sm">
			<view class="flex-sub margin-right-sm">
				<u-input v-model="newcode" :type="type" placeholder="请输入新号码验证码" :border="border" />
			</view>
			<u-verification-code :seconds="newseconds" @end="newend" @start="newstart" ref="newuCode" @change="codeChange1"></u-verification-code>
			<u-button @click="getnewCode">{{newtips}}</u-button>
		</view>
		<view class="cu-bar bg-white tabbar" style="position: fixed;bottom: 0;width: 100%;">
			<view class="submit" style="background-color: #0B73B9;color: white;" @click="savephone">
				立即保存
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import store from '@/store'
	export default {
		onLoad(options) {

		},
		mounted() {
			this.info = store.getters['getusers']
		},
		data() {
			return {
				value: '',
				newphone: "",
				newcode: "",
				type: 'number',
				border: true,
				tips: '',
				newtips: "",
				seconds: 60,
				newseconds: 60,
				info: {}
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			codeChange1(text) {
				this.newtips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$refs.uCode.start();
				} else {
					uni.showToast({
						title: "结束后再发送",
						icon: "none"
					})
				}
			},
			getnewCode() {
				if (!this.$util.isNum(this.newphone)) {
					uni.showToast({
						title: "手机号不正确",
						icon: "none",
					})
					return false
				}
				if (!this.$util.isPhoneNumber(this.newphone)) {
					uni.showToast({
						title: "手机号不正确",
						icon: "none"
					})
					return false
				}
				if (this.$refs.newuCode.canGetCode) {
					this.newstart()
				} else {
					uni.showToast({
						title: "结束后再发送",
						icon: "none"
					})
				}
			},
			end() {

			},
			start: async function() {
				let res = await this.$request.post("/api/v1/common/sendVerifyCode", {
					phone: this.info.phone,
					type: 4
				})
			},
			newend() {

			},
			newstart: async function() {
				let res = await this.$request.post("/api/v1/common/sendVerifyCode", {
					phone: this.newphone,
					type: 5
				})
				if (res.status == 0) {
					
				} else {
					uni.showToast({
						title: res.message,
						icon:"none"
					})
					this.$refs.newuCode.reset()
				}
			},
			savephone: async function() {
				if (this.value == "" || this.newphone == "" || this.newcode == "") {
					uni.showToast({
						title: "请填写完整",
						icon: "none"
					})
					return false
				}
				let res = await this.$request.post("/api/v1/user/changeUserPhone", {
					old_verify_code: this.value,
					new_verify_code: this.newcode,
					new_phone: this.newphone
				})
				console.log(res)
				if (res.status == 0) {
					uni.showToast({
						title: "保存成功",
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.main {}
</style>