提交一波半成品

wxmp/src/App.vue

@@ -14,7 +14,7 @@ export default {
 /*每个页面公共css */
 
 @each $padMar, $pm in (mar:margin, pad:padding) {
-  @each $v in (8, 10, 16, 20, 32, 48, 64) {
+  @each $v in (8, 10, 16, 20, 32, 48, 64, 80) {
     @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
       .#{$padMar}-#{$pos+$v} {
         #{$pm}-#{$p}: #{$v}px

wxmp/src/manifest.json

@@ -8,7 +8,11 @@
   "mp-weixin": {
     "appid": "wx68ef6cfaa104652a",
     "setting": {
-      "urlCheck": false
+      "urlCheck": false,
+      "enhance": true
+    },
+    "optimization": {
+      "subPackages": true
     },
     "usingComponents": true
   },

wxmp/src/pages/home.vue

@@ -2,8 +2,21 @@
   <section class="home">
     <uni-search-bar class="sticky-t" placeholder="搜索商品" cancelText="更多" @cancel="" radius="100" @input="handleSearch"/>
     <ai-tabs class="fixedTabs" :tabs="indexList" vertical v-model="currentType" @click="handleType"/>
-    <div class="pad-l64">
-
+    <div class="pad-l80 pad-t64">
+      <!--      <uni-card isFull :border="false" title="示例产品" subTitle="规格:8mmX10mm" extra="查看详情"-->
+      <!--                thumbnail="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"/>-->
+      <uni-list-item title="示例产品" note="规格:8mmX10mm" thumbSize="lg" thumb="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" @click="handleDetail"
+                     clickable>
+        <template v-slot:footer>
+          <div class="flex center">
+            <div class="mar-r8">2.60</div>
+            <uni-icons type="cart" size="28" @click.stop="handleAdd2Cart"/>
+          </div>
+        </template>
+      </uni-list-item>
+      <uni-list-item title="示例产品" note="规格:8mmX10mm" thumbSize="lg" thumb="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" rightText="2.60元"/>
+      <uni-list-item title="示例产品" note="规格:8mmX10mm" thumbSize="lg" thumb="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" rightText="2.60"/>
+      <uni-list-item title="示例产品" note="规格:8mmX10mm" thumbSize="lg" thumb="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" rightText="￥2.60"/>
     </div>
     <ai-gap h="50"/>
     <uni-goods-nav class="fixed-b" @click="handleGoodNav"/>
@@ -13,6 +26,7 @@
 <script>
 import AiTabs from "../components/AiTabs";
 import AiGap from "../components/AiGap";
+import List from "../utils/list";
 
 export default {
   name: "home",
@@ -21,12 +35,13 @@ export default {
     return {
       indexList: ["全部", "螺丝", "螺母", "平垫", "弹垫", "钢丝绳", "铆钉", "工具", "劳保", "其他"],
       currentType: 0,
-      list: []
+      products: null,
     }
   },
   methods: {
     getList() {
-
+      this.products = new List("/api/product/list")
+      this.products.init()
     },
     handleGoodNav() {
 
@@ -35,15 +50,20 @@ export default {
     },
     handleSearch() {
 
+    },
+    handleAdd2Cart() {
+      this.$toast("加入购物车")
+    },
+    handleDetail(e) {
+      console.log(e)
+      this.$toast("查看详情")
     }
   },
   onShow() {
-    this.current = 1
     this.getList()
   },
   onReachBottom() {
-    this.current++
-    this.getList()
+    this.products?.loadMore()
   }
 }
 </script>
@@ -58,6 +78,8 @@ export default {
     height: calc(100vh - 100px);
     overflow-y: auto;
     font-size: 12px;
+    z-index: 202301111557;
+    background: #fff;
   }
 }
 </style>