broke_news_wx/pages/Login/Login.vue

<template>
	<view class="loginBox">
		<image src="../../static/image/logo.png" class="logo"></image>
		<view class="logoText">
			快报嗨享平台
		</view>
		<view class="btnBox">
			<view class="isShowGetPhone" v-if="!isAgree" @click="valiAgree">一键授权登录</view>
			<button class="loginBtn" v-else open-type="getPhoneNumber" @getphonenumber="login">
				一键授权登录
			</button>
		</view>
		<view class="tips">
			<checkbox :value="isAgree" @click="agreeChange()" :checked="isAgree" />
			<view>
				我已阅读并同意
				<text class="primaryText" @click="toUserArgeement()">《服务协议》</text>
				与
				<text class="primaryText" @click="toPrivacyPolicy()">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		getMobile
	} from '../../network/api.js';
	export default {
		data() {
			return {
				isAgree: false
			};
		},
		methods: {
			...mapMutations(['setUserInfo']),
			agreeChange() {
				this.isAgree = !this.isAgree;
			},
			toUserArgeement() {
				uni.navigateTo({
					url: '/pages/userAgreement/userAgreement'
				});
			},
			toPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/privacyPolicy/privacyPolicy'
				});
			},
			valiAgree() {
				if (!this.isAgree) {
					uni.showToast({
						title: '请先同意《服务协议》与《隐私政策》',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
			},
			async login(e) {
				if (e.detail.errMsg !== 'getPhoneNumber:ok') return
				if (e.detail.iv) {
					let data = {
						departmentId: 1,
						code: e.detail.code
					};
					console.log(data);
					let res = await getMobile(data);
					let result = res.data;
					if (result.state == 200) {
						let userInfo = {
							phone: result.data.phoneNumber,
						};
						uni.setStorageSync('userInfo', JSON.stringify(userInfo));
						this.setUserInfo(userInfo);
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 300);
					} else {
						console.log(result)
						uni.showToast({
							title: result.message,
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '授权失败',
						icon: 'none'
					});
				}
			},
			onAuthError(e) {
				uni.showToast({
					title: '您已拒绝授权~',
					icon: 'none'
				});
			}
		}
	};
</script>
<style>
	/* #ifdef H5 */
	uni-checkbox .uni-checkbox-input {
		border: none !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #ff6903;
	}

	.uni-checkbox-input.uni-checkbox-input-checked {
		border: none !important;
	}

	/* #endif */

	/* 微信中样式 */
	/* #ifdef APP-PLUS ||MP-WEIXIN */
	checkbox .wx-checkbox-input {
		border-radius: 50% !important;
	}

	checkbox .wx-checkbox-input-disabled {
		background: #fff !important;
		border-radius: 50% !important;
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background-color: #2468f2;
		color: #ffffff;
	}

	.wx-checkbox-input.wx-checkbox-input-checked {
		border-radius: 50% !important;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.loginBox {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 100px 0 63px 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			width: 150px;
			height: 150px;
		}

		.logoText {
			margin-top: 30px;
			font-size: 18px;
		}

		.btnBox {
			position: relative;
			width: 526rpx;
			height: 44px;
			display: flex;
			margin-top: auto;
			margin-bottom: 50px;

			.loginBtn {
				width: 526rpx;
				height: 44px;
				text-align: center;
				line-height: 44px;
				color: #ffffff;
				border-radius: 50px;
				background-color: #2468f2;
				font-size: 16px;
			}

			.isShowGetPhone {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 526rpx;
				height: 44px;
				line-height: 44px;
				text-align: center;
				color: #ffffff;
				border-radius: 50px;
				background-color: #2468f2;
				z-index: 100;
				font-size: 16px;
			}
		}

		.tips {
			display: flex;
		}

		.primaryText {
			color: #2468f2;
		}
	}
</style>