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="">
				立即保存
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {

		},
		mounted() {

		},
		data() {
			return {
				value: '',
				newphone: "",
				newcode: "",
				type: 'number',
				border: true,
				tips: '',
				newtips: "",
				seconds: 60,
				newseconds: 60
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			codeChange1(text) {
				this.newtips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.showToast({
							title: "验证码已发送",
							icon: "none"
						})
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.showToast({
						title: "结束后再发送",
						icon: "none"
					})
				}
			},
			getnewCode() {
				if (this.$refs.newuCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.showToast({
							title: "验证码已发送",
							icon: "none"
						})
						// 通知验证码组件内部开始倒计时
						this.$refs.newuCode.start();
					}, 2000);
				} else {
					uni.showToast({
						title: "结束后再发送",
						icon: "none"
					})
				}
			},
			end() {
				uni.showToast({
					title: "倒计时结束",
					icon: "none"
				})
			},
			start() {
				uni.showToast({
					title: "倒计时开始",
					icon: "none"
				})
			},
			newend() {
				uni.showToast({
					title: "倒计时结束",
					icon: "none"
				})
			},
			newstart() {
				uni.showToast({
					title: "倒计时开始",
					icon: "none"
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.main {}
</style>