Skip to content

P
pica.cloud.web-education-admin
提交 1ef2c997 编写于 作者: vino's avatar vino
浏览文件
操作

广场管理

上级 c28888cf
隐藏空白字符变更
内嵌 并排
正在显示 包含 3463 行增加 和 1 行删除
src/router/router.js
浏览文件 @ 1ef2c997
...@@ -74,6 +74,8 @@ const goodsManage = r => require.ensure([], () => r(require('../views/goods/good ...@@ -74,6 +74,8 @@ const goodsManage = r => require.ensure([], () => r(require('../views/goods/good
const createGood = r => require.ensure([], () => r(require('../views/goods/create-good.vue')), 'create-good') const createGood = r => require.ensure([], () => r(require('../views/goods/create-good.vue')), 'create-good')
const orderManage = r => require.ensure([], () => r(require('../views/goods/order-manage.vue')), 'order-manage') const orderManage = r => require.ensure([], () => r(require('../views/goods/order-manage.vue')), 'order-manage')
const orderDetail = r => require.ensure([], () => r(require('../views/goods/order-detail.vue')), 'order-detail') const orderDetail = r => require.ensure([], () => r(require('../views/goods/order-detail.vue')), 'order-detail')
const plazaList = r => require.ensure([], () => r(require('../views/plaza/plaza-list.vue')), 'plaza-list')
const createPlaza = r => require.ensure([], () => r(require('../views/plaza/create-plaza.vue')), 'create-plaza')
export default [{ export default [{
...@@ -315,7 +317,14 @@ export default [{ ...@@ -315,7 +317,14 @@ export default [{
path: '/order-detail', path: '/order-detail',
component: orderDetail, component: orderDetail,
}, },
{
path: '/plaza-list',
component: plazaList,
},
{
path: '/create-plaza',
component: createPlaza,
},
// { // {
// path: '/followup', // path: '/followup',
......
src/utils/filter.js
浏览文件 @ 1ef2c997
...@@ -551,6 +551,18 @@ const vueFilter = { ...@@ -551,6 +551,18 @@ const vueFilter = {
} }
}, },
circleTypeFilter: (value) => {
if(value == 0){
return "默认封闭"
}
else if(value == 1){
return "半开放"
}
else if(value == 2){
return "开放"
}
},
} }
export default vueFilter export default vueFilter
src/utils/plaza/plazaApi.js 0 → 100644
浏览文件 @ 1ef2c997
import fetch from '../fetch';
import { getBaseUrl, getSaasDomain, getSaasApiDomain } from '@/utils/index'
let headers = {
'Content-Type': 'application/json;charset=UTF-8',
token: localStorage.getItem('storageToken'),
};
export const getDiseaseList = () => {
return fetch({
headers,
url: getBaseUrl(`sticker/disease/listAll`),
method: 'get',
description: '疾病标签列表（所有）',
})
};
export const getDeptList = () => {
return fetch({
headers,
url: getBaseUrl(`sticker/subject/childListAll`),
method: 'get',
description: '科室列表-所有二级',
})
};
export const getSubjectList = () => {
return fetch({
headers,
url: getBaseUrl(`sticker/subject/listAll`),
method: 'get',
description: '学科列表-所有2级',
})
};
export const getPlazaList = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/sso/square/list`),
method: 'post',
data: params,
description: '后台管理--广场内专区列表与搜索',
})
};
export const savePlaza = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/sso/square/save`),
method: 'post',
data: params,
description: '后台管理--新增编辑广场内专区和标签',
})
};
export const delPlaza = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/sso/square/remove`),
method: 'delete',
data: params,
description: '后台管理--广场内专区移除',
})
};
export const getPlaza = () => {
return fetch({
headers,
url: getBaseUrl(`circle/sso/square/info`),
method: 'get',
description: '后台管理--广场内专区信息（查看）',
})
};
src/views/plaza/create-plaza.vue 0 → 100644
浏览文件 @ 1ef2c997
<template>
<div class="yqrange-index-wrapper">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird" :jumPathFouth="jumPathFouth"></bread-crumb>
<div class="yqrange-index-content screenSet" id="screenSet">
<el-row class="step-content">
<el-col :span="12">
<div style="color:#666666;font-size:14px;">{{curmbThird}}</div>
<!--<el-steps :active="active" simple class>-->
<!--<span class="step-num" :class="{ 'on-step': stepData[0] }">1</span>-->
<!--<el-step title="基础信息"></el-step>-->
<!--<span class="step-num" :class="{ 'on-step': stepData[1] }">2</span>-->
<!--<el-step title="选择范围">2</el-step>-->
<!--</el-steps>-->
</el-col>
<el-col :span="6" :offset="5">
<el-button size="small" type="primary" @click="complete('formData')">完成</el-button>
</el-col>
</el-row>
<div class="first-step">
<!--<p class="p-title">基础信息</p>-->
<el-form ref="formData"
:model="formData"
:rules="rules"
label-width="150px"
label-suffix="："
class="basic-form">
<el-form-item label="直播标题" prop="name">
<el-col :span="18">
<el-input
size="small"
v-model="formData.name"
maxlength="20"
placeholder="请输入直播标题"
style="width:70%;"
></el-input>
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/20</span>
</el-col>
</el-form-item>
<el-form-item label="是否公开" prop="scope">
<el-radio-group v-model="formData.scope" size="small" @change="changeScope">
<el-radio label="1">否（仅限圈内人观看）</el-radio>
<el-radio label="2">是（任何人可观看）</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否收集用户信息" prop="infoCollect" v-if="isCollectShow">
<el-radio-group v-model="formData.infoCollect" size="small">
<el-radio label="0">否</el-radio>
<el-radio label="1">是（收集姓名等信息）</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="直播方式" prop="streamType">
<el-radio-group v-model="formData.streamType" size="small" @change="changeStreamType">
<el-radio label="1" :disabled="styleEditFlag">网页直播</el-radio>
<el-radio label="2" :disabled="styleEditFlag">拉流直播</el-radio>
</el-radio-group>
<el-tooltip class="item" effect="dark" content="网页直播即通过生成的网页地址进行直播，拉流直播是指进入第三方流进行转播" placement="top">
<i class="el-icon-info" style="color: #449284;margin-left: 15px;"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="拉流地址" v-if="pullFlag" class="required-label">
<el-col :span="18">
<el-input
size="small"
v-model="formData.pullStreamRtmp"
placeholder="请输入拉流地址"
style="width:70%;"
:disabled="styleEditFlag">
<template slot="prepend">APP</template>
</el-input>
</el-col>
<el-col :span="18">
<el-input
size="small"
v-model="formData.pullStreamHttp"
placeholder="请输入拉流地址"
style="width:70%;"
:disabled="styleEditFlag">
<template slot="prepend">H5&nbsp;&nbsp;&nbsp;</template>
</el-input>
</el-col>
</el-form-item>
<el-form-item label="是否签到" class="required-label">
<el-radio-group v-model="formData.isSign" size="small" @change="changeSign">
<el-radio :label="0" :disabled="styleEditFlag">不签到</el-radio>
<el-radio :label="1" :disabled="styleEditFlag">签到</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="签到时间" v-if="signFlag">
<el-col :span="9">
<el-input
type="number"
:min="1"
:max="1000"
size="small"
v-model="formData.signMinute"
placeholder="开播后超过此时长无法签到"
style="width:70%;"
:disabled="styleEditFlag"
@blur="resetSignMinute"
></el-input>
<span>分</span>
<el-tooltip class="item" effect="dark" content="若不设置此时长，则直播全程可签到" placement="top">
<!--<span class="el-icon-info"></span>-->
<i class="el-icon-info" style="color: #449284;"></i>
</el-tooltip>
</el-col>
</el-form-item>
<el-form-item label="直播开始通知">
<el-checkbox size="small" v-model="checked" :disabled="styleEditFlag">App通知</el-checkbox>
</el-form-item>
<el-form-item label="直播中人数显示规则" prop="streamType">
<el-radio-group v-model="formData.countRule" size="small">
<el-radio label="1" :disabled="formData.liveStatus != 1">实时人数</el-radio>
<el-radio label="2" :disabled="formData.liveStatus != 1">累计人数</el-radio>
<el-radio label="3" :disabled="formData.liveStatus != 1">累计人次</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="直播开始时间" prop="openTime">
<el-col :span="6">
<el-date-picker
v-model="formData.openTime"
size="small"
type="datetime"
placeholder="请选择直播开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
:disabled="formData.liveStatus == 2 || formData.liveStatus == 4"
style="width: 100%;"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="直播简介" class="required-label">
<el-col :span="16">
<div style="color:#666666;font-size:10px;">直播简介可选择仅文字版，仅图片版或文字版+图片版</div>
<el-input type="textarea" v-model="formData.textContent" placeholder="请输入直播简介" maxlength="300" rows="4" style="width:80%;"></el-input>
<span class="word-num">{{(formData.textContent).replace(/\s+/g,"").length }}/300</span>
<div style="color:#666666;font-size:12px;">文字版</div>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="图片">
<el-row>
<el-col :span="24">
<el-button size="small" type="info" @click="addIntroImage()">+新增图片（可上传5张）</el-button>
</el-col>
<el-col :span="16">
<!--<div v-for="(item, index) in formData.rtcIntroduces.filter(obj=> obj.type === 2)" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">-->
<div v-for="(item, index) in rtcIntroducesImages" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">
<el-upload
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic1">
<img
v-if="item.content"
:src="item.content"
class="bg-img"
@click="getIndexIntroduce(index)"/>
<img
v-if="!item.content"
class="bg-img"
src="../../assets/image/small.png"
@click="getIndexIntroduce(index)"/>
</el-upload>
<div class="limit-text" style="font-size: 12px;color: #999;margin-left: 10px;margin-top: -10px;">
<p>限制大小: 2Mb</p>
<p>尺寸:750*（高度<3000）</p>
<p>支持jpeg, png格式</p>
</div>
<el-button size="danger" @click="delIntroImage(index, item)">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<!--<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>-->
</div>
<div class="basic-item-icon">
<el-form-item label="直播封面" class="required-label">
<el-upload
v-model="formData.cover"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic2"
>
<img
v-if="formData.cover"
:src="formData.cover"
@mouseover.stop="imgMouseOver2=true"
class="bg-img"
/>
<img
v-if="!formData.cover"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver2"
@click.stop="deleteImg(2)"
@mouseout.stop="imgMouseOver2=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>限制大小: 200kb</p>
<p>尺寸:160*120</p>
<p>支持jpeg, png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>
</div>
<div class="basic-item-icon">
<el-form-item label="直播背景图">
<el-row>
<el-col :span="24">
<el-button size="small" type="primary" @click="setBackground()" :disabled="formData.liveStatus == 4 || formData.liveStatus == 5">选择背景图</el-button>
</el-col>
<el-col :span="16" v-if="formData.backgroundImageId">
<div style="margin-left:0px;margin-top: 10px;min-width: 380px;display: flex;align-items: center">
<img :src="backgroundImageUrl"
style="float: left;width: 150px;height: 100px;"/>
<el-button size="danger" style="margin-left: 20px;" @click="delBackgroundImage(index, item)" :disabled="formData.liveStatus == 4 || formData.liveStatus == 5">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
</div>
<el-form-item label="是否开启防录屏跑马灯">
<el-radio-group v-model="formData.antiScreenCap" size="small">
<el-radio label="0">否</el-radio>
<el-radio label="1">是</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="上传课件">
<el-row>
<!--<el-col :span="24">-->
<!--<el-button size="small" type="primary" @click="addIntroImage()">点击上传课件</el-button>-->
<!--</el-col>-->
<el-col :span="16">
<el-upload action="#"
accept="*/*"
ref="upload"
:limit="1"
:show-file-list="false"
:before-upload="beforeUploadPdf">
<!--<el-col :span="1">-->
<!--</el-col>-->
<el-button type="primary" size="small" style="margin-top: -10px;" >点击上传课件</el-button>
<p style="float: right;">&nbsp;&nbsp;仅支持PDF格式，限制大小：100Mb</p>
<!--<video class="video-mg-url" controls preload :src="cleatBroadcast.liveInfo.mgUrl"></video>-->
<!-- <img v-if="!cleatBroadcast.liveInfo.mgUrl" class="video-bg-img" src="../../../static/img/small.png"> -->
</el-upload>
</el-col>
<el-col :span="16" v-if="formData.rtcMaterial != null && formData.rtcMaterial.fileName != ''">
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="uploadProgress1"
status="success"
v-show="uploadProgress1 > 0 && uploadProgress1 < 100">
</el-progress>
<div>
<span>{{fileToName(formData.rtcMaterial.fileName,".pdf", 6)}}({{fileToSize(formData.rtcMaterial.fileSize, 1)}}M)</span>
<el-button v-show="(uploadProgress1 > 0 || formData.rtcMaterial.fileName != '')" @click="delFile" style="margin-left: 100px;" size="small" type="text">{{(uploadProgress1 && uploadProgress1 < 100 && formData.rtcMaterial.fileUrl == '')? '取消上传' : '删除'}}</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
</div>
<div class="basic-item-icon">
<el-form-item label="直播预告图" class="required-label">
<el-upload
v-model="formData.preImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic3"
>
<img
v-if="formData.preImage"
:src="formData.preImage"
@mouseover.stop="imgMouseOver3=true"
class="bg-img"
/>
<img
v-if="!formData.preImage"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver3"
@click.stop="deleteImg(3)"
@mouseout.stop="imgMouseOver3=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>限制大小: 500kb</p>
<p>尺寸:750*420</p>
<p>支持jpeg, png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage3">请选择直播预告图</p>
</div>
<el-form-item label="是否新增一个tab">
<el-radio-group v-model="tabFlag" size="small" @change="changeTab">
<el-radio label="0">否</el-radio>
<el-radio label="1">是</el-radio>
</el-radio-group>
<el-tooltip class="item" effect="dark" content="此tab会出现在直播详情页上，用于直播内容进行拓展说明" placement="top">
<i class="el-icon-info" style="color: #449284;margin-left: 15px;"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="TAB名称" v-if="tabFlag == 1" class="required-label">
<el-col :span="7">
<el-input
size="small"
v-model="formData.tabs[0].name"
maxlength="5"
placeholder="请输入TAB名称"
style="width:70%;"
></el-input>
<span class="word-num">{{(formData.tabs[0].name).replace(/\s+/g,"").length}}/5</span>
</el-col>
</el-form-item>
<div class="basic-item-icon" v-if="tabFlag == 1">
<el-form-item label="图片" class="required-label">
<el-row>
<el-col :span="24">
<el-button size="small" type="info" @click="addTabContent()">+新增图片（可上传5张）</el-button>
</el-col>
<el-col :span="16">
<!--<div v-for="(item, index) in formData.rtcIntroduces.filter(obj=> obj.type === 2)" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">-->
<div v-for="(item, index) in formData.tabs[0].contents" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">
<el-upload
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic4">
<img
v-if="item"
:src="item"
class="bg-img"
@click="getIndexIntroduce(index)"/>
<img
v-if="!item"
class="bg-img"
src="../../assets/image/small.png"
@click="getIndexIntroduce(index)"/>
</el-upload>
<div class="limit-text" style="font-size: 12px;color: #999;margin-left: 10px;margin-top: -10px;">
<p>限制大小: 2Mb</p>
<p>尺寸:750*（高度<3000）</p>
<p>支持jpeg, png格式</p>
</div>
<el-button size="danger" @click="delTabContent(index, item)">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<!--<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>-->
</div>
<el-form-item label="是否显示有奖问答tab" v-if="idType == 1">
<el-radio-group v-model="formData.qa" size="small" @change="changeTab">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="有奖问答关联考试" v-if="idType == 1 && formData.qa == 1" class="required-label">
<el-col :span="18">
<el-select filterable v-model="formData.qaId" placeholder="请选择有奖问答关联考试" style="width:88%">
<el-option
v-for="item2 in examAwardList"
:key="item2.id"
:label="item2.name"
:value="item2.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="直播角色" v-if="formData.streamType == 1">
<div style="color:#666666;font-size:10px;">主播（必填）</div>
<el-row>
<el-col :span="10" style="position: relative;">
<el-form-item label="姓名" prop="lecturesUserName" label-width="80px" style="position: relative;">
<el-input
size="small"
v-model="formData.lecturesUserName"
placeholder="请输入姓名"
style="width:85%;"
:disabled="liveEditFlag"
@input="handleInputSearch(101, formData.lecturesUserName, null)"
@blur="handleSearchListBlur"
></el-input>
</el-form-item>
<search-doctor :searchList="searchList" :searchId="searchId" @handleSearchLiClick="handleSearchLiClick" v-if="nowInput == 101"></search-doctor>
</el-col>
<el-col :span="1">
<img style="vertical-align: middle" src="../../assets/image/lianjie_icon.png" />
</el-col>
<el-col :span="10">
<!--<img src="../../assets/image/lianjie_icon.png" />-->
<el-form-item label="手机号" prop="lecturesPhone" label-width="80px">
<el-input maxlength="11"
size="small"
v-model="formData.lecturesPhone"
placeholder="请输入手机号"
style="width:85%;"
:disabled="liveEditFlag"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-col :span="24">
<div style="color:#666666;font-size:10px;">嘉宾（选填）</div>
</el-col>
<div v-for="(item, index) in formData.guests" :key="index">
<el-row>
<el-col :span="10" style="position: relative;">
<el-form-item label=" 姓名" label-width="80px">
<el-input
size="small"
v-model="item.username"
placeholder="请输入姓名"
style="width:85%;"
:disabled="guestEditFlag"
@input="handleInputSearch(index, item.username, item)"
@blur="handleSearchListBlur"
></el-input>
</el-form-item>
<search-doctor :searchList="searchList" :searchId="searchId" @handleSearchLiClick="handleSearchLiClick" v-if="index==nowInput"></search-doctor>
</el-col>
<el-col :span="1">
<img style="vertical-align: middle" src="../../assets/image/lianjie_icon.png" />
</el-col>
<el-col :span="10">
<el-form-item label="手机号" label-width="80px">
<el-input maxlength="11"
size="small"
v-model="item.phone"
placeholder="请输入手机号"
style="width:85%;"
:disabled="guestEditFlag"
></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<img
@click="addGuest(index)"
class="edit-img"
src="../../assets/image/plus.png"
v-if="isPreview!=1"
/>
<img
@click="delGuest(index)"
v-if="index >= 1 && isPreview!=1"
class="edit-img"
src="../../assets/image/trash.png"
/>
</el-col>
</el-row>
</div>
<!--<el-col :span="15">-->
<!--<p class="err-text" v-if="guestErrFlag"><img src="../../assets/image/err-icon.svg" alt="">{{guestErrText}}</p>-->
<!--</el-col>-->
</el-form-item>
</el-form>
</div>
</div>
<el-dialog
class="dialog-title-border-old"
title="图片裁剪"
style="overflow:scroll;"
:visible.sync="showCropper"
:width="currentOption.cropDialogWidth"
center>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">图片裁剪</span>
</div>
<div v-if="showCropper" style="margin-bottom: 20px;">
<Cropper
:cropOption="currentOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
/>
</div>
</el-dialog>
<el-dialog
title="请选择直播背景图"
:visible.sync="dialogVisible"
width="1000px"
:close-on-click-modal="false"
@close="handleClose"
center>
<el-form ref="setForm" :model="setForm">
<!--<input type="text" id="copyInput" class="hidden-input" />-->
<el-radio-group v-model="backgroundImageIdTemp">
<div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index < 5" @change="changeImage(item)">
<el-radio :label="item.backgroundImageId"><img class="background-img" :src="item.imageUrl" /></el-radio>
<el-input type="hidden" v-model="backgroundImageUrlTemp"></el-input>
</div>
<!--<div class="radio-background">-->
<!--<el-radio :label="6"></el-radio>-->
<!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
<!--</div>-->
<!--<div class="radio-background">-->
<!--<el-radio :label="9"></el-radio>-->
<!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
<!--</div>-->
<!--<div class="radio-background">-->
<!--<el-radio :label="12"></el-radio>-->
<!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
<!--</div>-->
<!--<div class="radio-background">-->
<!--<el-radio :label="15"></el-radio>-->
<!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
<!--</div>-->
</el-radio-group>
<el-radio-group v-model="backgroundImageIdTemp" v-if="backgroundImages != null && backgroundImages.length > 5">
<div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index > 4" @change="changeImage(item)">
<el-radio :label="item.backgroundImageId"><img class="background-img" :src="item.imageUrl" /></el-radio>
<el-input type="hidden" v-model="backgroundImageUrlTemp"></el-input>
</div>
</el-radio-group>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: right;">
<el-button type="primary" @click="submitBackground()" right>确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import BreadCrumb from "@/components/yqrange/breadcrumb-range.vue";
import { isEmptyUtils, openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath, unsubscribe} from "../../utils/qiniu-util";
import { checkMobile } from '../../utils/patients/checkValid';
import { getRtcInfo, getImages, searchDoc, getExamAwardList} from "../../utils/yqrange/yqrangeApi";
import Cropper from '@/components/common/cropper.vue';
import SearchDoctor from "@/components/yqrange/search-doctor";
// import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
// import { checkPhone } from "../login.vue";
let vm = null;
export default {
components: {
BreadCrumb,
Cropper,
SearchDoctor
},
data(){
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
//存在
callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”"));
} else {
callback();
}
};
return{
rtcId: '',
circleId: '',
circleName: "",
curmbFirst: '云鹊小圈',
// curmbSecond: '直播管理',
curmbThird: '新建直播',// /live-manage?id=
jumPathThird: '/yq-range',
showIntroImageFlag: false,
introduceIndex: 0,
isDisabledIns: false,//为了防止上传多图时，点太快图片错位
//页面展示位置
isCollectShow: false,
styleEditFlag: false,// 直播方式是否可以编辑
liveEditFlag: false,// 直播方式、主播是否可以编辑
guestEditFlag: false,// 嘉宾是否可以编辑
pullFlag: false, // 是否显示拉流地址
dialogVisible: false,
uploadProgress1: 0,
searchList: [],
guestItem: null,
searchId: 100,
busy: false,
formData: {
circleId: "",// 圈子ID
name: '',// 直播名称
liveStatus: "1", // 直播状态
streamType: "1", // 直播方式
pullStreamRtmp: "", //APP拉流地址
pullStreamHttp: "", //H5拉流地址
scope: "1",// 直播范围 1-非公开 2-公开
infoCollect: "0",// 是否采集用户信息 0-否 1-是
countRule: "1", // 人数显示规则
openTime: '',// 直播开始时间
rtcIntroduces:[],// 直播简介
cover: '', // 直播封面url 直播第一帧图片
preImage: '', // 直播预告图url
textContent: '', // 直播简介文字版
imageContent: '',// 直播简介图片版
// imgUrl2: '',
// imgUrl2More: {},
// imgUrl3: '',
// imgUrl3More: {},
intro:'',
hostName: '',
guestName: '',
hostMobile: '',
guestMobile: '',
lecturesUserName: '',
lecturesPhone: '',
lecturers: [{
username: '',
phone: ''
}],// 主播
guests: [{
phone: '',
username: ''
}], // 嘉宾
rtcMaterial: {
fileName: "",
fileSize: "",
fileUrl: "",
rtcId: "",
},
antiScreenCap: "0",
backgroundImageId: "",
// backgroundImageIdTemp: "0",
// backgroundImages: [],// 直播背景图
tabs: [{
name: "",
contents: []
}],
isSign: 0,
signMinute: "",
isAppPush: 0,
qa:0,
qaId: ""
},
examAwardList: [],
checked: false,
signFlag: false,
tabFlag: "0",
backgroundImageIdTemp: '',
backgroundImageUrlTemp: "",
backgroundImages: [],
backgroundImageUrl: "",
introTextNum: 0,
rtcIntroducesText:[],
rtcIntroducesImages: [],
// imgUrl1: '',
imgUrl1More: {},
guestErrFlag: false,
guestErrText: '嘉宾最多5位！',
isPreview: 0,
imgMouseOver1: false,
uploadImgMessage1: false,//未上传图片，校验提示语
imgMouseOver2: false,
uploadImgMessage2: false,
imgMouseOver3: false,
uploadImgMessage3:false,
submitFlag: false,
showCropper: false,
setForm: {
},
currentOption: {
offset_x: 120,
offset_y: 185,
width: 160,
height: 120,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px',
cropBoxResizable: true,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
aspectRatio: 16/9
},
slide2: {
oriUrl: '', // 原图
},
cropperIndex: "",
nowInput: 0,
idType: "",
pickerOptions0: {
disabledDate: time => {
// 在科学计数法中，为了使公式简便，可以用带“E”的格式表示。例如1.03乘10的8次方，可简写为“1.03e8”的形式
// 一天是24*60*60*1000 = 86400000 = 8.64e7
// console.log('this.maxDate',this.maxDate)
return time.getTime() < Date.now() - 8.64e7
}
},
rules: {
name: [
{ required: true, message: "请输入直播标题", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
streamType: [{
required: true, message: "请选择直播方式", trigger: 'blur'
}],
// signMinute: [{
// min: 1,
// max: 1000,
// message: "不能输入0！",
// trigger: "blur"
// }],
scope:[
{required: true}
],
infoCollect: [
{required: true, message: "请选择是否收集用户信息", trigger: "blur"}
],
openTime: [
{required: true, message: "请选择直播开始时间", trigger: "blur"}
],
// // 直播简介
// introduce: [
// {required: true, message: "请选择文字版或图片版", trigger: "blur"}
// ],
lecturesUserName: [
{required: true, message: "请输入姓名", trigger: "blur"},
],
// guestName: [
// {required: true, message: "请输入姓名", trigger: "blur"},
// ],
lecturesPhone: [
{required: true, message: "请输入手机号", trigger: ['change','blur']},
{validator: checkMobile, trigger: ['change','blur']}
],
// tabName: [
// { required: true, message: "请输入TAB名称", trigger: "blur" },
// {
// min: 2,
// max: 5,
// message: "输入长度为2-5的内容，可包含中英文、数字及特殊符号",
// trigger: "blur"
// },
// { validator: checkProjectStr, trigger: "blur" }
// ],
// introduce: [
// { required: true, message: "请输入", trigger: "blur" },
// {
// min: 2,
// max: 24,
// message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
// trigger: "blur"
// },
// { validator: checkProjectStr, trigger: "blur" }
// ],
}
}
},
props: {
// curmbSecond: {
// type: String
// },
// jumPathFouth: {
// type: String
// }
},
created() {
vm = this;
// 区分内部用户和外部用户
this.idType = localStorage.getItem('storageIdType');
// this.idType = 1; // TODO
this.circleId = this.$route.query.circleId;
this.circleName = this.$route.query.circleName;
this.curmbSecond = "圈子管理-" + this.circleName;
this.jumPathFouth = "/range-manage?id=" + this.circleId + "&name=" + this.circleName + "&activeName=third";
this.formData.circleId = this.circleId;
console.log("create-live: jumPathFouth: " + this.jumPathFouth);
// this.jumPathThird = '/live-manage?id=' + this.circleId;
},
mounted() {
this.rtcId = this.$route.query.rtcId;
// if(rtcId){
// this.curmbThird = "编辑直播";
// }
this.initImages();
if(this.rtcId){
this.curmbThird = "编辑直播";
this.initRtcInfo(this.rtcId);
}
this.getExamAwardList();
},
methods: {
checkPhone(val) {
if(!(/^1[3456789]\d{9}$/.test(val))) {
return false;
} else {
return true;
}
},
// 取得背景
initImages(){
getImages({
}).then((res) => {
if(res.code == "000000") {
let images = res.data;
if(images != null){
for(let i = 0; i < images.length; i++){
images[i].backgroundImageId = String(images[i].backgroundImageId);
}
}
this.backgroundImages = images;
// 设置背景图
if(this.backgroundImageUrl != null || this.backgroundImageUrl != ''){
this.setbgImage();
}
}
}).catch((error) => {
this.$message({
message: "请重试",
type: 'error'
});
})
},
// 初始化直播
initRtcInfo(rtcId){
getRtcInfo({
rtcId
}).then((res) => {
if(res.code == "000000") {
this.formData = res.data;
if(this.formData != null){
// 主播、嘉宾是否可以编辑
// //直播状态 1-未开始 2-直播中 3-暂停中 4-已结束 5-回放中目前只能用到1，2，4
// 预告状态时，所以都可以修改
if(this.formData.liveStatus == "1"){
this.styleEditFlag = false;
this.liveEditFlag = false;// 可以编辑
this.guestEditFlag = false;
}
// 直播中状态时，直播方式、主播不可修改，其他都可修改
else if(this.formData.liveStatus == "2"){
this.styleEditFlag = true;
this.liveEditFlag = true;// 不可以编辑
this.guestEditFlag = false;
}
// 直播结束状态时，直播方式、主播、嘉宾不可修改，其他都可修改
else if(this.formData.liveStatus == "4"){
this.styleEditFlag = true;
this.liveEditFlag = true;
this.guestEditFlag = true;
}
if(this.formData.guests == null || this.formData.guests.length == 0){
this.formData.guests = [{phone: '',username: ''}];
}
}
this.formData.circleId = this.circleId;
this.initFormData();
console.log(this.formData);
}
}).catch((error) => {
this.$message({
message: "请重试",
type: 'error'
});
})
},
getIndexIntroduce(index) {
// if (!this.isDisabledIns) {
// if(this.formData.rtcIntroduces != null && this.formData.rtcIntroduces.length == 1){
// index = 0;
// }
// else if(this.formData.rtcIntroduces != null && this.formData.rtcIntroduces.length > index){
// index = index + 1;
// }
this.introduceIndex = index;
// }else {
// this.$message.warning('正在上传，请稍等')
// }
},
getExamAwardList(){
let req = null;
getExamAwardList(req).then(function (res) {
if(res.code == "000000") {
vm.examAwardList = res.data;
// vm.formData = res.data;
}
}).catch(function (error) {
vm.$message.error(error);
});
},
checkQaId(){
if(vm.formData.qa == 1 && (vm.formData.qaId == null || vm.formData.qaId == "")){
vm.$message.error("请选择有奖问答关联考试！");
return false;
}
else {
return true;
}
},
//上传直播简介
beforeUploadPic1(file) {
vm.cropperIndex = 10;
// this.currentOption.aspectRatio = 0;
// this.currentOption.cropBoxResizable = true;
// this.currentOption.minCropBoxWidth = 750;
// this.currentOption.minCropBoxHeight = 120;
// this.currentOption.width = 750;
let fileLimit = {
width: 750,
height: 3000,
size: 2,
sizeText: "2Mb",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
// this.beforeUploadMore(file, fileLimit);
this.beforeUpload(file, fileLimit);
},
// 上传直播封面
beforeUploadPic2(file) {
vm.cropperIndex = 20;
this.currentOption.aspectRatio = 4/3;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 160;
this.currentOption.minCropBoxHeight = 120;
let fileLimit = {
width: 160,
height: 120,
size: 0.2,
sizeText: "200k",
key: "cover",
more: "imgUrl2More",
show: "uploadImgMessage2"
};
this.beforeUpload(file, fileLimit);
},
// 上传直播预告图
beforeUploadPic3(file) {
this.currentOption.aspectRatio = 25/14;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 750;
this.currentOption.minCropBoxHeight = 420;
vm.cropperIndex = 30;
let fileLimit = {
width: 750,
height: 420,
size: 0.5,
sizeText: "500k",
key: "preImage",
more: "imgUrl3More",
show: "uploadImgMessage3"
};
this.beforeUpload(file, fileLimit);
},
// 上传TAB图片
beforeUploadPic4(file) {
vm.cropperIndex = 40;
let fileLimit = {
width: 750,
height: 3000,
size: 2,
sizeText: "2Mb",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
// this.beforeUploadMore(file, fileLimit);
this.beforeUpload(file, fileLimit);
},
beforeUploadPdf(file) {
let fileLimit = {
size: 100,
sizeText: "100Mb",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUploadPdfMore(file, fileLimit);
},
// 上传课件
beforeUploadPdfMore(file, fileLimit){
const isMp4 = file.type === 'application/pdf';
const isSize = file.size / 1024 / 1024 < fileLimit.size;
if (!isMp4) {
this.$refs.upload.clearFiles();
this.$message.error('上传课件只能是PDF格式!');
// vm.isDisabledIns = false;
file = null;
return;
}
if (!isSize) {
// this.$refs.upload.abort();
this.$refs.upload.clearFiles();
this.$message.error('课件大小不符合规范，请根据规范上传课件');
// vm.isDisabledIns = false;
file = null;
return;
}
//
// vm.disabledOpenFlag = true;
//
// vm.fileFlag = false;
// vm.deleteFileFlag = true;
// vm.fileName = file.name;
// if(file.size != null){
// vm.fileSize = vm.videoSize(file.size, 1);
// }
// else {
// vm.fileSize = file.size;
// }
// this.formData.rtcMaterial.fileName = file.name;
// this.formData.rtcMaterial.fileSize = file.size;
// this.formData.rtcMaterial.rtcId = this.rtcId;
this.formData.rtcMaterial = {
fileName: file.name,
fileSize: file.size,
fileUrl: "",
rtcId: this.rtcId,
};
// 初始化
this.uploadProgress1 = Number("0.00");
this.uploadProgress = Number("0.00");
let vm = this;
// vm.$message.success('开始上传')
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
// if(vm.playbackForm.videos != null && vm.playbackForm.videos[0] != null){
// vm.playbackForm.videos[0].videoUrl = path.fullPath;
// }
vm.formData.rtcMaterial.fileUrl = path.fullPath;
vm.$message.success('上传成功');
});
},
//上传图片
beforeUpload(file, fileLimit) {
let vm = this;
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
if (!isJPG && !isPNG) {
vm.$message.error("图片必须是jpeg或png格式，同时长宽尺寸和图片大小需符合要求");
return;
}
// if (!isLt2M) {
// vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
if(vm.cropperIndex != 10 && vm.cropperIndex != 40){
vm.slide2.oriUrl = theFile.target.result;
}
image.onload = function() {
let _this = this;
// if(fileLimit.key == "imageContent" & _this.width != fileLimit.width){
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// }
// else if (fileLimit.key != "imageContent" & (_this.width != fileLimit.width || _this.height != fileLimit.height)) {
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// }
// 图片大小不正常，则进行裁剪
// 直播简介，简介要求750*（高度<3000）
if((vm.cropperIndex == 10 || vm.cropperIndex == 40) && (_this.width < fileLimit.width || _this.height > fileLimit.height)) {
vm.$message.error("图片必须是jpeg或png格式，同时长宽尺寸和图片大小需符合要求");
return
}
// else if(vm.cropperIndex == 10 && (_this.width > fileLimit.width || _this.height > fileLimit.height)){
// vm.showCropper = true;
// vm.currentOption.cvWidth = _this.width;
// vm.currentOption.cvHeight = _this.height;
// return;
// }
if(vm.cropperIndex != 10 && vm.cropperIndex != 40 && (_this.width < fileLimit.width || _this.height < fileLimit.height)) {
vm.$message.error("图片必须是jpeg或png格式，同时长宽尺寸和图片大小需符合要求");
return;
}
// 图片大小不正常，则进行裁剪
else if(vm.cropperIndex != 10 && vm.cropperIndex != 40 && (_this.width > fileLimit.width || _this.height > fileLimit.height)) {
vm.showCropper = true;
vm.currentOption.cvWidth = _this.width;
vm.currentOption.cvHeight = _this.height;
return;
}
// 图片大小正常，则直接上传
else {
openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function(path) {
closeLoading(vm);
console.log('上传成功后路径',path);
// if (fileLimit.show == "uploadImgMessage1") {
// vm.uploadImgMessage1 = false;
// } else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
// else if (fileLimit.show == "uploadImgMessage3") {
// vm.uploadImgMessage3 = false;
// }
if(vm.cropperIndex == 10){
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1;
}
else if(vm.cropperIndex == 40){
// vm.formData.tabs[0].contents[vm.introduceIndex] = path.fullPath;
vm.$set(vm.formData.tabs[0].contents, vm.introduceIndex, path.fullPath);
}
else {
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
}
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
// 获取裁剪的图片数据
getCropImg(argument) {
this.showCropper = false;
this.cropData = argument[1]
// this.doUploadOSS(argument[2], 1); //封面图片
this.doUploadQiNiu(argument[2], 1);
argument[3] && argument[3].destroy();
},
// getOSSDomain(url) {
// return getOSSImgUrl(url);
// },
// （调用OSS API）开始上传
// doUploadOSS(file, index) {
// let self = this;
// //上传 指定文件名
// ossUpload(self, file, getFilePathForOSS(file), null, null, null).
// then(function(path) {
// console.log(path);
// let list = [{}];
// // list[0].name = file.name;
// // list[0].url = localStorage.getItem("resource_url") + path;
// // getOSSImgUrl(path)
// // if (index === 1) {
// // self.formData.courseIntroImage = path;
// // } else if (index === 2) {
// // self.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl = path;
// // }
//
// self.formData.cover = path;
// self.formData.imgUrl2More = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
//
// self.$message.success("上传成功");
// });
// return false;
// },
// 上传七牛
doUploadQiNiu(file, index){
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
if(vm.cropperIndex == 10){
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1;
}
else if(vm.cropperIndex == 20){
vm.formData.cover = path.fullPath;
}
else if(vm.cropperIndex == 30){
vm.formData.preImage = path.fullPath;
}
vm.$message.success('上传成功');
});
},
beforeUploadMore(file, fileLimit) {
let vm = this;
console.log('简介配置图上传前',file)
if (isEmptyUtils(file)) {
return;
}
vm.isDisabledIns = true;
// vm.$message.info('开始上传');
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < fileLimit.size
if (!isJPG && !isPNG) {
vm.$message.error('上传直播简介图片只能是 JPEG或者png 格式!')
// vm.isDisabledIns = false;
return;
}
// if (!isLt2M) {
// vm.$message.error('图片大小不符合规范，请根据规范上传图片')
// // vm.isDisabledIns = false;
// return;
// }
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _this = this;
if ( _this.width != fileLimit.width || _this.height > fileLimit.height) {
// vm.$message.error('图片尺寸不符合规范，请根据规范上传图片');
// vm.isDisabledIns = false;
vm.showCropper = true;
return;
}else {
openLoading(vm);
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
closeLoading(vm);
// vm.cleatBroadcast.liveIntroduceModel[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1;
vm.$message.success('上传成功');
// vm.isDisabledIns = false;
});
}
// vm.cleatBroadcast.liveIntroduceModel[vm.introduceIndex].content1 = _this.width + '*' + _this.height;
}
}
return false;
},
//上传图片
// beforeUploadMore(file, fileLimit) {
// let vm = this;
// const isJPG = file.type === "image/jpeg";
// const isPNG = file.type === "image/png";
// const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
// if (!isJPG && !isPNG) {
// vm.$message.error("图片格式不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// return;
// }
// let _img = new FileReader();
// _img.readAsDataURL(file);
// _img.onload = function(theFile) {
// let image = new Image();
// image.src = theFile.target.result;
// image.onload = function() {
// let _this = this;
//
// if(fileLimit.key == "imageContent" & _this.width != fileLimit.width){
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// }
// else if (fileLimit.key != "imageContent" & (_this.width != fileLimit.width || _this.height != fileLimit.height)) {
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// } else {
// openLoading(vm);
// doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function(path) {
// closeLoading(vm);
// console.log('上传成功后路径',path);
// if (fileLimit.show == "uploadImgMessage1") {
// vm.uploadImgMessage1 = false;
// } else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
// else if (fileLimit.show == "uploadImgMessage3") {
// vm.uploadImgMessage3 = false;
// }
// vm.formData[fileLimit.key] = path.fullPath;
// vm.formData[fileLimit.more] = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
// vm.$message.success("上传成功");
// });
// }
// };
// };
// return isJPG && isLt2M;
// },
// 直播方式
changeStreamType(){
if(this.formData.streamType == 2){
this.pullFlag = true;
}
else {
this.pullFlag = false;
}
},
// 直播方式
changeSign(){
if(this.formData.isSign == 1){
this.signFlag = true;
}
else {
this.signFlag = false;
}
},
// 是否公开
changeScope(value){
if(value == 2){
this.isCollectShow = true;
}
else {
this.isCollectShow = false;
}
},
// 校验拉流地址
checkpullStream(){
let flag = true;
if(this.formData.streamType == "2"){
// 公开直播，两个拉流地址都需要
if(this.formData.scope == "2"){
if(this.formData.pullStreamRtmp == "" && this.formData.pullStreamHttp == ""){
this.$message.warning("请输入APP拉流地址和H5拉流地址");
flag = false;
return flag;
}
if(this.formData.pullStreamRtmp == ""){
this.$message.warning("请输入APP拉流地址");
flag = false;
return flag;
}
if(this.formData.pullStreamHttp == ""){
this.$message.warning("请输入H5拉流地址");
flag = false;
return flag;
}
}
else {
if(this.formData.pullStreamRtmp == "" && this.formData.pullStreamHttp == ""){
this.$message.warning("请输入APP拉流地址或H5拉流地址");
flag = false;
}
}
}
return flag;
},
// 校验直播简介文字版或图片版
checkIntroduce(){
// console.log(this.formData.rtcIntroduces[0].content);
// console.log(this.formData.rtcIntroduces[1].content);
let flag = true;
// if(this.formData.textContent == ""
// & this.formData.imageContent == ""){
if(this.formData.rtcIntroduces == null || this.formData.rtcIntroduces.length == 0){
flag = false;
this.$message.error("直播简介中可选择仅文字版，仅图片版或文字版+图片版");
}
return flag;
},
// 增加直播简介
addIntroImage(){
let length = this.rtcIntroducesImages.length;
if(length >= 5){
this.$message.warning("直播简介图片最多支持新增5张图片!");
return;
}
this.showIntroImageFlag = true;
const item = {
seqNo: length + 1,
content: "",
type: 2 // 文字
};
this.rtcIntroducesImages.push(item);
},
// 删除直播简介
delIntroImage(index, item){
this.rtcIntroducesImages.splice(index, 1);
},
// 增加Tab图片
addTabContent(){
let length = this.formData.tabs[0].contents.length;
if(length >= 5){
this.$message.warning("TAB图片最多支持新增5张图片!");
return;
}
// const item = {
// seqNo: length + 1,
// content: "",
// type: 2 // 文字
// };
this.formData.tabs[0].contents.push("");
},
// 删除直播简介
delTabContent(index, item){
this.formData.tabs[0].contents.splice(index, 1);
},
// 删除背景图
delBackgroundImage(){
this.formData.backgroundImageId = "";
this.backgroundImageUrl = "";
},
//删除图片
deleteImg(type) {
if (type == 1) {
this.formData.imageContent = "";
this.imgMouseOver1 = false;
}
else if (type == 2) {
this.formData.cover = "";
this.imgMouseOver2 = false;
}
else if (type == 3) {
this.formData.preImage = "";
this.imgMouseOver3 = false;
}
},
// 校验直播封面
checkCover(){
let flag = true;
if(this.formData.cover == ""){
flag = false;
this.$message.error("请上传直播封面！");
}
return flag;
},
// 校验直播预告图
checkPreImage(){
let flag = true;
if(this.formData.preImage == ""){
flag = false;
this.$message.error("请上传直播预告图！");
}
return flag;
},
// 校验嘉宾姓名和手机号
checkGuests(){
let flag = true;
if(this.formData.guests != null & this.formData.guests.length >= 1){
for(let i=0;i<this.formData.guests.length;i++) {
if(this.formData.guests[i].username == "" & this.formData.guests[i].phone == ""){
// this.formData.guests.splice(i, 1);
if(this.submitFlag){
this.formData.guests.splice(i, 1);
continue;
}
else {
this.$message.error("请输入嘉宾姓名和手机号");
flag = false;
break;
}
}
if(this.formData.guests[i].username != "" & this.formData.guests[i].phone == ""){
this.$message.error("请输入嘉宾'" + this.formData.guests[i].username + "'的手机号");
flag = false;
break;
}
else if(this.formData.guests[i].username != "" & this.formData.guests[i].phone != ""){
if(!this.checkPhone(this.formData.guests[i].phone)){
this.$message.error("请输入嘉宾'" + this.formData.guests[i].username + "'的正确手机号");
flag = false;
break;
}
// 检查主播和嘉宾手机号是否相同
if(!this.checkUniquePhone(this.formData.lecturesPhone, this.formData.guests[i].phone)){
this.$message.error("请输入不同的手机号");
flag = false;
break;
}
// 检查嘉宾手机号是否相同
if(this.formData.guests.length > 1){
for(let j= i + 1;j<this.formData.guests.length;j++) {
if(!this.checkUniquePhone(this.formData.guests[i].phone, this.formData.guests[j].phone)){
this.$message.error("请输入不同的手机号");
flag = false;
break;
}
}
}
}
else if(this.formData.guests[i].username == "" & this.formData.guests[i].phone != ""){
this.$message.error("请输入手机号为'" + this.formData.guests[i].phone + "'嘉宾的姓名");
flag = false;
break;
}
}
}
return flag;
},
checkTab(){
let flag = true;
if(this.tabFlag == "1"){
if(this.formData.tabs[0].name == ""){
flag = false;
this.$message.error("请填写TAB名称！");
}
if(this.formData.tabs[0].contents.length == 0){
flag = false;
this.$message.error("请上传TAB图片！");
}
else {
this.formData.tabs[0].contents = this.formData.tabs[0].contents.filter(function (item) {
return item != "";
});
if(this.formData.tabs[0].contents.length == 0){
flag = false;
this.$message.error("请上传TAB图片！");
}
}
}
return flag;
},
checkUniquePhone(phone1, phone2){
let flag = true;
if(phone1 != "" & phone2 != "" & phone1 == phone2){
flag = false;
}
return flag;
},
// 增加嘉宾
addGuest(index) {
if(this.guestEditFlag){
return;
}
this.submitFlag = false;
if(!this.checkGuests()){
return;
}
if(this.formData.guests != null & this.formData.guests.length >= 100000){
this.$message.error("嘉宾最多100000位！");
}
else {
this.formData.guests.push({username: "", phone: ""});
}
},
// 删除嘉宾
delGuest(index) {
if(this.guestEditFlag){
return;
}
this.formData.guests.splice(index, 1);
},
// 初始化背景图
setbgImage(){
// 背景图
if((this.formData.backgroundImageId != null || this.formData.backgroundImageId != "") && this.backgroundImages.length > 0){
let selectedImages = this.backgroundImages.filter(function (item) {
return item.backgroundImageId == vm.formData.backgroundImageId;
});
if(selectedImages != null && selectedImages.length > 0){
this.backgroundImageUrl = selectedImages[0].imageUrl;
}
}
},
// 封装数据
initFormData(){
this.formData.streamType = String(this.formData.streamType);
this.changeStreamType();
if(this.backgroundImageUrl != null || this.backgroundImageUrl != ''){
this.setbgImage();
}
this.changeSign();
this.checked = this.formData.isAppPush == 1 ? true: false;
if(this.formData.signMinute == 0 || this.formData.signMinute == undefined){
this.formData.signMinute = "";
}
this.formData.scope = String(this.formData.scope);
this.formData.countRule = String(this.formData.countRule);
this.formData.antiScreenCap = String(this.formData.antiScreenCap);
this.backgroundImageIdTemp = String(this.formData.backgroundImageId == null ? "0":this.formData.backgroundImageId);
if(this.formData.scope == "2"){
this.isCollectShow = true;
}
this.formData.infoCollect = String(this.formData.infoCollect);
this.$set(this.formData, 'textContent', "");
if(this.formData.rtcIntroduces != null){
this.rtcIntroducesImages = [];
for(let i=0;i<this.formData.rtcIntroduces.length;i++) {
if(this.formData.rtcIntroduces[i].type == "1"){
// this.formData.textContent = this.formData.rtcIntroduces[i].content;
this.$set(this.formData, 'textContent', this.formData.rtcIntroduces[i].content);
// break;
}
else {
// this.$set(this.formData, "rtcIntroducesImages", )
this.rtcIntroducesImages.push(this.formData.rtcIntroduces[i]);
}
// else if(this.formData.rtcIntroduces[i].type == "2"){
// // this.formData.imageContent = this.formData.rtcIntroduces[i].content;
// this.$set(this.formData, 'imageContent', this.formData.rtcIntroduces[i].content);
// }
}
}
// 新增TAB页
if(this.formData.tabs != null && this.formData.tabs.length == 0){
this.formData.tabs = [{
name: "",
contents: []
}];
this.tabFlag = "0";
}
else {
this.tabFlag = "1";
}
// 设置主播
if(this.formData.lecturers.length > 0){
// this.formData.lecturesUserName = this.formData.lecturers[0].username;
// this.formData.lecturesPhone = this.formData.lecturers[0].phone;
this.$set(this.formData, 'lecturesUserName', this.formData.lecturers[0].username);
this.$set(this.formData, 'lecturesPhone', this.formData.lecturers[0].phone);
}
},
// 封装数据
setFormData(){
if(this.formData.streamType == "1"){
this.formData.pullStreamRtmp = "";
this.formData.pullStreamHttp = "";
}
// 直播简介图片版
if(this.rtcIntroducesImages != null && this.rtcIntroducesImages.length != 0){
let rtcIntroducesImagesArray = this.rtcIntroducesImages.filter(function (item) {
return item.content != "";
});
if(rtcIntroducesImagesArray != null && rtcIntroducesImagesArray.length != 0){
// 直播简介图片版
// this.formData.rtcIntroduces = JSON.parse(JSON.stringify(this.rtcIntroducesImages));
this.formData.rtcIntroduces = JSON.parse(JSON.stringify(rtcIntroducesImagesArray));
}
else {
this.formData.rtcIntroduces = [];
}
}
else {
this.formData.rtcIntroduces = JSON.parse(JSON.stringify(this.rtcIntroducesImages));
}
// 直播简介文字版
if(this.formData.textContent != null && this.formData.textContent != ""){
this.rtcIntroducesText = this.formData.rtcIntroduces.filter(function (item) {
return item.type == "1";
});
if(this.rtcIntroducesText.length == 0){
this.formData.rtcIntroduces.push({type:1,content:this.formData.textContent});
}
}
this.formData.isAppPush = this.checked == true ? 1: 0;
if(this.formData.signMinute == "" || this.formData.signMinute == undefined){
this.formData.signMinute = 0;
}
// this.formData.rtcIntroduces[0].content = this.formData.textContent;
// 直播简介图片版
// this.formData.rtcIntroduces[1].type = 2;
// this.formData.rtcIntroduces[1].content = this.formData.imageContent;
// 设置主播
// if(this.formData.lecturers == undefined){
// this.formData.lecturers
// }
// if(this.formData.lecturers != undefined & this.formData.lecturers.length == 0){
//
// this.formData.lecturers.push({username: this.formData.lecturesUserName, phone: this.formData.lecturesPhone});
// }
if(this.formData.lecturesUserName){
this.formData.lecturers = [{username: this.formData.lecturesUserName,phone: this.formData.lecturesPhone}];
}
},
complete(formName) {
console.log(this.formData);
this.$refs[formName].validate((valid) => {
if (valid) {
this.submit();
} else {
console.log('error submit!!');
return false;
}
});
},
//完成
submit() {
this.submitFlag = true;
this.setFormData();
// 校验拉流地址
if(!this.checkpullStream()){
return;
}
// 校验直播简介文字版或图片版
if(!this.checkIntroduce()){
return;
}
// 校验直播封面、预告图
if(!this.checkCover() || !this.checkPreImage()){
return;
}
// 检查TAB
if(!this.checkTab()){
return;
}
// 内部运营人员
if(this.idType == 1){
// 检查有奖问答关联考试
if(!this.checkQaId()){
return;
}
if(this.formData.qa == 0){
this.formData.qaId = null;
}
}
// 校验嘉宾姓名和手机号
if(!this.checkGuests()){
return;
}
if(!this.pullFlag){
this.formData.pullStreamHttp = "";
this.formData.pullStreamRtmp = "";
}
let req = this.formData;
openLoading(this);
this.POST('rtc/liveAdmin', req).then((res) => {
closeLoading(this);
if( res.code == '000000') {
this.$message.success("操作成功");
this.$router.push({
path: '/range-manage',
query: {
id: this.formData.circleId,
name: this.circleName,
activeName: "third"
}
})
}
else {
this.formData.guests = [{
phone: '',
username: ''
}];
this.$message.error("操作失败，请重试");
}
})
},
// 视频Size转换
fileToSize(fileSize, number){
return (fileSize / 1024 / 1024).toFixed(number);
},
fileToName(fileName, fileFormat, number){
if(fileName != null && fileName != ""){
const index = fileName.indexOf(fileFormat);
const str = fileName.slice(0, index);
if(str.length > number){
return str.slice(0,number+1) + "..." + fileFormat;
}
else {
return fileName;
}
}
return fileName;
},
// 设置背景图
setBackground(){
this.dialogVisible = true;
this.backgroundImageIdTemp = String(this.formData.backgroundImageId);
// this.initImages();
},
// 提交设置背景图
submitBackground(){
this.dialogVisible = false;
this.formData.backgroundImageId = this.backgroundImageIdTemp;
this.backgroundImageUrl = this.backgroundImageUrlTemp;
},
handleClose(){
this.dialogVisible = false;
},
changeImage(item){
this.backgroundImageUrlTemp = item.imageUrl;
console.log('选中值',this.backgroundImageIdTemp);
},
delFile(){
if(this.uploadProgress1 > 0 && this.uploadProgress1 < 100){
openLoading(this);
this.$refs.upload.abort();// 取消上传请求(element)
this.$refs.upload.clearFiles();
unsubscribe();// 取消七牛上传请求
// if(vm.videoSize > 500){
// setTimeout(() => {
// closeLoading(this);
// vm.$message.success('取消成功');
// }, 2000);
// }
// else {
// closeLoading(this);
// vm.$message.success('取消成功');
// }
closeLoading(this);
this.$message.success('取消成功');
this.uploadProgress1 = Number("0.00");
// this.uploadProgress = Number("0.00");
}
this.formData.rtcMaterial = {
fileName: "",
fileSize: "",
fileUrl: "",
rtcId: "",
};
},
// 改变TAB
changeTab(){
if(this.tabFlag == 0){
this.formData.tabs[0].name = "";
this.formData.tabs[0].contents = [];
}
},
resetSignMinute(){
if(this.formData.signMinute == 0){
this.formData.signMinute = "";
}
else if(this.formData.signMinute > 1000){
this.formData.signMinute = 1000;
}
},
// 搜索框中输入文字 时 page=1 pageSize=30
handleInputSearch(searchId, name, item) {
this.searchId = searchId;
this.guestItem = item;
this.nowInput = searchId
// debugger;
clearTimeout(this.searchFlagTimer);
let that = this;
that.page = 1;
that.isInputResponse = false;
if(name == ''){
that.searchList = [];
return;
}
that.searchList = [];
let params = {
id: this.circleId,
name: name
};
this.searchFlagTimer = setTimeout(() => {
searchDoc(params).then(res => {
// console.log('>>>>>>*********** search: ', res)
if(res.code == '000000'){
that.isInputResponse = true;
// that.totalPageNum = Math.ceil(res.data.total/that.pageSize); // 总页数
let list = res.data.chooseLiveMemberDtos || [];
if(list.length > 0){
if(that.name == ''){
that.searchList = [];
return;
}
that.searchList = list;
that.hasNoResult = false;
// document.querySelectorAll(".left-box")[0].style.display = 'none';
}else{
that.searchList = [];
that.hasNoResult = true;
}
}else{
that.isInputResponse = false;
that.searchList = [];
that.$message({
message: data.message,
type: 'warning'
});
}
})
}, 300)
},
handleSearchListBlur() {
this.searchList = [];
clearTimeout(this.searchFlagTimer);
// console.log('blur.....')
},
handleSearchLiClick(item) {
console.log(item);
if(this.guestItem == null) {
this.formData.lecturesUserName = item.name;
this.formData.lecturesPhone = item.mobilePhone;
}
else {
this.guestItem.username = item.name;
this.guestItem.phone = item.mobilePhone;
}
},
},
}
</script>
<style lang="scss">
.yqrange-index-wrapper{
.yqrange-index-content{
background: #fff;
padding: 10px;
.step-content{
overflow: hidden;
height: 60px;
padding: 15px 0 50px 0;
border-bottom: 1px solid #efefef;
.is-text {
display: none;
}
.el-steps--simple {
background: #fff;
padding: 10px 8%;
}
.step-num {
display: block;
margin-top: 1.5px;
font-size: 12px;
border: 1px solid #999 !important;
border-radius: 50%;
width: 25px;
height: 18px;
line-height: 15px;
text-align: center;
color: #999;
}
.el-step__title.is-wait {
color: #999;
}
.el-step__title.is-process {
color: #449284;
}
.is-finish {
color: #999 !important;
}
.on-step {
color: #449284;
border: 1px solid #449284 !important;
}
}
.first-step{
margin-top: 20px;
.p-title{
padding-left: 10px;
margin-bottom: 15px;
}
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
height: 100px;
.bg-img {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
text-align: left;
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
}
}
}
.required-label .el-form-item__label::before {
content: '*';
color: #F56C6C;
margin-right: 4px;
}
.edit-img {
width: 20px;
vertical-align: middle;
}
.guest-label .el-form-item__label{
width: 57px;
}
.radio-background{
float: left;
width: 160px;
height: 130px;
border: 2px solid #f1f7f6;
margin: 10px;
text-align: center;
}
.background-img{
width: 150px;
height: 100px;
float: left;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #449284;
border-color: #449284;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #449284;
}
.main-content{
overflow: hidden;
.left{
float: left;
}
.left-box{
width: 270px;
height: 300px;
.common-diagnose{
width: 100%; height: 300px;
.title{
color: #303133;
font-size: 16px;
line-height: 40px;
margin-top: 10px;
.no-result{
font-size: 14px;
color: #e6a23c;
margin-left: 28px;
}
}
.list{
width: 100%; height: 250px;
overflow: hidden;
overflow-y: scroll;
/*.scroll-bar;*/
padding: 10px;
border: 1px solid #DCDFE6;
li{
height: 35px; line-height: 35px; padding: 0 15px;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
cursor: pointer;
font-size: 12px;
&.active{
color: #fff;
background: #409eff;
border-color: #409eff;
}
display: inline-block;
margin: 0 10px 10px 0;
border-radius: 4px;
max-width: 350px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
}
}
.search-list-wrap{
width: 100%; height: 290px; margin-top: 10px;
border: 1px solid #DCDFE6;
overflow: hidden;
overflow-y: scroll;
/*.scroll-bar;*/
.search-list{
border-radius: 4px;
width: 100%;
padding: 10px;
li{
position: relative;
line-height: 30px;
overflow: hidden;
cursor: pointer;
font-size: 12px;
&:hover{
background: #eee;
}
.left{
width: 310px;
float: left;
span{
color: #ff8429;
}
.disease-name{
font-size: 14px;
}
.one-line{
width: 100%; overflow: hidden;
font-size: 12px; color: #aaa;
.alias{
float: left;
}
.sign{
float: left;
margin: 0 5px;
}
.code{
float: left;
}
}
}
.right{
position: absolute;
right: 0;
top: 50%;
margin-top: -13px;
// width: 0px;
// float: left;
display: inline-block;
vertical-align: middle;
i{
font-size: 24px;
color: #449284;
font-weight: 700;
}
}
.code{
line-height: 30px;
}
}
.loading{
color: #ccc;
text-align: center;
margin: 0;
font-size: 12px;
margin-top: 5px;
}
}
}
}
.choosed-list-wrap{
width: 450px;
height: 300px;
margin-left: 30px;
.title{
color: #303133;
font-size: 16px;
line-height: 40px;
margin-top: 10px;
}
.choosed-list{
overflow: hidden;
overflow-y: scroll;
width: 450px;
height: 250px;
padding: 10px;
border: 1px solid #DCDFE6;
/*.scroll-bar;*/
.el-tag {
margin: 0 10px 10px 0;;
.text{
display: inline-block;
max-width: 342px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.el-tag__close{
top: -12px;
}
}
}
}
}
</style>
src/views/plaza/plaza-list.vue 0 → 100644
浏览文件 @ 1ef2c997
<template>
<div class="yqrange-index-wrapper">
<!--<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>-->
<div class="yqrange-index-content" id="screenSet">
<!--<div class="header-title">直播管理</div>-->
<el-form
ref="searchForm"
:model="searchForm"
label-width="75px"
label-suffix=":"
:inline="true"
>
<el-row :gutter="30" type="flex" style="margin-top: 10px">
<el-col :span="9">
<el-form-item label="专区名称">
<el-input v-model="searchForm.squareName" size="small" placeholder="请输入专区名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="疾病标签">
<el-select
v-model="searchForm.diseaseIdList"
id="statusSelector"
placeholder="请选择发布状态"
clearable
style="margin-left:20px;height: 32px;line-height: 32px;"
>
<el-option
v-for="item in diseaseList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="30" type="flex" style="margin-top: 10px">
<el-col :span="9">
<el-form-item label="科室标签">
<el-select
v-model="searchForm.liveStatus"
id="statusSelector"
placeholder="请选择发布状态"
clearable
style="margin-left:20px;height: 32px;line-height: 32px;"
>
<el-option
v-for="item in deptList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="学科标签">
<el-select
v-model="searchForm.liveStatus"
id="statusSelector"
placeholder="请选择发布状态"
clearable
style="margin-left:20px;height: 32px;line-height: 32px;"
>
<el-option
v-for="item in subjectList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7" style="text-align: right">
<el-button type="primary" size="small" @click="search">搜索</el-button>
<el-button type="default" size="small" @click="resetForm" style="margin-left:0;">取消搜索</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="text-align: right">
<el-button type="primary" size="small" @click="createPlaza">添加专区</el-button>
</el-col>
</el-row>
</el-form>
<el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;">
<el-table-column prop="squareName" label="专区名称" min-width="100" align="center"></el-table-column>
<el-table-column prop="type" label="专区类型" min-width="100" align="center">
<template slot-scope="scope">
<span>{{ scope.row.type | circleTypeFilter }}</span>
</template>
</el-table-column>
<el-table-column prop="diseaseTags" label="疾病标签" min-width="100" align="center">
<template slot-scope="scope">
<span>{{ scope.row.streamType | streamTypeFilter }}</span>
</template>
</el-table-column>
<el-table-column prop="deptTags" label="科室标签" min-width="100" align="center">
<template slot-scope="scope">
<span>{{ scope.row.streamType | streamTypeFilter }}</span>
</template>
</el-table-column>
<el-table-column prop="subjectTags" label="学科标签" min-width="100" align="center">
<template slot-scope="scope">
<span>{{ scope.row.streamType | streamTypeFilter }}</span>
</template>
</el-table-column>
<el-table-column prop="createdTime" label="添加时间" min-width="100" align="center"></el-table-column>
<el-table-column label="操作" min-width="300" align="center">
<template slot-scope="scope">
<el-button @click="editPlaza(scope.row)" type="text" size="small">编辑</el-button>
<el-button @click="delPlaza(scope.row)" type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleNumChange"
:current-page="searchForm.pageNo"
:page-sizes="[10, 30, 50, 100, 200]"
:page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
<el-dialog
title="添加专区"
:visible.sync="dialogLivelinkVisible"
width="700px"
:close-on-click-modal="false"
@close="handleLivelinkClose"
center
>
<el-form ref="plazaForm" :model="plazaForm">
<el-form-item label="专区名称">
<el-col :span="20">
<el-select
v-model="plazaForm.businessId"
id="statusSelector"
placeholder="请选择发布状态"
clearable
style="margin-left:20px;height: 32px;line-height: 32px;"
>
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.label"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="疾病标签">
<el-col :span="20">
<el-select multiple multiple-limit="5"
v-model="plazaForm.diseaseIdList"
id="statusSelector"
placeholder="请选择发布状态"
clearable
style="margin-left:20px;height: 32px;line-height: 32px;"
>
<el-option
v-for="item in diseaseList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="科室标签">
<el-col :span="20">
<el-select multiple multiple-limit="5"
v-model="plazaForm.deptIdList"
id="statusSelector"
placeholder="请选择发布状态"
clearable
style="margin-left:20px;height: 32px;line-height: 32px;"
>
<el-option
v-for="item in deptList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="学科标签">
<el-col :span="25">
<el-select multiple multiple-limit="5"
v-model="plazaForm.subjectIdList"
id="statusSelector"
placeholder="请选择发布状态"
clearable
style="margin-left:20px;height: 32px;line-height: 32px;"
>
<el-option
v-for="item in subjectList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-col>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;">
<el-button type="default" size="small" @click="cancle()" left>取消</el-button>
<el-button type="primary" size="small" @click="savePlaza()" right>确定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {openLoading, closeLoading} from "../../utils/utils";
import DownloadJS from "@/utils/download/download4";
let vm = null;
import BreadCrumb from "@/components/breadcrumb.vue";
import { getDiseaseList, getDeptList, getSubjectList, getPlazaList, savePlaza, delPlaza, getPlaza } from "../../utils/plaza/plazaApi";
import { doUpload, getFilePath, unsubscribe } from "../../utils/qiniu-util";
import QRCode from "qrcodejs2"
import ElLink from "element-ui/packages/link/src/main";
export default {
components: {
ElLink,
BreadCrumb,
QRCode
},
data() {
return {
rtcId: null,
curmbFirst: "云鹊小圈",
curmbSecond: "直播管理",
dialogStatisticsVisible: false,
dialogLivelinkVisible: false,
dialogLivePlaybackVisible: false,
// closePlaybackVisible: false,
playbackSetFlag: 1,
canPlayback: "1",
uploadFlag: false,
selectFlag: true,
numberShowFlag: false,
videoNumber: 0,
playbackUrl: "",
searchForm: {
squareName: "",
deptIdList: [],
diseaseIdList: [],
subjectIdList: [],
pageNo: 1,
pageSize: 10
},
totalRows: 0,
tableData: [
// {
// liveName: "浙江医学大会第二场",
// scope: 1, //直播范围 1-非公开 2-公开
// liveStatus: 1, //直播状态 1-未开始 2-直播中 3-暂停中 4-已结束 5-回放中目前只能用到1，2，4
// createTime: "",
// startTime: "",
// endTime: "",
// rtcId: 0
// }
],
dialogStatisticsData: [
{
peopleNum: 0,
liveDuration: "",
signNum: 0
}
],
scope: 1,
liveStatus: 1,
lecturerUrl: "",
guestUrl: "",
audienceUrl: "",
plazaForm: {
id:'',
businessId: 0,
deptIdList: [],
diseaseIdList: [],
subjectIdList: []
},
disabledOpenFlag: false, // 开启回放是否可点
downloadVideoFlag: true,// 拉流直播不显示下载
videoNumber: 0,
uploadProgress1: 0,
fileName: "",
fileSize: 0,
fileFlag: true,
deleteFileFlag: false,
circleId: null,
streamType: 1,
downloadSuccessStatus: 1,
videoSize: 0,
link: '',//预览的链接
qrcodeBox: null,
dialogVisible: false,
isSign: 0, // 是否签到
statusList: [
{
value: "1",
label: "预告"
},
{
value: "2",
label: "直播中"
},
{
value: "4",
label: "已结束"
}
],
diseaseList: [],
deptList: [],
subjectList: []
};
},
props:{
circleName: {
type: String
}
},
created() {
vm = this;
this.circleId = this.$route.query.id;
console.log("circleName: " + this.circleName);
vm.getDiseaseList();
vm.getDeptList();
vm.getSubjectList();
vm.getPlazaList("", "");
},
methods: {
// 搜索按钮
search(){
this.searchForm.pageNo = 1;
this.searchList();
},
getDiseaseList(){
getDiseaseList().then(res => {
if (res.code == "000000") {
vm.diseaseList = res.data;
}
});
},
getDeptList(){
getDeptList().then(res => {
if (res.code == "000000") {
vm.deptList = res.data;
}
});
},
getSubjectList(){
getSubjectList().then(res => {
if (res.code == "000000") {
vm.subjectList = res.data;
}
});
},
searchList() {
console.log("查询");
this.getPlazaList("", "");
},
resetForm() {
console.log("重置alex");
// this.$router.push({
// path: '/role-manage',
// })
this.searchForm.liveName = "";
this.searchForm.liveStatus = "";
this.search();
},
//添加专区
createPlaza() {
this.dialogLivelinkVisible = true;
},
//弹出直播链接弹窗
liveLink(row) {
this.dialogLivelinkVisible = true;
this.scope = row.scope;
this.liveStatus = row.liveStatus;
this.streamType = row.streamType;
console.log(
"liveLink() : scope = " +
this.scope +
", liveStatus = " +
this.liveStatus
);
vm.GET("rtc/liveAdmin/url/" + row.id, "").then(res => {
if (res.code == "000000") {
this.lecturerUrl = res.data.lecturerUrl;
this.guestUrl = res.data.guestUrl;
this.audienceUrl = res.data.audienceUrl;
this.dialogLivelinkVisible = true;
} else {
//
}
});
},
//关闭直播链接弹窗
handleLivelinkClose() {
vm.dialogLivelinkVisible = false;
},
// // 查询回放信息
// getPlayback(){
//
// }
//设置回放
setPlayback(row) {
vm.dialogLivePlaybackVisible = true;
const rtcId = row.id;
vm.streamType = row.streamType;
// 拉流直播不显示选择区域
if(vm.streamType == 2){
vm.selectFlag = false;
vm.uploadFlag = true;
vm.downloadVideoFlag = false;
}
else {
vm.selectFlag = true;
}
openLoading(this);
getPlayback({rtcId}).then((res) => {
closeLoading(this);
if(res.code == "000000") {
vm.playbackForm = res.data;
if(vm.playbackForm.playbackUrls != null){
// if(vm.playbackForm.playbackUrls.originalUrls != null){
vm.playbackForm.videoSource = String(vm.playbackForm.videoSource);
// if(vm.playbackForm.videos != null && vm.playbackForm.videos.length > 0){
// vm.playbackForm.videos[0].videoSize = vm.videoSize(vm.playbackForm.videos[0].videoSize, 1);
// }
// 拉流直播 不显示两个选择按钮；只显示①上传回放视频
if(vm.streamType == 2){
vm.playbackForm.videoSource = "2";
vm.selectFlag = false;
vm.downloadVideoFlag = false;
}
// 网页直播
else {
// 存在多个原视频,如果直播原视频有大于1段，不显示两个选择按钮，而显示“存在..直播原视频，请下载合并后上传”
if(vm.playbackForm.playbackUrls.downloadUrls.length > 1){
vm.uploadFlag = true;
vm.selectFlag = false;
vm.numberShowFlag = true;
vm.videoNumber = this.playbackForm.playbackUrls.downloadUrls.length;
vm.playbackForm.videoSource = "2";
vm.downloadVideoFlag = true;
}
else {
vm.selectFlag = true;
vm.changeVideoSource();
vm.numberShowFlag = false;
// 当选择第二个按钮“上传回放视频”时，显示①下载②上传
if(vm.playbackForm.videoSource == "2"){
vm.downloadVideoFlag = true;
}
}
}
// 如果回放视频有，则显示删除，不显示上传
if(vm.playbackForm.videos != null && vm.playbackForm.videos.length > 0){
// 当选择第二个按钮“上传回放视频”时，显示①下载②上传,如果videoSource等于1，原视频直播，要显示上传，不显示删除
if(vm.playbackForm.videoSource == "1"){
vm.fileFlag = true;
vm.deleteFileFlag = false;
}
// 当选择第二个按钮“上传回放视频”时，显示①下载②上传,如果videoSource等于2，回放视频，要显示删除，不显示上传
else {
vm.fileFlag = false;
vm.deleteFileFlag = true;
}
}
// // 初始化
// vm.uploadProgress1 = Number("0.00");
// vm.uploadProgress = Number("0.00");
// if(row.streamType == 1){
//
// vm.downloadVideoFlag = true;
// vm.changeVideoSource();
// }
// else {
// vm.playbackForm.videoSource = "2";
// }
// }
}
}
}).catch((error) => {
vm.$message({
message: "请重试",
type: 'error'
});
})
},
savePlaza(){
let params = vm.plazaForm;
savePlaza(params).then((res) => {
closeLoading(this);
if(res.code == "000000") {
this.$message.success("添加成功");
} else {
this.$message.error("添加失败，请重试");
}
}).catch((error) => {
this.$message.error("请重试");
})
},
//编辑专区
editPlaza(row) {
},
//删除专区
delPlaza(row) {
// 直播中
if(row.liveStatus == 2){
vm.$message({
type: "warning",
message: "直播中无法删除，请直播结束后重试"
});
}
// 1:直播预告；4:直播结束后，可以删除
else if(row.liveStatus == 1 || row.liveStatus == 4){
this.$confirm(`确定删除“${row.name}”吗？`, "", {
confirmButtonText: "删除",
cancelButtonText: "取消",
type: "warning"
// customClass: 'range-make-box',
})
.then(() => {
// confirm
vm.DELETE("rtc/liveAdmin/" + row.id, {}).then(res => {
if (res.code == "000000") {
vm.$message({
type: "success",
message: "删除成功"
});
this.getLiveList("", "");
} else {
vm.$message({
type: "warning",
message: res.message
});
}
});
})
.catch(() => {});
}
},
// //编辑直播
// editLive(row) {
// this.$router.push({
// path: "/create-live",
// query: {
// // rtcId: "16"
// rtcId: row.id,
//
// }
// });
// },
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.searchForm.pageNo = 1;
this.searchList();
},
handleNumChange(val) {
this.searchForm.pageNo = val;
this.searchList();
},
//查询直播列表
getPlazaList(name, status) {
let req = {
squareName: vm.searchForm.squareName,
deptIdList: vm.searchForm.deptIdList,
diseaseIdList: vm.searchForm.diseaseIdList,
subjectIdList: vm.searchForm.subjectIdList,
pageNo: this.searchForm.pageNo,
pageSize: this.searchForm.pageSize
};
getPlazaList(req).then(res => {
if (res.code == "000000") {
// console.log(res);
let listData = [];
if (res.data.pageContents == null) {
return;
}
// for (let i = 0; i < res.data.pageContents.length; i++) {
// let obj = {
// // liveName: res.data.pageContents[i].name,
// // liveScope: res.data.pageContents[i].scope,
// // liveStatus: res.data.pageContents[i].liveStatus,
// // streamType: res.data.pageContents[i].streamType,
// // playbackSetFlag: res.data.pageContents[i].playbackSetFlag,
// // canPlayback: res.data.pageContents[i].canPlayback,
// // createTime: res.data.pageContents[i].createdTime,
// // startTime: res.data.pageContents[i].openTime,
// // endTime: res.data.pageContents[i].endTime,
// // rtcId: res.data.pageContents[i].id,
// // isSign: res.data.pageContents[i].isSign
// };
// listData.push(obj);
// }
this.tableData = res.data.pageContents;
this.totalRows = res.data.totalRows;
} else {
this.tableData = [];
}
});
},
copyTxt(type) {
let txt = document.getElementById("copyInput");
if (type == 1) {
txt.value = this.lecturerUrl;
} else if (type == 2) {
txt.value = this.guestUrl;
} else {
txt.value = this.audienceUrl;
}
// if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) {
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") < 1) {
var el = document.createElement('input');
el.value = txt.value;//要复制的内容
el.style.opacity = '0';
document.body.appendChild(el);
var editable = el.contentEditable;
var readOnly = el.readOnly;
el.contentEditable = true;
el.readOnly = false;
const range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
el.setSelectionRange(0, 999999);
el.contentEditable = editable;
el.readOnly = readOnly;
var ret = document.execCommand('copy');
el.blur();
}
else {
txt.select(); //选择对象
document.execCommand("copy");
}
vm.$message({
type: "success",
message: "分享链接已复制，快分享给好友吧"
});
},
//预览二维码
previewQrcode() {
vm.link = this.audienceUrl;
vm.dialogVisible = true;
vm.$nextTick ( () => {
vm.qrcode();
})
},
// 生成二维码
qrcode () {
if (vm.qrcodeBox) {
vm.qrcodeBox.makeCode(vm.link);
return;
}
vm.qrcodeBox = new QRCode('qrcode', {
width: 400,
height: 400,
text: vm.link, // 二维码内容
// render: 'canvas' , // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
// background: '#f0f', // 背景色
// foreground: '#ff0' // 前景色
})
},
// 关闭预览弹框
handleClose() {
vm.dialogVisible = false;
},
downlodExcel(){
let params = {
rtcId: this.rtcId
// rtcId: 372
};
downloadSigninfo(params).then((res) => {
// vm.GET(`rtc/liveAdmin/download/signInfo/` + params.rtcId, { responseType: 'blob' }).then((res) => {
closeLoading(this);
// const aLink = document.createElement("a");
// let blob = new Blob([res], {type: "application/vnd.ms-excel;charset=utf-8"});
// // let downloadUrl = URL.createObjectURL(blob);
// // window.location.href = downloadUrl;
// aLink.href = URL.createObjectURL(blob);
// aLink.setAttribute('download', '123' + '.xlsx'); // 设置下载文件名称
// aLink.click();
// this.$refs.loadElement.appendChild(aLink);
// setTimeout(() => {
// window.open(downloadUrl);
// }, 500);
if(res.code == "000000") {
this.downloadExcelFile(res.data);
this.$message.success("下载成功");
// vm.getLiveList("", "");
} else {
this.$message.error("下载失败，请重试");
}
}).catch((error) => {
this.$message.error("请重试");
})
},
/* 文件下载*/
downloadExcelFile(base64) {
let a = document.createElement('a');
vm.uploadHref = 'data:application/xls;base64,' + base64;
a.setAttribute('href',vm.uploadHref);
a.setAttribute('download','签到人数统计' + new Date().getTime() + '.xlsx');
// if (flag && flag == 2) {
// a.setAttribute('download',vm.exportFileName);
// } else {
// a.setAttribute('download',vm.uploadFileName);
// }
a.click();
},
jumpUrl(type) {
var url;
if (type == 1) {
url = this.lecturerUrl;
} else if (type == 2) {
url = this.guestUrl;
}
window.open(url);
},
/*
* 使用download.js 强制浏览器下载图片、视频等文件
* @param {any} url url链接地址
* @param {any} strFileName 文件名
* @param {any} strMimeType 文件类型
*/
downloadfile(url, strFileName, strMimeType) {
let xmlHttp = null;
if (window.ActiveXObject) {
// IE6, IE5 浏览器执行代码
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlHttp = new XMLHttpRequest();
}
//2.如果实例化成功，就调用open（）方法：
if (xmlHttp != null) {
xmlHttp.open("get", url, true);
xmlHttp.responseType = 'blob';//关键
xmlHttp.send();
xmlHttp.onreadystatechange = doResult; //设置回调函数
}
vm.downloadSuccessStatus = 3;// 下载中...
function doResult() {
if (xmlHttp.readyState == 4) { //4表示执行完成
if (xmlHttp.status == 200) { //200表示执行成功
DownloadJS(xmlHttp.response, strFileName, strMimeType);
vm.downloadSuccessStatus = 5;// 下载成功
vm.$message.success("下载成功");
vm.downloadSuccessStatus = 1;// 重置
}
// else {
// vm.$message.error("下载失败");
// }
}
}
},
getFileName(url){
const urlArray = url.split("/");
const length = urlArray.length;
const fileName = urlArray[length-1];
return fileName;
},
getFileType(fileName) {
// 后缀获取
let suffix = '';
// 获取类型结果
let result = '';
try {
const flieArr = fileName.split('.');
suffix = flieArr[flieArr.length - 1];
} catch (err) {
suffix = '';
}
// fileName无后缀返回 false
if (!suffix) { return false; }
suffix = suffix.toLocaleLowerCase();
// 图片格式
const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
// 进行图片匹配
result = imglist.find(item => item === suffix);
if (result) {
return 'image';
}
// 匹配txt
const txtlist = ['txt'];
result = txtlist.find(item => item === suffix);
if (result) {
return 'txt';
}
// 匹配 excel
const excelist = ['xls', 'xlsx'];
result = excelist.find(item => item === suffix);
if (result) {
return 'excel';
}
// 匹配 word
const wordlist = ['doc', 'docx'];
result = wordlist.find(item => item === suffix);
if (result) {
return 'word';
}
// 匹配 pdf
const pdflist = ['pdf'];
result = pdflist.find(item => item === suffix);
if (result) {
return 'pdf';
}
// 匹配 ppt
const pptlist = ['ppt', 'pptx'];
result = pptlist.find(item => item === suffix);
if (result) {
return 'ppt';
}
// 匹配 视频
const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
result = videolist.find(item => item === suffix);
if (result) {
return 'video';
}
// 匹配 音频
const radiolist = ['mp3', 'wav', 'wmv'];
result = radiolist.find(item => item === suffix);
if (result) {
return 'radio';
}
// 其他 文件类型
return 'other';
}
}
};
</script>
<style lang="scss">
.yqrange-index-wrapper {
.yqrange-index-content {
background: #fff;
padding: 10px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
}
.el-button--text {
color: #449284;
font-size: 14px;
&::after {
content: "";
position: relative;
height: 14px;
/*border-right: 1px solid #EBEEF5;*/
border-right: 1px solid #aaaaaa;
padding-right: 10px;
}
&:last-of-type {
&::after {
content: "";
position: relative;
width: 1px;
height: 14px;
border-right: none;
}
}
}
}
.live_url_style {
display: flex;
padding: 10px;
}
.href_outer_border {
margin-top: 10px;
}
.href_style {
width: 1500px;
background-color: #d8d8d8;
padding:10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.href_button_style {
margin-left: 35px;
}
.hidden-input {
height: 0;
}
.qrcode-wrap {
width: 400px;
height: 400px;
margin: 0 auto;
}
.el-select .el-input__inner {
height: 32px;
line-height: 32px;
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或