LocalLivingServicesUniapp/pages/login/login.vue

<template>
	<view class="zai-box">
		<app-update ref="app_update"></app-update>
		<!-- <scroll-view scroll-y class="page"> -->
		<!-- <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]"> -->
		<!-- <image src="../../static/login/bejing.png" mode='aspectFit' class="zai-header "></image> -->
		<view class="zai-header"></view>
		<!-- <view class="text-center" >
				<image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode='aspectFit' class="zai-logo "></image>
				<view class="zai-title text-shadow ">本地生活 </view>
			</view> -->
		<view class="box padding-lr-xl login-paddingtop">
			<block>
				<view class="box-user flex align-center " :class="[shape == 'round' ? 'round' : '']">
					<!-- <view class="title"><text class="cuIcon-people margin-right-xs"></text>手机号:</view> -->
					<image src="../../static/login/Frame (27).png" mode='aspectFit' class="zai-logo "></image>
					<input placeholder="请输入手机号" name="input" v-model="userName"></input>
				</view>
				<view class="box-user flex align-center" :class="[shape == 'round' ? 'round' : '']">
					<!-- <view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view>
						<input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" /> -->
					<image src="../../static/login/Frame (26).png" mode='aspectFit' class="zai-logo "></image>
					<input placeholder="请输入密码" :password="!showPassword" v-model="password"></input>
					<view class="action text-lg">
						<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
							@click="changePassword"></text>
					</view>
				</view>
				<view style="margin-top: 216upx;">
					<button class="cu-btn round lg  bg-blue " style="display: flex;" :loading="loading"
						:class="[shape == 'round' ? 'round' : '']" @tap="onLogin"><text space="emsp">{{ loading ? "登录中..." : " 登录"}}</text>
					</button>
				</view>
				<view class="foote" style="display: flex;align-items: center;margin-top: 40rpx;justify-content: center;">
					<view class="text-color" @tap="nav('register')" style="margin-right: 53rpx;">去注册</view>
					<text style="" @tap="nav('resetpassword')">忘记密码</text>
				</view>
				<view class="flex align-center" style="margin-top:154rpx;color: #858585;font-size:26rpx;justify-content: center;">
					<uni-data-checkbox multiple :localdata="sex" v-model="checked" active-color="#FF852D "
						style="margin-top: 2px;transform: scale(0.7,0.7	);"></uni-data-checkbox>
					请您阅读并同意<view> <text @tap="nav('xieyi')" class="text-color"> 用户协议</text> 和 <text class="text-color"
							@tap="nav('mimi')">隐私政策</text></view>
				</view>
			</block>




			<!-- #ifdef APP-PLUS -->
			<!-- <view class="padding flex flex-direction  text-center">
					当前版本:{{version}}
				</view> -->
			<!-- #endif -->

		</view>
		

		<!-- </scroll-view> -->

		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit" class="round">
			</image>
			<view class="gray-text">登录中...</view>
		</view>
	</view>

</template>

<script>
import { ACCESS_TOKEN, USER_NAME, USER_INFO } from "@/common/util/constants"
import { mapActions } from "vuex"
import configService from '@/common/service/config.service.js';
	import appUpdate from "@/components/yzhua006-update/app-update.vue"; //app更新组件
