<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
|
type="primary"
|
class="guest-btn"
|
@click="skipLogin"
|
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>-->
|
<up-button
|
v-if="wxUser && wxUser.user"
|
type="primary"
|
class="login-btn"
|
@click="showWechatLoginConfirm"
|
icon=""
|
iconColor="#00c800"
|
text="手机号快捷登录"
|
shape="circle"
|
custom-style="background: #ff2d4a; color: white;"
|
></up-button>
|
<up-button
|
v-else
|
type="primary"
|
class="login-btn"
|
open-type="getPhoneNumber"
|
@getphonenumber="handleGetPhoneNumber"
|
icon=""
|
iconColor="#00c800"
|
text="手机号快捷登录"
|
shape="circle"
|
custom-style="background: #ff2d4a; color: white;"
|
></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>({
|
user: null,
|
phoneNumber: '',
|
purePhoneNumber: ''
|
});
|
// 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是错误码
|
// }
|
// })
|
//
|
//
|
// };
|
const wechatLogin = () => {
|
uni.login({
|
provider: "weixin",
|
onlyAuthorize: true,
|
success: async function (event:any) {
|
$message.showLoading();
|
const { code } = event;
|
const resp = await userStore.loginwx({
|
code,
|
phoneNumber: wxUser.value?.phoneNumber,
|
purePhoneNumber: wxUser.value?.purePhoneNumber
|
});
|
|
if (resp?.data) {
|
uni.reLaunch({ url: '/pages/home/home' });
|
}
|
$message.hideLoading();
|
},
|
fail: function (err:any) {
|
console.error('登录失败:', err);
|
}
|
});
|
};
|
|
// onShow(() => {
|
// console.log('页面显示')
|
// getOpenId()
|
// });
|
|
const showWechatLoginConfirm = () => {
|
if (!isChecked.value) {
|
uni.showToast({ title: '请先同意协议', icon: 'none' });
|
return;
|
}
|
|
uni.showModal({
|
title: '授权提示',
|
content: '需要使用手机号登录才能获得完整服务？',
|
confirmText: '确认登录',
|
cancelText: '暂不需要',
|
success: (res) => {
|
if (res.confirm) {
|
wechatLogin();
|
}
|
}
|
});
|
};
|
|
|
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) {
|
wxUser.value = {
|
...wxUser.value,
|
phoneNumber: data.phone_info.phoneNumber,
|
purePhoneNumber: data.phone_info.purePhoneNumber,
|
user: {} // 确保user不为null
|
};
|
wechatLogin();
|
// // 获取手机号码后，实现微信登录
|
// 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 handleWechatClick = () => {
|
uni.login({
|
provider: "weixin",
|
onlyAuthorize: true,
|
success: async function (event: any) {
|
$message.showLoading();
|
const resp = await userStore.loginwx({
|
code: event.code,
|
phoneNumber: wxUser.value?.phoneNumber,
|
purePhoneNumber: wxUser.value?.purePhoneNumber
|
});
|
|
if (resp?.data) {
|
uni.reLaunch({ url: '/pages/home/home' });
|
}
|
$message.hideLoading();
|
},
|
fail: function (err: any) {
|
console.error('登录失败:', err);
|
}
|
});
|
};
|
|
const otherLogin = () => {
|
// 跳转到其他登录方式页面
|
uni.navigateTo({ url: '/pages/login/other' });
|
};
|
|
const skipLogin = () => {
|
// uni.switchTab({ url: '/pages/home/home' });gai
|
uni.reLaunch({ url: '/pages/home/home' });
|
};
|
|
|
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;
|
}
|
|
.guest-btn {
|
background-color: #ff2d4a;
|
border: none;
|
color: #fff;
|
margin-bottom: 20rpx;
|
}
|
|
.login-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>
|
