moxuan_takeaway_manage/src/views/selfShop/shopAmend.vue

<template>
  <div class="components-container main-cont">
    <div style="display: inline-block;font-size:18px;margin-bottom: 15px;">
      <a href="#" @click="prev" style="text-decoration:none;font-size: 14px;">
        <icon-svg
          name="jiantou"
          style="width: 1.2em;height: 1.2em;position: relative;top: 0.3em;"
        ></icon-svg>
        返回
      </a>
      <span style="display: inline-block;margin: 0 15px;color: #D9D9D9;"
        >|</span
      >
      <span>商品修改</span>
    </div>
    <div v-loading="tableDataLoading">
      <div style="position: relative;">
        <el-row>
          <el-col :span="8">
            <span>商品名称：</span>
            <el-input
              style="width: 200px;"
              class="margin15"
              placeholder="请输入商品标题"
              v-model="goodsName"
              autosize
            ></el-input>
          </el-col>
          <el-col :span="8">
            <span>商品分类：</span>
            <el-select
              v-model="classifyId"
              class="margin15"
              placeholder="请选择商品类型"
              style="width:200px;"
              @change="handleChange1"
            >
              <el-option
                v-for="(item, index) in typeDatas"
                :key="index"
                :label="item.classifyName"
                :value="item.classifyId"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <span>商品原价(选填)：</span>
            <el-input
              style="width:200px;"
              class="margin15"
              placeholder="请输入商品原价"
              type="number"
              :min="0"
              :controls="false"
              v-model="originalMoney"
              autosize
            ></el-input>
          </el-col>
          <el-col :span="8">
            <span>商品售价：</span>
            <el-input
              style="width:200px;"
              class="margin15"
              placeholder="请输入商品售价"
              type="number"
              :min="0"
              :controls="false"
              v-model="goodsMoney"
              autosize
            ></el-input>
          </el-col>
          <el-col :span="8">
            <span>打包费(选填)：</span>
            <el-input
              style="width:200px;"
              class="margin15"
              placeholder="请输入打包费"
              type="number"
              :min="0"
              :controls="false"
              v-model="packMoney"
              autosize
            ></el-input>
          </el-col>
          <el-col :span="8">
            <span>商品销量(选填)：</span>
            <el-input
              style="width:200px;"
              class="margin15"
              placeholder="请输入商品销量"
              type="number"
              :min="0"
              :controls="false"
              v-model="sales"
              autosize
            ></el-input>
          </el-col>
          <!-- <el-col :span="8">
            <span>库存：</span>
            <el-input style="width:200px;" class="margin15" placeholder="请输入库存" type="number" :min="0" :controls="false"
              v-model="inventory" autosize></el-input>
          </el-col> -->
          <el-col :span="8">
            <span>商品状态：</span>
            <el-select
              v-model="status"
              class="margin15"
              placeholder="请选择商品状态"
              style="width:200px;"
            >
              <el-option
                v-for="(item, index) in statusmain2"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <span>商品简介(选填)：</span>
            <el-input
              style="width:200px;"
              class="margin15"
              placeholder="请输入商品简介"
              type="text"
              :controls="false"
              v-model="goodsDescribe"
              autosize
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div style="margin-top: 10px;">
              <span>商品标签：</span>
              <span class="bqList" v-for="(item, index) in labels" :key="index"
                >{{ item }}
                <span class="delss">
                  <i class="el-icon-delete" @click="dels1(index)"></i>
                </span>
              </span>
              <el-input
                v-model="bq"
                style="width:200px;"
                placeholder="请输入标签"
                onkeyup="this.value=this.value.replace(/[, ]/g,'')"
              ></el-input>
              <!-- <button class="tj" @click="btnTj">添加标签</button> -->
              <el-button
                type="primary"
                class="tj"
                size="mini"
                icon="el-icon-edit"
                circle
                @click="btnTj"
              >
              </el-button>
            </div>
          </el-col>
        </el-row>
        <div style="display: flex;align-items: center;margin: 2% 0;">
          <span style="display: inline-block;text-align: right;"
            >商品封面图：</span
          >
          <div
            style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;"
          >
            <el-upload
              class="avatar-uploader"
              v-model="goodsCover"
              :action="Tupiantou"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="goodsCover"
                :src="goodsCover"
                class="avatar"
                style="width: 148px;height: 148px;"
              />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="font-size: 28px;color: #8c939d"
              ></i>
            </el-upload>
          </div>
        </div>
        <div
          style="display: flex;align-items: center;margin: 2% 0;flex-flow: wrap;"
        >
          <span style="display: inline-block;text-align: right;"
            >商品轮播图：</span
          >
          <div v-for="(item, index) of imgs" :key="index">
            <div style="position: relative;margin: 5px;">
              <img
                :src="item"
                class="avatar"
                style="width:148px;height: 148px;"
              />
              <div @click="clear(index)" class="divhove">
                <i
                  class="el-icon-delete"
                  style="margin: 0;font-size: 18px;color: #fff;"
                ></i>
              </div>
            </div>
          </div>
          <div>
            <el-upload
              :action="Tupiantou"
              list-type="picture-card"
              :on-success="handleUploadSuccess"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :before-upload="beforeAvatarUpload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>
        <div style="display: flex;align-items: center;margin: 2% 0;">
          <span style="display: inline-block;text-align: right;"
            >商品规格：</span
          >
          <el-radio-group v-model="guige" @change="guigeChange">
            <el-radio :label="0">单规格</el-radio>
            <el-radio :label="1">多规格</el-radio>
          </el-radio-group>
          <div v-if="guigeshow" style="margin-left: 20px;">
            <el-select
              v-model="ruleId"
              placeholder="请选择商品规格"
              style="width:200px;"
              @change="selectTrigger(ruleId)"
            >
              <el-option
                v-for="(item, index) in specifdata"
                :key="index"
                :label="item.ruleName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div v-if="ruleValue" style="margin-left: 70px;">
          <div class="ruleitem" v-for="(item, index) in ruleValue" :key="index">
            <div>
              {{ item.value }}
              <span @click="deleterule(index)">
                <icon-svg name="schu" class="ruleicon"></icon-svg>
              </span>
            </div>
            <div>
              <el-tag
                :key="tag"
                v-for="(tag, j) in item.detail.split(',')"
                closable
                :disable-transitions="false"
                @close="handleClose(tag, j, item)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-model="inputValues[index]"
                ref="saveTagInput"
                size="small"
                style="width:120px;"
                placeholder="请输入属性名"
                @keyup.enter.native="handleInputConfirm(index, item)"
              >
              </el-input>
              <el-button
                class="button-new-tag"
                size="small"
                @click="handleInputConfirm(index, item)"
                >添加</el-button
              >
            </div>
          </div>
          <div style="margin-top:20px;" v-if="ruleshow">
            <div v-if="isshow" class="btn_specif">
              <el-button type="primary" @click="btnToclick()"
                >添加新规格</el-button
              >
              <el-button type="success" @click="create()">立即生成</el-button>
            </div>
          </div>
          <div style="margin-top:10px;">
            <div v-if="!isshow" style="margin-top: 20px;">
              <div style="display: inline-block;">
                <span
                  style="width:80px;display: inline-block;text-align: right;"
                  >规格：</span
                >
                <el-input
                  style="width:50%;"
                  v-model="releobject.value"
                  placeholder="例:颜色"
                ></el-input>
              </div>
              <div style="display: inline-block;">
                <span
                  style="width:80px;display: inline-block;text-align: right;"
                  >规格值：</span
                >
                <el-input
                  style="width:50%;"
                  v-model="releobject.detail"
                  placeholder="例:黑色"
                ></el-input>
              </div>
              <div style="display: inline-block;">
                <el-button type="primary" @click="speciTo()">确 定</el-button>
                <el-button @click="speciTotwo()">取 消</el-button>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;margin-top: 20px;" v-if="valueshow">
          <span>商品属性：</span>
          <div class="property_table">
            <table style="width: 100%;">
              <tr style="display:flex;">
                <th
                  style="width:120px;text-align: left;"
                  v-for="item in headerData"
                  :key="item"
                  v-if="item != '图片'"
                >
                  {{ item }}
                </th>
              </tr>
            </table>

            <el-table :data="valueData">
              <el-table-column
                v-if="detailJson.length == 1"
                prop="value0"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 2"
                prop="value0"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 2"
                prop="value1"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 3"
                prop="value0"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 3"
                prop="value1"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 3"
                prop="value2"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 4"
                prop="value0"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 4"
                prop="value1"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 4"
                prop="value2"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 4"
                prop="value3"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 5"
                prop="value0"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 5"
                prop="value1"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 5"
                prop="value2"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 5"
                prop="value3"
                width="120"
              >
              </el-table-column>
              <el-table-column
                v-if="detailJson.length == 5"
                prop="value4"
                width="120"
              >
              </el-table-column>
              <!-- <el-table-column prop="skuImg" width="100">
                  <template slot-scope="scope">
                    <div class="imgWrap"
                      style=" width:60px;height:60px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 60px;">
                      <el-upload style="width: 60px;height: 60px;" class="avatar-uploader" v-model="scope.row.skuImg"
                        :action="Tupiantou" :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="avatar"
                          style="border-radius: 6px;width:60px;height: 60px;" @click="curRowIndex=scope.$index"/>
                        <i v-else class="el-icon-plus avatar-uploader-icon" @click="curRowIndex=scope.$index"></i>
                      </el-upload>
                    </div>
                  </template>
                </el-table-column> -->
              <el-table-column prop="skuOriginalPrice" width="120">
                <template slot-scope="scope">
                  <div>
                    <el-input
                      type="text"
                      v-model="scope.row.skuOriginalPrice"
                      style="width:80px;font-size:14px;"
                    >
                    </el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="skuPrice" width="120">
                <template slot-scope="scope">
                  <div>
                    <el-input
                      type="text"
                      v-model="scope.row.skuPrice"
                      style="width:80px;font-size:14px;"
                    >
                    </el-input>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="sales" width="120">
                  <template slot-scope="scope">
                    <div>
                      <el-input type="text" v-model="scope.row.sales" style="width:80px;font-size:14px;">
                      </el-input>
                    </div>
                  </template>
                </el-table-column> -->
              <el-table-column width="120">
                <template slot-scope="scope">
                  <el-button
                    :disabled="!isAuth('userList:delete')"
                    size="mini"
                    type="danger"
                    @click="deleter(scope.$index)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div style="display: flex;margin-top: 20px;" v-if="valueshow1">
          <span>商品属性：</span>
          <div class="property_table">
            <table style="width: 100%;">
              <tr style="display:flex;">
                <th
                  style="width:150px;text-align: left;"
                  v-for="item in headerData2"
                  :key="item"
                  v-if="item != '图片'"
                >
                  {{ item }}
                </th>
              </tr>
            </table>

            <el-table :data="valueData2">
              <!-- <el-table-column prop="skuImg" width="150">
                  <template slot-scope="scope">
                    <div class="imgWrap"
                      style=" width:60px;height:60px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 60px;">
                      <el-upload style="width: 60px;height: 60px;" class="avatar-uploader" v-model="scope.row.skuImg"
                        :action="Tupiantou" :show-file-list="false"
                        :on-success="handleAvatarSuccess3">
                        <img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="avatar"
                          style="border-radius: 6px;width:60px;height: 60px;" @click="curRowIndex=scope.$index"/>
                        <i v-else class="el-icon-plus avatar-uploader-icon" @click="curRowIndex=scope.$index"></i>
                      </el-upload>
                    </div>
                  </template>
                </el-table-column> -->
              <el-table-column prop="skuOriginalPrice" width="150">
                <template slot-scope="scope">
                  <div>
                    <el-input
                      type="text"
                      v-model="scope.row.skuOriginalPrice"
                      style="width:80px;font-size:14px;"
                    >
                    </el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="skuPrice" width="150">
                <template slot-scope="scope">
                  <div>
                    <el-input
                      type="text"
                      v-model="scope.row.skuPrice"
                      style="width:80px;font-size:14px;"
                    >
                    </el-input>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="sales" width="150">
                  <template slot-scope="scope">
                    <div>
                      <el-input type="text" v-model="scope.row.sales" style="width:80px;font-size:14px;">
                      </el-input>
                    </div>
                  </template>
                </el-table-column> -->
            </el-table>
          </div>
        </div>
      </div>
      <div class="tinymce-content" style="display: flex;padding-top: 30px;">
        <div style="width:90px;">商品详情(选填)：</div>
        <!-- <quill-editor ref="myTextEditor" v-model="goodsSynopsis" :options="quillOption"
        	style="padding-bottom: 50px;height: 300px;width: 72%;display: inline-table;margin-bottom: 60px;">
        </quill-editor> -->
        <div v-for="(item, index) of goodsParticularsPicture" :key="index">
          <div style="position: relative;margin: 5px;">
            <img
              :src="item"
              class="avatar"
              style="width:148px;height: 148px;"
            />
            <div @click="clearXq(index)" class="divhove">
              <i
                class="el-icon-delete"
                style="margin: 0;font-size: 18px;color: #fff;"
              ></i>
            </div>
          </div>
        </div>
        <div class="imgs" style="width: 50%;">
          <el-upload
            :action="Tupiantou"
            list-type="picture-card"
            :show-file-list="false"
            :on-success="handleUploadSuccessXq"
            :on-progress="onprogress1"
            :before-upload="beforeAvatarUpload"
          >
            <el-progress
              v-if="percentage1 > 0 && percentage1 < 100"
              type="circle"
              :percentage="percentage1"
            >
            </el-progress>
            <i v-else class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>
      <div style="text-align: center;margin-top:30px;">
        <el-button
          style="margin:0 20px 0 0;"
          size="mini"
          type="primary"
          icon="document"
          @click="prev"
          >返回上一页
        </el-button>
        <el-button
          size="mini"
          type="primary"
          icon="document"
          @click="artiReleass"
          >保存
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "./quill-config.js";

