155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
<template>
|
|
<view class="login-wrapper" :style="{ backgroundImage: `url(${loginBg})` }">
|
|
<!-- 返回按钮 -->
|
|
<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="login-avatar" :src="logo" mode="widthFix"></image>
|
|
<image class="login-title" :src="subLogo" mode="widthFix"></image>
|
|
|
|
<!-- 描述 -->
|
|
<view class="login-desc">{{ loginDesc }}</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="getPhoneNumber"
|
|
>
|
|
微信一键登录
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 协议勾选 -->
|
|
<view class="login-agreement">
|
|
<CheckBox v-model="isAgree">
|
|
<text class="login-agreement-text">阅读并同意</text>
|
|
<text
|
|
class="login-agreement-link"
|
|
@click.stop="handleAgreeClick('service')"
|
|
>《服务协议》</text
|
|
>
|
|
<text class="login-agreement-text">和</text>
|
|
<text
|
|
class="login-agreement-link"
|
|
@click.stop="handleAgreeClick('privacy')"
|
|
>《隐私协议》</text
|
|
>
|
|
</CheckBox>
|
|
</view>
|
|
|
|
<AgreePopup
|
|
ref="agreePopup"
|
|
:visible="visible"
|
|
:agreement="computedAgreement"
|
|
@close="visible = false"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import {
|
|
getServiceAgreement,
|
|
getPrivacyAgreement,
|
|
} from "@/request/api/LoginApi";
|
|
import { onLogin, goBack } from "@/hooks/useGoLogin";
|
|
import loginBg from "./images/bg.png";
|
|
import CheckBox from "@/components/CheckBox/index.vue";
|
|
import AgreePopup from "./components/AgreePopup/index.vue";
|
|
import { zniconsMap } from "@/static/fonts/znicons.js";
|
|
import { getCurrentConfig } from "@/constant/base";
|
|
|
|
const isAgree = ref(false);
|
|
const visible = ref(false);
|
|
const serviceAgreement = ref("");
|
|
const privacyAgreement = ref("");
|
|
// 协议类型
|
|
const AgreeType = ref("service");
|
|
const logo = computed(() => getCurrentConfig().logo);
|
|
const subLogo = computed(() => getCurrentConfig().subLogo);
|
|
const loginDesc = computed(() => getCurrentConfig().loginDesc);
|
|
|
|
// 同意隐私协议并获取手机号
|
|
const handleAgreeAndGetPhone = () => {
|
|
if (!isAgree.value) {
|
|
uni.showToast({
|
|
title: "请先同意服务协议和隐私协议",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
};
|
|
|
|
const getPhoneNumber = (e) => {
|
|
onLogin(e)
|
|
.then(() => {
|
|
uni.showToast({
|
|
title: "登录成功",
|
|
icon: "success",
|
|
});
|
|
goBack();
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
// 处理同意协议点击事件
|
|
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();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "./styles/index.scss";
|
|
@font-face {
|
|
font-family: znicons;
|
|
src: url("@/static/fonts/znicons.ttf");
|
|
}
|
|
</style>
|