修改商品预览页

src/components/globalComponents/showGoodPrice/index.vue

@@ -1,16 +1,19 @@
 <template>
-  <div class="my-table clear">
-    <div class="my-table-li">
-      <div class="my-table-li-top">数量(X):</div>
-      <div class="my-table-li-bottom">单价(元):</div>
-      <div class="my-table-li-bottom">税率:{{ tax }}%</div>
-    </div>
-
-    <div class="my-table-li" v-for="(si, i) in price_list" :key="si.min + i">
-      <div class="my-table-li-top">
-        {{ si.min + "≤X" + (si.max === 0 ? "" : "＜" + si.max) }}
+  <div class="my-table">
+    <div class="my-table-bg">&nbsp;</div>
+    <div class="my-table-box clear">
+      <div class="my-table-li">
+        <div class="my-table-li-top">数量(X):</div>
+        <div class="my-table-li-bottom">单价(元):</div>
+      </div>
+      <div class="my-table-li" v-for="(si, i) in price_list" :key="si.min + i">
+        <div class="my-table-li-top">
+          {{ si.min + "≤X" + (si.max === 0 ? "" : "＜" + si.max) }}
+        </div>
+        <div class="my-table-li-bottom">
+          {{ si.price }}
+        </div>
       </div>
-      <div class="my-table-li-bottom">{{ si.price }}</div>
     </div>
   </div>
 </template>
