websoft-uniapp/package/user/pay-password.vue

<template>
	<view class="page">
		<uni-card title="设置支付密码" :border="false" :is-shadow="false" :padding="'10px 6px'">
			<uni-forms ref="form" :modelValue="form" :rules="rules" :label-width="90">
				<uni-forms-item label="支付密码" name="password" required>
					<uv-code-input mode="box" :space="0" :maxlength="6" hairline v-model="form.password" dot @change="change" @finish="finish"></uv-code-input>
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="phone" required>
					<uv-input placeholder="手机号码" disabled v-model="userInfo.mobile" maxlength="11" border="bottom">
						<!-- vue3模式下必须使用v-slot:suffix -->
						<template v-slot:suffix>
							<uv-code ref="uCode" @change="codeChange" :seconds="seconds" changeText="X秒重新获取"></uv-code>
							<uv-button @click="getSmsCode" :text="tips" shape="circle"></uv-button>
						</template>
					</uv-input>
					<!-- <uv-input placeholder="手机号码" disabled v-model="userInfo.mobile" maxlength="11"></uv-input> -->
				</uni-forms-item>
				<uni-forms-item label="短信验证码" name="code" required>
					<uv-code-input mode="box" :space="0" :maxlength="6" hairline v-model="form.code" ></uv-code-input>
				</uni-forms-item>
		
				<uv-button class="submit-btn"
					:customStyle="{background: 'linear-gradient(to right, #70b915, #008e04)',borderRadius: '30px',color: '#ffffff'}"
					text="确定修改" @click="submit"></uv-button>
			</uni-forms>
		</uni-card>
		<!-- 登录组件 -->
		<ws-login ref="login" :logo="logo" @done="reload" />
	</view>
</template>

<script>
	import * as Api from '@/api/shop/userAddress';
	import * as MpMenuApi from '@/api/cms/mp-menu/index';
	import { sendSmsCaptcha, updatePayPassword, getWxOpenId } from '@/api/passport/login';
	import {
		openUrl
	} from '@/utils/common';
	import {
		useUserStore
	} from '@/store/modules/user';
	import {
		useCarStore
	} from '@/store/modules/car';

	const userStore = useUserStore();
	const carStore = useCarStore();

	export default {
		data() {
			return {
				list: [],
				isLogin: false,
				form: {
					name: '',
					phone: '',
					code: '',
					password: ''
				},
				tips: '点击获取',
				logo: '',
				userInfo: {},
				rules: {
					mobile: {
						rules: [{
							required: true,
							format: 'number',
							errorMessage: '请输入手机号码',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入支付密码',
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入短信验证码',
						}]
					},
				}
			}
		},
		onLoad() {
			this.reload()
		},
		onLoad() {
			if(!this.isLogin){
				this.reload()
			}
		},
		methods: {
			async reload(e) {
				const app = this
				// 当前登录用户信息
				const userInfo = await userStore.fetchUserInfo();
				if (Object.keys(userInfo).length > 0) {
					app.isLogin = true
					app.userInfo = userInfo
					app.form.phone = userInfo.phone
				} else {
					app.isLogin = false
					app.openLogin()
				}
			},
			navTo(item) {
				if (!this.isLogin) {
					this.$refs.login.open('bottom')
					return false;
				}
				openUrl(item);
			},
			// 弹出登录提示框
			openLogin() {
				if (!this.isLogin) {
					this.$refs.login.open('bottom')
					return false;
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getSmsCode() {
				const {
					phone
				} = this.form
				if (!phone || phone.length != 11) {
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					})
					return false;
				}
				if (this.$refs.uCode.canGetCode) {
					sendSmsCaptcha({
						phone
					}).then(res => {
						console.log('res: ', res);
					})
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.showToast({
							title: '验证码已发送'
						});
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				} else {
					uni.showToast({
						title: '倒计时结束后再发送',
						icon: 'none'
					})
				}
			},
			// 触发提交表单
			submit() {
				const { form } = this
				this.$refs.form.validate().then(res => {
					updatePayPassword(form).then(message => {
						uni.showToast({
							title: '设置成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					}).catch((err) => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						})
					})
				}).catch(err => {
				})
			}
		}
	}
</script>
<style>
	page {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #f0f2f5;
		width: 750rpx;
		overflow-x: hidden;
	}
</style>
<style lang="scss">
	.submit-btn {
		width: 600rpx !important;
		margin: 40rpx auto;
	}
</style>