farming-business-shop-web/src/views/product/createProduct.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 @updateValue="updateValue" ref="basicRefs"></basicInfo>
          <el-descriptions title="销售信息" column="1"> </el-descriptions>
          <salesInfo @updateValue="updateValue" ref="salesRefs"></salesInfo>
          <el-descriptions title="商品详情" column="1"> </el-descriptions>
          <productInfo @updateValue="updateValue" ref="productRefs"></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">存入草稿箱</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 }}{{ 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 { saveGoodsDraft } 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";
export default {
  components: { Amap, phoneView, basicInfo, salesInfo, productInfo },
  data() {
    return {
      form: {},
      headerImg: [],
      btnLading: false,
    };
  },
  methods: {
    submitFormDraft() {
      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" });
        }
      });
    },
    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: "已取消删除",
          });
        });
    },
    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;
      }
      // console.log(this.form);
      // if (this.form.scope === "") {
      //   this.$message.error(`经营区域不能为空！`);
      //   return;
      // } else if (this.form.saleType === "") {
      //   this.$message.error(`销售方式不能为空`);
      //   return;
      // } else if (this.form.saleType === "") {
      //   this.$message.error(`销售方式不能为空`);
      //   return;
      // } else if (this.form.categoryId === "") {
      //   this.$message.error(`商品分类不能为空`);
      //   return;
      // } else if (this.form.pic === "") {
      //   this.$message.error(`商品封面图不能为空`);
      //   return;
      // } else if (this.form.unit === "") {
      //   this.$message.error(`商品封面图不能为空`);
      //   return;
      // } else
      // else if (this.form.packing === "") {
      //   this.$message.error(`包装方式不能为空`);
      //   return;
      // } else if (this.form.shippingTimeDesc === "") {
      //   this.$message.error(`发货时间不能为空`);
      //   return;
      // } else if (this.form.freeShipping === "") {
      //   this.$message.error(`运费不能为空`);
      //   return;
      // } else if (this.form.shippingAddr === "") {
      //   this.$message.error(`发货地址不能为空`);
      //   return;
      // } else if (this.form.spuDesc === "") {
      //   this.$message.error(`商品介绍不能为空`);
      //   return;
      // } else if (this.form.saleModel === "2") {
      //   if (this.form.presaleStartTime === "" || this.form.presaleEndTime === "") {
      //     this.$message.error(`预售时间不能为空`);
      //     return;
      //   }
      // } else if (this.form.skuList.length< 1) {
      //     this.$message.error(`请输入规格`);
      //     return;
      // }

      if (this.form.bannerList?.length > 0) {
        this.form.bannerList.shift();
      }
      this.btnLading = true;
      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) {
      console.log(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>