Tyler 2 лет назад
Родитель
Сommit
835a06bc94
2 измененных файлов с 242 добавлено и 114 удалено
  1. 1 1
      src/layout/components/AppMain.vue
  2. 241 113
      src/views/user/welcome-pack.vue

+ 1 - 1
src/layout/components/AppMain.vue

@@ -36,7 +36,7 @@ export default {
   min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
-  // overflow: hidden;
+  overflow: hidden;
 }
 
 .fixed-header+.app-main {

+ 241 - 113
src/views/user/welcome-pack.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-loading="loading" class="welcome_pack">
     <el-row class="dec-header flexJcsbAc" style="">
-      <el-row :xs="24" :sm="24" :lg="14" class="classification">
+      <el-col :xs="22" :sm="22" :lg="23" class="classification">
         <div class="decTabs flexJcfsAc">
           <div
             v-for="(item, index) in classifiedProductList"
@@ -15,13 +15,14 @@
             <span>type{{ item.CATEGORY_TYPE }}</span>
           </div>
         </div>
-      </el-row>
-      <div class="openAllClassification flexfc" @click="drawer = true">
-        <span class="">全部</span>
-        <i class="el-icon-more-outline" />
-      </div>
+      </el-col>
+      <el-col :xs="2" :sm="2" :lg="1">
+        <div class="openAllClassification flexfc" @click="opneDrawer">
+          <span class="">全部</span>
+          <i class="el-icon-more-outline" />
+        </div>
+      </el-col>
       <!-- 全部分类 -->
-
     </el-row>
     <div class="tabsDrawer">
       <el-drawer title="全部分类" :visible.sync="drawer" :direction="direction">
@@ -42,7 +43,12 @@
     <div class="white-box" style="padding: 0 10px; margin-top: 10px">
       <el-row :gutter="20">
         <el-col :xs="24" :sm="24" :lg="22">
-          <el-form ref="form" label-width="180px" :label-position="labelPosition" class="form-page">
+          <el-form
+            ref="form"
+            label-width="180px"
+            :label-position="labelPosition"
+            class="form-page"
+          >
             <!-- <el-form-item :label="$t('user.welcomePackWay')">
               <el-radio-group v-model="form.decType" @change="decTypeChange">
                 <el-radio size="small" label="normal">{{
@@ -56,11 +62,24 @@
               $t("user.accountInformation")
             }}</el-divider> -->
             <el-form-item :label="$t('user.newMemberCode')">
-              <el-input v-model="form.insertUserName" :readonly="userReadOnly" @blur="checkBaUser" />
+              <el-input
+                v-model="form.insertUserName"
+                :readonly="userReadOnly"
+                @blur="checkBaUser"
+              />
             </el-form-item>
             <el-form-item :label="$t('user.entryLevel')">
-              <el-select v-model="form.decLv" :placeholder="$t('user.selectEntryLevel')" style="width: 100%">
-                <el-option v-for="item in allDecLevel" :key="item.ID" :label="item.LEVEL_NAME" :value="item.ID" />
+              <el-select
+                v-model="form.decLv"
+                :placeholder="$t('user.selectEntryLevel')"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in allDecLevel"
+                  :key="item.ID"
+                  :label="item.LEVEL_NAME"
+                  :value="item.ID"
+                />
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('user.stockistCode')">
@@ -71,7 +90,11 @@
               <template slot="label">
                 {{ $t("user.selectWelcomePack") }}
               </template>
-              <el-tabs v-model="decWay" type="border-card" style="position: relative; width: 100%">
+              <el-tabs
+                v-model="decWay"
+                type="border-card"
+                style="position: relative; width: 100%"
+              >
                 <el-tab-pane :label="$t('shop.product')" name="2">
                   <el-collapse v-model="activeName" accordion>
                     <el-collapse-item name="product">
@@ -81,7 +104,12 @@
                         :show-header="false"
                         @selection-change="handleSelectionChange"
                       >
-                        <el-table-column type="selection" width="30" align="center" style="top: -30px" />
+                        <el-table-column
+                          type="selection"
+                          width="30"
+                          align="center"
+                          style="top: -30px"
+                        />
                         <el-table-column align="center">
                           <template slot-scope="{ row, $index }">
                             <el-container>
@@ -99,11 +127,17 @@
                                 />
                               </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>
+                                <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") }}:{{
+                                  <span
+                                    style="color: tomato"
+                                  >{{ $t("shop.productPrice") }}:{{
                                     $t("currency.sign")
                                   }}
                                     {{
@@ -112,7 +146,9 @@
                                   <span>{{ $t("shop.productBV") }}:{{
                                     row.PRICE_PV | toThousandFilter
                                   }}</span><br>
-                                  <span style="display: inline-block; float: right">
+                                  <span
+                                    style="display: inline-block; float: right"
+                                  >
                                     <el-input-number
                                       v-model="storeNums[$index]"
                                       size="mini"
@@ -165,64 +201,149 @@
               </el-tabs>
             </el-form-item>
           </el-form>
-
         </el-col>
       </el-row>
     </div>
-    <div class="shoppingCarrt">
-      <div class="scBox flexJcsbAc">
+    <el-row type="flex" justify="space-between" class="shoppingCarrt">
+      <el-col :xs="18" :md="18" :lg="21" class="">
         <div class="left" @click="openShoppingCartTable">
           <el-badge :value="multipleSelection.length" class="item">
             <i class="el-icon-shopping-cart-2" />
           </el-badge>
-
         </div>
+      </el-col>
+      <el-col :xs="6" :md="6" :lg="3">
         <div class="right">
           <el-button type="primary" round @click="goWePaFrom">去结算</el-button>
         </div>
-      </div>
-    </div>
-    <div class="shoppingCartDrawer">
-      <el-drawer
-        title=""
-        style="transform: translateY(-55px);"
-        :visible.sync="shoppingCartTable"
-        direction="btt"
-        :with-header="true"
-        :modal="false"
-      >
-        <el-table v-if="multipleSelection.length > 0" class="shoppingCartTable" :data="multipleSelection">
-          <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" />
-                      {{ 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-drawer>
-    </div>
-
+      </el-col>
+      <el-col :xs="0" :md="0" :lg="0" class="">
+        <div class="shoppingCartDrawer">
+          <el-drawer
+            title=""
+            style="transform: translateY(-55px)"
+            :visible.sync="shoppingCartTable"
+            direction="btt"
+            :with-header="true"
+            :modal="false"
+          >
+            <el-table
+              v-if="multipleSelection.length > 0"
+              class="shoppingCartTable"
+              :data="multipleSelection"
+            >
+              <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" />
+                          {{ 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-drawer>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :xs="18" :md="18" :lg="21" class="">
+        <div class="shoppingCartDrawer">
+          <el-drawer
+            title=""
+            style="transform: translateY(-55px)"
+            :visible.sync="shoppingCartTable"
+            direction="btt"
+            :with-header="true"
+            :modal="false"
+          >
+            <el-table
+              v-if="multipleSelection.length > 0"
+              class="shoppingCartTable"
+              :data="multipleSelection"
+            >
+              <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" />
+                          {{ 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-drawer>
+        </div>
+      </el-col>
+    </el-row>
     <!-- payStack模态框 -->
     <el-dialog
       v-loading="payStackLoading"
@@ -258,8 +379,13 @@
           $t("shop.goPay")
         }}</el-button>
       </paystack>
-      <el-button type="danger" size="small" class="cancelButton" style="margin-left: 10px" @click="handleClose">{{
-        $t("common.cancel") }}</el-button>
+      <el-button
+        type="danger"
+        size="small"
+        class="cancelButton"
+        style="margin-left: 10px"
+        @click="handleClose"
+      >{{ $t("common.cancel") }}</el-button>
     </el-dialog>
 
     <!-- 倒计时页面 -->
@@ -271,17 +397,29 @@
       :close="handleOrderList"
     >
       <el-card shadow="always">
-        <el-result icon="success" :title="$t('common.successfully')" :sub-title="$t('shop.successOrderTips')">
+        <el-result
+          icon="success"
+          :title="$t('common.successfully')"
+          :sub-title="$t('shop.successOrderTips')"
+        >
           <template slot="extra">
-            <el-button type="primary" size="medium" @click="handleOrderList">{{ $t("shop.goBack") }}({{ countdown
-            }})</el-button>
+            <el-button
+              type="primary"
+              size="medium"
+              @click="handleOrderList"
+            >{{ $t("shop.goBack") }}({{ countdown }})</el-button>
           </template>
         </el-result>
       </el-card>
     </el-dialog>
 
     <!-- 商品详情 -->
-    <el-dialog :title="product.GOODS_NO" :visible.sync="visibleProduct" :width="screenWidth" style="margin-top: -95px">
+    <el-dialog
+      :title="product.GOODS_NO"
+      :visible.sync="visibleProduct"
+      :width="screenWidth"
+      style="margin-top: -95px"
+    >
       <el-row :gutter="20">
         <el-col :xs="24" :sm="12" :lg="12">
           <el-image
@@ -295,9 +433,12 @@
             <span style="font-weight: bold; font-size: 20px">{{
               product.GOODS_NAME
             }}</span><br>
-            <span style="font-weight: bold; font-size: 15px">{{ $t("shop.productCode") }}:{{ product.GOODS_NO
-            }}</span><br>
-            <span style="color: tomato">{{ $t("shop.productPrice") }}:{{ $t("currency.sign") }}
+            <span
+              style="font-weight: bold; font-size: 15px"
+            >{{ $t("shop.productCode") }}:{{ product.GOODS_NO }}</span><br>
+            <span
+              style="color: tomato"
+            >{{ $t("shop.productPrice") }}:{{ $t("currency.sign") }}
               {{ product.SELL_PRICE }}</span><br>
             <span>{{ $t("shop.productBV") }}:{{ product.PRICE_PV }}</span><br>
             <span>{{ $t("shop.taxRate") }}:{{ product.TAX_RATE / 100 }}</span><br>
@@ -530,11 +671,15 @@ export default {
     this.fetchWelcomePack()
   },
   methods: {
+    opneDrawer() {
+      console.log(this.drawer)
+      this.drawer = !this.drawer
+    },
     goWePaFrom() {
       this.$router.push({ path: `/user/welcome-pack-form` })
     },
     openShoppingCartTable() {
-      this.shoppingCartTable = true
+      this.shoppingCartTable = !this.shoppingCartTable
     },
     // header start
     chooseNav(item, index) {
@@ -1072,20 +1217,14 @@ export default {
 }
 
 .dec-header {
-  // width: 100%;
   height: 60px;
   background-color: white;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  position: sticky;
-  top: 0px;
   z-index: 1000;
 
   .classification {
-    width: 90%;
     height: 100%;
     overflow: hidden;
-
-    // position: relative;
     .decTabs {
       width: 100%;
       height: 100%;
@@ -1114,9 +1253,7 @@ export default {
   }
 
   .openAllClassification {
-    width: 10%;
     height: 60px;
-    // box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
     box-shadow: -10px 0px 30px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     font-size: 14px;
@@ -1137,15 +1274,13 @@ export default {
 
     .el-drawer__wrapper {
       position: absolute;
-      // position: fixed;
       top: 0px;
       right: 0;
       bottom: 0;
       left: 0;
-      overflow: hidden;
+      overflow: auto;
       margin: 0;
       height: 30% !important;
-
       .el-drawer__container {
         .el-drawer {
           // height: auto!important;
@@ -1157,7 +1292,7 @@ export default {
       }
 
       .el-drawer__container ::-webkit-scrollbar {
-        display: none;
+        // display: none;
       }
 
       .allClassification {
@@ -1176,34 +1311,26 @@ export default {
 }
 
 .shoppingCarrt {
+  height: 60px;
   position: fixed;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      overflow: hidden;
-      margin: 0;
-  // width: 100%;
+  bottom: 0;
+  // overflow: hidden;
+  width: 100%;
   background-color: white;
-  box-shadow: 2px 3px 8px rgba(0, 0, 0, .5);
+  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.5);
   z-index: 1000;
-
-  .scBox {
-    width: 100%;
-    padding: 10px;
-
-    // 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: 30px;
-      }
+  padding: 10px;
+  align-items: center;
+  .left {
+    width: 50px;
+    i {
+      font-size: 30px;
     }
   }
 }
 
 .shoppingCartDrawer {
-  width: 100%;
+  // width: 100%;
   ::v-deep {
     ::-webkit-scrollbar {
       /*隐藏滚轮*/
@@ -1223,6 +1350,7 @@ export default {
       .el-drawer__container {
         .el-drawer {
           // height: auto!important;
+        height: 50% !important;
         }
       }
 
@@ -1254,16 +1382,15 @@ export default {
     .el-table td.el-table__cell {
       border: none !important;
     }
-
   }
 }
 </style>
 <style>
-.el-table th.el-table__cell>.cell {
+.el-table th.el-table__cell > .cell {
   white-space: nowrap;
 }
 
-.el-table td.el-table__cell>.cell {
+.el-table td.el-table__cell > .cell {
   word-break: keep-all;
   white-space: pre-wrap;
 }
@@ -1273,11 +1400,11 @@ export default {
   padding-right: 2px !important;
 }
 
-.el-tabs--border-card>.el-tabs__content {
+.el-tabs--border-card > .el-tabs__content {
   padding: 5px;
 }
 
-.el-radio.is-bordered+.el-radio.is-bordered {
+.el-radio.is-bordered + .el-radio.is-bordered {
   margin: 5px 0;
 }
 
@@ -1287,4 +1414,5 @@ export default {
 
 .el-form-item {
   margin-bottom: 12px;
-}</style>
+}
+</style>