购物车基本逻辑理顺

wxmp/src/pages/AppCart.vue

@@ -1,23 +1,58 @@
 <template>
   <section class="AppCart">
-
+    <uni-list>
+      <uni-list-item title="示例产品" note="规格:8mmX10mm" thumbSize="lg" thumb="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" :showArrow="false">
+        <template v-slot:footer>
+          <uni-number-box class="numberBox" :min="0"/>
+        </template>
+      </uni-list-item>
+    </uni-list>
+    <ai-gap h="80"/>
+    <uni-goods-nav class="fixed-b" fill @buttonClick="handleBuy" :buttonGroup="btnGroup" :options="options" @click="handleOptions"/>
   </section>
 </template>
 
 <script>
+import List from "../utils/list";
+
 export default {
   name: "AppCart",
   appName: "购物车",
   data() {
-    return {}
+    return {
+      items: null,
+      btnGroup: [{text: '立即购买', backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)', color: '#fff'}],
+      options: [
+        {text: "店铺", icon: "shop", handler: () => uni.reLaunch({url: "./home"})},
+        {text: "清空", icon: "clear", handler: () => 0},
+      ]
+    }
   },
-  methods: {},
+  methods: {
-  created() {
+    getList() {
+      this.items = new List("/api/cart/list")
+      this.items.init()
+    },
+    handleBuy() {
+
+    },
+    handleOptions({content}) {
+      content.handler?.()
+    }
+  },
+  onShow() {
+    uni.hideTabBar()
+  },
+  onReachBottom() {
+    this.items?.loadMore()
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .AppCart {
+  .numberBox {
+    align-self: center;
+  }
 }
 </style>

wxmp/src/pages/home.vue

@@ -41,9 +41,6 @@ export default {
     getList() {
       this.products = new List("/api/product/list")
       this.products.init()
-    },
-    handleGoodNav() {
-
     },
     handleType() {
     },
@@ -59,6 +56,7 @@ export default {
     }
   },
   onShow() {
+    uni.showTabBar()
     this.getList()
   },
   onReachBottom() {