drink-answer-wechat-uniapp-24-9-2/pages_order/auth/wxLogin.vue

<template>
	<view class="login">
		<view class="logo">
			<image :src="configList.logo_image" mode="widthFix"
			class="logo"></image>
		</view>
		<view class="title">
			{{ configList.logo_name }}
		</view>
		<view class="btn mt" @click="wxLogin">
			<view class="icon">
				<image src="../static/auth/wx.png" mode=""></image>
			</view>
			<view class="">
				微信登录
			</view>
		</view>
		<view class="btn b2"
		@click="qux">
			取消登录
		</view>

		<view class="config">
			<uv-checkbox-group v-model="checkboxValue" shape="circle">
				<view class="flex-center">
					<uv-checkbox size="30rpx" icon-size="20rpx" activeColor="#07c060" :name="1"></uv-checkbox>
					<text>已同意</text>
					<text @click="openConfigDetail('user_ys')">《隐私政策》</text>
					<text @click="openConfigDetail('user_xy')">《用户协议》</text>
					<view class="info">
						<img src="../static/auth/info.svg" alt="info" />
					</view>
				</view>
			</uv-checkbox-group>
		</view>

		<uv-popup mode="center" round="20" ref="service" duration="500">
			<view class="flex-col" style="width: 88vw;">
				<view class="flex-col" style="width: 76vw; padding: 30rpx;">
					<div class="icon-service">
						<img src="" alt="" />
					</div>
					<h3>服务协议和隐私权政策</h3>
					<span style="color: #7a7a7a; font-size: 26.5rpx; line-height: 55rpx;">
						请您务必审慎阅读、充分理解用户协议和隐私政策各条款，包括但不限于用户注意事项、用户行为规范以及为了向你提供服务而收集、使用、存储你的个人信息的情况等。你可阅读
						<span style="color: black; font-weight: bold; font-size: 26.5rpx; ">《遗产里的景德镇平台用户服务协议》</span>
						和
						<span style="color: black; font-weight: bold; font-size: 26.5rpx; ">《遗产里的景德镇平台隐私权政策》</span>
						了解详细信息。如你同意，请点击下方按钮开始接受我们的服务。
					</span>
					<view class="flex-sa mt-40 mb-60">
						<uv-button text="不同意" size="large" :custom-style=customStyle @click="close()"></uv-button>
						<uv-button type="error" size="large" text="同意" @click="agree"></uv-button>
					</view>
				</view>
			</view>
		</uv-popup>

		<configPopup ref="popup"></configPopup>

	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import configPopup from '@/components/config/configPopup.vue';
	export default {
		name: 'Login',
		data() {
			return {
				checkboxValue: []
			}
		},
		computed : {
			...mapState(['configList']),
			customStyle() {
				return {
					background: '#f1f1f1',
					color: '#00bf61'
				}
			},
		},
		methods: {
			wxLogin() {
				if (!this.checkboxValue.length) {
					return uni.showToast({
						title: '请先同意隐私协议',
						icon: 'none'
					})
				}
				
				// this.open()
				
				this.$store.commit('login')
				
				
				// uni.navigateTo({
				// 	url:'/pages/index/home'
				// })
			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			openConfigDetail(key) {
				this.$refs.popup.open(key)
			},
			open(){
				this.$refs.service.open();
			},
			close(){
				this.$refs.service.close();
			},
			agree(){
				this.close();
				uni.navigateTo({
					url:'/pages/index/home'
				})
			},
			qux(){
				uni.reLaunch({
					url: '/pages/index/agreement'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.logo {
		width: 320rpx;
		border-radius: 10rpx;
	}
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80vh;
		flex-direction: column;
		position: relative;

		.btn {
			width: 70%;
			height: 80rpx;
			background-color: $uni-wx-color;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx 0;
			border-radius: 120rpx;

			.icon {
				position: relative;
				top: 6rpx;
				right: 6rpx;
				margin-right: 10rpx;

				image {
					width: 40rpx;
					height: 35rpx;
				}
			}
		}

		.b2 {
			background-color: rgba($uni-wx-color, 0.2);
			color: $uni-wx-color;
		}

		.mt {
			margin-top: 200rpx;
		}

		.config {

			font-size: 22rpx;
			text-align: center;
			line-height: 40rpx;

			text {
				color: $uni-wx-color;
			}

			.info {
				width: 30rpx;
				height: 30rpx;
				position: relative;
				left: 80rpx;
			}
		}

		.icon-service {
			width: 90rpx;
			height: 90rpx;
			background-color: #e4c28b;
			border-radius: 50%;
		}
	}
</style>