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

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

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

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

@ -227,7 +227,10 @@
</template>
</el-table-column>
</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>
</div>
@ -318,7 +321,7 @@
<el-button
v-if="detail.liveStatus !== 4 && detail.playType === 1"
type="primary"
style="margin-bottom:50px;"
style="margin-bottom:10px;"
@click="createQuestionnaire"
>创建问卷</el-button
>
@ -332,8 +335,8 @@
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
>
<el-table-column type="index" label="序号" width="100" />
<el-table-column prop="title" label="问卷名称" width="200">
<el-table-column type="index" label="序号" />
<el-table-column prop="title" label="问卷名称">
<template slot-scope="scope">
<span
class="button-text"
@ -343,18 +346,14 @@
>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" width="200">
<el-table-column prop="createTime" label="创建时间">
<template slot-scope="scope">
{{ scope.row.createTime }}
</template>
</el-table-column>
<el-table-column
prop="startTime"
label="发起时间"
width="200"
/>
<el-table-column prop="writeNum" label="填写人数" width="100" />
<el-table-column prop="status" label="状态" width="100">
<el-table-column prop="startTime" label="发起时间" />
<el-table-column prop="writeNum" label="填写人数" />
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
{{ questionnaireStatusList[scope.row.status] }}
</template>
@ -3413,7 +3412,6 @@ export default {
padding: 5px;
display: flex;
flex-direction: column;
min-height: 600px;
}
.audience-chat-box {
display: flex;
@ -3571,7 +3569,6 @@ export default {
}
.shopping-box {
padding-left: 20px;
.shop-header {
display: flex;
justify-content: space-between;
@ -3594,7 +3591,6 @@ export default {
}
.questionnaire-box {
padding: 20px;
}
.questionnaire-dialog {