feat: 商品分类列表实现购物车

pages/product/list.vue

@@ -132,6 +132,16 @@
         </movable-view>
       </movable-area>
     </view>
+
+     <view
+      class="diy_goods_carts"
+	    @click="gopage(`/pages/index/cart?category_id=${shopInfo.category_id}&store_id=${shopInfo.store_id}`)"
+    >
+      <view class="box">
+        <image class="icon" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_shop.png" />
+        <text class="icon_badge">{{ goodsNum }}</text>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -150,6 +160,8 @@ import TpSearch from "@/components/tp-search/tp-search";
 export default {
   data() {
     return {
+      goodsNum: 0,
+
       options: {},
       viewtype: 1,
 
@@ -238,7 +250,16 @@ export default {
     "shopInfo",
     "userInfo",
     "hasLogin",
+    "cartNum",
   ]),
+   watch: {
+    cartNum: {
+      handler(newVal) {
+        this.goodsNum = newVal;
+      },
+      immediate: true,
+    },
+  },
   mounted() {
     this.initReturnPos();
 
@@ -352,6 +373,11 @@ export default {
       "forceUserInfo",
       "getUserInfo",
     ]),
+    gopage(url){
+			 this.$.navigateTo({
+          url
+        });
+		},
     initReturnPos: function () {
       let view = uni.createSelectorQuery().in(this).select(".movableArea");
       let that = this;
@@ -614,4 +640,61 @@ export default {
 .active {
   background-color: #c0a080;
 }
+
+ .diy_goods_carts {
+	position: fixed;
+	right: 24rpx;
+	bottom: 240rpx;
+  z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    flex: 1;
+    color: #666;
+    text-align: center;
+	background: #fff;
+	border-radius: 100%;
+	padding: 12rpx;
+	box-shadow: 2rpx 4rpx 20rpx rgba(0,0,0,0.3);
+
+    .icon {
+      width: 48rpx;
+      height: 48rpx;
+      display: block;
+    }
+
+    .desc {
+      font-size: 24rpx;
+      line-height: 14rpx;
+    }
+
+    .icon_badge {
+      display: block;
+      position: absolute;
+      right: -5px;
+      top: -5px;
+      text-align: center;
+      line-height: 24rpx;
+      font-size: 24rpx;
+      padding: 4rpx 10rpx;
+      border-radius: 20rpx;
+      color: #fff;
+      background: #dd524d;
+    }
+
+    .box {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 10rpx;
+    }
+
+    &.current {
+       color: #dd524d;
+       font-weight: 900;
+    }
+  }
 </style>