110 lines
2.7 KiB
Vue
110 lines
2.7 KiB
Vue
<template>
|
||
<view class="login-wrapper">
|
||
<image class="bg" src="./images/bg.png"></image>
|
||
<!-- 头部内容 -->
|
||
<view class="login-header">
|
||
<!-- 卡通形象 -->
|
||
<image class="login-avatar" src="./images/dh.png" mode="widthFix"></image>
|
||
<image
|
||
class="login-title"
|
||
src="./images/dhwq.png"
|
||
mode="widthFix"
|
||
></image>
|
||
|
||
<!-- 描述 -->
|
||
<view class="login-desc">您好，欢迎来到朵花温泉！</view>
|
||
</view>
|
||
|
||
<!-- 按钮区域 -->
|
||
<view class="login-btn-area">
|
||
<!-- 同意隐私协议并获取手机号按钮 -->
|
||
|
||
<button
|
||
v-if="!isAgree"
|
||
class="login-btn"
|
||
type="primary"
|
||
@click="handleAgreeAndGetPhone"
|
||
>
|
||
微信一键登录
|
||
</button>
|
||
<button
|
||
v-if="isAgree"
|
||
class="login-btn"
|
||
open-type="getPhoneNumber"
|
||
type="primary"
|
||
@getphonenumber="onLogin"
|
||
>
|
||
微信一键登录
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 协议勾选 -->
|
||
<view class="login-agreement">
|
||
<CheckBox v-model="isAgree">
|
||
<text class="login-agreement-text">阅读并同意</text>
|
||
<navigator
|
||
url="/pages/service-agreement/service-agreement"
|
||
class="login-agreement-link"
|
||
>《服务协议》</navigator
|
||
>
|
||
<text class="login-agreement-text">和</text>
|
||
<navigator
|
||
url="/pages/privacy-policy/privacy-policy"
|
||
class="login-agreement-link"
|
||
>《隐私协议》</navigator
|
||
>
|
||
</CheckBox>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import CheckBox from "@/components/CheckBox/index.vue";
|
||
import { loginAuth, bindPhone, checkPhone } from "@/manager/LoginManager";
|
||
import { goHome } from "@/hooks/useGoHome";
|
||
|
||
const isAgree = ref(false);
|
||
|
||
// 同意隐私协议并获取手机号
|
||
const handleAgreeAndGetPhone = () => {
|
||
if (!isAgree.value) {
|
||
uni.showToast({
|
||
title: "请先同意服务协议和隐私协议",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
};
|
||
|
||
const onLogin = (e) => {
|
||
const { code } = e.detail;
|
||
console.error("onLogin code", code);
|
||
|
||
loginAuth()
|
||
.then(async () => {
|
||
// 检测是否绑定手机号，已绑定则直接跳转首页，未绑定则获取手机号并绑定
|
||
const res = await checkPhone();
|
||
|
||
if (res.data) {
|
||
return goHome();
|
||
}
|
||
|
||
const { data } = await bindPhone({
|
||
wechatPhoneCode: code,
|
||
clientId: "2",
|
||
});
|
||
|
||
if (data) {
|
||
goHome();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.error("登录失败", err);
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./styles/index.scss";
|
||
</style> |