order-ui-pc/src/views/goodStore/goodsOnline/components/fixed-price-form.vue

<template>
  <div v-loading="loading">
    <el-form
      :model="addrForm"
      ref="addrForm"
      status-icon
      class="demo-addrForm-goodsOnline"
      :size="'mini'"
    >
      <el-table
        :data="addrForm.good_ladder"
        :size="'mini'"
        border
        stripe
        max-height="300px"
        row-key="key"
        style="width: 100%; margin: 0 0 20px 0"
      >
        <el-table-column type="index" width="50" show-overflow-tooltip />
        <el-table-column
          prop="min_num"
          label="起订量(>=)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-form-item
              v-show="scope.row.edit"
              :prop="'good_ladder.' + scope.$index + '.' + 'min_num'"
              :rules="addrRules.min_num"
              :size="'mini'"
              :style="{ marginBottom: scope.row.edit ? '13px' : '0' }"
            >
              <digital-input
                :values="scope.row.min_num"
                :placeholder="'起订量(>=)'"
                :min="0"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :controls="false"
                :append="''"
                :newTime="scope.row.newTime"
                :size="'mini'"
                :disabled="!scope.row.edit"
                @reschange="num_change($event, 'min_num', scope.$index)"
              />
            </el-form-item>
            <span v-show="!scope.row.edit">{{ scope.row.min_num }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="new_sale_price" show-overflow-tooltip>
          <template slot="header" slot-scope="scope">
            <span>系统售价（元）</span>
            <el-popover
              placement="top-start"
              title="计算公式:"
              width="300"
              style="margin: 3px 0 0 0"
              class="fr"
              trigger="hover"
              ><div>
                <div v-if="sitem.is_gold_price === '1'">
                  <span class="jiashu">贵金属克重</span>
                  <span class="jiahao">*</span>
                  <span class="jiashu">实时金价</span>
                  <span class="jiahao">+</span>
                  <span class="jiashu">工艺费</span>
                  <span class="jiahao">*</span>
                  <span class="jiashu">贵金属克重</span>
                  <span class="jiahao">+</span>
                </div>
                <div>
                  <span class="jiashu">包装费</span>
                  <span class="jiahao">+</span>
                  <span class="jiashu">裸价</span>
                  <span class="jiahao">+</span>
                  <span class="jiashu">加标费</span>
                  <span class="jiahao">+</span>
                  <span class="jiashu">证书费</span>
                  <span class="jiahao">+</span>
                  <span class="jiashu">物流费</span>
                </div>
              </div>

              <i class="el-icon-question tb-icon" slot="reference"></i>
            </el-popover>
          </template>

          <template slot-scope="scope">
            <el-form-item
              v-show="scope.row.edit"
              :prop="'good_ladder.' + scope.$index + '.' + 'new_sale_price'"
              :rules="addrRules.new_sale_price"
              :size="'mini'"
              :style="{ marginBottom: scope.row.edit ? '13px' : '0' }"
            >
              <el-input
                v-loading="scope.row.loading"
                v-model="scope.row.new_sale_price"
                placeholder="系统售价"
                :disabled="true"
                :size="'mini'"
                maxlength="20"
              />
            </el-form-item>
            <span v-show="!scope.row.edit">{{ scope.row.new_sale_price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sale_price" label="售价" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-form-item
              v-show="scope.row.edit"
              :prop="'good_ladder.' + scope.$index + '.' + 'sale_price'"
              :rules="addrRules.sale_price"
              :size="'mini'"
              :style="{ marginBottom: scope.row.edit ? '13px' : '0' }"
            >
              <digital-input
                :values="scope.row.sale_price"
                :placeholder="'售价'"
                :min="0"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :controls="false"
                :append="''"
                :newTime="scope.row.newTime"
                :size="'mini'"
                :disabled="!scope.row.edit"
                @reschange="num_change($event, 'sale_price', scope.$index)"
              />
            </el-form-item>
            <span v-show="!scope.row.edit">{{ scope.row.sale_price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="market_price"
          label="市场价"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-form-item
              v-show="scope.row.edit"
              :prop="'good_ladder.' + scope.$index + '.' + 'market_price'"
              :rules="addrRules.market_price"
              :size="'mini'"
              :style="{ marginBottom: scope.row.edit ? '13px' : '0' }"
            >
              <digital-input
                :values="scope.row.market_price"
                :placeholder="'市场价'"
                :min="0"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :controls="false"
                :append="''"
                :newTime="scope.row.newTime"
                :size="'mini'"
                :disabled="!scope.row.edit"
                @reschange="num_change($event, 'market_price', scope.$index)"
              />
            </el-form-item>
            <span v-show="!scope.row.edit">{{ scope.row.market_price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="market_platform"
          label="对比平台"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-form-item
              v-show="scope.row.edit"
              :prop="'good_ladder.' + scope.$index + '.' + 'market_platform'"
              :rules="addrRules.market_platform"
              :size="'mini'"
              :style="{ marginBottom: scope.row.edit ? '13px' : '0' }"
            >
              <el-input
                v-model="scope.row.market_platform"
                placeholder="对比平台"
                maxlength="50"
                :disabled="!scope.row.edit"
              />
            </el-form-item>
            <span v-show="!scope.row.edit">{{
              scope.row.market_platform
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-form-item
              v-show="scope.row.edit"
              :prop="'good_ladder.' + scope.$index + '.' + 'status'"
              :rules="addrRules.status"
              :size="'mini'"
              :style="{ marginBottom: scope.row.edit ? '13px' : '0' }"
            >
              <el-select v-model="scope.row.status" placeholder="状态">
                <el-option
                  v-for="item in status_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <span v-show="!scope.row.edit">{{
              scope.row.status == "1" ? "启用" : "禁用"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right">
          <template slot="header" slot-scope="scope">
            <span>操作</span>
            <el-tooltip effect="dark" content="添加阶梯" placement="top">
              <i
                class="el-icon-circle-plus-outline tb-icon fr"
                @click="openCostEdit(-1)"
              ></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              content="保存"
              v-if="scope.row.edit"
              placement="top"
            >
              <i
                class="el-icon-circle-check tb-icon"
                @click="checkRow(scope.$index)"
              ></i>
            </el-tooltip>
            <el-tooltip effect="dark" v-else content="修改" placement="top">
              <i
                class="el-icon-edit tb-icon"
                @click="openCostEdit(scope.$index)"
              ></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top">
              <i
                class="el-icon-delete tb-icon"
                @click="openCostEditDelete(scope.$index)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      status-icon
      :rules="rulesThis"
      class="demo-ruleForm-goodsOnline"
      :size="'mini'"
    >
      <el-row>
        <el-col :span="24"
          ><el-form-item label="售价凭证类型" prop="proof_type">
            <el-radio-group
              v-model="ruleForm.proof_type"
              @change="set_proof_url()"
            >
              <el-radio
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
            <el-button class="fr" type="primary" @click="showVoucher = true"
              >查看历史凭证</el-button
            >
          </el-form-item>

          <show-voucher-model
            :showModel="showVoucher"
            :id="spuCode"
            @cancel="showVoucher = false"
            @searchChange="resvoucher"
          />
        </el-col>
        <el-col :span="18">
          <el-form-item label="凭证文件" prop="proof_url">
            <ul class="shangchuan-ul">
              <li v-if="ruleForm.proof_type === '1'" class="shiping">
                <div v-if="video_url" class="clearfix">
                  <video width="250" controls class="fl">
                    <source :src="video_url" type="video/mp4" />
                    <source :src="video_url" type="video/avi" />
                    您的浏览器不支持Video标签。
                  </video>
                  <el-link
                    :underline="false"
                    @click="deleteUrl('1')"
                    type="warning"
                    style="margin: 0 0 0 16px"
                    >删除</el-link
                  >
                </div>

                <div class="activity-upload" v-else>
                  <div class="btnupload" style="position: relative">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <video-upload
                      class="Upload"
                      :disabled="type === 'view' || type === 'editCoin'"
                      :accept="'.mp4,.avi'"
                      :multiple="false"
                      :uploadcondition="beforeVideoUpload"
                      @UploadErrorEvent="UploadVideoEventproof_url"
                      @UploadSuccessEvent="UploadSuccessVideoproof_url"
                    />
                  </div>

                  <div class="txt-tips fl">
                    <p>建议大小：小于10MB</p>
                    <p>文件格式：.mp4,.avi</p>
                  </div>
                </div>
              </li>
              <li v-if="ruleForm.proof_type === '2'" class="tupian">
                <div v-if="img_url" class="clearfix">
                  <img
                    style="width: 50px; height: 50px"
                    :src="img_url"
                    class="avatar fl"
                  />
                  <el-link
                    :underline="false"
                    @click="deleteUrl('2')"
                    type="warning"
                    style="margin: 0 0 0 16px"
                    >删除</el-link
                  >
                </div>

                <div class="activity-upload" v-else>
                  <div class="btnupload" style="position: relative">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <file-upload
                      class="Upload"
                      :disabled="type === 'view' || type === 'editCoin'"
                      :accept="'.jpg,.png,.jpeg'"
                      :multiple="false"
                      :uploadcondition="beforeAvatarUpload"
                      @UploadErrorEvent="UploadErrorEventproof_url"
                      @UploadSuccessEvent="UploadSuccessEventproof_url"
                    ></file-upload>
                  </div>
                  <div class="txt-tips fl">
                    <p>建议大小：小于1MB</p>
                    <p>文件格式：.jpg,.png,.jpeg</p>
                  </div>
                </div>
              </li>
              <li v-if="ruleForm.proof_type === '3'" class="qita">
                <div v-if="other_url" class="clearfix">
                  <a :href="other_url" download="凭证文件">点击下载</a>

                  <el-link
                    :underline="false"
                    @click="deleteUrl('3')"
                    type="warning"
                    style="margin: 0 0 0 16px"
                    >删除</el-link
                  >
                </div>

                <div class="activity-upload" v-else>
                  <div class="btnupload" style="position: relative">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <file-upload-pdf
                      class="Upload"
                      :accept="'.xlsx,.xls,.pdf,.zip,.rar,.7z'"
                      :multiple="false"
                      :uploadcondition="beforeOtherUpload"
                      @UploadErrorEvent="UploadErrorOtherproof_url"
                      @UploadSuccessEvent="UploadSuccessOtherproof_url"
                    />
                  </div>
                  <div class="txt-tips fl">
                    <p>建议大小：小于5MB</p>
                    <p>文件格式：.xlsx,.xls,.pdf,.zip,.rar,.7z</p>
                  </div>
                </div>
                
              </li>
            </ul>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="fr">
            <el-button
              v-if="!isDetail"
              :size="'mini'"
              type="primary"
              @click="submitForm"
              >保 存
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// import costFormAddEdit from "./costFormAddEdit";
import asyncRequest from "@/apis/service/goodStore/goodsOnline";
import showVoucherModel from "@/components/show-voucher-model";
export default {
  name: "exam-form",
  props: [
    "size",
    "statusList",
    "disabled",
    "isMust",
    "labelWidth",
    "id",
    "spuCode",
    "sitem",
  ],
  components: {
    // costFormAddEdit,
    showVoucherModel,
  },
  /**
   * 属性集合
   * @param {String}        size             : 组件大小             非必填
   * @param {Array}         statusList       : 驳回至备选项          必填
   * @param {Boolean}       disabled         : 是否禁用              必填
   * @param {Boolean}       isMust           : 是否需要展示驳回节点   必填
   *
   *
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    const validate_num = (rule, value, callback) => {
      const { required } = rule;
      if (required && value === "") {
        callback(new Error("不能为空！"));
      } else {
        callback();
      }
    };
    const validate_num_0 = (rule, value, callback) => {
      const { required } = rule;
      if (required && value === "") {
        callback(new Error("不能为空！"));
      } else if (
        required &&
        (value === "0" ||
          value === "0." ||
          value === "0.0" ||
          value === "0.00" ||
          value === "0.000")
      ) {
        callback(new Error("不能为零！"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      showVoucher: false,
      video_url: "",
      img_url: "",
      other_url: "",
      options: [
        {
          value: "1",
          label: "视频",
        },
        {
          value: "2",
          label: "图片",
        },
        {
          value: "3",
          label: "其他",
        },
      ],
      status_options: [
        {
          value: "1",
          label: "启用",
        },
        {
          value: "0",
          label: "禁用",
        },
      ],
      showModelThis: this.showModel,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 60 * 60 * 24 * 1000;
        },
      },
      costshowModel: false,
      costmodelIndex: "",
      costsitem: {},
      ruleForm: {
        skuCode: "",
        proof_type: "1", // 通过or驳回
        proof_url: "", //驳回至
      },
      rulesThis: this.rules,
      rules: {
        proof_type: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change",
          },
        ],
        proof_url: [
          {
            required: true,
            message: "请上传凭证文件",
            trigger: "blur,change",
          },
        ],
        rebut: [
          {
            required: true,
            message: "请选择驳回节点",
            trigger: "change",
          },
        ],
        remark: [
          { required: true, message: "请输入审核备注", trigger: "blur" },
          {
            min: 1,
            max: 250,
            message: "长度在 1 到 250 个字符",
            trigger: "blur",
          },
        ],
      },
      addrForm: {
        good_ladder: [],
      },
      addrRules: {
        min_num: [
          {
            required: true,
            validator: validate_num_0,
            trigger: "blur",
          },
        ],

        sale_price: [
          {
            required: true,
            trigger: "blur",
            validator: validate_num,
          },
        ],
        market_price: [
          {
            required: true,
            validator: validate_num,
            trigger: "blur",
          },
        ],

        market_platform: [
          {
            required: true,
            message: "对比平台不能为空",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "状态不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    isDetail: function (val, old) {
      if (this.isDetail !== val) {
        this.options = [];
        this.selectLoading = false;
      }
    },
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      console.log(this.spuCode);
      this.loading = true;
      await this.resetForm();
      this.rulesThis = this.rules;

      this.loading = false;
    },

    openCostEdit(index) {
      let findex = this.addrForm.good_ladder.findIndex((v) => v.edit === true);
      if (findex !== -1) {
        this.$message.warning("当前已有阶梯售价在编辑，请保存后再试！");
        return;
      } else {
        if (index === -1) {
          this.addrForm.good_ladder.push({
            edit: true,
            min_num: "",
            new_sale_price: "",
            sale_price: "",
            market_price: "",
            market_platform: "",
            status: "1",
          });
        } else {
          this.addrForm.good_ladder[index].edit = true;
          this.addrForm.good_ladder[index].newTime = new Date().valueOf() + "";
        }
      }
    },
    async get_new(index) {
      const { min_num } = this.addrForm.good_ladder[index];
      this.addrForm.good_ladder[index].search_loading = true;
      let { code, data, message } = await asyncRequest.goodupprice({
        min_num: min_num,
        spuCode: this.spuCode,
      });
      let resModel = {
        isok: code,
        price: code === 0 ? data.sale_price : "0",
        message: message,
      };
      this.addrForm.good_ladder[index].search_loading = false;
      return resModel;
    },
    //保存某一行
    async checkRow(rowIndex) {
      await this.$refs.addrForm.validate(async (valid) => {
        if (valid) {
          if (!this.addrForm.good_ladder[rowIndex].search_loading) {
            const { min_num } = this.addrForm.good_ladder[rowIndex];
            let findex = this.addrForm.good_ladder.findIndex(
              (v) => v.edit !== true && v.min_num + "" === min_num + ""
            );
            if (findex !== -1) {
              this.$message.warning("当前已有相同起订量的销售价！");
              return;
            }
            let { isok, price, message } = await this.get_new(rowIndex);
            if (isok === 0) {
              this.addrForm.good_ladder[rowIndex].new_sale_price = price;
              this.addrForm.good_ladder[rowIndex].edit = false;
            } else if (isok >= 100 && isok <= 104) {
              await this.logout();
            } else {
              this.addrForm.good_ladder[rowIndex].new_sale_price = price;
              this.$message.warning(message);
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    openCostEditDelete(index) {
      this.addrForm.good_ladder.splice(index, 1);
    },
    async num_change(e, key, index) {
      this.addrForm.good_ladder[index][key] = e + "" || "0";
      if (key === "min_num") {
        const { min_num } = this.addrForm.good_ladder[index];
        if (min_num === "" || min_num === "0") {
          this.addrForm.good_ladder[index].new_sale_price = "0";
        } else {
          if (!this.addrForm.good_ladder[index].search_loading) {
            let { isok, price, message } = await this.get_new(index);
            if (isok === 0) {
              this.addrForm.good_ladder[index].new_sale_price = price;
            } else if (isok >= 100 && isok <= 104) {
              await this.logout();
            } else {
              this.addrForm.good_ladder[index].new_sale_price = price;
              this.$message.warning(message);
            }
          }
        }
      }
    },

    async resetForm() {
      // 重置
      await this.$nextTick(async () => {
        if (this.$refs.ruleForm && this.$refs.addrForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.$refs.addrForm.resetFields();
          this.$refs.addrForm.clearValidate();
          let { proof, ladderlist } = this.sitem;
          ladderlist.map((a) => {
            a.search_loading = false;
            a.new_sale_price = "0";
            a.newTime = new Date().valueOf() + "";
            a.edit = false;
            return a;
          });

          this.ruleForm = {
            skuCode: this.id,
            proof_type: proof && proof.proof_type ? proof.proof_type : "1", // 通过or驳回
            proof_url: proof && proof.proof_url ? proof.proof_url : "", //驳回至
          };
          this.addrForm = {
            good_ladder:
              ladderlist && ladderlist.length > 0
                ? JSON.parse(JSON.stringify(ladderlist))
                : [],
          };
          // console.log(this.ruleForm.proof_url);
          switch (this.ruleForm.proof_type) {
            case "1":
              this.video_url = this.ruleForm.proof_url;
              break;
            case "2":
              this.img_url = this.ruleForm.proof_url;
              break;
            case "3":
              this.other_url = this.ruleForm.proof_url;
              break;
            default:
              this.video_url = this.ruleForm.proof_url;
          }
          this.$refs.ruleForm.validateField("proof_url");
          for (let i = 0; i < this.addrForm.good_ladder.length; i++) {
            let { isok, price, message } = await this.get_new(i);
            if (isok === 0) {
              this.addrForm.good_ladder[i].new_sale_price = price;
              this.addrForm.good_ladder[i].edit = false;
            } else if (isok >= 100 && isok <= 104) {
              await this.logout();
            } else {
              this.addrForm.good_ladder[i].new_sale_price = price;
              this.addrForm.good_ladder[i].edit = true;
              this.addrForm.good_ladder[i].newTime = new Date().valueOf() + "";
              this.$message.warning(message);
            }
          }
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let model = JSON.parse(JSON.stringify(this.ruleForm));

          if (this.addrForm.good_ladder.length === 0) {
            this.$message.warning("至少添加一条销售价信息！");
            this.loading = false;
            return;
          }
          let list = JSON.parse(JSON.stringify(this.addrForm.good_ladder));
          let isedit = false;
          list.forEach((v) => {
            if (v.edit) {
              isedit = true;
            }
          });
          if (isedit) {
            this.$message.warning("请保存阶梯售价！");
            this.loading = false;
            return;
          }

          let all_is_ok = true;
          for (let i = 0; i < this.addrForm.good_ladder; i++) {
            this.addrForm.good_ladder[i].search_loading = true;
            let { isok, price } = await this.get_new(i);
            if (isok === 0) {
              this.addrForm.good_ladder[i].new_sale_price = price;
              this.addrForm.good_ladder[i].edit = false;
            } else if (isok >= 100 && isok <= 104) {
              await this.logout();
            } else {
              all_is_ok = false;
              this.addrForm.good_ladder[i].new_sale_price = price;
              this.addrForm.good_ladder[i].edit = true;
              this.addrForm.good_ladder[i].newTime = new Date().valueOf() + "";
            }
          }
          if (!all_is_ok) {
            this.$message.warning("阶梯售价未满足成本最低起订量！");
            this.loading = false;
          }
          let list2 = [];
          list.forEach((e) => {
            let n = JSON.parse(JSON.stringify(e));
            for (let key in n) {
              n[key] += "";
            }
            delete n["index"];
            list2.push(n);
          });
          model.good_ladder = list2;
          model.skuCode = this.id;
          let res = await asyncRequest.ladderOne(model);
          this.loading = false;
          if (res && res.code === 0) {
            this.$notify.success({
              title: "信息提交成功",
              message: "",
            });
            this.$emit("resSuccess", true);
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resvoucher(e) {
      const { proof_type, proof_url } = e;
      this.ruleForm.proof_type = proof_type || "1";
      switch (this.ruleForm.proof_type) {
        case "1":
          this.video_url = proof_url;
          break;
        case "2":
          this.img_url = proof_url;
          break;
        case "3":
          this.other_url = proof_url;
          break;
        default:
          this.video_url = proof_url;
      }
      this.set_proof_url();
    },
    //图片上传成功
    async UploadSuccessEventproof_url(data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        this.img_url = url;
        this.set_proof_url();
        this.$message.success("图片上传成功!");
      }
    },

    //图片上传失败
    UploadErrorEventproof_url(res) {
      if (res !== "break") {
        this.set_proof_url();
        this.$message.error("图片上传失败!");
      }
    },

    //判断图片规格
    beforeAvatarUpload(file) {
      let isJPG = false;
      if (
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg"
      ) {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("图片格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },

    //视频上传成功
    async UploadSuccessVideoproof_url(data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        this.video_url = url;
        this.set_proof_url();
        this.$message.success("视频上传成功!");
      }
    },

    //视频上传失败
    UploadErrorVideoproof_url(res) {
      if (res !== "break") {
        this.set_proof_url();
        this.$message.error("视频上传失败!");
      }
    },

    //判断视频规格
    beforeVideoUpload(file) {
      let isJPG = false;
      if (file.type === "video/mp4" || file.type === "video/avi") {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("视频格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("视频大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },

    // 其他文件上传成功
    async UploadSuccessOtherproof_url(data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        this.other_url = url;
        this.set_proof_url();
        this.$message.success("文件成功!");
      }
    },

    //其他文件上传失败
    UploadErrorOtherproof_url(res) {
      if (res !== "break") {
        this.set_proof_url();
        this.$message.error("文件上传失败!");
      }
    },

    //判断其他文件规格
    beforeOtherUpload(file) {
      console.log(file);
      let isJPG = false;
      if (
        file.type === "application/vnd.ms-excel" ||
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/pdf" ||
        file.type === "application/x-zip-compressed"
      ) {
        isJPG = true;
      }
      let name = file.name;
      let list = name.split(".");
      if (list[list.length - 1] === "rar" || list[list.length - 1] === "7z") {
        isJPG = true;
      }

      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("文件格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("文件大小不能超过 5MB!");
      }
      return isJPG && isLt2M;
    },

    deleteUrl(type) {
      switch (type) {
        case "1":
          this.video_url = "";
          break;
        case "2":
          this.img_url = "";
          break;
        case "3":
          this.other_url = "";
          break;
        default:
          this.video_url = "";
      }
      this.set_proof_url();
    },
    set_proof_url() {
      const { proof_type } = this.ruleForm;
      switch (proof_type) {
        case "1":
          this.ruleForm.proof_url = this.video_url;
          break;
        case "2":
          this.ruleForm.proof_url = this.img_url;
          break;
        case "3":
          this.ruleForm.proof_url = this.other_url;
          break;
        default:
          this.ruleForm.proof_url = this.video_url;
      }
      this.$refs.ruleForm.validateField("proof_url");
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-ruleForm-goodsOnline {
  .shangchuan-ul {
    li {
      position: relative;
      width: 100%;
      &.tupian {
      }
    }
  }
}
</style>