i

src/pages/hotGoods/index/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+    navigationBarTitleText: '活动商品',
+  })
+  

src/pages/hotGoods/index/index.vue

@@ -0,0 +1,135 @@
+<template>
+    <view>
+        <!-- 金刚区 -->
+        <view class="top-box">
+            <view class="item">
+                <view>我的订单</view>
+            </view>
+            <view class="item">
+                <view></view>
+            </view>
+            <view class="item">
+
+            </view>
+            <view class="item">
+                <view></view>
+            </view>
+        </view>
+        <!--  商品列表  -->
+        <view class="goodBox">
+            <view
+                class="good"
+                v-for="item in list"
+                :key="item.gid"
+                @click.stop="toGoodDetails(item.gid as number)"
+            >
+                <image :src="(item.cover as string)" />
+                <view class="good-text-box">
+                    <text class="good-text">{{ item.name }} </text>
+                    <view class="good-price-box">
+                        <text class="good-text-price">
+                            ¥
+                            <text style="font-size: 20px">{{
+                                item.number
+                            }}</text>
+                            元
+                        </text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useLoad, navigateTo } from "@tarojs/taro";
+import { getActiveGoods } from "../../../api/goods";
+
+const list = ref<any>([]);
+
+useLoad(() => {
+    getList();
+});
+
+const getList = async () => {
+    const res = await getActiveGoods();
+    console.log(res);
+    list.value = res.data.data;
+};
+
+const toGoodDetails = (id: number) => {
+    navigateTo({
+        url: `/pages/goods/goods_detail/index?gid=${id}&type=1`,
+    });
+};
+</script>
+
+<style lang="scss">
+.top-box {
+    display: flex;
+    justify-content: space-between;
+    margin: 10px 20px 0 20px;
+
+    .item {
+        width: 150px;
+        height: 150px;
+        background-color: #fff;
+        border-radius: 10px;
+        text-align: center;
+        line-height: 150px;
+    }
+}
+
+.goodBox {
+    display: flex;
+    padding: 20px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .good {
+        width: 340px;
+        background-color: #fff;
+        margin-bottom: 20px;
+        border-bottom-left-radius: 15px;
+        border-bottom-right-radius: 15px;
+
+        image {
+            width: 100%;
+            height: 350px;
+        }
+
+        .good-text-box {
+            padding: 10px;
+
+            .good-text {
+                flex-shrink: 0;
+                font-size: 28px;
+                color: #333;
+                font-weight: 400;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                word-break: break-word;
+            }
+
+            .good-price-box {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-top: 10px;
+
+                .good-text-price {
+                    font-size: 28px;
+                    font-weight: bold;
+                    color: #ff0000;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 1;
+                    overflow: hidden;
+                }
+            }
+        }
+    }
+}
+</style>