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;">

			<!-- todo: 换回接口提供的 -->
			<image class="logo" src="../static/auth/logo.png" mode=""></image>

			<view class="title">
				<!-- todo: 换回接口提供的 -->
				裂变星小程序
			</view>

			<view class="operation">

				<button
					:plain="true" :hairline="false"
					class="btn"
					open-type="getPhoneNumber" 
					@getphonenumber="getPhoneNumber"
				>
					授权手机号登录
				</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">《XXX小程序用户注册协议》《XXX小程序隐私保护协议》</text>
							</text>
						</view>
					</uv-checkbox-group>
				</view>

			</view>
			
		</view>

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

<script>
	import agreementModal from './agreementModal.vue'

	export default {
		name : 'Login',
		components: {
			agreementModal
		},
		data() {
			return {
				checkboxValue : []
			}
		},
		methods: {
			getPhoneNumber(e){
				console.log(e, e.detail.code);

				// check
				// this.$api('bindPhone', {
				// 	phoneCode : e.detail.code
				// }, res => {
				// 	if(res.code == 200){
				// 		let phoneObj = JSON.parse(res.result)
				// 		if(phoneObj.errmsg == 'ok'){
				// 			this.userInfoForm.phone = phoneObj.phone_info.phoneNumber
				// 		}else{
				// 			uni.showModal({
				// 				title: phoneObj.errmsg
				// 			})
				// 		}
				// 		console.log(phoneObj);
				// 	}
				// })

				this.wxLogin(phoneCode)
			},
			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>