From 107005a7b7d09492b158bd57684d0e05d2ba9dd7 Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Thu, 14 May 2020 16:13:09 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shopping-cart/shopping-cart-cell.vue      |  59 +++--
 .../shopping-cart/shopping-cart-com.vue       | 203 +++++++++++++++++-
 .../shopping-cart/shopping-cart-list.vue      | 114 +++-------
 .../shopping-cart/shopping-cart-options.vue   |  73 -------
 4 files changed, 257 insertions(+), 192 deletions(-)
 delete mode 100644 src/components/shopping-cart/shopping-cart-options.vue

diff --git a/src/components/shopping-cart/shopping-cart-cell.vue b/src/components/shopping-cart/shopping-cart-cell.vue
index 553c6d8..3a0eaa6 100644
--- a/src/components/shopping-cart/shopping-cart-cell.vue
+++ b/src/components/shopping-cart/shopping-cart-cell.vue
@@ -15,7 +15,7 @@
           />
           <div class="shopping_cell_msg">
             <div class="shopping_cell_name">
-              {{ cellItem.name + ccce }}
+              {{ cellItem.name }}
               <span
                 v-if="cellItem.mapService"
                 class="tags map_service"
@@ -34,31 +34,33 @@
       <el-col :span="5">
         <div class="shopping_cell_specification">
           <div class="shopping_cell_specification_val">
-            <div class="shopping_cell_specification_val_specification">规格：访问次数：20/日，访问量：100/日</div>
-            <div class="shopping_cell_specification_val_type">申请方式：按月</div>
+            <div class="shopping_cell_specification_val_specification">规格：{{ specificationBtns[specification] }}</div>
+            <div class="shopping_cell_specification_val_type">申请方式：{{ specificationApplicationBtns[specificationApplication] }}</div>
             <div class="shopping_cell_specification_edit">
-              <el-popover placement="right" width="280" v-model="visible">
+              <el-popover placement="right" width="280" v-model="visible" @after-leave="setSpecificationPop">
                 <div>
                   <div class="shopping_cell_specification_title">规格：</div>
                   <div>
                     <el-button
                       v-for="(item, index) in specificationBtns"
                       :key="'specification' + index"
-                      :class="specification == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
+                      :class="specificationPop == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
                       size="mini"
-                    >{{ item }}</el-button>
+                      @click="changeSpecification(index)"
+                    >{{ index + 1 + ". " + item }}</el-button>
                   </div>
                   <div class="shopping_cell_specification_title">申请方式：</div>
                   <div>
                     <el-button
                       v-for="(item, index) in specificationApplicationBtns"
                       :key="'specification' + index"
-                      :class="specificationApplication == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
+                      :class="specificationApplicationPop == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
                       size="mini"
-                    >{{ item }}</el-button>
+                       @click="changeSpecificationApplication(index)"
+                    >{{ item }}购买</el-button>
                   </div>
                 </div>
-                <div style="text-align: right; margin: 0">
+                <div class="pop_footer">
                   <el-button
                     class="shopping_cell_specification_cancel"
                     size="mini"
@@ -68,7 +70,7 @@
                   <el-button
                     class="shopping_cell_specification_submit"
                     size="mini"
-                    @click="visible = false"
+                    @click="submitPop"
                   >确定</el-button>
                 </div>
                 <el-button v-if="!readOnly" circle size="mini" slot="reference">
