From 5671b63349617b3fa9357fbe177ad6810c8ff424 Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Thu, 14 May 2020 10:27:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6=EF=BC=8C=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/ic_data.png                   | Bin 0 -> 1059 bytes
 src/assets/imgs/ic_delete.png                 | Bin 0 -> 1054 bytes
 src/assets/imgs/ic_edit.png                   | Bin 0 -> 1079 bytes
 src/components/commodity-card.vue             |   7 +-
 src/components/commodity-cell.vue             |   4 +-
 src/components/commodity-list.vue             |  27 +-
 .../shopping-cart/shopping-cart-cell.vue      | 352 ++++++++++++++++++
 .../shopping-cart/shopping-cart-com.vue       |  64 ++++
 .../shopping-cart/shopping-cart-list.vue      | 128 +++++++
 .../shopping-cart/shopping-cart-options.vue   |  73 ++++
 src/pages/shop_list_app_store.vue             |   2 +-
 src/pages/shop_list_comprehensive_app.vue     |   2 +-
 src/pages/shop_list_data.vue                  |   2 +-
 src/pages/shop_list_space_time.vue            |   2 +-
 src/pages/shopping_cart.vue                   |  32 ++
 src/router/index.js                           |   5 +
 16 files changed, 684 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/imgs/ic_data.png
 create mode 100644 src/assets/imgs/ic_delete.png
 create mode 100644 src/assets/imgs/ic_edit.png
 create mode 100644 src/components/shopping-cart/shopping-cart-cell.vue
 create mode 100644 src/components/shopping-cart/shopping-cart-com.vue
 create mode 100644 src/components/shopping-cart/shopping-cart-list.vue
 create mode 100644 src/components/shopping-cart/shopping-cart-options.vue
 create mode 100644 src/pages/shopping_cart.vue

