首次
This commit is contained in:
Tivibra
@@ -57,6 +57,7 @@
|
|||||||
"vue-i18n": "^9.1.9"
|
"vue-i18n": "^9.1.9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/plugin-transform-private-property-in-object": "^7.23.4",
|
||||||
"@dcloudio/types": "^3.4.8",
|
"@dcloudio/types": "^3.4.8",
|
||||||
"@dcloudio/uni-automator": "3.0.0-4060420250429001",
|
"@dcloudio/uni-automator": "3.0.0-4060420250429001",
|
||||||
"@dcloudio/uni-cli-shared": "3.0.0-4060420250429001",
|
"@dcloudio/uni-cli-shared": "3.0.0-4060420250429001",
|
||||||
|
|||||||
28
project.config.json
Normal file
28
project.config.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"appid": "wxff56c34ef9aceb62",
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "3.8.10",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": [],
|
||||||
|
"include": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"coverView": true,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"minified": true,
|
||||||
|
"enhance": true,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"condition": {},
|
||||||
|
"editorSetting": {
|
||||||
|
"tabIndent": "insertSpaces",
|
||||||
|
"tabSize": 4
|
||||||
|
}
|
||||||
|
}
|
||||||
7
project.private.config.json
Normal file
7
project.private.config.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||||
|
"projectname": "webUI",
|
||||||
|
"setting": {
|
||||||
|
"compileHotReLoad": true
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/App.vue
20
src/App.vue
@@ -3,21 +3,11 @@ export default {
|
|||||||
onLaunch: function () {
|
onLaunch: function () {
|
||||||
console.log('App Launch');
|
console.log('App Launch');
|
||||||
|
|
||||||
// 检查本地存储中是否有同意协议的记录
|
// 应用启动时的全局初始化逻辑
|
||||||
try {
|
// 启动页会自动处理倒计时和页面跳转
|
||||||
const hasAgreed = uni.getStorageSync('hasAgreedToTerms');
|
|
||||||
// 如果没有同意过，显示协议页面
|
// 可以在这里添加其他全局初始化逻辑
|
||||||
if (hasAgreed !== 'true') {
|
// 例如：设置全局变量、注册事件监听器等
|
||||||
// 使用setTimeout避免可能的导航冲突
|
|
||||||
setTimeout(() => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/agreement/agreement'
|
|
||||||
});
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Check agreement status error:', e);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onShow: function () {
|
onShow: function () {
|
||||||
|
|||||||
@@ -4,7 +4,9 @@
|
|||||||
<view class="agreement-header">
|
<view class="agreement-header">
|
||||||
<text class="agreement-title">用户须知</text>
|
<text class="agreement-title">用户须知</text>
|
||||||
</view>
|
</view>
|
||||||
<scroll-view class="agreement-body" scroll-y show-scrollbar="true">
|
|
||||||
|
<!-- 用普通view替代scroll-view -->
|
||||||
|
<view class="agreement-body">
|
||||||
<view class="agreement-inner">
|
<view class="agreement-inner">
|
||||||
<view class="agreement-section">
|
<view class="agreement-section">
|
||||||
<view class="section-title">1 年龄与身份</view>
|
<view class="section-title">1 年龄与身份</view>
|
||||||
@@ -29,17 +31,32 @@
|
|||||||
<text class="section-item">3.3 若不同意本须知，请立即退出并停止使用本平台及相关产品。</text>
|
<text class="section-item">3.3 若不同意本须知，请立即退出并停止使用本平台及相关产品。</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</view>
|
||||||
|
|
||||||
<view class="agreement-footer">
|
<view class="agreement-footer">
|
||||||
<button class="btn-disagree" @click="handleDisagree">暂不进入</button>
|
<view
|
||||||
<button class="btn-agree" @click="handleAgree">确定</button>
|
class="btn-disagree"
|
||||||
|
:class="{ 'btn-disabled': isProcessing }"
|
||||||
|
@click.stop.prevent="handleDisagree"
|
||||||
|
@tap.stop.prevent="handleDisagree"
|
||||||
|
>
|
||||||
|
{{ isProcessing ? '处理中...' : '暂不进入' }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="btn-agree"
|
||||||
|
:class="{ 'btn-disabled': isProcessing }"
|
||||||
|
@click.stop.prevent="handleAgree"
|
||||||
|
@tap.stop.prevent="handleAgree"
|
||||||
|
>
|
||||||
|
{{ isProcessing ? '处理中...' : '确定' }}
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineEmits } from 'vue';
|
import { ref, onMounted, nextTick } from 'vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
visible: {
|
visible: {
|
||||||
@@ -50,15 +67,80 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emit = defineEmits(['agree', 'disagree']);
|
const emit = defineEmits(['agree', 'disagree']);
|
||||||
|
|
||||||
// 处理同意事件
|
// 防止重复点击的状态
|
||||||
const handleAgree = () => {
|
const isProcessing = ref(false);
|
||||||
emit('agree');
|
|
||||||
|
// 组件挂载时的调试信息
|
||||||
|
onMounted(() => {
|
||||||
|
console.log('UserAgreement component mounted, visible:', props.visible);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 防抖处理函数
|
||||||
|
const debounce = (func, wait) => {
|
||||||
|
let timeout;
|
||||||
|
return function executedFunction(...args) {
|
||||||
|
const later = () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
func(...args);
|
||||||
|
};
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(later, wait);
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 处理同意事件
|
||||||
|
const handleAgree = debounce(async () => {
|
||||||
|
if (isProcessing.value) {
|
||||||
|
console.log('UserAgreement: handleAgree already processing, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isProcessing.value = true;
|
||||||
|
console.log('UserAgreement: handleAgree clicked');
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('About to emit agree event');
|
||||||
|
emit('agree');
|
||||||
|
console.log('Agree event emitted');
|
||||||
|
|
||||||
|
// 确保DOM更新完成
|
||||||
|
await nextTick();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in handleAgree:', error);
|
||||||
|
} finally {
|
||||||
|
// 延迟重置状态，避免快速连续点击
|
||||||
|
setTimeout(() => {
|
||||||
|
isProcessing.value = false;
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
|
||||||
// 处理不同意事件
|
// 处理不同意事件
|
||||||
const handleDisagree = () => {
|
const handleDisagree = debounce(async () => {
|
||||||
|
if (isProcessing.value) {
|
||||||
|
console.log('UserAgreement: handleDisagree already processing, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isProcessing.value = true;
|
||||||
|
console.log('UserAgreement: handleDisagree clicked');
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('About to emit disagree event');
|
||||||
emit('disagree');
|
emit('disagree');
|
||||||
};
|
console.log('Disagree event emitted');
|
||||||
|
|
||||||
|
// 确保DOM更新完成
|
||||||
|
await nextTick();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in handleDisagree:', error);
|
||||||
|
} finally {
|
||||||
|
// 延迟重置状态，避免快速连续点击
|
||||||
|
setTimeout(() => {
|
||||||
|
isProcessing.value = false;
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -72,7 +154,8 @@ const handleDisagree = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 9999;
|
z-index: 99999;
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.agreement-content {
|
.agreement-content {
|
||||||
@@ -84,6 +167,7 @@ const handleDisagree = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 88vh;
|
max-height: 88vh;
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.agreement-header {
|
.agreement-header {
|
||||||
@@ -100,6 +184,7 @@ const handleDisagree = () => {
|
|||||||
|
|
||||||
.agreement-body {
|
.agreement-body {
|
||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
|
overflow-y: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -153,6 +238,12 @@ const handleDisagree = () => {
|
|||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: auto;
|
||||||
|
user-select: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-disagree {
|
.btn-disagree {
|
||||||
@@ -161,8 +252,30 @@ const handleDisagree = () => {
|
|||||||
border-right: 1rpx solid #EEEEEE;
|
border-right: 1rpx solid #EEEEEE;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-disagree:hover {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-disagree:active {
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-agree {
|
.btn-agree {
|
||||||
background: #FF9800;
|
background: #FF9800;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-agree:hover {
|
||||||
|
background: #e68900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-agree:active {
|
||||||
|
background: #cc7700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-disabled {
|
||||||
|
background: #cccccc;
|
||||||
|
color: #999999;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -12,7 +12,7 @@
|
|||||||
"compilerVersion" : 3,
|
"compilerVersion" : 3,
|
||||||
"splashscreen" : {
|
"splashscreen" : {
|
||||||
"alwaysShowBeforeRender" : true,
|
"alwaysShowBeforeRender" : true,
|
||||||
"waiting" : true,
|
"waiting" : false,
|
||||||
"autoclose" : true,
|
"autoclose" : true,
|
||||||
"delay" : 0
|
"delay" : 0
|
||||||
},
|
},
|
||||||
@@ -50,11 +50,20 @@
|
|||||||
"quickapp" : {},
|
"quickapp" : {},
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"mp-weixin" : {
|
"mp-weixin" : {
|
||||||
"appid" : "",
|
"appid" : "wxff56c34ef9aceb62",
|
||||||
"setting" : {
|
"setting" : {
|
||||||
"urlCheck" : false
|
"urlCheck" : false,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"minified": true
|
||||||
},
|
},
|
||||||
"usingComponents" : true
|
"usingComponents" : true,
|
||||||
|
"permission": {
|
||||||
|
"scope.userLocation": {
|
||||||
|
"desc": "您的位置信息将用于小程序位置接口的效果展示"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"requiredPrivateInfos": []
|
||||||
},
|
},
|
||||||
"mp-alipay" : {
|
"mp-alipay" : {
|
||||||
"usingComponents" : true
|
"usingComponents" : true
|
||||||
|
|||||||
@@ -1,5 +1,16 @@
|
|||||||
{
|
{
|
||||||
|
"lazyCodeLoading": "requiredComponents",
|
||||||
"pages": [
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "pages/splash/splash",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"disableScroll": true,
|
||||||
|
"app-plus": {
|
||||||
|
"popGesture": "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -39,6 +50,12 @@
|
|||||||
"popGesture": "none"
|
"popGesture": "none"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/chat/chat",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
@@ -55,14 +72,11 @@
|
|||||||
"list": [
|
"list": [
|
||||||
{
|
{
|
||||||
"pagePath": "pages/index/index",
|
"pagePath": "pages/index/index",
|
||||||
"iconPath": "static/tabbar/home.png",
|
|
||||||
"selectedIconPath": "static/tabbar/home_selected.png",
|
|
||||||
"text": "首页"
|
"text": "首页"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/mine/mine",
|
"pagePath": "pages/mine/mine",
|
||||||
"iconPath": "static/tabbar/mine.png",
|
|
||||||
"selectedIconPath": "static/tabbar/mine_selected.png",
|
|
||||||
"text": "我的"
|
"text": "我的"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -17,19 +17,15 @@ const handleAgree = () => {
|
|||||||
// 保存到本地存储
|
// 保存到本地存储
|
||||||
uni.setStorageSync('hasAgreedToTerms', 'true');
|
uni.setStorageSync('hasAgreedToTerms', 'true');
|
||||||
|
|
||||||
// 返回上一页或首页
|
// 跳转到"我的"页面
|
||||||
uni.navigateBack({
|
|
||||||
fail: () => {
|
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: '/pages/index/index'
|
url: '/pages/mine/mine'
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Save agreement status error:', e);
|
console.error('Save agreement status error:', e);
|
||||||
// 发生错误时也返回首页
|
// 发生错误时也跳转到"我的"页面
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: '/pages/index/index'
|
url: '/pages/mine/mine'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
1056
src/pages/chat/chat.vue
Normal file
1056
src/pages/chat/chat.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,54 +1,114 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="floral-container">
|
||||||
|
<!-- 花卉装饰背景 -->
|
||||||
|
<view class="floral-decoration">
|
||||||
|
<!-- 右上角花朵 -->
|
||||||
|
<view class="flower flower-1">
|
||||||
|
<view class="petal"></view>
|
||||||
|
<view class="petal"></view>
|
||||||
|
<view class="petal"></view>
|
||||||
|
<view class="petal"></view>
|
||||||
|
<view class="center"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 左下角枝叶 -->
|
||||||
|
<view class="branch branch-1">
|
||||||
|
<view class="stem"></view>
|
||||||
|
<view class="leaf leaf-1"></view>
|
||||||
|
<view class="leaf leaf-2"></view>
|
||||||
|
<view class="leaf leaf-3"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 顶部自定义导航栏，固定在最上方 -->
|
<!-- 顶部自定义导航栏，固定在最上方 -->
|
||||||
<view class="custom-navbar fixed-navbar">
|
<view class="custom-navbar fixed-navbar">
|
||||||
<text class="navbar-title">TEST玩具</text>
|
<text class="navbar-title">因为AI 所以爱</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 卡片区 -->
|
<!-- 卡片区 -->
|
||||||
<view class="card-row">
|
<view class="card-row">
|
||||||
<view class="card create-card" @click="goToCreate">
|
<view class="floral-card create-card" @click="goToCreate">
|
||||||
<view class="card-icon create-icon">+</view>
|
<view class="card-icon create-icon">🌸</view>
|
||||||
<text class="card-title">创建</text>
|
<text class="card-title">创建</text>
|
||||||
|
<text class="card-desc">开启创意之旅</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="card connect-card">
|
<view class="floral-card connect-card">
|
||||||
<view class="card-icon connect-icon">🌐</view>
|
<view class="card-icon connect-icon" :class="{'connected': deviceConnected}">{{ deviceConnected ? '🌟' : '⭕' }}</view>
|
||||||
<text class="card-title bold">连接设备</text>
|
<text class="card-title bold">{{ deviceConnected ? '设备已连接' : '设备未连接' }}</text>
|
||||||
<text class="card-sn">SN: xxxxxxxx</text>
|
<text class="card-sn">SN: {{ deviceSN }}</text>
|
||||||
|
<text class="card-id">ID: {{ deviceId }}</text>
|
||||||
|
<button class="floral-btn connect-btn" @click="connectDevice">{{ deviceConnected ? '断开连接' : '连接设备' }}</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 二级Tab -->
|
<!-- 二级Tab -->
|
||||||
<view class="tab-row">
|
<view class="tab-row">
|
||||||
<view :class="['tab-btn', tabActive === 'drama' ? 'active' : '']" @tap="tabActive = 'drama'">剧情</view>
|
<view :class="['floral-tab-btn', tabActive === 'drama' ? 'active' : '']" @tap="tabActive = 'drama'">
|
||||||
<view :class="['tab-btn', tabActive === 'chat' ? 'active' : '']" @tap="tabActive = 'chat'">聊天</view>
|
<text class="tab-icon">🎭</text>
|
||||||
|
<text class="tab-text">剧情</text>
|
||||||
|
</view>
|
||||||
|
<view :class="['floral-tab-btn', tabActive === 'chat' ? 'active' : '']" @tap="tabActive = 'chat'">
|
||||||
|
<text class="tab-icon">💬</text>
|
||||||
|
<text class="tab-text">聊天</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 瀑布流卡片区 -->
|
<!-- 两列可滚动卡片区 -->
|
||||||
<view class="waterfall">
|
<scroll-view
|
||||||
<block v-for="(item, idx) in currentList" :key="item.id">
|
class="scroll-container"
|
||||||
<view class="waterfall-card">
|
scroll-y="true"
|
||||||
<image class="cover" :src="item.cover" mode="aspectFill" />
|
enable-back-to-top="true"
|
||||||
<view class="tag">{{ item.tag }}</view>
|
refresher-enabled="true"
|
||||||
|
refresher-threshold="45"
|
||||||
|
refresher-default-style="black"
|
||||||
|
:show-scrollbar="false"
|
||||||
|
>
|
||||||
|
<view class="two-column-grid">
|
||||||
|
<view class="column column-left">
|
||||||
|
<block v-for="(item, idx) in leftColumnItems" :key="item.id">
|
||||||
|
<view class="floral-grid-card">
|
||||||
|
<image class="cover" :src="item.cover" mode="aspectFit" />
|
||||||
|
<view class="floral-tag">{{ item.tag }}</view>
|
||||||
<view class="content-area">
|
<view class="content-area">
|
||||||
<view class="title">{{ item.title }}</view>
|
<view class="title">{{ item.title }}</view>
|
||||||
<view class="card-bottom">
|
<view class="card-bottom">
|
||||||
<button v-if="userStore.isLoggedIn" class="use-btn" @click="handleUse(item)">去使用</button>
|
<button v-if="userStore.isLoggedIn" class="floral-btn use-btn" @click="handleUse(item)">💝 去使用</button>
|
||||||
<button v-else class="use-btn login-required" @click="showLoginTip">去使用</button>
|
<button v-else class="floral-btn outline use-btn login-required" @click="showLoginTip">🔐 去使用</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="column column-right">
|
||||||
|
<block v-for="(item, idx) in rightColumnItems" :key="item.id">
|
||||||
|
<view class="floral-grid-card">
|
||||||
|
<image class="cover" :src="item.cover" mode="aspectFit" />
|
||||||
|
<view class="floral-tag">{{ item.tag }}</view>
|
||||||
|
<view class="content-area">
|
||||||
|
<view class="title">{{ item.title }}</view>
|
||||||
|
<view class="card-bottom">
|
||||||
|
<button v-if="userStore.isLoggedIn" class="floral-btn use-btn" @click="handleUse(item)">💝 去使用</button>
|
||||||
|
<button v-else class="floral-btn outline use-btn login-required" @click="showLoginTip">🔐 去使用</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部留白，避免被tabbar遮挡 -->
|
||||||
|
<view class="bottom-spacing"></view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 登录提示弹窗 -->
|
<!-- 登录提示弹窗 -->
|
||||||
<view class="login-modal" v-if="showLoginModal">
|
<view class="floral-modal" v-if="showLoginModal">
|
||||||
<view class="login-modal-content">
|
<view class="floral-modal-content">
|
||||||
<view class="login-modal-title">提示</view>
|
<view class="modal-title">💝 温馨提示</view>
|
||||||
<view class="login-modal-text">请先登录后再操作</view>
|
<view class="modal-text">请先登录后再开始您的创意之旅</view>
|
||||||
<view class="login-modal-btns">
|
<view class="modal-btns">
|
||||||
<button class="modal-btn cancel" @click="showLoginModal = false">取消</button>
|
<button class="floral-btn outline modal-btn cancel" @click="showLoginModal = false">稍后再说</button>
|
||||||
<button class="modal-btn confirm" @click="goToLogin">去登录</button>
|
<button class="floral-btn modal-btn confirm" @click="goToLogin">🌸 去登录</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -63,20 +123,31 @@ import { useUserStore } from '@/stores/user.js';
|
|||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const tabActive = ref('drama');
|
const tabActive = ref('drama');
|
||||||
const showLoginModal = ref(false);
|
const showLoginModal = ref(false);
|
||||||
|
const deviceConnected = ref(false);
|
||||||
|
const deviceSN = ref('未连接');
|
||||||
|
const deviceId = ref('30:ed:a0:12:99:60'); // 固定设备ID
|
||||||
|
|
||||||
// 数据
|
// 数据
|
||||||
const dramaList = ref([
|
const dramaList = ref([
|
||||||
{ id: 1, cover: '/static/drama1.jpg', tag: '台词腔', title: '白领女友的温柔早安' },
|
{ id: 1, cover: '/static/bailing.jpg', tag: '浪漫', title: '白领女友的温柔早安' },
|
||||||
{ id: 2, cover: '/static/drama2.jpg', tag: '人妻', title: '豪门女主的秘密生活' },
|
{ id: 2, cover: '/static/haomen.jpg', tag: '优雅', title: '豪门女主的秘密生活' },
|
||||||
{ id: 3, cover: '/static/drama3.jpg', tag: '外卖媛', title: '外卖小姐姐的贴心问候' },
|
{ id: 3, cover: '/static/waimai.jpg', tag: '活泼', title: '外卖小姐姐的贴心问候' },
|
||||||
{ id: 4, cover: '/static/drama4.jpg', tag: '病娇', title: '因爱执仗的少女' },
|
{ id: 4, cover: '/static/tunvlang.jpg', tag: '深情', title: '因爱执著的少女' },
|
||||||
|
{ id: 9, cover: '/static/logo.png', tag: '温暖', title: '邻家女孩的暖心故事' },
|
||||||
|
{ id: 10, cover: '/static/logo.png', tag: '梦幻', title: '公主的浪漫邂逅' },
|
||||||
|
{ id: 11, cover: '/static/logo.png', tag: '治愈', title: '咖啡店的午后时光' },
|
||||||
|
{ id: 12, cover: '/static/logo.png', tag: '青春', title: '校园里的美好回忆' },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const chatList = ref([
|
const chatList = ref([
|
||||||
{ id: 5, cover: '/static/chat1.jpg', tag: '萌妹', title: '可爱萌妹陪你聊' },
|
{ id: 5, cover: '/static/logo.png', tag: '可爱', title: '萌妹陪你聊天' },
|
||||||
{ id: 6, cover: '/static/chat2.jpg', tag: '御姐', title: '知性御姐的温柔夜话' },
|
{ id: 6, cover: '/static/logo.png', tag: '知性', title: '御姐的温柔夜话' },
|
||||||
{ id: 7, cover: '/static/chat3.jpg', tag: '萝莉', title: '萝莉的童真世界' },
|
{ id: 7, cover: '/static/logo.png', tag: '纯真', title: '童真世界探索' },
|
||||||
{ id: 8, cover: '/static/chat4.jpg', tag: '男友', title: '贴心男友的陪伴' },
|
{ id: 8, cover: '/static/logo.png', tag: '贴心', title: '温暖男友陪伴' },
|
||||||
|
{ id: 13, cover: '/static/logo.png', tag: '幽默', title: '搞笑达人的日常' },
|
||||||
|
{ id: 14, cover: '/static/logo.png', tag: '智慧', title: '博学者的深度对话' },
|
||||||
|
{ id: 15, cover: '/static/logo.png', tag: '活力', title: '运动健将的正能量' },
|
||||||
|
{ id: 16, cover: '/static/logo.png', tag: '艺术', title: '文艺青年的灵感分享' },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 计算属性
|
// 计算属性
|
||||||
@@ -84,19 +155,127 @@ const currentList = computed(() => {
|
|||||||
return tabActive.value === 'drama' ? dramaList.value : chatList.value;
|
return tabActive.value === 'drama' ? dramaList.value : chatList.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 左列数据（偶数索引：0, 2, 4...）
|
||||||
|
const leftColumnItems = computed(() => {
|
||||||
|
return currentList.value.filter((item, index) => index % 2 === 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 右列数据（奇数索引：1, 3, 5...）
|
||||||
|
const rightColumnItems = computed(() => {
|
||||||
|
return currentList.value.filter((item, index) => index % 2 === 1);
|
||||||
|
});
|
||||||
|
|
||||||
// 生命周期
|
// 生命周期
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
userStore.init();
|
userStore.init();
|
||||||
|
// 获取设备连接状态
|
||||||
|
checkDeviceStatus();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 检查设备状态
|
||||||
|
const checkDeviceStatus = () => {
|
||||||
|
// 如果用户已登录，则获取设备状态
|
||||||
|
if (userStore.isLoggedIn) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '获取设备状态...'
|
||||||
|
});
|
||||||
|
|
||||||
|
uni.request({
|
||||||
|
url: 'http://8.145.52.111:8084/api/device/status',
|
||||||
|
method: 'GET',
|
||||||
|
header: {
|
||||||
|
'Authorization': userStore.token || ''
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
console.log('设备状态响应:', res);
|
||||||
|
if (res.statusCode === 200 && res.data.data) {
|
||||||
|
const data = res.data.data;
|
||||||
|
deviceConnected.value = data.connected || false;
|
||||||
|
deviceSN.value = data.sn || '未知SN';
|
||||||
|
// 不再从响应中获取设备ID，使用固定值
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('获取设备状态失败:', err);
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 方法
|
// 方法
|
||||||
const handleUse = (item) => {
|
const handleUse = (item) => {
|
||||||
console.log('使用角色:', item);
|
console.log('使用角色:', item);
|
||||||
|
|
||||||
|
// 显示加载提示
|
||||||
|
uni.showLoading({
|
||||||
|
title: `正在设置角色...`
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取token
|
||||||
|
const token = userStore.token;
|
||||||
|
|
||||||
|
// 根据角色id映射到roleId参数
|
||||||
|
let roleId = 0;
|
||||||
|
if (tabActive.value === 'drama') {
|
||||||
|
// 剧情角色映射
|
||||||
|
switch (item.id) {
|
||||||
|
case 1: roleId = 1; break; // 白领女友
|
||||||
|
case 2: roleId = 2; break; // 豪门女主
|
||||||
|
case 3: roleId = 3; break; // 外卖小姐姐
|
||||||
|
case 4: roleId = 4; break; // 病娇少女
|
||||||
|
default: roleId = 0;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 聊天角色跳转到聊天页面
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/chat/chat?characterId=${item.id}`
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 不再检查设备ID是否存在，直接使用固定值
|
||||||
|
|
||||||
|
// 调用设备更新API - 使用form data格式
|
||||||
|
uni.request({
|
||||||
|
url: 'http://8.145.52.111:8084/api/device/update',
|
||||||
|
method: 'POST',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
'Authorization': token || ''
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
roleId: roleId,
|
||||||
|
deviceId: deviceId.value // 使用固定的设备ID
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
console.log('设备更新成功:', res);
|
||||||
|
if (res.statusCode === 200) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: `正在加载: ${item.title}`,
|
title: `角色设置成功`,
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.data?.message || '设备更新失败',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
});
|
});
|
||||||
// 这里添加跳转到详情页或使用页面的逻辑
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('设备更新失败:', err);
|
||||||
|
uni.showToast({
|
||||||
|
title: '设备更新失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const showLoginTip = () => {
|
const showLoginTip = () => {
|
||||||
@@ -115,9 +294,184 @@ const goToCreate = () => {
|
|||||||
url: '/pages/create/create'
|
url: '/pages/create/create'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const connectDevice = () => {
|
||||||
|
// 显示加载提示
|
||||||
|
uni.showLoading({
|
||||||
|
title: deviceConnected.value ? '断开连接中...' : '连接设备中...'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取token
|
||||||
|
const token = userStore.token;
|
||||||
|
|
||||||
|
// 准备请求数据 - 始终使用固定设备ID
|
||||||
|
const requestData = {
|
||||||
|
deviceId: deviceId.value // 固定设备ID
|
||||||
|
};
|
||||||
|
|
||||||
|
// 调用设备连接/断开API
|
||||||
|
uni.request({
|
||||||
|
url: `http://8.145.52.111:8084/api/device/${deviceConnected.value ? 'disconnect' : 'connect'}`,
|
||||||
|
method: 'POST',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': token || ''
|
||||||
|
},
|
||||||
|
data: requestData,
|
||||||
|
success: (res) => {
|
||||||
|
console.log('设备操作成功:', res);
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
// 更新设备状态
|
||||||
|
deviceConnected.value = !deviceConnected.value;
|
||||||
|
|
||||||
|
if (deviceConnected.value) {
|
||||||
|
// 如果是连接成功，更新设备SN
|
||||||
|
if (res.data.data) {
|
||||||
|
deviceSN.value = res.data.data.sn || '未知SN';
|
||||||
|
// 不更新设备ID，保持固定值
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 如果是断开连接，重置设备SN
|
||||||
|
deviceSN.value = '未连接';
|
||||||
|
// 设备ID保持不变
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: deviceConnected.value ? '设备已连接' : '设备已断开',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.data?.message || '操作失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('设备操作失败:', err);
|
||||||
|
uni.showToast({
|
||||||
|
title: '设备操作失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* 花卉主题首页样式 */
|
||||||
|
.floral-container {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f8f6f0;
|
||||||
|
position: relative;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
padding-top: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 花卉装饰背景 */
|
||||||
|
.floral-decoration {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 花朵样式 */
|
||||||
|
.flower {
|
||||||
|
position: absolute;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
animation: gentle-float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flower-1 {
|
||||||
|
top: 100px;
|
||||||
|
right: 30px;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.petal {
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 28px;
|
||||||
|
background: #ff7b7b;
|
||||||
|
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.petal:nth-child(1) { transform: rotate(0deg) translateY(-12px); }
|
||||||
|
.petal:nth-child(2) { transform: rotate(90deg) translateY(-12px); }
|
||||||
|
.petal:nth-child(3) { transform: rotate(180deg) translateY(-12px); }
|
||||||
|
.petal:nth-child(4) { transform: rotate(270deg) translateY(-12px); }
|
||||||
|
|
||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: #ffeb99;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 枝叶样式 */
|
||||||
|
.branch {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 150px;
|
||||||
|
left: 20px;
|
||||||
|
width: 80px;
|
||||||
|
height: 100px;
|
||||||
|
animation: gentle-sway 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stem {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 70px;
|
||||||
|
background: #4a9b4a;
|
||||||
|
border-radius: 1px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaf {
|
||||||
|
position: absolute;
|
||||||
|
width: 18px;
|
||||||
|
height: 28px;
|
||||||
|
background: #4a9b4a;
|
||||||
|
border-radius: 0 100% 0 100%;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaf-1 {
|
||||||
|
top: 15px;
|
||||||
|
left: 25px;
|
||||||
|
transform: rotate(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaf-2 {
|
||||||
|
top: 35px;
|
||||||
|
right: 20px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaf-3 {
|
||||||
|
top: 55px;
|
||||||
|
left: 28px;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 导航栏样式 */
|
||||||
.fixed-navbar {
|
.fixed-navbar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -125,196 +479,395 @@ const goToCreate = () => {
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
.container {
|
|
||||||
background: #fff;
|
|
||||||
min-height: 100vh;
|
|
||||||
padding-bottom: 120rpx;
|
|
||||||
padding-top: 100rpx;
|
|
||||||
}
|
|
||||||
.custom-navbar {
|
.custom-navbar {
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(90deg, #ffe5c2, #fff6e5);
|
background: rgba(248, 246, 240, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1rpx solid rgba(255, 123, 123, 0.2);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 38rpx;
|
font-size: 32rpx;
|
||||||
letter-spacing: 2rpx;
|
letter-spacing: 2rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-title {
|
.navbar-title {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
/* 卡片区域样式 */
|
||||||
.card-row {
|
.card-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 32rpx 24rpx 0 24rpx;
|
margin: 32rpx 24rpx 0 24rpx;
|
||||||
|
gap: 20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.card {
|
|
||||||
|
.floral-card {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: #fff;
|
background: rgba(255, 255, 255, 0.9);
|
||||||
border-radius: 18rpx;
|
border: 2rpx solid rgba(255, 123, 123, 0.3);
|
||||||
box-shadow: 0 2rpx 12rpx #f5e6d6;
|
border-radius: 25rpx;
|
||||||
margin: 0 8rpx;
|
box-shadow: 0 8rpx 30rpx rgba(255, 123, 123, 0.15);
|
||||||
padding: 24rpx 0;
|
padding: 30rpx 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
.create-icon {
|
|
||||||
|
.floral-card:hover {
|
||||||
|
transform: translateY(-4rpx);
|
||||||
|
box-shadow: 0 12rpx 40rpx rgba(255, 123, 123, 0.2);
|
||||||
|
border-color: #ff7b7b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
font-size: 48rpx;
|
font-size: 48rpx;
|
||||||
color: #ff9800;
|
margin-bottom: 12rpx;
|
||||||
}
|
filter: drop-shadow(0 2rpx 4rpx rgba(255, 123, 123, 0.3));
|
||||||
.connect-icon {
|
|
||||||
font-size: 40rpx;
|
|
||||||
color: #ff9800;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
margin-top: 8rpx;
|
font-size: 28rpx;
|
||||||
font-size: 30rpx;
|
|
||||||
}
|
|
||||||
.bold {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.card-sn {
|
|
||||||
|
.card-desc {
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #bbb;
|
color: #666;
|
||||||
margin-top: 4rpx;
|
text-align: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-sn, .card-id {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 花卉按钮样式 */
|
||||||
|
.floral-btn {
|
||||||
|
background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 12rpx 28rpx;
|
||||||
|
box-shadow: 0 4rpx 15rpx rgba(255, 123, 123, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floral-btn:hover {
|
||||||
|
transform: translateY(-2rpx);
|
||||||
|
box-shadow: 0 6rpx 20rpx rgba(255, 123, 123, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floral-btn.outline {
|
||||||
|
background: transparent;
|
||||||
|
color: #ff7b7b;
|
||||||
|
border: 2rpx solid #ff7b7b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floral-btn.outline:hover {
|
||||||
|
background: #ff7b7b;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/* Tab区域样式 */
|
||||||
.tab-row {
|
.tab-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 32rpx 24rpx 0 24rpx;
|
margin: 40rpx 24rpx 20rpx 24rpx;
|
||||||
border-bottom: 2rpx solid #f5e6d6;
|
gap: 16rpx;
|
||||||
}
|
z-index: 2;
|
||||||
.tab-btn {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 32rpx;
|
|
||||||
padding: 18rpx 0;
|
|
||||||
color: #bbb;
|
|
||||||
font-weight: 500;
|
|
||||||
border-bottom: 4rpx solid transparent;
|
|
||||||
}
|
|
||||||
.tab-btn.active {
|
|
||||||
color: #ff9800;
|
|
||||||
border-bottom: 4rpx solid #ff9800;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.waterfall {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 24rpx 12rpx 0 12rpx;
|
|
||||||
}
|
|
||||||
.waterfall-card {
|
|
||||||
width: 46%;
|
|
||||||
margin: 2%;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 18rpx;
|
|
||||||
box-shadow: 0 2rpx 12rpx #f5e6d6;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
}
|
||||||
margin-bottom: 24rpx;
|
|
||||||
|
.floral-tab-btn {
|
||||||
|
flex: 1;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
border: 2rpx solid rgba(255, 123, 123, 0.3);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 20rpx 16rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.floral-tab-btn.active {
|
||||||
|
background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
|
||||||
|
border-color: #ff7b7b;
|
||||||
|
transform: translateY(-2rpx);
|
||||||
|
box-shadow: 0 6rpx 20rpx rgba(255, 123, 123, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floral-tab-btn.active .tab-text {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
/* 两列可滚动样式 */
|
||||||
|
.scroll-container {
|
||||||
|
height: calc(100vh - 280rpx);
|
||||||
|
margin: 24rpx 12rpx 0 12rpx;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.two-column-grid {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
padding: 20rpx 16rpx 0 16rpx;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-left {
|
||||||
|
padding-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-right {
|
||||||
|
padding-left: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floral-grid-card {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border: 2rpx solid rgba(255, 123, 123, 0.2);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-shadow: 0 6rpx 25rpx rgba(255, 123, 123, 0.15);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
animation: card-fade-in 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floral-grid-card:hover {
|
||||||
|
transform: translateY(-4rpx);
|
||||||
|
box-shadow: 0 10rpx 35rpx rgba(255, 123, 123, 0.2);
|
||||||
|
border-color: #ff7b7b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-spacing {
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.cover {
|
.cover {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 220rpx;
|
height: 220rpx;
|
||||||
object-fit: cover;
|
object-fit: contain;
|
||||||
border-radius: 18rpx 18rpx 0 0;
|
border-radius: 18rpx 18rpx 0 0;
|
||||||
|
background: rgba(248, 246, 240, 0.5);
|
||||||
}
|
}
|
||||||
.tag {
|
|
||||||
|
.floral-tag {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12rpx;
|
top: 12rpx;
|
||||||
left: 12rpx;
|
left: 12rpx;
|
||||||
background: #ff9800;
|
background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 22rpx;
|
font-size: 20rpx;
|
||||||
border-radius: 8rpx;
|
font-weight: 500;
|
||||||
padding: 4rpx 14rpx;
|
border-radius: 12rpx;
|
||||||
z-index: 2;
|
padding: 6rpx 16rpx;
|
||||||
|
z-index: 3;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(255, 123, 123, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-area {
|
.content-area {
|
||||||
padding: 16rpx;
|
padding: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 28rpx;
|
font-size: 26rpx;
|
||||||
margin-bottom: 12rpx;
|
margin-bottom: 16rpx;
|
||||||
line-height: 1.3;
|
line-height: 1.4;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-bottom {
|
.card-bottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 8rpx;
|
margin-top: auto;
|
||||||
}
|
padding-top: 12rpx;
|
||||||
.use-btn {
|
|
||||||
background: #ff9800;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 24rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
padding: 8rpx 36rpx;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.login-required {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 登录提示弹窗 */
|
.use-btn {
|
||||||
.login-modal {
|
font-size: 24rpx;
|
||||||
|
padding: 10rpx 24rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 花卉模态框样式 */
|
||||||
|
.floral-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
}
|
}
|
||||||
.login-modal-content {
|
|
||||||
width: 580rpx;
|
.floral-modal-content {
|
||||||
background: #fff;
|
width: 560rpx;
|
||||||
border-radius: 20rpx;
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border: 3rpx solid rgba(255, 123, 123, 0.3);
|
||||||
|
border-radius: 25rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 40rpx 0 0 0;
|
padding: 40rpx 30rpx 30rpx 30rpx;
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
box-shadow: 0 20rpx 60rpx rgba(255, 123, 123, 0.2);
|
||||||
|
animation: modal-show 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
}
|
}
|
||||||
.login-modal-title {
|
|
||||||
font-size: 34rpx;
|
.modal-title {
|
||||||
|
font-size: 32rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 24rpx;
|
||||||
|
color: #333;
|
||||||
}
|
}
|
||||||
.login-modal-text {
|
|
||||||
font-size: 30rpx;
|
.modal-text {
|
||||||
|
font-size: 28rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0 40rpx;
|
line-height: 1.5;
|
||||||
margin-bottom: 50rpx;
|
margin-bottom: 40rpx;
|
||||||
}
|
}
|
||||||
.login-modal-btns {
|
|
||||||
|
.modal-btns {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-top: 1rpx solid #eee;
|
gap: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-btn {
|
.modal-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 90rpx;
|
font-size: 26rpx;
|
||||||
line-height: 90rpx;
|
padding: 16rpx 24rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 32rpx;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
}
|
||||||
.modal-btn.cancel {
|
|
||||||
color: #999;
|
/* 动画效果 */
|
||||||
border-right: 1rpx solid #eee;
|
@keyframes modal-show {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8) translateY(40rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1) translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gentle-float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0) rotate(0deg);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: translateY(-10px) rotate(2deg);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
transform: translateY(5px) rotate(-1deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gentle-sway {
|
||||||
|
0%, 100% {
|
||||||
|
transform: rotate(-1deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: rotate(1deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes card-fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20rpx) scale(0.95);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media screen and (max-width: 375px) {
|
||||||
|
.floral-card {
|
||||||
|
padding: 24rpx 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floral-modal-content {
|
||||||
|
width: 90vw;
|
||||||
|
padding: 30rpx 20rpx 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-navbar {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-container {
|
||||||
|
height: calc(100vh - 250rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.two-column-grid {
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
gap: 16rpx;
|
||||||
}
|
}
|
||||||
.modal-btn.confirm {
|
|
||||||
color: #ff9800;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -51,8 +51,12 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 退出登录按钮，仅登录后显示 -->
|
<!-- 退出登录按钮，仅登录后显示 -->
|
||||||
<view class="logout-section" v-if="isLoggedIn">
|
<view class="logout-section">
|
||||||
<button class="logout-btn" @click="handleLogout">退出登录</button>
|
<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>
|
||||||
|
|
||||||
<!-- 用户须知弹窗 -->
|
<!-- 用户须知弹窗 -->
|
||||||
@@ -81,15 +85,7 @@ const avatarUrl = ref('/static/default-avatar.png');
|
|||||||
|
|
||||||
// 登录按钮文本
|
// 登录按钮文本
|
||||||
const loginButtonText = computed(() => {
|
const loginButtonText = computed(() => {
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
return '微信一键登录';
|
return '微信一键登录';
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef H5
|
|
||||||
return '立即登录';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
return '一键登录';
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始化函数
|
// 初始化函数
|
||||||
@@ -104,9 +100,22 @@ const initUserInfo = () => {
|
|||||||
avatarUrl.value = parsedInfo.avatarUrl || '/static/default-avatar.png';
|
avatarUrl.value = parsedInfo.avatarUrl || '/static/default-avatar.png';
|
||||||
openid.value = parsedInfo.openid || '';
|
openid.value = parsedInfo.openid || '';
|
||||||
isLoggedIn.value = !!parsedInfo.token;
|
isLoggedIn.value = !!parsedInfo.token;
|
||||||
|
|
||||||
|
// 调试信息
|
||||||
|
uni.showToast({
|
||||||
|
title: `登录状态: ${isLoggedIn.value ? '已登录' : '未登录'}`,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Parse user info error:', e);
|
console.error('Parse user info error:', e);
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '没有找到用户信息',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Load user info error:', e);
|
console.error('Load user info error:', e);
|
||||||
@@ -115,94 +124,118 @@ const initUserInfo = () => {
|
|||||||
|
|
||||||
// 页面加载时初始化
|
// 页面加载时初始化
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 初始化用户信息
|
// 初始化用户store
|
||||||
|
userStore.init();
|
||||||
|
// 初始化本地状态
|
||||||
initUserInfo();
|
initUserInfo();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 登录处理
|
// 登录处理
|
||||||
const handleLogin = () => {
|
const handleLogin = async () => {
|
||||||
// H5环境
|
|
||||||
// #ifdef H5
|
|
||||||
nickName.value = 'H5测试用户';
|
|
||||||
avatarUrl.value = '/static/default-avatar.png';
|
|
||||||
openid.value = 'h5-mock-openid';
|
|
||||||
isLoggedIn.value = true;
|
|
||||||
|
|
||||||
// 保存到本地
|
|
||||||
const userInfo = {
|
|
||||||
token: 'h5-mock-token',
|
|
||||||
nickName: nickName.value,
|
|
||||||
avatarUrl: avatarUrl.value,
|
|
||||||
openid: openid.value
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
uni.setStorageSync('userInfo', JSON.stringify(userInfo));
|
// 先清理假登录数据
|
||||||
} catch (e) {
|
console.log('开始登录，先清理假登录数据...');
|
||||||
console.error('Save user info error:', e);
|
userStore.clearFakeLoginData();
|
||||||
}
|
|
||||||
|
|
||||||
|
uni.showLoading({
|
||||||
|
title: '登录中...'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 使用store中的真实登录方法
|
||||||
|
await userStore.login();
|
||||||
|
|
||||||
|
// 登录成功后更新本地状态
|
||||||
|
initUserInfo();
|
||||||
|
|
||||||
|
uni.hideLoading();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '登录成功',
|
title: '登录成功',
|
||||||
icon: 'success'
|
icon: 'success'
|
||||||
});
|
});
|
||||||
return;
|
} catch (error) {
|
||||||
// #endif
|
uni.hideLoading();
|
||||||
|
console.error('Login failed:', error);
|
||||||
|
|
||||||
// 微信环境
|
let errorMessage = '登录失败';
|
||||||
// #ifdef MP-WEIXIN
|
if (error.message) {
|
||||||
uni.getUserProfile({
|
errorMessage = error.message;
|
||||||
desc: '用于完善用户资料',
|
} else if (typeof error === 'string') {
|
||||||
success: (res) => {
|
errorMessage = error;
|
||||||
const userInfo = res.userInfo;
|
|
||||||
nickName.value = userInfo.nickName;
|
|
||||||
avatarUrl.value = userInfo.avatarUrl;
|
|
||||||
openid.value = 'wx-' + Date.now();
|
|
||||||
isLoggedIn.value = true;
|
|
||||||
|
|
||||||
// 保存到本地
|
|
||||||
const storeInfo = {
|
|
||||||
token: 'wx-mock-token',
|
|
||||||
nickName: nickName.value,
|
|
||||||
avatarUrl: avatarUrl.value,
|
|
||||||
openid: openid.value
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
uni.setStorageSync('userInfo', JSON.stringify(storeInfo));
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Save user info error:', e);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
uni.showToast({
|
// 显示详细的错误信息
|
||||||
title: '登录成功',
|
uni.showModal({
|
||||||
icon: 'success'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
|
||||||
console.error('Login failed:', err);
|
|
||||||
uni.showToast({
|
|
||||||
title: '登录失败',
|
title: '登录失败',
|
||||||
icon: 'none'
|
content: `错误信息：${errorMessage}\n\n请检查：\n1. 网络连接是否正常\n2. 后端服务是否运行\n3. 微信小程序配置是否正确`,
|
||||||
|
showCancel: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 退出登录
|
// 退出登录
|
||||||
const handleLogout = () => {
|
const handleLogout = async () => {
|
||||||
|
// 用弹窗显示调试信息，确保用户能看到
|
||||||
|
uni.showToast({
|
||||||
|
title: '点击了退出登录',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: '确定要退出登录吗？',
|
content: '确定要退出登录吗？',
|
||||||
success: (res) => {
|
success: async (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
try {
|
uni.showToast({
|
||||||
uni.removeStorageSync('userInfo');
|
title: '确认退出',
|
||||||
} catch (e) {
|
icon: 'none',
|
||||||
console.error('Remove user info error:', e);
|
duration: 1000
|
||||||
}
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '退出中...'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示token信息
|
||||||
|
uni.showToast({
|
||||||
|
title: `Token: ${userStore.token ? '有' : '无'}`,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('mine.vue: 开始调用userStore.logout()');
|
||||||
|
console.log('mine.vue: 当前store中的token:', userStore.token);
|
||||||
|
|
||||||
|
// 使用store中的真实登出方法
|
||||||
|
await userStore.logout();
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: 'logout执行完成',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1000
|
||||||
|
});
|
||||||
|
|
||||||
|
// 清空本地状态
|
||||||
|
nickName.value = '';
|
||||||
|
avatarUrl.value = '/static/default-avatar.png';
|
||||||
|
openid.value = '';
|
||||||
|
isLoggedIn.value = false;
|
||||||
|
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '已退出登录',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '登出异常: ' + error.message,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
|
||||||
|
// 即使后台退出失败，也要清空本地状态
|
||||||
nickName.value = '';
|
nickName.value = '';
|
||||||
avatarUrl.value = '/static/default-avatar.png';
|
avatarUrl.value = '/static/default-avatar.png';
|
||||||
openid.value = '';
|
openid.value = '';
|
||||||
@@ -213,31 +246,182 @@ const handleLogout = () => {
|
|||||||
icon: 'success'
|
icon: 'success'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '取消退出',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1000
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 显示用户须知
|
// 显示用户须知
|
||||||
const showAgreement = () => {
|
const showAgreement = () => {
|
||||||
|
console.log('showAgreement clicked, current showAgreementModal:', showAgreementModal.value);
|
||||||
showAgreementModal.value = true;
|
showAgreementModal.value = true;
|
||||||
|
console.log('showAgreementModal set to:', showAgreementModal.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理同意用户须知
|
// 处理同意用户须知
|
||||||
const handleAgreeTerms = () => {
|
const handleAgreeTerms = async () => {
|
||||||
showAgreementModal.value = false;
|
console.log('mine.vue: handleAgreeTerms called');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
// 先关闭弹窗
|
||||||
|
showAgreementModal.value = false;
|
||||||
|
|
||||||
|
// 等待DOM更新
|
||||||
|
await uni.$nextTick?.() || Promise.resolve();
|
||||||
|
|
||||||
// 设置本地存储
|
// 设置本地存储
|
||||||
uni.setStorageSync('hasAgreedToTerms', 'true');
|
uni.setStorageSync('hasAgreedToTerms', 'true');
|
||||||
uni.setStorageSync('hasVisitedMinePage', 'true');
|
uni.setStorageSync('hasVisitedMinePage', 'true');
|
||||||
|
|
||||||
|
// 显示成功提示
|
||||||
|
uni.showToast({
|
||||||
|
title: '已确认用户须知',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Save agreement status error:', e);
|
console.error('Save agreement status error:', e);
|
||||||
|
uni.showToast({
|
||||||
|
title: '操作失败，请重试',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
// 如果失败，重新显示弹窗
|
||||||
|
showAgreementModal.value = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理不同意用户须知
|
// 处理不同意用户须知
|
||||||
const handleDisagreeTerms = () => {
|
const handleDisagreeTerms = async () => {
|
||||||
|
console.log('mine.vue: handleDisagreeTerms called');
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 先关闭弹窗
|
||||||
showAgreementModal.value = false;
|
showAgreementModal.value = false;
|
||||||
|
|
||||||
|
// 等待DOM更新
|
||||||
|
await uni.$nextTick?.() || Promise.resolve();
|
||||||
|
|
||||||
|
// 显示提示
|
||||||
|
uni.showToast({
|
||||||
|
title: '您可随时查看用户须知',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Handle disagree error:', e);
|
||||||
|
showAgreementModal.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 直接测试API
|
||||||
|
const testDirectApiCall = () => {
|
||||||
|
// 从store获取token
|
||||||
|
const currentToken = userStore.token;
|
||||||
|
|
||||||
|
uni.showModal({
|
||||||
|
title: '选择测试方法',
|
||||||
|
content: '请选择要测试的API调用方式',
|
||||||
|
cancelText: '普通方法',
|
||||||
|
confirmText: '请求体方法',
|
||||||
|
success: (res1) => {
|
||||||
|
if (res1.confirm) {
|
||||||
|
// 尝试在请求体中发送token
|
||||||
|
uni.showModal({
|
||||||
|
title: '请求体方法',
|
||||||
|
content: '在请求体中发送token',
|
||||||
|
showCancel: false,
|
||||||
|
success: () => {
|
||||||
|
uni.request({
|
||||||
|
url: 'http://8.145.52.111:8084/app/logout',
|
||||||
|
method: 'POST',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
token: currentToken || ''
|
||||||
|
},
|
||||||
|
complete: (res) => {
|
||||||
|
uni.showModal({
|
||||||
|
title: '调用结果(请求体)',
|
||||||
|
content: JSON.stringify(res),
|
||||||
|
showCancel: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 普通方法: 选择URL方式
|
||||||
|
uni.showModal({
|
||||||
|
title: '普通方法',
|
||||||
|
content: '选择URL方式',
|
||||||
|
cancelText: '带参数URL',
|
||||||
|
confirmText: 'Header方式',
|
||||||
|
success: (res2) => {
|
||||||
|
if (res2.confirm) {
|
||||||
|
// Header方式
|
||||||
|
uni.showModal({
|
||||||
|
title: '调用信息',
|
||||||
|
content: `
|
||||||
|
在Header中发送token
|
||||||
|
Token: ${currentToken || '无'}
|
||||||
|
`,
|
||||||
|
showCancel: false,
|
||||||
|
success: () => {
|
||||||
|
uni.request({
|
||||||
|
url: 'http://8.145.52.111:8084/app/logout',
|
||||||
|
method: 'POST',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': currentToken || ''
|
||||||
|
},
|
||||||
|
complete: (res) => {
|
||||||
|
uni.showModal({
|
||||||
|
title: '调用结果(Header)',
|
||||||
|
content: JSON.stringify(res),
|
||||||
|
showCancel: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 带参数URL方式
|
||||||
|
uni.showModal({
|
||||||
|
title: '调用信息',
|
||||||
|
content: `尝试带token参数的URL`,
|
||||||
|
showCancel: false,
|
||||||
|
success: () => {
|
||||||
|
const url = `http://8.145.52.111:8084/app/logout?token=${currentToken || ''}`;
|
||||||
|
uni.request({
|
||||||
|
url: url,
|
||||||
|
method: 'POST',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
complete: (res) => {
|
||||||
|
uni.showModal({
|
||||||
|
title: '调用结果(URL参数)',
|
||||||
|
content: JSON.stringify(res),
|
||||||
|
showCancel: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
783
src/pages/splash/splash.vue
Normal file
783
src/pages/splash/splash.vue
Normal file
@@ -0,0 +1,783 @@
|
|||||||
|
<template>
|
||||||
|
<view class="splash-container">
|
||||||
|
<!-- 背景装饰层 -->
|
||||||
|
<view class="background-layer">
|
||||||
|
<!-- 渐变背景 -->
|
||||||
|
<view class="gradient-bg"></view>
|
||||||
|
|
||||||
|
<!-- 右上角树枝装饰 -->
|
||||||
|
<view class="branch-decoration">
|
||||||
|
<view class="branch-stem"></view>
|
||||||
|
<view class="branch-leaf leaf-1"></view>
|
||||||
|
<view class="branch-leaf leaf-2"></view>
|
||||||
|
<view class="branch-leaf leaf-3"></view>
|
||||||
|
<view class="small-flower">
|
||||||
|
<view class="petal"></view>
|
||||||
|
<view class="petal"></view>
|
||||||
|
<view class="petal"></view>
|
||||||
|
<view class="petal"></view>
|
||||||
|
<view class="center"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 左上角优雅光环 -->
|
||||||
|
<view class="elegant-halo">
|
||||||
|
<view class="halo-ring ring-1"></view>
|
||||||
|
<view class="halo-ring ring-2"></view>
|
||||||
|
<view class="halo-ring ring-3"></view>
|
||||||
|
<view class="glow-orb"></view>
|
||||||
|
<view class="sparkle sparkle-1"></view>
|
||||||
|
<view class="sparkle sparkle-2"></view>
|
||||||
|
<view class="sparkle sparkle-3"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 左下角现代线条艺术 -->
|
||||||
|
<view class="modern-lines">
|
||||||
|
<view class="flow-line line-1"></view>
|
||||||
|
<view class="flow-line line-2"></view>
|
||||||
|
<view class="flow-line line-3"></view>
|
||||||
|
<view class="glow-node node-1"></view>
|
||||||
|
<view class="glow-node node-2"></view>
|
||||||
|
<view class="floating-orb"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 飘落的花瓣动画 -->
|
||||||
|
<view class="falling-petals">
|
||||||
|
<view class="falling-petal petal-1"></view>
|
||||||
|
<view class="falling-petal petal-2"></view>
|
||||||
|
<view class="falling-petal petal-3"></view>
|
||||||
|
<view class="falling-petal petal-4"></view>
|
||||||
|
<view class="falling-petal petal-5"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<view class="content-area">
|
||||||
|
<!-- 标题区域 -->
|
||||||
|
<view class="title-section">
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<view class="main-title-wrapper">
|
||||||
|
<text class="main-title">因为AI 所以爱</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 装饰小花朵 -->
|
||||||
|
<view class="title-flower">
|
||||||
|
<view class="tiny-petal"></view>
|
||||||
|
<view class="tiny-petal"></view>
|
||||||
|
<view class="tiny-petal"></view>
|
||||||
|
<view class="tiny-petal"></view>
|
||||||
|
<view class="tiny-center"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<view class="sub-title-wrapper">
|
||||||
|
<text class="sub-title">让创意绽放</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 装饰分隔线 -->
|
||||||
|
<view class="divider-line">
|
||||||
|
<view class="line-segment"></view>
|
||||||
|
<view class="center-flower">
|
||||||
|
<view class="mini-petal"></view>
|
||||||
|
<view class="mini-petal"></view>
|
||||||
|
<view class="mini-petal"></view>
|
||||||
|
<view class="mini-petal"></view>
|
||||||
|
</view>
|
||||||
|
<view class="line-segment"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 倒计时和跳过按钮 -->
|
||||||
|
<view class="bottom-section">
|
||||||
|
<view class="countdown-container" @click="skipToHome">
|
||||||
|
<text class="countdown-text">{{ countdown }}s</text>
|
||||||
|
<text class="skip-text">跳过</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue';
|
||||||
|
|
||||||
|
// 倒计时
|
||||||
|
const countdown = ref(5);
|
||||||
|
let timer = null;
|
||||||
|
|
||||||
|
// 跳转到主页
|
||||||
|
const skipToHome = () => {
|
||||||
|
if (timer) {
|
||||||
|
clearInterval(timer);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 尝试使用reLaunch跳转
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/index/index',
|
||||||
|
fail: () => {
|
||||||
|
// 如果reLaunch失败，尝试switchTab
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/index/index',
|
||||||
|
fail: () => {
|
||||||
|
// 如果switchTab也失败，使用redirectTo
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期
|
||||||
|
onMounted(() => {
|
||||||
|
// 启动倒计时
|
||||||
|
timer = setInterval(() => {
|
||||||
|
countdown.value--;
|
||||||
|
if (countdown.value <= 0) {
|
||||||
|
skipToHome();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer) {
|
||||||
|
clearInterval(timer);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 容器样式 */
|
||||||
|
.splash-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: #f8f6f0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景装饰层 */
|
||||||
|
.background-layer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 渐变背景 */
|
||||||
|
.gradient-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: radial-gradient(ellipse at center top, rgba(255, 123, 123, 0.05) 0%, transparent 50%),
|
||||||
|
radial-gradient(ellipse at bottom left, rgba(74, 155, 74, 0.05) 0%, transparent 50%),
|
||||||
|
radial-gradient(ellipse at bottom right, rgba(255, 235, 153, 0.05) 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右上角树枝装饰 */
|
||||||
|
.branch-decoration {
|
||||||
|
position: absolute;
|
||||||
|
top: 60rpx;
|
||||||
|
right: 40rpx;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
animation: gentle-sway 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-stem {
|
||||||
|
position: absolute;
|
||||||
|
top: 20rpx;
|
||||||
|
left: 50%;
|
||||||
|
width: 3rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
background: #4a9b4a;
|
||||||
|
transform: translateX(-50%) rotate(15deg);
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-leaf {
|
||||||
|
position: absolute;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 45rpx;
|
||||||
|
background: #4a9b4a;
|
||||||
|
border-radius: 0 100% 0 100%;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaf-1 {
|
||||||
|
top: 35rpx;
|
||||||
|
left: 35rpx;
|
||||||
|
transform: rotate(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaf-2 {
|
||||||
|
top: 60rpx;
|
||||||
|
right: 25rpx;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaf-3 {
|
||||||
|
top: 85rpx;
|
||||||
|
left: 40rpx;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-flower {
|
||||||
|
position: absolute;
|
||||||
|
top: 15rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-flower .petal {
|
||||||
|
position: absolute;
|
||||||
|
width: 10rpx;
|
||||||
|
height: 18rpx;
|
||||||
|
background: #ff7b7b;
|
||||||
|
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-flower .petal:nth-child(1) { transform: rotate(0deg) translateY(-8rpx); }
|
||||||
|
.small-flower .petal:nth-child(2) { transform: rotate(90deg) translateY(-8rpx); }
|
||||||
|
.small-flower .petal:nth-child(3) { transform: rotate(180deg) translateY(-8rpx); }
|
||||||
|
.small-flower .petal:nth-child(4) { transform: rotate(270deg) translateY(-8rpx); }
|
||||||
|
|
||||||
|
.small-flower .center {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #ffeb99;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左上角优雅光环 */
|
||||||
|
.elegant-halo {
|
||||||
|
position: absolute;
|
||||||
|
top: 80rpx;
|
||||||
|
left: 60rpx;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.halo-ring {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring-1 {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-color: rgba(255, 123, 123, 0.3);
|
||||||
|
animation: rotate-slow 8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring-2 {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-color: rgba(255, 235, 153, 0.3);
|
||||||
|
animation: rotate-reverse 10s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring-3 {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-color: rgba(74, 155, 74, 0.2);
|
||||||
|
animation: rotate-slow 12s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow-orb {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
background: radial-gradient(circle, rgba(255, 123, 123, 0.6) 0%, transparent 70%);
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
animation: pulse-glow 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
position: absolute;
|
||||||
|
width: 4rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background: #ff7b7b;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: sparkle-twinkle 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle-1 {
|
||||||
|
top: 10rpx;
|
||||||
|
left: 30rpx;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle-2 {
|
||||||
|
top: 40rpx;
|
||||||
|
right: 15rpx;
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle-3 {
|
||||||
|
bottom: 20rpx;
|
||||||
|
left: 15rpx;
|
||||||
|
animation-delay: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左下角现代线条艺术 */
|
||||||
|
.modern-lines {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100rpx;
|
||||||
|
left: 40rpx;
|
||||||
|
width: 150rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-line {
|
||||||
|
position: absolute;
|
||||||
|
height: 2rpx;
|
||||||
|
background: linear-gradient(90deg, transparent 0%, rgba(255, 123, 123, 0.6) 50%, transparent 100%);
|
||||||
|
border-radius: 1rpx;
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-1 {
|
||||||
|
top: 20rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 100rpx;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
animation: flow-pulse 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-2 {
|
||||||
|
top: 50rpx;
|
||||||
|
left: 10rpx;
|
||||||
|
width: 120rpx;
|
||||||
|
transform: rotate(10deg);
|
||||||
|
animation: flow-pulse 3s ease-in-out infinite 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-3 {
|
||||||
|
top: 80rpx;
|
||||||
|
left: 5rpx;
|
||||||
|
width: 90rpx;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
animation: flow-pulse 3s ease-in-out infinite 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow-node {
|
||||||
|
position: absolute;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: radial-gradient(circle, #ff7b7b 0%, transparent 70%);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: node-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-1 {
|
||||||
|
top: 45rpx;
|
||||||
|
left: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-2 {
|
||||||
|
top: 70rpx;
|
||||||
|
left: 40rpx;
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-orb {
|
||||||
|
position: absolute;
|
||||||
|
top: 40rpx;
|
||||||
|
right: 10rpx;
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
background: radial-gradient(circle, rgba(255, 235, 153, 0.8) 0%, transparent 60%);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: float-around 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 飘落花瓣 */
|
||||||
|
.falling-petals {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.falling-petal {
|
||||||
|
position: absolute;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 25rpx;
|
||||||
|
background: rgba(255, 123, 123, 0.6);
|
||||||
|
border-radius: 0 100% 0 100%;
|
||||||
|
animation: petal-fall 8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.petal-1 {
|
||||||
|
left: 10%;
|
||||||
|
animation-delay: 0s;
|
||||||
|
animation-duration: 7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.petal-2 {
|
||||||
|
left: 30%;
|
||||||
|
animation-delay: 2s;
|
||||||
|
animation-duration: 9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.petal-3 {
|
||||||
|
left: 50%;
|
||||||
|
animation-delay: 1s;
|
||||||
|
animation-duration: 8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.petal-4 {
|
||||||
|
left: 70%;
|
||||||
|
animation-delay: 3s;
|
||||||
|
animation-duration: 10s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.petal-5 {
|
||||||
|
left: 90%;
|
||||||
|
animation-delay: 4s;
|
||||||
|
animation-duration: 7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主内容区 */
|
||||||
|
.content-area {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 0 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题区域 */
|
||||||
|
.title-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 80rpx;
|
||||||
|
animation: fade-in-up 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主标题 */
|
||||||
|
.main-title-wrapper {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
animation: fade-in-up 1s ease-out 0.2s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
font-size: 60rpx;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #333;
|
||||||
|
letter-spacing: 8rpx;
|
||||||
|
text-shadow: 3rpx 3rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 装饰小花朵 */
|
||||||
|
.title-flower {
|
||||||
|
position: relative;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin: 30rpx 0;
|
||||||
|
animation: fade-in-scale 1s ease-out 0.3s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiny-petal {
|
||||||
|
position: absolute;
|
||||||
|
width: 12rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
background: rgba(255, 123, 123, 0.8);
|
||||||
|
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiny-petal:nth-child(1) {
|
||||||
|
transform: rotate(0deg) translateY(-10rpx);
|
||||||
|
}
|
||||||
|
.tiny-petal:nth-child(2) {
|
||||||
|
transform: rotate(90deg) translateY(-10rpx);
|
||||||
|
}
|
||||||
|
.tiny-petal:nth-child(3) {
|
||||||
|
transform: rotate(180deg) translateY(-10rpx);
|
||||||
|
}
|
||||||
|
.tiny-petal:nth-child(4) {
|
||||||
|
transform: rotate(270deg) translateY(-10rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiny-center {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 10rpx;
|
||||||
|
height: 10rpx;
|
||||||
|
background: #ffeb99;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 副标题 */
|
||||||
|
.sub-title-wrapper {
|
||||||
|
position: relative;
|
||||||
|
animation: fade-in-up 1s ease-out 0.4s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #ff7b7b;
|
||||||
|
letter-spacing: 6rpx;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加装饰星点 */
|
||||||
|
.sub-title-wrapper::before,
|
||||||
|
.sub-title-wrapper::after {
|
||||||
|
content: '✦';
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: rgba(255, 123, 123, 0.5);
|
||||||
|
animation: sparkle-twinkle 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title-wrapper::before {
|
||||||
|
left: -40rpx;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title-wrapper::after {
|
||||||
|
right: -40rpx;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
animation-delay: 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 装饰分隔线 */
|
||||||
|
.divider-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 80rpx;
|
||||||
|
animation: fade-in 1s ease-out 0.6s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-segment {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 1rpx;
|
||||||
|
background: linear-gradient(90deg, transparent 0%, rgba(255, 123, 123, 0.5) 50%, transparent 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-flower {
|
||||||
|
position: relative;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-petal {
|
||||||
|
position: absolute;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background: rgba(255, 123, 123, 0.6);
|
||||||
|
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-petal:nth-child(1) { transform: rotate(0deg) translateY(-6rpx); }
|
||||||
|
.mini-petal:nth-child(2) { transform: rotate(90deg) translateY(-6rpx); }
|
||||||
|
.mini-petal:nth-child(3) { transform: rotate(180deg) translateY(-6rpx); }
|
||||||
|
.mini-petal:nth-child(4) { transform: rotate(270deg) translateY(-6rpx); }
|
||||||
|
|
||||||
|
/* 底部区域 */
|
||||||
|
.bottom-section {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 80rpx;
|
||||||
|
right: 60rpx;
|
||||||
|
animation: fade-in 1s ease-out 0.9s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15rpx 30rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border: 2rpx solid rgba(255, 123, 123, 0.3);
|
||||||
|
border-radius: 50rpx;
|
||||||
|
backdrop-filter: blur(10rpx);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-container:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
background: rgba(255, 123, 123, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ff7b7b;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动画定义 */
|
||||||
|
@keyframes gentle-sway {
|
||||||
|
0%, 100% { transform: rotate(-5deg); }
|
||||||
|
50% { transform: rotate(5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-slow {
|
||||||
|
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||||||
|
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-reverse {
|
||||||
|
from { transform: translate(-50%, -50%) rotate(360deg); }
|
||||||
|
to { transform: translate(-50%, -50%) rotate(0deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-50%, -50%) scale(1.2);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sparkle-twinkle {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flow-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
transform: scaleX(0.8) rotate(var(--rotation, 0deg));
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.8;
|
||||||
|
transform: scaleX(1) rotate(var(--rotation, 0deg));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes node-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.5);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-around {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0) scale(1);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translate(-20rpx, -10rpx) scale(1.1);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-10rpx, -20rpx) scale(0.9);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translate(10rpx, -10rpx) scale(1.1);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0, 0) scale(1);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes petal-fall {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-100rpx) translateX(0) rotate(0deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(calc(100vh + 100rpx)) translateX(100rpx) rotate(360deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in-scale {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.5) rotate(180deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1) rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/static/bailing.jpg
Normal file
BIN
src/static/bailing.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
src/static/haomen.jpg
Normal file
BIN
src/static/haomen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
src/static/tunvlang.jpg
Normal file
BIN
src/static/tunvlang.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
src/static/waimai.jpg
Normal file
BIN
src/static/waimai.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -48,10 +48,10 @@ export const useUserStore = defineStore('user', () => {
|
|||||||
|
|
||||||
// 4. 保存用户信息
|
// 4. 保存用户信息
|
||||||
setUserInfo({
|
setUserInfo({
|
||||||
token: loginData.token,
|
token: loginData.data.token,
|
||||||
nickName: userProfileRes.userInfo.nickName,
|
nickName: userProfileRes.userInfo.nickName,
|
||||||
avatarUrl: userProfileRes.userInfo.avatarUrl,
|
avatarUrl: userProfileRes.userInfo.avatarUrl,
|
||||||
openid: loginData.openid
|
openid: loginData.data.openid
|
||||||
});
|
});
|
||||||
|
|
||||||
return Promise.resolve(loginData);
|
return Promise.resolve(loginData);
|
||||||
@@ -63,20 +63,6 @@ export const useUserStore = defineStore('user', () => {
|
|||||||
|
|
||||||
// 获取用户信息
|
// 获取用户信息
|
||||||
function getUserProfile() {
|
function getUserProfile() {
|
||||||
// H5环境下模拟用户信息
|
|
||||||
// #ifdef H5
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
resolve({
|
|
||||||
userInfo: {
|
|
||||||
nickName: 'H5测试用户',
|
|
||||||
avatarUrl: '/static/default-avatar.png'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// 非H5环境下获取真实用户信息
|
|
||||||
// #ifndef H5
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
uni.getUserProfile({
|
uni.getUserProfile({
|
||||||
desc: '用于完善用户资料',
|
desc: '用于完善用户资料',
|
||||||
@@ -84,77 +70,61 @@ export const useUserStore = defineStore('user', () => {
|
|||||||
resolve(res);
|
resolve(res);
|
||||||
},
|
},
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
|
console.error('获取用户信息失败:', err);
|
||||||
reject(err);
|
reject(err);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
// #endif
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取微信登录凭证
|
// 获取微信登录凭证
|
||||||
function getWxLogin() {
|
function getWxLogin() {
|
||||||
// H5环境下模拟登录凭证
|
|
||||||
// #ifdef H5
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
resolve({ code: 'mock-code-for-h5' });
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// 非H5环境下获取真实登录凭证
|
|
||||||
// #ifndef H5
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
uni.login({
|
uni.login({
|
||||||
provider: 'weixin',
|
provider: 'weixin',
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
|
if (res.code) {
|
||||||
resolve(res);
|
resolve(res);
|
||||||
|
} else {
|
||||||
|
reject(new Error('获取登录凭证失败'));
|
||||||
|
}
|
||||||
},
|
},
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
|
console.error('微信登录失败:', err);
|
||||||
reject(err);
|
reject(err);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
// #endif
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 调用后端登录接口
|
// 调用后端登录接口
|
||||||
function wxLogin(code, userInfo) {
|
function wxLogin(code, userInfo) {
|
||||||
// H5环境下模拟登录，避免API超时
|
|
||||||
// #ifdef H5
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve({
|
|
||||||
token: 'mock-token-for-h5',
|
|
||||||
openid: 'mock-openid-for-h5'
|
|
||||||
});
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// 非H5环境下调用实际接口
|
|
||||||
// #ifndef H5
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
uni.request({
|
uni.request({
|
||||||
url: 'https://your-api.com/api/login/wechat',
|
url: 'http://8.145.52.111:8091/app/login',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: {
|
data: {
|
||||||
code,
|
code
|
||||||
userInfo
|
},
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.statusCode === 200 && res.data.token) {
|
console.log('登录响应:', res);
|
||||||
resolve(res.data);
|
const resData = res.data;
|
||||||
|
if (resData.code === 200 && resData.data && resData.data.token) {
|
||||||
|
resolve(resData);
|
||||||
} else {
|
} else {
|
||||||
reject(new Error('Login failed: ' + JSON.stringify(res.data)));
|
reject(new Error('登录失败: ' + (resData.message || JSON.stringify(resData))));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
|
console.error('登录请求失败:', err);
|
||||||
reject(err);
|
reject(err);
|
||||||
},
|
},
|
||||||
// 设置超时时间
|
timeout: 10000 // 增加超时时间到10秒
|
||||||
timeout: 5000
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
// #endif
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 保存用户信息
|
// 保存用户信息
|
||||||
@@ -171,6 +141,53 @@ export const useUserStore = defineStore('user', () => {
|
|||||||
|
|
||||||
// 退出登录
|
// 退出登录
|
||||||
function logout() {
|
function logout() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
// 获取token
|
||||||
|
const currentToken = token.value;
|
||||||
|
|
||||||
|
// 尝试调用登出接口
|
||||||
|
uni.request({
|
||||||
|
url: 'http://8.145.52.111:8091/app/logout',
|
||||||
|
method: 'POST',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': currentToken || ''
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
token: currentToken || ''
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
console.log('登出成功:', res);
|
||||||
|
uni.showToast({
|
||||||
|
title: '登出成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('登出失败:', err);
|
||||||
|
uni.showToast({
|
||||||
|
title: '登出接口调用失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
// 无论成功失败，都清除本地数据
|
||||||
|
clearUserData();
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('登出过程发生异常:', error);
|
||||||
|
// 发生异常时也要清除本地数据
|
||||||
|
clearUserData();
|
||||||
|
resolve(); // 用resolve而不是reject，确保登出操作总是成功
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除用户数据的辅助函数
|
||||||
|
function clearUserData() {
|
||||||
token.value = '';
|
token.value = '';
|
||||||
nickName.value = '';
|
nickName.value = '';
|
||||||
avatarUrl.value = '';
|
avatarUrl.value = '';
|
||||||
@@ -179,6 +196,43 @@ export const useUserStore = defineStore('user', () => {
|
|||||||
|
|
||||||
// 清除本地存储
|
// 清除本地存储
|
||||||
uni.removeStorageSync('userInfo');
|
uni.removeStorageSync('userInfo');
|
||||||
|
uni.removeStorageSync('custom_token');
|
||||||
|
uni.removeStorageSync('user_token');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清理假登录数据
|
||||||
|
function clearFakeLoginData() {
|
||||||
|
console.log('清理假登录数据...');
|
||||||
|
|
||||||
|
// 检查是否有无效的登录数据
|
||||||
|
const userInfo = uni.getStorageSync('userInfo');
|
||||||
|
if (userInfo) {
|
||||||
|
try {
|
||||||
|
const parsedInfo = JSON.parse(userInfo);
|
||||||
|
// 如果没有token或token为空，清除数据
|
||||||
|
if (!parsedInfo.token || parsedInfo.token.trim() === '') {
|
||||||
|
console.log('发现无效的userInfo，清除中...');
|
||||||
|
uni.removeStorageSync('userInfo');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log('userInfo格式错误，清除中...');
|
||||||
|
uni.removeStorageSync('userInfo');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除其他可能的假token
|
||||||
|
const customToken = uni.getStorageSync('custom_token');
|
||||||
|
if (customToken && customToken.trim() === '') {
|
||||||
|
uni.removeStorageSync('custom_token');
|
||||||
|
}
|
||||||
|
|
||||||
|
const userToken = uni.getStorageSync('user_token');
|
||||||
|
if (userToken && userToken.trim() === '') {
|
||||||
|
uni.removeStorageSync('user_token');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新初始化状态
|
||||||
|
init();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 新增：设置用户同意须知状态
|
// 新增：设置用户同意须知状态
|
||||||
@@ -209,6 +263,7 @@ export const useUserStore = defineStore('user', () => {
|
|||||||
setUserInfo,
|
setUserInfo,
|
||||||
logout,
|
logout,
|
||||||
setAgreedToTerms,
|
setAgreedToTerms,
|
||||||
setVisitedMinePage
|
setVisitedMinePage,
|
||||||
|
clearFakeLoginData
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
192
src/utils/aiCharacters.js
Normal file
192
src/utils/aiCharacters.js
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
// AI角色配置文件
|
||||||
|
export const aiCharacters = [
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: '萌妹小甜',
|
||||||
|
avatar: '/static/logo.png',
|
||||||
|
personality: '可爱活泼，喜欢撒娇',
|
||||||
|
greeting: '你好呀～我是小甜，今天想聊什么呢？',
|
||||||
|
voiceStyle: '甜美可爱',
|
||||||
|
responseStyle: '活泼俏皮，喜欢用表情符号',
|
||||||
|
interests: ['美食', '宠物', '音乐', '旅行'],
|
||||||
|
sampleResponses: [
|
||||||
|
'哇～听起来好有趣呢！✨',
|
||||||
|
'真的吗？我也好想试试看！😊',
|
||||||
|
'你真是太棒了！继续加油哦～💪',
|
||||||
|
'哈哈，你说话真有意思！😄',
|
||||||
|
'我也有同样的想法呢！🤔'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: '御姐温柔',
|
||||||
|
avatar: '/static/logo.png',
|
||||||
|
personality: '知性优雅，温柔体贴',
|
||||||
|
greeting: '你好，我是温柔，有什么心事可以和我分享。',
|
||||||
|
voiceStyle: '温柔知性',
|
||||||
|
responseStyle: '成熟稳重，善解人意',
|
||||||
|
interests: ['阅读', '艺术', '哲学', '心理学'],
|
||||||
|
sampleResponses: [
|
||||||
|
'我理解你的感受，这确实不容易。',
|
||||||
|
'从另一个角度来看，也许会有不同的收获。',
|
||||||
|
'你的想法很有深度，我很欣赏。',
|
||||||
|
'人生就是这样，有起有落，重要的是保持内心的平静。',
|
||||||
|
'我相信你有能力处理好这件事。'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: '童真小天使',
|
||||||
|
avatar: '/static/logo.png',
|
||||||
|
personality: '纯真可爱，充满好奇心',
|
||||||
|
greeting: '嗨！我是小天使，我们一起探索有趣的世界吧！',
|
||||||
|
voiceStyle: '天真烂漫',
|
||||||
|
responseStyle: '充满好奇，喜欢提问',
|
||||||
|
interests: ['游戏', '动画', '童话', '科学'],
|
||||||
|
sampleResponses: [
|
||||||
|
'哇！这是真的吗？好神奇呀！🌟',
|
||||||
|
'为什么为什么？能告诉我更多吗？🤔',
|
||||||
|
'我觉得这个世界真是太有趣了！',
|
||||||
|
'我们一起玩个游戏吧！🎮',
|
||||||
|
'你是我见过最有趣的人！'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: '贴心男友',
|
||||||
|
avatar: '/static/logo.png',
|
||||||
|
personality: '温暖体贴，善解人意',
|
||||||
|
greeting: '宝贝，今天过得怎么样？有什么想聊的吗？',
|
||||||
|
voiceStyle: '温暖磁性',
|
||||||
|
responseStyle: '关怀备至，充满爱意',
|
||||||
|
interests: ['运动', '电影', '音乐', '美食'],
|
||||||
|
sampleResponses: [
|
||||||
|
'宝贝，你辛苦了，要注意休息哦。',
|
||||||
|
'无论发生什么，我都会陪在你身边。',
|
||||||
|
'你笑起来真好看，要多笑笑。',
|
||||||
|
'今天想吃什么？我给你做。',
|
||||||
|
'我爱你，永远都是。'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
name: '搞笑达人',
|
||||||
|
avatar: '/static/logo.png',
|
||||||
|
personality: '幽默风趣，善于调节气氛',
|
||||||
|
greeting: '哈哈，我是搞笑达人！准备好笑到肚子疼了吗？',
|
||||||
|
voiceStyle: '幽默风趣',
|
||||||
|
responseStyle: '妙语连珠，逗人开心',
|
||||||
|
interests: ['喜剧', '段子', '脱口秀', '相声'],
|
||||||
|
sampleResponses: [
|
||||||
|
'哈哈，这个笑话我听过，但你的版本更好笑！😂',
|
||||||
|
'你知道吗？我刚才差点笑到从椅子上掉下来！',
|
||||||
|
'我觉得你可以去说相声了，太有天赋了！',
|
||||||
|
'生活就像一盒巧克力，有时候是苦的，但我们可以加点糖！',
|
||||||
|
'别担心，笑一笑十年少，你看起来永远18岁！'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
name: '博学智者',
|
||||||
|
avatar: '/static/logo.png',
|
||||||
|
personality: '知识渊博，思维深刻',
|
||||||
|
greeting: '你好，我是博学智者，让我们进行一场深度对话吧。',
|
||||||
|
voiceStyle: '沉稳睿智',
|
||||||
|
responseStyle: '引经据典，富有哲理',
|
||||||
|
interests: ['历史', '文学', '科学', '哲学'],
|
||||||
|
sampleResponses: [
|
||||||
|
'正如古人所说，学而时习之，不亦说乎。',
|
||||||
|
'这个问题让我想起了苏格拉底的一句话...',
|
||||||
|
'从历史的角度来看，这种现象有其必然性。',
|
||||||
|
'知识就像海洋，我们永远只能取一瓢饮。',
|
||||||
|
'思考是人类最宝贵的财富，你问得很好。'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
name: '活力健将',
|
||||||
|
avatar: '/static/logo.png',
|
||||||
|
personality: '充满活力，积极向上',
|
||||||
|
greeting: '嘿！我是活力健将，让我们一起充满正能量！',
|
||||||
|
voiceStyle: '充满活力',
|
||||||
|
responseStyle: '积极向上，充满正能量',
|
||||||
|
interests: ['运动', '健身', '户外', '挑战'],
|
||||||
|
sampleResponses: [
|
||||||
|
'太棒了！这就是我想要听到的！💪',
|
||||||
|
'让我们一起挑战不可能！',
|
||||||
|
'运动是最好的良药，要不要一起锻炼？',
|
||||||
|
'每一天都是新的开始，加油！',
|
||||||
|
'你的能量感染了我，让我们继续前进！'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
name: '文艺青年',
|
||||||
|
avatar: '/static/logo.png',
|
||||||
|
personality: '文艺浪漫，富有想象力',
|
||||||
|
greeting: '你好，我是文艺青年，让我们一起感受生活的美好。',
|
||||||
|
voiceStyle: '文艺浪漫',
|
||||||
|
responseStyle: '诗意盎然，富有想象力',
|
||||||
|
interests: ['诗歌', '音乐', '绘画', '摄影'],
|
||||||
|
sampleResponses: [
|
||||||
|
'生活就像一首诗，需要用心去品味。',
|
||||||
|
'你的话让我想起了那首美丽的诗...',
|
||||||
|
'艺术是心灵的窗户，让我们透过它看世界。',
|
||||||
|
'每一个瞬间都值得被记录，被珍藏。',
|
||||||
|
'你的想法很有诗意，我喜欢这样的交流。'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 根据角色ID获取角色信息
|
||||||
|
export const getCharacterById = (id) => {
|
||||||
|
return aiCharacters.find(character => character.id == id);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据角色性格生成回复
|
||||||
|
export const generateResponse = (character, userMessage) => {
|
||||||
|
const responses = character.sampleResponses;
|
||||||
|
const randomIndex = Math.floor(Math.random() * responses.length);
|
||||||
|
return responses[randomIndex];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据用户消息内容智能选择回复
|
||||||
|
export const getSmartResponse = (character, userMessage) => {
|
||||||
|
const message = userMessage.toLowerCase();
|
||||||
|
|
||||||
|
// 根据关键词匹配不同的回复风格
|
||||||
|
if (message.includes('你好') || message.includes('hi') || message.includes('hello')) {
|
||||||
|
return character.greeting;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (message.includes('谢谢') || message.includes('感谢')) {
|
||||||
|
const thanksResponses = {
|
||||||
|
5: '不用谢啦～能帮到你我很开心！😊',
|
||||||
|
6: '不用客气，这是我应该做的。',
|
||||||
|
7: '嘿嘿，不用谢！我们是好朋友嘛！',
|
||||||
|
8: '宝贝，为你做什么我都愿意。',
|
||||||
|
13: '哈哈，不用谢！能让你开心就是我的荣幸！',
|
||||||
|
14: '助人为乐，何须言谢。',
|
||||||
|
15: '不用谢！让我们一起变得更好！',
|
||||||
|
16: '帮助他人是人生最美的诗篇。'
|
||||||
|
};
|
||||||
|
return thanksResponses[character.id] || '不用谢！';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (message.includes('再见') || message.includes('拜拜')) {
|
||||||
|
const goodbyeResponses = {
|
||||||
|
5: '拜拜～记得想我哦！😘',
|
||||||
|
6: '再见，期待下次的深度交流。',
|
||||||
|
7: '再见！下次我们一起玩更多有趣的游戏！',
|
||||||
|
8: '宝贝，我会想你的，早点回来。',
|
||||||
|
13: '哈哈，再见！记得保持笑容哦！',
|
||||||
|
14: '再见，愿智慧与你同行。',
|
||||||
|
15: '再见！保持活力，我们下次见！',
|
||||||
|
16: '再见，愿美好与你相伴。'
|
||||||
|
};
|
||||||
|
return goodbyeResponses[character.id] || '再见！';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认返回随机回复
|
||||||
|
return generateResponse(character, userMessage);
|
||||||
|
};
|
||||||
554
src/utils/api.js
Normal file
554
src/utils/api.js
Normal file
@@ -0,0 +1,554 @@
|
|||||||
|
// API服务文件
|
||||||
|
import { useUserStore } from '@/stores/user.js';
|
||||||
|
|
||||||
|
// 基础配置
|
||||||
|
const BASE_URL = 'http://8.145.52.111:8091'; // 根据后端地址调整
|
||||||
|
|
||||||
|
// 检查用户登录状态
|
||||||
|
const checkLoginStatus = () => {
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const customToken = uni.getStorageSync('custom_token');
|
||||||
|
const userToken = uni.getStorageSync('user_token');
|
||||||
|
const userInfo = uni.getStorageSync('userInfo');
|
||||||
|
|
||||||
|
// 解析userInfo，检查是否有有效的token
|
||||||
|
let userInfoToken = '';
|
||||||
|
if (userInfo) {
|
||||||
|
try {
|
||||||
|
const parsedUserInfo = JSON.parse(userInfo);
|
||||||
|
userInfoToken = parsedUserInfo.token || '';
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('解析userInfo失败:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 只有存在有效token才认为已登录
|
||||||
|
const hasValidToken = !!(userStore.token || customToken || userToken || userInfoToken);
|
||||||
|
|
||||||
|
return {
|
||||||
|
isLoggedIn: hasValidToken,
|
||||||
|
token: userStore.token || customToken || userToken || userInfoToken
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
const request = (options) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const loginStatus = checkLoginStatus();
|
||||||
|
|
||||||
|
// 默认配置
|
||||||
|
const defaultOptions = {
|
||||||
|
url: BASE_URL + options.url,
|
||||||
|
method: options.method || 'GET',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': loginStatus.token || '',
|
||||||
|
...options.header
|
||||||
|
},
|
||||||
|
data: options.data || {},
|
||||||
|
timeout: options.timeout || 30000
|
||||||
|
};
|
||||||
|
|
||||||
|
// 发送请求
|
||||||
|
uni.request({
|
||||||
|
...defaultOptions,
|
||||||
|
success: (res) => {
|
||||||
|
console.log('API请求成功:', res);
|
||||||
|
console.log('响应状态码:', res.statusCode);
|
||||||
|
console.log('响应数据:', res.data);
|
||||||
|
|
||||||
|
// 处理响应
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
resolve(res.data);
|
||||||
|
} else {
|
||||||
|
reject({
|
||||||
|
code: res.statusCode,
|
||||||
|
message: res.data?.message || '请求失败',
|
||||||
|
data: res.data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('API请求失败:', err);
|
||||||
|
reject({
|
||||||
|
code: -1,
|
||||||
|
message: '网络请求失败',
|
||||||
|
error: err
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// AI聊天API
|
||||||
|
export const chatAPI = {
|
||||||
|
// 同步聊天接口
|
||||||
|
syncChat: async (params) => {
|
||||||
|
const loginStatus = checkLoginStatus();
|
||||||
|
|
||||||
|
// 如果用户未登录，直接返回失败，让前端使用本地模拟
|
||||||
|
if (!loginStatus.isLoggedIn) {
|
||||||
|
console.log('用户未登录，跳过API调用，使用本地模拟');
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: { message: '用户未登录，使用本地模拟回复' },
|
||||||
|
isAnonymous: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await request({
|
||||||
|
url: '/api/chat/sync',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
message: params.message,
|
||||||
|
useFunctionCall: false,
|
||||||
|
modelId: null, // 使用默认模型
|
||||||
|
templateId: params.characterId // 使用角色模板ID
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('API原始响应:', response);
|
||||||
|
|
||||||
|
// 处理不同的响应格式 - 参考chat.vue的实现
|
||||||
|
let processedResponse = null;
|
||||||
|
|
||||||
|
// 如果响应是字符串，直接返回
|
||||||
|
if (typeof response === 'string') {
|
||||||
|
processedResponse = response;
|
||||||
|
}
|
||||||
|
// 如果响应是对象，尝试提取AI回复
|
||||||
|
else if (typeof response === 'object' && response !== null) {
|
||||||
|
// 优先处理嵌套结构：res.data.data.response
|
||||||
|
if (response.data && response.data.data && response.data.data.response) {
|
||||||
|
processedResponse = response.data.data.response;
|
||||||
|
console.log('从嵌套结构 data.data.response 提取回复:', processedResponse);
|
||||||
|
}
|
||||||
|
// 备用：直接使用 data.response
|
||||||
|
else if (response.data && response.data.response) {
|
||||||
|
processedResponse = response.data.response;
|
||||||
|
console.log('从字段 data.response 提取回复:', processedResponse);
|
||||||
|
}
|
||||||
|
// 检查是否为状态消息
|
||||||
|
else if (response.data && response.data.message) {
|
||||||
|
if (response.data.message === '对话成功') {
|
||||||
|
// 后端返回成功消息，使用默认回复
|
||||||
|
processedResponse = '我收到了你的消息，很高兴和你聊天！';
|
||||||
|
console.log('检测到对话成功状态，使用默认回复');
|
||||||
|
} else {
|
||||||
|
// 如果后端返回了错误信息，抛出错误
|
||||||
|
throw new Error(response.data.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 尝试其他可能的字段名
|
||||||
|
else {
|
||||||
|
const possibleFields = ['message', 'response', 'content', 'reply', 'answer', 'text'];
|
||||||
|
|
||||||
|
for (const field of possibleFields) {
|
||||||
|
if (response[field] && typeof response[field] === 'string') {
|
||||||
|
processedResponse = response[field];
|
||||||
|
console.log(`从字段 ${field} 提取回复:`, processedResponse);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果还是没找到，尝试在data中查找
|
||||||
|
if (!processedResponse && response.data) {
|
||||||
|
for (const field of possibleFields) {
|
||||||
|
if (response.data[field] && typeof response.data[field] === 'string') {
|
||||||
|
processedResponse = response.data[field];
|
||||||
|
console.log(`从字段 data.${field} 提取回复:`, processedResponse);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果仍然没有找到有效回复，使用默认回复
|
||||||
|
if (!processedResponse) {
|
||||||
|
processedResponse = '我收到了你的消息，很高兴和你聊天！';
|
||||||
|
console.log('未找到有效回复，使用默认回复');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: processedResponse,
|
||||||
|
originalResponse: response
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('AI聊天API调用失败:', error);
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: error
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 异步聊天接口（如果需要）
|
||||||
|
asyncChat: async (params) => {
|
||||||
|
try {
|
||||||
|
const response = await request({
|
||||||
|
url: '/api/chat/async',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
message: params.message,
|
||||||
|
characterId: params.characterId,
|
||||||
|
conversationId: params.conversationId || null,
|
||||||
|
...params
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: response
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('AI异步聊天API调用失败:', error);
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: error
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取聊天历史
|
||||||
|
getChatHistory: async (conversationId) => {
|
||||||
|
try {
|
||||||
|
const response = await request({
|
||||||
|
url: `/api/chat/history/${conversationId}`,
|
||||||
|
method: 'GET'
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: response
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取聊天历史失败:', error);
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: error
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 创建新对话
|
||||||
|
createConversation: async (characterId) => {
|
||||||
|
try {
|
||||||
|
const response = await request({
|
||||||
|
url: '/api/chat/conversation',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
characterId: characterId
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: response
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('创建对话失败:', error);
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: error
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 语音相关API
|
||||||
|
export const voiceAPI = {
|
||||||
|
// 1. 文本转语音 - TTS功能
|
||||||
|
textToSpeech: async (text, options = {}) => {
|
||||||
|
try {
|
||||||
|
const loginStatus = checkLoginStatus();
|
||||||
|
|
||||||
|
if (!loginStatus.isLoggedIn) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: { message: '用户未登录' }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('开始文本转语音:', text);
|
||||||
|
|
||||||
|
const response = await request({
|
||||||
|
url: '/api/chat/tts',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
text: text,
|
||||||
|
voiceStyle: options.voiceStyle || 'default',
|
||||||
|
modelId: options.modelId || null,
|
||||||
|
templateId: options.templateId || null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('文本转语音响应:', response);
|
||||||
|
|
||||||
|
// 处理响应数据
|
||||||
|
let audioUrl = null;
|
||||||
|
if (response.data && response.data.audioUrl) {
|
||||||
|
audioUrl = response.data.audioUrl;
|
||||||
|
} else if (response.audioUrl) {
|
||||||
|
audioUrl = response.audioUrl;
|
||||||
|
} else if (response.data && response.data.url) {
|
||||||
|
audioUrl = response.data.url;
|
||||||
|
} else if (response.url) {
|
||||||
|
audioUrl = response.url;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
audioUrl: audioUrl,
|
||||||
|
originalResponse: response
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('文本转语音失败:', error);
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: error
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 2. 对话+语音合成 - 对话后转语音
|
||||||
|
chatWithTTS: async (message, options = {}) => {
|
||||||
|
try {
|
||||||
|
const loginStatus = checkLoginStatus();
|
||||||
|
|
||||||
|
if (!loginStatus.isLoggedIn) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: { message: '用户未登录' }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('开始对话+语音合成:', message);
|
||||||
|
|
||||||
|
const response = await request({
|
||||||
|
url: '/api/chat/answer-tts',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
message: message,
|
||||||
|
modelId: options.modelId || null,
|
||||||
|
templateId: options.templateId || null,
|
||||||
|
voiceStyle: options.voiceStyle || 'default'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('对话+语音合成响应:', response);
|
||||||
|
|
||||||
|
// 处理响应数据
|
||||||
|
let aiResponse = null;
|
||||||
|
let audioUrl = null;
|
||||||
|
|
||||||
|
if (response.data) {
|
||||||
|
aiResponse = response.data.response || response.data.text || response.data.message;
|
||||||
|
audioUrl = response.data.audioUrl || response.data.url;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
aiResponse: aiResponse,
|
||||||
|
audioUrl: audioUrl,
|
||||||
|
originalResponse: response
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('对话+语音合成失败:', error);
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: error
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 3. 语音对话 - 完整语音交互流程
|
||||||
|
voiceChat: async (filePath, options = {}) => {
|
||||||
|
try {
|
||||||
|
const loginStatus = checkLoginStatus();
|
||||||
|
|
||||||
|
// 如果用户未登录，直接返回失败，让前端使用降级处理
|
||||||
|
if (!loginStatus.isLoggedIn) {
|
||||||
|
console.log('用户未登录，语音对话跳过API调用');
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: { message: '用户未登录，使用降级处理' }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('开始语音对话，文件路径:', filePath);
|
||||||
|
|
||||||
|
// 构建认证头
|
||||||
|
let authHeader = '';
|
||||||
|
if (loginStatus.token) {
|
||||||
|
authHeader = loginStatus.token.startsWith('Bearer ') ? loginStatus.token : 'Bearer ' + loginStatus.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
uni.uploadFile({
|
||||||
|
url: BASE_URL + '/api/chat/voice-chat',
|
||||||
|
filePath: filePath,
|
||||||
|
name: 'audio',
|
||||||
|
header: authHeader ? {
|
||||||
|
'Authorization': authHeader
|
||||||
|
} : {},
|
||||||
|
formData: {
|
||||||
|
modelId: options.modelId || null,
|
||||||
|
templateId: options.templateId || null,
|
||||||
|
voiceStyle: options.voiceStyle || 'default'
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
console.log('语音对话上传成功:', res);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(res.data);
|
||||||
|
console.log('语音对话响应数据:', data);
|
||||||
|
|
||||||
|
if (data.code === 200 && data.data) {
|
||||||
|
resolve({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
userText: data.data.userText || data.data.text,
|
||||||
|
aiResponse: data.data.aiResponse || data.data.response,
|
||||||
|
audioUrl: data.data.audioUrl || data.data.url
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
resolve({
|
||||||
|
success: false,
|
||||||
|
error: { message: data.message || '语音对话失败' }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (parseError) {
|
||||||
|
console.error('解析语音对话响应失败:', parseError);
|
||||||
|
resolve({
|
||||||
|
success: false,
|
||||||
|
error: { message: '解析响应失败' }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('语音对话上传失败:', err);
|
||||||
|
resolve({
|
||||||
|
success: false,
|
||||||
|
error: err
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('语音对话失败:', error);
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: error
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 4. 音频文件上传语音对话
|
||||||
|
uploadVoiceChat: async (filePath, options = {}) => {
|
||||||
|
try {
|
||||||
|
const loginStatus = checkLoginStatus();
|
||||||
|
|
||||||
|
// 如果用户未登录，直接返回失败，让前端使用降级处理
|
||||||
|
if (!loginStatus.isLoggedIn) {
|
||||||
|
console.log('用户未登录，上传音频文件语音对话跳过API调用');
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: { message: '用户未登录，使用降级处理' }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('开始上传音频文件语音对话，文件路径:', filePath);
|
||||||
|
|
||||||
|
// 构建认证头
|
||||||
|
let authHeader = '';
|
||||||
|
if (loginStatus.token) {
|
||||||
|
authHeader = loginStatus.token.startsWith('Bearer ') ? loginStatus.token : 'Bearer ' + loginStatus.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
uni.uploadFile({
|
||||||
|
url: BASE_URL + '/api/chat/upload-voice-chat',
|
||||||
|
filePath: filePath,
|
||||||
|
name: 'audio',
|
||||||
|
header: authHeader ? {
|
||||||
|
'Authorization': authHeader
|
||||||
|
} : {},
|
||||||
|
formData: {
|
||||||
|
modelId: options.modelId || null,
|
||||||
|
templateId: options.templateId || null,
|
||||||
|
voiceStyle: options.voiceStyle || 'default'
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
console.log('上传音频文件语音对话成功:', res);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(res.data);
|
||||||
|
console.log('上传音频文件语音对话响应数据:', data);
|
||||||
|
|
||||||
|
if (data.code === 200 && data.data) {
|
||||||
|
resolve({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
userText: data.data.userText || data.data.text,
|
||||||
|
aiResponse: data.data.aiResponse || data.data.response,
|
||||||
|
audioUrl: data.data.audioUrl || data.data.url
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
resolve({
|
||||||
|
success: false,
|
||||||
|
error: { message: data.message || '上传音频文件语音对话失败' }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (parseError) {
|
||||||
|
console.error('解析上传音频文件语音对话响应失败:', parseError);
|
||||||
|
resolve({
|
||||||
|
success: false,
|
||||||
|
error: { message: '解析响应失败' }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('上传音频文件语音对话失败:', err);
|
||||||
|
resolve({
|
||||||
|
success: false,
|
||||||
|
error: err
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('上传音频文件语音对话失败:', error);
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: error
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 兼容性方法：语音识别（降级处理）
|
||||||
|
speechToText: async (filePath) => {
|
||||||
|
console.warn('speechToText 方法已废弃，请使用 voiceChat 或 uploadVoiceChat');
|
||||||
|
// 降级处理：使用语音对话接口
|
||||||
|
const result = await voiceAPI.voiceChat(filePath);
|
||||||
|
if (result.success) {
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: result.data.userText
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出默认请求方法
|
||||||
|
export default request;
|
||||||
119
src/utils/debug.js
Normal file
119
src/utils/debug.js
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
// 调试工具
|
||||||
|
export const debugAPI = {
|
||||||
|
// 打印API请求详情
|
||||||
|
logRequest: (url, method, data) => {
|
||||||
|
console.log('=== API请求详情 ===');
|
||||||
|
console.log('URL:', url);
|
||||||
|
console.log('方法:', method);
|
||||||
|
console.log('请求数据:', data);
|
||||||
|
console.log('时间:', new Date().toLocaleString());
|
||||||
|
console.log('==================');
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打印API响应详情
|
||||||
|
logResponse: (response) => {
|
||||||
|
console.log('=== API响应详情 ===');
|
||||||
|
console.log('完整响应:', response);
|
||||||
|
console.log('响应类型:', typeof response);
|
||||||
|
console.log('是否为对象:', typeof response === 'object');
|
||||||
|
|
||||||
|
if (typeof response === 'object' && response !== null) {
|
||||||
|
console.log('响应键:', Object.keys(response));
|
||||||
|
console.log('响应值:', Object.values(response));
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('时间:', new Date().toLocaleString());
|
||||||
|
console.log('==================');
|
||||||
|
},
|
||||||
|
|
||||||
|
// 分析响应数据结构
|
||||||
|
analyzeResponse: (response) => {
|
||||||
|
console.log('=== 响应数据分析 ===');
|
||||||
|
|
||||||
|
if (typeof response === 'string') {
|
||||||
|
console.log('响应是字符串:', response);
|
||||||
|
return { type: 'string', value: response };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof response === 'object' && response !== null) {
|
||||||
|
console.log('响应是对象');
|
||||||
|
console.log('对象结构:', JSON.stringify(response, null, 2));
|
||||||
|
|
||||||
|
// 查找可能的AI回复字段
|
||||||
|
const possibleFields = ['response', 'message', 'content', 'reply', 'answer', 'text', 'data'];
|
||||||
|
const foundFields = {};
|
||||||
|
|
||||||
|
possibleFields.forEach(field => {
|
||||||
|
if (response.hasOwnProperty(field)) {
|
||||||
|
foundFields[field] = response[field];
|
||||||
|
console.log(`找到字段 ${field}:`, response[field]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return { type: 'object', fields: foundFields, full: response };
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('未知响应类型:', typeof response);
|
||||||
|
return { type: 'unknown', value: response };
|
||||||
|
},
|
||||||
|
|
||||||
|
// 测试API响应处理
|
||||||
|
testResponseHandling: (response) => {
|
||||||
|
console.log('=== 测试响应处理 ===');
|
||||||
|
|
||||||
|
const analysis = debugAPI.analyzeResponse(response);
|
||||||
|
|
||||||
|
// 尝试提取AI回复
|
||||||
|
let aiResponse = null;
|
||||||
|
|
||||||
|
if (analysis.type === 'string') {
|
||||||
|
aiResponse = analysis.value;
|
||||||
|
console.log('从字符串提取回复:', aiResponse);
|
||||||
|
} else if (analysis.type === 'object') {
|
||||||
|
// 尝试多种字段
|
||||||
|
const fields = ['response', 'message', 'content', 'reply', 'answer', 'text'];
|
||||||
|
|
||||||
|
for (const field of fields) {
|
||||||
|
if (response[field] && typeof response[field] === 'string') {
|
||||||
|
aiResponse = response[field];
|
||||||
|
console.log(`从字段 ${field} 提取回复:`, aiResponse);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果没找到，尝试嵌套对象
|
||||||
|
if (!aiResponse && response.data) {
|
||||||
|
for (const field of fields) {
|
||||||
|
if (response.data[field] && typeof response.data[field] === 'string') {
|
||||||
|
aiResponse = response.data[field];
|
||||||
|
console.log(`从 data.${field} 提取回复:`, aiResponse);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('最终提取的回复:', aiResponse);
|
||||||
|
console.log('回复是否有效:', aiResponse && typeof aiResponse === 'string' && aiResponse.trim());
|
||||||
|
|
||||||
|
// 检测是否为状态信息而非实际AI回复
|
||||||
|
if (aiResponse && typeof aiResponse === 'string') {
|
||||||
|
const statusKeywords = ['对话成功', 'success', '请求成功', '成功', 'ok', '完成'];
|
||||||
|
const isStatusMessage = statusKeywords.some(keyword =>
|
||||||
|
aiResponse.toLowerCase().includes(keyword.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isStatusMessage) {
|
||||||
|
console.warn('⚠️ 检测到状态信息而非AI回复:', aiResponse);
|
||||||
|
console.log('建议使用本地模拟回复');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('==================');
|
||||||
|
|
||||||
|
return aiResponse;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出默认调试工具
|
||||||
|
export default debugAPI;
|
||||||
Reference in New Issue
Block a user