| | |
| | | <Modal |
| | | v-model="auditingShow" |
| | | title="视频审核" |
| | | width="800" |
| | | width="1200" |
| | | :loading="auditingLoading" |
| | | :mask-closable="false" |
| | | > |
| | |
| | | </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> |
| | | </div> |
| | | |
| | | </Form-item> |
| | | <Form-item label="审核结果:" :label-width="100" prop="result"> |
| | | <RadioGroup v-model="auditingForm.result"> |
| | |
| | | <template slot-scope="{ row, index }" slot="videoFileKey"> |
| | | <div 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> |
| | |
| | | import {getVideoTagList} from "@/api/videoTag"; |
| | | import {getFilePreview} from "@/api/file"; |
| | | import Editor from '@/components/editor/index.vue' |
| | | import GoodsExpandRow from '@/views/video/GoodsExpandRow' |
| | | export default { |
| | | name: "VideoList", |
| | | components: {Editor}, |
| | | components: {Editor,GoodsExpandRow}, |
| | | data() { |
| | | return { |
| | | videoDownForm: { |
| | |
| | | align: 'center' |
| | | }, |
| | | { |
| | | width: 60, |
| | | type: 'expand', |
| | | render: (h, params) => { |
| | | return h(GoodsExpandRow, { |
| | | props: { |
| | | goodsList: params.row.goodsList |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | { |
| | | title: "标题", |
| | | key: "title", |
| | | minWidth: 240, |
| | |
| | | key: "videoFileKey", |
| | | width: 170, |
| | | slot: "videoFileKey" |
| | | }, |
| | | { |
| | | title: "时长", |
| | | key: "videoDuration", |
| | | width: 80, |
| | | align: 'center', |
| | | slot: "videoDuration", |
| | | }, |
| | | { |
| | | title: "播放量", |
| | |
| | | this.getTags('') |
| | | }, |
| | | methods: { |
| | | // 秒转x分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 = { |
| | |
| | | cursor: pointer; |
| | | } |
| | | .video-warp { |
| | | width: 786px; |
| | | height: 432px; |
| | | width: 100%; |
| | | height: 350px; |
| | | } |
| | | .data-item { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .img-warp { |
| | | padding: 10px; |
| | | } |
| | | .image { |
| | | width: 150px; |
| | | height: 200px; |
| | | } |
| | | </style> |