|
@@ -93,8 +93,8 @@
|
|
|
<el-table-column label="主播ID" align="center" prop="talentId" />
|
|
|
<el-table-column label="直播类型" align="center" prop="liveType">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-tag v-if="scope.row.liveType == 1">直播</el-tag>
|
|
|
- <el-tag v-if="scope.row.liveType == 2">录播</el-tag>
|
|
|
+ <el-tag type="danger" v-if="scope.row.liveType == 1">直播</el-tag>
|
|
|
+ <el-tag type="success" v-if="scope.row.liveType == 2">录播</el-tag>
|
|
|
<el-tag v-if="scope.row.liveType == 3">直播回放</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -168,6 +168,18 @@
|
|
|
>
|
|
|
<i class="el-icon-service"></i> 复制直播间
|
|
|
</el-dropdown-item>
|
|
|
+ <el-dropdown-item
|
|
|
+ v-if="scope.row.liveCodeUrl == null"
|
|
|
+ @click.native="handleGenerateCode(scope.row)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-service"></i> 生成二维码
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item
|
|
|
+ v-if="scope.row.liveCodeUrl != null"
|
|
|
+ @click.native="handleCheckCode(scope.row)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-service"></i> 查看二维码
|
|
|
+ </el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
|
|
@@ -175,6 +187,26 @@
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
+ <el-dialog
|
|
|
+ title="直播二维码"
|
|
|
+ :visible.sync="qrcodeDialogVisible"
|
|
|
+ width="500px"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ :show-close="true"
|
|
|
+ top="10vh"
|
|
|
+ >
|
|
|
+ <div class="qrcode-img-container">
|
|
|
+
|
|
|
+ <img
|
|
|
+ :src="currentQrcodeUrl"
|
|
|
+ alt="直播二维码"
|
|
|
+ class="qrcode-img"
|
|
|
+ @error="handleImgError"
|
|
|
+ @click="handleImgZoom"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
<pagination
|
|
|
v-show="total>0"
|
|
|
:total="total"
|
|
@@ -306,7 +338,7 @@ import {
|
|
|
handleShelfOrUn,
|
|
|
handleDeleteSelected,
|
|
|
finishLive,
|
|
|
- startLive, copyLive
|
|
|
+ startLive, copyLive,generateCode
|
|
|
} from "@/api/live/live";
|
|
|
import Editor from '@/components/Editor/wang';
|
|
|
import user from '@/store/modules/user';
|
|
@@ -402,6 +434,9 @@ export default {
|
|
|
serverName: '',
|
|
|
livingCode:'',
|
|
|
videoUrl: "",
|
|
|
+ qrcodeDialogVisible: false, // 弹窗显示状态:默认隐藏
|
|
|
+ currentQrcodeUrl: "", // 当前要展示的二维码地址
|
|
|
+ defaultImg: "https://via.placeholder.com/400x400?text=二维码加载失败" // 占位图
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -694,6 +729,35 @@ export default {
|
|
|
copyLive({"liveId":row.liveId}).then(response=>{this.getList()})
|
|
|
}).catch(() => {});
|
|
|
},
|
|
|
+ handleGenerateCode(row){
|
|
|
+ this.$confirm('是否确认生成直播间小程序二维码?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ generateCode({"liveId":row.liveId}).then(response=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ row.liveCodeUrl = response.data.liveCodeUrl
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ // 查看二维码图片
|
|
|
+ handleCheckCode(row) {
|
|
|
+ // 先校验图片地址是否存在
|
|
|
+ if (!row.liveCodeUrl) {
|
|
|
+ this.$message.warning("二维码图片地址不存在,请稍后重试");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 赋值当前图片地址 + 打开弹窗
|
|
|
+ this.currentQrcodeUrl = row.liveCodeUrl;
|
|
|
+ this.qrcodeDialogVisible = true;
|
|
|
+ },
|
|
|
+ // 2. 图片加载失败:替换为占位图
|
|
|
+ handleImgError(e) {
|
|
|
+ e.target.src = this.defaultImg;
|
|
|
+ },
|
|
|
handleStart(row){
|
|
|
if(row.isShow == 2){
|
|
|
this.$message.error("直播间已下架")
|
|
@@ -749,4 +813,33 @@ export default {
|
|
|
.selection-toolbar .el-checkbox .el-checkbox__inner {
|
|
|
top: 8px; /* 根据实际需求调整 */
|
|
|
}
|
|
|
+/* 图片容器:居中 + 内边距 */
|
|
|
+.qrcode-img-container {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 图片样式:自适应弹窗宽度,避免溢出 */
|
|
|
+.qrcode-img {
|
|
|
+ max-width: 100%; /* 最大宽度不超过容器 */
|
|
|
+ max-height: 400px; /* 最大高度限制,避免过高 */
|
|
|
+ cursor: pointer; /* 鼠标悬浮变指针,提示可点击 */
|
|
|
+ transition: all 0.3s ease; /* 过渡动画,hover 更流畅 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 图片 hover 效果:轻微放大 */
|
|
|
+.qrcode-img:hover {
|
|
|
+ transform: scale(1.02);
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 加阴影增强层次感 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 底部提示文字样式 */
|
|
|
+.qrcode-footer {
|
|
|
+ text-align: center !important; /* 覆盖 Element 默认样式,居中显示 */
|
|
|
+}
|
|
|
+
|
|
|
+.text-gray {
|
|
|
+ color: #666;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
</style>
|