秦汉
3 weeks ago
7 changed files with 430 additions and 0 deletions
@ -0,0 +1,28 @@ |
|||||
|
import http from './index' |
||||
|
|
||||
|
export interface ShopItemDisplay { |
||||
|
shopItemId: number |
||||
|
itemType: number |
||||
|
itemId: number |
||||
|
itemName: string | null |
||||
|
price: number |
||||
|
dailyLimit: number |
||||
|
purchasedToday: number |
||||
|
remainingStock: number |
||||
|
icon: string | null |
||||
|
itemRarity: number | null |
||||
|
} |
||||
|
|
||||
|
export interface Shop { |
||||
|
characterId: number |
||||
|
lastRefreshTime: string |
||||
|
items: ShopItemDisplay[] |
||||
|
} |
||||
|
|
||||
|
export const getShop = (): Promise<Shop> => { |
||||
|
return http.get('shop') |
||||
|
} |
||||
|
|
||||
|
export const buyItem = (shopItemId: number): Promise<boolean> => { |
||||
|
return http.post('shop/buy', { shopItemId }) |
||||
|
} |
||||
|
After Width: | Height: | Size: 6.4 KiB |
@ -0,0 +1,387 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted, computed } from 'vue' |
||||
|
import { useRouter } from 'vue-router' |
||||
|
import { useCharacterStore } from '@/stores/character' |
||||
|
import { getShop, buyItem, type Shop, type ShopItemDisplay } from '@/api/shop' |
||||
|
import { ElMessage } from 'element-plus' |
||||
|
import StarBorder from '@/components/StarBorder/StarBorder.vue' |
||||
|
import Particles from '@/components/Particles/Particles.vue' |
||||
|
import { ArrowLeft } from '@element-plus/icons-vue' |
||||
|
|
||||
|
const router = useRouter() |
||||
|
const characterStore = useCharacterStore() |
||||
|
|
||||
|
const shop = ref<Shop | null>(null) |
||||
|
const loading = ref(true) |
||||
|
const buying = ref<number | null>(null) |
||||
|
const error = ref('') |
||||
|
|
||||
|
const currentMoney = computed(() => characterStore.currentCharacter?.money ?? 0) |
||||
|
const characterId = computed(() => characterStore.currentCharacter?.id ?? 0) |
||||
|
|
||||
|
const itemTypeMap: Record<number, string> = { |
||||
|
1: '装备', |
||||
|
2: '丹药', |
||||
|
3: '垃圾' |
||||
|
} |
||||
|
|
||||
|
const rarityMap: Record<number, string> = { |
||||
|
1: '普通', |
||||
|
2: '稀有', |
||||
|
3: '史诗', |
||||
|
4: '传说' |
||||
|
} |
||||
|
|
||||
|
const rarityColorMap: Record<number, string> = { |
||||
|
1: '#9ca3af', |
||||
|
2: '#22c55e', |
||||
|
3: '#3b82f6', |
||||
|
4: '#f59e0b' |
||||
|
} |
||||
|
|
||||
|
const getItemIcon = (item: ShopItemDisplay) => { |
||||
|
if (item.icon) { |
||||
|
const typeStr = item.itemType === 1 ? 'equipment' : item.itemType === 2 ? 'pill' : 'scrap' |
||||
|
return new URL(`../assets/icons/${typeStr}/${item.icon}`, import.meta.url).href |
||||
|
} |
||||
|
return null |
||||
|
} |
||||
|
|
||||
|
const getItemEmoji = (itemType: number) => { |
||||
|
if (itemType === 1) return '⚔️' |
||||
|
if (itemType === 2) return '💊' |
||||
|
return '📦' |
||||
|
} |
||||
|
|
||||
|
const canBuy = (item: ShopItemDisplay) => { |
||||
|
if (item.remainingStock <= 0) return false |
||||
|
if (item.dailyLimit > 0 && item.purchasedToday >= item.dailyLimit) return false |
||||
|
if (currentMoney.value < item.price) return false |
||||
|
return true |
||||
|
} |
||||
|
|
||||
|
const getBuyButtonText = (item: ShopItemDisplay) => { |
||||
|
if (item.remainingStock <= 0) return '售罄' |
||||
|
if (item.dailyLimit > 0 && item.purchasedToday >= item.dailyLimit) return '已达上限' |
||||
|
if (currentMoney.value < item.price) return '灵石不足' |
||||
|
return '购买' |
||||
|
} |
||||
|
|
||||
|
const formatRefreshTime = (lastRefreshTime: string) => { |
||||
|
const date = new Date(lastRefreshTime) |
||||
|
return date.toLocaleString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) |
||||
|
} |
||||
|
|
||||
|
const formatNumber = (num: number) => { |
||||
|
return Math.floor(num).toLocaleString('zh-CN') |
||||
|
} |
||||
|
|
||||
|
const fetchShop = async () => { |
||||
|
loading.value = true |
||||
|
error.value = '' |
||||
|
try { |
||||
|
shop.value = await getShop() |
||||
|
} catch (err: any) { |
||||
|
error.value = err.message || '加载商店失败' |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleBuy = async (item: ShopItemDisplay) => { |
||||
|
if (!canBuy(item)) return |
||||
|
|
||||
|
buying.value = item.shopItemId |
||||
|
try { |
||||
|
await buyItem(item.shopItemId) |
||||
|
ElMessage.success(`购买成功！${item.itemName}`) |
||||
|
await fetchShop() |
||||
|
await characterStore.fetchCharacters() |
||||
|
} catch (err: any) { |
||||
|
ElMessage.error(err.message || '购买失败') |
||||
|
} finally { |
||||
|
buying.value = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const goBack = () => { |
||||
|
router.push('/game') |
||||
|
} |
||||
|
|
||||
|
onMounted(async () => { |
||||
|
await characterStore.fetchCharacters() |
||||
|
await fetchShop() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="shop-container"> |
||||
|
<Particles /> |
||||
|
<StarBorder /> |
||||
|
|
||||
|
<div class="header"> |
||||
|
<button class="back-btn" @click="goBack"> |
||||
|
<span class="back-icon">←</span> |
||||
|
<span>返回</span> |
||||
|
</button> |
||||
|
<h1 class="title">商店</h1> |
||||
|
<div class="money-display"> |
||||
|
💰 {{ formatNumber(currentMoney) }} 灵石 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="shop" class="shop-info"> |
||||
|
<span class="refresh-time">商品刷新时间: {{ formatRefreshTime(shop.lastRefreshTime) }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="loading" class="loading"> |
||||
|
加载中... |
||||
|
</div> |
||||
|
|
||||
|
<div v-else-if="error" class="error"> |
||||
|
{{ error }} |
||||
|
<button class="retry-btn" @click="fetchShop">重试</button> |
||||
|
</div> |
||||
|
|
||||
|
<div v-else-if="!shop || shop.items.length === 0" class="empty"> |
||||
|
商店暂无可购商品，请联系管理员上架商品 |
||||
|
</div> |
||||
|
|
||||
|
<div v-else class="shop-grid"> |
||||
|
<div |
||||
|
v-for="item in shop.items" |
||||
|
:key="item.shopItemId" |
||||
|
class="shop-item" |
||||
|
:class="{ 'cannot-buy': !canBuy(item) }" |
||||
|
> |
||||
|
<div class="item-icon-wrapper"> |
||||
|
<img |
||||
|
v-if="getItemIcon(item)" |
||||
|
:src="getItemIcon(item)" |
||||
|
class="item-icon-img" |
||||
|
:class="'rarity-' + (item.itemRarity || 1)" |
||||
|
/> |
||||
|
<div v-else class="item-icon">{{ getItemEmoji(item.itemType) }}</div> |
||||
|
<div v-if="item.itemRarity" class="rarity-badge" :style="{ color: rarityColorMap[item.itemRarity] }"> |
||||
|
{{ rarityMap[item.itemRarity] }} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="item-name">{{ item.itemName }}</div> |
||||
|
|
||||
|
<div class="item-price"> |
||||
|
💰 {{ formatNumber(item.price) }} |
||||
|
</div> |
||||
|
|
||||
|
<div class="item-limit" v-if="item.dailyLimit > 0"> |
||||
|
今日已购: {{ item.purchasedToday }} / {{ item.dailyLimit }} |
||||
|
</div> |
||||
|
|
||||
|
<button |
||||
|
class="buy-btn" |
||||
|
:disabled="!canBuy(item) || buying === item.shopItemId" |
||||
|
@click="handleBuy(item)" |
||||
|
> |
||||
|
{{ buying === item.shopItemId ? '购买中...' : getBuyButtonText(item) }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped lang="css"> |
||||
|
.shop-container { |
||||
|
min-height: 100vh; |
||||
|
padding: 20px; |
||||
|
position: relative; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
padding: 8px 16px; |
||||
|
background: rgba(255, 255, 255, 0.05); |
||||
|
border: 1px solid rgba(255, 255, 255, 0.1); |
||||
|
border-radius: 8px; |
||||
|
color: #cccccc; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.back-btn:hover { |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
} |
||||
|
|
||||
|
.back-icon { |
||||
|
font-size: 1.2rem; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 1.5rem; |
||||
|
color: #ffffff; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.money-display { |
||||
|
padding: 8px 16px; |
||||
|
background: rgba(255, 215, 0, 0.1); |
||||
|
border: 1px solid rgba(255, 215, 0, 0.3); |
||||
|
border-radius: 8px; |
||||
|
color: #ffd700; |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
|
||||
|
.shop-info { |
||||
|
margin-bottom: 20px; |
||||
|
color: #888888; |
||||
|
font-size: 0.9rem; |
||||
|
} |
||||
|
|
||||
|
.refresh-time { |
||||
|
padding: 4px 12px; |
||||
|
background: rgba(255, 255, 255, 0.05); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.loading, |
||||
|
.error, |
||||
|
.empty { |
||||
|
text-align: center; |
||||
|
padding: 60px 20px; |
||||
|
color: #888888; |
||||
|
font-size: 1.1rem; |
||||
|
} |
||||
|
|
||||
|
.error { |
||||
|
color: #ef4444; |
||||
|
} |
||||
|
|
||||
|
.retry-btn { |
||||
|
display: block; |
||||
|
margin: 16px auto 0; |
||||
|
padding: 8px 24px; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
border: 1px solid rgba(255, 255, 255, 0.2); |
||||
|
border-radius: 8px; |
||||
|
color: #cccccc; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.shop-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
.shop-item { |
||||
|
background: rgba(255, 255, 255, 0.05); |
||||
|
border: 1px solid rgba(255, 255, 255, 0.1); |
||||
|
border-radius: 12px; |
||||
|
padding: 16px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.shop-item:hover { |
||||
|
background: rgba(255, 255, 255, 0.08); |
||||
|
border-color: rgba(255, 255, 255, 0.2); |
||||
|
} |
||||
|
|
||||
|
.shop-item.cannot-buy { |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
|
||||
|
.item-icon-wrapper { |
||||
|
position: relative; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.item-icon-img { |
||||
|
width: 64px; |
||||
|
height: 64px; |
||||
|
object-fit: contain; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
.item-icon { |
||||
|
width: 64px; |
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 2rem; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
.rarity-1 { filter: grayscale(0.3); } |
||||
|
.rarity-2 { filter: hue-rotate(80deg) saturate(1.5); } |
||||
|
.rarity-3 { filter: hue-rotate(200deg) saturate(2); } |
||||
|
.rarity-4 { filter: hue-rotate(-30deg) saturate(2) brightness(1.2); } |
||||
|
|
||||
|
.rarity-badge { |
||||
|
position: absolute; |
||||
|
bottom: -8px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
font-size: 0.7rem; |
||||
|
font-weight: bold; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.item-name { |
||||
|
color: #ffffff; |
||||
|
font-size: 0.95rem; |
||||
|
margin-bottom: 8px; |
||||
|
min-height: 40px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.item-price { |
||||
|
color: #ffd700; |
||||
|
font-size: 1rem; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.item-limit { |
||||
|
color: #888888; |
||||
|
font-size: 0.8rem; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.buy-btn { |
||||
|
width: 100%; |
||||
|
padding: 10px 16px; |
||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
||||
|
border: none; |
||||
|
border-radius: 8px; |
||||
|
color: #ffffff; |
||||
|
font-size: 0.95rem; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.buy-btn:hover:not(:disabled) { |
||||
|
transform: scale(1.02); |
||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); |
||||
|
} |
||||
|
|
||||
|
.buy-btn:disabled { |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
cursor: not-allowed; |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue