frontend-app/pages/mine_transaction_password/mine_transaction_password.vue

<template>
	<view class="mine_transaction_password">
		<Header
			leftTitle="交易密码设置" 
			left-path-type="navigateTo" 
			leftPath="/pages/mine_settings/mine_settings" 
		/>
		<view class="_transaction_pwd_content">
			<view class="rwa_add_form">
				<view class="rwa_add_item">
					<view class="rwa_add_item_title">手机号码</view>
					<up-input
					    border="surround"
					    v-model="mobile"
						:customStyle="inputCss"
						disabled
					></up-input>
				</view>
				<view class="rwa_add_item">
					<view class="rwa_add_item_title">验证码</view>
					<up-input
						placeholder="请输入手机验证码"
						border="surround"
						v-model="form.smsCode"
						:customStyle="inputCss"
					>
						<template #suffix style="margin-right: 10rpx;">
							<view v-if="countdown" class="code-warp">
								<up-count-down :time="60 * 1000" format="ss" @finish="countdown = false"></up-count-down>
								<text style="margin-left: 10rpx;">s</text>
							</view>
							<view v-else @click="getMobileCode" class="code_msg">
								获取验证码
							</view>
						</template>
					</up-input>
				</view>
				<view class="rwa_add_item">
					<view class="rwa_add_item_title">交易密码</view>
					<up-input
					    placeholder="请输入交易密码"
					    border="surround"
					    v-model="form.tradePw"
						:customStyle="inputCss"
					></up-input>
					<view class="rwa_add_item_msg">注：密码只能6位数字</view>
				</view>
			</view>
			<view class="add_but_css" @click="addPwd">
				创建
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header.vue';
	import { getTradeSmsCode,resetTradePw } from '@/api/auth.js'
	import { getUserInfo } from '@/api/auth.js';
	
	export default {
		components:{Header},
		data() {
			return {
				userData:{},
				inputCss:{
					"height":'80rpx',
					"background": "#F5F5F5",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				mobile:'',
				form:{
					smsCode:'',
					tradePw:'',
				},
				countdown:false,
			};
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			// 查询用户等级
			async getUserInfo(){
				const result = await getUserInfo();
				if(result && result.bizcode === 100){
					const data = result.data;
					this.mobile = data.mobile || {};
				}
			},
			/**
			 * 获取手机验证码
			 */
			async getMobileCode(){
				this.countdown = true;
				const response = await getTradeSmsCode();
				if(response && response.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: response.msg,
					});
				}else{
					this.countdown = false;
				}
			},
			// 添加密码
			async addPwd(){
				const params = this.form;
				if(!params.smsCode){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入验证码",
					});
					return;
				}
				if(!params.tradePw){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请设置交易密码",
					});
					return;
				}else{
					const regex = /^\d{6}$/;
					if(!/^\d{6}$/.test(params.tradePw)){
						this.$refs.uToastRef.show({
							type: 'error',
							message: "交易密码只能6位数字",
						});
						return;
					}
				}
				delete params.mobile;
				const response = await resetTradePw(params);
				if(response && response.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: "设置成功",
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/mine_settings/mine_settings',
						})
					},2000)
				}
			}
		}
	}
</script>

<style lang="scss">
.mine_transaction_password{
	height: calc(100vh - 0rpx);
}
._transaction_pwd_content{
	padding: 30rpx;
}
.rwa_add_form{
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 60rpx;
	.rwa_add_item{
		margin-bottom: 20rpx;
		.rwa_add_item_title{
			margin-bottom: 10rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
		}
		.rwa_add_item_msg{
			font-size: 20rpx;
			margin-top: 10rpx;
			color: red;
		}
	}
}
</style>