teambuy-front/pages_order/auth/wxLogin.vue

<template>
	<view class="login">
		<view class="logo">
			<image :src="configList.config_logo" mode="aspectFill" />
		</view>

		<view class="title">
			{{ configList.config_app_name }}
		</view>

		<view class="btn mt" @tap="wxLogin">
			<view class="">
				手机号授权登录
			</view>
		</view>

		<view class="btn b2" @tap="qux">
			取消登录

			<view class="config" @tap.stop>
				<uv-checkbox-group v-model="checkboxValue" shape="circle">
					<view class="content">
						<view style="display: flex; align-items: start;">
							<uv-checkbox size="34rpx" icon-size="26rpx" activeColor="#019245" :name="1"
								style="margin-top: 6rpx;" />

							<!-- <text class="text-privacy">阅读并同意我们的<text
									@tap="$refs.popup.open('user_xy')">《服务协议与隐私条款》</text>以及<text
									@tap="$refs.popup.open('user_ys')">《个人信息保护指引》</text></text> -->
							<text class="text-privacy">
								阅读并同意我们的
								<text @tap="openPrivacyPopup(0)">
									《服务协议与隐私条款》
								</text>
								以及
								<text @tap="openPrivacyPopup(1)">
									《个人信息保护指引》
								</text>
							</text>
						</view>
						<!-- <view class="">
						以及<text @tap="$refs.popup.open('user_ys')">隐私政策</text>
					</view> -->
					</view>
				</uv-checkbox-group>
			</view>
		</view>

		<configPopup ref="popup" />

		<PrivacyPopup ref="privacyPopup" :title="title">
			<view>
				<view>
					<text>{{ serviceAgreement }}</text>
				</view>
			</view>
		</PrivacyPopup>
	</view>
</template>

<script>
import PrivacyPopup from '@/components/config/PrivacyPopup.vue'
export default {
	name : 'Login',
	components: {
		PrivacyPopup
	},
	data() {
		return {
			checkboxValue : [],
			config : {},
			title: '服务协议',
			serviceAgreement: '暂未拿到信息'
		}
	},
	onLoad(query) {
		if (query.shareId) {
			uni.setStorageSync('shareId', query.shareId) // 存储分享Id
		}
		if(query.path){
			this.config = query // 从路由拿取配置？
		}
		console.log('这是从路由拿到的配置', this.config);
	},
	methods: {
		openPrivacyPopup(index){
			if (index == 0) {
				this.title = '服务协议'
				this.serviceAgreement = this.configList.config_privacy_policy
			} else {
				this.title = '隐私政策'
				this.serviceAgreement = this.configList.config_personal_protection
			}
			this.$refs.privacyPopup.open()
		},
		getPhoneNumber(e){
			console.log(e, e.detail.code);
			this.wxLogin(phoneCode)
		},
		wxLogin(phoneCode){
			if(!this.checkboxValue.length){
				return uni.showToast({
					title: '请先同意隐私协议',
					icon:'error',
				})
			}
			this.$store.commit('login', this.config)
		},
		
		//打开应用配置
		openConfigDetail(key){
			this.$refs.popup.open(key)
		},
		qux(){
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},
	}
}
</script>

<style scoped lang="scss">
.login{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80vh;
	flex-direction: column;
	position: relative;
	.logo{
		height: 400rpx;
		width: 400rpx;
		image{
			height: 400rpx;
			width: 400rpx;
			border-radius: 30rpx;
		}
		margin-bottom: 20rpx;
	}
	.title{
		position: relative;
		font-weight: 600;
		font-size: 40rpx;
		// &::after{
		// 	content: '';
		// 	position: absolute;
		// 	left: 0;
		// 	top: 100%;
		// 	display: block;
		// 	height: 8rpx;
		// 	width: 210rpx;
		// 	background: linear-gradient(to right,$uni-color, #fff);
		// }
	}
	.btn{
		all: unset;
		width: 80%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
		border-radius: 50rpx;
		border: none;
		&::after{
			
		}
		.icon{
			margin-right: 10rpx;
			image{
				width: 40rpx;
				height: 35rpx;
			}
		}
	}
	.b2{
		// background-color: rgba($uni-color, 0.2);
		color: #999;
		border: 2rpx solid;
		position: relative;
		.config{
			position: absolute;
			bottom: -110%;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
			width: 100%;
			.text-privacy{
				color: inherit;
				text-align: left;
			}
			text{
				color: $uni-color;
			}
		}
	}
	.mt{
		color: #fff;
		background-color: $uni-color;
		margin-top: 100rpx;
	}
	

}
</style>