liqupan/webUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:交接

Browse Source
This commit is contained in:
liqupan
2025-11-04 19:25:16 +08:00
parent 4b8498203d
commit d45e556c20
20 changed files with 4441 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
src/pages/mine/mine.vue
View File

@@ -1,63 +1,100 @@
<template>
<view class="container">
<!-- 头部以上背景区域 -->
<view class="top-background"></view>
<!-- 顶部自定义导航栏 -->
<view class="custom-navbar fixed-navbar">
<text class="navbar-title">我的</text>
</view>
<!-- 用户信息区域 -->
<view class="user-info">
<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
<view class="user-details" v-if="isLoggedIn">
<text class="login-text">{{ nickName }}</text>
<text class="user-id">ID: {{ openid }}</text>
</view>
<view class="user-details" v-else>
<text class="login-text">请登录</text>
<text class="user-id">ID:</text>
<button class="login-btn" @click="handleLogin">{{ loginButtonText }}</button>
</view>
</view>
<!-- 菜单卡片 -->
<view class="menu-cards">
<!-- 用户须知 -->
<view class="menu-card" @click="showAgreement">
<view class="card-icon notice-icon">🔊</view>
<text class="card-title">用户须知</text>
<!-- 可滚动内容区域 -->
<scroll-view
class="scroll-container"
scroll-y="true"
enable-back-to-top="false"
refresher-enabled="false"
:refresher-triggered="false"
:refresher-threshold="0"
:show-scrollbar="false"
:scroll-with-animation="false"
:bounces="false"
:always-bounce-vertical="false"
:scroll-top="0"
:upper-threshold="0"
:lower-threshold="0"
>
<!-- 用户信息区域 -->
<view class="user-info">
<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
<view class="user-details" v-if="isLoggedIn">
<text class="login-text">{{ nickName }}</text>
<text class="user-id">ID: {{ openid }}</text>
</view>
<view class="user-details" v-else>
<text class="login-text">请登录</text>
<text class="user-id">ID:</text>
<button class="login-btn" @click="handleLogin">{{ loginButtonText }}</button>
</view>
</view>
<!-- 用户设备 -->
<view class="menu-card">
<view class="card-icon device-icon">📦</view>
<text class="card-title">用户设备</text>
<!-- 余额显示 -->
<view class="balance-section" v-if="isLoggedIn">
<view class="balance-card">
<view class="balance-info">
<view class="balance-label">账户余额</view>
<view class="balance-amount">¥{{ userBalance }}</view>
</view>
<view class="balance-actions">
<button class="recharge-btn" @click="goToRecharge">充值</button>
<button class="history-btn" @click="goToHistory">记录</button>
</view>
</view>
</view>
</view>
<!-- 剧情角色区块 -->
<view class="section-block">
<view class="section-header">
<text class="section-title">剧情角色</text>
<text class="view-all">查看全部</text>
<!-- 菜单卡片 -->
<view class="menu-cards">
<!-- 用户须知 -->
<view class="menu-card" @click="showAgreement">
<view class="card-icon notice-icon">🔊</view>
<text class="card-title">用户须知</text>
</view>
<!-- 用户设备 -->
<view class="menu-card">
<view class="card-icon device-icon">📦</view>
<text class="card-title">用户设备</text>
</view>
</view>
</view>
<!-- 克隆声音区块 -->
<view class="section-block">
<view class="section-header">
<text class="section-title">克隆声音</text>
<text class="view-all">查看全部</text>
<!-- 剧情角色区块 -->
<view class="section-block">
<view class="section-header">
<text class="section-title">剧情角色</text>
<text class="view-all">查看全部</text>
</view>
</view>
</view>
<!-- 退出登录按钮，仅登录后显示 -->
<view class="logout-section">
<button class="logout-btn" @click="handleLogout">退出登录</button>
<button class="logout-btn" style="margin-top: 20rpx; background-color: #ff9800; color: white;" @click="testDirectApiCall">直接测试API</button>
<text style="display: block; margin-top: 20rpx; text-align: center; color: #999;">
登录状态: {{ isLoggedIn ? '已登录' : '未登录' }}
</text>
</view>
<!-- 克隆声音区块 -->
<view class="section-block">
<view class="section-header">
<text class="section-title">克隆声音</text>
<text class="view-all">查看全部</text>
</view>
</view>
<!-- 退出登录按钮，仅登录后显示 -->
<view class="logout-section">
<button class="logout-btn" @click="handleLogout">退出登录</button>
<button class="logout-btn" style="margin-top: 20rpx; background-color: #ff9800; color: white;" @click="testDirectApiCall">直接测试API</button>
<text style="display: block; margin-top: 20rpx; text-align: center; color: #999;">
登录状态: {{ isLoggedIn ? '已登录' : '未登录' }}
</text>
</view>
<!-- 底部留白，避免被tabbar遮挡 -->
<view class="bottom-spacing"></view>
</scroll-view>
<!-- 用户须知弹窗 -->
<user-agreement
@@ -71,6 +108,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/stores/user.js';
import { rechargeAPI } from '@/utils/api.js';
import UserAgreement from '@/components/UserAgreement.vue';
// 状态管理 - 避免直接依赖store的响应式
@@ -82,6 +120,7 @@ const isLoggedIn = ref(false);
const nickName = ref('');
const openid = ref('');
const avatarUrl = ref('/static/default-avatar.png');
const userBalance = ref(0.00);
// 登录按钮文本
const loginButtonText = computed(() => {
@@ -128,15 +167,13 @@ onMounted(() => {
userStore.init();
// 初始化本地状态
initUserInfo();
// 加载用户余额
loadUserBalance();
});
// 登录处理
const handleLogin = async () => {
try {
// 先清理假登录数据
console.log('开始登录，先清理假登录数据...');
userStore.clearFakeLoginData();
uni.showLoading({
title: '登录中...'
});
@@ -156,18 +193,11 @@ const handleLogin = async () => {
uni.hideLoading();
console.error('Login failed:', error);
let errorMessage = '登录失败';
if (error.message) {
errorMessage = error.message;
} else if (typeof error === 'string') {
errorMessage = error;
}
// 显示详细的错误信息
uni.showModal({
// 登录失败
uni.showToast({
title: '登录失败',
content: `错误信息：${errorMessage}\n\n请检查：\n1. 网络连接是否正常\n2. 后端服务是否运行\n3. 微信小程序配置是否正确`,
showCancel: false
icon: 'none',
duration: 2000
});
}
};
@@ -339,7 +369,7 @@ const testDirectApiCall = () => {
showCancel: false,
success: () => {
uni.request({
url: 'http://8.145.52.111:8084/app/logout',
url: 'https://www.aixsy.com.cn/app/logout',
method: 'POST',
header: {
'Content-Type': 'application/json'
@@ -376,11 +406,11 @@ Token: ${currentToken || '无'}
showCancel: false,
success: () => {
uni.request({
url: 'http://8.145.52.111:8084/app/logout',
url: 'https://www.aixsy.com.cn/app/logout',
method: 'POST',
header: {
'Content-Type': 'application/json',
'Authorization': currentToken || ''
'Authorization': currentToken ? (currentToken.startsWith('Bearer ') ? currentToken : 'Bearer ' + currentToken) : ''
},
complete: (res) => {
uni.showModal({
@@ -399,7 +429,7 @@ Token: ${currentToken || '无'}
content: `尝试带token参数的URL`,
showCancel: false,
success: () => {
const url = `http://8.145.52.111:8084/app/logout?token=${currentToken || ''}`;
const url = `https://www.aixsy.com.cn/app/logout?token=${currentToken || ''}`;
uni.request({
url: url,
method: 'POST',
@@ -423,34 +453,86 @@ Token: ${currentToken || '无'}
}
});
};
// 加载用户余额
const loadUserBalance = async () => {
if (!isLoggedIn.value) return;
try {
const result = await rechargeAPI.getUserBalance();
if (result.success) {
userBalance.value = result.data.balance || 0;
}
} catch (error) {
console.error('获取用户余额失败:', error);
}
};
// 跳转到充值页面
const goToRecharge = () => {
uni.navigateTo({
url: '/pages/recharge/recharge'
});
};
// 跳转到充值记录页面
const goToHistory = () => {
uni.navigateTo({
url: '/pages/recharge/history'
});
};
</script>
<style scoped>
.fixed-navbar {
position: fixed;
top: 0;
top: 100rpx;
left: 0;
width: 100vw;
z-index: 100;
}
.container {
background: #fff9f2;
background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
min-height: 100vh;
padding-top: 100rpx;
padding-top: 200rpx;
padding-bottom: 120rpx;
}
/* 滚动容器样式 */
.scroll-container {
height: calc(100vh - 200rpx);
z-index: 2;
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
overflow: hidden;
}
/* 头部以上背景区域 */
.top-background {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100rpx;
background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
z-index: 99;
}
.custom-navbar {
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
background: #fff9f2;
background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
backdrop-filter: blur(10px);
border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
font-weight: bold;
font-size: 38rpx;
letter-spacing: 2rpx;
}
.navbar-title {
color: #333;
color: #ffffff;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}
/* 用户信息区域 */
@@ -458,7 +540,55 @@ Token: ${currentToken || '无'}
display: flex;
align-items: center;
padding: 32rpx;
background: #fff9f2;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
/* 余额区域 */
.balance-section {
padding: 0 24rpx 24rpx;
}
.balance-card {
background: linear-gradient(135deg, #8a2be2 0%, #6b2c9c 100%);
border-radius: 20rpx;
padding: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.3);
}
.balance-info .balance-label {
font-size: 28rpx;
opacity: 0.9;
margin-bottom: 8rpx;
}
.balance-info .balance-amount {
font-size: 48rpx;
font-weight: bold;
}
.balance-actions {
display: flex;
gap: 20rpx;
}
.balance-actions .recharge-btn,
.balance-actions .history-btn {
background: rgba(255, 255, 255, 0.2);
color: #fff;
border: 1rpx solid rgba(255, 255, 255, 0.3);
border-radius: 30rpx;
padding: 16rpx 24rpx;
font-size: 26rpx;
min-width: 100rpx;
}
.balance-actions .recharge-btn {
background: rgba(255, 255, 255, 0.3);
}
.avatar {
width: 140rpx;
@@ -501,15 +631,18 @@ Token: ${currentToken || '无'}
display: flex;
align-items: center;
padding: 40rpx 30rpx;
background: #fff;
background: rgba(255, 255, 255, 0.9);
border: 2rpx solid rgba(138, 43, 226, 0.3);
border-radius: 20rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
backdrop-filter: blur(8px);
}
.card-icon {
font-size: 48rpx;
color: #ff9800;
color: #8a2be2;
margin-right: 24rpx;
filter: drop-shadow(0 2rpx 4rpx rgba(138, 43, 226, 0.3));
}
.card-title {
font-size: 32rpx;
@@ -518,11 +651,14 @@ Token: ${currentToken || '无'}
/* 区块样式 */
.section-block {
background: #fff;
background: rgba(255, 255, 255, 0.9);
border: 2rpx solid rgba(138, 43, 226, 0.3);
border-radius: 20rpx;
margin: 24rpx;
padding: 30rpx;
margin-bottom: 24rpx;
box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
backdrop-filter: blur(8px);
}
.section-header {
display: flex;
@@ -544,9 +680,17 @@ Token: ${currentToken || '无'}
}
.logout-btn {
width: 100%;
background-color: #f5f5f5;
color: #666;
background: rgba(255, 255, 255, 0.9);
color: #8a2be2;
font-size: 30rpx;
border-radius: 8rpx;
border: 2rpx solid rgba(138, 43, 226, 0.3);
border-radius: 20rpx;
box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.2);
backdrop-filter: blur(8px);
}
/* 底部留白 */
.bottom-spacing {
height: 40rpx;
}
</style>