admin/zbAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 样式调整

Browse Source
This commit is contained in:
kaizheng(郑凯) 2025-02-27 20:24:09 +08:00
parent df7ee15cce
commit 3d0288a713
2 changed files with 123 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
src/views/liveBroadcast/liveDetail/components/guestList.vue
View File

@ -1,7 +1,12 @@
<template> <template>
<div class="p20"> <div>
<el-button type="primary" @click="dialogVisible1 = true" v-if="!tableData.length && liveStatus === 2">嘉宾设置</el-button> <el-button
<el-table :data="tableData" height="250" border style="width: 100%"> type="primary"
@click="dialogVisible1 = true"
v-if="!tableData.length && liveStatus === 2"
>嘉宾设置</el-button
>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="" label="讲师名称" width="180"> <el-table-column prop="" label="讲师名称" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.guestInfo.showName }} {{ scope.row.guestInfo.showName }}
@ -20,21 +25,39 @@
<el-table-column prop="" label="主画面显示"> <el-table-column prop="" label="主画面显示">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
:disabled="[2,4].includes(liveStatus)" :disabled="[2, 4].includes(liveStatus)"
v-model="scope.row.showMain" v-model="scope.row.showMain"
active-color="#13ce66" active-color="#13ce66"
:active-value="1" :active-value="1"
:inactive-value="2" :inactive-value="2"
@change="(showMain)=> changeShowMain({showMain, item:scope.row})"> @change="showMain => changeShowMain({ showMain, item: scope.row })"
>
</el-switch> </el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" label="操作"> <el-table-column prop="" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" @click="optFn({type:0, item:scope.row})" v-if="liveStatus === 2">移除</el-button> <el-button
<div v-else-if="scope.row.streamStatus === 'active' && liveStatus === 1"> type="text"
<el-button type="text" @click="optFn({type:2, item:scope.row})" v-if="scope.row.status !== 2">开始连麦</el-button> @click="optFn({ type: 0, item: scope.row })"
<el-button type="text" @click="optFn({type:3, item:scope.row})" v-if="scope.row.status === 2">结束连麦</el-button> v-if="liveStatus === 2"
>移除</el-button
>
<div
v-else-if="scope.row.streamStatus === 'active' && liveStatus === 1"
>
<el-button
type="text"
@click="optFn({ type: 2, item: scope.row })"
v-if="scope.row.status !== 2"
>开始连麦</el-button
>
<el-button
type="text"
@click="optFn({ type: 3, item: scope.row })"
v-if="scope.row.status === 2"
>结束连麦</el-button
>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -54,21 +77,24 @@
></adviser-select> ></adviser-select>
</el-form-item> </el-form-item>
<el-form-item label="嘉宾展示区域" prop="templateId"> <el-form-item label="嘉宾展示区域" prop="templateId">
<el-select v-model="form.templateId" placeholder="请选择嘉宾展示区域" style="width: 100%;"> <el-select
v-model="form.templateId"
placeholder="请选择嘉宾展示区域"
style="width: 100%;"
>
<el-option <el-option
v-for="(value,key) in mixQueryTemplateObj" v-for="(value, key) in mixQueryTemplateObj"
:key="key" :key="key"
:label="value" :label="value"
:value="key"> :value="key"
>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible1 = false">取 消</el-button> <el-button @click="dialogVisible1 = false">取 消</el-button>
<el-button type="primary" @click="saveMixDataFn" <el-button type="primary" @click="saveMixDataFn">提 交</el-button>
>提 交</el-button
>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog <el-dialog
@ -80,26 +106,29 @@
<span>{{ tipText }}</span> <span>{{ tipText }}</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false">取 消</el-button> <el-button @click="dialogVisible2 = false">取 消</el-button>
<el-button type="primary" @click="updateStatus" <el-button type="primary" @click="updateStatus">提 交</el-button>
>提 交</el-button
>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { mixQueryTemplateObj } from "@/utils/options"; import { mixQueryTemplateObj } from "@/utils/options";
import { getMixData, saveMixData, updateMixShowMain, updateMixStatus } from "@/api/videoLive" import {
getMixData,
saveMixData,
updateMixShowMain,
updateMixStatus
} from "@/api/videoLive";
import AdviserSelect from "@/views/adviser/components/select"; import AdviserSelect from "@/views/adviser/components/select";
export default { export default {
components: { components: {
AdviserSelect AdviserSelect
}, },
computed: { computed: {
...mapGetters(["user"]), ...mapGetters(["user"])
}, },
props:{ props: {
liveStatus: { liveStatus: {
type: Number type: Number
} }
@ -109,126 +138,132 @@ export default {
mixQueryTemplateObj, mixQueryTemplateObj,
dialogVisible1: false, dialogVisible1: false,
form: { form: {
guestId: '', guestId: "",
templateId: '', templateId: "",
videoId: this.$route.query.id videoId: this.$route.query.id
}, },
rules: { rules: {
guestId: [{ required: true, message: "请选择嘉宾", trigger: "blur" }], guestId: [{ required: true, message: "请选择嘉宾", trigger: "blur" }],
templateId: [{ required: true, message: "请选择嘉宾展示区域", trigger: "blur" }] templateId: [
{ required: true, message: "请选择嘉宾展示区域", trigger: "blur" }
]
}, },
dialogVisible2: false, dialogVisible2: false,
streamStatusObj: { streamStatusObj: {
active: '已推流', active: "已推流",
inactive: '未推流', inactive: "未推流",
forbid: '禁播' forbid: "禁播"
}, },
statusObj: { statusObj: {
1:'未连麦', 1: "未连麦",
2:'已连麦', 2: "已连麦",
3:'已结束连麦' 3: "已结束连麦"
}, },
tableData: [], tableData: [],
tipText: '', tipText: "",
optStatus: null, optStatus: null,
time: null time: null
}; };
}, },
async created() { async created() {
await this.getDetail() await this.getDetail();
this.timerGetDetail() this.timerGetDetail();
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.time) clearInterval(this.time);
}, },
watch: { watch: {
liveStatus(){ liveStatus() {
this.timerGetDetail() this.timerGetDetail();
}, },
dialogVisible1(value) { dialogVisible1(value) {
if(!value) { if (!value) {
this.form = { this.form = {
guestId: '', guestId: "",
templateId: '', templateId: "",
videoId: this.$route.query.id videoId: this.$route.query.id
} };
} }
} }
}, },
methods: { methods: {
timerGetDetail() { timerGetDetail() {
if([1,3].includes(this.liveStatus) && this.tableData.length && this.$route.query.id) { if (
clearInterval(this.time) [1, 3].includes(this.liveStatus) &&
this.time = setInterval(()=>{ this.tableData.length &&
this.getDetail() this.$route.query.id
}, 5000) ) {
clearInterval(this.time);
this.time = setInterval(() => {
this.getDetail();
}, 5000);
} }
}, },
async getDetail() { async getDetail() {
console.log('getDetail') console.log("getDetail");
let ret = await getMixData({id: this.$route.query.id}) let ret = await getMixData({ id: this.$route.query.id });
if(ret && ret.code === 0 && ret.data) { if (ret && ret.code === 0 && ret.data) {
this.tableData = [ret.data] this.tableData = [ret.data];
} else if(ret && ret.code === 0 && !ret.data){ } else if (ret && ret.code === 0 && !ret.data) {
clearInterval(this.time) clearInterval(this.time);
this.tableData = [] this.tableData = [];
} }
}, },
optFn({type, item}) { optFn({ type, item }) {
this.optStatus = type this.optStatus = type;
let name = item.guestInfo.showName let name = item.guestInfo.showName;
const textObj = { const textObj = {
0: `是否确认将${name}从嘉宾名单中移除?`, 0: `是否确认将${name}从嘉宾名单中移除?`,
2: `是否确认开始与嘉宾${name}连麦?`, 2: `是否确认开始与嘉宾${name}连麦?`,
3: `是否确认结束与嘉宾${name}连麦?` 3: `是否确认结束与嘉宾${name}连麦?`
} };
this.tipText = textObj[type] this.tipText = textObj[type];
this.dialogVisible2 = true this.dialogVisible2 = true;
}, },
async updateStatus() { async updateStatus() {
let ret = await updateMixStatus({ let ret = await updateMixStatus({
status: this.optStatus, status: this.optStatus,
videoId: this.$route.query.id videoId: this.$route.query.id
}) });
if(ret && ret.code === 0) { if (ret && ret.code === 0) {
this.$message({ this.$message({
type: "success", type: "success",
message: "操作成功!" message: "操作成功!"
}); });
this.dialogVisible2 = false this.dialogVisible2 = false;
this.getDetail() this.getDetail();
} }
}, },
saveMixDataFn() { saveMixDataFn() {
this.$refs.ruleForm.validate(async valid => { this.$refs.ruleForm.validate(async valid => {
if (valid) { if (valid) {
let ret = await saveMixData(this.form) let ret = await saveMixData(this.form);
if(ret && ret.code === 0) { if (ret && ret.code === 0) {
this.dialogVisible1 = false this.dialogVisible1 = false;
this.$message({ this.$message({
type: "success", type: "success",
message: "设置成功!" message: "设置成功!"
}); });
this.getDetail() this.getDetail();
} }
} }
}) });
}, },
async changeShowMain({showMain, item}) { async changeShowMain({ showMain, item }) {
let ret = await updateMixShowMain({ let ret = await updateMixShowMain({
showMain, showMain,
videoId: this.$route.query.id videoId: this.$route.query.id
}) });
if(ret && ret.code === 0) { if (ret && ret.code === 0) {
this.$message({ this.$message({
type: "success", type: "success",
message: "设置成功!" message: "设置成功!"
}); });
} else { } else {
item.showMain = showMain === 1? 2: 1 item.showMain = showMain === 1 ? 2 : 1;
} }
} }
}, }
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

