farming-business-shop-web/src/views/product/updateProduct.vue

<template>
  <div class="app-container">
    <div style="width: 100%; height: 85vh; overflow: auto">
      <el-row style="padding-top: 20px">
        <el-col :span="24">
          <el-descriptions title="基本信息" column="1"> </el-descriptions>
          <basicInfo ref="basicRefs" @updateValue="updateValue"></basicInfo>
          <el-descriptions title="销售信息" column="1"> </el-descriptions>
          <salesInfo
            ref="salesRefs"
            @updateValue="updateValue"
            @skuRemove="skuRemove"
            :saleModels="form.saleModel"
          ></salesInfo>
          <el-descriptions title="商品详情" column="1"> </el-descriptions>
          <productInfo
            ref="productRefs"
            @updateValue="updateValue"
          ></productInfo>

          <div class="dialog-footer" style="text-align: center">
            <el-button @click="submitCancel">取 消</el-button>
            <el-button type="primary" @click="submitForm" :loading="btnLading"
              >发 布</el-button
            >
            <el-button
              type="primary"
              @click="submitFormDraft"
              v-if="$route.query.params.type == 'draft'"
              >存入草稿箱</el-button
            >
          </div>
        </el-col>
        <phoneView style="position: absolute; bottom: 50px; right: 50px">
          <div slot="conts">
            <div>
              <el-carousel height="200px">
                <el-carousel-item
                  v-for="(item, index) in headerImg.slice(1)"
                  :key="index"
                >
                  <el-image
                    v-if="item.type == 'img'"
                    style="width: 100%; height: 200px"
                    :src="item.src"
                    :preview-src-list="[item.src]"
                  >
                  </el-image>
                  <video
                    v-if="item.type == 'video'"
                    :key="index"
                    controls
                    :src="item.src"
                    style="width: 100%; height: 200px"
                  ></video>
                </el-carousel-item>
              </el-carousel>
            </div>
            <img
              style="width: 100%"
              src="https://bucket.sxdirectpurchase.com/fileUpload/test/47fc6132-0b3e-4b5c-b858-f78d363eba90.png"
              alt=""
            />
            <div class="card">
              <div class="spuName">{{ form ? form.title : "" }}</div>
              <div class="price_info">
                <div class="price_group">
                  <span>￥</span>
                  <span
                    class="price"
                    :key="item"
                    v-for="item in form.skuList ? form.skuList.slice(0, 1) : []"
                    >{{
                      item.skuPriceList ? item.skuPriceList[0].price : 0
                    }}元</span
                  >

                  <span>/{{ form.unit }}</span>
                </div>
                <span class="ys">已售 0</span>
              </div>
            </div>
            <div class="card" style="margin-top: 10px">
              <div class="spuName">规格/价格</div>
              <div v-for="(item, index) in form.skuList" :key="index">
                <div class="price_info">
                  <span
                    >{{
                      item.skuSpecsList[0] ? item.skuSpecsList[0].specsName : ""
                    }}
                    {{
                      item.skuSpecsList[0].specsValue
                        ? item.skuSpecsList[0].specsValue
                        : ""
                    }}</span
                  >
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                  "
                >
                  <span style="font-size: 14px; color: red">
                    <span>￥</span>
                    <span
                      >{{
                        item.skuPriceList
                          ? item.skuPriceList[0].price
                            ? item.skuPriceList[0].price
                            : ""
                          : ""
                      }}元</span
                    ><span>/{{ form.unit }}</span></span
                  >
                  <span style="font-size: 14px"
                    >{{
                      item.skuPriceList
                        ? item.skuPriceList[0].minPurchase
                          ? item.skuPriceList[0].minPurchase
                          : ""
                        : ""
                    }}/{{ form.unit }}起购</span
                  >
                  <span style="font-size: 14px"
                    >库存:{{ item.stock + item.predictStocks
                    }}{{ form.unit }}</span
                  >
                </div>
              </div>
            </div>
            <div class="card" style="margin-top: 10px">
              <el-form
                :model="form"
                ref="queryForm"
                size="small"
                :inline="true"
                label-width="80px"
                label-position="left"
              >
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="发货地" prop="spuName">
                      <div style="width: 185px">
                        {{
                          form.shippingAddrBean
                            ? form.shippingAddrBean.addr
                            : ""
                        }}
                        {{
                          form.shippingAddrBean
                            ? form.shippingAddrBean.addrDetail
                              ? form.shippingAddrBean.addrDetail
                              : ""
                            : ""
                        }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="发货时间" prop="spuName">
                      {{ form.shippingTimeDesc }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="商品属性" prop="spuName">
                      <div>查看></div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="包装方式" prop="spuName">
                      {{ form.packing }}
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="card" style="margin-top: 10px">
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <span class="spuName">商品评价</span>
                <span>好评率 <span style="color: red">100%</span></span>
              </div>
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                "
              >
                <img
                  style="width: 40%"
                  src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/images/kong.png"
                  alt=""
                />
                <span>还没有评价~</span>
              </div>
            </div>
            <div class="card" style="margin-top: 10px">
              <div class="spuName">商品介绍</div>
              <div style="font-size: 14px; line-height: 25px">
                {{ form.spuDesc }}
              </div>
            </div>
            <div class="card" style="margin-top: 10px">
              <div class="spuName">商品详情</div>
              <div style="font-size: 14px; line-height: 25px">
                <el-image
                  v-for="(item, index) in form.spuDetailList"
                  :key="index"
                  :src="item.fileUrl"
                  fit="fill"
                  :preview-src-list="[item.fileUrl]"
                >
                </el-image>
              </div>
              <div style="font-size: 14px; line-height: 25px">
                <el-image
                  v-for="(item, index) in form.specialList"
                  :key="index"
                  :src="item.fileUrl"
                  fit="fill"
                  :preview-src-list="[item.fileUrl]"
                >
                </el-image>
              </div>
            </div>
          </div>
        </phoneView>
      </el-row>
    </div>

    <Amap></Amap>
  </div>
</template>

<script>
import { publishGoods } from "@/api/publish/index";
import { getStoreInfo } from "@/api/common/index";
import {
  saveGoodsDraft,
  updateGoods,
  getGoodsInfo,
  getGoodsDraftById,
  removeSkuBySkuId,
} from "@/api/manage/product";
import basicInfo from "./module/basic-info.vue";
import productInfo from "./module/product-info.vue";
import salesInfo from "./module/sales-info.vue";
import phoneView from "@/components/phoneView/index.vue";
import Amap from "@/components/Map/map.vue";
import moment from "moment";
export default {
  name: "updateProduct",
  components: { Amap, phoneView, basicInfo, salesInfo, productInfo },
  data() {
    return {
      form: {},
      headerImg: [],
      btnLading: false,
      skulist: [],
    };
  },

  created() {
    window.addEventListener("beforeunload", function (e) {
      this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
      this.$router.replace({ path: "/product/product/index" });
    });
  },
  mounted() {
    if (
      (this.$route.query.params != "[object Object]" &&
        this.$route.query.params) ||
      JSON.parse(localStorage.getItem("productInfo"))
    ) {
      let info = {};
      if (
        this.$route.query.params != "[object Object]" &&
        this.$route.query.params
      ) {
        info = this.$route.query.params;
      } else {
        info = JSON.parse(localStorage.getItem("productInfo"));
      }
      if (info.type == "draft") {
        this.form.goodsDraftId = info.id;
        getGoodsDraftById({ goodsDraftId: info.id }).then((res) => {
          if (res.code == 200) {
            this.form = res.data.goodsDto;
            this.form.goodsDraftId = info.id;
            this.headerImg = [];
            if (this.form.vid) {
              this.headerImg.push({
                type: "video",
                src: this.form.vid,
                sort: 1,
              });
            }
            if (this.form.pic) {
              this.headerImg.push({
                type: "img",
                src: this.form.pic,
                sort: 2,
              });
            }
            this.headerImg = this.unique(this.headerImg);
            if (this.form.bannerList?.length > 0) {
              this.form.bannerList.forEach((e, index) => {
                this.headerImg.push({
                  type: "img",
                  src: e.fileUrl,
                  sort: index + 4,
                });
              });
            }
            this.headerImg.sort((a, b) => a.sort - b.sort); //排序 视频在最前面>封面>商品banner
            this.$refs.basicRefs.getFormInfo(this.form, this.$route.query.type);
            this.$refs.salesRefs.getFormInfo(this.form);
            this.$refs.productRefs.getFormInfo(this.form);
          }
        });
      } else {
        getGoodsInfo({ spuId: info.id }).then((res) => {
          if (res.code == 200) {
            this.form = res.data;
            this.headerImg = [];
            if (this.form.vid) {
              this.headerImg.push({
                type: "video",
                src: this.form.vid,
                sort: 1,
              });
            }
            if (this.form.pic) {
              this.headerImg.push({
                type: "img",
                src: this.form.pic,
                sort: 2,
              });
            }
            this.headerImg = this.unique(this.headerImg);
            if (this.form.bannerList?.length > 0) {
              this.form.bannerList.forEach((e, index) => {
                this.headerImg.push({
                  type: "img",
                  src: e.fileUrl,
                  sort: index + 4,
                });
              });
            }
            this.headerImg.sort((a, b) => a.sort - b.sort); //排序 视频在最前面>封面>商品banner
            this.$refs.basicRefs.getFormInfo(this.form, this.$route.query.type);
            this.$refs.salesRefs.getFormInfo(this.form);
            this.$refs.productRefs.getFormInfo(this.form);
          }
        });
      }
    }
  },
  methods: {
    skuRemove(list) {
      this.skulist = list;
    },

    submitCancel() {
      this.$confirm("是否取消发布,所填写的信息将会消失?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
          this.$router.replace({ path: "/product/product/index" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    submitFormDraft() {
      if (!this.form.presaleStartTime && !this.form.presaleEndTime) {
        if (this.form.datePicke) {
          this.form.presaleStartTime = moment(
            this.form.datePicker[0]
          ).valueOf();
          this.form.presaleEndTime = moment(this.form.datePicker[1]).valueOf();
        }
      }
      if (this.form.categoryId?.length > 0) {
        this.form.categoryId =
          this.form.categoryId[this.form.categoryId.length - 1];
      }
      // if (this.form.bannerList?.length > 0) {
      //   this.form.bannerList.shift();
      // }
      saveGoodsDraft(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.success(`保存成功！请前往草稿箱查看`);
          this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
          this.$router.replace({ path: "/product/product/index" });
        }
      });
    },
    async submitForm() {
      let basic = await this.$refs.basicRefs.formvalidate();
      if (basic) {
        let sales = await this.$refs.salesRefs.formvalidate();
        if (sales) {
          let product = await this.$refs.productRefs.formvalidate();
          if (!product) {
            return;
          }
        } else {
          return;
        }
      } else {
        return;
      }
      if (this.form.skuList === "") {
        this.$message.error(`商品规格不能为空`);
        return;
      }
      this.btnLading = true;
      if (!this.form.presaleStartTime && !this.form.presaleEndTime) {
        if (this.form.datePicke) {
          this.form.presaleStartTime = moment(
            this.form.datePicker[0]
          ).valueOf();
          this.form.presaleEndTime = moment(this.form.datePicker[1]).valueOf();
        }
      }

      if (this.form.categoryId?.length > 0) {
        this.form.categoryId =
          this.form.categoryId[this.form.categoryId.length - 1];
      }

      if (this.form.id) {
        if (this.skulist?.length > 0) {
          removeSkuBySkuId({ skuIds: this.skulist.toString() }).then(
            (res) => {}
          );
        }
        if (this.form.skuList.length < 1 || this.form.skuList === "") {
          this.$message.error(`规格不能为空`);
          return;
        }
        updateGoods(this.form).then((res) => {
          if (res.code == 200) {
            this.btnLading = false;
            this.$message.success(`编辑成功！`);
            this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
            this.$router.replace({ path: "/product/product/index" });
          } else {
            this.btnLading = false;
          }
        });
      } else {
        publishGoods(this.form).then((res) => {
          if (res.code == 200) {
            this.btnLading = false;
            this.$message.success(`发布成功！`);
            this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
            this.$router.replace({ path: "/product/product/index" });
          } else {
            this.btnLading = false;
          }
        });
      }
    },
    updateValue(val) {
      this.form = { ...this.form, ...val };
      this.headerImg = [];
      if (val.vid || this.form.vid) {
        this.headerImg.push({
          type: "video",
          src: val.vid ? val.vid : this.form.vid,
          sort: 1,
        });
      }
      if (this.form?.bannerList && this.form?.bannerList.length > 0) {
        this.form.bannerList.forEach((e, index) => {
          this.headerImg.push({
            type: "img",
            src: e.fileUrl,
            sort: index + 4,
          });
        });
      }
      this.headerImg.sort((a, b) => a.sort - b.sort); //排序 视频在最前面>封面>商品banner
    },
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.src) && res.set(arr.src, 1));
    },
  },
};
</script>

<style>
.required {
  color: red;
}
.el-upload-list__item {
  width: 60px !important;
  height: 60px !important;
}
.el-upload--picture-card {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.tips {
  font-size: 12px;
  color: red;
}
</style>
<style scoped>
.card {
  /* height: 85px; */
  width: 95%;
  background: white;
  margin: auto;
  border-radius: 10px;
  line-height: 30px;
  padding: 10px;
}
.spuName {
  text-decoration: none;
  font-weight: bold;
  word-wrap: normal;
  font-size: 18px;
  color: #333333;
}
.price_group {
  color: #ff2f2f;
}
.price {
  text-decoration: none;
  font-weight: bold;
  word-wrap: normal;
  font-size: 25px;
  color: #ff2f2f;
}
.price_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.ys {
  font-size: 14px;
}
</style>