增加分类页面的拖拽购物车图标

src/components/layout/layout.vue

@@ -126,6 +126,7 @@ export default {
 
 <style scoped lang="less">
 .page-layout {
+    position: relative;
     max-width: 750px;
     width: 100%;
     margin: 0 auto;

src/pages.json

@@ -119,7 +119,7 @@
 				"text": "联保"
 			},
 			{
-				"pagePath": "pages/order/cart",
+				"pagePath": "pages/auth/auth",
 				"iconPath": "static/temp/tabbar/4.png",
 				"selectedIconPath": "static/temp/tabbar/4a.png",
 				"text": "订单"

src/pages/order/cart.vue

@@ -1,6 +1,6 @@
 <template>
     <app-layout headerBackgroundColor="#00418c" textColor="light">
-        购物车
+        <view class="cart-container"> </view>
     </app-layout>
 </template>
 
@@ -9,7 +9,40 @@ import AppLayout from "@/components/layout/layout";
 export default {
     name: "order-cart",
     data() {
-        return {};
+        return {
+            list: [
+                {
+                    id: 1,
+                    name: "空调安装",
+                    list: [
+                        {
+                            id: 1,
+                            name: "格力空调安装",
+                            icon: require("@/static/temp/cate/1.png"),
+                            buyNumber: 1,
+                        },
+                        {
+                            id: 2,
+                            name: "美的空调安装",
+                            icon: require("@/static/temp/cate/1.png"),
+                            buyNumber: 1,
+                        },
+                    ],
+                },
+                {
+                    id: 2,
+                    name: "管道疏通",
+                    list: [
+                        {
+                            id: 3,
+                            name: "厨房下水道",
+                            icon: require("@/static/temp/cate/1.png"),
+                            buyNumber: 1,
+                        },
+                    ],
+                },
+            ],
+        };
     },
     components: {
         AppLayout,

src/pages/service/cate.vue

@@ -17,6 +17,22 @@
                 @clickItem="clickItem"
             />
         </view>
+        <movable-area class="cart-icon-box">
+            <movable-view
+                class="cart-icon-view"
+                direction="all"
+                :x="position.x"
+                :y="position.y"
+                @click="$utils.toPage('/pages/order/cart')"
+            >
+                <view class="cart-icon">
+                    <text class="iconfont icon-gouwuche"></text>
+                </view>
+                <view class="cart-number">
+                    <text class="text">99</text>
+                </view>
+            </movable-view>
+        </movable-area>
     </app-layout>
 </template>
 
@@ -24,10 +40,12 @@
 import AppLayout from "@/components/layout/layout";
 import AppCate from "@/components/cate/cate";
 import WidgetSearch from "@/components/widgets/search";
+import { mapState } from "vuex";
 export default {
     name: "service-cate",
     data() {
         return {
+            position: { x: 300, y: 1000 },
             data: [
                 {
                     id: 1,
@@ -86,7 +104,23 @@ export default {
         AppCate,
         WidgetSearch,
     },
-    onLoad() {},
+    computed: {
+        ...mapState({
+            config: (state) => state.system.config,
+        }),
+    },
+    onLoad() {
+        let x = this.config.windowWidth - this.$utils.rpx2px(94);
+        let y = this.config.windowHeight - this.$utils.rpx2px(94);
+        // H5平台减去tabBar高度
+        // #ifdef H5
+        y = y - this.$utils.rpx2px(100);
+        // #endif
+        this.position = {
+            x: x - this.$utils.rpx2px(20),
+            y: y - this.$utils.rpx2px(40),
+        };
+    },
     onShow() {},
     onReady() {},
     onReachBottom() {},
@@ -107,4 +141,46 @@ export default {
     justify-content: center;
     padding-bottom: 30rpx;
 }
+.cart-icon-box {
+    z-index: 15;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    .cart-icon-view {
+        position: relative;
+        pointer-events: auto;
+        width: 94rpx;
+        height: 94rpx;
+        border-radius: 50%;
+        box-sizing: border-box;
+        border: 2rpx solid #4b65ed;
+        background-color: #ffffff;
+        text-align: center;
+    }
+    .cart-icon {
+        .iconfont {
+            color: #4b65ed;
+            font-size: 60rpx;
+            line-height: 94rpx;
+        }
+    }
+    .cart-number {
+        position: absolute;
+        top: -12rpx;
+        right: -14rpx;
+        width: 40rpx;
+        height: 40rpx;
+        background-color: #ec7655;
+        border-radius: 50%;
+        font-size: 0;
+        .text {
+            font-size: 24rpx;
+            line-height: 40rpx;
+            color: #ffffff;
+        }
+    }
+}
 </style>