优化服务列表下单按钮

src/pages/service/list.vue

@@ -19,7 +19,7 @@
                     <text class="text">{{ cartCount }}</text>
                 </view>
             </view>
-            <view class="order-btn" @click="toCart">
+            <view class="order-btn" :class="{ active: canUse }" @click="toCart">
                 <text class="text">去下单</text>
             </view>
         </view>
@@ -37,7 +37,7 @@ export default {
             utils: this.$utils,
             pageConfig: {},
             data: [],
-
+            canUse: false,
             currentId: 0,
         };
     },
@@ -54,18 +54,7 @@ export default {
         }),
     },
     onLoad(e) {
-        this.pageConfig = getApp().globalData.pageConfig;
+        this.initPage(e);
-        if (this.isLogin) {
-            this.$store.dispatch("cart/updateCount");
-            this.$store.dispatch("cart/briefCart");
-        }
-
-        if (!e.id) {
-            this.$utils.toast("参数错误");
-            return;
-        }
-        this.currentId = e.id;
-        this.loadList(this.currentId);
     },
     onShow() {},
     onReady() {},
@@ -73,7 +62,30 @@ export default {
     onPullDownRefresh() {},
     onShareTimeline() {},
     onShareAppMessage() {},
+    watch: {
+        cartCount(count) {
+            this.canUse = count > 0;
+        },
+    },
     methods: {
+        /**
+         * 初始化页面
+         */
+        initPage(e) {
+            this.pageConfig = getApp().globalData.pageConfig;
+            if (this.isLogin) {
+                this.$store.dispatch("cart/updateCount");
+                this.$store.dispatch("cart/briefCart");
+            }
+            this.canUse = this.cartCount > 0;
+            if (!e.id) {
+                return this.$utils.toast("参数错误");
+            }
+            this.currentId = e.id;
+            // 初始化列表
+            this.data = [];
+            this.loadList(this.currentId);
+        },
         /**
          * 加载列表
          */
@@ -134,10 +146,8 @@ export default {
          * 去下单
          */
         toCart() {
-            if (this.cartCount > 0) {
+            if (this.canUse) {
                 this.$utils.toPage("/pages/service/cart");
-            } else {
-                this.$utils.toast("请添加服务到购物车");
             }
         },
     },
@@ -188,13 +198,17 @@ export default {
         width: 300rpx;
         height: 75rpx;
         text-align: center;
-        background: linear-gradient(-90deg, #8194f2, #4c60c1);
         border-radius: 38rpx;
+        background: #e0e0e0;
+        transition: all 0.35s;
         .text {
             font-size: 30rpx;
             color: #ffffff;
             line-height: 75rpx;
         }
     }
+    .order-btn.active {
+        background: linear-gradient(-90deg, #8194f2, #4c60c1);
+    }
 }
 </style>