diff --git a/src/assets/imgs/ic_data.png b/src/assets/imgs/ic_data.png
new file mode 100644
index 0000000000000000000000000000000000000000..50874a9a0cd84cf99964188f85691572ca5730e8
GIT binary patch
literal 1059
zcmaJ=O-K|`93NXX(ZoW_vV_+Nq2SKPe(27yo31;nF1aS_f(t=7JM-2ZbmomSPj{7q
zumba<U>6Ar>J)?^MjbqK@ghXtBZ9otC8SOTi}Xg_wL{y$oA<%*_xpdm-+MGNJWyZT
zQcF=(eQZ!lkhzYGGd0!Z|N7;?Q!-t`(G(s<8Jv?XNQG6Dh9IWP6EFc~b#8hG1}VyQ
zO-rV5Dn2ACNM~dR!{l|7uqi6olQ(5$5@L{s6PgjC_qX2BKvP5Xm_N?N%?QkDgYy;~
zogYpr^OK68(mmHfFfS4T9by^e^(n&^^C9|BS0roan5DrX1W$(Oqoh*t5fDKZ1b(K=
zt?=Fe=oT2>F9bZkPT=AAE|wEm-sk3ckrPCY2ge^xqFHK2Oi2C5vB)k&XE8QKmd)jI
zOwP+7Yl7tkL0~x#>+!e=!fnqPSkAi*yRE1oL0hpj6Klu-j-s4KGdM((Opi*?&62EP
zAGe7#jLpj?%QKu)QV|%B{~xOBCA5tb@Fd@V3fsv!6S4_tqZvyf7nf;sLYZR3f-*){
z5}~PL7e}%PBRh*s5Q#Wl>jv#(nxUec-Eqi?$HkaoW7$w(ObXFNh0!!s410ZipU>+T
zy!{cLkA{UV!5;_+5*LmJe9``Bkt-o(Mu!G2a@7-VS6QxO2i+u*C1`20Q0=#n4i3u}
zweq=m%jz9-)$+Oc%5qtf4C`F(Uzc4xA`WtvCF_z+$^6hDj<<-lzifYPAkShoCWVvv
zkLgc$za{Eiu1Lq(O@93J*1bUGV$Wvp`Sq$jSE}hlWx5-DuGqfaInvnR`q6o1DO~+~
zA$y^^K&iL5$KT&ey&KI<yA{(lYlYUux2}y-i}#J6t>9q!0RlIkKY6vV+k#j3U##7^
z{A_3G*HCrGLDlw~-a_-TxKcnXdj?=!dxJruI$KeBk!rkowf&)TF5^7gSaeug?;BtE
E19H<)C;$Ke

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/ic_delete.png b/src/assets/imgs/ic_delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..9514770107bcd57d3a74df0d16d6ef42821ae29f
GIT binary patch
literal 1054
zcmaJ=Pe>F|7#|cw%q25OG_c1=VbIQ>b^p!ert6O8f-B3q;r54eoO$j}I`hVvXFE!w
zNsyI9R0ru&T{=abI(5*%ixgDH!h=LaQP8RAVAPv+ckR$Nhk4(7{C>ah_kHhsSCfOs
zJ#{U06h(RB{ZfjoyWF_8hWzKg-#JQ_X55>>Lud@=WeZYK6^%j=*X1lsL0O%iT!)<$
zReeZHXK*GlASy^_WEaCYx=Gj+)!F5kvN8@a7=>BQh|u4jt<XSIBlK_}!6nQX%xV2I
z795%xOe-_vilEY6$3Uke5&<1z894fcVT(?LF6fFRc8^&a6d-s!LT{VOB$6P8EC>Qj
z(5vtrVGt4+J|KjB{v*K0@j;doSl;jDc##uCjt9k$CfO`?OiW3A#av_;p>r6UBFpCU
zc_!b%AS=uAf*`P*kM;Sy1mU%(4J<oe!)_}nNYGX+&BPiqfU78vqA47qiPP;8bh9jL
z*u^%HhOv%pvOL4NC6$1Q#Q&kXUPjwE1$X@ZQ`k;Vn~+UG8%<dXxwx@5H<c;IEGT1S
zr4gDabupPk7}+^wf>_M$S_rfcYle#Q_Td62kr3mCjb%fDaVbI*6-Lukk?-*Pq);p*
z@KPVo_eOi7fj%kf_l1I7EEwqVm$(vArgUiF5?9^fhAVR2anMbYS%Q{!0jhl#(m|nY
zQLF4FP*JbQRV#Z5R^+n84C`L*Uzc4vA`|3><<TXZ^6*20OuR)#`}`_*f;@{GaVeU1
z-i>a|erl|4T&`ae`nS#k=F((lKHR!^@czZ7n)Ie;?a70$SC+bOuT(XkslWU@dvkrG
zUaH#H{_9@t)1`r2)tvcyWd6}lPs5j<x3`j~4lJINhqgS|<d*2>u7=;M50?Qr%{Qf-
z>)l!__}IN$TwZvQ{9(7x?m6js`9aCuee-!Qr~<20?W_HDHH&TU-4`409h4sTj4b>C
Dmt0T2

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/ic_edit.png b/src/assets/imgs/ic_edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9f532c0c5d647d0d827104213f67c8747c0a9eb
GIT binary patch
literal 1079
zcmaJ=O-$2J94`#WLVyq>2UOy-7$ON<+kF77%(1N-TS5trMRw4{u6<(-w6C@gR|qQ6
z3mh~g#t%-0gPLeGoJ@=%8X+bg)Vom+Bt~yuIe73DHt^tV^7=mV`~ChO@AsC+$3|M4
zk2F&h)tX6*Su(e{!`npu=Vs6UAX6t!=J5n7;<9W(DyE_W1Q}hPf>|i5bC=%3A&T<!
zXt_MjOQV8<bieFk{EluCHbo6Z9aC1OAqE9Fr5O?W*Q?hw(9{S$8J1YdOu&+sp10t{
z{8&zzpH_I4j-CNSjz9!-h-KjDGlnfV5qeiwAZz!Sp}{T$Pe<szr1H`@NFWP>u)p7@
zaKS+^!27u{KNtx0fdI?(Gc3<=As@>LEHAJesC+buW~oIXE2b*3$Sy*cFg68-DVNLs
za?p>gDTd>Do?!z_AmAeipFL+_+3^{6cU3`zwqj`}){p^QMY(`xafBwB?v<dM`?7{z
zX%lG}<H#n%`B}H5Do~RC57qU3w2iayAm4uq+qpRtGFfP&SxX@oSL}8}nL@&XGDcPo
zp_ytI$4dw!yM#=TNVr`a0H-E3Lq%n~cb6kcLdLMMY$z}zMrfkq*ECgN<FRD2p9}Du
znBur(EFMmVW8q|fGR%d8A&#qZMWoE?(7;u$dcY0V<hpjyO%hpzmUbDcDGTXfw`@VH
zoeNu2ufkPp=fc(GG9($sz1+VpyLv<%<SzHEOE&xFhX!%HMXY^uqidBsi^mx;mUBKA
zzFhfv=(xwTse-nqg3;7)ziw+ay$}OeKh>XnG~96`v@w!hKf3(YyVVFJ(E4q7sBY<L
z=elQQyBXYS*uFM89QQ6gXkT->(u>P=18>G#>iY%{Pbz0;TDF$^oEdN9wv=87f{*VW
zu65k&-TA#Zv3VNYJrVb%KMbtgei85f9&L}lUCXyUDf-fhw%mIA(o3_n)71Lx*dpbj
Wm<u2kz0(8Sr<_TSiO=H~um1tMb5TS9

literal 0
HcmV?d00001

diff --git a/src/components/commodity-card.vue b/src/components/commodity-card.vue
index 831a7ff..0cd889e 100644
--- a/src/components/commodity-card.vue
+++ b/src/components/commodity-card.vue
@@ -14,7 +14,7 @@
     </div>
     <div class="com_card_btn">
         <el-button size="small">加入购物车</el-button>
-        <el-button size="small">查看详情</el-button>
+        <el-button size="small" @click="goUrl(cellData.id)">查看详情</el-button>
     </div>
   </div>
 </template>
@@ -32,7 +32,7 @@ export default {
   methods: {
     goUrl(parame) {
       if (this.url != "") {
-        this.$router.push(this.url + parame);
+        this.$router.push(this.url + "/" + parame);
       }
     }
   },
@@ -42,11 +42,10 @@ export default {
 
 <style scoped>
 .com_card {
-  width: 200px;
+  width: 290px;
   height: 300px;
   padding: 10px;
   background-color: #ddd;
-  margin: 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
diff --git a/src/components/commodity-cell.vue b/src/components/commodity-cell.vue
index d00d3f6..5258723 100644
--- a/src/components/commodity-cell.vue
+++ b/src/components/commodity-cell.vue
@@ -67,7 +67,7 @@ export default {
   methods: {
     goUrl(parame) {
       if (this.url != "") {
-        this.$router.push(this.url + parame);
+        this.$router.push(this.url + "/" + parame);
       }
     }
   },
@@ -149,12 +149,14 @@ export default {
   padding: 1px 8px 2px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 12px;
   border-radius: 15px;
   position: relative;
   top: -2px;
 }
 .map_service {
   background-color: #626DE9;
+  border: solid 1px #626DE9;
   color: #fff;
 }
 .shared {
diff --git a/src/components/commodity-list.vue b/src/components/commodity-list.vue
index 216477f..9e7d82a 100644
--- a/src/components/commodity-list.vue
+++ b/src/components/commodity-list.vue
@@ -2,8 +2,12 @@
   <div>
     <div v-if="name=='应用商店'" ref="commodityList" class="commodity_card">
       <div ref="commodityCardIn" class="commodity_card_list">
-        <commodity-card v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-card>
-        <commodity-card v-for="item in datas" :cellData="item" :url="url" :key="'s' + item.id"></commodity-card>
+        <div v-for="item in datas" :key="item.id" class="commodity_card_item">
+          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
+        </div>
+        <div v-for="item in datas" :key="'s' + item.id" class="commodity_card_item">
+          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
+        </div>
       </div>
     </div>
     <div v-else class="commodity_cell">
@@ -115,11 +119,13 @@ export default {
       this.pagination.total = this.datas.length;
     },
     pageResize() {
-      let listWidth = this.$refs.commodityList.clientWidth;
-      let rowCardNum = Math.floor(listWidth / 220);
-      this.$refs.commodityCardIn.style.width = rowCardNum * 220 + "px";
-      this.$refs.commodityCardIn.style.marginLeft =
-        (listWidth - rowCardNum * 220) / 2 + "px";
+      let listWidth = this.$refs.commodityCardIn.clientWidth;
+      let rowCardNum = Math.floor(listWidth / 310);
+      let cardArr = this.$refs.commodityCardIn.children;
+      console.log(rowCardNum, listWidth / rowCardNum);
+      for (let i = 0; i < cardArr.length; i++) {
+        cardArr[i].style.width = (listWidth / rowCardNum) - 1 + "px";
+      }
       console.log(this.$refs.commodityCardIn);
     }
   },
@@ -166,9 +172,16 @@ export default {
 .commodity_card {
 }
 .commodity_card_list {
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
 }
+.commodity_card_item {
+  margin: 10px 0;
+}
+.commodity_card_item_in {
+  margin: 0 auto;
+}
 </style>
 <style>
 .com_page_control .el-button {
diff --git a/src/components/shopping-cart/shopping-cart-cell.vue b/src/components/shopping-cart/shopping-cart-cell.vue
new file mode 100644
index 0000000..553c6d8
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-cell.vue
@@ -0,0 +1,352 @@
+<template>
+  <div class="shopping_cell">
+    <el-row class="shopping_cell_row">
+      <el-col :span="2" class="shopping_cell_check">
+        <el-checkbox v-if="!readOnly" v-model="checkedItem" @change="getState"></el-checkbox>
+        <div v-else class="shopping_cell_expired">
+          <span>已下架</span>
+        </div>
+      </el-col>
+      <el-col :span="9">
+        <div class="shopping_cell_item">
+          <img
+            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+            class="shopping_cell_img"
+          />
+          <div class="shopping_cell_msg">
+            <div class="shopping_cell_name">
+              {{ cellItem.name + ccce }}
+              <span
+                v-if="cellItem.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-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>
+          </div>
+        </div>
+      </el-col>
+      <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_edit">
+              <el-popover placement="right" width="280" v-model="visible">
+                <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'"
+                      size="mini"
+                    >{{ 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'"
+                      size="mini"
+                    >{{ item }}</el-button>
+                  </div>
+                </div>
+                <div style="text-align: right; margin: 0">
+                  <el-button
+                    class="shopping_cell_specification_cancel"
+                    size="mini"
+                    type="text"
+                    @click="visible = false"
+                  >取消</el-button>
+                  <el-button
+                    class="shopping_cell_specification_submit"
+                    size="mini"
+                    @click="visible = false"
+                  >确定</el-button>
+                </div>
+                <el-button v-if="!readOnly" circle size="mini" slot="reference">
+                  <img :src="specificationEdit" />
+                </el-button>
+              </el-popover>
+            </div>
+          </div>
+        </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-col>
+      <el-col :span="4" class="shopping_cell_options">
+        <el-checkbox v-if="!readOnly" v-model="checkedSubscription">订阅该服务</el-checkbox>
+        <div class="shopping_cell_options_del">
+          <el-button size="mini">删除</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    cellItem: { type: Object, default: {} },
+    cellIndex: { type: Number, default: null },
+    cellCheck: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    cellCheck(newV, oldV) {
+      // do something
+      console.log(newV, oldV);
+    }
+  },
+  data: () => ({
+    checkedItem: false,
+    numItem: 1,
+    specificationEdit: require("../../assets/imgs/ic_edit.png"),
+    checkedSubscription: false,
+    visible: false,
+    specification: 1,
+    specificationApplication: 0,
+    specificationBtns: [
+      "1.访问次数：20/日  访问量：100/日",
+      "2.访问次数：200/日  访问量：1000/日",
+      "3.访问次数：无上限  访问量：无上限"
+    ],
+    specificationApplicationBtns: ["按月购买", "按年购买"]
+  }),
+  computed: {},
+  watch: {},
+  methods: {
+    getState(val) {
+      this.$emit("changeState", { state: val, index: this.cellIndex });
+    }
+  },
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.shopping_cell {
+  height: 110px;
+  border-bottom: 2px #f4f7fc solid;
+  margin: 10px 0;
+}
+.shopping_cell:nth-last-child(1) {
+  border-bottom: 0;
+  margin: 10px 0;
+}
+.shopping_cell_row {
+}
+.shopping_cell_item {
+  display: flex;
+  justify-content: flex-start;
+}
+.shopping_cell_check {
+  text-align: center;
+  padding-top: 35px;
+}
+.shopping_cell_expired {
+  display: inline-block;
+  text-align: center;
+  padding: 2px 6px;
+  width: 50px;
+  background-color: #e3e5ef;
+  border-radius: 5px;
+  font-size: 12px;
+  color: #8890a7;
+}
+.shopping_cell_img {
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+}
+.shopping_cell_msg {
+  width: calc(100% - 120px);
+  margin-left: 10px;
+  position: relative;
+}
+.shopping_cell_name {
+  width: 100%;
+  line-height: 24px;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-size: 16px;
+}
+.shopping_cell_msg_other {
+  position: absolute;
+  bottom: 0;
+}
+.shopping_cell_type {
+  color: #8890a7;
+  font-size: 14px;
+  line-height: 22px;
+}
+.shopping_cell_creator {
+  color: #8890a7;
+  font-size: 14px;
+  line-height: 22px;
+}
+.tags {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 1px 8px 2px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  border-radius: 15px;
+  position: relative;
+  top: -2px;
+}
+.map_service {
+  background-color: #626de9;
+  border: solid 1px #626de9;
+  color: #fff;
+}
+.shared {
+  background-color: #e7fdfc;
+  border: solid 1px #8bd6d0;
+  color: #25bdb1;
+}
+.restricted {
+  background-color: #fffee8;
+  border: solid 1px #e4c884;
+  color: #ef9433;
+}
+.sensitive {
+  background-color: #ffefef;
+  border: solid 1px #d7a4a9;
+  color: #e15260;
+}
+.shopping_cell_specification {
+  width: 80%;
+  height: 100px;
+  margin: 0 10%;
+  background-color: #f9fafc;
+  border-radius: 8px;
+  padding: 10px;
+  position: relative;
+}
+.shopping_cell_specification_val {
+  color: #8890a7;
+  font-size: 14px;
+}
+.shopping_cell_specification_val_type {
+  margin-top: 10px;
+}
+.shopping_cell_num {
+  text-align: center;
+  padding-top: 32px;
+}
+.shopping_cell_options {
+  text-align: center;
+  padding-top: 20px;
+}
+.shopping_cell_specification_edit {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+.shopping_cell_options_del {
+  margin-top: 15px;
+}
+.shopping_cell_specification_title {
+  margin: 10px 0;
+}
+.shopping_cell_specification_btn {
+  margin: 0 10px 10px;
+}
+.shopping_cell_specification_btn.active {
+  background-color: #515fe7;
+  color: #f4f7fc;
+}
+.shopping_cell_specification_submit {
+  background-color: #e56600;
+  color: #f4f7fc;
+  margin-left: 20px;
+}
+.shopping_cell_specification_cancel {
+  color: #58617a;
+}
+</style>
+<style>
+.shopping_cell_specification_edit .el-button {
+  border: 0;
+  width: 28px;
+  height: 28px;
+}
+.shopping_cell_num .el-input-number--mini {
+  width: 100px;
+}
+.shopping_cell_num .el-input-number__decrease {
+  border-radius: 8px 0 0 8px;
+  color: #8390ee;
+  font-size: 16px;
+}
+.shopping_cell_num .el-input-number__increase {
+  border-radius: 0 8px 8px 0;
+  color: #8390ee;
+  font-size: 16px;
+}
+.shopping_cell_options .el-button {
+  border: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #77192d;
+}
+.shopping_cell_options .el-checkbox {
+  color: #8890a7;
+}
+.shopping_cell_options .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #687087;
+}
+.shopping_cell_options .el-checkbox__inner:hover {
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #d0d6f4;
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__inner::after {
+  border: 1px solid #666;
+  border-left: 0;
+  border-top: 0;
+}
+.shopping_cell_check .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_cell_check .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_cell_check .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.el-popover,
+.el-radio-button:first-child:last-child .el-radio-button__inner {
+  border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/shopping-cart/shopping-cart-com.vue b/src/components/shopping-cart/shopping-cart-com.vue
new file mode 100644
index 0000000..e0955ad
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-com.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="shopping_list shopping_list_all">
+      <ShoppingCartList :showHead="true" :readOnly="false" 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" />
+    </div>
+    <div class="shopping_list shopping_list_options">
+      <ShoppingCartOptions />
+    </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
+  },
+  props: {},
+  data: () => ({
+    
+  }),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+.shopping_list {
+  border-radius: 12px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.shopping_list_all {
+
+}
+.shopping_list_fail {
+}
+.shopping_list_options {
+}
+.shopping_all_list {
+}
+.shopping_fail_head {
+  background-color: #eff1f8;
+  height: 40px;  
+}
+.shopping_options {
+  height: 84px;
+}
+.expired_service {
+  height: 48px;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 10px 50px;
+  line-height: 28px;
+  background-color: #eff1f8;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/shopping-cart/shopping-cart-list.vue b/src/components/shopping-cart/shopping-cart-list.vue
new file mode 100644
index 0000000..2bf8d5c
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-list.vue
@@ -0,0 +1,128 @@
+<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]"
+        :key="item.id"
+        :readOnly="readOnly"
+        @changeState="changeState"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ShoppingCartCell from "@/components/shopping-cart/shopping-cart-cell";
+export default {
+  components: {
+    ShoppingCartCell
+  },
+  props: {
+    showHead: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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
+      }
+    ]
+  }),
+  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;
+      }
+    },
+    checkAll(val) {
+      console.log(val)
+      for (let i = 0; i < this.checkList.length; i++) {
+        this.checkList[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
new file mode 100644
index 0000000..ef75f27
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-options.vue
@@ -0,0 +1,73 @@
+<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
diff --git a/src/pages/shop_list_app_store.vue b/src/pages/shop_list_app_store.vue
index 64a9bb8..9fa987e 100644
--- a/src/pages/shop_list_app_store.vue
+++ b/src/pages/shop_list_app_store.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="应用商店" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="应用商店" url="yysdDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shop_list_comprehensive_app.vue b/src/pages/shop_list_comprehensive_app.vue
index ffbfe40..f2c2284 100644
--- a/src/pages/shop_list_comprehensive_app.vue
+++ b/src/pages/shop_list_comprehensive_app.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="综合应用" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="综合应用" url="zhyyfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shop_list_data.vue b/src/pages/shop_list_data.vue
index 6378df5..4a8adba 100644
--- a/src/pages/shop_list_data.vue
+++ b/src/pages/shop_list_data.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="数据服务" url="sjfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="数据服务" url="sjfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shop_list_space_time.vue b/src/pages/shop_list_space_time.vue
index ae10980..892fd48 100644
--- a/src/pages/shop_list_space_time.vue
+++ b/src/pages/shop_list_space_time.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="时空服务" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="时空服务" url="skfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shopping_cart.vue b/src/pages/shopping_cart.vue
new file mode 100644
index 0000000..2bebbaa
--- /dev/null
+++ b/src/pages/shopping_cart.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="shopping">
+    <div class="shopping_title">我的购物车</div>
+    <ShoppingCart />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import ShoppingCart from "@/components/shopping-cart/shopping-cart-com";
+
+export default {
+  components: {
+    ShoppingCart
+  },
+  data: () => ({
+    datas: {}
+  }),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+.shopping {
+  width: 1200px;
+  margin: 0 auto;
+}
+.shopping_title {
+  height: 40px;
+  line-height: 40px;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 5ca99c5..76b8e4f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,11 @@ export default new Router({
               name: "shopAppStoreList",
               component: () => import("@/pages/shop_list_app_store"),
             },
+            {
+              path: "/shop/shopping_cart", // 购物车页
+              name: "shoppingCart",
+              component: () => import("@/pages/shopping_cart"),
+            },
           ],
         },
         {
-- 
2.26.0