From 5f74a0711c0151a51493e596a614ad2f5ddbed6c Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 23 十月 2025 18:04:30 +0800
Subject: [PATCH] 分页问题
---
manager/src/views/video/VideoList.vue | 1146 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 1,124 insertions(+), 22 deletions(-)
diff --git a/manager/src/views/video/VideoList.vue b/manager/src/views/video/VideoList.vue
index b704db2..a25608f 100644
--- a/manager/src/views/video/VideoList.vue
+++ b/manager/src/views/video/VideoList.vue
@@ -29,7 +29,7 @@
@on-change="handleSearch"
style="width: 160px"
>
- <Option v-for="tag in tagList" :key="tag.id" :value="tag.id">{{tag.tagName}}</Option>
+ <Option v-for="tag in tagList" :key="tag.id" :value="tag.id">{{ tag.tagName }}</Option>
</Select>
</Form-item>
<Form-item label="瑙嗛鐘舵��" prop="status">
@@ -51,28 +51,228 @@
type="primary"
icon="ios-search"
class="search-btn"
- >鎼滅储</Button
+ >鎼滅储
+ </Button
>
</Form>
+ <Row class="operation padding-row">
+ <Button @click="recreateEsIndex" type="primary">閲嶆柊鏋勫缓es绱㈠紩</Button>
+ <Button @click="openUploadVideo" type="primary" icon="md-arrow-up"> 涓婁紶瑙嗛</Button>
+ </Row>
+
+ <Modal
+ v-model="upLoadVideoShow"
+ :title="uploadVideoForm.id?'缂栬緫涓婚〉瑙嗛':'涓婁紶涓婚〉瑙嗛'"
+ width="800"
+ :mask-closable="false"
+ >
+ <Form
+ ref="searchForm"
+ @keydown.enter.native="handleSearch"
+ :model="uploadVideoForm"
+ inline
+ >
+ <Row :gutter="24" class="operation padding-row" style="width: 100%;">
+ <Col span="12">
+ <FormItem label="鏍囬:" :label-width="80">
+ <Input v-model="uploadVideoForm.title" placeholder="璇疯緭鍏ユ爣棰�"></Input>
+ </FormItem>
+ </Col>
+ <Col span="12">
+ <FormItem label="涓婁紶绫诲瀷:" :label-width="80" prpo="videoContentType">
+ <Select v-model="uploadVideoForm.videoContentType" style="width:200px">
+ <Option value="img">鍥剧墖</Option>
+ <Option value="video">瑙嗛</Option>
+ </Select>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row>
+ <Col span="12" v-if="!uploadVideoForm.videoFileKey&&showVideoFlag">
+ <FormItem :label-width="80" label="涓婁紶瑙嗛" prop="videoFileKey">
+ <Upload
+ :multiple="true"
+ :before-upload="upLoadVideo"
+ accept="video/*"
+ action=""
+ >
+ <Button icon="ios-cloud-upload-outline">閫夋嫨瑙嗛</Button>
+ </Upload>
+ <Progress :percent="videoProgress" v-if="showVideoProgress" status="active"/>
+ </FormItem>
+ </Col>
+ <Col span="12" v-else-if="uploadVideoForm.videoFileKey">
+ <FormItem :labelWidth="80" label="瑙嗛">
+ <video style="width: 150px;height: 150px"
+ controls
+ @loadedmetadata="getVideoDuration"
+ :poster="uploadVideoForm.showCoverUrl"
+ :autoplay="false"
+ id="remoteVideo" :src="uploadVideoForm.showVideoUrl"
+ ref="videoInfo"
+ ></video>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row>
+ <Col span="24" v-show="uploadVideoForm.videoFileKey && !uploadVideoForm.coverUrl">
+ <FormItem label="涓婁紶灏侀潰" prop="coverUrl" :label-width="80">
+ <Upload
+ :multiple="true"
+ :before-upload="upLoadImagCover"
+ accept="image/*"
+ action=""
+ >
+ <Button icon="ios-cloud-upload-outline">閫夋嫨灏侀潰</Button>
+ </Upload>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row :gutter="24">
+ <Col span="12" v-if="uploadVideoForm.videoFileKey">
+ <FormItem :labelWidth="80">
+ <Button @click="reloadVideo" type="primary" >閲嶆柊涓婁紶瑙嗛</Button>
+ <Button type="primary" @click="clearCoverImage" v-show="uploadVideoForm.coverUrl" style="margin-left: 20px">閲嶆柊涓婁紶灏侀潰</Button>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row :gutter="24" v-if="uploadVideoForm.videoImgs&&showImgFlag">
+ <Col span="12">
+ <FormItem :labelWidth="80" label="涓婁紶鍥剧墖">
+ <template>
+ <div class="demo-upload-list" v-for="item in uploadVideoForm.showListImages" :key="item">
+ <template>
+ <img :src="item">
+ <div class="demo-upload-list-cover">
+ <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
+ <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
+ </div>
+ </template>
+ <!-- <template v-else>-->
+ <!-- <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>-->
+ <!-- </template>-->
+ </div>
+ <Upload
+ ref="upload"
+ :show-upload-list="false"
+ :format="['jpg','jpeg','png']"
+ :max-size="2048"
+ :before-upload="upLoadImg"
+ multiple
+ type="drag"
+ action="-"
+ style="display: inline-block;width:58px;">
+ <div style="width: 58px;height:58px;line-height: 58px;">
+ <Icon type="ios-camera" size="20"></Icon>
+ </div>
+ </Upload>
+ <Modal title="鍥剧墖棰勮" v-model="visible">
+ <img :src="imgName" v-if="visible" style="width: 100%">
+ </Modal>
+ </template>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row :gutter="24">
+ <Col span="24">
+ <FormItem label="鏍囩" :label-width="80" style="width: 100%">
+ <Select v-model="chooseTag" filterable multiple allow-create @on-create="createVideoTag">
+ <Option v-for="item in videoTagList" :value="item.tagName" :key="item.id">{{ item.tagName }}</Option>
+ </Select>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row :gutter="24">
+ <Col span="24">
+ <FormItem label="閫変腑鍟嗗搧" :label-width="80">
+ </FormItem>
+ </Col>
+ </Row>
+ <Row :gutter="24">
+ <Col span="12">
+ <FormItem label="鍟嗗搧鍒楄〃" :label-width="80">
+ <Input v-model="searchGoodsForm.keyword" style="width:200px" @on-change="searchGoodsList"></Input>
+ <div style="height: 400px;overflow: auto;">
+ <div v-for="item in goodsData" :key="item.id" style="display: flex;
+ align-items: center;justify-content: flex-start;border: 1px solid gray;margin-top: 10px;
+ padding: 10px;border-radius: 20px" @click="chooseGoods(item.id)">
+ <div>
+ <img :src="endpoint+'/'+item.thumbnail" style="width: 80px;height: 80px">
+ </div>
+ <div style="display: flex;flex-direction: column;margin-left: 20px">
+ <div style="font-size: 1.5em;font-weight: bold">{{ item.goodsName }}</div>
+ <div style="color: #ff6f6f">
+ 锟{ item.price }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <Page
+ :current="searchGoodsForm.pageNumber"
+ :total="goodsTotal"
+ :page-size="searchGoodsForm.pageSize"
+ @on-change="goodsChangePage"
+ @on-page-size-change="goodsChangePageSize"
+ :page-size-opts="[10, 20, 50]"
+ size="small"
+ show-total
+ ></Page>
+ </FormItem>
+ </Col>
+ <Col span="12">
+ <FormItem label="閫変腑鍟嗗搧" :label-width="80">
+ <div style="height: 400px;overflow: auto;">
+ <div v-for="(item,index) in uploadVideoForm.goodsList" :key="item.id" style="display: flex;
+ align-items: center;justify-content: flex-start;border: 1px solid gray;margin-top: 10px;
+ padding: 10px;border-radius: 20px">
+ <div>
+ <img :src="item.thumbnail.includes('http') ? item.thumbnail : endpoint + '/' + item.thumbnail"
+ style="width: 80px;height: 80px">
+ </div>
+ <div style="display: flex;flex-direction: column;margin-left: 20px">
+ <div style="font-size: 1.5em;font-weight: bold">{{ item.goodsName }}</div>
+ <div style="color: #ff6f6f;display: flex;align-content: center;justify-content: flex-start">
+ <div> 锟{ item.price }}</div>
+ <div style="margin-left: 10px">
+ <InputNumber v-model="item.goodsNum" :min="0" :max="99" controls-outside
+ @on-change="changeGoodsNum(item.goodsSkuId,index,item.goodsNum)"
+ style="vertical-align: center;width: 100px"></InputNumber>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </FormItem>
+ </Col>
+
+ </Row>
+
+ </Form>
+ <div slot="footer">
+ <Button type="text" @click="closeVideoUpload">鍏抽棴</Button>
+ <Button type="primary" @click="submitVideoUpload">纭</Button>
+ </div>
+ </Modal>
<Modal
v-model="playVideoShow"
:title="playVideoTitle"
width="800"
:mask-closable="false"
+ @on-cancel="playVideoClose"
>
<div class="video-warp">
<video :src="playVideoUrl" autoplay controls style="width: 768px;height: 432px"/>
</div>
<div slot="footer">
- <Button type="text" @click="playVideoClose">鍏抽棴</Button>
+ <Button type="text" @click="playVideoClose">鍏抽棴1</Button>
</div>
</Modal>
<Modal
v-model="auditingShow"
title="瑙嗛瀹℃牳"
- width="800"
+ width="1200"
:loading="auditingLoading"
:mask-closable="false"
>
@@ -83,17 +283,70 @@
:rules="auditingRule"
>
<Form-item label="鏍囬锛�">
- <div>{{detail.title}}</div>
+ <div>{{ detail.title }}</div>
</Form-item>
<Form-item label="鏍囩锛�">
<div style="display: flex;flex-wrap: wrap">
<div v-for="(tag, index) in detail.tagList" :key="'tag' + index" style="margin-right: 5px">
- <Tag color="red">{{tag.tagName}}</Tag>
+ <Tag color="red">{{ tag.tagName }}</Tag>
</div>
</div>
</Form-item>
- <Form-item class="video-warp" :label-width="0">
- <video :src="detail.videoUrl" autoplay controls style="width: 768px;height: 432px"/>
+ <Form-item v-if="detail.videoContentType === 'video'" label="瑙嗛鏃堕暱锛�" :label-width="72">
+ <div>{{ formatSeconds(detail.videoDuration) }}</div>
+ </Form-item>
+ <Form-item v-if="detail.videoContentType === 'img'" label="鍥剧墖寮犳暟锛�" :label-width="72">
+ <div>{{ detail.imgs.length }}</div>
+ </Form-item>
+ <Form-item v-if="detail.videoContentType === 'video'" class="video-warp" :label-width="0">
+ <Row>
+ <Col span="11">
+ <video :src="detail.videoUrl" autoplay controls style="width: 500px;height: 300px"/>
+ </Col>
+ <Col span="13" style="max-height: 300px;overflow-y: scroll">
+ <Row v-for="goods in detail.goodsList" :key="goods.goodsId" style="width: 100%">
+ <Row style="width:100%;align-items: center">
+ <Col span="6">
+ <img :src="goods.thumbnail" style="width: 100px;height: 100px"/>
+ </Col>
+ <Col span="10">
+ <p>鍟嗗搧鍚嶇О: {{ goods.goodsName }}</p>
+ </Col>
+ <Col span="4">
+ <p>鍟嗗搧鍗曚环: 锟{ goods.price }}</p>
+ </Col>
+ <Col span="4">
+ <p>鍟嗗搧鏁伴噺: {{ goods.goodsNum }}</p>
+ </Col>
+ </Row>
+ </Row>
+ </Col>
+ </Row>
+
+ </Form-item>
+ <Form-item v-if="detail.videoContentType === 'img'" :label-width="0">
+ <div style="display: flex;flex-direction: row;flex-wrap: wrap">
+ <div v-for="img in detail.imgs" :key="img" class="img-warp">
+ <img :src="img" class="image">
+ </div>
+ <Row v-for="goods in detail.goodsList" :key="goods.goodsId" style="width: 100%">
+ <Row style="width:100%;align-items: center; padding: 5px 10px">
+ <Col span="6">
+ <img :src="goods.thumbnail" style="width: 100px;height: 100px"/>
+ </Col>
+ <Col span="10">
+ <p>鍟嗗搧鍚嶇О: {{ goods.goodsName }}</p>
+ </Col>
+ <Col span="4">
+ <p>鍟嗗搧鍗曚环: 锟{ goods.price }}</p>
+ </Col>
+ <Col span="4">
+ <p>鍟嗗搧鏁伴噺: {{ goods.goodsNum }}</p>
+ </Col>
+ </Row>
+ </Row>
+ </div>
+
</Form-item>
<Form-item label="瀹℃牳缁撴灉锛�" :label-width="100" prop="result">
<RadioGroup v-model="auditingForm.result">
@@ -124,7 +377,7 @@
>
<Form :model="videoDownForm" :rules="videoDownRule" ref="videoDownForm">
<FormItem label="涓嬫灦鍘熷洜锛�" :labelWidth="100" prop="reason">
- <editor ref="editor" @input="getReason" />
+ <editor ref="editor" @input="getReason"/>
</FormItem>
</Form>
<div slot="footer">
@@ -145,25 +398,145 @@
>
<template slot-scope="{ row, index }" slot="tagList">
<div v-for="(tag, index) in row.tagList" :key="'tag' + index" style="margin-top: 5px">
- <Tag color="red">{{tag.tagName}}</Tag>
+ <Tag color="red">{{ tag.tagName }}</Tag>
</div>
</template>
<template slot-scope="{ row, index }" slot="videoFileKey">
- <div class="play-text" @click="playVideo(row.videoFileKey, row.title)">鐐瑰嚮鎾斁</div>
+ <div v-if="row.videoContentType === 'video'" class="play-text"
+ @click="playVideo(row.videoFileKey, row.title)">鐐瑰嚮鎾斁
+ </div>
+ </template>
+ <template slot-scope="{ row, index }" slot="videoDuration">
+ <div>{{ formatSeconds(row.videoDuration) }}</div>
</template>
<template slot-scope="{ row, index }" slot="recommend">
<i-switch v-model="row.recommend" :before-change="() => handleBeforeChange(row)" true-color="#13ce66"/>
</template>
<template slot-scope="{ row, index }" slot="status">
- {{transStatus(row.status)}}
+ {{ transStatus(row.status) }}
</template>
<template slot-scope="{ row, index }" slot="action">
- <Button type="primary" size="small" style="margin-right: 5px" v-if="row.status === '99'" @click="openAuditing(row)">瀹℃牳</Button>
- <Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'" @click="openVideoDown(row)">涓嬫灦</Button>
- <Button type="success" size="small" style="margin-right: 5px" v-else-if="row.status === '0'" @click="videoUp(row)">涓婃灦</Button>
+ <Button type="primary" size="small" style="margin-right: 5px" v-if="row.status === '99'"
+ @click="openAuditing(row)">瀹℃牳
+ </Button>
+ <Button type="primary" size="small" style="margin-right: 5px"
+ @click="editVideo(row)">缂栬緫
+ </Button>
+ <Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'"
+ @click="openVideoDown(row)">涓嬫灦
+ </Button>
+ <Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'"
+ @click="generalQrCode(row)">鐢熸垚浜岀淮鐮�
+ </Button>
+ <Button type="success" size="small" style="margin-right: 5px" v-else-if="row.status === '0'"
+ @click="videoUp(row)">涓婃灦
+ </Button>
+ <Button type="error" size="small" style="margin-right: 5px"
+ @click="openComment(row)">
+ 鏌ョ湅璇勮
+ </Button>
</template>
</Table>
+ <Modal
+ v-model="showVideoComment"
+ title="瑙嗛璇勮"
+ width="1000"
+ :mask-closable="false">
+ <Form :model="commentForm" ref="commentForm">
+ <Row type="flex" :gutter="16">
+ <Col>
+ <FormItem :label-width="70" label="鍐呭锛�" prop="commentContent">
+ <Input style="width: 120px"
+ v-model="commentForm.commentContent" placeholder="璇疯緭鍏ュ唴瀹�"
+ @on-clear="commentHandleSearch"
+ @on-change="commentHandleSearch"></Input>
+ </FormItem>
+ </Col>
+ <Col>
+ <FormItem :label-width="70" label="鐢ㄦ埛鏄电О锛�" prop="nickName">
+ <Input style="width: 120px" v-model="commentForm.nickName" placeholder="璇疯緭鍏ュ唴瀹�"
+ @on-clear="commentHandleSearch"
+ @on-change="commentHandleSearch"></Input>
+ </FormItem>
+ </Col>
+ <Col>
+ <FormItem :label-width="70" label="寮�濮嬫椂闂达細" prop="startTime">
+ <DatePicker
+ v-model="commentForm.startTime"
+ type="datetime"
+ placeholder="閫夋嫨寮�濮嬫椂闂�"
+ style="width: 120px"
+ @on-change="commentHandleSearch($event)"
+ @on-clear="commentHandleSearch"
+ ></DatePicker>
+ </FormItem>
+ </Col>
+ <Col>
+ <FormItem :label-width="70" label="缁撴潫鏃堕棿锛�" prop="endTime">
+ <DatePicker
+ v-model="commentForm.endTime"
+ type="datetime"
+ placeholder="閫夋嫨缁撴潫鏃堕棿"
+ style="width: 120px"
+ @on-change="commentHandleSearch($event)"
+ @on-clear="commentHandleSearch"
+ ></DatePicker>
+ </FormItem>
+ </Col>
+ </Row>
+ </Form>
+ <div slot="footer">
+ <Button type="text" @click="closeComment">鍏抽棴</Button>
+ </div>
+ <Table
+ :loading="commentLoading"
+ border
+ :columns="commentColumns"
+ :data="commentData"
+ ref="commentTable"
+ sortable="custom"
+ >
+ <template slot-scope="{ row, index }" slot="action">
+ <Button type="error" size="small"
+ @click="removeComment(row)">鍒犻櫎</Button>
+ </template>
+ </Table>
+ <Row type="flex" justify="end" class="page-footer">
+ <Page
+ :current="commentForm.pageNumber"
+ :total="commentTotal"
+ :page-size="commentForm.pageSize"
+ @on-change="commentChangePage"
+ @on-page-size-change="commentChangePageSize"
+ :page-size-opts="[10, 20, 50]"
+ size="small"
+ show-total
+ show-elevator
+ show-sizer
+ ></Page>
+ </Row>
+
+ </Modal>
+
+ <Modal
+ v-model="showGeneralQrCode"
+ title="浜岀淮鐮�"
+ width="800"
+ :mask-closable="false"
+ >
+ <vue-qr
+ :text="QRCodeUrl"
+ :margin="0"
+ colorDark="#000"
+ colorLight="#fff"
+ :size="150"
+ ></vue-qr>
+ <div slot="footer">
+ <Button type="text" @click="closeGeneralQrCode">鍏抽棴</Button>
+ <!-- <Button type="primary" @click="generalQrCode">纭</Button>-->
+ </div>
+ </Modal>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
@@ -183,15 +556,152 @@
</template>
<script>
-import {getVideos, recommendSet, getVideoById, auditingVideo, up, down} from "@/api/video";
-import {getVideoTagList} from "@/api/videoTag";
-import {getFilePreview} from "@/api/file";
+import {
+ getVideos,
+ recommendSet,
+ getVideoById,
+ auditingVideo,
+ up,
+ down,
+ recreateIndex,
+ publish,
+ updatePublish,
+ getCommentPage,
+ removeById
+} from "@/api/video";
+import {getVideoTagList, recommend, videoGoodsEsPage} from "@/api/videoTag";
+import {addPrizeNum} from "@/api/activity-prize";
+import {getFilePreview, getSts} from "@/api/file";
import Editor from '@/components/editor/index.vue'
+import GoodsExpandRow from '@/views/video/GoodsExpandRow'
+import COS from "cos-js-sdk-v5";
+import {getFileKey} from "@/utils/file";
+import vuedraggable from "vuedraggable";
+import vueQr from "vue-qr";
+import uploadImage from "../../components/editor/upload-image.vue";
+
export default {
name: "VideoList",
- components: {Editor},
+ computed: {
+ uploadImage() {
+ return uploadImage
+ }
+ },
+ components: {vuedraggable, Editor, GoodsExpandRow, "vue-qr": vueQr},
+ watch: {
+ 'uploadVideoForm.videoContentType'(newValue, oldValue) {
+ if (newValue === 'video') {
+ this.showVideoFlag = true;
+ this.showImgFlag = false;
+ this.uploadVideoForm.videoImgs = []
+ this.uploadVideoForm.showListImages = []
+ } else {
+ this.uploadVideoForm.videoFileKey = '';
+ this.showVideoFlag = false;
+ this.showImgFlag = true;
+ this.videoProgress = 0;
+ }
+ },
+ chooseTag(newValue, oldValue) {
+ console.log('瑙﹀彂鏂板�煎彉鍖�',newValue);
+ this.uploadVideoForm.tags = newValue.map(item => {
+ const findTag = this.videoTagList.find(tagItem => {
+ return tagItem.tagName === item
+ })
+ if (findTag) {
+ return {
+ id: findTag.id,
+ tagName: findTag.tagName
+ }
+ } else {
+ return {
+ id: "",
+ tagName: item,
+ }
+ }
+ })
+ console.log('------------------------------this.uploadVideoForm.tags>', this.uploadVideoForm.tags)
+ }
+ },
data() {
return {
+ commentTotal:0,
+ commentForm:{
+ commentContent:'',
+ videoId:'',
+ nikeName:'',
+ startTime:'',
+ endTime:'',
+ pageNumber:1,
+ pageSize:10
+ },
+ commentColumns:[
+ // {
+ // type: 'selection',
+ // width: 60,
+ // align: 'center'
+ // },
+ {
+ title: "鐢ㄦ埛鍚�",
+ key: "userNickname",
+ minWidth: 240,
+ tooltip: true,
+ },{
+ title: "鍐呭",
+ key: "commentContent",
+ minWidth: 240,
+ tooltip: true,
+ },{
+ title: "璇勮鏃堕棿",
+ key: "createTime",
+ minWidth: 240,
+ tooltip: true,
+ },{
+ title: "鎿嶄綔",
+ key: "action",
+ slot: "action",
+ align: "center",
+ width: 200,
+ fixed: "right"
+ }
+ ],
+ commentData:[],
+ showVideoComment:false,
+ commentLoading:false,
+
+ // https://myk.9village.cn/scanpage/recommend?shareType=videoRecommend&videoId=1948284811844190209
+ baseQRCodeUrl: this.QRcodeBaseUrl + '/scanpage/recommend',
+ QRCodeUrl: '',
+ showGeneralQrCode: false,
+ endpoint: '',
+ searchGoods: '',
+ videoTagList: [],
+ chooseTag: [],
+ videoTag: '',
+ visible: false,
+ imgName: '',
+ showVideoFlag: true,
+ showImgFlag: false,
+ showVideoProgress: false,
+ videoProgress: 0,
+ upLoadVideoShow: false,
+ uploadVideoForm: {
+ coverUrl:null,
+ showCoverUrl:null,
+ id: '',
+ title: '',
+ cover: "",
+ videoFileKey: "",
+ videoDuration: 0,
+ videoFit: "cover",
+ videoContentType: 'video',
+ videoImgs: [],
+ showListImages: [],
+ tags: [],
+ fileInfo: {},
+ goodsList: []
+
+ },
videoDownForm: {
id: '',
reason: ''
@@ -252,12 +762,30 @@
tagList: [], // 鏍囩
status: '99'
},
+ searchGoodsForm: {
+ // 鎼滅储妗嗗垵濮嬪寲瀵硅薄
+ pageNumber: 1, // 褰撳墠椤垫暟
+ pageSize: 10, // 椤甸潰澶у皬
+ keyword: '',
+ searchFromSelfStore: false
+ },
tagList: [], // 鏍囩鍒楄〃
columns: [
{
type: 'selection',
width: 60,
align: 'center'
+ },
+ {
+ width: 60,
+ type: 'expand',
+ render: (h, params) => {
+ return h(GoodsExpandRow, {
+ props: {
+ goodsList: params.row.goodsList
+ }
+ })
+ }
},
{
title: "鏍囬",
@@ -282,6 +810,13 @@
key: "videoFileKey",
width: 170,
slot: "videoFileKey"
+ },
+ {
+ title: "鏃堕暱",
+ key: "videoDuration",
+ width: 80,
+ align: 'center',
+ slot: "videoDuration",
},
{
title: "鎾斁閲�",
@@ -311,7 +846,7 @@
{
title: "鏉冮噸",
key: "weight",
- width: 170,
+ width: 80,
},
{
title: "鐘舵��",
@@ -326,10 +861,13 @@
slot: "action",
align: "center",
width: 200,
+ fixed: "right"
},
],
+ goodsData: [],
data: [], // 琛ㄥ崟鏁版嵁
total: 0, // 琛ㄥ崟鏁版嵁鎬绘暟
+ goodsTotal: 0, // 琛ㄥ崟鏁版嵁鎬绘暟
selectCount: 0, // 宸查�夋暟閲�
selectList: [], // 宸查�夋暟鎹垪琛�
}
@@ -339,6 +877,475 @@
this.getTags('')
},
methods: {
+ closeComment(){
+ this.showVideoComment = false
+ },
+ commentChangePage(page) {
+ this.commentForm.pageNumber = page
+ this.commentPage()
+ },
+
+ // 鏀瑰彉鎶ュ悕浜哄憳姣忛〉鏉℃暟
+ commentChangePageSize(pageSize) {
+ this.commentForm.pageNumber = 1
+ this.commentForm.pageSize = pageSize
+ this.commentPage()
+ },
+ commentPage(){
+ //杞崲涓哄瓧绗︿覆
+ let startTime = this.formatDate(this.commentForm.startTime);
+ let endTime = this.formatDate(this.commentForm.endTime);
+ let from = {...this.commentForm};
+ from.startTime = startTime;
+ from.endTime = endTime;
+ this.commentLoading = true;
+ getCommentPage(from).then(res =>{
+ this.commentLoading = false;
+ if (res.code === 200){
+ this.commentData = res.data;
+ this.commentData.forEach(item =>{
+ item.createTime = this.formatDate(item.createTime);
+ })
+
+ }
+ })
+ },
+ commentHandleSearch(){
+ this.commentPage();
+ },
+ removeComment(row){
+ removeById(row.id).then(res=>{
+ if (res.code === 200){
+ this.$Message.success(res.msg);
+ }else {
+ this.$Message.error(res.msg);
+ }
+ this.commentPage();
+ })
+
+ },
+ formatDate(date, format = 'yyyy-MM-dd HH:mm:ss') {
+ if (!date) return '';
+
+ const d = new Date(date);
+ if (isNaN(d.getTime())) return date; // 鏃犳晥鏃ユ湡鐩存帴杩斿洖鍘熷��
+
+ const padZero = (num) => (num < 10 ? `0${num}` : num.toString());
+
+ return format
+ .replace('yyyy', d.getFullYear())
+ .replace('MM', padZero(d.getMonth() + 1))
+ .replace('dd', padZero(d.getDate()))
+ .replace('HH', padZero(d.getHours()))
+ .replace('mm', padZero(d.getMinutes()))
+ .replace('ss', padZero(d.getSeconds()));
+ },
+ commentShowSelect(){
+ // this.selectList = selection.map(item => item.id)
+ // this.selectCount = selection.length
+ },
+ openComment(row){
+ this.$refs.commentForm.resetFields();
+ console.log(row)
+ this.commentForm.videoId = row.id;
+ this.showVideoComment = true;
+ this.commentPage();
+ },
+ async editVideo(row) {
+ // this.uploadVideoForm = {};
+ // this.uploadVideoForm = row;
+ // this.showUploadVideoShow = true;
+ this.videoTagList = []
+ await recommend({
+ searchType: "HOT"
+ }).then(res => {
+ this.videoTagList = res.data;
+ })
+ this.upLoadVideoShow = true;
+ console.log('--------------------->',row.tagList)
+ if (row.tagList){
+ this.chooseTag = row.tagList.map(item => {
+ return item.tagName
+ })
+ }
+ console.log('閫変腑鍒楄〃---銆�',row.goodsList)
+ if (row.goodsList){
+ row.goodsList.forEach(item => {
+ item.goodsSkuId = item.id
+ })
+ }
+
+ this.uploadVideoForm = {
+ id: '',
+ title: '',
+ cover: "",
+ videoFileKey: "",
+ videoDuration: 0,
+ videoFit: "cover",
+ videoContentType: 'video',
+ videoImgs: [],
+ showListImages: [],
+ tags: [],
+ fileInfo: {},
+ goodsList: []
+ }
+
+
+ if (row.tagList){
+ // 閬嶅巻宸查�夋嫨鐨勬爣绛�
+ row.tagList.forEach(tag => {
+ // 妫�鏌ユ爣绛炬槸鍚﹀凡瀛樺湪浜巚ideoTagList涓�
+ const exists = this.videoTagList.some(item => item.tagName === tag.tagName);
+ // 濡傛灉涓嶅瓨鍦紝鍒欐坊鍔犲埌閫夐」鍒楄〃
+ if (!exists) {
+ this.videoTagList.push({
+ id: tag.id, // 鐢熸垚涓存椂ID
+ tagName: tag.tagName
+ });
+ }
+ });
+ }
+
+ this.uploadVideoForm = row
+ console.log("鎵撳嵃鍊�",this.uploadVideoForm)
+ this.uploadVideoForm.fileInfo= {};
+ this.uploadVideoForm.videoImgs = JSON.parse(this.uploadVideoForm.videoImgs)
+ const sts = await getSts();
+ if (this.uploadVideoForm.videoContentType === 'video') {
+ this.uploadVideoForm.showVideoUrl = sts.data.endpoint + '/' + this.uploadVideoForm.videoFileKey
+
+ if (this.uploadVideoForm.coverUrl !== '' && this.uploadVideoForm.coverUrl != null) {
+ this.uploadVideoForm.showCoverUrl = this.uploadVideoForm.coverUrl
+ }
+ } else if (this.uploadVideoForm.videoContentType === 'img') {
+ this.uploadVideoForm.showListImages = this.uploadVideoForm.videoImgs.map(item => {
+ return sts.data.endpoint + '/' + item
+ })
+ }
+ console.log("澶勭悊杩囧悗",this.uploadVideoForm)
+
+ this.searchGoodsList();
+ },
+ closeGeneralQrCode() {
+ this.showGeneralQrCode = false;
+ this.QRCodeUrl = '';
+ },
+ generalQrCode(row) {
+ this.showGeneralQrCode = true
+ console.log('-------------------->', row);
+ this.QRCodeUrl = this.baseQRCodeUrl + '?shareType=videoRecommend' + '&videoId=' + row.id;
+ console.log(this.QRCodeUrl)
+ },
+ //todo 淇濈暀鍚庣画鍙兘浼氫娇鐢�
+ changeGoodsNum(id, index, goodsNum) {
+ console.log('-------------------->', id, index, goodsNum)
+ },
+ chooseGoods(id) {
+ const goods = this.goodsData.find(item => {
+ return item.id === id;
+ })
+ const existingItem = this.uploadVideoForm.goodsList.find(item => item.goodsSkuId === id);
+ if (existingItem) {
+ existingItem.goodsNum = existingItem.goodsNum + 1;
+ } else {
+ this.uploadVideoForm.goodsList.push({
+ goodsId: goods.goodsId,
+ goodsSkuId: goods.id,
+ goodsNum: 1,
+ goodsName: goods.goodsName,
+ thumbnail: goods.thumbnail,
+ price: goods.price,
+
+ })
+ }
+ // this.uploadVideoForm.goodsList.forEach(item => {
+ // if (item.goodsSkuId === id) {
+ // item.goodsNum = item.goodsNum+1;
+ // }
+ // })
+ console.log('------------------------>', this.uploadVideoForm.goodsList)
+
+
+ },
+ searchGoodsList() {
+ this.searchGoodsForm.pageNumber = 1;
+ this.getGoodsDataList();
+ },
+ closeVideoUpload() {
+ this.upLoadVideoShow = false;
+ },
+ submitVideoUpload() {
+ // if (this.uploadVideoForm.coverUrl === null || this.uploadVideoForm.coverUrl === undefined) {
+ // this.$Message.error('灏侀潰涓嶈兘涓虹┖');
+ // return;
+ // }
+ this.uploadVideoForm.goodsList = this.uploadVideoForm.goodsList.filter(item => {
+ return item.goodsNum > 0;
+ })
+ if (!this.uploadVideoForm.title) {
+ this.$Message.error('鏍囬涓嶈兘涓虹┖');
+ return;
+ }
+ //琛ㄥ崟鏍￠獙
+ if (this.uploadVideoForm.videoContentType === 'video') {
+ if (!this.uploadVideoForm.videoFileKey) {
+ this.$Message.error('瑙嗛涓嶈兘涓虹┖');
+ return;
+ }
+ }
+ if (this.uploadVideoForm.videoContentType === 'img') {
+ if (this.uploadVideoForm.videoImgs < 1) {
+ this.$Message.error('鍥剧墖涓嶈兘涓虹┖');
+ return;
+ }
+ }
+ console.log('鎻愪氦琛ㄥ崟--------------->', this.uploadVideoForm)
+ if (this.uploadVideoForm.id) {
+ updatePublish(this.uploadVideoForm).then(response => {
+ if (response.code == 200) {
+ this.$Message.success("瑙嗛淇敼鎴愬姛");
+ this.upLoadVideoShow = false;
+ this.getDataList();
+ }
+ }).then(error => {
+ this.$Message.success(error);
+ })
+
+ } else {
+ publish(this.uploadVideoForm).then(response => {
+ if (response.code == 200) {
+ this.$Message.success("瑙嗛鍙戝竷鎴愬姛");
+ this.upLoadVideoShow = false;
+ this.getDataList();
+ }
+ }).then(error => {
+ this.$Message.success(error);
+ })
+ }
+
+ },
+ //todo 鍚庣画鍙兘浼氫娇鐢ㄩ鐣�
+ createVideoTag(e) {
+ console.log('------------>',e)
+ },
+ handleRemove(file) {
+ const fileList2 = this.uploadVideoForm.showListImages;
+ this.uploadVideoForm.videoImgs.splice(fileList2.indexOf(file), 1);
+ this.uploadVideoForm.showListImages.splice(fileList2.indexOf(file), 1);
+ },
+ handleView(name) {
+ this.imgName = name;
+ this.visible = true;
+ },
+ async upLoadImagCover(file) {
+ try {
+ // 鑾峰彇鏂囦欢涓婁紶涓存椂瀵嗛挜
+ const sts = await getSts();
+ const cos = new COS({
+ getAuthorization: async function (options, callback) {
+ callback({
+ TmpSecretId: sts.data.tmpSecretId,
+ TmpSecretKey: sts.data.tmpSecretKey,
+ SecurityToken: sts.data.sessionToken,
+ // 寤鸿杩斿洖鏈嶅姟鍣ㄦ椂闂翠綔涓虹鍚嶇殑寮�濮嬫椂闂达紝閬垮厤瀹㈡埛绔湰鍦版椂闂村亸宸繃澶у鑷寸鍚嶉敊璇�
+ StartTime: sts.data.stsStartTime, // 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000000
+ ExpiredTime: sts.data.stsEndTime,// 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000000
+ ScopeLimit: true, // 缁嗙矑搴︽帶鍒舵潈闄愰渶瑕佽涓� true锛屼細闄愬埗瀵嗛挜鍙湪鐩稿悓璇锋眰鏃堕噸澶嶄娇鐢�
+ });
+ }
+ })
+ const fileKey = getFileKey(file.name)
+ const upData = await cos.uploadFile({
+ Bucket: sts.data.bucket,
+ Region: sts.data.region,
+ Key: fileKey,
+ Body: file, // 瑕佷笂浼犵殑鏂囦欢瀵硅薄銆俢over
+ SliceSize: 1024 * 1024 * 5,
+ onProgress: function (progressData) {
+ console.log('涓婁紶杩涘害锛�', progressData);
+ },
+ });
+ this.$set(this.uploadVideoForm, 'coverUrl', fileKey);
+ this.$set(this.uploadVideoForm, 'showCoverUrl', `${sts.data.endpoint}/${fileKey}`);
+ this.uploadVideoForm.cover = fileKey;
+ if (this.$refs.videoInfo) {
+ this.$refs.videoInfo.poster = this.uploadVideoForm.showCoverUrl;
+ this.$refs.videoInfo.load(); // 閲嶆柊鍔犺浇瑙嗛
+ }
+ console.log(this.uploadVideoForm)
+
+ } catch (e) {
+ console.log("涓婁紶澶辫触", upData)
+ } finally {
+
+ }
+ return false;
+ },
+ clearCoverImage(){
+ this.$set(this.uploadVideoForm, 'coverUrl', '');
+ this.$set(this.uploadVideoForm, 'showCoverUrl', '');
+ this.$set(this.uploadVideoForm, 'temp', new Date().getTime());
+ },
+
+ async upLoadImg(file) {
+ if (this.uploadVideoForm.videoImgs >= 5) {
+ this.$Message.error("鍥剧墖涓婁紶涓嶈兘瓒呰繃5涓�");
+ return;
+ }
+ try {
+ // 鑾峰彇鏂囦欢涓婁紶涓存椂瀵嗛挜
+ const sts = await getSts();
+ const cos = new COS({
+ getAuthorization: async function (options, callback) {
+ callback({
+ TmpSecretId: sts.data.tmpSecretId,
+ TmpSecretKey: sts.data.tmpSecretKey,
+ SecurityToken: sts.data.sessionToken,
+ // 寤鸿杩斿洖鏈嶅姟鍣ㄦ椂闂翠綔涓虹鍚嶇殑寮�濮嬫椂闂达紝閬垮厤瀹㈡埛绔湰鍦版椂闂村亸宸繃澶у鑷寸鍚嶉敊璇�
+ StartTime: sts.data.stsStartTime, // 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000000
+ ExpiredTime: sts.data.stsEndTime,// 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000000
+ ScopeLimit: true, // 缁嗙矑搴︽帶鍒舵潈闄愰渶瑕佽涓� true锛屼細闄愬埗瀵嗛挜鍙湪鐩稿悓璇锋眰鏃堕噸澶嶄娇鐢�
+ });
+ }
+ })
+ const fileKey = getFileKey(file.name)
+ const upData = await cos.uploadFile({
+ Bucket: sts.data.bucket,
+ Region: sts.data.region,
+ Key: fileKey,
+ Body: file, // 瑕佷笂浼犵殑鏂囦欢瀵硅薄銆�
+ SliceSize: 1024 * 1024 * 5,
+ onProgress: function (progressData) {
+ console.log('涓婁紶杩涘害锛�', progressData);
+ },
+ });
+ console.log("涓婁紶鎴愬姛", upData)
+ this.$nextTick(() => {
+ this.uploadVideoForm.videoImgs.push(fileKey);
+ this.uploadVideoForm.showListImages.push(sts.data.endpoint + "/" + fileKey);
+ })
+
+ } catch (e) {
+ console.log("涓婁紶澶辫触", upData)
+ return false;
+ } finally {
+
+ }
+ return false;
+ },
+ reloadVideo() {
+ this.uploadVideoForm.videoFileKey = '';
+ this.uploadVideoForm.showVideoUrl = '';
+ },
+ calculateVideoFit(width, height) {
+ const videoRatio = width / height;
+ // 瑙勫垯2锛氱珫灞忚棰戯紙濡�9:16锛�
+ if (videoRatio < 0.8) return 'cover';
+ return 'contain';
+ },
+ getVideoDuration(e) {
+ const duration = this.$refs.videoInfo.duration;
+ const videoWidth = this.$refs.videoInfo.videoWidth;
+ const videoHeight = this.$refs.videoInfo.videoHeight;
+ // 鏍规嵁瀹介珮姣旈�夋嫨瑙嗛濉厖妯″紡
+ const fitType = this.calculateVideoFit(videoWidth, videoHeight)
+ this.uploadVideoForm.videoFit = fitType
+ console.log('------瑙嗛淇℃伅3------------>', videoWidth, videoHeight, fitType)
+
+ this.uploadVideoForm.videoDuration = Math.floor(duration);
+ },
+ async upLoadVideo(file) {
+ try {
+ this.$nextTick(() => {
+ this.showVideoProgress = true;
+ })
+ // 鑾峰彇鏂囦欢涓婁紶涓存椂瀵嗛挜
+ const sts = await getSts();
+ const cos = new COS({
+ getAuthorization: async function (options, callback) {
+ callback({
+ TmpSecretId: sts.data.tmpSecretId,
+ TmpSecretKey: sts.data.tmpSecretKey,
+ SecurityToken: sts.data.sessionToken,
+ // 寤鸿杩斿洖鏈嶅姟鍣ㄦ椂闂翠綔涓虹鍚嶇殑寮�濮嬫椂闂达紝閬垮厤瀹㈡埛绔湰鍦版椂闂村亸宸繃澶у鑷寸鍚嶉敊璇�
+ StartTime: sts.data.stsStartTime, // 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000000
+ ExpiredTime: sts.data.stsEndTime,// 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000000
+ ScopeLimit: true, // 缁嗙矑搴︽帶鍒舵潈闄愰渶瑕佽涓� true锛屼細闄愬埗瀵嗛挜鍙湪鐩稿悓璇锋眰鏃堕噸澶嶄娇鐢�
+ });
+ }
+ })
+ const fileKey = getFileKey(file.name)
+ const upData = await cos.uploadFile({
+ Bucket: sts.data.bucket,
+ Region: sts.data.region,
+ Key: fileKey,
+ Body: file, // 瑕佷笂浼犵殑鏂囦欢瀵硅薄銆�
+ SliceSize: 1024 * 1024 * 5,
+ onProgress: (progressData) => {
+ console.log('涓婁紶杩涘害锛�', progressData);
+ this.videoProgress = Math.floor(progressData.percent * 100);
+ },
+ });
+
+ console.log(this.uploadVideoForm)
+ this.$nextTick(() => {
+ this.uploadVideoForm.videoFileKey = fileKey;
+ this.uploadVideoForm.showVideoUrl = sts.data.endpoint + "/" + fileKey;
+ })
+ console.log("涓婁紶鎴愬姛", upData)
+ const duration = this.$refs.videoInfo.duration;
+ console.log('-娴嬭瘯鑾峰彇鏃堕棿淇℃伅---------------->', duration);
+ } catch (e) {
+ console.log("涓婁紶澶辫触", upData)
+ } finally {
+ this.$nextTick(() => {
+ this.showVideoProgress = false;
+ })
+ }
+ return false;
+ },
+ openUploadVideo() {
+ this.upLoadVideoShow = true;
+ this.videoTagList = []
+ this.chooseTag = []
+ this.uploadVideoForm = {
+ id: '',
+ title: '',
+ cover: "",
+ videoFileKey: "",
+ videoDuration: 0,
+ videoFit: "cover",
+ videoContentType: 'video',
+ videoImgs: [],
+ showListImages: [],
+ tags: [],
+ fileInfo: {},
+ goodsList: []
+ }
+ recommend({
+ searchType: "HOT"
+ }).then(res => {
+ this.videoTagList = res.data;
+ })
+ this.searchGoodsList();
+ },
+ recreateEsIndex() {
+ recreateIndex().then(res => {
+ this.$Message.success(res.msg)
+ })
+ },
+ // 绉掕浆x鍒唜绉�
+ formatSeconds(seconds) {
+ if (isNaN(seconds) || seconds < 0) return '0绉�';
+
+ const mins = Math.floor(seconds / 60);
+ const secs = seconds % 60;
+
+ if (mins === 0) return `${secs}绉抈;
+ if (secs === 0) return `${mins}鍒哷;
+
+ return `${mins}鍒�${secs}绉抈;
+ },
// 鑾峰彇鏍囩鍒楄〃
getTags(tagName) {
let params = {
@@ -400,10 +1407,20 @@
console.log(this.auditingForm, "sb")
this.$refs.auditingForm.validate((valid) => {
if (valid) {
+ let currentVideoId = this.auditingForm.id
auditingVideo(this.auditingForm).then(res => {
this.$Message.success("瀹℃牳瀹屾垚")
this.closeAuditing()
this.getDataList()
+ let param = {
+ addType:"USER_PUBLISH_EXAMINE",
+ userId:this.detail.authorId,
+ extend:""
+ }
+ param.extend = JSON.stringify({
+ videoId:currentVideoId
+ })
+ addPrizeNum(param)
})
}
})
@@ -490,6 +1507,26 @@
this.getDataList();
},
// 鑾峰彇鍒楄〃鏁版嵁
+ getGoodsDataList() {
+ let search = this.searchGoodsForm;
+ console.log('-------------------------->', this.searchGoodsForm)
+ if (search.pageNumber > 0) {
+ search.pageNumber = search.pageNumber - 1;
+ }
+ videoGoodsEsPage(search).then((res) => {
+ console.log(res)
+ this.loading = false;
+ if (res.code == 200) {
+ this.goodsData = res.data;
+ getSts().then(res => {
+ this.endpoint = res.data.endpoint
+ })
+ this.goodsTotal = res.total;
+ }
+ });
+ this.total = this.data.length;
+ },
+ // 鑾峰彇鍒楄〃鏁版嵁
getDataList() {
this.loading = true;
getVideos(this.searchForm).then((res) => {
@@ -527,6 +1564,18 @@
this.searchForm.pageSize = v;
this.getDataList();
},
+ // 鍒嗛〉 鏀瑰彉椤电爜
+ goodsChangePage(v) {
+ console.log('-------------------------->鍒嗛〉', v);
+ this.searchGoodsForm.pageNumber = v;
+ this.getGoodsDataList();
+ },
+ // 鍒嗛〉 鏀瑰彉椤垫暟
+ goodsChangePageSize(v) {
+ this.searchGoodsForm.pageNumber = 1;
+ this.searchGoodsForm.pageSize = v;
+ this.getGoodsDataList();
+ },
}
}
</script>
@@ -537,15 +1586,68 @@
text-align: center;
color: #2d8cf0;
}
+
.play-text:hover {
cursor: pointer;
}
+
.video-warp {
- width: 786px;
- height: 432px;
+ width: 100%;
+ height: 440px;
}
+
.data-item {
display: flex;
align-items: center;
}
+
+.img-warp {
+ padding: 10px;
+}
+
+.image {
+ width: 150px;
+ height: 200px;
+}
+
+.demo-upload-list {
+ display: inline-block;
+ width: 60px;
+ height: 60px;
+ text-align: center;
+ line-height: 60px;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ overflow: hidden;
+ background: #fff;
+ position: relative;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
+ margin-right: 4px;
+}
+
+.demo-upload-list img {
+ width: 100%;
+ height: 100%;
+}
+
+.demo-upload-list-cover {
+ display: none;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, .6);
+}
+
+.demo-upload-list:hover .demo-upload-list-cover {
+ display: block;
+}
+
+.demo-upload-list-cover i {
+ color: #fff;
+ font-size: 20px;
+ cursor: pointer;
+ margin: 0 2px;
+}
</style>
--
Gitblit v1.8.0