export default {
  components: {
    quillEditor
  },
  name: "Tinymce",
  data() {
    return {
      tableDataLoading: true,
      originalPrice: "",
      price: "",
      sales: "",
      imgs: [],
      value: [],
      potost: [],
      statusmain2: [
        {
          value: 0,
          label: "上架"
        },
        {
          value: 1,
          label: "下架"
        }
      ],
      valueshow: true,
      valueshow1: true,
      // 富文本内容
      descrition: "",
      // curRowIndex: null,

      // ···········································
      specif: "",
      goodsId: "",
      goodsName: "",
      classifyId: "",
      merchants: "",
      originalMoney: "",
      goodsMoney: "",
      packMoney: "",
      memberPrice: "",
      labels: [], //标签集合
      bq: "", //输入的标签名
      createTime: "",
      positage: 0,
      guige: 1,
      skuImg: "",
      ruleId: "",
      postagePrice: "",
      priceshow: false,
      isshow: true,
      commissionPrice: "",
      buyReason: "",
      ruleshow: false,
      propshow: false,
      guigeshow: true,
      propshow1: false,
      ruleValue: [],
      attr: [],
      attrs: [],
      headerData: [],
      valueData: [],
      detailJson: [],
      inputValues: {
        inputValue0: "",
        inputValue1: "",
        inputValue2: "",
        inputValue3: "",
        inputValue4: "",
        inputValue5: ""
      },
      sku: [],
      img: "",
      salesVolume: "",
      sales: "",
      inventory: "",
      goodsSynopsis: "",
      status: 0,
      goodsPicture: "",
      typeDatas: [],
      value: [],
      isSelect: 1,
      homeGoods: 1,
      isRecommend: 1,
      isExpress: "",
      goodsCover: "",
      valueData2: [],
      headerData2: [],

      isExpressmain: [
        {
          value: 1,
          label: "普通商品需要发货"
        },
        {
          value: 2,
          label: "虚拟商品无需发货"
        },
        {
          value: 3,
          label: "商铺核销无需发货"
        }
      ],
      attrName: "",
      ruleName: "",
      attrValue: [],
      releobject: {
        value: "",
        detail: ""
      },
      brandId: "",
      brandIds: [],
      specifdata: [],
      dialogVisible: false,
      hideUpload: false,
      limit: 1,
      id: "",
      hasChange: false,
      hasInit: false,
      tinymceId: "tinymceId",
      height: 435,
      toolbar: [],
      menubar: "file edit insert view format table",
      languageTypeList: {
        en: "en",
        zh: "zh_CN"
      },
      artiCletypes: [],
      // 富文本内容
      quillOption: quillConfig,
      goodsDescribe: "",
      shopId: "",
      goodsParticularsPicture: [], //商品详情图
      percentage1: 0, //进度条
      dialogImageUrl: [],
      dialogVisible: false
    };
  },

  methods: {
    // 返回上一级
    prev() {
      this.$router.back();
    },
    // 图标上传
    handleAvatarSuccess(file) {
      if (this.curRowIndex == 0) {
        this.skuImg = file.data;
        this.valueData[0].skuImg = this.skuImg;
        return;
      } else {
        this.skuImg = file.data;
        this.valueData[this.curRowIndex].skuImg = this.skuImg;
      }
    },
    // 图标上传
    handleAvatarSuccess3(file) {
      this.skuImg = file.data;
      this.sku[0].skuImg = this.skuImg;
    },
    // 是否包邮
    agreeChange(val) {
      if (val == 1) {
        this.priceshow = true;
        this.postagePrice = "";
      } else {
        this.priceshow = false;
        this.postagePrice = 0;
      }
    },
    // 是否多规格
    guigeChange(val) {
      if (val == 0) {
        this.ruleId = 0;
        this.valueshow = false;
        this.valueshow1 = true;
        this.guigeshow = false;
        this.attr = [];
        this.ruleshow = false;
        this.ruleValue = [];
        this.dansku();
      }
      if (val == 1) {
        this.ruleId = "";
        this.sku = [];
        this.guigeshow = true;
        this.valueshow1 = false;
      }
    },
    // 获取单规格的sku
    dansku() {
      if (this.originalMoney == "") {
        this.originalMoney = "0";
      }
      if (this.goodsMoney == "") {
        this.goodsMoney = "0";
      }
      this.$http({
        url: this.$http.adornUrl("admin/goods/onlyFormatAttr"),
        method: "get",
        params: this.$http.adornParams({
          originalPrice: this.originalMoney,
          price: this.goodsMoney
          // 'coverImg': this.goodsCover,
        })
      }).then(({ data }) => {
        console.log(data," 获取单规格的sku");

        let returnData = data.data;
        this.valueData2 = returnData.value;
        this.headerData2 = returnData.header;

        this.valueshow1 = true;
        this.valueshow = false;
        this.guigeshow = false;
        //  this.attr = returnData.value
        // this.sku = []
        this.sku = returnData.value;
      });
    },
    // 回显规格
    echo(goodsId) {
      this.$http({
        url: this.$http.adornUrl("admin/goods/formatAttr"),
        method: "get",
        params: this.$http.adornParams({
          goodsId: goodsId
        })
      }).then(({ data }) => {
        console.log(data,'回显规格');

        let returnData = data.data;
        this.valueData2 = returnData.value;
        this.headerData2 = returnData.header;
        this.valueshow1 = true;
        this.valueshow = false;
        this.guigeshow = false;
      });
    },
    handleChange1(value) {
      this.classifyId = value;
    },
    // 删除
    clear(index) {
      this.imgs.splice(index, 1);
    },
    handleChange(file, fileList) {
      this.hideUpload = fileList.length >= this.limit;
    },
    handleRemove(file, fileList) {
      this.hideUpload = fileList.length >= this.limit;
      for (var i in this.potost) {
        if (this.potost[i] == file.response.data) {
          this.potost.splice(i, 1);
        }
      }
    },
    beforeAvatarUpload(file) {
      return this.$processImage(this, file, false);
    },
    handleAvatarSuccess1(file, fileList) {
      this.goodsCover = file.data;
    },
    //上传成功
    handleUploadSuccess(file, fileList) {
      console.log(
        "file.data:",
        file.data,
        "this.goodsPicture",
        this.goodsPicture
      );
      // this.potost += file.data + ','
      this.potost.push(file.data);
    },
    init() {
      this.tableDataLoading = true;

      let goodsId = this.$route.query.goodsId;
      this.$http({
        url: this.$http.adornUrl("admin/goods/selectGoodsById"),
        method: "get",
        params: this.$http.adornParams({
          goodsId: goodsId
        })
      }).then(({ data }) => {
        console.log(data,"init接口");

        let returnData = data.data;
        if (returnData.goodsPicture) {
          let imgs = returnData.goodsPicture.split(",");
          this.imgs = imgs;
          console.log("this.imgs", this.imgs);
        }

        if (returnData.goodsLabel && returnData.goodsLabel != "") {
          let goodsLabel = returnData.goodsLabel.split(",");
          this.labels = goodsLabel;
        }
        if (returnData.goodsParticularsPicture) {
          this.goodsParticularsPicture = returnData.goodsParticularsPicture.split(
            ","
          );
          this.dialogImageUrl = this.goodsParticularsPicture;
        } else {
          this.goodsParticularsPicture = [];
          this.dialogImageUrl = [];
        }

        this.goodsName = returnData.goodsName;
        this.goodsId = returnData.goodsId;

        // this.goodsPicture = goodsPicture;
        this.goodsCover = returnData.goodsCover;

        this.goodsMoney = returnData.goodsMoney;
        this.originalMoney = returnData.originalMoney;
        this.packMoney = returnData.packMoney;
        this.salesVolume = returnData.salesVolume;
        this.sales = returnData.sales;
        this.inventory = returnData.inventory;
        this.classifyId = returnData.classifyId;
        this.goodsDescribe = returnData.goodsDescribe;
        this.goodsSynopsis = returnData.goodsSynopsis;
        this.status = returnData.status;
        this.createTime = returnData.createTime;
        this.shopId = returnData.shopId;

        // this.memberPrice = returnData.memberPrice;
        // this.descrition = returnData.descrition;
        // this.status = returnData.status;
        // this.createAt = returnData.createAt;
        // this.isSelect = returnData.isSelect;
        // this.homeGoods = returnData.homeGoods;
        // this.isRecommend = returnData.isRecommend;
        // this.isExpress = returnData.isExpress;
        // this.createAt = returnData.createAt;
        // this.brandId = returnData.brandId;
        // let label = JSON.parse(returnData.type.parentId)
        // let value = JSON.parse(returnData.type.id)
        // this.value = [label, value]
        this.postagePrice = returnData.postagePrice;

        if (this.postagePrice > 0) {
          this.positage = 1;
          this.priceshow = true;
        } else {
          this.positage = 0;
          this.priceshow = false;
        }

        this.attr = returnData.attr;
        if (this.attr.length > 0) {
          this.guige = 1;
          this.Triggerselect();
          this.create2();
          this.attrName = returnData.attr[0].attrName;
          this.attrValue = returnData.attr[0].attrValue;
          this.ruleId = returnData.attr[0].ruleId;
          this.goodsId = returnData.attr[0].goodsId;
          this.id = returnData.attr[0].id;
        } else {
          this.guige = 0;
          this.echo(this.goodsId);
          this.ruleId = 0;
          this.sku = returnData.sku;
        }
        this.specifSelect();
        this.dataSelect();
        this.tableDataLoading = false;
      });
    },
    // 修改商品
    artiReleass() {
      // let id = this.$route.query.id
      var potost = this.potost.toString();
      if (this.imgs == "") {
        this.img = this.potost;
        // this.img = this.img.substr(0, this.img.length - 1)
      } else {
        if (this.potost.length != 0) {
          this.img = this.imgs + "," + this.potost;
        } else {
          this.img = this.imgs;
          // this.img = this.img.substr(0, this.img.length - 1)
        }
      }
      console.log("this.imgs", this.imgs);
      console.log("this.img", this.img);
      console.log("this.potost:", this.potost);
      // let photost = this.goodsPicture.toString()
      let goodsLabel = this.labels.toString();

      if (this.goodsLabel == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入标签",
          type: "warning"
        });
        return;
      }
      if (this.goodsName == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入商品标题",
          type: "warning"
        });
        return;
      }
      if (this.classifyId === "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择商品类型",
          type: "warning"
        });
        return;
      }
      if (this.originalMoney === "") {
        this.originalMoney = this.goodsMoney;
        // this.$notify({
        // 	title: '提示',
        // 	duration: 1800,
        // 	message: '请输入商品原价',
        // 	type: 'warning'
        // });
        // return
      }
      if (this.goodsMoney === "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入商品售价",
          type: "warning"
        });
        return;
      }
      if (this.packMoney === "") {
        this.packMoney = "0";
        // this.$notify({
        // 	title: '提示',
        // 	duration: 1800,
        // 	message: '请输入打包费',
        // 	type: 'warning'
        // });
        // return
      }

      if (this.sales === "") {
        this.sales = 0;
        // this.$notify({
        // 	title: '提示',
        // 	duration: 1800,
        // 	message: '请输入商品销量',
        // 	type: 'warning'
        // });
        // return
      }
      // if (this.inventory === '') {
      //   this.$notify({
      //     title: '提示',
      //     duration: 1800,
      //     message: '请输入商品库存',
      //     type: 'warning'
      //   });
      //   return
      // }
      if (this.goodsCover == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择商品封面图",
          type: "warning"
        });
        return;
      }
      if (this.img.length == 0) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择商品轮播图",
          type: "warning"
        });
        return;
      }
      if (this.goodsDescribe == "") {
        this.goodsDescribe = "无";
        // this.$notify({
        // 	title: '提示',
        // 	duration: 1800,
        // 	message: '请输入商品详情',
        // 	type: 'warning'
        // });
        // return
      }
      if (this.guige == 1) {
        if (this.ruleId === 0 || this.ruleId === "") {
          this.$notify({
            title: "提示",
            duration: 1800,
            message: "请选择商品规格",
            type: "warning"
          });
          return;
        }
      }
      // if (this.sku.length == 0) {
      //   this.$notify({
      //     title: '提示',
      //     duration: 1800,
      //     message: '请选择商品规格',
      //     type: 'warning'
      //   });
      //   return
      // }

      if (this.guige == 0) {
        if (this.valueData2.length > 0) {
          if (
            this.valueData2[0].skuOriginalPrice == null ||
            this.valueData2[0].skuOriginalPrice === ""
          ) {
            this.$notify({
              title: "提示",
              duration: 1800,
              message: "商品属性原价不能为空",
              type: "warning"
            });
            return;
          }
          if (
            this.valueData2[0].skuPrice == null ||
            this.valueData2[0].skuPrice === ""
          ) {
            this.$notify({
              title: "提示",
              duration: 1800,
              message: "商品属性售价不能为空",
              type: "warning"
            });
            return;
          }
        }
        this.sku = this.valueData2;
        console.log("----", this.valueData2);
      } else {
        this.sku = this.valueData;
      }
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/goods/update"),
        method: "post",
        data: this.$http.adornData({
          goodsId: this.goodsId,
          goodsPicture: this.img.toString(),
          goodsName: this.goodsName,
          classifyId: this.classifyId,
          originalMoney: this.originalMoney,
          goodsMoney: this.goodsMoney,
          packMoney: this.packMoney,
          memberPrice: this.memberPrice,
          salesVolume: this.salesVolume,
          sales: this.sales,
          inventory: this.inventory,
          goodsSynopsis: this.goodsSynopsis,
          status: this.status,
          goodsCover: this.goodsCover,
          goodsDescribe: this.goodsDescribe,
          postagePrice: this.postagePrice,
          sku: this.sku,
          attr: this.attr,
          goodsLabel: goodsLabel,
          createTime: this.createTime,
          goodsParticularsPicture: this.goodsParticularsPicture.toString()
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.tableDataLoading = false;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              // this.$router.push({
              //   path: '/shopAdmin'
              // })
              this.$router.back();
            }
          });
        } else {
          this.tableDataLoading = false;
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },

    // 商品规格
    specifSelect() {
      this.$http({
        url: this.$http.adornUrl("selfGoodsRule/list"),
        method: "get",
        params: this.$http.adornParams({
          shopId: this.shopId
        })
      }).then(({ data }) => {
        let returnData = data.data;
        this.specifdata = returnData;
      });
    },
    // 商品规格
    Triggerselect() {
      let goodsId = this.$route.query.goodsId;
      this.$http({
        url: this.$http.adornUrl("admin/goods/findAttrValue"),
        method: "get",
        params: this.$http.adornParams({
          goodsId: goodsId
        })
      }).then(({ data }) => {
        let returnData = data.data;
        this.ruleValue = returnData.attrValue;
        this.attrName = returnData.attrName;
        this.ruleshow = true;
      });
    },
    // 删除商品属性
    deleter(index) {
      let length = this.sku.length;
      if (length == 1) {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "属性至少要有一个",
          type: "warning"
        });
        return;
      } else {
        this.sku.splice(index, 1);
      }
    },
    // 查询商品规格
    selectTrigger(val) {
      this.$http({
        url: this.$http.adornUrl("selfGoodsRule/find"),
        method: "get",
        params: this.$http.adornParams({
          id: val
        })
      }).then(({ data }) => {
        console.log(data,"切换商品规格");

        let returnData = data.data;
        this.ruleValue = returnData.ruleValue;
        this.attrName = returnData.ruleName;
        this.ruleshow = true;
        this.ruleId = returnData.id;
        this.create();
      });
    },
    deleterule(index) {
      this.ruleValue.splice(index, 1);
    },
    btnToclick() {
      this.isshow = false;
      this.releobject.value = "";
      this.releobject.detail = "";
    },
    speciTotwo() {
      this.isshow = true;
      this.releobject.value = "";
      this.releobject.detail = "";
    },
    speciTo() {
      if (this.releobject.value == "") {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "请输入规格",
          type: "warning"
        });
        return;
      }
      if (this.releobject.detail == "") {
        this.$message({
          title: "提示",
          duration: 1800,
          type: "error",
          message: "请输入规格值",
          type: "warning"
        });
        return;
      }
      this.ruleValue.push({
        value: this.releobject.value,
        detail: this.releobject.detail
      });
      this.isshow = true;
      this.releobject.value = "";
      this.releobject.detail = "";
    },
    handleClose(tag, j, item) {
      var detailarr = item.detail.split(",");
      detailarr.splice(j, 1);
      if (detailarr.length < 1) {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "规格值至少要有一个",
          type: "warning"
        });
        return;
      } else {
        item.detail = String(detailarr);
      }
    },
    handleInputConfirm(index, item) {
      let inputValue = this.inputValues[index];
      if (inputValue) {
        var detailarr = item.detail.split(",");
        detailarr.push(inputValue);
        for (var i = 0; i < detailarr.length; i++) {
          for (var j = 0; j < detailarr.length; j++) {
            if (detailarr[i] == detailarr[j] && i != j) {
              detailarr.splice(j, 1);
            }
          }
        }
        item.detail = String(detailarr);
        this.inputValues[index] = "";
      }
      this.inputVisible = false;
    },
    // 初始化立即生成
    create2() {
      let goodsId = this.$route.query.goodsId;
      this.$http({
        url: this.$http.adornUrl("admin/goods/formatAttr"),
        method: "get",
        params: this.$http.adornParams({
          goodsId: goodsId
        })
      }).then(({ data }) => {
        console.log(data, "l1");
        let returnData = data.data;
        this.headerData = returnData.header;
        this.valueData = returnData.value;
        this.valueshow = true;
        this.valueshow1 = false;
        this.sku = returnData.value;
        this.detailJson = returnData.value[0].detailJson.split(",");
      });
    },
    // 立即生成
    create() {
      this.attr = [];
      this.attr.push({
        attrName: this.attrName,
        attrValue: this.ruleValue,
        ruleId: this.ruleId
      });
      if (this.originalMoney == "") {
        this.originalMoney = "0";
      }
      if (this.goodsMoney == "") {
        this.goodsMoney = "0";
      }
      if (this.memberPrice == "") {
        this.memberPrice = "0";
      }
      var axx = [];
      if (Array.isArray(this.attr) && this.attr.length > 0) {
        console.log(this.attr[0].attrValue, "ddkhg", this.attr[0]);
        axx = this.attr[0].attrValue;
      } else {
        axx = [];
      }
      console.log(axx, "khg");
      this.$http({
        url: this.$http.adornUrl(
          // `admin/goods/isFormatAttr?coverImg=${this.goodsCover}&originalPrice=${this.originalMoney}&price=${this.goodsMoney}`
          `admin/goods/isFormatAttr` //?originalPrice=${this.originalMoney}&price=${this.goodsMoney}
        ),
        method: "post",
        params: this.$http.adornParams({
          originalPrice: this.originalMoney,
          price: this.goodsMoney
        }),
        data: this.$http.adornData({
          attrName: this.attr[0].attrName,
          attrValue: axx,
          ruleId: this.attr[0].ruleId
        })
      }).then(({ data }) => {
        console.log(data, "l2");
        let returnData = data.data;
        this.headerData = returnData.header;
        this.valueData = returnData.value;
        this.valueshow = true;
        this.valueshow1 = false;
        this.sku = returnData.value;
        this.detailJson = returnData.value[0].detailJson.split(",");
      });
    },
    // 获取品牌
    brandSelect() {
      let page = this.page - 1;
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("selfGoodsBrand/result"),
        method: "get",
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.brandIds = returnData;
      });
    },
    // 商品分类
    dataSelect() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/goods/selectAllClassify"),
        method: "get",
        params: this.$http.adornParams({
          shopId: this.shopId
        })
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.typeDatas = returnData;
      });
    },
    // 添加标签
    btnTj() {
      if (this.bq == "" || this.bq == " ") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入标签名",
          type: "warning"
        });
        return;
      } else {
        console.log("this.bq", this.bq);
        this.labels.push(this.bq);
        this.bq = "";
      }
    },
    // 删除标签
    dels1(index) {
      this.labels.splice(index, 1);
      console.log(this.labels);
    },
    // 删除详情图
    clearXq(index) {
      this.goodsParticularsPicture.splice(index, 1);
    },
    //上传成功
    handleUploadSuccessXq(file, fileList) {
      this.goodsParticularsPicture.push(file.data);
    },
    onprogress1(event, file, fileList) {
      console.log("详情图上传进度", parseInt(event.percent));
      this.percentage1 = parseInt(event.percent);
    }
  },
  mounted() {
    this.init();
    this.specifSelect();
    window.scrollTo(0, 0);
    // this.brandSelect()
  },
  watch: {
    $route: "init"
  }
};
</script>

