question_uniapp/pages/Setting/setPin.vue

<template>
	<view class="page">
		<nav-bar title="PIN code setting" bgColor="#fff"></nav-bar>
		<view style="width: 92%; margin: 10px auto; padding: 15px 10px;">
			<uni-forms label-position="top" label-width="80px" :model="model" :rules="rules" ref="model">
				<uni-forms-item label="PIN code" name="password">
					<uni-easyinput type="password" :passwordIcon="true" v-model="model.password" placeholder="Enter your PIN code" />
				</uni-forms-item>
				<uni-forms-item label="New PIN code" name="newpassword">
					<uni-easyinput type="password" :passwordIcon="true" v-model="model.newpassword" placeholder="Enter new PIN code of at least 6 digits" />
				</uni-forms-item>
				<uni-forms-item label="Confirm PIN code" name="renewpassword">
					<uni-easyinput type="password" :passwordIcon="true" v-model="model.renewpassword" placeholder="Repeat pin code of at least 6 digits" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view style="bottom: 0px; position: absolute; width:100vw; height: 60px;">
			<view class="cell_list">
				<button type="primary" round style="width: 100%;" @click="submit">Submit</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				model: {
				    password: '',
				    newpassword: '',
				    renewpassword: ''
				},
				rules: {
					password:{
						rules:[{required: true,errorMessage: 'Please input trade password'},
							{minLength: 6, maxLength: 6, errorMessage: 'Please enter a 6-digit transaction password', }],
					},
					newpassword: {rules:[{required: true,errorMessage: 'Please input new trade password'},
							{minLength: 6, maxLength: 6, errorMessage: 'Please enter a 6-digit new transaction password', }],
					},
					renewpassword:{rules:[{required: true,errorMessage: 'Re enter the new transaction password'},
							{minLength: 6, maxLength: 6, errorMessage: 'Please enter a 6-digit new transaction password', }],
					},
				}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			submit(){
				this.$refs.model.validate().then(res=>{
					if (this.model.newpassword !== this.model.renewpassword) {
						uni.showToast({
							title:'The transaction passwords entered twice are different',
							icon:'error'
						})
						return;
					}
				    this.$http.post('/api/user/change_trade_password', this.model).then(res => {
						if(res.code == 0){
							uni.showToast({
								title: res.data.mes
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						}
					});
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	body{background-color: #fff;}
	.page{min-height: 95vh;position: relative;}
	.rechargeTitle{
		font-weight: 400;font-size: 16px;color: #999999;line-height: 23px; text-align: center; margin-top: 30px;
	}
	.rechargeNet{
		font-weight: 600;font-size: 20px;color: #333;line-height: 23px; text-align: center; margin-top: 20px;
	}
	.txt{
		font-size: 14px; color:#999; font-weight: 500;
	}
	.cell_right{
		font-size: 14px; color:#333; font-weight: 500;
	}
</style>