intelligentGroup/pageTwo/login/login.vue

<template>
	<view class="content">
		<view class="topbg">
			<view class="ts">
				<view class="mb-5">欢迎登录</view>
				<view>沪抖团线上展厅</view>
			</view>
		</view>

		<view class="edit">
			<view class="logo">
				<image src="../../static/logo.png"></image>
				沪抖团
			</view>
			<view class="toggle cblue" @click="handleToggle">
				切换登录
			</view>
			<!-- 账号，密码登录 -->
			<view class="editem" v-if="!isCode">
				<view class="input">
					<icon class="iconfont icon-gerenzhongxin1 mr-10"></icon>
					<input class="uni-input input100" v-model="account" placeholder="请输入账号" />
				</view>
				<view class="input">
					<icon class="iconfont icon-icon-test5 mr-10"></icon>
					<input type="password" class="uni-input" v-model="password" placeholder="请输入密码" />
				</view>
				<view class="tips size12" @click="$store.commit('changeSecratary', true)">
					忘记密码联系管理员
				</view>
				<view class="btnlogin" @click="handleTelLogin">登录</view>
			</view>
			<!-- 手机号，验证码登录 -->
			<view class="editem" v-if="isCode">
				<view class="input">
					<icon class="iconfont icon-gerenzhongxin1 mr-10"></icon>
					<input class="uni-input input100" v-model="account" placeholder="请输入手机号" />
				</view>
				<view class="input">
					<icon class="iconfont icon-icon-test5 mr-10"></icon>
					<view class="yanzhengma">
						<input class="uni-input" v-model="code" placeholder="验证码" />
						<button class="code" type="none" @click="handleCode" v-model="code"
							:disabled="disabled">{{second<60 ? second+'S后重发':'获取验证码'}}
						</button>
					</view>
				</view>
				<view class="btnlogin" @click="handleTelLogin">登录</view>
			</view>

			<view class="register" @click="handleRegister">
				<text>注册</text>
			</view>
			<view class="xieyi">
				<checkbox-group @change="checkboxChange">
					<checkbox :value="1" style="transform:scale(0.8)" />勾选同意沪抖团<text @click="handlexieyi"
						class="bluecolor">《个人信息保护政策》</text>
				</checkbox-group>
			</view>
		</view>
		<!-- 手机号快捷登录 -->
		<view class="wxbtn">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="value==1">
				<view>
					<image src="../../static/phone0.png"></image>
				</view>
				<text>手机号快捷注册/登录</text>
			</button>
			<button v-else @click="handleIsTel">
				<view>
					<image src="../../static/phone0.png"></image>
				</view>
				<text>手机号快捷注册/登录</text>
			</button>
		</view>
		<!-- 联系人弹框 -->
		<secratary></secratary>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				value: 0,
				code: "",
				account: "",
				password: "",
				sessionid: "",
				disabled: false,
				second: 60,
				isCode: false,
			}
		},
		computed: {
			...mapState(["HomeContent"]),
		},
		async onLoad() {
			let that = this
			that.login()
		},
		methods: {
			login() {
				let that = this
				uni.login({
					success(res2) {
						if (res2.code) {
							if (res2.errMsg = "login:ok") {
								that.$model.onlogin({
									code: res2.code,
								}).then(res => {
									if (res.code == 2) {
										that.token = null
										that.sessionid = res.data.sessionid
										uni.setStorageSync('sessionid', res.data.sessionid)
										return
									}
								}).catch(e => {})
							}
						}
					}
				})
			},
			// 登录、
			handleTelLogin() {
				let that = this
				if (that.value == 0) {
					that.$tools.msg("请先勾选同意沪抖团《个人信息保护政策》")
					return
				}
				if (!that.isCode && !that.account) {
					that.$tools.msg("请输入账号")
					return
				}
				if (!that.isCode && !that.password) {
					that.$tools.msg("请输入密码")
					return
				}
				if (!that.isCode && that.password.length < 6) {
					that.$tools.msg("密码长度不能小于6位数")
					return
				}
				if (that.isCode && !(/^1[3456789]\d{9}$/.test(that.account))) {
					that.$tools.msg("请输入正确的手机号")
					return
				}
				if (that.isCode && !that.code) {
					that.$tools.msg("请输入验证码")
					return
				}
				let https = !that.isCode ? that.$model.getlogin({
					account: that.account,
					password: that.password,
					sessionid: that.sessionid,
				}) : that.$model.getloginCode({
					account: that.account,
					code: that.code,
					sessionid: that.sessionid,
				})
				https.then(res => {
					if (res.code != 0) {
						that.$tools.msg(res.message)
						return
					}
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('refreshtoken', res.data.refreshtoken)
					uni.setStorageSync('sessionid', res.data.sessionid)
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}).catch(err => {})
			},
			// 获取验证码
			handleCode() {
				let that = this
				if (!(/^1[3456789]\d{9}$/.test(that.account))) {
					that.$tools.msg("请输入正确的手机号")
					return
				}
				// 
				that.$model.getSendCode({
					account: that.account,
				}).then(res => {
					console.log(res)
					if (res.code != 0) {
						that.$tools.msg(res.msg)
						return
					}
					that.disabled = true
					let interval = setInterval(() => {
						--that.second
					}, 1000)
					setTimeout(() => {
						clearInterval(interval)
						that.disabled = false
						that.second = 60
					}, 60000)
				}).catch(err => {})
			},
			// 授权
			getPhoneNumber(res) {
				const that = this
				if (res.detail.errMsg == 'getPhoneNumber:ok') {
					that.$model.getRegisterPhone({
						sessionid: that.sessionid,
						encryptedData: res.detail.encryptedData,
						iv: res.detail.iv,
					}).then(res => {
						if (res.code != 0) return
						that.value = 1
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('refreshtoken', res.data.refreshtoken)
						uni.setStorageSync('sessionid', res.data.sessionid)
						setTimeout(function() {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}, 1000)
					})
				}
			},
			// 注册
			handleRegister() {
				uni.navigateTo({
					url: "/pageTwo/login/add"
				})
			},
			handleToggle() {
				this.phone = ""
				this.isCode = !this.isCode
			},
			handleIsTel() {
				if (this.value == 0) {
					this.$tools.msg("请先确认勾选协议")
					return
				}
			},
			checkboxChange(e) {
				this.value = e.detail.value.length ? e.detail.value[0] : "0"
				console.log(e.detail, e.detail.value)
			},
			handlexieyi() {
				uni.navigateTo({
					url: "/pageTwo/index/detail?content=1"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// display: flex;
		overflow: hidden;
		flex-wrap: wrap;
		padding: 0 !important;
		justify-content: space-between;
	}

	.topbg {
		width: 126%;
		position: relative;
		height: 140px;
		left: -13%;
		background: $navColor;
		border-radius: 0 0 60% 60%;

		image {
			width: 100%;
			height: 100%;
		}

		.ts {
			font-size: 20px;
			font-weight: bold;
			text-align: left;
			color: #fff;
			z-index: 9;
			position: absolute;
			bottom: 50px;
			left: 15%;
		}
	}



	.edit {
		margin: 40rpx auto 0;
		width: calc(82% - 30px);
		position: relative;
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		text-align: center;
		background-color: #fff;
		max-height: 780rpx;

		.logo {
			width: 100%;
			height: 55px;
			// margin-top: 15px;
			color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22px;
			font-weight: bold;

			image {
				width: 53px;
				height: 53px;
				margin-right: 10px;
			}
		}

		.toggle {
			height: 30px;
			line-height: 30px;
			text-align: right;
			font-size: 16px;
			color: $blue;
			font-weight: bold;
		}

		.tips {
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: right;
		}

		.editem {
			margin-top: 15px;
			display: flex;
			align-items: center;
			font-size: 28upx;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.input {
			width: 100%;
			padding: 0 10px;
			height: 40px;
			line-height: 40px;
			margin-bottom: 10px;
			display: flex;
			position: relative;
			text-align: left;
			background-color: #f7f7f7;
			border-radius: 5px;

			icon {
				color: #666;
				font-size: 22px;
			}

			input {
				height: 40px;
				line-height: 40px;
				position: absolute;
				left: 35px;
				right: 0px;
				z-index: 88;
			}
		}

		.btnlogin {
			width: 100%;
			margin: 10px 0;
			height: 38px;
			line-height: 38px;
			background: $blue;
			font-weight: 700;
			border-radius: 10px;
			text-align: center;
			color: #fff !important;
		}

		.code {
			width: 110px;
			background: #dfdfdf;
			font-size: 12px;
			margin: 0;
			border-radius: 10px;
			text-align: center;
			position: absolute;
			right: 0;
			top: 1.5px;
			line-height: 35px;
			height: 35px;
			z-index: 99;
		}
	}

	.register {
		width: 100%;
		text-align: center;
		color: $blue;
		display: flex;
		align-items: flex-end;
		justify-content: center;

		text {
			border-bottom: 1px solid $blue;
		}
	}

	.xieyi {
		font-size: 12px;
		color: #333;
		width: 100%;
		text-align: center;
		display: flex;
		align-items: flex-end;
		margin-top: 30rpx;

		checkbox-group {
			text-align: left;
		}

		text {
			border-bottom: 1px solid #333;
		}
	}

	.wxbtn {
		width: 100%;
		position: absolute;
		margin-top: 10px;
		top: 78%;

		icon {
			font-size: 25px;
			color: #28c445;
		}


		text {
			display: block;
			// width: 100%;
			margin-top: 5px;
			font-size: 15px;
			// color: #666;
			text-align: center;
			border-bottom: 1px solid blue;
			color: blue;
		}

		button {
			line-height: initial;
			// background: #fff;
			display: flex;
			flex-wrap: wrap;
			padding: 0;
			justify-content: center;
		}

		button::after {
			display: none;
		}

		view {
			width: 100%;
		}

		image {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	}
</style>