yihuo/pages/login/index.vue

<template>
<!-- 	<page ref="pageRef" :nav="false" :bgColor="'url(' + ossurl.login.loginbj + ')no-repeat 100% 100%'">

	</page> -->
	<view class="loginBj" :style="'background:url(' + ossurl.login.loginbj + ')no-repeat; background-size: 100% 100%;'">
		<view class="p30" style="margin-bottom: 50rpx;">
			<image class="image" :src="ossurl.home.logText" mode="widthFix" />
		</view>
		<view class="form p30">
			<u-form labelPosition="left" ref="form">
				<u-form-item label="手机号" prop="phone" borderBottom labelWidth="80">
					<u--input v-model="phone" border="none" type="number" placeholder="手机号"></u--input>
				</u-form-item>
				<u-form-item label="验证码" prop="code" labelWidth="80" borderBottom>
					<u--input v-model="verifyCode" border="none" placeholder="请填写验证码"></u--input>
					<u-button slot="right" @click="getVerifycode()" color="#000000" :text="tips" type="success" size="mini"
						:disabled="disabled"></u-button>
				</u-form-item>
			</u-form>
			<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled = true"
				@end="disabled = false"></u-code>
		</view>
		<view class="bottom">
			<view class="agree" @click="agreeFlag = !agreeFlag">
				<radio :checked="agreeFlag" style="transform: scale(0.6)" color="#8b3dff" />
				<text>
					我已阅读并同意
					<text class="color-theme" @click.stop="show('user')">《用户协议》</text>
					和
					<text class="color-theme" @click.stop="show('privacy')">《隐私政策》</text>
				</text>
			</view>
		
			<view class=" " style="padding-top: 30rpx; text-align: center">
				<button class="btn" @click="handleLogin">
					登录
				</button>
				<view class="btn_back" @click.stop="$router.back()">返回</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ossurl from '@/utils/ossurl'
	import {
		H5
	} from '@/utils/config'
	import store from '@/store'

	export default {
		data() {
			return {
				ossurl,
				agreeFlag: false,
				phone: '',
				verifyCode: '',
				tips: '',
				disabled: false
			}
		},
		computed: {
			supportHigher() {
				let systemInfo = this.$store.state.systemInfo
				if (!systemInfo) return false
				return this.$common.compareVersion(systemInfo.SDKVersion, '2.21.2') >= 0
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			isChinesePhoneNumber(phoneNumber) {
				// 正则表达式匹配中国大陆手机号码，格式为：13/14/15/16/17/18/19开头，后跟9位数字
				const phoneNumberPattern = /^1[3-9]\d{9}$/;

				// 使用test方法检查输入的字符串是否符合正则表达式的规则
				return phoneNumberPattern.test(phoneNumber);
			},
			async getVerifycode() {

				if (this.phone && this.isChinesePhoneNumber(this.phone)) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await this.$service.user.getVerifycode({
						"mobile": this.phone,
						"scene": "LOGIN"
					})
					if (res) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}
				} else {
					this.$message.warn('请输入正常的手机号')
				}

			},
			getPhoneNumber(e) {
				if (!e.detail.encryptedData) return
				if (!this.agreeFlag) return this.$message.warn('请您先阅读并同意用户协议和隐私政策')
				this.login(e.detail)
			},
			async login(param) {
				let session = {
					openid: store.getters.openId,
					sessionKey: store.getters.sessionKey,
					unionid: store.getters.unionId
				}
				const res = await this.$service.user.login(param.encryptedData, param.iv, session)
				if (res) {
					this.initUser()
					if (!res.needInfo) {
						this.$router.back()
						return
					}
					this.$router.replace('user_info', {
						type: 1
					})
				}
			},
			async handleLogin() {
				if (!this.agreeFlag) return this.$message.warn('请您先阅读并同意用户协议和隐私政策')
				if (this.phone && this.isChinesePhoneNumber(this.phone) && this.verifyCode) {
					const res = await this.$service.user.accountLogin({
						"loginWay": "MOBILE",
						"mobile": this.phone,
						"verifycode": this.verifyCode
					})
					if (res) {
						this.initUser()
						if (!res.needInfo) {
							this.$router.back()
							return
						}
						this.$router.replace('user_info', {
							type: 1
						})
					}
				} else {
					this.$message.warn('请输入手机号和验证码')
				}

			},
			async initUser() {
				this.$event.emit(this.$event.key.LOGIN)
				await this.$service.user.info()
				await this.$service.user.getHide()
			},
			show(key) {
				this.$router.web(H5[key].url, H5[key].title)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginBj{
		height: 100vh;
		padding-top: 400rpx;
	}
	.image {
		width: 320rpx;
	}

	.btn_back {
		width: 468rpx;
		height: 70rpx;
		line-height: 70rpx;
		border: 2rpx solid #fff;
		border-radius: 50rpx;
		background-color: #fff;
		color: #888888;
		font-size: 24rpx;
		margin-top: 20rpx;
		box-shadow: none;
		text-align: center;
		display: inline-block;
	}

	.btn {
		width: 468rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #000000;
		border-radius: 50rpx;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
	}

	.agree {
		text-align: center;
		font-size: 24rpx;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom {
		position: absolute;
		bottom: 300rpx;
		width: 100%;
	}

	.form {
		// padding: 50rpx;

		.uni-form-item {
			.uni-input {}
		}
	}
</style>