180 lines
4.2 KiB
Vue
180 lines
4.2 KiB
Vue
<template>
|
|
<uni-popup ref="popupRef" type="bottom" :safe-area="false">
|
|
<view class="popup-container">
|
|
<view class="popup-header">
|
|
<text class="popup-title">登录授权</text>
|
|
</view>
|
|
|
|
<view class="avatar-nickname">
|
|
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-selector custom-button">
|
|
<image v-if="avatarUrl" :src="avatarUrl" class="avatar-preview" />
|
|
<text v-else>获取头像</text>
|
|
</button>
|
|
<input
|
|
class="nickname-input"
|
|
type="nickname"
|
|
v-model="nickname"
|
|
placeholder="请输入昵称"
|
|
/>
|
|
</view>
|
|
|
|
<button class="confirm-btn custom-button" @tap="confirmLogin">确认登录</button>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { getPlatformProvider } from '@/utils/system'
|
|
import { apiLogin } from '@/api/auth.js'
|
|
import { wxLogin } from '@/utils/login.js'
|
|
|
|
// import { connectSocket, sendSocketMessage } from '@/utils/socket.js'
|
|
|
|
const popupRef = ref(null)
|
|
const avatarUrl = ref('')
|
|
const nickname = ref('')
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const emit = defineEmits(['logind'])
|
|
|
|
const open = () => {
|
|
popupRef.value.open()
|
|
}
|
|
|
|
const close = () => {
|
|
popupRef.value.close()
|
|
}
|
|
|
|
const onChooseAvatar = (e) => {
|
|
avatarUrl.value = e.detail.avatarUrl
|
|
}
|
|
|
|
const confirmLogin = async () => {
|
|
try {
|
|
const platform = getPlatformProvider()
|
|
if (platform === 'mp-weixin') {
|
|
const code = await wxLogin()
|
|
console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: avatarUrl.value })
|
|
// console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: 'http://tmp/HXhtcEwQ5A3B58476c91ba545ab67c6bf9c67d9c2559.jpeg' })
|
|
|
|
const fileKeyRes = await uni.uploadFile({
|
|
url: 'https://apis.lihailezzc.com/api/common/upload',
|
|
filePath: avatarUrl.value,
|
|
name: 'file', // 和后端接收文件字段名一致
|
|
header: {
|
|
'x-app-id': '6846f093fdf841f6189ef0b5',
|
|
},
|
|
})
|
|
if(fileKeyRes.statusCode < 400) {
|
|
const keyJson = JSON.parse(fileKeyRes.data)
|
|
const url = `https://file.lihailezzc.com/${keyJson?.data.key}`
|
|
const loginRes = await apiLogin({ code, nickname: nickname.value, avatarUrl: url })
|
|
// 保存用户信息到store
|
|
userStore.setUserInfo({
|
|
nickName: loginRes?.user?.nickname || nickname.value,
|
|
avatarUrl: loginRes?.user?.avatar || url,
|
|
id: loginRes?.user?.id
|
|
})
|
|
|
|
userStore.setToken(loginRes.token)
|
|
|
|
uni.showToast({ title: '登录成功', icon: 'success' })
|
|
emit('logind')
|
|
popupRef.value.close()
|
|
|
|
// connectSocket()
|
|
|
|
// 重置临时变量
|
|
avatarUrl.value = ''
|
|
nickname.value = ''
|
|
} else {
|
|
throw Error('获取失败')
|
|
}
|
|
|
|
}
|
|
} catch (err) {
|
|
uni.showToast({ title: '登录失败', icon: 'none' })
|
|
console.error(err)
|
|
}
|
|
}
|
|
defineExpose({ open, close })
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
.custom-button {
|
|
border: none;
|
|
outline: none;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: normal;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.custom-button::after {
|
|
border: none;
|
|
}
|
|
.popup-container {
|
|
background-color: #fff;
|
|
padding: 40rpx 30rpx 60rpx;
|
|
border-top-left-radius: 30rpx;
|
|
border-top-right-radius: 30rpx;
|
|
|
|
.popup-header {
|
|
text-align: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
.popup-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.avatar-nickname {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
.avatar-selector {
|
|
width: 145rpx;
|
|
height: 145rpx;
|
|
border-radius: 50%;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.avatar-preview {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.nickname-input {
|
|
width: 80%;
|
|
border: 1rpx solid #ccc;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.confirm-btn {
|
|
background-color: #07c160;
|
|
color: white;
|
|
font-size: 30rpx;
|
|
border-radius: 50rpx;
|
|
padding: 20rpx 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|