feat: 修改页面bug

This commit is contained in:
zheng020 2026-06-04 00:51:29 +08:00
parent f0b650de26
commit f768613509
9 changed files with 209 additions and 210 deletions

View File

@ -97,149 +97,149 @@ export default {
this.applyType(val); this.applyType(val);
}, },
}, },
computed: { },
currentCardList() {
const categoryName = this.categoryList[this.selectedCategoryIndex].name computed: {
return this.cardListMap[categoryName] || this.cardList currentCardList() {
} const categoryName = this.categoryList[this.selectedCategoryIndex].name;
return this.cardListMap[categoryName] || this.cardList;
}, },
methods: { },
// methods: {
selectCategory(index) { //
this.selectedCategoryIndex = index selectCategory(index) {
this.selectedIndex = 0 // this.selectedCategoryIndex = index;
}, this.selectedIndex = 0; //
// },
onTouchStart(e) { //
this.touchStartY = e.touches[0].clientY onTouchStart(e) {
}, this.touchStartY = e.touches[0].clientY;
// - },
onTouchEnd(e) { // -
const touchEndY = e.changedTouches[0].clientY onTouchEnd(e) {
const diff = this.touchStartY - touchEndY const touchEndY = e.changedTouches[0].clientY;
const threshold = 50 // const diff = this.touchStartY - touchEndY;
const threshold = 50; //
if (diff > threshold) {
//
let newIndex = this.selectedIndex + 1
if (newIndex < this.currentCardList.length) {
this.selectCard(newIndex)
}
} else if (diff < -threshold) {
//
let newIndex = this.selectedIndex - 1
if (newIndex >= 0) {
this.selectCard(newIndex)
}
}
},
// -
// positions 5024
// 2
getCardStyle(index) {
const positions = [
{ left: 9 * 32, top: 2 * 32, rotate: 25, scale: 0.75 }, // 0 -
{ left: 3.75 * 32, top: 9 * 32, rotate: 12, scale: 0.95 }, // 1 -
{ left: 60, top: 580, rotate: 0, scale: 1 }, // 2 -
{ left: 3.75 * 32, top: 27.75 * 32, rotate: -12, scale: 0.95 }, // 3 -
{ left: 7 * 32, top: 34.25 * 32, rotate: -25, scale: 0.75 } // 4 -
];
//
// selectedIndex 2
const cardPos = (index - this.selectedIndex + 2 + 5) % 5;
const pos = positions[cardPos];
//
if (cardPos === 2) {
return {
left: `${pos.left}rpx`,
top: `${pos.top}rpx`,
transform: `scale(${pos.scale * 1.15}) rotate(0deg)`,
zIndex: 100
};
}
return {
left: `${pos.left}rpx`,
top: `${pos.top}rpx`,
transform: `scale(${pos.scale}) rotate(${pos.rotate}deg)`,
zIndex: 30 - Math.abs(cardPos - 2) * 10
};
},
//
selectCard(index) {
this.selectedIndex = index;
},
/** 当前叠卡在弧形布局中的槽位2=正中主图最大1=中上「第二张」叠层0最上… */
getCardStackPosition(index) {
return (index - this.selectedIndex + 2 + 5) % 5;
},
/**
* 点击卡图区域
* - 正中主图槽位 2 进入对应工艺创建页光栅卡即进入已接入预览的 create
* - 中上叠层槽位 1常为拍立得示意在选中光栅时 同样进入光栅卡创建与设计稿点第二张进光栅一致
* - 其余叠层 仅切换选中
*/
onCardFrameTap(index) {
const card = this.currentCardList[index];
if (!card) {
return;
}
const pos = this.getCardStackPosition(index);
//
//
if (pos === 2) {
if (card.name === '光栅卡' || card.name === '镭射卡') {
const route = this.cardRoutes[card.name];
if (route) {
uni.navigateTo({
url: `${route}?name=${encodeURIComponent(card.name)}`,
});
}
} else {
uni.showToast({
title: '激情开发中',
icon: 'none',
});
}
return;
}
this.selectCard(index);
},
handleBack() {
uni.navigateBack()
},
scrollUp() {
let newIndex = this.selectedCategoryIndex - 1;
if (newIndex >= 0) {
this.selectCategory(newIndex);
}
},
scrollDown() {
let newIndex = this.selectedCategoryIndex + 1;
if (newIndex < this.categoryList.length) {
this.selectCategory(newIndex);
}
},
handleSkip() {
const card = this.cardList[this.selectedIndex]
if (card.name === '光栅卡' || card.name === '镭射卡') {
const route = this.cardRoutes[card.name]
if (route) {
uni.navigateTo({
url: `${route}?name=${encodeURIComponent(card.name)}`
})
}
} else {
uni.showToast({
title: '激情开发中',
icon: 'none',
});
}
if (diff > threshold) {
//
let newIndex = this.selectedIndex + 1;
if (newIndex < this.currentCardList.length) {
this.selectCard(newIndex);
} }
} } else if (diff < -threshold) {
//
let newIndex = this.selectedIndex - 1;
if (newIndex >= 0) {
this.selectCard(newIndex);
}
}
},
// -
// positions 5024
// 2
getCardStyle(index) {
const positions = [
{ left: 9 * 32, top: 2 * 32, rotate: 25, scale: 0.75 }, // 0 -
{ left: 3.75 * 32, top: 9 * 32, rotate: 12, scale: 0.95 }, // 1 -
{ left: 60, top: 580, rotate: 0, scale: 1 }, // 2 -
{ left: 3.75 * 32, top: 27.75 * 32, rotate: -12, scale: 0.95 }, // 3 -
{ left: 7 * 32, top: 34.25 * 32, rotate: -25, scale: 0.75 }, // 4 -
];
//
// selectedIndex 2
const cardPos = (index - this.selectedIndex + 2 + 5) % 5;
const pos = positions[cardPos];
//
if (cardPos === 2) {
return {
left: `${pos.left}rpx`,
top: `${pos.top}rpx`,
transform: `scale(${pos.scale * 1.15}) rotate(0deg)`,
zIndex: 100,
};
}
return {
left: `${pos.left}rpx`,
top: `${pos.top}rpx`,
transform: `scale(${pos.scale}) rotate(${pos.rotate}deg)`,
zIndex: 30 - Math.abs(cardPos - 2) * 10,
};
},
//
selectCard(index) {
this.selectedIndex = index;
},
/** 当前叠卡在弧形布局中的槽位2=正中主图最大1=中上「第二张」叠层0最上… */
getCardStackPosition(index) {
return (index - this.selectedIndex + 2 + 5) % 5;
},
/**
* 点击卡图区域
* - 正中主图槽位 2 进入对应工艺创建页光栅卡即进入已接入预览的 create
* - 中上叠层槽位 1常为拍立得示意在选中光栅时 同样进入光栅卡创建与设计稿点第二张进光栅一致
* - 其余叠层 仅切换选中
*/
onCardFrameTap(index) {
const card = this.currentCardList[index];
if (!card) {
return;
}
const pos = this.getCardStackPosition(index);
//
//
if (pos === 2) {
if (card.name === "光栅卡" || card.name === "镭射卡") {
const route = this.cardRoutes[card.name];
if (route) {
uni.navigateTo({
url: `${route}?name=${encodeURIComponent(card.name)}`,
});
}
} else {
uni.showToast({
title: "激情开发中",
icon: "none",
});
}
return;
}
this.selectCard(index);
},
handleBack() {
uni.navigateBack();
},
scrollUp() {
let newIndex = this.selectedCategoryIndex - 1;
if (newIndex >= 0) {
this.selectCategory(newIndex);
}
},
scrollDown() {
let newIndex = this.selectedCategoryIndex + 1;
if (newIndex < this.categoryList.length) {
this.selectCategory(newIndex);
}
},
handleSkip() {
const card = this.cardList[this.selectedIndex];
if (card.name === "光栅卡" || card.name === "镭射卡") {
const route = this.cardRoutes[card.name];
if (route) {
uni.navigateTo({
url: `${route}?name=${encodeURIComponent(card.name)}`,
});
}
} else {
uni.showToast({
title: "激情开发中",
icon: "none",
});
}
},
}, },
onShow() { onShow() {
try { try {
@ -264,11 +264,11 @@ export default {
categoryList: [{ name: "星卡" }, { name: "吧唧" }, { name: "海报" }], categoryList: [{ name: "星卡" }, { name: "吧唧" }, { name: "海报" }],
cardListMap: { cardListMap: {
星卡: [ 星卡: [
{ {
name: "镭射卡", name: "镭射卡",
image: "/static/castlove/leisheka.png", image: "/static/castlove/leisheka.png",
comingSoon: false, comingSoon: false,
}, },
{ {
name: "光栅卡", name: "光栅卡",
image: "/static/castlove/guangshanka.png", image: "/static/castlove/guangshanka.png",
@ -564,6 +564,13 @@ export default {
"?name=" + "?name=" +
encodeURIComponent(card.name), encodeURIComponent(card.name),
}); });
} else if (card.name === "镭射卡") {
uni.navigateTo({
url:
this.cardRoutes["镭射卡"] +
"?name=" +
encodeURIComponent(card.name),
});
} else { } else {
uni.showToast({ title: "激情开发中", icon: "none" }); uni.showToast({ title: "激情开发中", icon: "none" });
} }

View File

@ -502,13 +502,14 @@ defineExpose({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin-right: 10rpx;
} }
.star-activity-list { .star-activity-list {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8rpx; gap: 8rpx;
width: 68rpx; /* width: 68rpx; */
/* 控制整体宽度,根据图标大小调整 */ /* 控制整体宽度,根据图标大小调整 */
height: 156rpx; height: 156rpx;
/* 预估高度,包含图标和文字块 */ /* 预估高度,包含图标和文字块 */
@ -521,7 +522,7 @@ defineExpose({
/* 控制整体宽度,根据图标大小调整 */ /* 控制整体宽度,根据图标大小调整 */
height: 156rpx; height: 156rpx;
/* 预估高度,包含图标和文字块 */ /* 预估高度,包含图标和文字块 */
margin-right: 24rpx; margin-right: 10rpx;
} }
/* --- 上层图标样式 --- */ /* --- 上层图标样式 --- */
@ -532,7 +533,7 @@ defineExpose({
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
/* 水平居中 */ /* 水平居中 */
width: 34rpx; width: 42.6rpx;
/* 图标宽度 */ /* 图标宽度 */
height: 48rpx; height: 48rpx;
/* 图标高度 */ /* 图标高度 */

View File

@ -1,6 +1,6 @@
<template> <template>
<view class="recent-upgrades"> <view class="recent-upgrades">
<text class="card-title">即将升级藏品</text> <text class="card-title">最近升级藏品</text>
<view v-if="!items || items.length === 0" class="empty-row"> <view v-if="!items || items.length === 0" class="empty-row">
<text class="empty-text">暂无数据</text> <text class="empty-text">暂无数据</text>
</view> </view>

View File

@ -137,7 +137,9 @@ defineProps({
} }
.legend-text { .legend-text {
font-size: 8rpx; font-size: 32rpx;
white-space: nowrap;
transform: scale(0.3);
color: rgba(255, 241, 163, 1); color: rgba(255, 241, 163, 1);
text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84); text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
} }

View File

@ -525,7 +525,7 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
/* margin-top: 160rpx; */ /* margin-top: 160rpx; */
padding: 208rpx 24rpx 0; padding: 208rpx 16rpx 0;
box-sizing: border-box; box-sizing: border-box;
} }

View File

@ -85,7 +85,7 @@ const progressPercent = computed(() => {
width: 98%; width: 98%;
height: 328rpx; height: 328rpx;
position: relative; position: relative;
top: 240rpx; top: 208rpx;
overflow: hidden; overflow: hidden;
/* 性能优化:启用硬件加速 */ /* 性能优化:启用硬件加速 */
transform: translateZ(0); transform: translateZ(0);

View File

@ -35,7 +35,7 @@ const props = defineProps({
current: { type: Number, default: 0 }, current: { type: Number, default: 0 },
target: { type: Number, default: 100 }, target: { type: Number, default: 100 },
barHeight: { type: String, default: '200rpx' }, barHeight: { type: String, default: '200rpx' },
barWidth: { type: String, default: '16rpx' }, barWidth: { type: String, default: '24rpx' },
circleSize: { type: String, default: '60rpx' }, circleSize: { type: String, default: '60rpx' },
fillColor: { fillColor: {
type: String, type: String,

View File

@ -1,85 +1,74 @@
// API 基础配置 // API 基础配置
// 自动检测后端环境:探测开发服务器是否可用,能连通则用开发地址,否则用生产地址 // 自动检测后端环境:探测开发服务器是否可用,能连通则用开发地址,否则用生产地址
// 团队开发机Gateway + 团队数据库;注册/登录/余额/铸造) const DEV_BASE = 'http://192.168.110.60:8080' // 开发环境
// const DEV_BASE = 'http://192.168.110.60:8080'
const DEV_BASE = 'http://localhost:8081'
const SEGMENT_BASE = 'http://localhost:8081'
const LASER_BASE = 'http://localhost:8081' // 镭射 AI 生成 + compositor 走本地 Gateway
const PROD_BASE = 'http://101.132.250.62:8080' // 生产环境 const PROD_BASE = 'http://101.132.250.62:8080' // 生产环境
const HEALTH_URL = DEV_BASE + '/health' const HEALTH_URL = DEV_BASE + '/health'
// 默认生产H5 本地开发先走 DEV避免 health 探测完成前请求打到生产(生产暂无 /segment
// 是否使用模拟数据(开发调试时设为 true后端API准备好后改为 false // 是否使用模拟数据(开发调试时设为 true后端API准备好后改为 false
const USE_MOCK_API = true const USE_MOCK_API = true
// 环境检测状态0=检测中, 1=开发环境, 2=生产环境 // 环境检测状态0=检测中, 1=开发环境, 2=生产环境
let envStatus = 0 let envStatus = 0
let baseURL = PROD_BASE let baseURL = PROD_BASE
// #ifdef H5
if (import.meta.env.DEV) {
baseURL = DEV_BASE
console.log('[API] H5 开发模式,默认地址:', DEV_BASE)
}
// #endif
// 环境检测 Promise确保 getApiBaseUrl / getWebSocketBaseUrl 等待检测完成 // 环境检测 Promise确保 getApiBaseUrl / getWebSocketBaseUrl 等待检测完成
const envReadyPromise = new Promise((resolve) => { const envReadyPromise = new Promise((resolve) => {
uni.request({ uni.request({
url: HEALTH_URL, url: HEALTH_URL,
method: 'GET', method: 'GET',
timeout: 2000, timeout: 2000,
success: (res) => { success: (res) => {
if (res.statusCode === 200) { if (res.statusCode === 200) {
baseURL = DEV_BASE baseURL = DEV_BASE
envStatus = 1 envStatus = 1
console.log('[API] 使用开发环境地址:', DEV_BASE) console.log('[API] 使用开发环境地址:', DEV_BASE)
} else { } else {
envStatus = 2 envStatus = 2
console.log('[API] 开发环境返回非200使用生产环境地址:', PROD_BASE) console.log('[API] 开发环境返回非200使用生产环境地址:', PROD_BASE)
} }
resolve(envStatus) resolve(envStatus)
}, },
fail: () => { fail: () => {
envStatus = 2 envStatus = 2
console.log('[API] 开发环境不可用,使用生产环境地址:', PROD_BASE) console.log('[API] 开发环境不可用,使用生产环境地址:', PROD_BASE)
resolve(envStatus) resolve(envStatus)
} }
}) })
}) })
/** 等待环境检测完成(返回 'dev' | 'prod' */ /** 等待环境检测完成(返回 'dev' | 'prod' */
export async function waitForEnvReady() { export async function waitForEnvReady() {
await envReadyPromise await envReadyPromise
return envStatus === 1 ? 'dev' : 'prod' return envStatus === 1 ? 'dev' : 'prod'
} }
/** 网关根地址(供 uni.uploadFile 等无法走 request 封装的场景拼接完整 URL */ /** 网关根地址(供 uni.uploadFile 等无法走 request 封装的场景拼接完整 URL */
export async function getApiBaseUrl() { export async function getApiBaseUrl() {
await envReadyPromise await envReadyPromise
return String(baseURL).replace(/\/+$/, '') return String(baseURL).replace(/\/+$/, '')
} }
/** 获取 WebSocket 基础地址(将 http:// 替换为 ws:// */ /** 获取 WebSocket 基础地址(将 http:// 替换为 ws:// */
export async function getWebSocketBaseUrl() { export async function getWebSocketBaseUrl() {
await envReadyPromise await envReadyPromise
const httpUrl = String(baseURL).replace(/\/+$/, '') const httpUrl = String(baseURL).replace(/\/+$/, '')
return httpUrl.replace(/^http:/, 'ws:').replace(/^https:/, 'wss:') return httpUrl.replace(/^http:/, 'ws:').replace(/^https:/, 'wss:')
} }
// 兼容旧代码:同步版本在环境检测完成前返回默认值(生产地址) // 兼容旧代码:同步版本在环境检测完成前返回默认值(生产地址)
export function getApiBaseUrlSync() { export function getApiBaseUrlSync() {
return String(baseURL).replace(/\/+$/, '') return String(baseURL).replace(/\/+$/, '')
} }
/** 抠图专用 Gateway可与 DEV_BASE 不同业务走团队库segment 走本机) */ /** 抠图专用 Gateway可与 DEV_BASE 不同业务走团队库segment 走本机) */
export function getSegmentApiBaseUrl() { export function getSegmentApiBaseUrl() {
return String(SEGMENT_BASE).replace(/\/+$/, '') return String(baseURL).replace(/\/+$/, '')
} }
/** 镭射专用 GatewayAI 生成 + compositor 走本地,其他业务走远程) */ /** 镭射专用 GatewayAI 生成 + compositor 走本地,其他业务走远程) */
export function getLaserApiBaseUrl() { export function getLaserApiBaseUrl() {
return String(LASER_BASE).replace(/\/+$/, '') return String(baseURL).replace(/\/+$/, '')
} }
// 模拟网络延迟 // 模拟网络延迟
@ -1025,20 +1014,20 @@ const DASHBOARD_PREFIX = '/api/v1/dashboard'
// mock 触发器:当 USE_MOCK_API 为 true 时短路返回 mock 数据 // mock 触发器:当 USE_MOCK_API 为 true 时短路返回 mock 数据
// 后端就绪后将 USE_MOCK_API 改为 false 即可 // 后端就绪后将 USE_MOCK_API 改为 false 即可
async function dashboardRequest(endpoint, params = {}) { async function dashboardRequest(endpoint, params = {}) {
if (USE_MOCK_API) { if (USE_MOCK_API) {
const factory = mockRouter[`${DASHBOARD_PREFIX}${endpoint}`] const factory = mockRouter[`${DASHBOARD_PREFIX}${endpoint}`]
if (factory) return factory(params) if (factory) return factory(params)
} }
return request({ url: `${DASHBOARD_PREFIX}${endpoint}`, method: 'GET', data: params }) return request({ url: `${DASHBOARD_PREFIX}${endpoint}`, method: 'GET', data: params })
} }
export const dashboardApi = { export const dashboardApi = {
getTodayOverview: (starId) => dashboardRequest('/today-overview', { star_id: starId }), getTodayOverview: (starId) => dashboardRequest('/today-overview', { star_id: starId }),
get7DayIncomeCurve: (starId) => dashboardRequest('/income-curve', { star_id: starId }), get7DayIncomeCurve: (starId) => dashboardRequest('/income-curve', { star_id: starId }),
getExhibitionSummary: (starId) => dashboardRequest('/exhibition-summary', { star_id: starId }), getExhibitionSummary: (starId) => dashboardRequest('/exhibition-summary', { star_id: starId }),
getLikeIncomeByLevel: (starId) => dashboardRequest('/like-income-by-level', { star_id: starId }), getLikeIncomeByLevel: (starId) => dashboardRequest('/like-income-by-level', { star_id: starId }),
getTopAssets: (starId) => dashboardRequest('/top-assets', { star_id: starId }), getTopAssets: (starId) => dashboardRequest('/top-assets', { star_id: starId }),
getLevelDistribution: (starId) => dashboardRequest('/level-distribution', { star_id: starId }), getLevelDistribution: (starId) => dashboardRequest('/level-distribution', { star_id: starId }),
getUpgradeProgress: (starId) => dashboardRequest('/upgrade-progress', { star_id: starId }), getUpgradeProgress: (starId) => dashboardRequest('/upgrade-progress', { star_id: starId }),
} }

View File

@ -58,7 +58,7 @@ export async function mockExhibitionSummary({ star_id }) {
{ asset_id: 1, asset_name: '璀璨星河', asset_thumb: '/static/sucai/image-07.png', duration_7d: '144:13:56', earnings_7d: 2173, avg_earnings: 15 }, { asset_id: 1, asset_name: '璀璨星河', asset_thumb: '/static/sucai/image-07.png', duration_7d: '144:13:56', earnings_7d: 2173, avg_earnings: 15 },
{ asset_id: 2, asset_name: '夏日微风', asset_thumb: '/static/sucai/image-19.png', duration_7d: '77:13:56', earnings_7d: 1332, avg_earnings: 15 }, { asset_id: 2, asset_name: '夏日微风', asset_thumb: '/static/sucai/image-19.png', duration_7d: '77:13:56', earnings_7d: 1332, avg_earnings: 15 },
{ asset_id: 3, asset_name: '夜色霓虹', asset_thumb: '/static/sucai/image-23.png', duration_7d: '64:15:37', earnings_7d: 1201, avg_earnings: 12 }, { asset_id: 3, asset_name: '夜色霓虹', asset_thumb: '/static/sucai/image-23.png', duration_7d: '64:15:37', earnings_7d: 1201, avg_earnings: 12 },
{ asset_id: 4, asset_name: '黎明序曲', asset_thumb: '/static/sucai/image-38.png', duration_7d: '51:22:12', earnings_7d: 783, avg_earnings: 12 }, { asset_id: 4, asset_name: '黎明序曲', asset_thumb: '/static/sucai/image-35.png', duration_7d: '51:22:12', earnings_7d: 783, avg_earnings: 12 },
{ asset_id: 5, asset_name: '深海回响', asset_thumb: '/static/sucai/image-46.png', duration_7d: '51:22:12', earnings_7d: 783, avg_earnings: 12 }, { asset_id: 5, asset_name: '深海回响', asset_thumb: '/static/sucai/image-46.png', duration_7d: '51:22:12', earnings_7d: 783, avg_earnings: 12 },
], ],
}, },
@ -76,7 +76,7 @@ export async function mockLikeIncomeByLevel({ star_id }) {
levels: [ levels: [
{ level: 'UR', asset_count: 1, total_income: 723, thumb: '/static/sucai/image-03.png' }, { level: 'UR', asset_count: 1, total_income: 723, thumb: '/static/sucai/image-03.png' },
{ level: 'SSR', asset_count: 2, total_income: 381, thumb: '/static/sucai/image-14.png' }, { level: 'SSR', asset_count: 2, total_income: 381, thumb: '/static/sucai/image-14.png' },
{ level: 'SR', asset_count: 5, total_income: 233, thumb: '/static/sucai/image-27.png' }, { level: 'SR', asset_count: 5, total_income: 233, thumb: '/static/sucai/image-23.png' },
{ level: 'SR', asset_count: 4, total_income: 169, thumb: '/static/sucai/image-35.png' }, { level: 'SR', asset_count: 4, total_income: 169, thumb: '/static/sucai/image-35.png' },
{ level: 'R', asset_count: 6, total_income: 57, thumb: '/static/sucai/image-49.png' }, { level: 'R', asset_count: 6, total_income: 57, thumb: '/static/sucai/image-49.png' },
], ],