MoeNovaClient/components/dialogs/InventoryDialog.vue

<template>
  <custom-dialog :visible.sync="dialogVisible" title="背包" @close="onClose">
    <view class="inventory-content">
      <view class="inventory-grid">
        <view class="inventory-slot" v-for="(item, index) in items" :key="index">
          <image v-if="item" :src="item.icon" mode="aspectFit" class="item-icon"></image>
          <text v-if="item && item.count > 1" class="item-count">{{item.count}}</text>
        </view>
      </view>
    </view>
  </custom-dialog>
</template>

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

export default {
  name: 'InventoryDialog',
  components: {
    CustomDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      items: [
        { icon: '/static/items/item1.png', count: 1 },
        { icon: '/static/items/item2.png', count: 5 },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
      ]
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    onClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.inventory-content {
  .inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    padding: 20rpx;
  }

  .inventory-slot {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #eee;

    .item-icon {
      width: 80rpx;
      height: 80rpx;
    }

    .item-count {
      position: absolute;
      right: 4rpx;
      bottom: 4rpx;
      font-size: 24rpx;
      color: #666;
      background: rgba(255, 255, 255, 0.8);
      padding: 2rpx 6rpx;
      border-radius: 4rpx;
    }
  }
}
</style>