CBB3/pages/login/forgotPassword.nvue

<template>
	<view class="app">
		<view class="top-view">
			<image class="bg" src="/static/img/login-bg.png" mode="widthFix"></image>
			<view class="inner">
				<view class="statusBar" :style="'height:'  + statusBarHeight + 'px'"></view>
				<view class="inner-body">
					<view class="prv" @tap="navigateBack()">
						<image src="/static/img/ic_back_white.png" class="icon-back"></image>
					</view>
					<image class="logoImage" src="/static/img/cbb_white.png"></image>
					<text class="label-text">忘记密码</text>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="input-view">
				<text class="input-view-title">账号</text>
				<view class="login-input">
					<input class="input" placeholder-class="login-input-text" type="number" v-model="form.mobile"
						placeholder="请输入手机号" />
				</view>

				<text class="input-view-title">验证码</text>
				<view class="login-input yzm">

					<input class="input" placeholder-class="login-input-text" type="text" v-model="form.verify"
						placeholder="请输入验证码" />
					<view class="line"></view>
					<text v-if="verifyCount <= 0" class="sbtn" @tap="getVcode">验证码</text>
					<text v-else class="no-sbtn">{{ verifyCount }} S</text>
				</view>
				<text class="input-view-title">密码</text>


				<view class="login-input pass">
					<input class="input" placeholder-class="login-input-text" type="text" v-model="form.password"
						password="*" placeholder="请输入密码" />
					<view class="easeBox" @tap="showPass = !showPass">
						<image class="ease" :src="showPass ? '/static/img/ease-open.png' : '/static/img/ease-out.png' ">
						</image>
					</view>
				</view>


				<text class="btn" @tap="tapSubmit">确认修改</text>
				<view id="captcha"></view>
			</view>
		</view>


	</view>
