massage-front/pages_order/auth/wxLogin.vue

<template>
	<view class="login">
		<view class="logo">
			<!-- 后续改回接口获取 -->
			<image src="../static/auth/logo.png" mode=""></image>
			<view class="text">
				{{ configList.logo_name }}
			</view>
		</view>
		
		<view class="btn mt"
			@click="wxLogin">
			<view class="icon">
				<image style="width: 36rpx; height: 30rpx; transform: translateY(5rpx);" src="../static/auth/wx.png" mode=""></image>
			</view>
			<view class="">
				微信登录
			</view>
		</view>
		
		<view class="config">
			<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>

		<button class="btn-cancel" :plain="true" :hairline="false" @click="onCancel">
			暂不登录
		</button>
		
	</view>
</template>

<script>

import agreementModal from './agreementModal.vue'

export default {
	name : 'Login',
	data() {
		return {
			checkboxValue : []
		}
	},
	components: {
		agreementModal
	},
	methods: {
		getPhoneNumber(e){
			console.log(e, e.detail.code);
			this.wxLogin(phoneCode)
		},
		wxLogin(phoneCode){
			if(!this.checkboxValue.length){
				return uni.showToast({
					title: '请先同意隐私协议',
					icon:'none'
				})
			}
			this.$store.commit('login', phoneCode)
		},
		openModal() {
			this.$refs.modal.open()
		},
		onConfirmAggrement(confirm) {
			if (confirm) {
				this.checkboxValue = [1]
			} else {
				this.checkboxValue = []
			}
		},
		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-bg-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{
		all: unset;
		width: 80%;
		height: 100rpx;
		background-color: #B3997E;
		color: #fff;

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

		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		border: none;
		.icon{
			margin-right: 10rpx;
			image{
				width: 40rpx;
				height: 35rpx;
			}
		}
	}
	.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;
		}
	}

	.btn-cancel {
		border: none;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #c7c7c7;
		margin-top: 432rpx;
	}
}

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