购物车状态同步

src/lang/en.js

@@ -305,7 +305,9 @@ export default {
     websiteTitle: 'Member Management System',
     uploadHints: 'Uploading, please hold on. Do not close the window!',
     canNotBeBlank: ' cannot be blank',
-    require: 'is required'
+    require: 'is required',
+    noData:'No Data'
+
   },
 
   shop: {

src/lang/zh.js

@@ -304,7 +304,8 @@ export default {
     websiteTitle: '会员管理系统',
     uploadHints: '正在上传，请稍后。请勿关闭窗口！',
     canNotBeBlank: '不能为空',
-    require: '必须填写'
+    require: '必须填写',
+    noData:'暂无数据'
   },
   shop: {
     product: '商品',
@@ -386,7 +387,7 @@ export default {
     BAUpgrade: 'BA会员升级',
     entryLevel: '报单级别',
     selectEntryLevel: '请选择报单级别',
-    stockistCode: '报单中心编号'
+    stockistCode: '报单中心编号',
   },
 
   atlas: {

src/views/user/welcome-pack.vue

@@ -27,7 +27,6 @@
             title="全部分类"
             :visible.sync="drawer"
             :direction="direction"
-            :modal-append-to-body="false"
           >
             <div class="allClassification flexFwW">
               <div
@@ -103,7 +102,7 @@
                   <el-collapse v-model="activeName" accordion>
                     <el-collapse-item name="product">
                       <el-table
-                      v-if="classifiedProductList.length > 0"
+                        v-if="classifiedProductList.length > 0"
                         :data="classifiedProductList[activeIndex].list"
                         :show-header="false"
                         @selection-change="handleSelectionChange"
@@ -208,13 +207,74 @@
                 </el-tab-pane>
               </el-tabs>
             </el-form-item>
-
-            
           </el-form>
+         
         </el-col>
       </el-row>
     </div>
-
+    <div class="shoppingCarrt">
+            <div class="scBox">
+              <div class="left" @click="openShoppingCartTable">
+                <i class="el-icon-shopping-cart-2"></i>
+              </div>
+              <div class="right"></div>
+            </div>
+          </div>
+    <el-drawer
+      title=""
+      :visible.sync="shoppingCartTable"
+      direction="btt"
+      size="50%"
+    >
+      <el-table
+        v-if="multipleSelection.length > 0"
+        :data="multipleSelection"
+        :show-header="false"
+        :modal-append-to-body="true"
+      >
+        <el-table-column align="center">
+          <template slot-scope="{ row, $index }">
+            <el-container>
+              <el-aside
+                width="80px"
+                style="padding: 0; margin-bottom: 0; background-color: #ffffff"
+              >
+                <el-image
+                  style="width: 80px; height: 80px"
+                  :src="tool.getArImage(row.COVER, '/files/')"
+                />
+              </el-aside>
+              <el-main style="padding: 0">
+                <div style="text-align: left; line-height: 25px">
+                  <span
+                    style="font-weight: bold; cursor: pointer"
+                    @click="handleProduct(row)"
+                    >{{ row.GOODS_NAME }}</span
+                  ><br />
+                  <span>{{ row.GOODS_NO }}</span
+                  ><br />
+                  <span style="color: tomato"
+                    >{{ $t("shop.productPrice") }}：{{ $t("currency.sign") }}
+                    {{ row.SELL_PRICE | toThousandFilter }}</span
+                  ><br />
+                  <span
+                    >{{ $t("shop.productBV") }}：{{
+                      row.PRICE_PV | toThousandFilter
+                    }}</span
+                  ><br />
+                  <span style="display: inline-block; float: right">
+                    <i class="el-icon-close"></i>
+                    {{ Number(row.goodsNum) }}
+                  </span>
+                  <br />
+                </div>
+              </el-main>
+            </el-container>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-empty v-else :description="$t('common.noData')"></el-empty>
+    </el-drawer>
     <!-- payStack模态框 -->
     <el-dialog
       v-loading="payStackLoading"
@@ -511,48 +571,11 @@ export default {
       headerActiveName: "1",
       activeIndex: 0,
       titleInfo: null,
-      tabList: [
-        {
-          title: "Tab1",
-          name: "1",
-        },
-        {
-          title: "Tab2",
-          name: "2",
-        },
-        {
-          title: "Tab3",
-          name: "3",
-        },
-        {
-          title: "Tab4",
-          name: "4",
-        },
-        {
-          title: "Tab5",
-          name: "5",
-        },
-        {
-          title: "Tab6",
-          name: "6",
-        },
-        {
-          title: "Tab7",
-          name: "7",
-        },
-        {
-          title: "Tab8",
-          name: "8",
-        },
-        {
-          title: "Tab9",
-          name: "9",
-        },
-      ],
       drawer: false,
+      shoppingCartTable: false,
       direction: "ttb",
       drawerWidth: "50%",
-      classifiedProductList:[]
+      classifiedProductList: [],
       // header end
     };
   },
@@ -583,6 +606,9 @@ export default {
     this.fetchWelcomePack();
   },
   methods: {
+    openShoppingCartTable() {
+      this.shoppingCartTable = true;
+    },
     //header start
     chooseNav(item, index) {
       this.titleInfo = item;
@@ -1173,6 +1199,24 @@ export default {
     }
   }
 }
+.shoppingCarrt {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  background-color: white;
+  box-shadow: 2px 3px 8px rgba(0,0,0,.5);
+  .scBox {
+    width: 100%;
+    padding: 5px;
+    // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+    .left {
+      width: 50px;
+      i {
+        font-size: 40px;
+      }
+    }
+  }
+}
 </style>
 <style>
 .el-table th.el-table__cell > .cell {