mabao/pages/index/paypassword.vue

<template>
	<view class="main  bg-white margin-top padding-tb-sm">
		<view class="flex justify-between align-center margin-top-sm padding-lr-sm">
			<view class="flex-sub margin-right-sm">
				<u-input v-model="password" :type="type" maxlength="6" placeholder="请设置支付密码（6位数字）" :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="code" type="number" maxlength="6" 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="cu-bar bg-white tabbar" style="position: fixed;bottom: 0;width: 100%;">
			<view class="submit" style="background-color: #0B73B9;color: white;" @click="editpwd">
				立即保存
			</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) {
			this.info = store.getters['getusers']
		},
		mounted() {

		},
		data() {
			return {
				code: '',
				type: 'password',
				border: true,
				tips: '',
				seconds: 60,
				password: '',
				info: ""
			}
		},
		methods: {
			codeChange(text) {
				this.tips = 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"
					})
				}
			},
			end() {
				//倒计时结束
			},
			start: async function() {
				let res = await this.$request.post("/api/v1/common/sendVerifyCode", {
					phone: this.info.phone,
					type: 3
				})
			},
			editpwd: async function() {
				let res = await this.$request.post("/api/v1/user/updatePayPassword", {
					verify_code: this.code,
					pay_password: this.password
				})
				if (res.status == 0) {
					uni.showToast({
						title: "设置成功",
						icon: "none",
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}else{
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					})
				}
			}
		}
	};
</script>

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

	.main {}
</style>