realty/virgo.wzfrontend/workark_wx/pages/login/login.vue

<template>
	<view class="login-page">
		<view class="title">
			<view>欢迎使用WORKARK</view>
		</view>
		<view class="form-box">
			<view class="form-tab">
				<view :class="loginType == 1 ? 'tab-item select type1' : 'tab-item type1'" @click="loginType=1">
					验证码登录
				</view>
				<view :class="loginType == 2 ? 'tab-item select type2' : 'tab-item type2'" @click="loginType=2">
					账号密码登陆
				</view>
			</view>
			<view class="form-input">
				<view class="input-box">
					<view class="account">
						<input class="input-inner" type="number" v-model="form.phone" :adjust-position="false"
							placeholder="手机号" />
					</view>
					<view class="password" v-if="loginType==2">
						<input class="input-inner" type="text" :password="!passwordShow" v-model="form.password"
							:adjust-position="false" placeholder="密码" />
						<uv-icon :name="passwordShow ? 'eye-fill' : 'eye-off'" size="50rpx" color="#a5a8aa"
							@click="passwordShow = !passwordShow">
						</uv-icon>
					</view>
					<view class="vcode" v-if="loginType==1">
						<input class="input-inner" type="number" v-model="form.phoneCode" :adjust-position="false"
							placeholder="验证码" />
						<uv-button type="primary" :text="codeTips" @click="getImageCode" size="small"
							:disabled="codeDisabled">
						</uv-button>
					</view>
				</view>
				<view class="button">
					<view class="button-item" @click="loginSubmit">
						登录
					</view>
				</view>
				<view class="login-bottom">
					<button class="wx-btn" open-type="getPhoneNumber" @getphonenumber="wxPhoneLogin">
						<uv-icon name="weixin-fill" size="60rpx" color="#43b156"></uv-icon>
					</button>
				</view>
				<uv-code ref="code" :seconds="seconds" @end="codeDisabled = false" @start="codeDisabled = true"
					@change="text => codeTips = text">
				</uv-code>
			</view>
		</view>
		<view class="pact">
			<view class="pact-box" v-if="isPact">
				<uv-checkbox-group v-model="pactChecked" shape="circle" placement="column"
					customStyle="maxWidth:208rpx;" labelSize="24">
					<uv-checkbox :name="true" label="我已阅读并同意" iconColor="#ffffff" size="32" iconSize="28"></uv-checkbox>
				</uv-checkbox-group>
				<uv-text text="《用户协议》" size="24rpx" type="primary" @click="toPact"></uv-text>
				<uv-text text="和" size="24rpx"></uv-text>
				<uv-text text="《隐私协议》" size="24rpx" type="primary" @click="toPact"></uv-text>
			</view>
		</view>
		<image-code :show="captchaShow" title="请填写图形验证码" @onConfirm="confirmHandle" @onCancel="captchaShow = false">
			<view class="code-input-container">
				<input type="text" class="code-input" placeholder="输入图形验证码" maxlength="6" v-model="imgCode" />
				<view class="code-canvas-wrapper">
					<image v-if="codeImg" :src="codeImg" alt="图片验证码" class="code-image" @click="imgCodeFunc"></image>
				</view>
			</view>
		</image-code>
	</view>
</template>

