h5-uniapp/pages/my/safety/payword.vue

<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.mine.safety.paypwd"></myNav>

		<view class="listBox">
			<view class="width-100b height-96 line-height-96">
				<text class="font-30 bold-font">{{i18n.mine.safety.logpwd1}}</text>
			</view>
			<view class="width-100b height-96">
				<input class="width-100b height-96 font-30" type="text" v-model="pwd1" password
					:placeholder="i18n.mine.safety.lp1" />
			</view>
		</view>

		<view class="listBox">
			<view class="width-100b height-96 line-height-96">
				<text class="font-30 bold-font">{{i18n.mine.safety.logpwd2}}</text>
			</view>
			<view class="width-100b height-96">
				<input class="width-100b height-96 font-30" type="text" v-model="pwd2" password
					:placeholder="i18n.mine.safety.lp2" />
			</view>
		</view>

		<!-- 图形验证码 -->
		<view class="listBox">
			<view class="width-100b height-96 line-height-96">
				<text class="font-30 bold-font">Verification Code</text>
			</view>
			<view class="width-100b height-96 flex align-center justify-between">
				<input class="flex-1 height-96 font-30 numbold-font" type="text" v-model="captchaCode"
					placeholder="Enter code" />
				<image class="captchaImg" :src="captchaImg" mode="aspectFit" @click="loadCaptcha()"></image>
				<text class="font-36 color-0165EE margin-left-sm" @click="loadCaptcha()">↻</text>
			</view>
		</view>

		<button @click="forgot" class="cu-btn loginBtn">{{i18n.mine.safety.queren}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwd1: '',
				pwd2: '',
				captchaCode: '',
				captchaKey: '',
				captchaImg: '',
				flag: true,
				theme: ''
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onLoad() {
			this.loadCaptcha()
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			loadCaptcha() {
				this.post('/common/captcha', {}).then(res => {
					if (res.code == 1) {
						this.captchaImg = res.data.captcha_img
						this.captchaKey = res.data.captcha_key
						this.captchaCode = ''
					}
				})
			},
			forgot() {
				if (!this.flag) return
				if (this.captchaCode == '') {
					this.tos('Please enter verification code')
					return
				}
				if (this.pwd1 == '') {
					this.tos(this.i18n.mine.safety.lp1)
					return
				}
				if (this.pwd2 == '') {
					this.tos(this.i18n.mine.safety.lp2)
					return
				}
				if (this.pwd2 !== this.pwd1) {
					this.tos(this.i18n.mine.safety.lp3)
					return
				}
				uni.showLoading({ title: this.i18n.mine.safety.loading, mask: true })
				this.flag = false
				this.post('/user/xiugaipwd', {
					newpassword: this.pwd2,
					captcha: this.captchaCode,
					captcha_key: this.captchaKey,
					types: 'pay_pwd'
				}).then(res => {
					uni.hideLoading()
					this.flag = true
					if (res.code == 1) {
						this.tos(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						this.loadCaptcha()
					}
				})
			}
		}
	}
</script>

<style>
	.captchaImg {
		width: 240rpx;
		height: 80rpx;
		margin-left: 18rpx;
		flex: 0 0 auto;
		border-radius: 6rpx;
	}

	.listBox {
		width: 100%;
		/* height: 96rpx; */
		padding: 0 45rpx;
		margin-bottom: 1rpx;
		/* background-color: #FFFFFF; */
	}

	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%) !important;
		border-radius: 12rpx;
		line-height: 96rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		position: absolute;
		bottom: 5%;
		left: 50%;
		margin-left: -300rpx;
	}

	.heng {
		width: 48rpx;
		height: 4rpx;
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%) !important;
		position: absolute;
		top: 10rpx;
		transition: all 0.5s;
	}
</style>