popularize-front/pages_login/wxLogin.vue

<template>
<div class="login">
		<!-- logo -->
		<div class="logo">
			<image :src="configList.logo_image" mode=""></image>
		</div>

		<!-- 标题 -->
		<view class="login-title">{{ configList.logo_name }}</view>

		<!-- 登录按钮 -->
		<view @click="login" class="login-btn">
			<!-- <uni-icons type="weixin" size="30" color="#fff"></uni-icons> -->
			<text class="wx">{{$t('pages_login.wxLogin.wechatLogin')}}</text>
		</view>
		
		<view @click="toHome" 
		class="uni-uncolor-btn">
			<text class="wx">{{$t('pages_login.wxLogin.cancelLogin')}}</text>
		</view>

		<!-- 隐私政策 -->
		<view class="privacy">
			<uv-radio-group>
				<uv-checkbox-group v-model="consent">
					<uv-checkbox size="30rpx" 
                    shape="circle" active-color="#05C160" :name="privacy"></uv-checkbox>
				</uv-checkbox-group>
				{{$t('pages_login.wxLogin.agreed')}}<text class="privacy-title" @click="jump(1)">{{$t('pages_login.wxLogin.privacyPolicy')}}</text>
				<text class="privacy-title" @click="jump(2)">{{$t('pages_login.wxLogin.userAgreement')}}</text>
			</uv-radio-group>
		</view>
		
		<!-- 隐私政策弹框 -->
		<PrivacyAgreementPoup></PrivacyAgreementPoup>
	</div>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue'
	export default {
		name : "wxLogin",
		components : { PrivacyAgreementPoup },
		data() {
			return {
				consent : []
			}
		},
		methods: {
			login() {
				if(this.consent.length <= 0){
					return uni.showToast({
						icon: "none",
						title: this.$t('pages_login.wxLogin.pleaseAgree')
					})
				}
				this.$store.commit('login')
			},
			jump(type) {//1 隐私协议 2服务条款
				if(type == 1) {
					uni.navigateTo({
						url:'/pages_login/yinsixieyi'
					})
				}else {
					uni.navigateTo({
						url:'/pages_login/fuwutiaokuan'
					})
				}
			},
			toHome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: white;
		// logo
		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
			}
		}

		// 标题
		.login-title {
			font-size: 40rpx;
			font-weight: bold;
			line-height: 56rpx;
			margin: 20rpx 0rpx;
		}

		//登录按钮
		.login-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70%;
			background: $uni--bg-color-btn;
			height: 90rpx;
			border-radius: 15rpx;
			color: white;
			margin-top: 200rpx;

			.wx {
				margin-left: 10rpx;
			}
		}
		
		.uni-uncolor-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70%;
			height: 90rpx;
			padding: 0;
			background: rgba($uni--bg-color-btn, 0.2);
			color: $uni--bg-color-btn;
			border-radius: 15rpx;
		}
		
		//隐私政策
		.privacy {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			font-size: 28rpx;
			line-height: 56rpx;
			
			&::v-deep .uv-checkbox-group {
				align-items: center !important;
				justify-content: center !important;
				flex-wrap : nowrap !important;
			}
			
			.privacy-title {
				color: #05C160;
			}
		}
	}
</style>