<template>
|
<view class="login-page">
|
<view class="top-bar">
|
<text class="top-left">帮助</text>
|
<text class="top-right" @click="skipLogin">跳过</text>
|
</view>
|
|
<view class="logo-container">
|
<text class="app-name">光影</text>
|
<text class="subtitle">登录后，体验更多功能</text>
|
</view>
|
|
<view class="phone-number">
|
<!-- <text>+86 133 **** 4563</text> -->
|
</view>
|
|
<view class="buttons">
|
<!-- <up-button type="primary" class="login-btn" @click="quickLogin" shape="circle">一键登录</up-button> -->
|
<!-- <up-button type="info" class="wechat-btn" @click="wechatLogin" icon="weixin-fill" iconColor="#00c800"
|
text="微信登录" shape="circle"></up-button> -->
|
<up-button v-if="wxUser.user" type="info" class="login-btn" @click="wechatLogin" icon="weixin-fill"
|
iconColor="#00c800" text="微信登录" shape="circle"></up-button>
|
<up-button v-else type="info" class="login-btn" open-type="getPhoneNumber"
|
@getphonenumber="handleGetPhoneNumber" icon="weixin-fill" iconColor="#00c800" text="微信登录"
|
shape="circle"></up-button>
|
</view>
|
|
<view class="other-login" @click="otherLogin">
|
<text>其他登录方式 ></text>
|
</view>
|
|
<view class="agreement">
|
<view @click="toggleCheck">
|
<up-icon v-if="!isChecked" name="checkmark-circle" size="20"></up-icon>
|
<up-icon v-else name="checkmark-circle-fill" color="#ff2d4a" size="20"></up-icon>
|
</view>
|
<view class="prototal">
|
<text>我已阅读并同意</text>
|
<text class="policy-text" @click="toPortotal('用户协议')">《用户协议》</text>
|
<text class="policy-text" @click="toPortotal('隐私政策')">《隐私政策》</text>
|
<text class="policy-text" @click="toPortotal('未成年人个人信息保护规则')">《未成年人个人信息保护规则》</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue';
|
import { WxUser } from '@/types/index'
|
import { onShow } from '@dcloudio/uni-app'
|
import { useGlobal } from '@/composables/useGlobal'
|
import { usePlatformLoginType } from '@/composables/usePlatformLoginType'
|
import { useUserStore } from '@/store/user'
|
|
const { apitype } = usePlatformLoginType()
|
const { $http, $message, $store } = useGlobal()
|
const userStore = useUserStore()
|
|
const isChecked = ref(false)
|
const toggleCheck = () => {
|
isChecked.value = !isChecked.value
|
}
|
|
const wxUser = ref<WxUser | null>(null)
|
const wechatLogin = () => {
|
if (!isChecked.value) {
|
uni.showToast({ title: '请先同意协议', icon: 'none' });
|
return;
|
}
|
// 微信登录
|
uni.login({
|
"provider": "weixin",
|
"onlyAuthorize": true, // 微信登录仅请求授权认证
|
success: async function (event:any) {
|
const { code } = event
|
$message.showLoading();
|
const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
|
if (resp && resp.data) {
|
// that.$forceUpdate()
|
uni.reLaunch({
|
url: '/pages/home/home'
|
})
|
}
|
$message.hideLoading();
|
},
|
fail: function (err:any) {
|
// 登录授权失败
|
// err.code是错误码
|
}
|
})
|
|
|
};
|
|
onShow(() => {
|
console.log('页面显示')
|
getOpenId()
|
});
|
const getOpenId = () => {
|
uni.login({
|
"provider": "weixin",
|
"onlyAuthorize": true, // 微信登录仅请求授权认证
|
success: async function (event: any) {
|
const { code } = event
|
let openIdExistFlag = await getExistUserByOpenId(code);
|
},
|
fail: function (err: any) {
|
// 登录授权失败
|
// err.code是错误码
|
}
|
})
|
}
|
const getExistUserByOpenId = async (accessCode: String) => {
|
const {
|
code, data
|
} = await $http.request('post', '/api/wx/getExistUserByOpenId', {
|
data: {
|
code: accessCode,
|
userType: apitype.value.replace("login", "").toLowerCase()
|
}
|
})
|
if (code == 0) {
|
wxUser.value = data
|
if (wxUser && wxUser.user) {
|
return true
|
}
|
return false
|
} else {
|
$message.showToast('系统异常，无法获取当前微信是否已经绑定过账号')
|
}
|
}
|
|
const handleGetPhoneNumber = async (e: any) => {
|
|
if (!isChecked.value) {
|
$message.showToast('请同意用户协议')
|
return
|
}
|
|
if (e.detail.errMsg == 'getPhoneNumber:ok') {
|
console.log('获取成功')
|
const {
|
code, data
|
} = await $http.request('post', '/api/wx/getuserphonenumber', {
|
data: {
|
code: e.detail.code,
|
userType: apitype.value.replace("login", "").toLowerCase()
|
}
|
})
|
if (code == 0) {
|
debugger;
|
// 获取手机号码后，实现微信登录
|
const phoneNumber = data.phone_info.phoneNumber;
|
const purePhoneNumber = data.phone_info.purePhoneNumber;
|
wxUser.value.phoneNumber = phoneNumber
|
wxUser.value.purePhoneNumber = purePhoneNumber
|
handleWechatClick()
|
} else {
|
|
}
|
} else {
|
$message.showToast('获取授权失败，无法登录！')
|
}
|
}
|
|
const handleWechatClick = () => {
|
uni.login({
|
"provider": "weixin",
|
"onlyAuthorize": true, // 微信登录仅请求授权认证
|
success: async function (event: any) {
|
const { code } = event
|
$message.showLoading();
|
console.log("获取到的微信用户信息是：", wxUser.value)
|
const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
|
if (resp && resp.data) {
|
// $forceUpdate()
|
uni.reLaunch({
|
url: '/pages/home/home'
|
})
|
}
|
$message.hideLoading();
|
},
|
fail: function (err: any) {
|
// 登录授权失败
|
// err.code是错误码
|
}
|
})
|
}
|
|
|
|
const otherLogin = () => {
|
// 跳转到其他登录方式页面
|
uni.navigateTo({ url: '/pages/login/other' });
|
};
|
|
const skipLogin = () => {
|
uni.switchTab({ url: '/pages/home/index' });
|
};
|
|
|
const toPortotal = (title: string) => {
|
uni.navigateTo({
|
url: `/sub-pages/protocol/protocol?title=${encodeURIComponent(title)}`
|
});
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.login-page {
|
padding: 40rpx;
|
background-color: #000;
|
color: #fff;
|
min-height: 100vh;
|
|
.top-bar {
|
display: flex;
|
justify-content: space-between;
|
font-size: 28rpx;
|
color: #888;
|
}
|
|
.logo-container {
|
margin-top: 120rpx;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
|
.app-name {
|
font-size: 60rpx;
|
font-weight: bold;
|
color: #ff2d4a;
|
}
|
|
.subtitle {
|
margin-top: 20rpx;
|
font-size: 26rpx;
|
color: #ccc;
|
}
|
}
|
|
.phone-number {
|
text-align: center;
|
margin: 200px 0 60rpx;
|
font-size: 36rpx;
|
font-weight: bold;
|
}
|
|
.buttons {
|
display: flex;
|
flex-direction: column;
|
gap: 30rpx;
|
padding: 0 60rpx;
|
|
.login-btn {
|
background-color: #ff2d4a;
|
border: none;
|
color: #fff;
|
}
|
|
.wechat-btn {
|
background-color: #1c1c1e;
|
color: #fff;
|
}
|
}
|
|
.other-login {
|
margin-top: 40rpx;
|
text-align: center;
|
font-size: 26rpx;
|
color: #CFD7E0;
|
}
|
|
.agreement {
|
margin-top: 60rpx;
|
font-size: 24rpx;
|
color: #aaa;
|
display: flex;
|
align-items: flex-start;
|
gap: 30rpx;
|
padding: 0 60rpx;
|
|
.prototal {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
font-size: 24rpx;
|
line-height: 1.4;
|
|
.policy-text {
|
color: #CFD7E0;
|
font-size: 12px;
|
margin-left: 2px;
|
}
|
}
|
}
|
}
|
</style>
|
