303 lines
7.2 KiB
Vue
303 lines
7.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="mine-content">
|
|||
|
|
<!-- 顶部区域 -->
|
|||
|
|
<view class="mine-top-panel" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
|||
|
|
<view class="user-info">
|
|||
|
|
<!-- 根据登录状态显示不同内容 -->
|
|||
|
|
<view v-if="isLoggedIn" class="user-logged-in">
|
|||
|
|
<image :src="userInfo.avatarUrl" class="avatar" mode="aspectFill" />
|
|||
|
|
<view class="user-logged-in-info">
|
|||
|
|
<text class="nickname">{{ userInfo.nickName }}</text>
|
|||
|
|
<text class="phone">19969024553</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-else class="user-not-logged-in">
|
|||
|
|
<image :src="defaultAvatarUrl" class="avatar" mode="aspectFill" />
|
|||
|
|
<button class="login-button" @tap="openPopup">点击登录</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="mine-middle-panel">
|
|||
|
|
<view class="mine-info-panel">
|
|||
|
|
<view>0.00</view>
|
|||
|
|
<view>我的余额</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="mine-info-panel">
|
|||
|
|
<view>0</view>
|
|||
|
|
<view>优惠卷</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="mine-info-panel">
|
|||
|
|
<view>0</view>
|
|||
|
|
<view>积分</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="mine-info-panel">
|
|||
|
|
<view>0</view>
|
|||
|
|
<view>我的收藏</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 登录弹窗 -->
|
|||
|
|
<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">
|
|||
|
|
<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" @tap="confirmLogin">确认登录</button>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, computed, onMounted } from 'vue'
|
|||
|
|
import { wxLogin } from '@/utils/login.js'
|
|||
|
|
import { getPlatformProvider, getBavBarHeight } from '@/utils/system'
|
|||
|
|
import { useUserStore } from '@/stores/user'
|
|||
|
|
import { apiLogin } from '@/api/auth.js'
|
|||
|
|
|
|||
|
|
const userStore = useUserStore()
|
|||
|
|
const popupRef = ref(null)
|
|||
|
|
|
|||
|
|
// 用户输入的临时信息
|
|||
|
|
const avatarUrl = ref('')
|
|||
|
|
const nickname = ref('')
|
|||
|
|
|
|||
|
|
// 从store获取用户信息（改为计算属性）
|
|||
|
|
const userInfo = computed(() => ({
|
|||
|
|
nickName: userStore.userInfo.nickName || '未登录',
|
|||
|
|
avatarUrl: userStore.userInfo.avatarUrl || defaultAvatarUrl
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
// 判断用户是否已登录
|
|||
|
|
const isLoggedIn = computed(() => !!userStore.userInfo.nickName)
|
|||
|
|
|
|||
|
|
// 默认头像
|
|||
|
|
const defaultAvatarUrl = 'https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png'
|
|||
|
|
|
|||
|
|
// 获取状态栏高度
|
|||
|
|
const bavBarHeight = ref(0)
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 确保高度值在组件挂载后获取
|
|||
|
|
bavBarHeight.value = getBavBarHeight()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const openPopup = () => {
|
|||
|
|
popupRef.value.open()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const onChooseAvatar = (e) => {
|
|||
|
|
avatarUrl.value = e.detail.avatarUrl
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const confirmLogin = async () => {
|
|||
|
|
if (!nickname.value || !avatarUrl.value) {
|
|||
|
|
return uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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: nickname.value,
|
|||
|
|
avatarUrl: avatarUrl.value,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
userStore.setToken(loginRes.token)
|
|||
|
|
|
|||
|
|
uni.showToast({ title: '登录成功', icon: 'success' })
|
|||
|
|
popupRef.value.close()
|
|||
|
|
|
|||
|
|
// 重置临时变量
|
|||
|
|
avatarUrl.value = ''
|
|||
|
|
nickname.value = ''
|
|||
|
|
} else {
|
|||
|
|
throw Error('获取失败')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
uni.showToast({ title: '登录失败', icon: 'none' })
|
|||
|
|
console.error(err)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.mine-content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 100vh;
|
|||
|
|
background: #F9F6F2;
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
border: none;
|
|||
|
|
outline: none;
|
|||
|
|
background-color: transparent;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
line-height: normal;
|
|||
|
|
font-family: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button::after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-top-panel{
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 500rpx;
|
|||
|
|
background-color: #beecd8;
|
|||
|
|
border-bottom-left-radius: 50% 50rpx;
|
|||
|
|
border-bottom-right-radius: 50% 50rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.user-info{
|
|||
|
|
padding-left: 40rpx;
|
|||
|
|
image {
|
|||
|
|
width: 150rpx;
|
|||
|
|
height: 150rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
.user-logged-in{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
.user-logged-in-info{
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.nickname{
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
.phone{
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.user-not-logged-in{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
.login-button{
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.mine-middle-panel{
|
|||
|
|
width: 90vw;
|
|||
|
|
height: 200rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin-top: -100rpx;
|
|||
|
|
border-radius: 20rpx; /* 四角小圆角 */
|
|||
|
|
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05); /* 柔和阴影 */
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
.mine-info-panel{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 23%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/* 弹窗样式 */
|
|||
|
|
.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>
|