@@ -108,9 +110,8 @@ export default {
     }
   },
   watch: {
-    cellCheck(newV, oldV) {
-      // do something
-      console.log(newV, oldV);
+    cellCheck: function(val) {
+      this.checkedItem = val;
     }
   },
   data: () => ({
@@ -121,18 +122,34 @@ export default {
     visible: false,
     specification: 1,
     specificationApplication: 0,
+    specificationPop: 1,
+    specificationApplicationPop: 0,
     specificationBtns: [
-      "1.访问次数：20/日  访问量：100/日",
-      "2.访问次数：200/日  访问量：1000/日",
-      "3.访问次数：无上限  访问量：无上限"
+      "访问次数：20/日  访问量：100/日",
+      "访问次数：200/日  访问量：1000/日",
+      "访问次数：无上限  访问量：无上限"
     ],
-    specificationApplicationBtns: ["按月购买", "按年购买"]
+    specificationApplicationBtns: ["按月", "按年"]
   }),
   computed: {},
-  watch: {},
   methods: {
     getState(val) {
       this.$emit("changeState", { state: val, index: this.cellIndex });
+    },
+    changeSpecification(val) {
+      this.specificationPop = val;
+    },
+    changeSpecificationApplication(val) {
+      this.specificationApplicationPop = val;
+    },
+    submitPop() {
+      this.specification = this.specificationPop;
+      this.specificationApplication = this.specificationApplicationPop;
+      this.visible = false;
+    },
+    setSpecificationPop() {
+      this.specificationPop = this.specification;
+      this.specificationApplicationPop = this.specificationApplication;
     }
   },
   mounted() {}
@@ -286,6 +303,10 @@ export default {
 .shopping_cell_specification_cancel {
   color: #58617a;
 }
+.pop_footer {
+  text-align: right;
+  margin: 30px 5px 5px;
+}
 </style>
 <style>
 .shopping_cell_specification_edit .el-button {
@@ -316,7 +337,7 @@ export default {
   color: #8890a7;
 }
 .shopping_cell_options .el-checkbox__input.is-checked + .el-checkbox__label {
-  color: #687087;
+  color: #586077;
 }
 .shopping_cell_options .el-checkbox__inner:hover {
   border-color: #d0d6f4;
diff --git a/src/components/shopping-cart/shopping-cart-com.vue b/src/components/shopping-cart/shopping-cart-com.vue
index e0955ad..f931e9e 100644
--- a/src/components/shopping-cart/shopping-cart-com.vue
+++ b/src/components/shopping-cart/shopping-cart-com.vue
@@ -1,32 +1,126 @@
 <template>
   <div>
     <div class="shopping_list shopping_list_all">
-      <ShoppingCartList :showHead="true" :readOnly="false" class="shopping_all_list" />
+      <div class="shopping_all_head">
+        <el-row>
+          <el-col :span="2" class="shopping_all_head_item">
+            <el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
+          </el-col>
+          <el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
+          <el-col :span="5" class="shopping_all_head_item">规格</el-col>
+          <el-col :span="4" class="shopping_all_head_item">数量</el-col>
+          <el-col :span="4" class="shopping_all_head_item">操作</el-col>
+        </el-row>
+      </div>
+      <ShoppingCartList
+        ref="shoppingList"
+        :checkShopAll="checkShopAll"
+        :list="list"
+        :checkList="checkList"
+        :readOnly="false"
+        @changeState="changeState"
+        class="shopping_all_list"
+      />
     </div>
     <div class="shopping_list shopping_list_fail">
       <div class="expired_service">已失效服务</div>
-      <ShoppingCartList :showHead="false" :readOnly="true" class="shopping_all_list" />
+      <ShoppingCartList :readOnly="true" class="shopping_all_list" />
     </div>
     <div class="shopping_list shopping_list_options">
-      <ShoppingCartOptions />
+      <div class="shopping_cart_options">
+        <el-row>
+          <el-col :span="2" class="shopping_cart_options_cell">
+            <el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
+          </el-col>
+          <el-col :span="3" class="shopping_cart_options_del">
+            <span v-if="getNum == 0" class="shopping_cart_options_del_service">删除选中服务</span>
+            <span
+              v-else
+              @click="delSelectService"
+              class="shopping_cart_options_del_service_act"
+            >删除选中服务</span>
+          </el-col>
+          <el-col :span="15" class="shopping_cart_options_num">
+            共 {{ checkList.length }} 项服务，已选择
+            <span>{{ getNum }}</span> 项
+          </el-col>
+          <el-col :span="4" class="shopping_cart_options_cell">
+            <el-button v-if="getNum == 0" :disabled="true" class="shopping_cart_options_cell_btn">一键申请</el-button>
+            <el-button v-else class="shopping_cart_options_cell_btn_act">一键申请</el-button>
+          </el-col>
+        </el-row>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
-import ShoppingCartOptions from "@/components/shopping-cart/shopping-cart-options";
 export default {
   components: {
-    ShoppingCartList,
-    ShoppingCartOptions
+    ShoppingCartList
   },
   props: {},
   data: () => ({
-    
+    checkShopAll: false,
+    checkList: [false, false, false],
+    list: [
+      {
+        id: 0,
+        name: "水路货物周转量情况",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅0",
+        state: 1,
+        mapService: 1
+      },
+      {
+        id: 1,
+        name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅1",
+        state: 1
+      },
+      {
+        id: 2,
+        name: "水路货物周转量情况水路货物周转量情况",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅2",
+        state: 1,
+        mapService: 1
+      }
+    ]
   }),
   mounted() {},
-  methods: {}
+  computed: {
+    getNum() {
+      let num = this.checkList.reduce(
+        (a, v) => (v === true ? a + 1 : a + 0),
+        0
+      );
+      return num;
+    }
+  },
+  methods: {
+    checkAll(val) {
+      this.$refs.shoppingList.setAllState(val);
+    },
+    changeState(val) {
+      console.log(val);
+      this.$set(this.checkList, val.index, val.state);
+      if (this.checkList.indexOf(false) == -1) {
+        this.checkShopAll = true;
+      } else {
+        this.checkShopAll = false;
+      }
+    },
+    delSelectService() {
+      this.checkList.forEach((item, index) => {
+        if (item === true) {
+          console.log(this.list[index]);
+        }
+      });
+    }
+  }
 };
 </script>
 <style scoped>
@@ -38,7 +132,6 @@ export default {
   margin-bottom: 20px;
 }
 .shopping_list_all {
-
 }
 .shopping_list_fail {
 }
@@ -48,7 +141,7 @@ export default {
 }
 .shopping_fail_head {
   background-color: #eff1f8;
-  height: 40px;  
+  height: 40px;
 }
 .shopping_options {
   height: 84px;
@@ -61,4 +154,92 @@ export default {
   line-height: 28px;
   background-color: #eff1f8;
 }
-</style>
\ No newline at end of file
+.shopping_cart_options {
+  height: 80px;
+  padding: 0 20px;
+  font-weight: 700;
+  line-height: 80px;
+}
+.shopping_cart_options_cell {
+  text-align: center;
+}
+.shopping_cart_options_del {
+}
+.shopping_cart_options_del_service {
+  color: #c8d0e7;
+}
+.shopping_cart_options_del_service_act {
+  cursor: pointer;
+  color: #0f2683;
+}
+.shopping_cart_options_num {
+  text-align: right;
+  font-size: 14px;
+  font-weight: 500;
+  color: #58617a;
+}
+.shopping_cart_options_num span {
+  color: #e56600;
+}
+.shopping_cart_options_cell_btn {
+  width: 90%;
+  margin: 0 10%;
+}
+.shopping_cart_options_cell_btn_act {
+  width: 90%;
+  margin: 0 10%;
+  background-color: #e56600;
+  color: #fcefd6;
+}
+.shopping_all_head {
+  background-color: #e5f0ff;
+  height: 48px;
+  padding: 0 20px;
+  font-weight: 700;
+  line-height: 48px;
+}
+.shopping_all_head_item {
+  text-align: center;
+}
+.shopping_list_page {
+  padding: 10px 20px 0;
+}
+</style>
+<style>
+.shopping_cart_options_cell .el-checkbox {
+  font-weight: 700;
+}
+.shopping_cart_options_cell .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_cart_options_cell .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_cart_options_cell .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.shopping_cart_options_cell
+  .el-checkbox__input.is-checked
+  + .el-checkbox__label {
+  color: #626de9;
+}
+.shopping_all_head_item .el-checkbox {
+  font-weight: 700;
+}
+.shopping_all_head_item .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #626de9;
+}
+</style>
diff --git a/src/components/shopping-cart/shopping-cart-list.vue b/src/components/shopping-cart/shopping-cart-list.vue
index 2bf8d5c..c99d996 100644
--- a/src/components/shopping-cart/shopping-cart-list.vue
+++ b/src/components/shopping-cart/shopping-cart-list.vue
@@ -1,22 +1,11 @@
 <template>
   <div>
-    <div v-if="showHead" class="shopping_all_head">
-      <el-row>
-        <el-col :span="2" class="shopping_all_head_item">
-          <el-checkbox v-model="checkedAll" @change="checkAll">全选</el-checkbox>
-        </el-col>
-        <el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
-        <el-col :span="5" class="shopping_all_head_item">规格</el-col>
-        <el-col :span="4" class="shopping_all_head_item">数量</el-col>
-        <el-col :span="4" class="shopping_all_head_item">操作</el-col>
-      </el-row>
-    </div>
     <div class="shopping_list_page">
       <ShoppingCartCell
         v-for="(item, index) in list"
         :cellItem="item"
         :cellIndex="index"
-        :cellCheck="checkList[index]"
+        :cellCheck="checkLists[index]"
         :key="item.id"
         :readOnly="readOnly"
         @changeState="changeState"
@@ -32,97 +21,44 @@ export default {
     ShoppingCartCell
   },
   props: {
-    showHead: {
-      type: Boolean,
-      default: false
-    },
     readOnly: {
       type: Boolean,
       default: false
+    },
+    checkShopAll: {
+      type: Boolean
+    },
+    list: {
+      type: Array
+    },
+    checkList: {
+      type: Array,
+      default: ()=> {[]}
+    }
+  },
+  watch: {
+    checkList: {
+      immediate: true, // 这句重要
+      handler(val) {
+        console.log("ss")
+        this.checkLists = val;
+      }
     }
   },
   data: () => ({
     checkedAll: false,
-    checkList: [false, false, false],
-    list: [
-      {
-        id: 0,
-        name: "水路货物周转量情况",
-        type: "基础数据服务",
-        creator: "贵州省交通运输厅0",
-        state: 1,
-        mapService: 1
-      },
-      {
-        id: 1,
-        name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
-        type: "基础数据服务",
-        creator: "贵州省交通运输厅1",
-        state: 1
-      },
-      {
-        id: 2,
-        name: "水路货物周转量情况水路货物周转量情况",
-        type: "基础数据服务",
-        creator: "贵州省交通运输厅2",
-        state: 1,
-        mapService: 1
-      }
-    ]
+    checkLists: []
   }),
   mounted() {},
   methods: {
     changeState(val) {
-      console.log(val)
-      this.checkList[val.index] = val.state;
-      console.log(this.checkList)
-      if (this.checkList.indexOf(false) == -1) {
-        this.checkedAll = true;
-      } else {
-        this.checkedAll = false;
-      }
+      this.$emit("changeState", val);
     },
-    checkAll(val) {
-      console.log(val)
-      for (let i = 0; i < this.checkList.length; i++) {
-        this.checkList[i] = val;
+    setAllState(val) {
+      for (let i = 0; i < this.checkLists.length; i++) {
+        this.$set(this.checkLists, i, val)
       }
-      console.log(this.checkList)
     }
   }
 };
 </script>
-<style scoped>
-.shopping_all_head {
-  background-color: #e5f0ff;
-  height: 48px;
-  padding: 0 20px;
-  font-weight: 700;
-  line-height: 48px;
-}
-.shopping_all_head_item {
-  text-align: center;
-}
-.shopping_list_page {
-  padding: 10px 20px 0;
-}
-</style>
-<style>
-.shopping_all_head_item .el-checkbox {
-  font-weight: 700;
-}
-.shopping_all_head_item .el-checkbox__inner:hover {
-  border-color: #626de9;
-}
-.shopping_all_head_item .el-checkbox__input.is-focus .el-checkbox__inner {
-  border-color: #626de9;
-}
-.shopping_all_head_item .el-checkbox__input.is-checked .el-checkbox__inner,
-.el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  background-color: #626de9;
-  border-color: #626de9;
-}
-.shopping_all_head_item .el-checkbox__input.is-checked + .el-checkbox__label {
-  color: #626de9;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/shopping-cart/shopping-cart-options.vue b/src/components/shopping-cart/shopping-cart-options.vue
deleted file mode 100644
index ef75f27..0000000
--- a/src/components/shopping-cart/shopping-cart-options.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div class="shopping_cart_options">
-    <el-row>
-      <el-col :span="2" class="shopping_cart_options_cell">
-        <el-checkbox v-model="checkedAll">全选</el-checkbox>
-      </el-col>
-      <el-col :span="3" class="shopping_cart_options_del">删除选中服务</el-col>
-      <el-col :span="15" class="shopping_cart_options_num">共 4 项服务，已选择 <span>3</span> 项</el-col>
-      <el-col :span="4" class="shopping_cart_options_cell">
-        <el-button class="shopping_cart_options_cell_btn">一键申请</el-button>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-  props: {},
-  data: () => ({
-    checkedAll: false
-  }),
-  mounted() {},
-  methods: {}
-};
-</script>
-<style scoped>
-.shopping_cart_options {
-  height: 80px;
-  padding: 0 20px;
-  font-weight: 700;
-  line-height: 80px;
-}
-.shopping_cart_options_cell {
-    text-align: center;
-}
-.shopping_cart_options_del {
-    color: #0f2683;
-}
-.shopping_cart_options_num {
-    text-align: right;
-    font-size: 14px;
-    font-weight: 500;
-    color: #58617a;
-}
-.shopping_cart_options_num span {
-    color: #e56600;
-}
-.shopping_cart_options_cell_btn {
-    width: 90%;
-    margin: 0 10%;
-    background-color: #e56600;
-    color: #fcefd6;
-}
-</style>
-<style>
-.shopping_cart_options_cell .el-checkbox {
-  font-weight: 700;
-}
-.shopping_cart_options_cell .el-checkbox__inner:hover {
-    border-color: #626de9;
-}
-.shopping_cart_options_cell .el-checkbox__input.is-focus .el-checkbox__inner {
-    border-color: #626de9;
-}
-.shopping_cart_options_cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    background-color: #626de9;
-    border-color: #626de9;
-}
-.shopping_cart_options_cell .el-checkbox__input.is-checked+.el-checkbox__label {
-    color: #626de9;
-}
-</style>
\ No newline at end of file
-- 
2.26.0