159 lines
4.3 KiB
Vue
159 lines
4.3 KiB
Vue
<template>
|
||
<view class="login-wrapper bg-liner">
|
||
<!-- 返回按钮 -->
|
||
<view class="back-btn" @click="goBack">
|
||
<uni-icons fontFamily="znicons" size="24" color="#333">
|
||
{{ zniconsMap["zn-nav-arrow-left"] }}
|
||
</uni-icons>
|
||
</view>
|
||
|
||
<!-- 头部内容 -->
|
||
<view class="login-header">
|
||
<!-- 卡通形象 -->
|
||
<image class="w-full h-full" :src="logo" mode="widthFix" />
|
||
</view>
|
||
|
||
<!-- 协议勾选 -->
|
||
<view class="login-agreement flex flex-items-center">
|
||
<CheckBox v-model="isAgree">
|
||
<text class="font-size-12 color-525866">我已阅读并同意</text>
|
||
<text class="font-size-12 color-2D91FF ml-4 mr-4" @click.stop="handleAgreeClick('service')">《服务协议》</text>
|
||
<text class="font-size-12 color-525866">和</text>
|
||
<text class="font-size-12 color-2D91FF ml-4 mr-4" @click.stop="handleAgreeClick('privacy')">《隐私协议》</text>
|
||
<text class="font-size-12 color-525866">，\n</text>
|
||
<text class="font-size-12 color-525866 ml-30">授权与账号关联操作</text>
|
||
</CheckBox>
|
||
</view>
|
||
|
||
<!-- 按钮区域 -->
|
||
<view class="login-btn-area">
|
||
<!-- 同意隐私协议并获取手机号按钮 -->
|
||
<button v-if="needWxAuthLogin" class="login-btn" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||
手机号快捷登录
|
||
</button>
|
||
<button v-else class="login-btn" type="primary" @click="handleAgreeAndGetPhone">
|
||
手机号快捷登录
|
||
</button>
|
||
</view>
|
||
|
||
<AgreePopup ref="agreePopup" :visible="visible" :agreement="computedAgreement" @close="visible = false" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
import { ref, computed } from "vue";
|
||
import {
|
||
getServiceAgreement,
|
||
getPrivacyAgreement,
|
||
} from "@/request/api/LoginApi";
|
||
import { onLogin, goBack, refreshToken } from "@/hooks/useGoLogin";
|
||
import CheckBox from "@/components/CheckBox/index.vue";
|
||
import AgreePopup from "./components/AgreePopup/index.vue";
|
||
import { zniconsMap } from "@/static/fonts/znicons";
|
||
import { getCurrentConfig } from "@/constant/base";
|
||
|
||
// 是否需要微信手机号授权登录
|
||
const needWxAuthLogin = ref(false);
|
||
const isAgree = ref(false);
|
||
const visible = ref(false);
|
||
const serviceAgreement = ref("");
|
||
const privacyAgreement = ref("");
|
||
// 协议类型
|
||
const AgreeType = ref("service");
|
||
const logo = computed(() => getCurrentConfig().logo);
|
||
|
||
// 同意隐私协议并获取手机号
|
||
const handleAgreeAndGetPhone = () => {
|
||
// 如果需要微信登录，直接返回
|
||
if (needWxAuthLogin.value) {
|
||
return;
|
||
}
|
||
|
||
if (!isAgree.value) {
|
||
uni.showToast({
|
||
title: "请先同意服务协议和隐私协议",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
refreshToken().then(() => loginSuccess());
|
||
};
|
||
|
||
/// 获取授权后绑定手机号登录
|
||
const getPhoneNumber = (e) => {
|
||
if (!isAgree.value) {
|
||
uni.showToast({
|
||
title: "请先同意服务协议和隐私协议",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
onLogin(e).then(() => loginSuccess())
|
||
.catch(() => {
|
||
uni.showToast({
|
||
title: "获取登录手机号失败",
|
||
icon: "none",
|
||
});
|
||
});
|
||
};
|
||
|
||
/// 登录成功返回上一页
|
||
const loginSuccess = () => {
|
||
uni.showToast({
|
||
title: "登录成功",
|
||
icon: "success",
|
||
});
|
||
setTimeout(() => {
|
||
goBack();
|
||
}, 500);
|
||
};
|
||
|
||
// 处理同意协议点击事件
|
||
const handleAgreeClick = (type) => {
|
||
visible.value = true;
|
||
AgreeType.value = type;
|
||
};
|
||
|
||
// 计算协议类型
|
||
const computedAgreement = computed(() => {
|
||
if (AgreeType.value === "service") {
|
||
return serviceAgreement.value;
|
||
} else {
|
||
return privacyAgreement.value;
|
||
}
|
||
});
|
||
|
||
// 获取服务协议数据
|
||
const getServiceAgreementData = async () => {
|
||
const { data } = await getServiceAgreement();
|
||
serviceAgreement.value = data;
|
||
};
|
||
getServiceAgreementData();
|
||
|
||
// 获取隐私协议数据
|
||
const getPrivacyAgreementData = async () => {
|
||
const { data } = await getPrivacyAgreement();
|
||
privacyAgreement.value = data;
|
||
};
|
||
getPrivacyAgreementData();
|
||
|
||
// 页面显示时刷新token
|
||
onShow(async () => {
|
||
const res = await refreshToken();
|
||
needWxAuthLogin.value = res;
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./styles/index.scss";
|
||
|
||
@font-face {
|
||
font-family: znicons;
|
||
src: url("@/static/fonts/znicons.ttf");
|
||
}
|
||
</style>
|