assessment-front/pages_order/auth/wxLogin.vue

<template>
	<view class="page_view">

		<image class="bg" src="@/pages_order/static/auth/bg.png" mode="widthFix"></image>
		
		<view class="content flex flex-column">

			<image class="logo" :src="configList.app_logo" mode="widthFix"></image>
			<!-- <image class="logo" src="@/static/image/icon.png" 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">
				<view>
					<uv-checkbox-group
						v-model="checkboxValue"
						shape="circle"
					>
						<uv-checkbox
							size="36rpx"
							icon-size="36rpx"
							activeColor="#014FA2"
							:name="1"
						></uv-checkbox>
					</uv-checkbox-group>
				</view>
				<view class="desc">
					阅读并同意我们的
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('config_privacy', '服务协议与隐私条款')">《服务协议与隐私条款》</text>
					以及
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('config_agreement', '个人信息保护指引')">《个人信息保护指引》</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;
}

.bg {
	width: 100%;
	height: auto;
}

.content {
	transform: translateY(-8rpx);
	width: 100%;
	padding: 0 78rpx;
	box-sizing: border-box;
}

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

.name {
	margin-top: 20rpx;
	font-size: 36rpx;
	font-weight: 700;
	color: #000000;
}

.btn {
	width: 100%;
	border-radius: 44rpx;
	padding: 23rpx 0;
	font-size: 32rpx;
	line-height: 1.4;
	font-family: PingFang SC;

	&-login {
		margin-top: 97rpx;
		color: #FFFFFF;
		background: #014FA2;
		border: 2rpx solid #014FA2;
	}

	&-cancel {
		margin-top: 66rpx;
		color: #999999;
		border: 2rpx solid #999999;
	}

}

.agreement {
	margin-top: 24rpx;
	width: 100%;
	display: flex;
	justify-content: flex-start;

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

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


</style>