cxyy-applet/pagesHome/login/index.vue

<template>
	<view class="container main">
		<view class="overlay">
			<view class="one">
				欢迎登录！
			</view>
			<view class="two">
				<uni-forms ref="baseForm" :rules="rules" :modelValue="form">
					<uni-forms-item label="账号" required name="account">
						<uni-easyinput v-model="form.account" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item label="密码" required name="password">
						<uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button class="button_1" type="primary" @click="submit('baseForm')">登录</button>
				<button class="button_2" type="primary" @click="toRegister">注册</button>
			</view>
			<view class="thr">
				<view class="thr_1" @tap="toLogin">
					<text class="t-icon t-icon-weixin"></text>
					<text>微信信任登录>></text>
				</view>
			</view>
			<view class="four">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox color="#2979ff" :checked="agree" />
						<text @tap.stop="toAgree()">我已阅读并同意<text style="color: #2979ff;"
								@click="toAgree">《用户服务协议》</text>及
							<text style="color: #2979ff;" @click="toAgree">《隐私策略》</text>
						</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				agree: false,
				form: {
					account: '',
					password: ''
				},
				// 校验规则
				rules: {
					account: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					}
				},
			}
		},
		onShow: function() {
			const that = this;
			// 查询平台信息
			that.searchOpenids();
		},
		methods: {
			async searchOpenids() {
				const that = this;
				uni.getStorage({
					key: 'openid',
					success: function(res) {
						that.$set(that, `openid`, res.data);
					},
					fail: function(err) {
						uni.login({
							success: async function(res) {
								if (res.code) {
									const aee = await that.$app('/wechat/api/login/app',
										'GET', {
											js_code: res.code,
											config: that.$config.wx_projectkey
										})
									if (aee.errcode == '0') {
										uni.setStorage({
											key: "openid",
											data: aee.data.openid
										})
										that.$set(that, `openid`, aee.data.openid);
									} else {
										uni.showToast({
											title: aee.errmsg,
											icon: 'none'
										})
									}
								} else {
									uni.showToast({
										title: res.errMsg,
										icon: 'none'
									})
								}
							}
						});
					}
				})
			},
			// 登录
			submit(ref) {
				const that = this;
				let agree = that.agree;
				let openid = that.openid;
				if (agree) {
					if (openid) {
						that.$refs[ref].validate().then(async res => {
							const arr = await that.$api(`/login/User`, 'POST', res);
							if (arr.errcode == '0') {
								const user = that.$jwt(arr.data);
								if (!user.openid) {
									const openidUser = await that.$api(`/user/${user.id}`, 'POST', {
										openid
									});
								}
								uni.setStorage({
									key: 'token',
									data: arr.data,
									success: function(res) {
										uni.navigateBack({
											delta: 1
										})
									},
									fail: function(err) {
										console.log(err);
									}
								})
							} else {
								uni.showToast({
									title: arr.errmsg,
									icon: 'none'
								})
							}
						}).catch(err => {
							console.log('err', err);
						})
					} else {
						uni.showToast({
							title: '系统更新中，请稍后再试!',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私政策',
						icon: 'none'
					})
				}
			},
			// 微信登录
			async toLogin() {
				const that = this;
				let agree = that.agree;
				if (agree) {
					const aee = await that.$api(`/login/wxapp/User`, 'POST', {
						openid: that.openid
					})
					if (aee.errcode == '0') {
						uni.setStorage({
							key: 'token',
							data: aee.data,
							success: function(res) {
								uni.navigateBack({
									delta: 1
								})
							},
							fail: function(err) {
								console.log(err);
							}
						})
					} else {
						uni.showToast({
							title: aee.errmsg + ` 请注册账号！`,
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私政策',
						icon: 'none'
					})
				}
			},
			// 同意隐私协议
			changeAgree() {
				const that = this;
				that.$set(that, `agree`, !that.agree);
			},
			// 查看协议
			toAgree() {
				uni.navigateTo({
					url: '/pagesMy/agree/index'
				})
			},
			// 注册
			toRegister() {
				uni.navigateTo({
					url: '/pagesHome/register/index'
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		position: relative;
		// background-image: url('../../static/loginbg.jpg');
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-position: center;

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0.5);

			.one {
				text-align: center;
				padding: 5vw 0;
				font-family: "宋体";
				font-size: var(--font20Size);
				font-weight: bold;
			}

			/* 白色半透明背景 */
			.two {
				padding: 2vw 5vw;

				.button_1 {
					color: var(--mainColor);
					background: linear-gradient(90deg, #1E83FF, #1071e6);
				}

				.button_2 {
					margin: 3vw 0 0 0;
					color: var(--mainColor);
					background: linear-gradient(90deg, #FFCD1E, #FF8A18);
				}
			}

			.thr {
				padding: 5vw;

				.thr_1 {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: var(--font14Size);
					color: var(--f80Color);

					text {
						margin: 0 0 0 1vw;
					}
				}
			}

			.four {
				position: absolute;
				bottom: 15px;
				padding: 5vw;
				text-align: center;
				font-size: var(--font12Size);
			}
		}
	}
</style>