<style scoped="scoped">
.main-cont {
  max-width: 100%;
  min-width: 80%;
  padding-bottom: 5%;
  background-color: #fff;
}

.tinymce-container {
  position: relative;
  line-height: normal;
}

.tinymce-container >>> .mce-fullscreen {
  z-index: 10000;
}

.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}

.hide .el-upload--picture-card {
  display: none;
}

.margin15 {
  margin-right: 15px;
  margin-top: 10px;
}

.divhove {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: default;
  text-align: center;
  padding-top: 50%;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.el-tag--medium {
  margin-right: 10px;
}

.divhove:hover {
  opacity: 0.8;
}

.ruleitem {
  padding-left: 10px;
  margin-top: 15px;
}

.ruleitem .ruleicon {
  position: relative;
  top: 3px;
  left: 2px;
  width: 1.2em;
  height: 1.2em;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  height: 32px;
  line-height: 31px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #f5f7fa;
  position: relative;
  left: -5px;
  border-color: #dcdfe6;
  border: 1px solid #dcdfe6;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.el-input--small .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.el-table--enable-row-transition .el-table__body td {
  text-align: center;
}

.imgWrap .avatar-uploader .el-upload {
  width: 60px;
}

.el-table .cell {
  text-align: center !important;
}

.el-tag--medium {
  margin-right: 10px;
}

.bqList {
  padding: 4px 14px;
  margin: 4px;
  border: 1px solid #efefef;
  font-size: 12px;
  color: #999;
  border-radius: 4px;
  margin-right: 15px;
}

.delss {
  display: none;
  position: relative;
}

.delss .el-icon-delete {
  position: absolute;
  top: 0;
}

.bqList:hover .delss {
  display: initial;
  opacity: 0.5;
}

.tj {
  padding: 6px !important;
  margin: 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>