i

src/pages/category/index.vue

@@ -3,21 +3,58 @@
         style="height: 100vh"
         v-model="val"
         title-scroll
-        name="tab4value"
+        ellipsis
+        :animated-time="10"
+        name="tabs"
         direction="vertical"
+        @change="tabChange"
     >
-        <nut-tab-pane v-for="item in list" :title="(item.name as string)">
-            Tab {{ item.name }}</nut-tab-pane
+        <nut-tab-pane
+            v-for="item in list"
+            :title="(item.name as string)"
+            :key="item.ID"
         >
+            <view v-if="goodList.length > 0">
+                <view
+                    class="list"
+                    v-for="(item, index) in (goodList as any)"
+                    :key="index"
+                >
+                    <view class="item">
+                        <img :src="item.cover" />
+                        <view class="right">
+                            <view class="name">{{ item.name }}</view>
+                            <view class="bom">
+                                <view class="price"
+                                    ><text style="font-size: 15px">{{
+                                        item.number
+                                    }}</text>
+                                    积分</view
+                                >
+                                <nut-button
+                                    size="mini"
+                                    type="primary"
+                                    @click.stop="
+                                        toGoodDetails(item.gid as number)
+                                    "
+                                    >去兑换</nut-button
+                                >
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <nut-empty v-else description="暂无商品"></nut-empty>
+        </nut-tab-pane>
     </nut-tabs>
 </template>
 
 <script lang="ts" setup>
 import Taro from "@tarojs/taro";
 import { ref } from "vue";
-import { getCategoryList } from "@/api/goods";
+import { getCategoryList, getCategoryGoods } from "@/api/goods";
 
-const val = ref("0");
+const val = ref(0);
 
 interface List {
     ID?: number;
@@ -26,18 +63,82 @@ interface List {
 
 const list = ref<Array<List>>([]);
 
-Taro.useLoad(() => {
-    getGoodsType();
-    console.log("load");
-});
+const goodList = ref([]);
 
-Taro.useDidShow(() => {});
+Taro.useDidShow(() => {
+    getGoodsType();
+});
 
 // 获取商品分类
 const getGoodsType = async () => {
     const res = await getCategoryList();
     list.value = res.data.data;
+
+    getData(list.value[val.value].ID as number);
+};
+
+const getData = async (id: number) => {
+    const res = await getCategoryGoods({
+        class_id: id,
+    });
+    goodList.value = res.data.data;
+};
+
+const tabChange = async () => {
+    getData(list.value[val.value].ID as number);
+};
+
+const toGoodDetails = (gid: number) => {
+    Taro.navigateTo({
+        url: `/pages/goods/goods_detail/index?gid=${gid}`,
+    });
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.list {
+    .item {
+        display: flex;
+        margin-bottom: 10px;
+        img {
+            width: 140px;
+            height: 140px;
+            border-radius: 10px;
+        }
+
+        .right {
+            flex: 1;
+            margin-left: 5px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            // text-align: right;
+
+            .name {
+                // height: 20px;
+                font-size: 28px;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                word-break: break-word;
+            }
+
+            .bom {
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-end;
+                margin-top: 10px;
+                .price {
+                    font-size: 20px;
+                    font-weight: bold;
+                    color: #ff0000;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 1;
+                    overflow: hidden;
+                }
+            }
+        }
+    }
+}
+</style>