You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1011 lines
31 KiB
1011 lines
31 KiB
<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>
|