massage-front/pages_order/auth/wxLogin.vue

<template>
	<view class="login">
		<view class="logo">
			<image :src="configList.config_app_logo" mode=""></image>
			<view class="text">
				{{ configList.config_app_name }}
			</view>
		</view>
		
		<button class="btn btn-login mt"
			@click="wxLogin">
			<view class="icon">
				<uv-icon name="weixin-fill" color="#ffffff" size="36rpx"></uv-icon>
			</view>
			<view class="">
				授权登录
			</view>
		</button>

		<button class="btn btn-cancel" :plain="true" :hairline="false" @click="onCancel">
			暂不登录
		</button>
		
		<view class="config mt">
			<view style="flex: 1;">
				<uv-checkbox-group
					v-model="checkboxValue"
					shape="circle"
				>
					<view class="content">
						<uv-checkbox
							size="28rpx"
							icon-size="28rpx"
							activeColor="#07C261"
							:name="1"
						></uv-checkbox>
						已同意
						<text @click="openModal">《注册协议》、隐私协议</text>
				</view>
				</uv-checkbox-group>
			</view>
			<view class="flex">
				<uv-icon name="info-circle" color="#07C261" size="28rpx"></uv-icon>
			</view>
		</view>

		<agreementModal ref="modal" @confirm="onConfirmAggrement"></agreementModal>
		
	</view>
</template>

<script>

import agreementModal from './agreementModal.vue'

export default {
	name : 'Login',
	data() {
		return {
			checkboxValue : []
		}
	},
	components: {
		agreementModal
	},
	methods: {
		wxLogin(){
			if(!this.checkboxValue.length){
				return uni.showToast({
					title: '请先同意隐私协议',
					icon:'none'
				})
			}
			this.$store.commit('login')
		},
		openModal() {
			this.$refs.modal.open()
		},
		onConfirmAggrement(confirm) {
			if (confirm) {
				this.checkboxValue = [1]
			} else {
				this.checkboxValue = []
			}
		},
		onCancel() {
			console.log('--onCancel')
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},
	}
}
</script>

<style scoped lang="scss">
.login{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100vh;
	flex-direction: column;
	position: relative;

  background: $uni-fg-color;
	.logo{
		margin-top: 334rpx;
		width: 320rpx;
		image{
			height: 150rpx;
			width: 320rpx;
		}
		.text{
			margin-top: 90rpx;
			font-size: 38rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #000000;
		}
	}
	.btn{
		width: 80%;
		height: 100rpx;

    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;

		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;

		&-login {
			background-image: linear-gradient(to right, #84A73F, #D8FF8F);
			color: #fff;
			border: none;
			.icon{
				margin-right: 10rpx;
				image{
					width: 40rpx;
					height: 35rpx;
				}
			}
		}

		&-cancel {
			height: calc(100rpx - 1rpx * 2);
			color: #c7c7c7;
			background-color: transparent;
			border: 1rpx solid #c7c7c7;
			margin-top: 60rpx;
		}
	}
	.mt{
		margin-top: 200rpx;
	}
	
	.config{
		width: 80%;
		line-height: 40rpx;
    // margin-top: 27rpx;
    color: #C7C7C7;
    text-align: left;
		display: flex;
		.content {
			font-size: 22rpx;
			display: flex;
			align-items: center;
		}
		text{
			color: #07C261;
		}
	}
}

.flex {
	display: flex;
	align-items: center;
}
</style>