@@ -18,7 +21,7 @@
 <script>
 export default {
   name: "showGoodPrice",
-  props: ["price_list", "tax"],
+  props: ["price_list"],
   data() {
     return {};
   },
@@ -34,30 +37,51 @@ export default {
 
 <style scoped>
 .my-table {
+  position: relative;
+  width: 100%;
   background: rgb(236, 245, 255);
-  float: left;
-  .my-table-li {
-    float: left;
 
-    min-width: 100px;
-    &:first-child {
-      width: 100px;
-    }
-    .my-table-li-top,
-    .my-table-li-bottom {
-      width: 100%;
-      float: left;
-      height: 32px;
-      padding: 0 5px;
-      line-height: 32px;
-      text-align: center;
-      font-size: 13px;
-    }
-    .my-table-li-top {
-      background: rgb(217, 236, 255);
-    }
-    .my-table-li-bottom {
-      background: rgb(236, 245, 255);
+  .my-table-bg {
+    width: 100%;
+    background: rgb(217, 236, 255);
+    height: 32px;
+    line-height: 32px;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+  }
+  .my-table-box {
+    position: relative;
+    width: 100%;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    overflow-x: auto;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    .my-table-li {
+      min-width: 100px;
+      /* width: 130px; */
+      .my-table-li-top,
+      .my-table-li-bottom {
+        width: 100%;
+        height: 32px;
+        padding: 0 5px;
+        line-height: 32px;
+        text-align: center;
+        font-size: 13px;
+        overflow: hidden;
+      }
+      &:first-child {
+        width: 80px;
+        min-width: 80px;
+        .my-table-li-top,
+        .my-table-li-bottom {
+          padding: 0;
+        }
+      }
     }
   }
 }

src/views/goodStore/goodsCost/components/goodPreview.vue

@@ -7,7 +7,7 @@
       <div class="parameter">
         <el-row>
           <el-col :span="24" class="good_name">{{ sitem.good_name }}</el-col>
-          <el-col :span="12" class="t2"
+          <el-col :span="24" class="t2"
             >业务公司：
             <el-tooltip
               class="item"
@@ -19,15 +19,7 @@
             </el-tooltip>
             {{ sitem.companyName }}</el-col
           >
-
-          <el-col :span="12" class="t2">成本编号：{{ sitem.spuCode }}</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24" style="padding: 5px 0">
-            <showGoodPrice :price_list="slit" :tax="sitem.tax" />
-          </el-col>
-
-          <el-col :span="24" class="t2"
+          <el-col :span="12" class="t2"
             >供应商名称：
             <el-tooltip
               class="item"
@@ -38,7 +30,15 @@
               <el-icon class="el-icon-warning-outline" />
             </el-tooltip>
             {{ sitem.supplierName }}</el-col
-          ><el-col :span="24" class="t2">品牌： {{ sitem.brand_name }}</el-col>
+          >
+          <el-col :span="12" class="t2">成本编号：{{ sitem.spuCode }}</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24" style="padding: 5px 0">
+            <showGoodPrice :price_list="slit" />
+          </el-col>
+          <el-col :span="24" class="t2">税率： {{ sitem.tax }}%</el-col>
+          <el-col :span="24" class="t2">品牌： {{ sitem.brand_name }}</el-col>
           <el-col :span="24" class="t2"
             >供货区域：
             {{ sitem.supply_area + "" === "1" ? "全国" : "除偏远地区" }}
@@ -91,7 +91,7 @@
 <script>
 export default {
   name: "goodPreview",
-  props: ["sitem", "newTime","origin_place"],
+  props: ["sitem", "newTime", "origin_place"],
   data() {
     return {
       img_list: [],
@@ -108,7 +108,6 @@ export default {
   created() {
     this.slit = [];
     this.img_list = [];
-    console.log(this.sitem.good_info_img);
     if (typeof this.sitem.good_info_img === "string") {
       this.img_list = (this.sitem.good_info_img || "").split(",");
     }
@@ -117,11 +116,11 @@ export default {
       (item) => item + "?t=" + this.generateRandomString(20)
     );
     if (this.sitem && this.sitem.nakelist) {
-      this.sitem.nakelist.forEach((si, i) => {
+      let arr = this.bubbleSort(this.sitem.nakelist);
+      arr.forEach((si, i) => {
         let sModel = {
           min: si.min_num,
-          max:
-            this.sitem.nakelist.length - 1 === i ? 0 : this.sitem.nakelist[i + 1].min_num,
+          max: arr.length - 1 === i ? 0 : arr[i + 1].min_num,
           price: si.nake_total,
         };
         this.slit.push(sModel);
@@ -130,6 +129,19 @@ export default {
     // nakelist
   },
   methods: {
+    bubbleSort(arr) {
+      for (var i = 0; i < arr.length - 1; i++) {
+        for (var j = 0; j < arr.length - i - 1; j++) {
+          if (Number(arr[j].min_num) > Number(arr[j + 1].min_num)) {
+            var temp = arr[j];
+            arr[j] = arr[j + 1];
+            arr[j + 1] = temp;
+          }
+        }
+      }
+      return arr;
+    },
+
     generateRandomString(length) {
       let str = Math.random()
         .toString(36)

src/views/goodStore/goodsOnline/components/goodPreview.vue

@@ -48,9 +48,9 @@
         </el-row>
         <el-row>
           <el-col :span="24" style="padding: 5px 0">
-            <showGoodPrice :price_list="slit" :tax="sitem.tax" />
+            <showGoodPrice :price_list="slit" />
           </el-col>
-
+          <el-col :span="24" class="t2">税率： {{ sitem.tax }}%</el-col>
           <el-col :span="24" class="t2">品牌： {{ sitem.brand_name }}</el-col>
           <el-col :span="24" class="t2"
             >供货区域：
@@ -138,13 +138,11 @@ export default {
       (item) => item + "?t=" + this.generateRandomString(20)
     );
     if (this.sitem && this.sitem.ladderlist) {
-      this.sitem.ladderlist.forEach((si, i) => {
+      let arr = this.bubbleSort(this.sitem.ladderlist);
+      arr.forEach((si, i) => {
         let sModel = {
           min: si.min_num,
-          max:
-            this.sitem.ladderlist.length - 1 === i
-              ? 0
-              : this.sitem.ladderlist[i + 1].min_num,
+          max: arr.length - 1 === i ? 0 : arr[i + 1].min_num,
           price: si.sale_price,
         };
         this.slit.push(sModel);
@@ -153,6 +151,19 @@ export default {
     // ladderlist
   },
   methods: {
+    bubbleSort(arr) {
+      for (var i = 0; i < arr.length - 1; i++) {
+        for (var j = 0; j < arr.length - i - 1; j++) {
+          if (Number(arr[j].min_num) > Number(arr[j + 1].min_num)) {
+            var temp = arr[j];
+            arr[j] = arr[j + 1];
+            arr[j + 1] = temp;
+          }
+        }
+      }
+      return arr;
+    },
+
     openMarkletUrl(url) {
       window.open(url);
     },