feat: 添加直播间推荐功能与视频上传优化

- 在 promotion.js 中新增 whetherStar 函数,用于更新直播间推荐状态。
- 在 goodsOperationSec.vue 中优化视频上传组件的样式与逻辑,增加视频删除功能。
- 在 live.vue 中集成 whetherStar 函数,优化直播间推荐状态切换逻辑。
This commit is contained in:
田香琪
2026-07-09 10:49:55 +08:00
parent fb2a9e7a9f
commit ecf11ae2d2
3 changed files with 67 additions and 26 deletions

View File

@@ -6,6 +6,12 @@ import { getRequest, postRequest, postRequestWithNoForm, putRequest, deleteReque
export const getLiveList = (params) => { export const getLiveList = (params) => {
return getRequest('/broadcast/studio', params) return getRequest('/broadcast/studio', params)
} }
// 是否推荐直播间
export const whetherStar = (params) => {
return putRequest(`/broadcast/studio/recommend/${params.id}`, params)
}
// 添加直播间 // 添加直播间
export const addLive = (params) => { export const addLive = (params) => {
return postRequest('/broadcast/studio', params) return postRequest('/broadcast/studio', params)

View File

@@ -164,11 +164,10 @@
</el-form-item> </el-form-item>
<el-form-item class="form-item-view-el" label="主图视频" prop="goodsVideo"> <el-form-item class="form-item-view-el" label="主图视频" prop="goodsVideo">
<div class="goods-video"> <div class="goods-video">
<div v-if="baseInfoForm.goodsVideo"> <div v-if="baseInfoForm.goodsVideo" class="goods-video-preview">
<div>
<video :src="baseInfoForm.goodsVideo" class="video" controls style="max-width: 300px;" /> <video :src="baseInfoForm.goodsVideo" class="video" controls style="max-width: 300px;" />
</div> </div>
</div> <div class="goods-video-actions">
<el-upload <el-upload
:action="uploadFileUrl" :action="uploadFileUrl"
:headers="{ ...accessToken }" :headers="{ ...accessToken }"
@@ -177,12 +176,15 @@
:before-upload="beforeVideoUpload" :before-upload="beforeVideoUpload"
:on-success="handleSuccessGoodsVideo" :on-success="handleSuccessGoodsVideo"
:on-error="() => { loadingVideo = false }" :on-error="() => { loadingVideo = false }"
style="margin-left: 10px; display: inline-block"
> >
<el-button :loading="loadingVideo" type="primary" link> <el-button :loading="loadingVideo" type="primary" link>
{{ loadingVideo ? "正在上传..." : `${baseInfoForm.goodsVideo ? "" : ""}上传视频` }} {{ loadingVideo ? "正在上传..." : `${baseInfoForm.goodsVideo ? "" : ""}上传视频` }}
</el-button> </el-button>
</el-upload> </el-upload>
<el-button v-if="baseInfoForm.goodsVideo" link type="danger" @click="handleRemoveGoodsVideo">
删除
</el-button>
</div>
</div> </div>
</el-form-item> </el-form-item>
<div class="layout" style="width: 100%"> <div class="layout" style="width: 100%">
@@ -1074,6 +1076,15 @@ export default {
file.url = file.response.result; file.url = file.response.result;
this.baseInfoForm.goodsVideo = file.url; this.baseInfoForm.goodsVideo = file.url;
} }
this.loadingVideo = false;
},
handleRemoveGoodsVideo() {
this.baseInfoForm.goodsVideo = "";
this.showGoodsVideo = false;
if (this.goodsVideo && typeof this.goodsVideo.destroy === "function") {
this.goodsVideo.destroy();
}
this.goodsVideo = "";
}, },
// 图片大小不正确 // 图片大小不正确
handleMaxSize(size = 2) { handleMaxSize(size = 2) {
@@ -2361,9 +2372,23 @@ export default {
} }
.goods-video { .goods-video {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.goods-video-preview {
display: flex;
align-items: center; align-items: center;
} }
.goods-video-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
}
.mb-10 { .mb-10 {
margin-bottom: 10px; margin-bottom: 10px;
} }

View File

@@ -53,8 +53,8 @@
<div class="mt_10 page" style="display: flex; justify-content: flex-end; margin: 20px 0"> <div class="mt_10 page" style="display: flex; justify-content: flex-end; margin: 20px 0">
<el-pagination <el-pagination
v-model:current-page="searchForm.pageNumber" :current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize" :page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]" :page-sizes="[20, 50, 100]"
:total="total" :total="total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@@ -68,7 +68,7 @@
</template> </template>
<script> <script>
import { getLiveList } from "@/api/promotion.js"; import { getLiveList, whetherStar } from "@/api/promotion.js";
export default { export default {
data() { data() {
return { return {
@@ -100,14 +100,24 @@ export default {
}, },
methods: { methods: {
async star(val, index) { async star(val, index) {
let switched = this.liveData[index].recommend; const switched = this.liveData[index].recommend;
await whetherStar({ id: val.id, recommend: switched }); try {
const res = await whetherStar({ id: val.id, recommend: switched });
if (res.success) {
this.getStoreLives();
return;
}
this.liveData[index].recommend = !switched;
} catch (e) {
this.liveData[index].recommend = !switched;
}
},
changePageSize(val) {
this.searchForm.pageSize = val;
this.getStoreLives(); this.getStoreLives();
}, },
changePageSize() { changePageNumber(val) {
this.getStoreLives(); this.searchForm.pageNumber = val;
},
changePageNumber() {
this.getStoreLives(); this.getStoreLives();
}, },
async getStoreLives() { async getStoreLives() {