|
|
@@ -0,0 +1,113 @@
|
|
|
+<template>
|
|
|
+ <app-view class="contract">
|
|
|
+ <Search />
|
|
|
+ <Tabs v-model:active="currentGroupId">
|
|
|
+ <template v-for="(item, index) in goodsGroups" :key="index">
|
|
|
+ <Tab :title="item.goodsgroupname" :name="item.goodsgroupid">
|
|
|
+ <table class="table" cellspacing="0" cellpadding="0">
|
|
|
+ <thead class="table-thead">
|
|
|
+ <tr class="table-row">
|
|
|
+ <th>
|
|
|
+ <div class="table-cell">代码/名称</div>
|
|
|
+ </th>
|
|
|
+ <th>
|
|
|
+ <div class="table-cell">买价/卖价</div>
|
|
|
+ </th>
|
|
|
+ <th>
|
|
|
+ <div class="table-cell">最高/最低</div>
|
|
|
+ </th>
|
|
|
+ <th>
|
|
|
+ <div class="table-cell">涨跌</div>
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody class="table-body">
|
|
|
+ <template v-for="(item, index) in goodsList" :key="index">
|
|
|
+ <tr class="table-row" @click="rowClick(item)">
|
|
|
+ <td>
|
|
|
+ <div class="table-cell table-cell--media">
|
|
|
+ <div class="table-cell__image">
|
|
|
+ <Image fit="contain" :src="getFirstImage(item.thumurls)" width="28"
|
|
|
+ height="28" round />
|
|
|
+ </div>
|
|
|
+ <div class="table-cell__info">
|
|
|
+ <span>
|
|
|
+ <b>{{ item.goodscode }}</b>
|
|
|
+ </span>
|
|
|
+ <span class="text-small">
|
|
|
+ {{ item.goodsname }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="table-cell">
|
|
|
+ <span :class="item.bidColor">
|
|
|
+ {{ handleNumberValue(item.bid) }}
|
|
|
+ </span>
|
|
|
+ <span :class="item.askColor">
|
|
|
+ {{ handleNumberValue(item.ask) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="table-cell">
|
|
|
+ <span :class="item.highestColor">
|
|
|
+ {{ handleNumberValue(item.highest) }}
|
|
|
+ </span>
|
|
|
+ <span :class="item.lowestColor">
|
|
|
+ {{ handleNumberValue(item.lowest) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="table-cell">
|
|
|
+ <span>
|
|
|
+ {{ parsePercent(item.change) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </template>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </Tab>
|
|
|
+ </template>
|
|
|
+ </Tabs>
|
|
|
+ </app-view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { shallowRef, onMounted, computed } from 'vue'
|
|
|
+import { Search, Tab, Tabs, Image } from 'vant'
|
|
|
+import { useNavigation } from '@mobile/router/navigation'
|
|
|
+import { parsePercent, handleNumberValue, getFirstImage } from '@/filters'
|
|
|
+import { useFuturesStore, useUserStore } from '@/stores'
|
|
|
+
|
|
|
+const { router } = useNavigation()
|
|
|
+const userStore = useUserStore()
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
+const currentGroupId = shallowRef(0)
|
|
|
+
|
|
|
+const goodsGroups = userStore.userData.goodsgroups.filter((e) => e.marketid === 10101)
|
|
|
+
|
|
|
+const goodsList = computed(() => futuresStore.quotationList.filter((e) => e.goodsgroupid === currentGroupId.value))
|
|
|
+
|
|
|
+const rowClick = (row: Model.GoodsQuote) => {
|
|
|
+ router.push({
|
|
|
+ name: 'contract-goods-detail',
|
|
|
+ query: {
|
|
|
+ id: row.goodsid
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const [firstGroup] = goodsGroups
|
|
|
+ currentGroupId.value = firstGroup ? firstGroup.goodsgroupid : 0
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|