商品列表项

src/pages/category/category.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {reactive} from "vue";
-
+import Item from "./components/item.vue";
 const ctx = reactive({
   current: 0,
   categories: [
@@ -61,10 +61,20 @@ function switchCategory(index) {
       </scroll-view>
     </view>
 
-    <view class="flex-1 p-2 bg-white">
-      <view>
+    <view class="w-3/4 p-2 bg-white flex flex-col">
+      <text>
         {{ctx.categories[ctx.current].name}}
+      </text>
+
+      <view class="flex-1">
+        <scroll-view>
+          <view>
+            <Item img="https://www.httpbin.org/image/png" title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
+            <Item img="https://www.httpbin.org/image/png" title="测试商品" price="9999.99" oldPrice="8888.88"/>
+          </view>
+        </scroll-view>
       </view>
+
     </view>
   </view>
 </template>

src/pages/category/components/item.vue

@@ -0,0 +1,44 @@
+<script setup>
+import {defineProps} from "vue"
+
+const props = defineProps({
+  img: {
+    type: String
+  },
+  title: {
+    type: String
+  },
+  price: {
+    type: String
+  },
+  oldPrice: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <view class="flex overflow-hidden my-1">
+    <view class="w-1/4 p-2 border border-gray-200 rounded flex justify-center items-center">
+      <image :src="props.img" mode="widthFix" class="w-full h-full"/>
+    </view>
+
+    <view class="w-3/4 flex flex-col justify-between p-2">
+      <view class="min-w-0 overflow-hidden overflow-ellipsis whitespace-nowrap">
+        <text>{{ props.title }}</text>
+      </view>
+      <view>
+        <text class="text-orange-500">￥{{ props.price }}</text>
+
+        <text v-show="props.oldPrice != null" class="ml-1 text-xs text-gray-500 line-through">
+          ￥{{ props.oldPrice }}
+        </text>
+      </view>
+    </view>
+  </view>
+
+</template>
+
+<style scoped>
+
+</style>