MoeNovaClient/components/dialogs/ShopDialog.vue

<template>
  <custom-dialog 
    :visible.sync="dialogVisible" 
    title="" 
    content-width="720rpx" 
    closeImg="/static/island/UI/btn_close.png" 
    closeImgTop="50rpx" 
    background-color="transparent"
    @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-header"></view>
      <view class="shop-name">{{shopName}}</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">
              <view class="item-grid">
                <image class="item-icon" :src="item.icon" mode="aspectFit"></image>
                <text class="owned-text">已有: {{item.owned}}</text>
              </view>
            </view>
            <view class="item-center">
              <text class="item-name">{{item.name}}</text>
              <view class="item-details">
                <text class="detail-text">{{item.detail}}</text>
              </view>
            </view>
            <view class="item-right">
              <view class="buy-btn">
                <view class="item-price">
                  <image class="currency-icon" src="/static/island/UI/wd_icon_xingyuan.png" mode="aspectFit"></image>
                  <text>{{item.price}}</text>
                </view>
              </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
    },
    shopName: {
      type: String,
      default: '商店'
    }
  },
  data() {
    return {
      dialogVisible: false,
      currentTab: 0,
      tabs: ['种子', '道具', '钻石'],
      items: {
        0: [
          { 
            icon: '/static/island/items/item_wood1.png', 
            name: '草莓种子', 
            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
            price: 100,
            owned: 3,
            isNew: false
          },
          { 
            icon: '/static/island/items/item_wood2.png', 
            name: '草莓种子', 
            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
            price: 100,
            owned: 3,
            isNew: false
          },
          { 
            icon: '/static/island/items/item_mine1.png', 
            name: '草莓种子', 
            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
            price: 100,
            owned: 3,
            isNew: false
          },
          { 
            icon: '/static/island/items/item_mine2.png', 
            name: '铁矿石', 
            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
            price: 100,
            owned: 3,
            isNew: false
          },
          { 
            icon: '/static/island/items/item_axe1.png', 
            name: '斧头', 
            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
            price: 100,
            owned: 3,
            isNew: false
          }
        ],
        1: [
          { 
            icon: '/static/island/items/item_wood1.png', 
            name: '杂木材', 
            detail: '普通木材，用来造普通的东西',
            price: 100,
            owned: 3,
            isNew: false
          },
          { 
            icon: '/static/island/items/item_wood2.png', 
            name: '松木材', 
            detail: '松树木材，比一般木材硬一点，可以用来造强度更好的东西',
            price: 100,
            owned: 3,
            isNew: false
          },
          { 
            icon: '/static/island/items/item_mine1.png', 
            name: '石材', 
            detail: '匀称规整的石头，适合用来造房子和石器',
            price: 100,
            owned: 3,
            isNew: false
          },
          { 
            icon: '/static/island/items/item_mine2.png', 
            name: '铁矿石', 
            detail: '铁矿石，可以练出铁锭',
            price: 100,
            owned: 3,
            isNew: false
          },
          { 
            icon: '/static/island/items/item_blueprint1.png', 
            name: '斧头图纸', 
            detail: '制造斧头的图纸，购买学习后可以制作斧头',
            price: 100,
            owned: 3,
            isNew: false
          }
        ],
        2: []
      }
    }
  },
  computed: {
    currentItems() {
      return this.items[this.currentTab]
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('update:visible', val)
    },
    shopName: {
      immediate: true,
      handler(val) {
        if (val === '材料商店') {
          this.currentTab = 1
        } else {
          this.currentTab = 0
        }
      }
    }
  },
  methods: {
    onClose() {
      this.dialogVisible = false
    },
    onItemClick(item) {
      this.$emit('buy', item)
    }
  }
}
</script>

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