123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <template>
- <div class="padding-20">
- <el-form
- ref="form"
- :inline="true"
- :model="searchForm"
- clearable
- class="mt-10">
- <el-form-item label="名称:">
- <el-input v-model="searchForm.video_name" placeholder="请输入视频名称" clearable></el-input>
- </el-form-item>
- <el-form-item label="状态:">
- <el-select
- v-model="searchForm.video_status"
- filterable
- clearable
- placeholder="请选择状态">
- <el-option
- v-for="item in arrHideAndShow"
- :key="item.value"
- :label="item.name"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="置顶:">
- <el-select
- v-model="searchForm.lunbo_status"
- filterable
- clearable
- placeholder="请选择是否置顶推荐">
- <el-option
- v-for="item in arrRecommend"
- :key="item.value"
- :label="item.name"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="创建时间:">
- <el-date-picker
- :editable="false"
- v-model="time"
- @change="timearr => {timearr ? (searchForm.start_time = timearr[0] + ' 00:00:00', searchForm.end_time = timearr[1] + ' 23:59:59') : searchForm.start_time = searchForm.end_time = undefined}"
- type="daterange"
- value-format="yyyy-MM-dd"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- ></el-date-picker>
- </el-form-item>
- <el-form-item>
- <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
- </el-form-item>
- <el-form-item>
- <el-button icon="el-icon-plus"
- type="primary"
- @click="add">新增
- </el-button>
- </el-form-item>
- </el-form>
- <el-table
- :data="tableData"
- stripe
- v-loading="tableLoading"
- fit
- class="marginT-10 order-table"
- border
- :max-height="vheight">
- <el-table-column label="视频名称" prop="video_name" min-width="140" show-overflow-tooltip></el-table-column>
- <el-table-column label="视频简介" prop="video_introduce" min-width="140" show-overflow-tooltip></el-table-column>
- <el-table-column label="视频预览" prop="video_cover_url" min-width="100">
- <template slot-scope="scope">
- <el-image
- class="el-icon-video-play"
- style="display:block;width: 80px; height: 80px;font-size: 0;position: relative;left: 0;top: 0;cursor: pointer;"
- :src="scope.row.video_cover_url"
- @click.native="showVideoPlayDialog(scope.row)">
- </el-image>
- </template>
- </el-table-column>
- <el-table-column label="出镜人员" prop="video_auther" min-width="140" show-overflow-tooltip></el-table-column>
- <el-table-column label="显示状态" prop="video_status">
- <template slot-scope="scope">{{ scope.row.video_status === 1 ? '显示' : '隐藏' }}</template>
- </el-table-column>
- <el-table-column label="置顶推荐" prop="lunbo_status">
- <template slot-scope="scope">{{ scope.row.lunbo_status === 1 ? '已推荐' : '/' }}</template>
- </el-table-column>
- <el-table-column label="播放数" prop="video_act_num"></el-table-column>
- <el-table-column label="点赞数" prop="video_good_num"></el-table-column>
- <el-table-column label="评论数" prop="video_comment_num"></el-table-column>
- <el-table-column label="转发数" prop="video_transfer_num"></el-table-column>
- <el-table-column label="发布时间" prop="release_at" min-width="160"></el-table-column>
- <el-table-column label="创建时间" prop="created_at" min-width="160"></el-table-column>
- <el-table-column label="更新时间" prop="updated_at" min-width="160"></el-table-column>
- <el-table-column label="操作" min-width="100">
- <template slot-scope="scope">
- <el-button type="text" @click="edit(scope.row)">操作</el-button>
- <el-button type="text" @click="del(scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- class="marginT-20"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :hide-on-single-page="true"
- :current-page="page"
- :page-size="page_size"
- :page-sizes="[10, 20, 100, 200, 300, 400]"
- background
- layout="total, sizes, prev, pager, next, jumper"
- :total="totalCount"/>
- <detail
- v-if="detailsDialog.show"
- v-model="detailsDialog.show"
- :exData="detailsDialog.exData"
- :arrRecommend="arrRecommend"
- :arrHideAndShow="arrHideAndShow"
- @success="init"></detail>
- </div>
- </template>
- <script>
- import page from '@/mixin/page'
- import detail from './details'
- export default {
- mixins: [page],
- components: {
- detail
- },
- data() {
- return {
- detailsDialog: {
- show: false,
- exData: {}
- },
- time: [],
- searchForm: {},
- tableData: [],
- tableUrl: '/api/admin/video/list',
- arrRecommend: [
- {
- name: '否',
- value: '0'
- },
- {
- name: '是',
- value: '1'
- }
- ],
- arrHideAndShow: [
- {
- name: '隐藏',
- value: '0'
- },
- {
- name: '显示',
- value: '1'
- }
- ]
- }
- },
- methods: {
- add() {
- this.detailsDialog.exData = {}
- this.detailsDialog.show = true
- },
- edit(row) {
- this.detailsDialog.exData = row
- this.detailsDialog.show = true
- },
- del(row) {
- this.$confirm('确定要删除吗', '确认', {
- type: 'warning'
- }).then(async () => {
- const data = await this.$fetch('/api/admin/video/delete', { id: row.id })
- if (data.code === 200) {
- this.$message.success('删除成功')
- this.init()
- }
- }).catch(() => {
- })
- },
- showVideoPlayDialog(row) {
- const { video_url } = row
- if (!video_url) {
- this.$message.error('视频不存在')
- return
- }
- this.$store.commit('common/SET_VIDEOPLAYDIALOG', {
- src: video_url,
- show: true
- })
- }
- },
- mounted() {
- this.init()
- }
- }
- </script>
- <style lang="scss" scoped>
- .key-word {
- ::v-deep .el-form-item__content {
- width: 260px;
- }
- }
- .el-icon-video-play {
- &:before {
- position: absolute;
- left: 50%;
- top: 50%;
- z-index: 1;
- font-size: 30px;
- color: #999;
- transform: translate(-50%, -50%);
- }
- }
- </style>
|