</template>
<style lang="scss">
	.app {
		background-color: #FFF;
	}

	.top-view {
		width: 750rpx;
		height: 843rpx;

		.bg {
			width: 750rpx;
			height: 843rpx;
		}

		.inner {
			margin-top: -843rpx;
			width: 750rpx;
			height: 435rpx;
			align-items: center;
			position: relative;

			.inner-body {
				width: 750rpx;
				align-items: center;
				padding-top: 80rpx;

				.prv {
					position: absolute;
					left: 20rpx;
					top: 20rpx;

					.icon-back {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.logoImage {
					width: 228rpx;
					height: 228rpx;
				}

				.label-text {
					padding-top: 20rpx;
					font-size: 42rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.body {
		position: relative;
		background: #fff;
		border-radius: 60rpx 60rpx 0px 0px;
		z-index: 9;
		margin: -390rpx 30rpx 0;
		padding: 0 60rpx 60rpx;

		.input-view {
			.input-view-title {
				padding-top: 55rpx;
				font-size: 32rpx;
				color: #191919;
			}

			.login-input {
				border-radius: 30rpx;
				padding: 30rpx 30rpx;
				margin-top: 26rpx;
				background-color: rgba(246, 249, 254, 1);
				flex-direction: row;
				align-items: stretch;

				.easeBox {
					justify-content: center;

					.ease {
						width: 30rpx;
						height: 22rpx;
					}
				}

				.input {
					flex: 1;
					font-size: 30rpx;

					.login-input-text {
						color: rgba(201, 204, 211, 1);
					}
				}

				&.yzm {
					align-items: center;

					.line {
						width: 1px;
						height: 36rpx;
						background: #eee;
						margin-right: 20rpx;
					}

					.sbtn {
						font-size: 12px;
						color: #DB292B;
					}

					.no-sbtn {
						font-size: 12px;
						color: #999999;
					}
				}
			}
		}

		.btn {
			background-image: linear-gradient(88deg, #FF332C, #ff6030);
			border-radius: 24rpx;
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			padding: 30rpx 0;
			color: #FAFAFA;
			margin-top: 30rpx;
		}


	}
</style>

<script>
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	import customerWiget from '@/components/ui-public/customer-wiget.vue';
	import Request from '@/library/Request';
	import utils from "@/library/utils/Comm.js"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			maoScroll,
			customerWiget
		},
		computed: {
			getWebSocket() {
				// #ifdef APP-PLUS
				const webSocket = getApp().globalData.webSocket
				// #endif
				// #ifndef APP-PLUS
				const webSocket = this.webSocket
				// #endif
				return webSocket
			}
		},
		data() {
			return {
				statusBarHeight: 20,
				form: {
					mobile: "",
					password: "",
					verify: ""
				},
				isRead: false,
				verifyCount: 0,
				showPass: false,
				captchaIns: null,
				validate: ""
			}
		},
		onLoad() {
			this.initView();
			this.$nextTick(() => {
				this.initNeCaptcha();
			});
		},

		methods: {
			...mapMutations(['setSys', 'setUser']),
			navigateBack() {
				utils.navigateBack()
			},
			initView: function() {

				uni.getSystemInfo({
					success: (res) => {
						this.statusBarHeight = res.statusBarHeight;
					}
				});

			},
			initNeCaptcha() {
				// #ifdef H5
				const options = {
					captchaId: 'c6af8490405544f8a169504b11c86fdc',
					element: '#captcha',
					protocol: 'https',
					onVerify: (err, data) => {
						if (data != null || data != "") {
							this.validate = data.validate;
							this.getVcode2();
						}
					}
				}
				options.mode = 'popup';
				initNECaptcha({
					...options
				}, ins => {
					this.captchaIns = ins
				})
				// #endif


				// #ifdef APP
				this.captchaIns = uni.requireNativePlugin('YD-Captcha')
				this.captchaIns.init({
					captcha_id: 'c6af8490405544f8a169504b11c86fdc',
					is_no_sense_mode: false
				});
				// #endif
			},

			/**
			 * 注册
			 */
			tapReg: function() {
				uni.navigateTo({
					url: "./register"
				});
			},

			getVcode: function() {
				if (this.verifyCount > 0) return;
				if (!utils.isPoneAvailable(this.form.mobile)) {
					return uni.showToast({
						title: '请输入正确的手机号码！',
						mask: true,
						icon: 'none'
					});
				}

				// #ifdef H5
				this.captchaIns.popUp();
				// #endif

				// #ifdef APP
				this.captchaIns.showCaptcha((data) => {
					var method = data.method;
					if (method == "onSuccess") {
						var data = data.data;
						this.validate = data.validate;
						this.getVcode2();
					}
				})
				// #endif

			},


			getVcode2: function() {
				uni.showLoading({
					title: "获取中..."
				});
				Request
					.post("findYzm", {
						mobile: this.form.mobile,
						validate: this.validate
					})
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							if (res.data.status == 2) {
								utils.CountDowm(res.data.time, (e, s) => {
									this.verifyCount = e;
								});
							}

							if (res.data.status == 1) {
								utils.CountDowm(120, (e, s) => {
									this.verifyCount = e;
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								mask: true,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '获取失败',
							mask: true,
							icon: 'none'
						});
						uni.hideLoading();
					});
			},


			/**
			 * 提交数据
			 */
			tapSubmit: function() {
				//手机号码
				if (this.form.mobile == "") {
					uni.showToast({
						title: "请输入手机号码",
						icon: "none",
						mask: true
					})
					return;
				}
				//手机验证号码
				//this.form.mobile
				if (!utils.isPoneAvailable(this.form.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号码",
						icon: "none",
						mask: true
					})
					return;
				}

				if (this.form.password == '') {
					uni.showToast({
						title: '请输入密码',
						mask: true,
						icon: 'none'
					});
					return;
				}


				uni.showLoading({
					title: '登录中..'
				});
				Request
					.post("findPassword", this.form)
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							this.setUser(res.data);
							this.getWebSocket.connect();
							uni.reLaunch({
								url: "../index/index"
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true
							});
						}
					})
					.catch(res => {
						uni.hideLoading();
						uni.showModal({
							title: '系统提示',
							content: '加载失败，重新点击尝试！',
							showCancel: false
						});
					});

			}

		}
	}
</script>