NN2022060801/addons/utcapp/pages/setting/password.vue

<template>
	<view class="main" v-if="formData.id>0">
		<u-form labelPosition="left" :model="formData" ref="form" :labelWidth="'178rpx'">
			<u-form-item :label="lang.account" prop="formData.username">
				<u-input v-model="formData.username" :disabled="true"></u-input>
			</u-form-item>
			<u-form-item :label="lang.password" prop="formData.password">
				<u-input v-model="formData.password" :placeholder="lang.input_new_password"></u-input>
			</u-form-item>
			<u-form-item :label="lang.confirm_password" prop="formData.confirm_password">
				<u-input v-model="formData.confirm_password" :placeholder="lang.input_confirm_password">
				</u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" :label="lang.verify_code" prop="code" label-width="120">
				<u-input :border="border" v-model="formData.code" :placeholder="lang.verify_code" type="text"></u-input>
				<u-toast ref="uToast"></u-toast>
				<u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode"
					@change="codeChange" :startText="startText" :changeText="changeText" :endText="endText">
				</u-verification-code>
				<u-button slot="right" class="send-code" type="primary" size="mini" @click="sendCode()">{{tips}}
				</u-button>
			</u-form-item>
		</u-form>
		<view class="u-form-submit">
			<u-button class="btn" @click="submit">{{lang.confirm_modify}}</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seconds: 60,
				codeTips: '',
				tips: '',
				border: false,
				labelPosition: 'left',
				startText: '获取',
				changeText: 'X秒获取',
				endText: '重新获取',
				formData: {
					id: 0,
					username: '',
					password: '',
					confirm_password: '',
					password: '',
					code: '',
				},
			}
		},
		onLoad(options) {
			this.getInfo()
		},
		methods: {
			start() {
				console.log('开始')
			},
			end() {
				console.log('结束')
			},
			// 获取验证码
			codeChange(text) {
				this.tips = text;
			},
			sendCode() {
				console.log(this.formData.username)
				if (this.formData.username == '') {
					this.$u.toast(this.lang.account_error)
					return false;
				}
				console.log(444)

				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.$request.send('/api/sendmsm', {
							username: this.formData.username,
							scene: 'password'
						}, 'POST').then(res => {
							//提示是否发送成功
							if (res.success) {
								this.$u.toast(res.msg);
								setTimeout(function() {
									_this.gotoPage('/pages/login/login')
								}, 800)
							} else {
								this.$u.toast(res.msg);
								this.textChange(0)
							}

						})
					}, 2000);
				} else {
					this.$u.toast('请不要频繁发送');
				}
			},
			secondsChange(index) {
				this.seconds = index == 0 ? 60 : index == 1 ? 10 : 5;
			},
			textChange(index) {
				if (index == 0) {
					this.startText = '点一下获取';
					this.changeText = '重新获取Xs';
					this.endText = '再次获取'
				} else {
					this.startText = '获取';
					this.changeText = 'X秒获取';
					this.endText = '重新获取'
				}
			},
			// 获取收款方式详情
			getInfo() {
				let _this = this;
				this.$request.sendToken('/api/user/info', {}, 'POST').then(res => {
					this.loaded = true;
					if (res.success == true) {
						_this.formData.id = res.data.id;
						_this.formData.username = res.data.username;
					} else {
						this.$u.toast(res.msg);
					}
				})
			},
			// 提交
			submit() {
				let _this = this;
				if (this.formData.password == '') {
					this.$u.toast(this.lang.input_new_password)
					return false;
				}
				if (this.formData.confirm_password == '') {
					this.$u.toast(this.lang.input_confirm_password)
					return false;
				}

				if (this.formData.confirm_password != this.formData.password) {
					this.$u.toast(this.lang.confirm_password_error)
					return false;
				}

				if (this.formData.code == '') {
					this.$u.toast(this.lang.input_code)
					return false;
				}

				// 修改
				uni.showModal({
					title: this.lang.confirm_title,
					content: this.lang.cofirm_set_password,
					cancelText: this.lang.cancel,
					confirmText: this.lang.confirm,
					success: function(res) {
						if (res.confirm == true) {
							this.$request.sendToken('/api/user/modify', this.formData, 'POST').then(res => {
								this.loaded = true;
								if (res.success == true) {
									this.$u.toast(res.msg);
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										})
									}, 2000)

								} else {
									this.$u.toast(res.msg);
								}
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 19rpx 28rpx 38rpx;
		color: #6e6c6b;

		.u-form {
			margin-top: 28rpx;
			background-color: #2c2b2b;
			border-radius: 10rpx;

			.u-form-item {
				padding: 20rpx;
				color: #bb955e !important;

				.u-form-item__body {

					.u-btn--primary {
						background-color: #bb955e;
					}

					.u-input {
						color: #6e6c6b !important;

						uni-input {
							color: #6e6c6b !important;
						}
					}
				}


			}

			.u-form-item:last-child {
				border: none;


			}

			.u-border-bottom:after {
				border-color: rgba(249, 244, 241, 0.32);
			}

			.u-border-bottom:last-child:after {
				border-color: transparent;
			}
		}

		.u-radio-group {
			color: #6e6c6b !important;
		}


		.u-form-submit {
			margin-top: 56rpx;
			border-radius: 10rpx;
			padding-bottom: 28rpx;

			.u-btn {
				border: 2rpx solid #bb955e;
				background-color: #2c2b2b;
				padding: 10rpx 22rpx;
				color: #bb955e;
				height: auto;
			}

			.u-default-hover {
				border: 2rpx solid #bb955e !important;
				background-color: #222323 !important;
				padding: 10rpx 22rpx;
				color: #bb955e !important;
				height: auto;
			}
		}

		.u-switch--on {
			background-color: #22a01a !important;
			// background-color: #bb955e !important;
		}

	}
</style>