ark-shop-tools/ui/src/page/back/ShopItemView2.vue

<template>
  <div style="margin: 10px;border: #dddddd solid 1px;padding: 10px">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all">
        <el-table :data="shopItems" border stripe>
          <el-table-column prop="Name" label="商品名称"></el-table-column>
          <el-table-column prop="data.Description" label="商品描述"></el-table-column>
          <el-table-column prop="data.Price" label="商品价格"></el-table-column>
          <el-table-column prop="data.Type" label="商品类型">
            <template #default="scope">
              <el-text>{{ getTypeNameByType(scope.row.data.Type) }}</el-text>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="物品" name="item">
        <ShopItemsComponent v-if="activeName=='item'"/>
      </el-tab-pane>
      <el-tab-pane label="恐龙" name="dino">
        <ShopDinoComponent v-if="activeName=='dino'"/>
      </el-tab-pane>
      <el-tab-pane label="信标" name="beacon">
        <ShopBeaconComponent v-if="activeName=='beacon'"/>
      </el-tab-pane>
      <el-tab-pane label="经验" name="experience">
        <ShopExperienceComponent v-if="activeName=='experience'"/>
      </el-tab-pane>
      <el-tab-pane label="技能点？" name="unlockengram">
        <ShopUnlockengramComponent v-if="activeName=='unlockengram'"/>
      </el-tab-pane>
      <el-tab-pane label="命令" name="command">
        <ShopCommandsComponent v-if="activeName=='command'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {TabsPaneContext} from "element-plus";
import {GetShopItems, ShopData, ShopItem} from "../../api/ARKShopItemAPI";
import {BaseData} from "../../api/ConfigFile";
import ShopItemsComponent from "../../components/ShopItemsComponent.vue";
import ShopCommandsComponent from "../../components/ShopCommandsComponent.vue";
import ShopDinoComponent from "../../components/ShopDinoComponent.vue";
import ShopBeaconComponent from "../../components/ShopBeaconComponent.vue";
import ShopExperienceComponent from "../../components/ShopExperienceComponent.vue";
import ShopUnlockengramComponent from "../../components/ShopUnlockengramComponent.vue";
import router from "../../router";

let activeName = ref<string>('all')

let shopItems = ref<BaseData<ShopData>[]>([])

initRouterActiveName()

function initRouterActiveName() {
  let an = router.currentRoute.value.params.activeName
  if (an) {
    activeName.value = an.toString()
  }
}

function replay() {
  let type = activeName.value
  if (activeName.value == "all") {
    type = ""
  }
  shopItems.value = []
  GetShopItems(type).then(res => {
    if (res.code == 200) {
      if (type == "") {
        for (let item in res.data) {
          shopItems.value.push(new BaseData(item, res.data[item]))
        }
      }
      if (type == "item") {
        for (let item in res.data) {
          shopItems.value.push(new BaseData(item, res.data[item] as ShopItem))
        }
      }
      if (type == "dino") {
        for (let item in res.data) {
          shopItems.value.push(new BaseData(item, res.data[item] as ShopData))
        }
      }
      if (type == "beacon") {
        for (let item in res.data) {
          shopItems.value.push(new BaseData(item, res.data[item] as ShopData))
        }
      }
      if (type == "experience") {
        for (let item in res.data) {
          shopItems.value.push(new BaseData(item, res.data[item] as ShopData))
        }
      }
      if (type == "unlockengram") {
        for (let item in res.data) {
          shopItems.value.push(new BaseData(item, res.data[item] as ShopData))
        }
      }
      if (type == "command") {
        for (let item in res.data) {
          shopItems.value.push(new BaseData(item, res.data[item] as ShopData))
        }
      }
    }
  })
}

replay()

function getTypeNameByType(type: string): string {
  switch (type) {
    case "item":
      return "物品"
    case "dino":
      return "恐龙"
    case "beacon":
      return "信标"
    case "experience":
      return "经验"
    case "unlockengram":
      return "技能点"
    case "command":
      return "命令"
    default:
      return ""
  }

}

const handleClick = (tab: TabsPaneContext) => {
  activeName.value = tab.props.name+""
  router.push({path: "/back/shopItem/"+tab.props.name})
  replay()
}


</script>

<style scoped lang="scss">

</style>