From 7fa5db70ca49598f74d0eec98a8d9f3cf135f420 Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Fri, 15 May 2020 12:13:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=B4=AD=E7=89=A9=E8=BD=A6?=
 =?UTF-8?q?=E4=B8=AD=E9=80=BB=E8=BE=91=E6=B7=B7=E4=B9=B1=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=AF=BC=E8=88=AA=E6=A0=8F=E4=B8=AD?=
 =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/shopping_cart_list.json                  |  41 ++
 src/components/commodity-cell.vue             |   2 +-
 src/components/menu.vue                       | 411 ++++++++++++------
 .../shopping-cart/shopping-cart-cell.vue      |  84 +++-
 .../shopping-cart/shopping-cart-com.vue       |  45 +-
 .../shopping-cart/shopping-cart-list.vue      |   8 +
 6 files changed, 440 insertions(+), 151 deletions(-)
 create mode 100644 docs/shopping_cart_list.json

diff --git a/docs/shopping_cart_list.json b/docs/shopping_cart_list.json
new file mode 100644
index 0000000..47fcbc1
--- /dev/null
+++ b/docs/shopping_cart_list.json
@@ -0,0 +1,41 @@
+{
+    "data": {
+        "list": [
+            {
+                "id": 0,
+                "name": "水路货物周转量情况",
+                "type": "基础数据服务",
+                "creator": "贵州省交通运输厅0",
+                "state": 1,
+                "mapService": 1,
+                "num": 2,
+                "checkedSubscription": false,
+                "specification": 1,
+                "specificationApplication": 2
+            },
+            {
+                "id": 1,
+                "name": "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
+                "type": "基础数据服务",
+                "creator": "贵州省交通运输厅1",
+                "state": 1,
+                "num": 2,
+                "checkedSubscription": false,
+                "specification": 1,
+                "specificationApplication": 2
+            },
+            {
+                "id": 2,
+                "name": "水路货物周转量情况水路货物周转量情况",
+                "type": "基础数据服务",
+                "creator": "贵州省交通运输厅2",
+                "state": 1,
+                "mapService": 1,
+                "num": 2,
+                "checkedSubscription": true,
+                "specification": 1,
+                "specificationApplication": 2
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/components/commodity-cell.vue b/src/components/commodity-cell.vue
index 5258723..d7b5605 100644
--- a/src/components/commodity-cell.vue
+++ b/src/components/commodity-cell.vue
@@ -150,7 +150,7 @@ export default {
   font-size: 12px;
   font-weight: 500;
   line-height: 12px;
-  border-radius: 15px;
+  border-radius: 4px;
   position: relative;
   top: -2px;
 }
diff --git a/src/components/menu.vue b/src/components/menu.vue
index 0c7d2f4..75d8877 100644
--- a/src/components/menu.vue
+++ b/src/components/menu.vue
@@ -1,140 +1,307 @@
 <template>
-    <div class="menu">
-        <img src="../assets/imgs/home_img_logo.png" alt="" class="logo">
-        <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
-            <span class="user">用户</span>
-            <img src="../assets/imgs/home_ic_user.png" alt="" class="user_pic">
-            <div class="user_menu">
-                <div v-for="(item,index) in user_arr" :key="index+700" @click="gotopage(index)">{{item}}</div>
-            </div>
-            <div class="sj"></div>
+  <div class="menu">
+    <img src="../assets/imgs/home_img_logo.png" alt class="logo" />
+    <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
+      <span class="user">用户</span>
+      <img src="../assets/imgs/home_ic_user.png" alt class="user_pic" />
+      <div class="user_menu">
+        <div v-for="(item,index) in user_arr" :key="index+700" @click="gotopage(index)">{{item}}</div>
+      </div>
+      <div class="sj"></div>
+    </div>
+    <div style="float:right;cursor: pointer;position:relative;" class="shop_hover">
+      <div class="number">99+</div>
+      <img src="../assets/imgs/home_ic_shop.png" alt class="car" />
+      <div class="shop_menu">
+        <div class="shop_list_title">最近加入的服务：</div>
+        <div
+          v-for="(item,index) in shopping_list"
+          :key="'shopping' + index"
+          class="shop_list_cell shop_line"
+        >
+          <img
+            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+            class="shop_img"
+          />
+          <div class="shop_cell_msgs">
+            <p @click="getDetail(item.id)" class="shop_cell_name over_one">{{ item.name }}</p>
+            <p class="shop_cell_msg bover_one">{{ item.type }}</p>
+            <p class="shop_cell_msg over_one">{{ item.creator }}</p>
+          </div>
+          <div>
+            <img @click="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
+          </div>
         </div>
-        <div class="number">99+</div>
-        <img src="../assets/imgs/home_ic_shop.png" alt="" class="car">
-        
-        <div style="float:right">
-            <div v-for="(item,index) in menu_arr" :key="index+200" class="menu_box" @click="now_menu = index" :style="now_menu==index?{color:'#fff'}:{}">{{item}}
-                 <div class="bottom_show" v-if="now_menu==index"></div>
-            </div>
+        <div class="shop_footer">
+          <el-button @click="settlement" size="small" class="shop_settlement">去购物车申请结算</el-button>
         </div>
-       
+      </div>
+      <div class="shop_sj"></div>
+    </div>
 
+    <div style="float:right">
+      <div
+        v-for="(item,index) in menu_arr"
+        :key="index+200"
+        class="menu_box"
+        @click="now_menu = index"
+        :style="now_menu==index?{color:'#fff'}:{}"
+      >
+        {{item}}
+        <div class="bottom_show" v-if="now_menu==index"></div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    data(){
-        return{
-            menu_arr:['工作台','技术支持','服务超市'],
-            now_menu:0,
-            user_arr:['个人档案','消息通知','收银中心','关于BD-aPaaS','退出登录'],
+  data() {
+    return {
+      menu_arr: ["工作台", "技术支持", "服务超市"],
+      now_menu: 0,
+      user_arr: [
+        "个人档案",
+        "消息通知",
+        "收银中心",
+        "关于BD-aPaaS",
+        "退出登录"
+      ],
+      shopping_list: [
+        {
+          id: 0,
+          name: "水路货物周转量情况",
+          type: "基础数据服务",
+          creator: "贵州省交通运输厅0",
+          state: 1,
+          mapService: 1,
+          num: 2,
+          checkedSubscription: false,
+          specification: 1,
+          specificationApplication: 2
+        },
+        {
+          id: 1,
+          name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
+          type: "基础数据服务",
+          creator: "贵州省交通运输厅1",
+          state: 1,
+          num: 2,
+          checkedSubscription: false,
+          specification: 1,
+          specificationApplication: 2
+        },
+        {
+          id: 2,
+          name: "水路货物周转量情况水路货物周转量情况",
+          type: "基础数据服务",
+          creator: "贵州省交通运输厅2",
+          state: 1,
+          mapService: 1,
+          num: 2,
+          checkedSubscription: true,
+          specification: 1,
+          specificationApplication: 2
         }
+      ]
+    };
+  },
+  methods: {
+    gotopage(n) {
+      console.log(n);
     },
-    methods:{
-        gotopage(n){
-            console.log(n);
-        }
+    settlement() {
+      this.$router.push({name: "shoppingCart"});
+    },
+    deleteItem() {},
+    getDetail() {
+        // if you want goto detail page, you should give me the type at first
     }
-}
+  }
+};
 </script>
 
 <style scoped>
-.menu{
-    width: 100%;
-    height: 84px;
-    background-color: #0f2683;
-    color: #8390ee;
-    line-height: 84px;
-
+.menu {
+  width: 100%;
+  height: 84px;
+  background-color: #0f2683;
+  color: #8390ee;
+  line-height: 84px;
+}
+.logo {
+  float: left;
+  margin: 30px 0 0 40px;
+}
+.user {
+  float: right;
+  margin-right: 113px;
+  font-size: 16px;
+}
+.user_pic {
+  float: right;
+  margin-right: 15px;
+  margin-top: 30px;
+}
+.number {
+  float: right;
+  margin-right: 43px;
+  margin-top: 30px;
+  width: 40px;
+  height: 22px;
+  background-color: #e56600;
+  border-radius: 11px;
+  color: #fcefd6;
+  line-height: 22px;
+  text-align: center;
+}
+.car {
+  float: right;
+  margin-right: 15px;
+  margin-top: 30px;
+}
+.menu_box {
+  float: right;
+  width: 185px;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+}
+.menu_box:nth-of-type(1) {
+  margin-right: 52px;
+}
+.bottom_show {
+  width: 24px;
+  height: 5px;
+  background-color: #e56600;
+  border-radius: 3px;
+  position: absolute;
+  bottom: 0px;
+  left: calc(50% - 12px);
+}
+.user_menu {
+  width: 135px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 8px;
+  position: absolute;
+  top: 80px;
+  left: -20px;
+  overflow: hidden;
+  display: none;
+  z-index: 1;
+}
+.shop_menu {
+  width: 280px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 8px;
+  position: absolute;
+  top: 80px;
+  left: -20px;
+  overflow: hidden;
+  display: none;
+  z-index: 1;
+  padding: 10px 20px;
+}
+.user_hover:hover .user_menu {
+  display: block;
+}
+.user_hover:hover .sj {
+  display: block;
+}
+.shop_hover {
+  height: 100%;
+}
+.shop_hover:hover .shop_menu {
+  display: block;
+}
+.shop_hover:hover .shop_sj {
+  display: block;
+}
+.user_menu div {
+  width: 135px;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  color: #0d1847;
+}
+.user_menu div:hover {
+  background-color: #e56600;
+  color: #fff;
+}
+.sj {
+  width: 16px;
+  height: 16px;
+  background-color: #e56600;
+  position: absolute;
+  top: 72px;
+  transform: rotate(45deg);
+  display: none;
+}
+.shop_sj {
+  width: 16px;
+  height: 16px;
+  background-color: #fff;
+  position: absolute;
+  top: 72px;
+  transform: rotate(45deg);
+  display: none;
+}
+.shop_list_title {
+  color: #8890a7;
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+}
+.shop_list_cell {
+  height: 80px;
+  padding: 10px 0;
+  display: flex;
+  line-height: 26px;
+}
+.shop_line {
+  border-bottom: #f4f7fc 2px solid;
+}
+.shop_line:nth-last-child(2) {
+  border-bottom: 0;
+}
+.shop_img {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+}
+.shop_footer {
+  width: 100%;
+  height: 50px;
+  text-align: right;
+  padding: 15px 0;
+  line-height: 30px;
+}
+.shop_settlement {
+  background-color: #e56600;
+  color: #fcefd6;
+}
+.shop_cell_msgs {
+  width: calc(100% - 80px);
+  margin-left: 10px;
+}
+.shop_cell_name {
+  color: #2d3867;
+  font-size: 14px;
+  line-height: 24px;
+}
+.shop_cell_name:hover {
+  color: #0d0807;
+}
+.shop_cell_msg {
+  color: #8890a7;
+  font-size: 12px;
+  line-height: 18px;
 }
-.logo{
-    float: left;
-    margin: 30px 0 0 40px;
-}
-.user{
-    float: right;
-    margin-right: 113px;
-    font-size: 16px;
-}
-.user_pic{
-    float: right;
-    margin-right: 15px;
-    margin-top: 30px;
-}
-.number{
-    float: right;
-    margin-right: 43px;
-    margin-top: 30px;
-    width: 40px;
-	height: 22px;
-	background-color: #e56600;
-    border-radius: 11px;
-    color: #fcefd6;
-    line-height: 22px;
-    text-align: center;
-}
-.car{
-    float: right;
-    margin-right: 15px;
-    margin-top: 30px;
-}
-.menu_box{
-    float: right;
-    width: 185px;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-}
-.menu_box:nth-of-type(1){
-    margin-right: 52px;
-}
-.bottom_show{
-    width: 24px;
-	height: 5px;
-	background-color: #e56600;
-    border-radius: 3px;
-    position: absolute;
-    bottom: 0px;
-    left: calc(50% - 12px);
-}
-.user_menu{
-    width: 135px;
-	background-color: #ffffff;
-	box-shadow: 0px 3px 6px 0px 
-		#f4f7fc;
-	border-radius: 8px;
-    position: absolute;
-    top: 80px;
-    left: -20px;
-    overflow: hidden;
-    display: none;
-    z-index: 1;
-}
-.user_hover:hover .user_menu{
-    display: block;
-}
-.user_hover:hover .sj{
-    display: block;
-}
-.user_menu div{
-    width: 135px;
-    height: 44px;
-    line-height: 44px;
-    text-align: center;
-    color: #0d1847;
-}
-.user_menu div:hover{
-    background-color: #e56600;
-    color: #fff;
-}
-.sj{
-    width: 16px;
-    height: 16px;
-    background-color: #e56600;
-    position: absolute;
-    top: 72px;
-    transform:rotate(45deg);
-    display: none;
+.over_one {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/shopping-cart/shopping-cart-cell.vue b/src/components/shopping-cart/shopping-cart-cell.vue
index 3a0eaa6..703d5a9 100644
--- a/src/components/shopping-cart/shopping-cart-cell.vue
+++ b/src/components/shopping-cart/shopping-cart-cell.vue
@@ -15,18 +15,18 @@
           />
           <div class="shopping_cell_msg">
             <div class="shopping_cell_name">
-              {{ cellItem.name }}
+              {{ cellItems.name }}
               <span
-                v-if="cellItem.mapService"
+                v-if="cellItems.mapService"
                 class="tags map_service"
               >mapService</span>
-              <span v-if="cellItem.state == 1" class="tags shared">共享</span>
-              <span v-else-if="cellItem.state ==  2" class="tags restricted">受限</span>
+              <span v-if="cellItems.state == 1" class="tags shared">共享</span>
+              <span v-else-if="cellItems.state ==  2" class="tags restricted">受限</span>
               <span v-else class="tags sensitive">敏感</span>
             </div>
             <div class="shopping_cell_msg_other">
-              <div class="shopping_cell_type">{{ cellItem.type }}</div>
-              <div class="shopping_cell_creator">{{ cellItem.creator }}</div>
+              <div class="shopping_cell_type">{{ cellItems.type }}</div>
+              <div class="shopping_cell_creator">{{ cellItems.creator }}</div>
             </div>
           </div>
         </div>
@@ -34,10 +34,19 @@
       <el-col :span="5">
         <div class="shopping_cell_specification">
           <div class="shopping_cell_specification_val">
-            <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_val_specification"
+            >规格：{{ specificationBtns[cellItems.specification] }}</div>
+            <div
+              class="shopping_cell_specification_val_type"
+            >申请方式：{{ specificationApplicationBtns[cellItems.specificationApplication] }}</div>
             <div class="shopping_cell_specification_edit">
-              <el-popover placement="right" width="280" v-model="visible" @after-leave="setSpecificationPop">
+              <el-popover
+                placement="right"
+                width="280"
+                v-model="visible"
+                @after-leave="setSpecificationPop"
+              >
                 <div>
                   <div class="shopping_cell_specification_title">规格：</div>
                   <div>
@@ -56,7 +65,7 @@
                       :key="'specification' + index"
                       :class="specificationApplicationPop == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
                       size="mini"
-                       @click="changeSpecificationApplication(index)"
+                      @click="changeSpecificationApplication(index)"
                     >{{ item }}购买</el-button>
                   </div>
                 </div>
@@ -82,12 +91,22 @@
         </div>
       </el-col>
       <el-col :span="4" class="shopping_cell_num">
-        <el-input-number :disabled="readOnly" v-model="numItem" size="mini" :min="1"></el-input-number>
+        <el-input-number
+          :disabled="readOnly"
+          v-model="cellItems.num"
+          @change="changeNum"
+          size="mini"
+          :min="1"
+        ></el-input-number>
       </el-col>
       <el-col :span="4" class="shopping_cell_options">
-        <el-checkbox v-if="!readOnly" v-model="checkedSubscription">订阅该服务</el-checkbox>
+        <el-checkbox
+          v-if="!readOnly"
+          v-model="cellItems.checkedSubscription"
+          @change="changeSubscription"
+        >订阅该服务</el-checkbox>
         <div class="shopping_cell_options_del">
-          <el-button size="mini">删除</el-button>
+          <el-button @click="delCellItem" size="mini">删除</el-button>
         </div>
       </el-col>
     </el-row>
@@ -112,16 +131,20 @@ export default {
   watch: {
     cellCheck: function(val) {
       this.checkedItem = val;
+    },
+    cellItem: {
+      immediate: true, // 这句重要
+      handler(val) {
+        this.cellItems = val;
+      }
     }
   },
   data: () => ({
+    cellItems: {},
     checkedItem: false,
-    numItem: 1,
     specificationEdit: require("../../assets/imgs/ic_edit.png"),
     checkedSubscription: false,
     visible: false,
-    specification: 1,
-    specificationApplication: 0,
     specificationPop: 1,
     specificationApplicationPop: 0,
     specificationBtns: [
@@ -143,13 +166,32 @@ export default {
       this.specificationApplicationPop = val;
     },
     submitPop() {
-      this.specification = this.specificationPop;
-      this.specificationApplication = this.specificationApplicationPop;
+      this.cellItems.specification = this.specificationPop;
+      this.cellItems.specificationApplication = this.specificationApplicationPop;
       this.visible = false;
+      this.changeCellItem();
     },
     setSpecificationPop() {
-      this.specificationPop = this.specification;
-      this.specificationApplicationPop = this.specificationApplication;
+      this.specificationPop = this.cellItems.specification;
+      this.specificationApplicationPop = this.cellItems.specificationApplication;
+    },
+    changeSubscription(val) {
+      this.changeCellItem();
+    },
+    changeNum(val) {
+      this.changeCellItem();
+    },
+    changeCellItem() {
+      this.$emit("changeCellMsg", {
+        index: this.cellIndex,
+        data: this.cellItems
+      });
+    },
+    delCellItem() {
+      this.$emit("deleteItem", {
+        index: this.cellIndex,
+        data: this.cellItems
+      });
     }
   },
   mounted() {}
@@ -229,7 +271,7 @@ export default {
   font-size: 12px;
   font-weight: 500;
   line-height: 12px;
-  border-radius: 15px;
+  border-radius: 4px;
   position: relative;
   top: -2px;
 }
diff --git a/src/components/shopping-cart/shopping-cart-com.vue b/src/components/shopping-cart/shopping-cart-com.vue
index f931e9e..de27abb 100644
--- a/src/components/shopping-cart/shopping-cart-com.vue
+++ b/src/components/shopping-cart/shopping-cart-com.vue
@@ -8,7 +8,7 @@
           </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-col :span="4" class="shopping_all_head_item">操作</el-col>
         </el-row>
       </div>
@@ -19,6 +19,8 @@
         :checkList="checkList"
         :readOnly="false"
         @changeState="changeState"
+        @changeCellMsg="changeCellMsg"
+        @deleteItem="deleteItem"
         class="shopping_all_list"
       />
     </div>
@@ -45,8 +47,12 @@
             <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-button
+              v-if="getNum == 0"
+              :disabled="true"
+              class="shopping_cart_options_cell_btn"
+            >一键申请</el-button>
+            <el-button v-else @click="oneClickApplication" class="shopping_cart_options_cell_btn_act">一键申请</el-button>
           </el-col>
         </el-row>
       </div>
@@ -71,14 +77,22 @@ export default {
         type: "基础数据服务",
         creator: "贵州省交通运输厅0",
         state: 1,
-        mapService: 1
+        mapService: 1,
+        num: 2,
+        checkedSubscription: false,
+        specification: 1,
+        specificationApplication: 2
       },
       {
         id: 1,
         name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
         type: "基础数据服务",
         creator: "贵州省交通运输厅1",
-        state: 1
+        state: 1,
+        num: 2,
+        checkedSubscription: false,
+        specification: 1,
+        specificationApplication: 2
       },
       {
         id: 2,
@@ -86,7 +100,11 @@ export default {
         type: "基础数据服务",
         creator: "贵州省交通运输厅2",
         state: 1,
-        mapService: 1
+        mapService: 1,
+        num: 2,
+        checkedSubscription: true,
+        specification: 1,
+        specificationApplication: 2
       }
     ]
   }),
@@ -119,6 +137,19 @@ export default {
           console.log(this.list[index]);
         }
       });
+    },
+    changeCellMsg(val) {
+      console.log(val);
+    },
+    deleteItem(val) {
+      console.log(val);
+    },
+    oneClickApplication() {
+      this.checkList.forEach((item, index) => {
+        if (item === true) {
+          console.log(this.list[index]);
+        }
+      });
     }
   }
 };
@@ -194,7 +225,7 @@ export default {
 .shopping_all_head {
   background-color: #e5f0ff;
   height: 48px;
-  padding: 0 20px;
+  padding: 0;
   font-weight: 700;
   line-height: 48px;
 }
diff --git a/src/components/shopping-cart/shopping-cart-list.vue b/src/components/shopping-cart/shopping-cart-list.vue
index c99d996..9485f9e 100644
--- a/src/components/shopping-cart/shopping-cart-list.vue
+++ b/src/components/shopping-cart/shopping-cart-list.vue
@@ -9,6 +9,8 @@
         :key="item.id"
         :readOnly="readOnly"
         @changeState="changeState"
+        @changeCellMsg="changeCellMsg"
+        @deleteItem="deleteItem"
       />
     </div>
   </div>
@@ -58,6 +60,12 @@ export default {
       for (let i = 0; i < this.checkLists.length; i++) {
         this.$set(this.checkLists, i, val)
       }
+    },
+    changeCellMsg(val) {
+      this.$emit("changeCellMsg", val)
+    },
+    deleteItem(val) {
+      this.$emit("deleteItem", val)
     }
   }
 };
-- 
2.26.0