|
|
@@ -1,214 +1,13 @@
|
|
|
<script lang="ts" setup>
|
|
|
-import type { IUploadSuccessInfo } from '@/api/types/login'
|
|
|
-import { storeToRefs } from 'pinia'
|
|
|
-import { LOGIN_PAGE } from '@/router/config'
|
|
|
-import { useUserStore } from '@/store'
|
|
|
-import { useTokenStore } from '@/store/token'
|
|
|
-import { useUpload } from '@/utils/uploadFile'
|
|
|
-
|
|
|
definePage({
|
|
|
style: {
|
|
|
navigationBarTitleText: '我的',
|
|
|
},
|
|
|
})
|
|
|
-
|
|
|
-const userStore = useUserStore()
|
|
|
-const tokenStore = useTokenStore()
|
|
|
-// 使用storeToRefs解构userInfo
|
|
|
-const { userInfo } = storeToRefs(userStore)
|
|
|
-
|
|
|
-// #ifndef MP-WEIXIN
|
|
|
-// 上传头像
|
|
|
-const { run: uploadAvatar } = useUpload<IUploadSuccessInfo>(
|
|
|
- '/upload',
|
|
|
- {},
|
|
|
- {
|
|
|
- onSuccess: (res) => {
|
|
|
- console.log('h5头像上传成功', res)
|
|
|
- useUserStore().setUserAvatar(res.url)
|
|
|
- },
|
|
|
- },
|
|
|
-)
|
|
|
-// #endif
|
|
|
-
|
|
|
-// 微信小程序下登录
|
|
|
-async function handleLogin() {
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- // 微信登录
|
|
|
- await tokenStore.wxLogin()
|
|
|
-
|
|
|
- // #endif
|
|
|
- // #ifndef MP-WEIXIN
|
|
|
- uni.navigateTo({
|
|
|
- url: `${LOGIN_PAGE}?redirect=${encodeURIComponent('/pages/me/me')}`,
|
|
|
- })
|
|
|
- // #endif
|
|
|
-}
|
|
|
-
|
|
|
-// #ifdef MP-WEIXIN
|
|
|
-
|
|
|
-// 微信小程序下选择头像事件
|
|
|
-function onChooseAvatar(e: any) {
|
|
|
- console.log('选择头像', e.detail)
|
|
|
- const { avatarUrl } = e.detail
|
|
|
- const { run } = useUpload<IUploadSuccessInfo>(
|
|
|
- '/upload',
|
|
|
- {},
|
|
|
- {
|
|
|
- onSuccess: (res) => {
|
|
|
- console.log('wx头像上传成功', res)
|
|
|
- useUserStore().setUserAvatar(res.url)
|
|
|
- },
|
|
|
- },
|
|
|
- avatarUrl,
|
|
|
- )
|
|
|
- run()
|
|
|
-}
|
|
|
-// #endif
|
|
|
-// #ifdef MP-WEIXIN
|
|
|
-// 微信小程序下设置用户名
|
|
|
-function getUserInfo(e: any) {
|
|
|
- console.log(e.detail)
|
|
|
-}
|
|
|
-// #endif
|
|
|
-
|
|
|
-// 退出登录
|
|
|
-function handleLogout() {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '确定要退出登录吗?',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- // 清空用户信息
|
|
|
- useTokenStore().logout()
|
|
|
- // 执行退出登录逻辑
|
|
|
- uni.showToast({
|
|
|
- title: '退出登录成功',
|
|
|
- icon: 'success',
|
|
|
- })
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- // 微信小程序,去首页
|
|
|
- // uni.reLaunch({ url: '/pages/index/index' })
|
|
|
- // #endif
|
|
|
- // #ifndef MP-WEIXIN
|
|
|
- // 非微信小程序,去登录页
|
|
|
- // uni.navigateTo({ url: LOGIN_PAGE })
|
|
|
- // #endif
|
|
|
- }
|
|
|
- },
|
|
|
- })
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="profile-container">
|
|
|
- <!-- 用户信息区域 -->
|
|
|
- <view class="user-info-section">
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
- <button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
|
- <image :src="userInfo.avatar" mode="scaleToFill" class="h-full w-full" />
|
|
|
- </button>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifndef MP-WEIXIN -->
|
|
|
- <view class="avatar-wrapper" @click="uploadAvatar">
|
|
|
- <image :src="userInfo.avatar" mode="scaleToFill" class="h-full w-full" />
|
|
|
- </view>
|
|
|
- <!-- #endif -->
|
|
|
- <view class="user-details">
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
- <input
|
|
|
- v-model="userInfo.username"
|
|
|
- type="nickname"
|
|
|
- class="weui-input"
|
|
|
- placeholder="请输入昵称"
|
|
|
- >
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifndef MP-WEIXIN -->
|
|
|
- <view class="username">
|
|
|
- {{ userInfo.username }}
|
|
|
- </view>
|
|
|
- <!-- #endif -->
|
|
|
- <view class="user-id">
|
|
|
- ID: {{ userInfo.userId }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="mt-3 break-all px-3">
|
|
|
- {{ JSON.stringify(userInfo, null, 2) }}
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="mt-20 px-3">
|
|
|
- <view class="m-auto w-160px text-center">
|
|
|
- <button v-if="tokenStore.hasLogin" type="warn" class="w-full" @click="handleLogout">
|
|
|
- 退出登录
|
|
|
- </button>
|
|
|
- <button v-else type="primary" class="w-full" @click="handleLogin">
|
|
|
- 登录
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="mt-10 text-center text-green-500">
|
|
|
+ 我的页面
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-/* 基础样式 */
|
|
|
-.profile-container {
|
|
|
- overflow: hidden;
|
|
|
- font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
|
|
|
- // background-color: #f7f8fa;
|
|
|
-}
|
|
|
-/* 用户信息区域 */
|
|
|
-.user-info-section {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 40rpx;
|
|
|
- margin: 30rpx 30rpx 20rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 24rpx;
|
|
|
- box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.avatar-wrapper {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- margin-right: 40rpx;
|
|
|
- overflow: hidden;
|
|
|
- border: 4rpx solid #f5f5f5;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
-}
|
|
|
-.avatar-button {
|
|
|
- height: 160rpx;
|
|
|
- width: 160rpx;
|
|
|
- padding: 0;
|
|
|
- margin-right: 40rpx;
|
|
|
- overflow: hidden;
|
|
|
- border: 4rpx solid #f5f5f5;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
-}
|
|
|
-.user-details {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.username {
|
|
|
- margin-bottom: 12rpx;
|
|
|
- font-size: 38rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- letter-spacing: 0.5rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.user-id {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
-}
|
|
|
-
|
|
|
-.user-created {
|
|
|
- margin-top: 8rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-</style>
|