export default {
	components: {
		appUpdate
	},
	data() {
		return {
			sex: [{
				text: '',
				value: 1
			}],
			checked: [],
			shape: '',//round 圆形
			loading: false,
			userName: '',
			password: '',
			phoneNo: '',
			smsCode: '',
			showPassword: false, //是否显示明文
			loginWay: 1, //1: 账密，2：验证码
			smsCountDown: 0,
			smsCountInterval: null,
			toggleDelay: false,
			version: '',
			//第三方登录相关信息
			thirdType: "",
			thirdLoginInfo: "",
			thirdLoginState: false,
			bindingPhoneModal: false,
			thirdUserUuid: '',
			url: {
				bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
			}
		};
	},
	onLoad: function () {
		// #ifdef APP-PLUS
		var that = this
		plus.runtime.getProperty(plus.runtime.appid, function (wgtinfo) {
			that.version = wgtinfo.version
		});
		// #endif
	},
	beforeCreate() {
		setTimeout(() => {
			this.$refs.app_update.update(); //调用子组件检查更新方法
			setTimeout(() => {
				if (this.$refs.app_update.popup_show == true && this.$refs.app_update.force == true) {}
			}, 100)
		}, 500)
	},
	computed: {

		isSendSMSEnable() {
			return this.smsCountDown <= 0 && this.phoneNo.length > 4;
		},
		getSendBtnText() {
			if (this.smsCountDown > 0) {
				return this.smsCountDown + '秒后发送';
			} else {
				return '发送验证码';
			}
		},
		canSMSLogin() {
			return this.userName.length > 4 && this.smsCode.length > 4;
		},
		canPwdLogin() {
			return this.userName.length > 4 && this.password.length > 4;
		},
	},
	methods: {
		...mapActions(["mLogin", "PhoneLogin", "ThirdLogin"]),
		nav(url) {
			this.$Router.push({ name: url })
			// uni.navigateTo({
			// 	url: url
			// });
		},
		//  登录
		onLogin: function () {

			if (!this.checked || this.checked.length == 0) {
				this.$tip.toast('请阅读后勾选并同意《平台协议》及《隐私协议》政策');
				return;
			}
			if (!this.userName || this.userName.length == 0) {
				this.$tip.toast('请填写手机号');
				return;
			}
			if (!this.password || this.password.length == 0) {
				this.$tip.toast('请填写密码');
				return;
			}
			let loginParams = {
				username: this.userName,
				passWord: this.password,
			}
			this.loading = true;

			this.mLogin(loginParams).then((res) => {
				this.loading = false;
				if (res.data.success) {
					// #ifdef APP-PLUS
					this.saveClientId()
					// #endif
					// #ifndef APP-PLUS
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({ name: 'index' })
					// uni.navigateTo({
					// 	url: '/pages/index/index'
					// })
					// #endif
				} else {
					this.$tip.alert(res.data.message);
				}
			}).catch((err) => {
				let msg = err.data.message || "请求出现错误，请稍后再试"
				this.loading = false;
				this.$tip.alert(msg);
			}).finally(() => {
				this.loading = false;
			})
		},
		saveClientId() {
		// 	var info = plus.push.getClientInfo();
		// 	var cid = info.clientid;
			var randomNum = new Date().getTime();
			this.$http.get("/sys/user/saveClientId", { params: { clientId: randomNum } }).then(res => {
				console.log("res::saveClientId>", res)
				this.$tip.success('登录成功!')
				this.$Router.replaceAll({ name: 'index' })
			})
		},
		changePassword() {
			this.showPassword = !this.showPassword;
		},
		onSMSSend() {
			// let smsParams = {};
			// smsParams.phone=this.phoneNo;
			// smsParams.smsmode="0";
			let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
			if (!this.phoneNo || this.phoneNo.length == 0) {
				this.$tip.toast('请输入手机号');
				return false
			}
			if (!checkPhone.test(this.phoneNo)) {
				this.$tip.toast('请输入正确的手机号');
				return false
			}
			this.$http.get("/merchant/app/sendMsg", { params: { phone: this.phoneNo } }).then(res => {
				if (res.data.success) {
					this.smsCountDown = 60;
					this.startSMSTimer();
				} else {
					this.smsCountDown = 0;
					this.$tip.toast(res.data.message);
				}
			});
		},
		startSMSTimer() {
			this.smsCountInterval = setInterval(() => {
				this.smsCountDown--;
				if (this.smsCountDown <= 0) {
					clearInterval(this.smsCountInterval);
				}
			}, 1000);
		},
		onSMSLogin() {
			let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

			if (!this.phoneNo || this.phoneNo.length == 0) {
				this.$tip.toast('请填写手机号');
				return;
			}
			if (!checkPhone.test(this.phoneNo)) {
				this.$tip.toast('请输入正确的手机号');
				return false
			}
			if (!this.smsCode || this.smsCode.length == 0) {
				this.$tip.toast('请填短信验证码');
				return;
			}
			if (!this.checked || this.checked.length == 0) {
				this.$tip.toast('请阅读后勾选并同意《平台协议》及《隐私协议》政策');
				return;
			}
			let loginParams = {
				mobile: this.phoneNo,
				captcha: this.smsCode
			};
			this.$http.get("/merchant/app/checkCode", { params: { phone: this.phoneNo, code: this.smsCode } }).then(res => {
				if (res.data.success) {
					this.nav('settled')
					// this.$tip.success('登录成功!')
					// this.$Router.replaceAll({name:'index'})
				} else {
					this.$tip.error(res.data.message);
				}
			}).catch((err) => {
				let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
				this.$tip.error(msg);
			});
			// this.PhoneLogin(loginParams).then((res) => {
			//   console.log("res====》",res)
			//   if(res.data.success){
			// 	// this.$tip.success('登录成功!')
			// 	// this.$Router.replaceAll({name:'index'})
			//   }else{
			// 	this.$tip.error(res.data.message);
			//   }
			// }).catch((err) => {
			//   let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
			//   this.$tip.error(msg);
			// });
		},
		loginSuccess() {
			// 登陆成功，重定向到主页
			this.$Router.replace({ name: 'index' })
		},
		requestFailed(err) {
			this.$message.warning("登录失败")
		},
	},
	beforeDestroy() {
		if (this.smsCountInterval) {
			clearInterval(this.smsCountInterval);
		}
	},
}
</script>

<style scoped lang="scss">
page {
	background: #FFFFFF;
	height: 100%;
}

.uni-data-checklist {
	flex: none;

	::v-deep.checklist-group .checklist-box {
		margin-right: 0 !important;
	}
}

.footer {
	position: fixed;
	bottom: 54upx;
	font-size: 12px;
	background: #FFFFFF;
	color: #999999;
	text-align: center;
	width: 100%;
	// left: 50%;
	// transform: translateX(-50%);
}

.text-color {
	color: #449AFF;
	margin: 0 10upx;
}

.login-paddingtop {
	// padding-top: 100upx;
	padding: 100upx 32upx 0 32upx;
}

.zai-box {
	background: #FFFFFF;
	height: 100%;

	.zai-header {
		width: 100%;
		height: 432upx;
		background-image: url(../../static/login/beijing.png);
		background-size: cover;
	}

	// padding: 0 20upx;
	// padding-top: 100upx;
	// position: relative;
}

.zai-logo {
	width: 20px;
	height: 20px;
}

.box-user {
	border-bottom: 1px solid #EFEFEF;
	min-height: 45px;

	image {
		margin-right: 10px;
	}

	input {
		font-size: 14px;
		flex: 1;
	}
}

.zai-title {
	font-size: 58upx;
	color: #000000;
	text-align: center;
}

.input-placeholder,
.zai-input {
	color: #94afce;
}

.zai-label {
	padding: 60upx 0;
	text-align: center;
	font-size: 30upx;
	color: #a7b6d0;
}

.zai-btn {
	background: #ff65a3;
	color: #fff;
	border: 0;
	border-radius: 100upx;
	font-size: 36upx;
}

.zai-btn:after {
	border: 0;
}

/*按钮点击效果*/
.zai-btn.button-hover {
	transform: translate(1upx, 1upx);
}
</style>