<script>
	import {
		login,
		getImgCode,
		sendPhoneCode,
		getUserInfo,
		getOpenId
	} from '@/request/api/login'

	import {
		updateWxOpenId
	} from '@/request/api/shop'
	import imageCode from "@/components/login/imageCode.vue";
	import {
		isPhoneNumber
	} from '@/uitls/validate'
	export default {
		components: {
			imageCode
		},
		data() {
			return {
				form: {
					phone: '',
					phoneCode: '',
					password: ''
				},
				loginType: 1,
				passwordShow: false,
				pactChecked: [],
				codeTips: '获取验证码',
				seconds: 60,
				codeDisabled: false,
				captchaShow: false,
				imgCode: '',
				codeImg: '',
				isPact: false
			}
		},
		onLoad() {

		},
		methods: {
			getImageCode() { //图片验证码显示
				if (!isPhoneNumber(this.form.phone)) return this.$toast('请输入正确的手机号');
				this.imgCodeFunc();
			},
			async imgCodeFunc() { //获取图片验证码
				let imageData = await getImgCode();
				if (imageData.state) {
					this.codeImg = imageData.data.pngBase64;
					this.captchaShow = true;
				}
			},
			async confirmHandle() { //发送手机验证码
				if (!this.imgCode) return this.$toast('请输入图片验证码');
				if (!this.$refs.code.canGetCode) return this.$toast('请倒计时结束后再发送');
				uni.showLoading();
				let phoneData = await sendPhoneCode(this.form.phone, this.imgCode);
				uni.hideLoading();
				if (phoneData.state) {
					this.$refs.code.start();
					this.$toast('发送成功');
					this.imgCode = '';
					this.captchaShow = false;
				}
			},
			async wxPhoneLogin(e) { //微信手机号一键登录
				if (!e.detail.code) return;
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						this.loginFunction({
							pCode: e.detail.code,
							code: loginRes.code
						})
					}
				})
			},
			loginSubmit() {
				if (!isPhoneNumber(this.form.phone)) return this.$toast('请输入正确的手机号');
				if (this.loginType === 1 && !this.form.phoneCode) return this.$toast('请输入验证码');
				if (this.loginType === 2 && !this.form.password) return this.$toast('请输入密码');
				let postData = this.loginType === 1 ? {
					phone: this.form.phone,
					phoneCode: this.form.phoneCode
				} : {
					phone: this.form.phone,
					password: this.form.password
				};
				this.loginFunction(postData);
			},
			loginFunction(postData) {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						this.login(postData, loginRes.code);
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				this.login(postData);
				// #endif
			},
			async login(postData, wxCode) {
				uni.showLoading({
					title: '登录中...'
				})
				let loginData = await login(postData);
				if (!loginData.state) return;
				uni.setStorageSync('shopMobileToken', loginData.data.shopMobileToken);
				uni.setStorageSync('token', loginData.data.token);
				if (wxCode) {
					let wxData = await getOpenId(wxCode);
					if (wxData.state) {
						uni.setStorageSync('openId', wxData.data.openid);
						updateWxOpenId(wxData.data.openid)
					}
				}
				let userData = await getUserInfo();
				if (!userData.state) return;
				this.$store.dispatch('app/changeOrganization', userData.data.workarkOrganization);
				this.$store.dispatch('app/changeUser', userData.data);
				this.$chat.connect('workark' + userData.data.userId);
				uni.setStorageSync('vuex_state', this.$store.state);
				uni.hideLoading();
				this.$toast('登录成功');
				uni.navigateBack();
			},
			toPact() {
				uni.showToast({
					title: "协议",
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		min-height: 100vh;
		background: url("https://images.unsplash.com/photo-1519751138087-5bf79df62d5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyMDUzMDJ8MHwxfHNlYXJjaHwyMHx8YmFja2dyb3VuZHxlbnwxfHx8fDE3MjExOTc4NjJ8MA&ixlib=rb-4.0.3&q=80&w=1080") no-repeat top center;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	//弹出输入框
	.code-input-container {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.code-input {
			background: #F7F8FA;
			width: 306rpx;
			height: 84rpx;
			line-height: 84rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;

			&::placeholder {
				line-height: 84rpx;
			}
		}

		.code-canvas-wrapper {
			flex: 1;

			.code-image {
				width: 100%;
				height: 84rpx;
			}
		}
	}

	.form-box {
		flex: 1;
		margin: 0 30rpx;
		border-radius: 40rpx;
		background-color: #fff;
		overflow: hidden;
	}

	.form-input {
		background-color: #fff;
	}

	.input-box {
		padding: 150rpx 32rpx 0;
		margin-bottom: 80rpx;
	}

	.account,
	.password,
	.vcode {
		height: 96rpx;
		border-radius: 20rpx;
		padding: 0 48rpx;
		display: flex;
		align-items: center;
		background-color: #f7fafc;

		.input-inner {
			flex: 1;
		}
	}

	.account {
		margin-bottom: 48rpx;
	}

	.vcode-text {
		text-wrap: nowrap;
		font-size: 26rpx;
		background-color: #fff;
		padding: 14rpx 30rpx;
		border-radius: 12rpx;
	}

	.button {
		padding: 0 32rpx;

		.button-item {
			line-height: 96rpx;
			border-radius: 20rpx;
			text-align: center;
			font-size: 32rpx;
			background-color: $uv-primary;
			color: #fff;
		}
	}

	.pact {
		padding-top: 20rpx;
		padding-bottom: 120rpx;
		height: 40rpx;
	}

	.pact-box {
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.title {
		padding-top: 180rpx;
		padding-bottom: 40rpx;
		padding-left: 64rpx;
		font-size: 48rpx;
		font-weight: 700;
		color: #383838;
	}

	.form-tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ecf1fb;
		height: 100rpx;
		background: linear-gradient(180deg, #e3ebf9 0%, #ffffff 100%);

		.tab-item {
			width: 340rpx;
			line-height: 100rpx;
			text-align: center;
			color: #9e9e9e;
			position: relative;

			&::after {
				content: '';
				width: 50rpx;
				height: 8rpx;
				display: block;
				background-color: $uv-primary;
				border-radius: 4rpx;
				position: absolute;
				left: 50%;
				bottom: 14rpx;
				transform: translateX(-50%);
				opacity: 0;
			}

			&.select {
				background-color: #fff;
				color: $uv-primary;
			}

			&.type1.select {
				border-radius: 0 40rpx 0 0;
			}

			&.type2.select {
				border-radius: 40rpx 0 0;
			}

			&.select::after {
				opacity: 1;
			}
		}
	}

	.login-bottom {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 30px;

		.wx-btn {
			margin-top: 40rpx;
			height: 80rpx;
			width: 160rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

			&::after {
				border-radius: 80rpx;
				border-color: $uv-border-color;
			}
		}
	}
</style>