初始化参股
This commit is contained in:
488
前端/pages/user/index.uvue
Normal file
488
前端/pages/user/index.uvue
Normal file
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<scroll-view class="page-scroll" scroll-y>
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-section">
|
||||
<view class="user-card">
|
||||
<view class="avatar-wrapper">
|
||||
<image
|
||||
class="user-avatar"
|
||||
:src="userInfo.avatar || '/static/images/default-avatar.png'"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<text class="user-name">{{ userInfo.nickName || '点击登录' }}</text>
|
||||
<text class="user-phone" v-if="userInfo.phone">{{ userInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="user-action" @click="handleLogin" v-if="!isLoggedIn">
|
||||
<text class="action-text">登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="menu-section">
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToBookingList">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">📋</text>
|
||||
<text class="menu-text">我的预约</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-badge" v-if="bookingCount > 0">{{ bookingCount }}</text>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="goToFavorites">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">❤️</text>
|
||||
<text class="menu-text">我的收藏</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-badge" v-if="favoriteCount > 0">{{ favoriteCount }}</text>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToAbout">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">🏠</text>
|
||||
<text class="menu-text">关于我们</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="callService">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">📞</text>
|
||||
<text class="menu-text">联系客服</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-value">400-888-8888</text>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="openFeedback">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">💬</text>
|
||||
<text class="menu-text">意见反馈</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="checkUpdate">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">🔄</text>
|
||||
<text class="menu-text">检查更新</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-value">v1.0.0</text>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="clearCache">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">🧹</text>
|
||||
<text class="menu-text">清除缓存</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-value">{{ cacheSize }}</text>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view class="logout-section" v-if="isLoggedIn">
|
||||
<view class="logout-btn" @click="handleLogout">
|
||||
<text class="logout-text">退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部间距 -->
|
||||
<view class="bottom-space"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { STORAGE_KEYS } from '@/utils/config.uts'
|
||||
|
||||
// 用户信息类型
|
||||
type UserInfo = {
|
||||
id : string
|
||||
nickName : string
|
||||
avatar : string
|
||||
phone : string
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref<UserInfo>({
|
||||
id: '',
|
||||
nickName: '',
|
||||
avatar: '',
|
||||
phone: ''
|
||||
})
|
||||
|
||||
// 是否登录
|
||||
const isLoggedIn = ref(false)
|
||||
|
||||
// 预约数量
|
||||
const bookingCount = ref(0)
|
||||
|
||||
// 收藏数量
|
||||
const favoriteCount = ref(0)
|
||||
|
||||
// 缓存大小
|
||||
const cacheSize = ref('0KB')
|
||||
|
||||
// 检查登录状态
|
||||
const checkLoginStatus = () => {
|
||||
const token = uni.getStorageSync(STORAGE_KEYS.TOKEN) as string
|
||||
isLoggedIn.value = token != ''
|
||||
|
||||
if (isLoggedIn.value) {
|
||||
// 获取用户信息
|
||||
const info = uni.getStorageSync(STORAGE_KEYS.USER_INFO) as UTSJSONObject | null
|
||||
if (info != null) {
|
||||
userInfo.value = {
|
||||
id: (info['id'] ?? '') as string,
|
||||
nickName: (info['nickName'] ?? '') as string,
|
||||
avatar: (info['avatar'] ?? '') as string,
|
||||
phone: (info['phone'] ?? '') as string
|
||||
} as UserInfo
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取缓存大小
|
||||
const getCacheSize = () => {
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
const size = res.currentSize
|
||||
if (size < 1024) {
|
||||
cacheSize.value = `${size}KB`
|
||||
} else {
|
||||
cacheSize.value = `${(size / 1024).toFixed(2)}MB`
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 登录
|
||||
const handleLogin = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.getUserProfile({
|
||||
desc: '用于完善用户资料',
|
||||
success: (res) => {
|
||||
userInfo.value = {
|
||||
id: '',
|
||||
nickName: res.userInfo.nickName,
|
||||
avatar: res.userInfo.avatarUrl,
|
||||
phone: ''
|
||||
} as UserInfo
|
||||
|
||||
// 保存用户信息
|
||||
uni.setStorageSync(STORAGE_KEYS.USER_INFO, {
|
||||
nickName: res.userInfo.nickName,
|
||||
avatar: res.userInfo.avatarUrl
|
||||
} as UTSJSONObject)
|
||||
uni.setStorageSync(STORAGE_KEYS.TOKEN, 'mock_token_' + Date.now().toString())
|
||||
isLoggedIn.value = true
|
||||
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.showToast({
|
||||
title: '请在微信小程序中登录',
|
||||
icon: 'none'
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.removeStorageSync(STORAGE_KEYS.TOKEN)
|
||||
uni.removeStorageSync(STORAGE_KEYS.USER_INFO)
|
||||
isLoggedIn.value = false
|
||||
userInfo.value = {
|
||||
id: '',
|
||||
nickName: '',
|
||||
avatar: '',
|
||||
phone: ''
|
||||
} as UserInfo
|
||||
|
||||
uni.showToast({
|
||||
title: '已退出登录',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转预约列表
|
||||
const goToBookingList = () => {
|
||||
uni.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转收藏列表
|
||||
const goToFavorites = () => {
|
||||
uni.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 关于我们
|
||||
const goToAbout = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/about/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 联系客服
|
||||
const callService = () => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '400-888-8888',
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '拨打电话失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 意见反馈
|
||||
const openFeedback = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序可以使用feedback
|
||||
// #endif
|
||||
uni.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 检查更新
|
||||
const checkUpdate = () => {
|
||||
uni.showToast({
|
||||
title: '已是最新版本',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
// 清除缓存
|
||||
const clearCache = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要清除缓存吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
cacheSize.value = '0KB'
|
||||
uni.showToast({
|
||||
title: '清除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
checkLoginStatus()
|
||||
getCacheSize()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
flex: 1;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 用户信息 */
|
||||
.user-section {
|
||||
background: linear-gradient(135deg, #D4A574 0%, #B8895A 100%);
|
||||
padding: 48rpx 32rpx 64rpx;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border-width: 4rpx;
|
||||
border-style: solid;
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.user-phone {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.user-action {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 菜单区域 */
|
||||
.menu-section {
|
||||
margin-top: -32rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.menu-group {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.menu-right {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-value {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.menu-badge {
|
||||
background-color: #F56C6C;
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 999rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 32rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 退出登录 */
|
||||
.logout-section {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 28rpx 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-text {
|
||||
font-size: 30rpx;
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
/* 底部间距 */
|
||||
.bottom-space {
|
||||
height: 120rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user