studytour-front/pages_order/auth/wxLogin.vue

<template>
	<view class="page_view">

		<view class="flex flex-column content">

			<image class="logo" :src="configList.config_logo" mode="widthFix"></image>
			<view class="name">{{ configList.app_name }}</view>
			
			<button class="btn btn-login flex" @click="wxLogin" >登 录</button>

			<button class="btn btn-cancel flex" @click="onCancel">取消登录</button>

			<view class="agreement">
				<uv-checkbox-group
					v-model="checkboxValue"
					shape="circle"
				>
					<uv-checkbox
						size="36rpx"
						icon-size="36rpx"
						activeColor="#00A9FF"
						:name="1"
					></uv-checkbox>
				</uv-checkbox-group>
				<view class="desc">
					我已阅读并同意
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('user_ys', '服务协议')">《服务协议》</text>
					和
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('user_bh', '隐私政策')">《隐私政策》</text>
				</view>
			</view>

		</view>

		<agreementConfirmPopup ref="popup" @confirm="onConfirmAgreement"></agreementConfirmPopup>

		<agreementModal ref="modal" @confirm="onConfirmAgreement"></agreementModal>

	</view>
</template>

<script>
import agreementConfirmPopup from './agreementConfirmPopup.vue'
import agreementModal from '@/pages_order/components/agreementModal.vue'

export default {
	name : 'Login',
	components: {
		agreementConfirmPopup,
		agreementModal,
	},
	data() {
		return {
			checkboxValue : []
		}
	},
	methods: {
		wxLogin(){
			if(!this.checkboxValue.length){
				this.openAgreementConfirmPopup()
				return
			}
			this.$store.commit('login')
		},
		openAgreementConfirmPopup() {
			this.$refs.popup.open()
		},
		onConfirmAgreement(confirm) {
			if (confirm) {
				this.checkboxValue = [1]
			} else {
				this.checkboxValue = []
			}
		},
		onCancel() {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},
	}
}
</script>

<style scoped lang="scss">
.page_view {
	width: 100vw;
	height: 100vh;
	padding: 320rpx 116rpx 0 116rpx;
	box-sizing: border-box;
	background: #E5F2F9;
}

.content {
	width: 100%;
}

.logo {
	width: 248rpx;
	height: auto;
}

.name {
	margin-top: 20rpx;
	font-family: Alimama ShuHeiTi;
	font-size: 56rpx;
	font-weight: 700;
	color: #000000;
}

.btn {
	width: 100%;
	border-radius: 44rpx;
	padding: 21rpx 0;
	font-size: 30rpx;
	line-height: 1.4;
	font-family: PingFang SC;
	border: 2rpx solid $uni-color;

	&-login {
		margin-top: 222rpx;
		font-weight: 600;
		color: #FFFFFF;
		background: $uni-color;
	}

	&-cancel {
		margin-top: 24rpx;
		font-weight: 400;
		color: $uni-color;
		background: transparent;
	}

}

.agreement {
	margin-top: 24rpx;
	display: flex;

	.desc {
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 1.4;
		color: #8B8B8B;
	}

	.highlight {
		color: $uni-color;
	}
}


</style>