26
src/views/liveBroadcast/liveDetail/index.vue
View File

@ -227,7 +227,10 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<p v-if="[1, 2, 4].includes(type)" style="text-align: right;"> <p
v-if="[1, 2, 4].includes(type)"
style="line-height:40px;text-align: right;"
>
（此处的上下架产品仅控制是否在购物车列表展示） （此处的上下架产品仅控制是否在购物车列表展示）
</p> </p>
</div> </div>
@ -318,7 +321,7 @@
<el-button <el-button
v-if="detail.liveStatus !== 4 && detail.playType === 1" v-if="detail.liveStatus !== 4 && detail.playType === 1"
type="primary" type="primary"
style="margin-bottom:50px;" style="margin-bottom:10px;"
@click="createQuestionnaire" @click="createQuestionnaire"
>创建问卷</el-button >创建问卷</el-button
> >
@ -332,8 +335,8 @@
:header-cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
> >
<el-table-column type="index" label="序号" width="100" /> <el-table-column type="index" label="序号" />
<el-table-column prop="title" label="问卷名称" width="200"> <el-table-column prop="title" label="问卷名称">
<template slot-scope="scope"> <template slot-scope="scope">
<span <span
class="button-text" class="button-text"
@ -343,18 +346,14 @@
> >
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createTime" label="创建时间" width="200"> <el-table-column prop="createTime" label="创建时间">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.createTime }} {{ scope.row.createTime }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="startTime" label="发起时间" />
prop="startTime" <el-table-column prop="writeNum" label="填写人数" />
label="发起时间" <el-table-column prop="status" label="状态">
width="200"
/>
<el-table-column prop="writeNum" label="填写人数" width="100" />
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
{{ questionnaireStatusList[scope.row.status] }} {{ questionnaireStatusList[scope.row.status] }}
</template> </template>
@ -3413,7 +3412,6 @@ export default {
padding: 5px; padding: 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 600px;
} }
.audience-chat-box { .audience-chat-box {
display: flex; display: flex;
@ -3571,7 +3569,6 @@ export default {
} }
.shopping-box { .shopping-box {
padding-left: 20px;
.shop-header { .shop-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -3594,7 +3591,6 @@ export default {
} }
.questionnaire-box { .questionnaire-box {
padding: 20px;
} }
.questionnaire-dialog { .questionnaire-dialog {