MoeNovaClient/components/dialogs/ShopDialog.vue

<template>
  <custom-dialog :visible.sync="dialogVisible" title="商店" @close="onClose">
    <view class="shop-content">
      <view class="shop-tabs">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          class="tab-item"
          :class="{'active': currentTab === index}"
          @click="currentTab = index"
        >
          {{tab}}
        </view>
      </view>
      <view class="shop-items">
        <view class="shop-item" v-for="(item, index) in currentItems" :key="index" @click="onItemClick(item)">
          <image class="item-icon" :src="item.icon" mode="aspectFit"></image>
          <view class="item-info">
            <text class="item-name">{{item.name}}</text>
            <text class="item-desc">{{item.description}}</text>
          </view>
          <view class="item-price">
            <image class="currency-icon" src="/static/currency/coin.png" mode="aspectFit"></image>
            <text>{{item.price}}</text>
          </view>
        </view>
      </view>
    </view>
  </custom-dialog>
</template>

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

export default {
  name: 'ShopDialog',
  components: {
    CustomDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      currentTab: 0,
      tabs: ['道具', '装备', '材料'],
      items: {
        0: [
          { icon: '/static/items/potion1.png', name: '生命药水', description: '恢复100点生命值', price: 100 },
          { icon: '/static/items/potion2.png', name: '魔法药水', description: '恢复50点魔法值', price: 150 },
          { icon: '/static/items/potion3.png', name: '体力药水', description: '恢复50点体力值', price: 120 }
        ],
        1: [
          { icon: '/static/items/weapon1.png', name: '铁剑', description: '攻击力+10', price: 500 },
          { icon: '/static/items/armor1.png', name: '皮甲', description: '防御力+5', price: 300 }
        ],
        2: [
          { icon: '/static/items/material1.png', name: '木材', description: '基础材料', price: 50 },
          { icon: '/static/items/material2.png', name: '铁矿', description: '基础材料', price: 80 }
        ]
      }
    }
  },
  computed: {
    currentItems() {
      return this.items[this.currentTab]
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    onClose() {
      this.dialogVisible = false
    },
    onItemClick(item) {
      // 处理购买逻辑
      this.$emit('buy', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-content {
  .shop-tabs {
    display: flex;
    border-bottom: 2rpx solid #eee;
    margin-bottom: 20rpx;

    .tab-item {
      flex: 1;
      text-align: center;
      padding: 20rpx 0;
      font-size: 28rpx;
      color: #666;
      position: relative;

      &.active {
        color: #007AFF;
        font-weight: 500;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: #007AFF;
          border-radius: 2rpx;
        }
      }
    }
  }

  .shop-items {
    .shop-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      border-bottom: 2rpx solid #f5f5f5;

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

      .item-info {
        flex: 1;

        .item-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 4rpx;
        }

        .item-desc {
          font-size: 24rpx;
          color: #999;
        }
      }

      .item-price {
        display: flex;
        align-items: center;
        gap: 8rpx;

        .currency-icon {
          width: 32rpx;
          height: 32rpx;
        }

        text {
          font-size: 28rpx;
          color: #FF9500;
          font-weight: 500;
        }
      }
    }
  }
}
</style>