MoeNovaClient/components/dialogs/BackpackDialog.vue

<template>
  <custom-dialog 
    :visible.sync="dialogVisible" 
    title="" 
    content-width="720rpx" 
    closeImg="/static/island/UI/btn_close.png" 
    closeImgTop="120rpx" 
    background-color="transparent"
    @close="onClose"
  >
    <view class="backpack-content">
      <view class="backpack-name">背包</view>
      <view class="backpack-items">
        <view 
          class="backpack-grid" 
          v-for="index in 80" 
          :key="index"
          @click="onGridClick(index-1)"
        >
          <view 
            class="item-grid"
            :class="{'selected': selectedIndex === index-1 && items[index-1]}"
          >
            <template v-if="items[index-1]">
              <text class="count-text">{{items[index-1].count}}</text>
              <image class="item-icon" :src="items[index-1].icon" mode="aspectFit"></image>
              <text class="item-name">{{items[index-1].name}}</text>
            </template>
          </view>
        </view>
      </view>
      <view class="backpack-bottom">
        <view class="bottom-info">
          <text>{{selectedItem ? selectedItem.description : '请选择道具查看详情'}}</text>
        </view>
        <view class="bottom-actions">
          <view class="coin-info">
            <image class="currency-icon" src="/static/island/UI/wd_icon_xingyuan.png" mode="aspectFit"></image>
            <text>{{selectedItem ? selectedItem.price : 0}}</text>
          </view>
          <view class="sell-btn" :class="{'disabled': !selectedItem}" @click="onSellClick">售卖</view>
        </view>
      </view>
    </view>
  </custom-dialog>
</template>

<script>
import CustomDialog from '../CustomDialog/CustomDialog.vue'

export default {
  name: 'BackpackDialog',
  components: {
    CustomDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      selectedIndex: -1,
      items: [
        { 
          icon: '/static/island/items/item_wood1.png', 
          count: 999,
          name: '木材',
          description: '这是一个木材，可以用来制作各种物品',
          price: 100
        },
        { 
          icon: '/static/island/items/item_wood2.png', 
          count: 999,
          name: '高级木材',
          description: '这是一个高级木材，可以用来制作高级物品',
          price: 200
        },
        { 
          icon: '/static/island/items/item_mine1.png', 
          count: 999,
          name: '矿石',
          description: '这是一个矿石，可以用来制作金属物品',
          price: 150
        },
        { 
          icon: '/static/island/items/item_mine2.png', 
          count: 999,
          name: '高级矿石',
          description: '这是一个高级矿石，可以用来制作高级金属物品',
          price: 300
        },
        { 
          icon: '/static/island/items/item_axe1.png', 
          count: 999,
          name: '斧头',
          description: '这是一个斧头，可以用来砍伐树木',
          price: 500
        }
      ]
    }
  },
  computed: {
    selectedItem() {
      return this.selectedIndex >= 0 && this.selectedIndex < this.items.length 
        ? this.items[this.selectedIndex] 
        : null
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      if(val) {
        // 默认选中第一个有道具的格子
        this.selectedIndex = this.items.length > 0 ? 0 : -1
      }
    },
    dialogVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    onClose() {
      this.dialogVisible = false
    },
    onGridClick(index) {
      if(this.items[index]) {
        this.selectedIndex = index
        this.$emit('select', this.items[index])
      }
    },
    onSellClick() {
      if(!this.selectedItem) return
      
      const item = this.selectedItem
      const totalPrice = item.count * item.price
      
      uni.showModal({
        title: '确认出售',
        content: `出售${item.count}个${item.name}，会获得铃钱：${totalPrice},\n确定出售吗？`,
        confirmText: '确定',
        cancelText: '取消',
        success: (res) => {
          if(res.confirm) {
            // TODO: 处理出售逻辑
            this.$emit('sell', item)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './BackpackDialog.scss';
</style>