Merge branch 'v3.0-dev-before' of http://120.46.155.214:3000/xiaodai2022/order-ui-pc into v3.0-dev-before

src/components/globalComponents/aaa/index.vue → src/components/globalComponents/showGoodImg/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="box">
-    <div class="middle" @mouseover="mouseOverAndOut('block')" @mouseout="mouseOverAndOut('none')"
-      @mousemove="move($event)">
+    <div
+      class="middle"
+      @mouseover="mouseOverAndOut('block')"
+      @mouseout="mouseOverAndOut('none')"
+      @mousemove="move($event)"
+    >
       <img :src="src" />
       <div class="shade" />
       <div class="big">
@@ -11,13 +15,25 @@
 
     <div class="list-box">
       <div :class="{ 'is-contoller': isShowController }">
-        <i class="el-icon-arrow-left prev" v-if="isShowController" @click="moveTo('prev')" />
+        <i
+          class="el-icon-arrow-left prev"
+          v-if="isShowController"
+          @click="moveTo('prev')"
+        />
         <ul ref="horizontalRef">
-          <li v-for="(s, si) in img_list" @mouseenter="asd(si)" :class="s !== src ? 'a1' : 'a2'">
+          <li
+            v-for="(s, si) in img_list"
+            @mouseenter="asd(si)"
+            :class="s !== src ? 'a1' : 'a2'"
+          >
             <img :src="s" />
           </li>
         </ul>
-        <i class="el-icon-arrow-right next" v-if="isShowController" @click="moveTo('next')" />
+        <i
+          class="el-icon-arrow-right next"
+          v-if="isShowController"
+          @click="moveTo('next')"
+        />
       </div>
     </div>
   </div>
