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 : {},
			serviceAgreement: 
			'用户服务协议为使用小程序名称的服务，您应当阅读并遵守《用户服务协议》(以下简称"本协议")。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，所有加粗字体为我方重点提示的内容。如果您未满18周岁，或者不具备完全民事行为能力，请在法定监护人的陪同下阅读本协议，并特别注意未成年人使用条款。否则小程序名称对于该等后续注册、使用网站服务等行为而对您所发生的不利后果不承担责任，并有权在知晓该等情况后解除双方间的服务协议。一、【协议的范围】本协议及《隐私政策》是您与小程序名称经营者之间关于用户使用小程序名称旗下产品相关服务所订立的协议。小程序名称的经营者是指法律认可的经营瀚用户服务协议为使用小程序名称的服务，您应当阅读并遵守《用户服务协议》(以下简称"本协议")。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，所有加粗字体为我方重点提示的内容。如果您未满18周岁，或者不具备完全民事行为能力，请在法定监护人的陪同下阅读本协议，并特别注意未成年人使用条款。否则小程序名称对于该等后续注册、使用网站服务等行为而对您所发生的不利后果不承担责任，并有权在知晓该等情况后解除双方间的服务协议。一、【协议的范围】本协议及《隐私政策》是您与小程序名称经营者之间关于用户使用小程序名称旗下产品相关服务所订立的协议。小程序名称的经营者是指法律认可的经营瀚',
			personalInformationProtectionGuidelines: '用户服务协议为使用小程序名称的服务，您应当阅读并遵守《用户服务协议》(以下简称"本协议")。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，所有加粗字体为我方重点提示的内容。如果您未满18周岁，或者不具备完全民事行为能力，请在法定监护人的陪同下阅读本协议，并特别注意未成年人使用条款。否则小程序名称对于该等后续注册、使用网站服务等行为而对您所发生的不利后果不承担责任，并有权在知晓该等情况后解除双方间的服务协议。一、【协议的范围】本协议及《隐私政策》是您与小程序名称经营者之间关于用户使用小程序名称旗下产品相关服务所订立的协议。小程序名称的经营者是指法律认可的经营瀚用户服务协议为使用小程序名称的服务，您应当阅读并遵守《用户服务协议》(以下简称"本协议")。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，所有加粗字体为我方重点提示的内容。如果您未满18周岁，或者不具备完全民事行为能力，请在法定监护人的陪同下阅读本协议，并特别注意未成年人使用条款。否则小程序名称对于该等后续注册、使用网站服务等行为而对您所发生的不利后果不承担责任，并有权在知晓该等情况后解除双方间的服务协议。一、【协议的范围】本协议及《隐私政策》是您与小程序名称经营者之间关于用户使用小程序名称旗下产品相关服务所订立的协议。小程序名称的经营者是指法律认可的经营瀚',
			title: '服务协议'
		}
	},
	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 = '服务协议'
			} else {
				this.title = '隐私政策'
			}
			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/category'
			})
		},
	}
}
</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>