ceres-merchant-web-v2.0/src/views/liveMenu/liveRoom/index.vue

<template>
  <div class="liveRoomPage">
    <nav>
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item label="状态：" label-width="100px">
          <el-radio-group v-model="listQuery.state" @change="searchTypeChange">
            <el-radio-button
              v-for="item in searchType"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <br>
        <el-form-item label="关键字：" label-width="100px">
          <el-input
            v-model="listQuery.search"
            maxlength="20"
            placeholder="请输入直播间名称/ID/主播昵称/微信号"
            class="inputKeyWord"
            style="width:400px;"
          >
            <el-button slot="append" icon="el-icon-search" @click="getList" />
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 20px" type="success" @click="add">创建直播间</el-button>
        </el-form-item>
      </el-form>
    </nav>
    <section>
      <el-table
        ref="multipleTable"
        :data="roomList"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="id" label="直播间id" />
        <el-table-column prop="title" label="直播间标题" />
        <el-table-column prop="anchorNickname" label="主播昵称" />
        <el-table-column prop="anchorWechat" label="主播微信号" />
        <el-table-column prop="startTime" label="直播开始时间" />
        <el-table-column prop="endTime" label="预计结束时间" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="审核状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state == 0" type="warning">
              待审核
            </el-tag>
            <el-tag v-if="scope.row.state == 1" type="success">
              已通过
            </el-tag>
            <el-tag v-if="scope.row.state == 2" type="danger">
              未通过
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="200"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div class="btnList">
              <el-button
                v-if="scope.row.state == 1"
                type="text"
                @click="addPro(scope.row)"
              >导入</el-button>
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" @click="seeMore(scope.row)">详情</el-button>
              <el-button type="text" @click="del(scope.row)">删除</el-button>
              <el-button
                v-if="scope.row.state == 2"
                type="text"
                @click="reExamine(scope.row)"
              >重新审核</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </section>

    <el-dialog
      :title="'直播间信息'"
      :visible.sync="DetailsLiveShow"
      width="50%"
      center
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="12">
          <el-form :model="liveForm" size="mini" label-width="180px">
            <el-form-item label="直播间标题:">
              {{ liveForm.title }}
            </el-form-item>
            <el-form-item label="直播间id:">
              {{ liveForm.id }}
            </el-form-item>
            <el-form-item label="直播间开始时间:">
              {{ liveForm.startTime }}
            </el-form-item>
            <el-form-item label="背景图:">
              <img :src="liveForm.coverImg" alt="" srcset="">
            </el-form-item>
            <el-form-item label="直播间类型:">
              {{ liveForm.liveType == 1 ? "推流" : "手机" }}
            </el-form-item>
            <el-form-item label="是否开启点赞:">
              {{ liveForm.closeLike == 0 ? "是" : "否" }}
            </el-form-item>
            <el-form-item label="是否开启评论:">
              {{ liveForm.closeComment == 0 ? "是" : "否" }}
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form :model="liveForm" size="mini" label-width="180px">
            <el-form-item label="主播微信号:">
              {{ liveForm.anchorWechat }}
            </el-form-item>
            <el-form-item label="主播昵称:">
              {{ liveForm.anchorNickname }}
            </el-form-item>
            <el-form-item label="直播间结束时间:">
              {{ liveForm.endTime }}
            </el-form-item>
            <el-form-item label="分享图:">
              <img :src="liveForm.shareImg" alt="" srcset="">
            </el-form-item>
            <el-form-item label="是否开启回放:">
              {{ liveForm.closePlayback == 0 ? "是" : "否" }}
            </el-form-item>
            <el-form-item label="是否开启预约:">
              {{ liveForm.closeAppointment == 0 ? "是" : "否" }}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div>
        <el-table
          ref="multipleTable"
          :data="roomProList"
          border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="productId" label="商品ID" />
          <el-table-column prop="productImage" label="商品图片">
            <template slot-scope="scope">
              <img
                style="width: 40px; height: 40px"
                :src="scope.row.productImage"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="stockNumber" label="库存" />
          <el-table-column label="价格">
            <template slot-scope="scope">
              <span v-if="scope.row.priceType == 1">
                一口价: {{ scope.row.fixedPrice }}
              </span>
              <span v-if="scope.row.priceType == 2">
                最低价：{{ scope.row.minPrice }} <br>
                最高价：{{ scope.row.maxPrice }}
              </span>
              <span v-if="scope.row.priceType == 3">
                现价: {{ scope.row.marketPrice }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="saleNumber" label="销售数量" />
          <el-table-column prop="saleAmount" label="销售金额" />
        </el-table>
        <el-pagination
          style="margin-top: 20px"
          :current-page="proListQuery.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="proTotal"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        />
      </div>
      <div v-if="liveForm.remark" style="text-align: center; margin-top: 20px">
        <span style="color: red">备注：</span>
        {{ liveForm.remark }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">关 闭</el-button>
      </span>
    </el-dialog>
    <!--表单组件-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="addLiveShow"
      :title="LiveShowState == 1 ? '创建直播间' : '编辑直播间'"
      width="800px"
      center
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="140px"
      >
        <el-form-item label="直播间标题" prop="title">
          <el-input
            v-model="form.title"
            maxlength="20"
            style="width: 370px"
            :disabled="isDisabled"
          />
        </el-form-item>
        <el-form-item label="直播间背景图" prop="coverImg">
          <div class="uploadWidth">
            <el-upload
              class="avatar-uploader1"
              :headers="headers"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handlePictureCardPreview1"
            >
              <img
                v-if="form.coverImg"
                :src="form.coverImg"
                class="avatar"
              >
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
          <p style="color: #cf0f0f">直播间背景图，图片规则：建议像素1080*1920，大小不超过2M</p>
        </el-form-item>
        <el-form-item label="直播间分享图片" prop="shareImg">
          <div class="uploadWidth">
            <el-upload
              class="avatar-uploader2"
              :headers="headers"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handlePictureCardPreview2"
            >
              <img v-if="form.shareImg" :src="form.shareImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
          <p style="color: #cf0f0f">直播分享图 ，建议像素800*640，大小不超过1M</p>
        </el-form-item>
        <el-form-item label="封面图" prop="feedsImg">
          <div class="uploadWidth">
            <el-upload
              class="avatar-uploader3"
              :headers="headers"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handlePictureCardPreview3"
            >
              <img v-if="form.feedsImg" :src="form.feedsImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
          <p style="color: #cf0f0f">购物直播封面图 ，建议尺寸800*800</p>
        </el-form-item>
        <el-form-item label="计划直播开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            style="width: 370px"
            :disabled="isDisabled"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <p style="color: #cf0f0f">
            开播时间需要在当前时间的50分钟左右,并且开始时间不能在6个月后
          </p>
        </el-form-item>
        <el-form-item label="计划直播结束时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            style="width: 370px"
            :disabled="isDisabled"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <p style="color: #cf0f0f">
            开播时间和结束时间间隔不得短于30分钟,不得超过24小时
          </p>
        </el-form-item>
        <el-form-item
          label="主播昵称"
          prop="anchorNickname"
          :disabled="isDisabled"
        >
          <el-input
            v-model="form.anchorNickname"
            maxlength="20"
            style="width: 370px"
            :disabled="isDisabled"
          />
        </el-form-item>
        <el-form-item
          label="主播微信号"
          prop="anchorWechat"
          :disabled="isDisabled"
        >
          <el-input
            v-model="form.anchorWechat"
            maxlength="20"
            style="width: 370px"
            :disabled="isDisabled"
          />
          <p style="color: #cf0f0f">
            主播微信号需要实名，搜索微信官方小程序【小程序直播】进行认证
          </p>
        </el-form-item>
        <el-form-item label="主播头像" prop="anchorImge">
          <div class="uploadWidth">
            <el-upload
              class="avatar-uploader3"
              :headers="headers"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handlePictureCardPreview4"
            >
              <img
                v-if="form.anchorHeadImg"
                :src="form.anchorHeadImg"
                class="avatar"
              >
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="直播间类型" prop="liveType">
          <el-radio-group v-model="form.liveType" :disabled="isDisabled">
            <el-radio :label="1" class="radio">推流</el-radio>
            <el-radio :label="0">手机直播</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="横屏、竖屏" prop="screenType">
          <el-radio-group v-model="form.screenType" :disabled="isDisabled">
            <el-radio :label="1" class="radio">横屏</el-radio>
            <el-radio :label="0">竖屏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否关闭点赞" prop="closeLike">
          <el-radio-group v-model="form.closeLike" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否关闭货架" prop="closeGoodsShelf">
          <el-radio-group v-model="form.closeGoodsShelf" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否关闭评论" prop="closeComment">
          <el-radio-group v-model="form.closeComment" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否关闭回放" prop="closePlayback">
          <el-radio-group v-model="form.closePlayback" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否关闭分享" prop="closeShare">
          <el-radio-group v-model="form.closeShare" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="是否关闭客服" prop="closeService">
          <el-radio-group v-model="form.closeService" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="是否关闭预约" prop="closeAppointment">
          <el-radio-group
            v-model="form.closeAppointment"
            :disabled="isDisabled"
          >
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addLiveShow = false">取 消</el-button>
        <el-button
          v-if="LiveShowState == 1"
          type="success"
          :disabled="isDisabled"
          @click="submitCU"
        >确 认</el-button>
        <el-button
          v-if="LiveShowState == 2"
          type="primary"
          :disabled="isDisabled"
          @click="submitCU"
        >保 存</el-button>
      </span>
    </el-dialog>
    <!-- 导入商品 -->
    <el-dialog
      title="导入商品"
      :visible.sync="addProShow"
      width="60%"
      center
      :close-on-click-modal="false"
    >
      <el-form
        :inline="true"
        :model="proListPassQuery"
        class="demo-form-inline"
      >
        <el-form-item class="inputWide" label="关键字">
          <el-input
            v-model="proListPassQuery.search"
            maxlength="20"
            placeholder="请输入关键字搜索"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getProPassList">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="proListPassData"
          border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="productId" label="商品ID" />
          <el-table-column prop="productImage" label="商品图片">
            <template slot-scope="scope">
              <img
                style="width: 40px; height: 40px"
                :src="scope.row.productImage"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="stockNumber" label="库存" />
          <el-table-column label="价格">
            <template slot-scope="scope">
              <span v-if="scope.row.priceType == 1">
                一口价: {{ scope.row.fixedPrice }}
              </span>
              <span v-if="scope.row.priceType == 2">
                最低价：{{ scope.row.minPrice }} <br>
                最高价：{{ scope.row.maxPrice }}
              </span>
              <span v-if="scope.row.priceType == 3">
                现价: {{ scope.row.marketPrice }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 20px"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="proListPassTotal"
          @size-change="handleSizeChange3"
          @current-change="handleCurrentChange3"
        />
      </div>
      <!-- 新增用户 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addProShow = false">取 消</el-button>
        <el-button type="success" @click="addproSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  liveGetList,
  liveGetProduct,
  addLiveSave,
  updateLive,
  deleteLive,
  liveProGetAll,
  importProduct,
  reExamine,
} from '@/api/live';
import { WXuploadUrl } from '@/utils/request';
import { getToken } from '@/utils/auth.js'
export default {
  data() {
    return {
      uploadUrl: WXuploadUrl,
      headers: {
        'Authorization-business': getToken()
      },
      searchType: [
        {
          label: '全部',
          value: null,
        },
        {
          label: '待审核',
          value: 0,
        },
        {
          label: '审核已通过',
          value: 1,
        },
        {
          label: '审核未通过',
          value: 2,
        },
      ],
      listQuery: {
        state: null,
        search: '',
        page: 0,
        pageSize: 10,
        shopId: null,
      },
      proListQuery: {
        liveId: null,
        page: 0,
        pageSize: 10,
        shopId: null,
      },
      roomList: [], // 直播间列表
      roomProList: [], // 直播相关产品列表
      total: 0,
      proTotal: 0,
      DetailsLiveShow: false,
      activeName: 'first',
      disabled: false,
      liveForm: {}, // 添加直播间
      // 添加直播间部分
      addLiveShow: false,
      isDisabled: false,
      LiveShowState: false,
      form: {
        anchorHeadImg: '',
        anchorNickname: '',
        anchorWechat: '',
        coverImg: '',
        coverMediaId: '',
        closeAppointment: 0,
        closeComment: 0,
        closeGoodsShelf: 0,
        closeLike: 0,
        closePlayback: 0,
        closeService: 0,
        closeShare: 0,
        feedsImg: '',
        feedsMediaId: '',
        endTime: '',
        id: 0,
        liveType: 0,
        remark: '',
        screenType: 0,
        shareImg: '',
        shareMediaId: '',
        shopId: 0,
        startTime: '',
        state: 0,
        title: '',
      },
      rules: {
        title: [
          { required: true, message: '直播间标题不能为空', trigger: 'blur' },
          { min: 3, max: 17, message: '最短3个汉字，最长17个汉字', trigger: 'blur' }
        ],
        coverImg: [
          { required: true, message: '背景图不能为空', trigger: 'blur' },
        ],
        feedsImg: [
          { required: true, message: '封面图不能为空', trigger: 'blur' },
        ],
        shareImg: [
          { required: true, message: '分享图片不能为空', trigger: 'blur' },
        ],
        startTime: [
          { required: true, message: '开始时间不能为空', trigger: 'blur' },
        ],
        endTime: [
          { required: true, message: '预计结束时间不能为空', trigger: 'blur' },
        ],
        anchorNickname: [
          { required: true, message: '主播昵称不能为空', trigger: 'blur' },
          { min: 2, max: 15, message: '最短2个汉字，最长15个汉字', trigger: 'blur' }
        ],
        anchorWechat: [
          { required: true, message: '主播微信号不能为空', trigger: 'blur' },
        ],
        liveType: [
          {
            required: true,
            message: '直播间类型 1：推流 0：手机直播不能为空',
            trigger: 'blur',
          },
        ],
        screenType: [
          {
            required: true,
            message: '横屏、竖屏 【1：横屏，0：竖屏】不能为空',
            trigger: 'blur',
          },
        ],
        closeGoodsShelf: [
          {
            required: true,
            message: '是否关闭货架 【0：开启，1：关闭】不能为空',
            trigger: 'blur',
          },
        ],
        closeComment: [
          {
            required: true,
            message: '是否关闭评论 【0：开启，1：关闭】不能为空',
            trigger: 'blur',
          },
        ],
        closeAppointment: [
          {
            required: true,
            message: '是否关闭预约 【0：开启，1：关闭】不能为空',
            trigger: 'blur',
          },
        ],
      },
      addProShow: false,
      proListPassData: [],
      proListPassQuery: {
        liveId: null,
        page: 0,
        pageSize: 10,
        shopId: null,
        search: null,
      },
      proListPassTotal: 0,
      proPassFrom: {
        liveId: null,
        liveProductIdList: [],
        shopId: null,
      },
      isAllow: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取直播间列表
    async getList() {
      const res = await liveGetList(this.listQuery);
      this.total = res.data.total;
      this.roomList = res.data.list;
    },
    // 获取直播间相关产品信息
    async getProList() {
      this.proListQuery.shopId = this.liveForm.shopId;
      this.proListQuery.liveId = this.liveForm.id;
      const res = await liveGetProduct(this.proListQuery);
      this.roomProList = res.data.list;
      this.proTotal = res.data.total;
    },
    seeMore(row) {
      this.liveForm = row;
      this.DetailsLiveShow = true;
      this.getProList();
    },
    del(row) {
      this.$confirm('是否确认删除该内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteLive(row)
          .then((res) => {
            this.closeDialogVisible = false;
            this.$message.success('删除成功');
            this.getList();
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
      });
    },
    // 选择查询状态
    searchTypeChange(e) {
      this.listQuery.state = e;
      this.getList();
    },
    // 分页
    handleCurrentChange(e) {
      this.listQuery.page = e;
      this.getList();
    },
    handleSizeChange(e) {
      this.listQuery.pageSize = e;
      this.getList();
    },
    handleCurrentChange1(e) {
      this.proListQuery.page = e;
      this.getProList();
    },
    handleSizeChange1(e) {
      this.proListQuery.pageSize = e;
      this.getProList();
    },
    closeFn() {
      this.DetailsLiveShow = false;
    },
    // 添加直播间
    // 图片上传
    handlePictureCardPreview1(file) {
      console.log(file);
      if(file.code==='200'){
        this.form.coverImg = file.data.url;
        this.form.coverMediaId = file.data.mediaId
      }else{
        this.$message.error('图片超出规定像素，上传失败！')
      }
      
    },
    handlePictureCardPreview2(file) {
      if(file.code==='200'){
        this.form.shareImg = file.data.url;
        this.form.shareMediaId = file.data.mediaId
      }else{
        this.$message.error('图片超出规定像素，上传失败！')
      }
    },
    handlePictureCardPreview3(file) {
      if(file.code==='200'){
        this.form.feedsImg = file.data.url;
        this.form.feedsMediaId = file.data.mediaId
      }else{
        this.$message.error('图片超出规定像素，上传失败！')
      }
    },
    handlePictureCardPreview4(file) {
      if(file.code==='200'){
        this.form.anchorHeadImg = file.data.url;
      }else{
        this.$message.error('图片超出规定像素，上传失败！')
      }
    },
    add() {
      this.addLiveShow = true;
      this.LiveShowState = 1;
      this.form = {
        anchorHeadImg: '',
        anchorNickname: '',
        anchorWechat: '',
        coverImg: '',
        coverMediaId: '',
        closeAppointment: 0,
        closeComment: 0,
        closeGoodsShelf: 0,
        closeLike: 0,
        closePlayback: 0,
        closeService: 0,
        closeShare: 0,
        feedsImg: '',
        feedsMediaId: '',
        endTime: '',
        id: 0,
        liveType: 0,
        remark: '',
        screenType: 0,
        shareImg: '',
        shareMediaId: '',
        shopId: 0,
        startTime: '',
        state: 0,
        title: '',
      };
    },
    edit(row) {
      this.addLiveShow = true;
      this.LiveShowState = 2;
      const data = Object.assign({}, row)
      this.form = data;
    },
    // 添加直播间
    submitCU() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.LiveShowState === 1) {
            if(this.isAllow){
              this.isAllow = false
              addLiveSave(this.form).then((res) => {
                if (res.code === '') {
                  this.$message({
                    message: '创建成功',
                    type: 'success',
                  });
                  this.addLiveShow = false;
                  this.getList();
                }
              });
              setTimeout(()=>{
                this.isAllow = true
              },1000)
            }
          } else {
            updateLive(this.form).then((res) => {
              if (res.code === '') {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                });
                this.addLiveShow = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    // 导入商品
    addPro(row) {
      this.proPassFrom.liveId = row.id;
      this.proPassFrom.shopId = row.shopId;
      this.proListPassQuery.search = '';
      this.proListPassQuery.liveId = row.id;
      this.proListPassQuery.shopId = row.shopId;
      this.addProShow = true;
      this.getProPassList();
    },
    async getProPassList() {
      this.proListPassQuery.state = 1;
      const res = await liveProGetAll(this.proListPassQuery);
      this.proListPassTotal = res.data.total;
      this.proListPassData = res.data.list;
    },
    handleSizeChange3(e) {
      this.proListPassQuery.pageSize = e;
      this.getProPassList();
    },
    handleCurrentChange3(e) {
      this.proListPassQuery.page = e;
      this.getProPassList();
    },
    // 选中的
    handleSelectionChange(val) {
      this.proPassFrom.liveProductIdList = val.map((el) => {
        return el.id;
      });
    },
    // 导入操作
    addproSubmit() {
      if (this.proPassFrom.liveProductIdList.length === 0) {
        this.$message.warning('请选择导入的商品');
      } else {
        importProduct(this.proPassFrom).then((res) => {
          if (res.code === '') {
            this.$message({
              message: '导入成功',
              type: 'success',
            });
            this.addProShow = false;
            this.getList();
          }
        });
      }
    },
    // 重新审核
    reExamine(row) {
      reExamine({ id: row.id }).then((res) => {
        if (res.code === '') {
          this.$message.success('已重新提交');
          this.getList();
        }
      });
    },
  },
};
</script>

<style lang="scss" scpoed>
img {
  width: 100px;
  height: 100px;
}
.liveRoomPage {
  padding: 32px 20px;
  nav {
    .search {
      line-height: 40px;
      margin: 10px 0;
      display: flex;
      .title {
        min-width: 120px;
        text-align: right;
      }
      .inputKeyWord {
        max-width: 400px;
        min-width: 200px;
      }
    }
  }
  section {
    padding: 12px 8px;
    background-color: #fff;
    .pagination {
      margin-top: 30px;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader1{
  border: 1px dashed #d9d9d9;
  width: 108px;
  height: 192px;
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 192px;
    line-height: 192px;
    text-align: center;
  }
  .avatar {
    width: 108px;
    height: 192px;
    display: block;
  }
}

.avatar-uploader2{
  border: 1px dashed #d9d9d9;
  width: 180px;
  height: 148px;
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 180px;
    height: 148px;
    display: block;
  }
}

.avatar-uploader3{
  border: 1px dashed #d9d9d9;
  width: 140px;
  height: 140px;
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
  }
  .avatar {
    width: 140px;
    height: 140px;
    display: block;
  }
}
</style>