@@ -25,7 +41,7 @@
 <script>
 import resToken from "@/mixins/resToken";
 export default {
-  name: "aaa",
+  name: "showGoodImg",
   props: ["pList"],
   mixins: [resToken],
   data() {
@@ -37,7 +53,7 @@ export default {
   computed: {
     isShowController() {
       return this.img_list.length >= 7;
-    }
+    },
   },
   created() {
     this.img_list = [];
@@ -47,14 +63,18 @@ export default {
       this.img_list = this.pList;
     }
 
-    this.img_list = this.img_list.map(item => item + "?t=" + this.generateRandomString(20))
+    this.img_list = this.img_list.map(
+      (item) => item + "?t=" + this.generateRandomString(20)
+    );
     if (this.img_list.length > 0) {
       this.src = this.img_list[0];
     }
   },
   methods: {
     generateRandomString(length) {
-      let str = Math.random().toString(36).substring(2, length + 2);
+      let str = Math.random()
+        .toString(36)
+        .substring(2, length + 2);
       return str;
     },
     asd(index) {
@@ -65,66 +85,65 @@ export default {
       box.querySelector(".shade").style.display = val;
       box.querySelector(".big").style.display = val;
     },
-    moveTo(mode = "prev"){
+    moveTo(mode = "prev") {
       const horizontalRef = this.$refs.horizontalRef;
       const cW = horizontalRef.clientWidth;
       const sW = horizontalRef.scrollWidth;
       const sL = horizontalRef.scrollLeft;
 
-      if(mode === "next"){
+      if (mode === "next") {
         // 前进越界
-        if(sL + cW >= sW ) return;
+        if (sL + cW >= sW) return;
         const offset = sW - (cW + sL) >= cW ? cW : sW - (cW + sL);
         // horizontalRef.scrollTo({left:sL + offset,  behavior: 'smooth'})
-        this.animationToNext(sL,sL + offset)
+        this.animationToNext(sL, sL + offset);
       }
 
-      if(mode === "prev"){
+      if (mode === "prev") {
         // 后退越界
-        if(sL <= 0) return;
+        if (sL <= 0) return;
         const offset = sL - cW >= 0 ? cW : sL;
         // horizontalRef.scrollTo({ left:sL - offset, behavior: 'smooth'})
-        this.animationToPrev(sL,sL - offset)
+        this.animationToPrev(sL, sL - offset);
       }
-
     },
 
-    animationToNext(source , current){
+    animationToNext(source, current) {
       const horizontalRef = this.$refs.horizontalRef;
-      if(current === source){
-        return
+      if (current === source) {
+        return;
       }
 
       window.requestAnimationFrame(() => {
         const cha = current - source > 10 ? 10 : current - source;
 
-        horizontalRef.scrollTo({ left:source + cha})
-        this.animationToNext(source + cha,current)
-      })
+        horizontalRef.scrollTo({ left: source + cha });
+        this.animationToNext(source + cha, current);
+      });
     },
-    animationToPrev(source , current){
-      console.log(source,current)
+    animationToPrev(source, current) {
+      console.log(source, current);
       const horizontalRef = this.$refs.horizontalRef;
-      if(current === source){
-        return
+      if (current === source) {
+        return;
       }
 
       window.requestAnimationFrame(() => {
         const cha = source - current > 10 ? 10 : source - current;
-        horizontalRef.scrollTo({ left:source - cha})
-        this.animationToPrev(source - cha,current)
-      })
+        horizontalRef.scrollTo({ left: source - cha });
+        this.animationToPrev(source - cha, current);
+      });
     },
     move(evnt) {
       //小图元素
-      const smallElm = document.querySelector(".middle")
+      const smallElm = document.querySelector(".middle");
       // 大图元素
-      const bigElm = document.querySelector(".big")
+      const bigElm = document.querySelector(".big");
       // 大图图片元素
       const bigImgElm = document.querySelector(".big>img");
       //遮罩层元素
-      const maskElm = document.querySelector(".shade")
-      //得到找着相对于小图的偏移量 
+      const maskElm = document.querySelector(".shade");
+      //得到找着相对于小图的偏移量
       const { left, top } = smallElm.getBoundingClientRect();
       let s_left = evnt.pageX - maskElm.offsetWidth / 2 - left;
       let s_top = evnt.pageY - maskElm.offsetHeight / 2 - top;
@@ -141,22 +160,22 @@ export default {
       if (s_left < 0) {
         s_left = 0;
       } else if (s_left > max_left) {
-        s_left = max_left
+        s_left = max_left;
       }
       // 判断垂直边界
       if (s_top <= 0) {
-        s_top = 0
+        s_top = 0;
       } else if (s_top > max_top) {
-        s_top = max_top
+        s_top = max_top;
       }
       // 遮罩层的left和top赋值
-      maskElm.style.left = s_left + "px"
+      maskElm.style.left = s_left + "px";
       maskElm.style.top = s_top + "px";
       // bigImgElm的移动距离
       let horizontal = -n * s_left;
       let vertical = -n * s_top;
-      bigImgElm.style.left = horizontal + "px"
-      bigImgElm.style.top = vertical + "px"
+      bigImgElm.style.left = horizontal + "px";
+      bigImgElm.style.top = vertical + "px";
     },
   },
 };
@@ -166,22 +185,25 @@ export default {
 .box {
   width: 100%;
   .middle {
-    width: 400px;
-    height: 400px;
+    width: 402px;
+    height: 402px;
     border: 1px solid #e8e8e8;
     position: relative;
     float: left;
+    margin: 0 0 12px 0;
+    box-sizing: border-box;
 
-    &>img {
+    & > img {
       display: inline;
       width: 400px;
       height: 400px;
+      box-sizing: border-box;
     }
 
     .shade {
       width: 200px;
       height: 200px;
-      background-color: rgba(0, 0, 0, 0.3);
+      background-color: rgba(64, 158, 255, 0.3);
       position: absolute;
       left: 0;
       top: 0;
@@ -192,9 +214,11 @@ export default {
     .big {
       width: 400px;
       height: 400px;
+      background: #fff;
       position: absolute;
       left: 105%;
       top: 0;
+      z-index: 9999;
       overflow: hidden;
       display: none;
       border: 1px solid #e8e8e8;
@@ -227,14 +251,13 @@ export default {
       margin-left: 0px;
       justify-content: flex-start;
 
-
       .prev,
       .next {
         font-size: 16px;
         font-weight: 600;
         display: flex;
         align-items: center;
-        cursor:pointer;
+        cursor: pointer;
       }
 
       ul {
@@ -242,7 +265,7 @@ export default {
         overflow: hidden;
         scroll-bahavior: smooth;
         // width: 100%;
-        flex:1;
+        flex: 1;
 
         li {
           margin: 0 5px 0 0;
@@ -252,7 +275,7 @@ export default {
           }
 
           &.a2 {
-            border: 2px solid #f00;
+            border: 2px solid #409eff;
           }
 
           img {

src/components/globalComponents/showGoodPrice/index.vue

@@ -0,0 +1,64 @@
+<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>
+      <div class="my-table-li-bottom">{{ si.price }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "showGoodPrice",
+  props: ["price_list", "tax"],
+  data() {
+    return {};
+  },
+  watch: {
+    // newTime: function (val) {
+    //   if (val) {
+    //     this.initForm();
+    //   }
+    // },
+  },
+};
+</script>
+
+<style scoped>
+.my-table {
+  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);
+    }
+  }
+}
+</style>

src/views/goodStore/goodsCost/columns.js

@@ -700,7 +700,7 @@ const basicColumns = [
   },
   {
     prop: 'good_size',
-    label: '装箱尺寸',
+    label: '商品尺寸',
     span: 6
   },
   {

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

@@ -1,18 +1,89 @@
 <template>
-  <el-row style="width: 1200px;margin:10px 0 " v-if="sitem && sitem.id">
-    <el-col :span="24"
-      >
+  <el-row v-if="sitem && sitem.id" class="goodPreview-main clear">
+    <el-col :span="24">
       <div class="good-img">
-        <aaa :pList="sitem && sitem.good_img ? sitem.good_img + testHiddenString : ''" />
+        <showGoodImg :pList="sitem && sitem.good_img ? sitem.good_img : ''" />
       </div>
-      <div class="good-img2">
-        商品参数区域
+      <div class="parameter">
+        <el-row>
+          <el-col :span="24" class="good_name">{{ sitem.good_name }}</el-col>
+          <el-col :span="12" class="t2"
+            >业务公司：
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="sitem.companyNo"
+              placement="top"
+            >
+              <el-icon class="el-icon-warning-outline" />
+            </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-tooltip
+              class="item"
+              effect="dark"
+              :content="sitem.supplierNo"
+              placement="top"
+            >
+              <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="24" class="t2"
+            >供货区域：
+            {{ sitem.supply_area + "" === "1" ? "全国" : "除偏远地区" }}
+          </el-col>
+          <el-col :span="24" class="t2">供货周期： {{ sitem.lead_time }}天</el-col>
+          <el-col :span="24" class="t2">产地： {{ origin_place }}</el-col>
+          <el-col :span="24" class="t2"
+            >售后说明：
+
+            {{ sitem.after_sales }}</el-col
+          >
+          <el-col :span="24" class="t2"
+            >创建时间：
+
+            {{ sitem.addtime }}</el-col
+          >
+        </el-row>
       </div>
-      </el-col>
-   
-    <el-col :span="24"
-      >商品详情区域
-      <!-- <div>{{ sitem }}</div> -->
+    </el-col>
+
+    <el-col :span="24" class="info-parameter">
+      <el-row>
+        <el-col :span="24" class="t2"
+          >规格：
+          <span v-for="(si, ii) in sitem.speclist" :key="si + ii">{{
+            ii === 0 ? si.spec_value : "-" + si.spec_value
+          }}</span>
+        </el-col>
+        <el-col :span="6" class="t2">包装方式：{{ sitem.packing_way }}</el-col>
+        <el-col :span="6" class="t2">装箱规格：{{ sitem.packing_spec }}</el-col>
+        <el-col :span="6" class="t2">装箱重量：{{ sitem.packing_weight }}g</el-col>
+        <el-col :span="6" class="t2">装箱尺寸：{{ sitem.packing_size }}</el-col>
+        <el-col :span="6" class="t2">商品尺寸：{{ sitem.good_size }}</el-col>
+        <el-col :span="6" class="t2">商品清单：{{ sitem.packing_list }}</el-col>
+      </el-row>
+    </el-col>
+    <el-col :span="24" class="info-img clear" style="margin: 5px 0 0 0">
+      <img
+        :src="si"
+        alt=""
+        class="fl"
+        style="width: 100%"
+        v-for="(si, i) in img_list"
+        :key="si + i"
+      />
     </el-col>
   </el-row>
 </template>
@@ -20,10 +91,11 @@
 <script>
 export default {
   name: "goodPreview",
-  props: ["sitem", "newTime"],
+  props: ["sitem", "newTime","origin_place"],
   data() {
     return {
-      testHiddenString:',http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/01_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/02_20230917112524.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/主图1_20230917114404.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/主图2_20230917114405.jpg,http://stock.api.caixiao365.com/storage/topic/20230917/主图3_20230917114405.jpg'
+      img_list: [],
+      slit: [],
     };
   },
   watch: {
@@ -33,18 +105,72 @@ 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(",");
+    }
+
+    this.img_list = this.img_list.map(
+      (item) => item + "?t=" + this.generateRandomString(20)
+    );
+    if (this.sitem && this.sitem.nakelist) {
+      this.sitem.nakelist.forEach((si, i) => {
+        let sModel = {
+          min: si.min_num,
+          max:
+            this.sitem.nakelist.length - 1 === i ? 0 : this.sitem.nakelist[i + 1].min_num,
+          price: si.nake_total,
+        };
+        this.slit.push(sModel);
+      });
+    }
+    // nakelist
+  },
+  methods: {
+    generateRandomString(length) {
+      let str = Math.random()
+        .toString(36)
+        .substring(2, length + 2);
+      return str;
+    },
+  },
 };
 </script>
 
 <style scoped>
-.good-img{
-  float: left;
-  width: 420px;
-  height: 550px;
-}
-.good-img2{
-  float: left;
-  width: calc(100% - 420px);
-  height: 550px;
+.goodPreview-main {
+  width: 1200px;
+  max-width: 1200px;
+  margin: 10px 0;
+  text-align: left;
+  .t2 {
+    font-size: 14px;
+    line-height: 32px;
+  }
+  .good-img {
+    float: left;
+    width: 420px;
+    height: 510px;
+  }
+  .parameter {
+    float: left;
+    width: calc(100% - 420px);
+    height: 510px;
+    .good_name {
+      line-height: 38px;
+      height: 38px;
+      font-size: 19px;
+      font-weight: bold;
+    }
+  }
+
+  .info-img {
+    width: 100%;
+    overflow: hidden;
+    float: left;
+  }
 }
 </style>

src/views/goodStore/goodsCost/detail.vue

@@ -3,16 +3,14 @@
     <div class="goodsCostDetail-main" v-if="powers.some((i) => i == '007')">
       <el-tabs v-model="activeTabs">
         <el-tab-pane label="新建商品成本" name="0" v-if="queryType === 'add'">
-          <base-form-normal 
-                  v-if="(newTime !== '')"
-                 :type="queryType"
-                 :id="queryId"
-                 :newTime="newTime"
-                 :sitem="sitem"
-                 @refresh="refresh"
-               />
-          
-
+          <base-form-normal
+            v-if="newTime !== ''"
+            :type="queryType"
+            :id="queryId"
+            :newTime="newTime"
+            :sitem="sitem"
+            @refresh="refresh"
+          />
         </el-tab-pane>
         <el-tab-pane label="商品成本详情" name="1" v-if="queryType !== 'add'">
           <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
@@ -25,7 +23,7 @@
             >
               <el-collapse-item title="商品成本详情" name="0">
                 <base-form
-                  v-if="(newTime !== '' && createSource === '1')"
+                  v-if="newTime !== '' && createSource === '1'"
                   :type="queryType"
                   :id="queryId"
                   :newTime="newTime"
@@ -33,8 +31,8 @@
                   @refresh="refresh"
                 />
 
-                <base-form-normal 
-                   v-if="(newTime !== '' && createSource === '0')"
+                <base-form-normal
+                  v-if="newTime !== '' && createSource === '0'"
                   :type="queryType"
                   :id="queryId"
                   :newTime="newTime"
@@ -52,9 +50,15 @@
                       <div style="max-height: 24px; overflow: hidden">
                         <el-image
                           style="height: 24px; width: 24px; margin-right: 5px"
-                          v-for="(img, index) in Array.isArray(sitem.good_img) ? sitem.good_img : sitem.good_img.split(',')"
+                          v-for="(img, index) in Array.isArray(sitem.good_img)
+                            ? sitem.good_img
+                            : sitem.good_img.split(',')"
                           :src="img"
-                          :preview-src-list="Array.isArray(sitem.good_img) ? sitem.good_img : sitem.good_img.split(',')"
+                          :preview-src-list="
+                            Array.isArray(sitem.good_img)
+                              ? sitem.good_img
+                              : sitem.good_img.split(',')
+                          "
                           :key="index"
                         />
                       </div>
@@ -62,32 +66,41 @@
                   </template>
 
                   <template slot="create_source">
-                    <el-tag size="mini" :type="sitem.create_source === '1' ? 'warning' : ''">
-                       {{ sitem.create_source === "1" ? "咨询成交商品" : "手动创建商品" }}
-                    </el-tag> <span v-if="Number(sitem.create_source) === 1">,咨询采购价 {{ sitem.cgd_price }}</span>
+                    <el-tag
+                      size="mini"
+                      :type="sitem.create_source === '1' ? 'warning' : ''"
+                    >
+                      {{ sitem.create_source === "1" ? "咨询成交商品" : "手动创建商品" }}
+                    </el-tag>
+                    <span v-if="Number(sitem.create_source) === 1"
+                      >,咨询采购价 {{ sitem.cgd_price }}</span
+                    >
                   </template>
 
                   <template slot="is_combind">
-                    {{ String(sitem.is_combind) === '1' ? '组合商品' : '非组合商品' }}
+                    {{ String(sitem.is_combind) === "1" ? "组合商品" : "非组合商品" }}
                   </template>
 
                   <template slot="packing_spec">
-                    <el-tag
-                      size="mini"
-                    >{{ ( options6.find(({id}) => id === sitem.supply_area) || {}).name || '--' }}</el-tag>
+                    <el-tag size="mini">{{
+                      (options6.find(({ id }) => id === sitem.supply_area) || {}).name ||
+                      "--"
+                    }}</el-tag>
                   </template>
 
                   <template slot="is_auth">
-                    <el-tag
-                      size="mini"
-                    >{{ (options3.find(({id}) => id === sitem.is_auth) || {}).name || '--' }}</el-tag>
+                    <el-tag size="mini">{{
+                      (options3.find(({ id }) => id === sitem.is_auth) || {}).name || "--"
+                    }}</el-tag>
                   </template>
 
                   <template slot="good_info_img">
                     <div style="max-height: 24px; overflow: hidden">
                       <el-image
-                        v-for="imgSrc in sitem.good_info_img ? sitem.good_info_img.split(',') : []"
-                        style="height: 24px; width: 24px;margin-right: 5px"
+                        v-for="imgSrc in sitem.good_info_img
+                          ? sitem.good_info_img.split(',')
+                          : []"
+                        style="height: 24px; width: 24px; margin-right: 5px"
                         :src="imgSrc"
                         :preview-src-list="[imgSrc]"
                       />
@@ -96,9 +109,9 @@
 
                   <template slot="cat_info">
                     {{
-                    sitem.cat_info
-                    ? sitem.cat_info.map(({ name }) => name).join("_")
-                    : "--"
+                      sitem.cat_info
+                        ? sitem.cat_info.map(({ name }) => name).join("_")
+                        : "--"
                     }}
                   </template>
 
@@ -131,31 +144,29 @@
                   <template slot="noble">
                     <span v-if="sitem.noble_metal">
                       {{ sitem.noble_weight ? sitem.noble_weight : "0" }}g-{{
-                      sitem.noble_name
+                        sitem.noble_name
                       }}-{{ sitem.gold_price ? sitem.gold_price : "0" }}元/g-{{
-                      sitem.is_gold_price + "" === "0" ? "不" : ""
+                        sitem.is_gold_price + "" === "0" ? "不" : ""
                       }}启用实时金价-{{ sitem.is_diff + "" === "1" ? "有" : "无" }}工差-{{
-                      sitem.config
+                        sitem.config
                       }}-{{ sitem.other_config }}
                     </span>
                   </template>
 
                   <template slot="weight">{{ sitem.weight }}g</template>
                   <template slot="tax">{{ sitem.tax }}%</template>
-                  <template slot="is_stock">{{ String(sitem.is_stock) === "0" ? "非库存品" : "库存品" }}</template>
-                  <template
-                    slot="is_exclusive"
-                  >{{ String(sitem.is_exclusive) === "0" ? "非泰康" : "泰康" }}</template>
+                  <template slot="is_stock">{{
+                    String(sitem.is_stock) === "0" ? "非库存品" : "库存品"
+                  }}</template>
+                  <template slot="is_exclusive">{{
+                    String(sitem.is_exclusive) === "0" ? "非泰康" : "泰康"
+                  }}</template>
                   <template slot="noble_weight">{{ sitem.noble_weight }}g</template>
                   <template slot="is_gold_price">
-                    {{
-                    String(sitem.is_gold_price) === "1" ? "是" : "否"
-                    }}
+                    {{ String(sitem.is_gold_price) === "1" ? "是" : "否" }}
                   </template>
                   <template slot="is_diff">
-                    {{
-                    String(sitem.is_diff) === "1" ? "有公差" : "无工差"
-                    }}
+                    {{ String(sitem.is_diff) === "1" ? "有公差" : "无工差" }}
                   </template>
 
                   <template slot="packing_weight">{{ sitem.packing_weight }}g</template>
@@ -173,8 +184,17 @@
                 v-if="sitem.combind_list && sitem.combind_list.length > 0"
                 name="4"
               >
-                <el-table :data="sitem.combind_list" size="mini" border max-height="350px">
-                  <el-table-column label="子商品成本编号" prop="childCode" min-width="160px" />
+                <el-table
+                  :data="sitem.combind_list"
+                  size="mini"
+                  border
+                  max-height="350px"
+                >
+                  <el-table-column
+                    label="子商品成本编号"
+                    prop="childCode"
+                    min-width="160px"
+                  />
                   <el-table-column
                     label="子商品名称"
                     prop="child_name"
@@ -195,7 +215,11 @@
                 </el-table>
               </el-collapse-item>
 
-              <el-collapse-item title="固定与阶梯成本" name="2" v-if="isDisplayPrivateField('1')">
+              <el-collapse-item
+                title="固定与阶梯成本"
+                name="2"
+                v-if="isDisplayPrivateField('1')"
+              >
                 <show-data-table :columns="ladderColumns" :sitem="sitem">
                   <template slot="demo_fee">{{ sitem.demo_fee }}元</template>
                   <template slot="open_fee">{{ sitem.open_fee }}元</template>
@@ -241,7 +265,12 @@
         </el-tab-pane>
 
         <el-tab-pane label="最近修改记录" name="2" v-if="queryType !== 'add'">
-          <type-change-item v-if="newTime !== ''" :newTime="newTime" :type="'3'" :code="queryId" />
+          <type-change-item
+            v-if="newTime !== ''"
+            :newTime="newTime"
+            :type="'3'"
+            :code="queryId"
+          />
         </el-tab-pane>
 
         <el-tab-pane label="审批记录" name="3" v-if="queryType !== 'add'">
@@ -257,9 +286,15 @@
           <flow-chart process_id="15" type="SPCB" :orderCode="queryId" />
         </el-tab-pane>
         <el-tab-pane label="商品预览" name="5" v-if="queryType !== 'add'">
-          <good-preview v-if="newTime !== ''"
-            :newTime="newTime"
-                  :sitem="sitem"/>
+          <div class="good-preview-box">
+            <good-preview
+              style="margin: 0 auto"
+              v-if="newTime !== ''"
+              :newTime="newTime"
+              :sitem="sitem"
+              :origin_place="origin_place"
+            />
+          </div>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -294,7 +329,7 @@ import {
   imageColumns,
   sendColumns,
   options3,
-  options6
+  options6,
 } from "./columns";
 
 export default {
@@ -306,33 +341,25 @@ export default {
     ProductModal,
     baseForm,
     costForm,
-    goodPreview
+    goodPreview,
   },
   computed: {
-    ...mapGetters([
-      "tablebtnSize",
-      "searchSize",
-      "size",
-      "private_field",
-      "originLevel"
-    ]),
-    createSource(){
-      return this.$route.query.createSource
+    ...mapGetters(["tablebtnSize", "searchSize", "size", "private_field", "originLevel"]),
+    createSource() {
+      return this.$route.query.createSource;
     },
     powers() {
       const { btnList } = this.$store.getters;
-      const tran =
-        btnList.find(item => item.menu_route == "goodsCostDetail") || {};
+      const tran = btnList.find((item) => item.menu_route == "goodsCostDetail") || {};
       const { action } = tran ?? {};
       return action ?? [];
     },
     ppowers() {
       const tran =
-        this.$store.getters.roleProcess.find(i => i.process_type === "SPCB") ||
-        {};
+        this.$store.getters.roleProcess.find((i) => i.process_type === "SPCB") || {};
       const { action } = tran ?? {};
       return action ?? [];
-    }
+    },
   },
 
   data() {
@@ -359,7 +386,7 @@ export default {
       editItem: null,
       editIndex: -1,
       visible: false,
-      modalType: ""
+      modalType: "",
     };
   },
   mounted() {
@@ -369,8 +396,7 @@ export default {
     onChildProdChange(index = null, type = "view") {
       this.modalType = type;
 
-      this.editItem =
-        index === null ? null : { ...this.sitem.combind_list[index] };
+      this.editItem = index === null ? null : { ...this.sitem.combind_list[index] };
 
       this.editIndex = index === null ? -1 : index;
       this.visible = true;
@@ -413,11 +439,9 @@ export default {
     },
     async getArea(prop = "delivery_place") {
       const chunks = this.sitem[prop].split(",");
-      if(chunks.length !== 3) return ""
+      if (chunks.length !== 3) return "";
       let { data: province } = await asyncRequest.province();
-      province = province.find(
-        ({ province_code }) => province_code === chunks[0]
-      );
+      province = province.find(({ province_code }) => province_code === chunks[0]);
       let { data: city } = await asyncRequest.city({ code: chunks[0] });
       city = city.find(({ city_code }) => city_code === chunks[1]);
       let { data: area } = await asyncRequest.area({ code: chunks[1] });
@@ -428,19 +452,19 @@ export default {
       await this.$confirm(`确定要${detail}？`, {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
         .then(async () => {
           let _model = {
             spuCode: this.queryId,
             status: type,
-            remark: remark
+            remark: remark,
           };
           let res = await asyncRequest.status(_model);
           if (res && res.code === 0) {
             this.$notify.success({
               title: "提交成功！",
-              message: ""
+              message: "",
             });
             await this.initForm();
           } else if (res && res.code >= 100 && res.code <= 104) {
@@ -462,7 +486,7 @@ export default {
     async initData() {
       this.loading = true;
       const { code, message, data } = await asyncRequest.detail({
-        spuCode: this.queryId
+        spuCode: this.queryId,
       });
 
       this.loading = false;
@@ -479,8 +503,8 @@ export default {
     },
     getNewTime() {
       this.newTime = new Date().valueOf();
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -523,4 +547,10 @@ export default {
     border-left: 1px solid #dcdfe6;
   }
 }
+.goodsCostDetail-main {
+  .good-preview-box {
+    text-align: center;
+    box-sizing: border-box;
+  }
+}
 </style>

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

@@ -0,0 +1,202 @@
+<template>
+  <el-row v-if="sitem && sitem.id" class="goodPreview-main clear">
+    <el-col :span="24">
+      <div class="good-img">
+        <showGoodImg :pList="sitem && sitem.good_img ? sitem.good_img : ''" />
+      </div>
+      <div class="parameter">
+        <el-row>
+          <el-col :span="24" class="good_name">{{ sitem.good_name }}</el-col>
+          <el-col :span="12" class="t2"
+            >平台名称：
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="sitem.platform_code_en"
+              placement="top"
+            >
+              <el-icon class="el-icon-warning-outline" /> </el-tooltip
+            >{{ sitem.platform_name }}</el-col
+          >
+          <el-col :span="12" class="t2">平台商品编号：{{ sitem.plat_code }}</el-col>
+          <el-col :span="12" class="t2"
+            >业务公司：
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="sitem.companyNo"
+              placement="top"
+            >
+              <el-icon class="el-icon-warning-outline" />
+            </el-tooltip>
+            {{ sitem.companyName }}</el-col
+          >
+          <el-col :span="12" class="t2">上线商品编号：{{ sitem.skuCode }}</el-col>
+          <el-col :span="12" class="t2"
+            >供应商名称：
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="sitem.supplierNo"
+              placement="top"
+            >
+              <el-icon class="el-icon-warning-outline" />
+            </el-tooltip>
+            {{ sitem.supplierName }}</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">品牌： {{ sitem.brand_name }}</el-col>
+          <el-col :span="24" class="t2"
+            >供货区域：
+            {{ sitem.supply_area + "" === "1" ? "全国" : "除偏远地区" }}
+          </el-col>
+          <el-col :span="24" class="t2">供货周期： {{ sitem.lead_time }}天</el-col>
+          <el-col :span="24" class="t2">产地： {{ sitem.origin_place_cn }}</el-col>
+          <el-col :span="24" class="t2"
+            >京东链接：
+            <el-button type="text" size="mini" @click="openMarkletUrl(sitem.market_url)">
+              {{ sitem.market_url }}</el-button
+            ></el-col
+          >
+          <el-col :span="24" class="t2"
+            >售后说明：
+
+            {{ sitem.after_sales }}</el-col
+          >
+          <el-col :span="24" class="t2"
+            >创建时间：
+
+            {{ sitem.addtime }}</el-col
+          >
+        </el-row>
+      </div>
+    </el-col>
+
+    <el-col :span="24" class="info-parameter">
+      <el-row>
+        <el-col :span="24" class="t2"
+          >规格：
+          <span v-for="(si, ii) in sitem.speclist" :key="si + ii">{{
+            ii === 0 ? si.spec_value : "-" + si.spec_value
+          }}</span>
+        </el-col>
+        <el-col :span="6" class="t2">包装方式：{{ sitem.packing_way }}</el-col>
+        <el-col :span="6" class="t2">装箱规格：{{ sitem.packing_spec }}</el-col>
+        <el-col :span="6" class="t2">装箱重量：{{ sitem.packing_weight }}g</el-col>
+        <el-col :span="6" class="t2">装箱尺寸：{{ sitem.packing_size }}</el-col>
+        <el-col :span="6" class="t2">商品尺寸：{{ sitem.good_size }}</el-col>
+        <el-col :span="6" class="t2">商品清单：{{ sitem.packing_list }}</el-col>
+      </el-row>
+    </el-col>
+    <el-col :span="24" class="info-img clear" style="margin: 5px 0 0 0">
+      <img
+        :src="si"
+        alt=""
+        class="fl"
+        style="width: 100%"
+        v-for="(si, i) in img_list"
+        :key="si + i"
+      />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: "goodPreview",
+  props: ["sitem", "newTime"],
+  data() {
+    return {
+      img_list: [],
+      slit: [],
+    };
+  },
+  watch: {
+    // newTime: function (val) {
+    //   if (val) {
+    //     this.initForm();
+    //   }
+    // },
+  },
+  created() {
+    this.slit = [];
+
+    this.img_list = [];
+    if (typeof this.sitem.good_info_img === "string") {
+      this.img_list = (this.sitem.good_info_img || "").split(",");
+    } else {
+      this.img_list = this.sitem.good_info_img;
+    }
+
+    this.img_list = this.img_list.map(
+      (item) => item + "?t=" + this.generateRandomString(20)
+    );
+    if (this.sitem && this.sitem.ladderlist) {
+      this.sitem.ladderlist.forEach((si, i) => {
+        let sModel = {
+          min: si.min_num,
+          max:
+            this.sitem.ladderlist.length - 1 === i
+              ? 0
+              : this.sitem.ladderlist[i + 1].min_num,
+          price: si.sale_price,
+        };
+        this.slit.push(sModel);
+      });
+    }
+    // ladderlist
+  },
+  methods: {
+    openMarkletUrl(url) {
+      window.open(url);
+    },
+    generateRandomString(length) {
+      let str = Math.random()
+        .toString(36)
+        .substring(2, length + 2);
+      return str;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.goodPreview-main {
+  width: 1200px;
+  max-width: 1200px;
+  margin: 10px 0;
+  text-align: left;
+  .t2 {
+    font-size: 14px;
+    line-height: 32px;
+  }
+  .good-img {
+    float: left;
+    width: 420px;
+    height: 510px;
+  }
+  .parameter {
+    float: left;
+    width: calc(100% - 420px);
+    height: 510px;
+    .good_name {
+      line-height: 38px;
+      height: 38px;
+      font-size: 19px;
+      font-weight: bold;
+    }
+  }
+
+  .info-img {
+    width: 100%;
+    overflow: hidden;
+    float: left;
+  }
+}
+</style>

src/views/goodStore/goodsOnline/detail.vue

@@ -20,7 +20,8 @@
                   >
                     <video width="275" controls class="fl">
                       <source :src="sitem.proof.proof_url" type="video/mp4" />
-                      <source :src="sitem.proof.proof_url" type="video/avi" />您的浏览器不支持Video标签。
+                      <source :src="sitem.proof.proof_url" type="video/avi" />
+                      您的浏览器不支持Video标签。
                     </video>
                     <i
                       class="el-icon-video-camera-solid hover"
@@ -41,13 +42,18 @@
                     v-else-if="sitem.proof.proof_type + '' === '3'"
                     :href="sitem.proof.proof_url"
                     download="凭证文件"
-                  >点击下载</a>
+                    >点击下载</a
+                  >
                   <span v-else>暂无凭证</span>
                 </template>
 
-                <template slot="is_combind">{{String(sitem.is_combind) === '1' ? '组合商品' : '非组合商品'}}</template>
+                <template slot="is_combind">{{
+                  String(sitem.is_combind) === "1" ? "组合商品" : "非组合商品"
+                }}</template>
 
-                <tempalte slot="is_fixed">{{String(sitem.is_fixed) === "0" ? '实时金价' : '一口价'}}</tempalte>
+                <tempalte slot="is_fixed">{{
+                  String(sitem.is_fixed) === "0" ? "实时金价" : "一口价"
+                }}</tempalte>
 
                 <template slot="good_name">
                   <img
@@ -113,7 +119,9 @@
                 </template>
 
                 <template slot="market_url">
-                 <el-button type="text" size="mini" @click="openMarkletUrl"> {{sitem.market_url}}</el-button>
+                  <el-button type="text" size="mini" @click="openMarkletUrl">
+                    {{ sitem.market_url }}</el-button
+                  >
                 </template>
 
                 <template slot="good_info_img">
@@ -142,10 +150,16 @@
                   />
                 </template>
                 <template slot="create_source">
-                    <el-tag size="mini" :type="sitem.create_source === '1' ? 'warning' : ''">
-                       {{ sitem.create_source === "1" ? "咨询成交商品" : "手动创建商品" }}
-                    </el-tag> <span v-if="Number(sitem.create_source) === 1">,咨询销售价 {{ sitem.sale_price }}</span>
-                  </template>
+                  <el-tag
+                    size="mini"
+                    :type="sitem.create_source === '1' ? 'warning' : ''"
+                  >
+                    {{ sitem.create_source === "1" ? "咨询成交商品" : "手动创建商品" }}
+                  </el-tag>
+                  <span v-if="Number(sitem.create_source) === 1"
+                    >,咨询销售价 {{ sitem.sale_price }}</span
+                  >
+                </template>
                 <template slot="is_stock">
                   <el-tag
                     :size="'mini'"
@@ -176,19 +190,18 @@
                       '--'
                     "
                   />
-                  <span
-                    v-if="sitem.good_type + '' === '1'"
-                    style="padding: 0 0 0 5px"
-                  >{{ sitem.moq }}起订/工期{{ sitem.customized }}天</span>
+                  <span v-if="sitem.good_type + '' === '1'" style="padding: 0 0 0 5px"
+                    >{{ sitem.moq }}起订/工期{{ sitem.customized }}天</span
+                  >
                 </template>
                 <template slot="noble">
                   <span v-if="sitem.noble_metal">
                     {{ sitem.noble_weight ? sitem.noble_weight : "0" }}g-{{
-                    sitem.noble_name
+                      sitem.noble_name
                     }}-{{ sitem.gold_price ? sitem.gold_price : "0" }}元/g-{{
-                    sitem.is_gold_price === "0" ? "不" : ""
+                      sitem.is_gold_price === "0" ? "不" : ""
                     }}启用实时金价-{{ sitem.is_diff === "1" ? "有" : "无" }}工差-{{
-                    sitem.config
+                      sitem.config
                     }}-{{ sitem.other_config }}
                   </span>
                 </template>
@@ -286,9 +299,7 @@
                     <el-table-column prop="market_platform" label="对比平台" />
                     <el-table-column prop="status" label="状态">
                       <template slot-scope="scope">
-                        {{
-                        scope.row.status + "" === "1" ? "启用" : "禁用"
-                        }}
+                        {{ scope.row.status + "" === "1" ? "启用" : "禁用" }}
                       </template>
                     </el-table-column>
                   </el-table>
@@ -329,12 +340,22 @@
         </el-tab-pane>
 
         <el-tab-pane label="审批备注" name="3">
-          <process-remark-time-line v-if="newTime !== ''" :newTime="newTime" :skuCode="queryId" />
+          <process-remark-time-line
+            v-if="newTime !== ''"
+            :newTime="newTime"
+            :skuCode="queryId"
+          />
         </el-tab-pane>
 
         <el-tab-pane label="流程图" name="4">
           <flow-chart process_id="16" type="SPSX" :orderCode="queryId" />
         </el-tab-pane>
+        <el-tab-pane label="商品预览" name="5" v-if="newTime !== ''">
+          <div class="good-preview-box">
+            <!-- :origin_place="origin_place" -->
+            <good-preview style="margin: 0 auto" :newTime="newTime" :sitem="sitem" />
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>
@@ -351,12 +372,8 @@ import { isArray } from "@/utils/validate";
 import onlineForm from "./components/online-form";
 import FixedPriceForm from "./components/fixed-price-form.vue";
 import privateField from "@/mixins/privateField";
-
-import {
-  purchase_listCol,
-  public_listCol,
-  sale_listCol
-} from "./ShowDataTableColumns";
+import goodPreview from "./components/goodPreview";
+import { purchase_listCol, public_listCol, sale_listCol } from "./ShowDataTableColumns";
 
 import {
   options1,
@@ -366,7 +383,7 @@ import {
   options5,
   options6,
   options7,
-  options8
+  options8,
 } from "./columns";
 export default {
   name: "goodsOnlineDetail",
@@ -374,31 +391,25 @@ export default {
   components: {
     onlineForm,
     processRemarkTimeLine,
-    FixedPriceForm
+    FixedPriceForm,
+    goodPreview,
   },
   computed: {
-    ...mapGetters([
-      "tablebtnSize",
-      "searchSize",
-      "size",
-      "private_field",
-      "isSupertube"
-    ]),
+    ...mapGetters(["tablebtnSize", "searchSize", "size", "private_field", "isSupertube"]),
     powers() {
       const tran =
         this.$store.getters.btnList.find(
-          item => item.menu_route == "goodsOnlineDetail"
+          (item) => item.menu_route == "goodsOnlineDetail"
         ) || {};
       const { action } = tran ?? {};
       return action ?? [];
     },
     ppowers() {
       const tran =
-        this.$store.getters.roleProcess.find(i => i.process_type === "SPSX") ||
-        {};
+        this.$store.getters.roleProcess.find((i) => i.process_type === "SPSX") || {};
       const { action } = tran ?? {};
       return action ?? [];
-    }
+    },
   },
 
   data() {
@@ -425,15 +436,15 @@ export default {
       queryType: "",
       queryId: "",
       status: "",
-      sitem: null
+      sitem: null,
     };
   },
   mounted() {
     this.initForm();
   },
   methods: {
-    openMarkletUrl(){
-      window.open(this.sitem.market_url)
+    openMarkletUrl() {
+      window.open(this.sitem.market_url);
     },
     async initForm() {
       const { id, type } = this.$route.query;
@@ -456,25 +467,19 @@ export default {
 
       let model = {
         id: this.queryType === "add" ? spuCode : this.queryId,
-        type: "view"
+        type: "view",
       };
       this.routeReGoto("goodsOnlineDetail", model);
     },
     async initData() {
       this.loading = true;
       const { code, message, data } = await asyncRequest.detail({
-        skuCode: this.queryId
+        skuCode: this.queryId,
       });
       this.loading = false;
       if (code === 0) {
         this.sitem = JSON.parse(JSON.stringify(data));
-        const {
-          exam_status,
-          cat_info,
-          ladderlist,
-          nakelist,
-          spuCode
-        } = this.sitem;
+        const { exam_status, cat_info, ladderlist, nakelist, spuCode } = this.sitem;
         this.spuCode = spuCode;
         this.ladderlist = JSON.parse(JSON.stringify(ladderlist));
         console.log(ladderlist);
@@ -507,8 +512,8 @@ export default {
     },
     getNewTime() {
       this.newTime = new Date().valueOf();
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -518,6 +523,10 @@ export default {
   .goodsOnlineDetail-main {
     padding: 10px;
     width: 100%;
+    .good-preview-box {
+      text-align: center;
+      box-sizing: border-box;
+    }
   }
   .goodsOnlineDetail-title {
     border-top: 1px solid #ebeef5;