order-ui-pc/src/views/goodStore/goodsCost/components/goodPreview.vue

<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="24" 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"
            >供应商名称：
            <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" />
          </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" ? "全国" : "除偏远地区" }}
          </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" 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", "origin_place"],
  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(",");
    }

    this.img_list = this.img_list.map(
      (item) => item + "?t=" + this.generateRandomString(20)
    );
    if (this.sitem && this.sitem.nakelist) {
      let arr = this.bubbleSort(this.sitem.nakelist);
      arr.forEach((si, i) => {
        let sModel = {
          min: si.min_num,
          max: arr.length - 1 === i ? 0 : arr[i + 1].min_num,
          price: si.nake_total,
        };
        this.slit.push(sModel);
      });
    }
    // 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)
        .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>