初始化

package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.6.5",
     "element-ui": "^2.15.14",
     "nprogress": "^0.2.0",
+    "sass": "^1.68.0",
     "vant": "^2.13.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
@@ -36,7 +37,6 @@
     "eslint-plugin-vue": "^6.2.2",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
-    "node-sass": "^6.0.1",
     "sass-loader": "^10.2.0",
     "vue-template-compiler": "^2.6.11"
   }

src/components/sales-card-list.vue

@@ -7,8 +7,15 @@
           <div class="label">下单编号：<span>X125623645215</span></div>
           <div class="label">佣金：<span>300</span></div>
           <div class="label">下单时间号：<span>X125623645215</span></div>
-          <div class="label">下单时间号：<span>X125623645215</span></div>
+          <div class="label">下单时间号：<span>X12562645215</span></div>
+        </div>
+      </div>
+      <div class="conter-btn">
+        <div class="selct_all">
+          <van-checkbox class="all" v-model="allSelect" shape="square" checked-color="#FF5B00" v-if="isChecked" />
+          全选
         </div>
+        <van-button color="#FF5B00" @click="handlerSelect">确认</van-button>
       </div>
     </van-checkbox-group>
   </div>
@@ -19,7 +26,7 @@ export default {
   props: {
     tabList: {
       type: Array,
-      default: () => ([])
+      default: () => []
     },
     isChecked: {
       type: Boolean,
@@ -28,8 +35,21 @@ export default {
   },
   data () {
     return {
-      result: []
+      result: [],
+      allSelect: true
+    }
+  },
+  watch: {
+    allSelect (val) {
+      if (val) {
+        this.$refs.checkboxGroup.toggleAll(true)
+      } else {
+        this.$refs.checkboxGroup.toggleAll()
+      }
     }
+  },
+  methods: {
+    handlerSelect () { }
   }
 }
 </script>
@@ -38,22 +58,62 @@ export default {
 .card-list {
   background: #fff;
   padding: 5.3vw 5vw;
+
   .card_item {
     display: flex;
     align-items: flex-start;
-    ::v-deep .van-checkbox {
-      width: 4.8vw;
-      height: 4.8vw;
-    }
-    ::v-deep .van-checkbox {
-      ::v-deep .van-checkbox__icon {
-        font-size: 4.8vw;
+
+    .item {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      width: 92%;
+      margin-left: 1vw;
+
+      .label {
+        font-size: 3.7vw;
+        color: #999999;
+        margin-bottom: 3.2vw;
+
+        span {
+          color: #333;
+        }
       }
     }
   }
-  .item {
+
+  .conter-btn {
+    position: fixed;
     display: flex;
-    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    bottom: 0;
+    left: 0;
+    background: #fff;
+    padding: 3.2vw;
+    z-index: 66;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .selct_all {
+      display: flex;
+      align-items: center;
+      font-size: 3.7vw;
+      color: #333;
+
+      .all {
+        margin-right: 4vw;
+      }
+    }
+
+    ::v-deep .van-button {
+      width: 28vw;
+      height: 11.2vw;
+      border-radius: 1.1vw;
+    }
   }
 }
 </style>

src/router/index.js

@@ -152,6 +152,14 @@ const routes = [
     meta: {
       title: '订单销售佣金详情'
     }
+  },
+  {
+    path: '/goods-information',
+    name: 'goods-information',
+    component: () => import('@/views/goods-information/index.vue'),
+    meta: {
+      title: '商品详情'
+    }
   }
 ]
 

src/views/goods-information/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <nav-bar title="商品详情" @click-left="$router.back()"/>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/mine/index.vue

@@ -94,7 +94,7 @@ export default {
             isLink: true,
             title: '商品资料',
             value: '',
-            to: '',
+            to: '/goods-information',
             icon: 'location-o'
           },
           {