fission-star-applet-250304/pages_order/auth/wxLogin.vue

<template>
	<view class="page">
		<navbar title="登录" leftClick @leftClick="$utils.navigateBack" />

		<view class="flex flex-column" style="justify-content: flex-start;">

			<image class="logo" :src="userInfo.headImage" mode=""></image>

			<view class="title">
				{{ userInfo.nickName }}
			</view>

			<view class="operation">

				<button
					:plain="true" :hairline="false"
					class="btn"
					@click="wxLogin"
				>
					微信登录
				</button>
				
				<view class="agreement">
					<uv-checkbox-group
						v-model="checkboxValue"
						shape="circle">
						<view>
							<uv-checkbox
								size="32rpx"
								icon-size="32rpx"
								activeColor="#07C160"
								:name="1"
								:customStyle="{
									display: 'inline-block',
									marginRight: '20rpx',
								}"
							></uv-checkbox>
							<text style="vertical-align: super;">
								我已阅读<text class="highlight" @click="openModal">《裂变星小程序用户注册协议》《裂变星小程序隐私保护协议》</text>
							</text>
						</view>
					</uv-checkbox-group>
				</view>

			</view>
			
		</view>

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

<script>
	import { mapState } from 'vuex'
	import agreementModal from './agreementModal.vue'

	export default {
		name : 'Login',
		components: {
			agreementModal
		},
		data() {
			return {
				checkboxValue : []
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		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 = []
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.page {
	background-color: $uni-fg-color;
	position: relative;
	width: 100vw;
	height: 100vh;
}

.logo {
	width: 148rpx;
	height: 148rpx;
	margin-top: 96rpx;
}

.title {
	color: #333333;
	font-size: 32rpx;
	font-weight: 900;
	margin-top: 20rpx;
}

.operation {
	position: absolute;
	bottom: 452rpx;
	left: 0;
	width: 100vw;
	padding: 0 60rpx;
	box-sizing: border-box;
}

.btn {
	width: 100%;
	height: auto;
	border-radius: 45rpx;
	background-color: #07C160;
	color: #FFFFFF;
	border: none;
	padding: 25rpx 0;
	box-sizing: border-box;
	font-size: 28rpx;
	line-height: 1;
	margin: 0;
}

.agreement {
	margin-top: 41rpx;

	color: #474747;
	font-size: 24rpx;
	line-height: 32rpx;

	.highlight {
		color: #05D9A2;
	}
}
</style>