pet-front/pages/login/index.vue

<template>
	<view class="login">
		<view class="login-logo">
			<image class="logo" :src="configList?.applet_info?.paramValueImage" mode="aspectFill"></image>
			<image class="d" :src="configList?.logo_icon?.paramValueImage" mode="aspectFill"></image>
		</view>
		<view class="login-submit">
			<up-button class="mt24" type="primary" text="授权登陆" @click="loginWx" shape="circle"
				color="#FFBF60"></up-button>
		</view>
		<view class="flex-rowc">
			<view>
				<up-checkbox
					v-model:checked="isAgree"
					size="29rpx"
					icon-size="29rpx"
					name="agree"
					usedAlone
					shape="circle"
					activeColor="#FFBF60"
				>
				</up-checkbox>
			</view>
			<view class="size-26 agreement">
				<text>我已阅读并同意猫爸狗妈</text>
				<text @click="privacyPolicy('login_xy')" class="main-color">《注册协议》</text>
				<text>与</text>
				<text @click="privacyPolicy('login_ys')" class="main-color">《隐私政策》</text>
			</view>
		</view>
		<view class="login-footer flex-rowc">
			<button @click="cancelLogin" class="btn-cancel" plain >暂不登录</button>
		</view>
	</view>

	<up-popup :show="show" @close="close" :round="10">
		<view style="padding: 10rpx 20rpx;height: 50vh;overflow-y: scroll;" v-html="content"></view>
	</up-popup>

	<!-- 客服组件 -->
	<CustomerService />
</template>

<script setup>
	import {
		getOpenIdKey,
		getToken,
		setIsLogin,
		setOpenIdKey,
		setStorage,
		setToken
	} from "../../utils/auth";
	import {
		getOpenId,
		getPersonalInfo,
		getPhoneNumber
	} from "../../api/system/user";
	import {
		computed,
		onMounted,
		ref
	} from "vue"
	import {
		useStore
	} from 'vuex'

	const store = useStore()
	const value = ref(false)
	const configList = computed(() => {
		return store.getters.configList
	})
	const show = ref(false)
	const content = ref('')

	const isAgree = ref(false)

	// 微信授权登陆
	const loginWx = () => {
		if (!isAgree.value) {
			return uni.showToast({
				title: '请先同意隐私协议',
				icon:'none'
			})
		}
		store.dispatch("login", true)
	}



	// 获取openid
	// if (!getOpenIdKey() && !getToken()) {
	// 	uni.login({
	// 		provider: 'weixin',
	// 		success: async (res) => {
	// 			const {
	// 				code,
	// 				data
	// 			} = await getOpenId(res.code)
	// 			if (code === 200 && data) {
	// 				let resData = JSON.parse(data)
	// 				setOpenIdKey(resData.openId)
	// 			}
	// 		},
	// 		fail: function(error) {
	// 			// 授权失败处理
	// 			uni.showToast('授权失败，请授权后再试')
	// 		}
	// 	});
	// }
	// 获取token
	const onGetPhoneNumber = async (e) => {
		// uni.login({
		// 	success: res => {
		// 		console.log("====>", res)
		// 	}
		// })
		getPhoneNumber({
			phoneCode: e.detail.code
		})
		// if (e.detail.errMsg === "getPhoneNumber:ok") {
		// 	if (getOpenIdKey()) {
		// 		try {
		// 			const {
		// 				data
		// 			} = await getPhoneNumber({
		// 				"openId": getOpenIdKey(),
		// 				"code": e.detail.code,
		// 				sourceType: 1
		// 			})
		// 			setToken(data.token)
		// 			setIsLogin(true)
		// 			await getUserInfo()
		// 		} catch (e) {
		// 			uni.showToast({
		// 				icon: 'error',
		// 				title: '获取手机号失败'
		// 			})
		// 		}
		// 	}
		// }
	}

	// // h获取用户信息
	// const getUserInfo = async () => {
	// 	const {
	// 		data
	// 	} = await getPersonalInfo()
	// 	setStorage('userInfo', data)
	// 	uni.navigateBack()
	// }

	const cancelLogin = () => {
		uni.switchTab({
			url: "/pages/workbenchManage/index"
		})
	}

	const close = () => {
		show.value = false
	}
	
	const privacyPolicy = (key) => {
		content.value = configList.value[key]?.paramValueArea || "";
		show.value = true;
	}
</script>

<style scoped lang="scss">
	@import "index";
	@import "@/style/index.scss";

	.agreement {
		color: #C7C7C7;
		font-size: 22rpx;
		line-height: 29rpx;
	}

	.login-footer {
		width: 100vw;
		position: fixed;
		bottom: 127rpx;

		.btn-cancel {
			color: #C7C7C7;
			font-size: 30rpx;
			line-height: 40rpx;
			border: none;
			display: inline-block;
			padding: 0;
		}
	}
</style>