health-front/pages_order/auth/wxLogin.vue

<template>
	<view class="page_view">

		<image class="bg" :src="configList.login_bg" mode="aspectFill"></image>

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

			<image class="logo" :src="configList.login_logo" mode="widthFix"></image>
			
			<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="#7451DE"
						:name="1"
					></uv-checkbox>
				</uv-checkbox-group>
				<view class="desc">
					我已阅读并同意
					<text class="highlight" @click="$refs.modal.open('user_ys', '服务协议与隐私条款')">《服务协议与隐私条款》</text>
					和
					<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;
}

.bg,
.content {
	width: 100%;
	height: 100%;
}

.content {
	position: absolute;
	top: 0;
	justify-content: flex-end;
	padding: 0 58rpx 208rpx 58rpx;
	box-sizing: border-box;
}

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

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

	&-login {
		margin-top: 116rpx;
		padding: 24rpx 0;
		font-weight: 600;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #007FFF, #644CFF, #BE76F7);
		box-shadow: 12rpx 12rpx 36rpx 0 rgba(0, 0, 0, 0.06),
								-8rpx -8rpx 26rpx 0 #FFFFFF,
								8rpx 8rpx 14rpx 0 rgba(0, 0, 0, 0.07);
	}

	&-cancel {
		margin-top: 24rpx;
		font-weight: 400;
		color: $uni-color;
		border: 1rpx solid $uni-color;
	}

}

.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>