474 lines
8.9 KiB
Vue
474 lines
8.9 KiB
Vue
<template>
|
||
<cl-page background-color="#fff">
|
||
<cl-topbar :border="false" background-color="transparent" />
|
||
|
||
<view class="page-login">
|
||
<!-- Logo -->
|
||
<view class="logo">
|
||
<image src="/static/logo.png" mode="aspectFill" />
|
||
<text>{{ app.info.name }}</text>
|
||
</view>
|
||
|
||
<div class="container">
|
||
<!-- 登录方式 -->
|
||
<view class="mode" :class="[`is-${mode}`]">
|
||
<!-- 手机号 -->
|
||
<template v-if="mode == 'phone'">
|
||
<text class="label">手机号登录</text>
|
||
|
||
<view class="phone">
|
||
<text>+86</text>
|
||
<cl-input
|
||
v-model="phone"
|
||
type="number"
|
||
placeholder="请填写手机号码"
|
||
:border="false"
|
||
:maxlength="11"
|
||
:font-size="30"
|
||
background-color="transparent"
|
||
/>
|
||
</view>
|
||
|
||
<sms-btn
|
||
:ref="setRefs('smsBtn')"
|
||
:phone="phone"
|
||
@success="phoneLogin(false)"
|
||
>
|
||
<template #default="{ disabled, btnText }">
|
||
<cl-button
|
||
fill
|
||
type="primary"
|
||
:height="90"
|
||
:font-size="30"
|
||
:disabled="disabled"
|
||
@tap="phoneLogin"
|
||
>
|
||
{{ btnText }}
|
||
</cl-button>
|
||
</template>
|
||
</sms-btn>
|
||
</template>
|
||
|
||
<!-- 微信登录 -->
|
||
<template v-else-if="mode == 'wx'">
|
||
<cl-button
|
||
type="primary"
|
||
fill
|
||
:height="90"
|
||
:font-size="30"
|
||
:loading="loading"
|
||
@tap="wxLogin"
|
||
>
|
||
微信一键登录
|
||
</cl-button>
|
||
</template>
|
||
|
||
<!-- 协议 -->
|
||
<view class="agree">
|
||
<agree-btn :ref="setRefs('agreeBtn')" />
|
||
</view>
|
||
</view>
|
||
</div>
|
||
|
||
<!-- 其他登录方式 -->
|
||
<view class="other" v-if="!isEmpty(platformsEnv)">
|
||
<cl-divider width="400rpx" background-color="#ffffff">
|
||
<cl-text color="#ccc" value="其他登录方式" />
|
||
</cl-divider>
|
||
|
||
<view class="platform">
|
||
<view
|
||
class="platform__item"
|
||
v-for="(item, index) in platformsEnv"
|
||
:key="index"
|
||
@tap="changeMode(item)"
|
||
>
|
||
<image :src="item.icon" mode="aspectFit" v-if="item.icon" />
|
||
<text>{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</cl-page>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed, reactive, ref } from "vue";
|
||
import { onReady } from "@dcloudio/uni-app";
|
||
import { useApp, useCool, useStore, useWx } from "/@/cool";
|
||
import { useUi } from "/$/cool-ui";
|
||
import SmsBtn from "/@/components/sms-btn.vue";
|
||
import AgreeBtn from "/@/components/agree-btn.vue";
|
||
import { config } from "/@/config";
|
||
import { ctx } from "virtual:ctx";
|
||
import { cloneDeep, isEmpty } from "lodash-es";
|
||
|
||
interface Platform {
|
||
label: string;
|
||
value: any;
|
||
icon?: string;
|
||
hidden?: boolean;
|
||
onClick?: () => void;
|
||
}
|
||
|
||
const { service, router, refs, setRefs, storage } = useCool();
|
||
const { user } = useStore();
|
||
const app = useApp();
|
||
const ui = useUi();
|
||
const wx = useWx();
|
||
|
||
// 登录中
|
||
const loading = ref(false);
|
||
|
||
// 手机号
|
||
const phone = ref(storage.get("phone") || "");
|
||
|
||
// 登录方式
|
||
const mode = ref();
|
||
|
||
// 登录平台
|
||
const platforms = ref<Platform[]>([
|
||
{
|
||
label: "通过手机登录",
|
||
value: "phone",
|
||
icon: "/pages/user/static/icon/phone.png",
|
||
hidden: false,
|
||
},
|
||
{
|
||
label: "通过微信登录",
|
||
value: "wx",
|
||
icon: "/pages/user/static/icon/wx.png",
|
||
hidden: true,
|
||
},
|
||
]);
|
||
|
||
// 环境校验
|
||
const platformsEnv = computed(() => {
|
||
let arr = cloneDeep(platforms.value);
|
||
|
||
// #ifdef H5
|
||
if (wx.isWxBrowser()) {
|
||
arr[1].hidden = false;
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
arr[1].hidden = false;
|
||
// #endif
|
||
|
||
// 过滤隐藏的
|
||
arr = arr.filter((e) => !e.hidden);
|
||
|
||
// 默认第一个登录方式
|
||
if (!mode.value) {
|
||
mode.value = arr[0]?.value;
|
||
}
|
||
|
||
// 过滤不是当前登录方式
|
||
return arr.filter((e) => e.value != mode.value);
|
||
});
|
||
|
||
// 切换模式
|
||
function changeMode(item: Platform) {
|
||
if (item.onClick) {
|
||
item.onClick();
|
||
} else {
|
||
mode.value = item.value;
|
||
}
|
||
}
|
||
|
||
// 登录请求
|
||
async function nextLogin(key: "mini" | "mp" | "uniPhone", data: any) {
|
||
return service.user.login[key](data)
|
||
.then(async (res) => {
|
||
// 设置token
|
||
user.setToken(res);
|
||
|
||
// 获取用户信息
|
||
await user.get();
|
||
|
||
// 登录跳转
|
||
router.nextLogin(key);
|
||
})
|
||
.catch((err) => {
|
||
ui.showTips(err.message);
|
||
});
|
||
}
|
||
|
||
// 短信登录
|
||
function phoneLogin(sms?: boolean) {
|
||
if (sms) {
|
||
check(() => {
|
||
refs.smsBtn.open();
|
||
});
|
||
} else {
|
||
storage.set("phone", phone.value);
|
||
|
||
router.push({
|
||
path: "/pages/user/captcha",
|
||
query: {
|
||
phone: phone.value,
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
// 微信登录
|
||
function wxLogin() {
|
||
check(async () => {
|
||
// #ifdef APP
|
||
if (wx.hasApp()) {
|
||
wx.appLogin().then((code) => {
|
||
//
|
||
});
|
||
} else {
|
||
ui.showConfirm({
|
||
title: "温馨提示",
|
||
message: "您还未安装微信~",
|
||
showCancelButton: false,
|
||
confirmButtonText: "去下载",
|
||
callback(action) {
|
||
if (action == "confirm") {
|
||
wx.downloadApp();
|
||
}
|
||
},
|
||
});
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
loading.value = true;
|
||
|
||
await wx
|
||
.miniLogin()
|
||
.then(async (res) => {
|
||
await nextLogin("mini", res);
|
||
})
|
||
.catch((err) => {
|
||
ui.showToast(err.message);
|
||
});
|
||
|
||
loading.value = false;
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
wx.mpAuth();
|
||
// #endif
|
||
});
|
||
}
|
||
|
||
// 公众号登录
|
||
function mpLogin() {
|
||
// #ifdef H5
|
||
wx.mpLogin().then(async (code) => {
|
||
if (code) {
|
||
ui.showLoading();
|
||
await nextLogin("mp", { code });
|
||
ui.hideLoading();
|
||
}
|
||
});
|
||
// #endif
|
||
}
|
||
|
||
// 协议检测
|
||
function check(cb: () => void) {
|
||
if (refs.agreeBtn.check()) {
|
||
cb();
|
||
}
|
||
}
|
||
|
||
// 手机号一键登录
|
||
const univerify = reactive({
|
||
error: "",
|
||
|
||
check() {
|
||
// #ifdef APP
|
||
uni.preLogin({
|
||
provider: "univerify",
|
||
success() {
|
||
platforms.value.push({
|
||
label: "手机号一键登录",
|
||
value: "univerify",
|
||
onClick() {
|
||
univerify.login();
|
||
},
|
||
});
|
||
},
|
||
fail(err) {
|
||
univerify.error = err.metadata?.msg || "当前环境不支持一键登录，请切换至验证码登录";
|
||
},
|
||
});
|
||
// #endif
|
||
},
|
||
|
||
login() {
|
||
uni.login({
|
||
provider: "univerify",
|
||
univerifyStyle: {
|
||
authButton: {
|
||
normalColor: "#6b69f8",
|
||
highlightColor: "#6b69f8",
|
||
disabledColor: "#73aaf5",
|
||
textColor: "#ffffff",
|
||
title: "一键登录",
|
||
borderRadius: "12px",
|
||
},
|
||
privacyTerms: {
|
||
defaultCheckBoxState: true, // 条款勾选框初始状态
|
||
textColor: "#BBBBBB",
|
||
termsColor: "#5496E3",
|
||
prefix: "我已阅读并同意",
|
||
suffix: "并使用本机号码登录",
|
||
privacyItems: [
|
||
// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
|
||
{
|
||
url: `${config.baseUrl}/app/base/comm/html?key=userAgreement`,
|
||
title: "用户协议",
|
||
},
|
||
{
|
||
url: `${config.baseUrl}/app/base/comm/html?key=privacyPolicy`,
|
||
title: "隐私政策",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
async success(res: { authResult: any }) {
|
||
await nextLogin("uniPhone", {
|
||
appId: ctx.appid,
|
||
...res.authResult,
|
||
});
|
||
|
||
uni.closeAuthView();
|
||
},
|
||
fail() {
|
||
if (univerify.error) {
|
||
ui.showToast(univerify.error);
|
||
}
|
||
},
|
||
});
|
||
},
|
||
});
|
||
|
||
// 手机号一键登录环境检测
|
||
univerify.check();
|
||
|
||
onReady(() => {
|
||
// 公众号登录授权回调
|
||
mpLogin();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-login {
|
||
.logo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-top: 20%;
|
||
|
||
image {
|
||
display: block;
|
||
height: 150rpx;
|
||
width: 150rpx;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 25rpx 30rpx -25rpx #666666;
|
||
}
|
||
|
||
text {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 1rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 80rpx;
|
||
|
||
.mode {
|
||
width: 100%;
|
||
padding: 0 80rpx;
|
||
box-sizing: border-box;
|
||
|
||
.label {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
&.is-phone {
|
||
.phone {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #eeeeee;
|
||
border-radius: 10rpx;
|
||
height: 90rpx;
|
||
margin-bottom: 30rpx;
|
||
font-size: 30rpx;
|
||
|
||
text {
|
||
display: inline-block;
|
||
padding: 0 40rpx;
|
||
border-right: $cl-border-width solid $cl-border-color;
|
||
font-weight: bold;
|
||
color: #404040;
|
||
}
|
||
|
||
input {
|
||
height: 100%;
|
||
flex: 1;
|
||
padding: 0 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.agree {
|
||
text-align: center;
|
||
margin: 50rpx -60rpx 0 0;
|
||
}
|
||
}
|
||
|
||
.other {
|
||
margin-top: 100rpx;
|
||
|
||
.platform {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 20rpx 0 60rpx 0;
|
||
|
||
&__item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #000000;
|
||
height: 30px;
|
||
width: 130px;
|
||
margin-bottom: 28rpx;
|
||
border-radius: 6px;
|
||
background-color: #ffffff;
|
||
|
||
image {
|
||
height: 32rpx;
|
||
width: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|