MoeNovaClient/components/dialogs/ShopDialog.vue

<template>
  <custom-dialog 
    :visible.sync="dialogVisible" 
    title="" 
    content-width="720rpx" 
    closeImg="/static/island/UI/btn_close.png" 
    closeImgTop="0rpx" 
    @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)">
          <view class="item-card">
            <view class="new-tag" v-if="item.isNew">新品</view>
            <view class="item-left">
              <image class="item-icon" :src="item.icon" mode="aspectFit"></image>
              <text class="owned-text">已持有: {{item.owned}}</text>
            </view>
            <view class="item-info">
              <text class="item-name">{{item.name}}</text>
              <view class="item-details">
                <text class="detail-text">收获期: {{item.harvestTime}}</text>
                <text class="detail-text">成长期: {{item.growthTime}}</text>
                <text class="detail-text">产量: {{item.yield}}</text>
              </view>
              <view class="item-bottom">
                <view class="item-price">
                  <image class="currency-icon" src="/static/currency/coin.png" mode="aspectFit"></image>
                  <text>{{item.price}}</text>
                </view>
                <button class="buy-btn">购买</button>
              </view>
            </view>
          </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/seed1.png', 
            name: '草莓种子', 
            harvestTime: '160时', 
            growthTime: '60时',
            yield: '10',
            price: 100,
            owned: 3,
            isNew: true
          },
          { 
            icon: '/static/items/seed1.png', 
            name: '草莓种子', 
            harvestTime: '160时', 
            growthTime: '60时',
            yield: '10',
            price: 100,
            owned: 3,
            isNew: true
          },
          { 
            icon: '/static/items/seed1.png', 
            name: '草莓种子', 
            harvestTime: '160时', 
            growthTime: '60时',
            yield: '10',
            price: 100,
            owned: 3,
            isNew: true
          }
        ],
        1: [],
        2: []
      }
    }
  },
  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>
@import './ShopDialog.scss';
</style>