Initial commit: Text Adventure Game
Features: - Combat system with AP/EP hit calculation and three-layer defense - Auto-combat/farming mode - Item system with stacking support - Skill system with levels, milestones, and parent skill sync - Shop system with dynamic pricing - Inventory management with bulk selling - Event system - Game loop with offline earnings - Save/Load system Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude
147
components/drawers/EventDrawer.vue
Normal file
147
components/drawers/EventDrawer.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="event-drawer">
|
||||
<view class="event-header">
|
||||
<text class="event-title">{{ eventData.title }}</text>
|
||||
<text class="event-close" @click="close">×</text>
|
||||
</view>
|
||||
|
||||
<view class="event-content">
|
||||
<!-- NPC信息 -->
|
||||
<view v-if="eventData.npc" class="npc-info">
|
||||
<text class="npc-name">{{ eventData.npc.name }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 对话文本 -->
|
||||
<scroll-view class="dialogue-text" scroll-y>
|
||||
<text class="dialogue-content">{{ eventData.text }}</text>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 选项按钮 -->
|
||||
<view class="dialogue-choices">
|
||||
<TextButton
|
||||
v-for="choice in eventData.choices"
|
||||
:key="choice.text"
|
||||
:text="choice.text"
|
||||
@click="selectChoice(choice)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useGameStore } from '@/store/game'
|
||||
import { usePlayerStore } from '@/store/player'
|
||||
import { handleDialogueChoice } from '@/utils/eventSystem'
|
||||
import TextButton from '@/components/common/TextButton.vue'
|
||||
|
||||
const game = useGameStore()
|
||||
const player = usePlayerStore()
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const eventData = computed(() => {
|
||||
if (!game.currentEvent) {
|
||||
return {
|
||||
title: '事件',
|
||||
npc: null,
|
||||
text: '暂无事件',
|
||||
choices: []
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: game.currentEvent.npc?.name || '事件',
|
||||
npc: game.currentEvent.npc,
|
||||
text: game.currentEvent.text || '',
|
||||
choices: game.currentEvent.choices || []
|
||||
}
|
||||
})
|
||||
|
||||
function close() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function selectChoice(choice) {
|
||||
const result = handleDialogueChoice(game, player, choice)
|
||||
|
||||
if (result.closeEvent) {
|
||||
close()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.event-drawer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $bg-secondary;
|
||||
}
|
||||
|
||||
.event-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
color: $text-primary;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.event-close {
|
||||
color: $text-secondary;
|
||||
font-size: 48rpx;
|
||||
padding: 0 16rpx;
|
||||
|
||||
&:active {
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.event-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.npc-info {
|
||||
padding: 16rpx;
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.npc-name {
|
||||
color: $accent;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dialogue-text {
|
||||
flex: 1;
|
||||
max-height: 400rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 16rpx;
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.dialogue-content {
|
||||
color: $text-primary;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.dialogue-choices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
</style>
|
||||
398
components/drawers/InventoryDrawer.vue
Normal file
398
components/drawers/InventoryDrawer.vue
Normal file
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<view class="inventory-drawer">
|
||||
<view class="drawer-header">
|
||||
<text class="drawer-title">📦 背包</text>
|
||||
<text class="drawer-close" @click="close">×</text>
|
||||
</view>
|
||||
|
||||
<FilterTabs
|
||||
:tabs="filterTabs"
|
||||
:modelValue="currentFilter"
|
||||
@update:modelValue="currentFilter = $event"
|
||||
/>
|
||||
|
||||
<scroll-view class="inventory-list" scroll-y>
|
||||
<view
|
||||
v-for="item in filteredItems"
|
||||
:key="item.uniqueId || item.id"
|
||||
class="inventory-item"
|
||||
:class="{ 'inventory-item--equipped': isEquipped(item) }"
|
||||
@click="selectItem(item)"
|
||||
>
|
||||
<text class="inventory-item__icon">{{ item.icon || '📦' }}</text>
|
||||
<view class="inventory-item__info">
|
||||
<text class="inventory-item__name" :style="{ color: qualityColor(item.quality) }">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text v-if="item.count > 1" class="inventory-item__count">x{{ item.count }}</text>
|
||||
</view>
|
||||
<text v-if="isEquipped(item)" class="inventory-item__equipped-badge">E</text>
|
||||
</view>
|
||||
<view v-if="filteredItems.length === 0" class="inventory-empty">
|
||||
<text class="inventory-empty__text">背包空空如也</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 物品详情 -->
|
||||
<view v-if="selectedItem" class="item-detail">
|
||||
<view class="item-detail__header">
|
||||
<text class="item-detail__name">{{ selectedItem.name }}</text>
|
||||
<text class="item-detail__close" @click="selectedItem = null">×</text>
|
||||
</view>
|
||||
<text class="item-detail__desc">{{ selectedItem.description }}</text>
|
||||
<text v-if="isEquipped(selectedItem)" class="item-detail__equipped">⚔️ 已装备</text>
|
||||
<view class="item-detail__actions">
|
||||
<TextButton
|
||||
v-if="canEquip && !isEquipped(selectedItem)"
|
||||
text="装备"
|
||||
type="primary"
|
||||
@click="equipItem"
|
||||
/>
|
||||
<TextButton
|
||||
v-if="canEquip && isEquipped(selectedItem)"
|
||||
text="卸下"
|
||||
type="warning"
|
||||
@click="unequipItem"
|
||||
/>
|
||||
<TextButton
|
||||
v-if="canUse"
|
||||
text="使用"
|
||||
@click="useItem"
|
||||
/>
|
||||
<TextButton
|
||||
text="出售"
|
||||
type="default"
|
||||
@click="sellItem"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { usePlayerStore } from '@/store/player'
|
||||
import { useGameStore } from '@/store/game'
|
||||
import FilterTabs from '@/components/common/FilterTabs.vue'
|
||||
import TextButton from '@/components/common/TextButton.vue'
|
||||
|
||||
const player = usePlayerStore()
|
||||
const game = useGameStore()
|
||||
|
||||
const currentFilter = ref('all')
|
||||
const selectedItem = ref(null)
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const filterTabs = [
|
||||
{ id: 'all', label: '全部' },
|
||||
{ id: 'weapon', label: '武器' },
|
||||
{ id: 'armor', label: '防具' },
|
||||
{ id: 'consumable', label: '消耗品' },
|
||||
{ id: 'material', label: '素材' }
|
||||
]
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
const items = player.inventory || []
|
||||
if (currentFilter.value === 'all') {
|
||||
return items
|
||||
}
|
||||
return items.filter(item => item.type === currentFilter.value)
|
||||
})
|
||||
|
||||
const canEquip = computed(() => {
|
||||
if (!selectedItem.value) return false
|
||||
return ['weapon', 'armor', 'shield', 'accessory'].includes(selectedItem.value.type)
|
||||
})
|
||||
|
||||
const canUse = computed(() => {
|
||||
if (!selectedItem.value) return false
|
||||
return selectedItem.value.type === 'consumable'
|
||||
})
|
||||
|
||||
// 装备槽位映射
|
||||
const slotMap = {
|
||||
weapon: 'weapon',
|
||||
armor: 'armor',
|
||||
shield: 'shield',
|
||||
accessory: 'accessory'
|
||||
}
|
||||
|
||||
// 检查物品是否已装备
|
||||
function isEquipped(item) {
|
||||
if (!item || !item.type) return false
|
||||
const slot = slotMap[item.type]
|
||||
if (!slot) return false
|
||||
const equipped = player.equipment[slot]
|
||||
// 通过 uniqueId 或 id 比较
|
||||
return equipped && (equipped.uniqueId === item.uniqueId || equipped.id === item.id)
|
||||
}
|
||||
|
||||
function qualityColor(quality) {
|
||||
if (!quality) return '#ffffff'
|
||||
if (quality >= 200) return '#f97316' // 传说
|
||||
if (quality >= 160) return '#a855f7' // 史诗
|
||||
if (quality >= 130) return '#60a5fa' // 稀有
|
||||
if (quality >= 100) return '#4ade80' // 优秀
|
||||
if (quality >= 50) return '#ffffff' // 普通
|
||||
return '#808080' // 垃圾
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function selectItem(item) {
|
||||
selectedItem.value = item
|
||||
}
|
||||
|
||||
function equipItem() {
|
||||
if (!selectedItem.value) return
|
||||
const item = selectedItem.value
|
||||
const slot = slotMap[item.type]
|
||||
|
||||
if (!slot) return
|
||||
|
||||
// 如果该槽位已有装备，先卸下旧装备放回背包
|
||||
const oldEquip = player.equipment[slot]
|
||||
if (oldEquip) {
|
||||
player.inventory.push(oldEquip)
|
||||
}
|
||||
|
||||
// 从背包中移除该物品
|
||||
const index = player.inventory.findIndex(i =>
|
||||
(i.uniqueId === item.uniqueId) || (i.id === item.id && i.uniqueId === undefined)
|
||||
)
|
||||
if (index > -1) {
|
||||
player.inventory.splice(index, 1)
|
||||
}
|
||||
|
||||
// 装备该物品
|
||||
player.equipment[slot] = item
|
||||
|
||||
game.addLog(`装备了 ${item.name}`, 'info')
|
||||
selectedItem.value = null
|
||||
}
|
||||
|
||||
function unequipItem() {
|
||||
if (!selectedItem.value) return
|
||||
const item = selectedItem.value
|
||||
const slot = slotMap[item.type]
|
||||
|
||||
if (!slot) return
|
||||
|
||||
// 从装备槽移除
|
||||
player.equipment[slot] = null
|
||||
|
||||
// 放回背包
|
||||
player.inventory.push(item)
|
||||
|
||||
game.addLog(`卸下了 ${item.name}`, 'info')
|
||||
selectedItem.value = null
|
||||
}
|
||||
|
||||
function useItem() {
|
||||
if (!selectedItem.value) return
|
||||
const item = selectedItem.value
|
||||
|
||||
// 检查是否是消耗品
|
||||
if (item.type !== 'consumable') return
|
||||
|
||||
// 应用效果
|
||||
if (item.effect) {
|
||||
if (item.effect.health) {
|
||||
player.currentStats.health = Math.min(
|
||||
player.currentStats.maxHealth,
|
||||
player.currentStats.health + item.effect.health
|
||||
)
|
||||
}
|
||||
if (item.effect.stamina) {
|
||||
player.currentStats.stamina = Math.min(
|
||||
player.currentStats.maxStamina,
|
||||
player.currentStats.stamina + item.effect.stamina
|
||||
)
|
||||
}
|
||||
if (item.effect.sanity) {
|
||||
player.currentStats.sanity = Math.min(
|
||||
player.currentStats.maxSanity,
|
||||
player.currentStats.sanity + item.effect.sanity
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 从背包中移除（如果是堆叠物品，减少数量）
|
||||
if (item.count > 1) {
|
||||
item.count--
|
||||
} else {
|
||||
const index = player.inventory.findIndex(i => i.id === item.id)
|
||||
if (index > -1) {
|
||||
player.inventory.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
game.addLog(`使用了 ${item.name}`, 'info')
|
||||
selectedItem.value = null
|
||||
}
|
||||
|
||||
function sellItem() {
|
||||
if (!selectedItem.value) return
|
||||
// 已装备的物品不能出售
|
||||
if (isEquipped(selectedItem.value)) {
|
||||
game.addLog('已装备的物品需要先卸下才能出售', 'error')
|
||||
return
|
||||
}
|
||||
game.addLog(`出售了 ${selectedItem.value.name}`, 'info')
|
||||
// 出售逻辑待完善
|
||||
selectedItem.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inventory-drawer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $bg-secondary;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
color: $text-primary;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.drawer-close {
|
||||
color: $text-secondary;
|
||||
font-size: 48rpx;
|
||||
padding: 0 16rpx;
|
||||
|
||||
&:active {
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.inventory-list {
|
||||
flex: 1;
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.inventory-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 16rpx;
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
&:active {
|
||||
background-color: $bg-tertiary;
|
||||
}
|
||||
|
||||
&--equipped {
|
||||
background-color: rgba($accent, 0.15);
|
||||
border: 1rpx solid $accent;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__name {
|
||||
display: block;
|
||||
color: $text-primary;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
&__count {
|
||||
display: block;
|
||||
color: $text-secondary;
|
||||
font-size: 22rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
&__equipped-badge {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $accent;
|
||||
color: $bg-primary;
|
||||
font-size: 18rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.inventory-empty {
|
||||
padding: 80rpx;
|
||||
text-align: center;
|
||||
|
||||
&__text {
|
||||
color: $text-muted;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
padding: 24rpx;
|
||||
background-color: $bg-primary;
|
||||
border-top: 1rpx solid $border-color;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: $text-primary;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__close {
|
||||
color: $text-secondary;
|
||||
font-size: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
display: block;
|
||||
color: $text-secondary;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
&__equipped {
|
||||
display: inline-block;
|
||||
padding: 4rpx 12rpx;
|
||||
background-color: rgba($accent, 0.2);
|
||||
color: $accent;
|
||||
font-size: 22rpx;
|
||||
border-radius: 4rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
633
components/drawers/ShopDrawer.vue
Normal file
633
components/drawers/ShopDrawer.vue
Normal file
@@ -0,0 +1,633 @@
|
||||
<template>
|
||||
<view class="shop-drawer">
|
||||
<view class="drawer-header">
|
||||
<view class="header-left">
|
||||
<text class="drawer-title">{{ shopConfig.icon }} {{ shopConfig.name }}</text>
|
||||
<text class="drawer-owner">{{ shopConfig.owner }}</text>
|
||||
</view>
|
||||
<text class="drawer-close" @click="close">×</text>
|
||||
</view>
|
||||
|
||||
<!-- 玩家货币显示 -->
|
||||
<view class="currency-display">
|
||||
<text class="currency-label">你的金币:</text>
|
||||
<text class="currency-value">{{ formatCurrency(player.currency.copper) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 买/卖切换 -->
|
||||
<FilterTabs
|
||||
:tabs="modeTabs"
|
||||
:modelValue="currentMode"
|
||||
@update:modelValue="currentMode = $event"
|
||||
/>
|
||||
|
||||
<!-- 批量操作栏（仅出售模式） -->
|
||||
<view v-if="currentMode === 'sell'" class="bulk-actions">
|
||||
<view class="bulk-actions__left">
|
||||
<text class="bulk-actions__count">已选: {{ selectedItems.length }}</text>
|
||||
<text class="bulk-actions__total">总价: {{ totalSellPrice }}铜</text>
|
||||
</view>
|
||||
<view class="bulk-actions__right">
|
||||
<text
|
||||
v-if="!bulkMode"
|
||||
class="bulk-actions__link"
|
||||
@click="bulkMode = true"
|
||||
>
|
||||
批量出售
|
||||
</text>
|
||||
<template v-else>
|
||||
<text class="bulk-actions__link" @click="selectAll">全选</text>
|
||||
<text class="bulk-actions__link" @click="cancelBulk">取消</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 购买列表 -->
|
||||
<scroll-view v-if="currentMode === 'buy'" class="shop-list" scroll-y>
|
||||
<view
|
||||
v-for="item in shopItems"
|
||||
:key="item.id"
|
||||
class="shop-item"
|
||||
:class="{ 'shop-item--disabled': !canBuy(item) }"
|
||||
@click="tryBuy(item)"
|
||||
>
|
||||
<view class="shop-item__main">
|
||||
<text class="shop-item__icon">{{ item.icon || '📦' }}</text>
|
||||
<view class="shop-item__info">
|
||||
<text class="shop-item__name">{{ item.name }}</text>
|
||||
<text class="shop-item__desc">{{ item.description }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-item__right">
|
||||
<text class="shop-item__price">{{ getBuyPrice(item.id) }}铜</text>
|
||||
<text v-if="item.stock > 0" class="shop-item__stock">库存:{{ item.stock }}</text>
|
||||
<text v-else class="shop-item__stock">无限</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="shopItems.length === 0" class="shop-empty">
|
||||
<text class="shop-empty__text">商店空空如也</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 出售列表 -->
|
||||
<scroll-view v-else class="shop-list" scroll-y>
|
||||
<view
|
||||
v-for="item in sellableItems"
|
||||
:key="item.uniqueId || item.id"
|
||||
class="shop-item"
|
||||
:class="{
|
||||
'shop-item--selected': isItemSelected(item),
|
||||
'shop-item--bulk': bulkMode
|
||||
}"
|
||||
@click="handleSellItemClick(item)"
|
||||
>
|
||||
<!-- 多选复选框 -->
|
||||
<view v-if="bulkMode" class="shop-item__checkbox">
|
||||
<text v-if="isItemSelected(item)" class="checkbox-icon">✓</text>
|
||||
</view>
|
||||
<view class="shop-item__main">
|
||||
<text class="shop-item__icon">{{ item.icon || '📦' }}</text>
|
||||
<view class="shop-item__info">
|
||||
<text class="shop-item__name">{{ item.name }}</text>
|
||||
<text v-if="item.count > 1" class="shop-item__count">x{{ item.count }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="shop-item__price">{{ getSellPrice(item) }}铜</text>
|
||||
</view>
|
||||
<view v-if="sellableItems.length === 0" class="shop-empty">
|
||||
<text class="shop-empty__text">没有可出售的物品</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 批量出售按钮 -->
|
||||
<view v-if="bulkMode && selectedItems.length > 0" class="bulk-confirm-bar">
|
||||
<text class="bulk-confirm-text">出售 {{ selectedItems.length }} 件物品，获得 {{ totalSellPrice }} 铜币</text>
|
||||
<TextButton text="确认出售" type="primary" @click="confirmBulkSell" />
|
||||
</view>
|
||||
|
||||
<!-- 物品详情弹窗 -->
|
||||
<view v-if="selectedItem" class="item-detail-popup" @click="selectedItem = null">
|
||||
<view class="item-detail" @click.stop>
|
||||
<text class="item-detail__name">{{ selectedItem.name }}</text>
|
||||
<text class="item-detail__desc">{{ selectedItem.description }}</text>
|
||||
<view class="item-detail__actions">
|
||||
<TextButton
|
||||
v-if="currentMode === 'buy' && selectedItem.buyItem"
|
||||
text="购买"
|
||||
type="primary"
|
||||
@click="confirmBuy"
|
||||
/>
|
||||
<TextButton
|
||||
v-if="currentMode === 'sell' && selectedItem.sellItem"
|
||||
text="出售"
|
||||
type="primary"
|
||||
@click="confirmSell"
|
||||
/>
|
||||
<TextButton
|
||||
text="取消"
|
||||
@click="selectedItem = null"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { usePlayerStore } from '@/store/player'
|
||||
import { useGameStore } from '@/store/game'
|
||||
import { getShopConfig, getBuyPrice as calcBuyPrice, getSellPrice as calcSellPrice } from '@/config/shop.js'
|
||||
import { addItemToInventory, removeItemFromInventory } from '@/utils/itemSystem.js'
|
||||
import FilterTabs from '@/components/common/FilterTabs.vue'
|
||||
import TextButton from '@/components/common/TextButton.vue'
|
||||
|
||||
const player = usePlayerStore()
|
||||
const game = useGameStore()
|
||||
|
||||
const currentMode = ref('buy')
|
||||
const selectedItem = ref(null)
|
||||
const bulkMode = ref(false)
|
||||
const selectedItems = ref([])
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const modeTabs = [
|
||||
{ id: 'buy', label: '购买' },
|
||||
{ id: 'sell', label: '出售' }
|
||||
]
|
||||
|
||||
// 获取当前商店配置
|
||||
const shopConfig = computed(() => {
|
||||
const config = getShopConfig(player.currentLocation)
|
||||
return config || { name: '未知商店', owner: '未知', icon: '🏪', items: [] }
|
||||
})
|
||||
|
||||
// 商店可售物品
|
||||
const shopItems = computed(() => {
|
||||
const config = shopConfig.value
|
||||
if (!config.items) return []
|
||||
|
||||
return config.items
|
||||
.filter(item => item.stock === -1 || item.stock > 0)
|
||||
.map(shopItem => {
|
||||
const itemConfig = { ...shopItem }
|
||||
itemConfig.id = shopItem.itemId
|
||||
return itemConfig
|
||||
})
|
||||
})
|
||||
|
||||
// 玩家可出售物品
|
||||
const sellableItems = computed(() => {
|
||||
return (player.inventory || []).filter(item => {
|
||||
// 关键道具不能出售
|
||||
if (item.type === 'key') return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
// 计算选中物品总价
|
||||
const totalSellPrice = computed(() => {
|
||||
return selectedItems.value.reduce((total, item) => {
|
||||
return total + getSellPrice(item) * item.count
|
||||
}, 0)
|
||||
})
|
||||
|
||||
function formatCurrency(copper) {
|
||||
if (copper >= 10000) {
|
||||
const gold = Math.floor(copper / 10000)
|
||||
const silver = Math.floor((copper % 10000) / 100)
|
||||
const remaining = copper % 100
|
||||
return `${gold}金 ${silver}银 ${remaining}铜`
|
||||
} else if (copper >= 100) {
|
||||
const silver = Math.floor(copper / 100)
|
||||
const remaining = copper % 100
|
||||
return `${silver}银 ${remaining}铜`
|
||||
}
|
||||
return `${copper}铜`
|
||||
}
|
||||
|
||||
function getBuyPrice(itemId) {
|
||||
return calcBuyPrice(game, itemId)
|
||||
}
|
||||
|
||||
function getSellPrice(item) {
|
||||
return calcSellPrice(game, item.id, item.quality || 100)
|
||||
}
|
||||
|
||||
function canBuy(item) {
|
||||
const price = getBuyPrice(item.id)
|
||||
return player.currency.copper >= price
|
||||
}
|
||||
|
||||
function tryBuy(item) {
|
||||
if (!canBuy(item)) {
|
||||
game.addLog('金币不足！', 'error')
|
||||
return
|
||||
}
|
||||
selectedItem.value = {
|
||||
...item,
|
||||
buyItem: true
|
||||
}
|
||||
}
|
||||
|
||||
function trySell(item) {
|
||||
selectedItem.value = {
|
||||
...item,
|
||||
sellItem: true
|
||||
}
|
||||
}
|
||||
|
||||
// 检查物品是否被选中
|
||||
function isItemSelected(item) {
|
||||
return selectedItems.value.some(i =>
|
||||
(i.uniqueId && i.uniqueId === item.uniqueId) || i.id === item.id
|
||||
)
|
||||
}
|
||||
|
||||
// 处理出售列表点击
|
||||
function handleSellItemClick(item) {
|
||||
if (bulkMode.value) {
|
||||
// 批量模式：切换选中状态
|
||||
const index = selectedItems.value.findIndex(i =>
|
||||
(i.uniqueId && i.uniqueId === item.uniqueId) || i.id === item.id
|
||||
)
|
||||
if (index > -1) {
|
||||
selectedItems.value.splice(index, 1)
|
||||
} else {
|
||||
selectedItems.value.push(item)
|
||||
}
|
||||
} else {
|
||||
// 普通模式：显示详情
|
||||
trySell(item)
|
||||
}
|
||||
}
|
||||
|
||||
// 全选
|
||||
function selectAll() {
|
||||
selectedItems.value = [...sellableItems.value]
|
||||
}
|
||||
|
||||
// 取消批量模式
|
||||
function cancelBulk() {
|
||||
bulkMode.value = false
|
||||
selectedItems.value = []
|
||||
}
|
||||
|
||||
// 批量出售
|
||||
function confirmBulkSell() {
|
||||
if (selectedItems.value.length === 0) return
|
||||
|
||||
let totalEarned = 0
|
||||
const itemsToRemove = []
|
||||
|
||||
for (const item of selectedItems.value) {
|
||||
const price = getSellPrice(item) * item.count
|
||||
totalEarned += price
|
||||
itemsToRemove.push(item)
|
||||
}
|
||||
|
||||
// 移除所有选中的物品
|
||||
for (const item of itemsToRemove) {
|
||||
removeItemFromInventory(player, item.uniqueId || item.id)
|
||||
}
|
||||
|
||||
// 增加金币
|
||||
player.currency.copper += totalEarned
|
||||
game.addLog(`批量出售了 ${itemsToRemove.length} 件物品，获得 ${totalEarned} 铜币`, 'reward')
|
||||
|
||||
// 重置选择
|
||||
bulkMode.value = false
|
||||
selectedItems.value = []
|
||||
}
|
||||
|
||||
function confirmBuy() {
|
||||
if (!selectedItem.value) return
|
||||
|
||||
const item = selectedItem.value
|
||||
const price = getBuyPrice(item.id)
|
||||
|
||||
if (player.currency.copper < price) {
|
||||
game.addLog('金币不足！', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
// 扣除金币
|
||||
player.currency.copper -= price
|
||||
|
||||
// 添加物品
|
||||
const result = addItemToInventory(player, item.id, 1)
|
||||
|
||||
if (result.success) {
|
||||
game.addLog(`购买了 ${result.item.name}`, 'reward')
|
||||
|
||||
// 减少商店库存
|
||||
const shop = getShopConfig(player.currentLocation)
|
||||
if (shop) {
|
||||
const shopItem = shop.items.find(i => i.itemId === item.id)
|
||||
if (shopItem && shopItem.stock > 0) {
|
||||
shopItem.stock--
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
selectedItem.value = null
|
||||
}
|
||||
|
||||
function confirmSell() {
|
||||
if (!selectedItem.value) return
|
||||
|
||||
const item = selectedItem.value
|
||||
const price = getSellPrice(item)
|
||||
|
||||
// 移除物品
|
||||
const result = removeItemFromInventory(player, item.uniqueId || item.id)
|
||||
|
||||
if (result.success) {
|
||||
// 增加金币
|
||||
player.currency.copper += price
|
||||
game.addLog(`出售了 ${item.name}，获得 ${price} 铜币`, 'reward')
|
||||
}
|
||||
|
||||
selectedItem.value = null
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shop-drawer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $bg-secondary;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx;
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
display: block;
|
||||
color: $text-primary;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.drawer-owner {
|
||||
display: block;
|
||||
color: $text-secondary;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.drawer-close {
|
||||
color: $text-secondary;
|
||||
font-size: 48rpx;
|
||||
padding: 0 16rpx;
|
||||
|
||||
&:active {
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.currency-display {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background-color: rgba($accent, 0.1);
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.currency-label {
|
||||
color: $text-secondary;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.currency-value {
|
||||
color: $accent;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bulk-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12rpx 24rpx;
|
||||
background-color: rgba($bg-primary, 0.5);
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
&__count {
|
||||
color: $text-primary;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__total {
|
||||
color: $accent;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $accent;
|
||||
font-size: 24rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-confirm-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background-color: rgba($accent, 0.1);
|
||||
border-top: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.bulk-confirm-text {
|
||||
color: $text-primary;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.shop-list {
|
||||
flex: 1;
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.shop-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx;
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
&:active {
|
||||
background-color: $bg-tertiary;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background-color: rgba($accent, 0.15);
|
||||
border: 1rpx solid $accent;
|
||||
}
|
||||
|
||||
&--bulk {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid $border-color;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
background-color: $bg-secondary;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
display: block;
|
||||
color: $text-primary;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
display: block;
|
||||
color: $text-secondary;
|
||||
font-size: 22rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
&__count {
|
||||
display: block;
|
||||
color: $text-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
&__price {
|
||||
color: $accent;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__stock {
|
||||
color: $text-muted;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
color: $accent;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.shop-empty {
|
||||
padding: 80rpx;
|
||||
text-align: center;
|
||||
|
||||
&__text {
|
||||
color: $text-muted;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-detail-popup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
width: 80%;
|
||||
max-width: 500rpx;
|
||||
padding: 32rpx;
|
||||
background-color: $bg-secondary;
|
||||
border-radius: 16rpx;
|
||||
|
||||
&__name {
|
||||
display: block;
|
||||
color: $text-primary;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
display: block;
|
||||
color: $text-secondary;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user