<template>
	<view class="layout">
		<view class="title">支付密码</view>
		<input class="input" placeholder="请输入6位数字支付密码" type="number" v-model="pwd" maxlength="6"/>
		<view class="title">再次输入</view>
		<input class="input" placeholder="再次输入上方相同的支付密码" type="number" v-model="pwdSecond" maxlength="6" />
		<view :class="pwd.length == 6 && pwdSecond.length == 6 ? 'submit1' : 'submit'" @click="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwd: '',
				pwdSecond: '',
				randomCode: ''
			}
		},
		onLoad(option) {
			this.randomCode = option.randomCode ? option.randomCode : ''
		},
		methods: {
			submit() {
				if (this.pwd !== this.pwdSecond) {
					this.toast('请输入相同密码')
					return
				}
				this.$net.post('/staff/password/setting', {from: 'my', pwd: this.pwd, randomCode: this.randomCode})
					.then(res => {
						if (res.code == 200) {
							this.$store.commit('refreshSetPwdSuccess', true)
							this.$router.pop()
						} else {
							this.toast(res.message)
						}
					})
					.catch(err => {
						this.toast(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
.layout {
	width: 100%;
	height: 100%;
	position: absolute;
	background: #ffffff;
	.title {
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		line-height: 48rpx;
		margin-top: 80rpx;
		padding-left: 49rpx;
		padding-right: 49rpx;
	}
	.input {
		outline: none;
		border-bottom: solid 2rpx #FF0520;
		font-size: 32rpx;
		margin-top: 49rpx;
		margin-left: 49rpx;
		margin-right: 49rpx;
		padding-bottom: 29rpx;
	}
	.submit {
		width: 590rpx;
		height: 96rpx;
		background: #FF0520;
		opacity: 0.5;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		margin: 120rpx auto;
	}
	.submit1 {
		width: 590rpx;
		height: 96rpx;
		background: #FF0520;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		margin: 120rpx auto;
	}
}
</style>
