tangzheng/prepare_food_admin_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加视频鉴赏

Browse Source
This commit is contained in:
闵宪瑞 2024-11-21 16:11:59 +08:00
parent 3bcffa6475
commit a3c93146d8
3 changed files with 330 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/api/video.js
View File

@ -1,11 +1,10 @@
import request from '@/utils/request'
/**
* 新增EbVideo
* @param pram
*/
export function EbVideoCreateApi(data) {
export function videoCreateApi(data) {
return request({
url: 'admin/video/save',
method: 'POST',
@ -17,9 +16,9 @@ export function EbVideoCreateApi(data) {
* ebvideo更新
* @param pram
*/
export function ebvideoUpdateApi(data) {
export function videoUpdateApi(data) {
return request({
url: 'admin/video/update',
url: `admin/video/update?id=${data.id}`,
method: 'POST',
data
})
@ -29,10 +28,11 @@ export function ebvideoUpdateApi(data) {
* ebvideo详情
* @param pram
*/
export function ebvideoDetailApi(id) {
export function videoDetailApi(params) {
return request({
url: `admin/video/info/${id}`,
method: 'GET'
url: `admin/video/info`,
method: 'GET',
params
})
}
@ -40,23 +40,22 @@ export function ebvideoDetailApi(id) {
* ebvideo删除
* @param pram
*/
export function ebvideoDeleteApi(id) {
export function videoDeleteApi(params) {
return request({
url: `admin/video/delete/${id}`,
method: 'get'
url: `admin/video/delete`,
method: 'get',
params
})
}
/**
* ebvideo列表
* @param pram
*/
export function ebvideoListApi(params) {
export function videoListApi(params) {
return request({
url: 'admin/video/list',
method: 'GET',
params
})
}

175
src/views/content/video/index.vue
View File

@ -8,6 +8,7 @@
<el-button @click="getDataList()">查询</el-button>
<el-button v-hasPermi="['admin:video:save']" type="primary" @click="addOrUpdateHandle()">新增视频鉴赏</el-button>
<el-button v-hasPermi="['admin:video:delete']" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<el-table
@ -33,18 +34,6 @@
align="center"
label="视频标题">
</el-table-column>
<el-table-column
prop="imageInput"
header-align="center"
align="center"
label="视频图片">
</el-table-column>
<el-table-column
prop="author"
header-align="center"
align="center"
label="视频作者">
</el-table-column>
<el-table-column
prop="synopsis"
header-align="center"
@ -62,19 +51,55 @@
<!-- header-align="center"-->
<!-- align="center"-->
<!-- label="视频分享简介">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="url"-->
<!-- header-align="center"-->
<!-- align="center"-->
<!-- label="原文链接">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="productId"-->
<!-- header-align="center"-->
<!-- align="center"-->
<!-- label="商品关联id">-->
<!-- </el-table-column>-->
<el-table-column
prop="visit"
prop="isHot"
header-align="center"
align="center"
label="浏览次数">
label="是否热门">
<template slot-scope="scope">
<el-switch
@change='changeStatus($event,scope.row,"hot")'
v-model="scope.row.isHot"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column
prop="url"
prop="isBanner"
header-align="center"
align="center"
label="原文链接">
label="是否轮播图">
<template slot-scope="scope">
<el-switch
@change='changeStatus($event,scope.row,"banner")'
v-model="scope.row.isBanner"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<!-- <el-table-column-->
<!-- prop="content"-->
<!-- header-align="center"-->
<!-- align="center"-->
<!-- label="视频详细内容">-->
<!-- </el-table-column>-->
<el-table-column
prop="hide"
@ -82,33 +107,19 @@
align="center"
label="是否隐藏">
<template slot-scope="scope">
<span v-if="scope.row.hide === 0">显示</span>
<span v-else>隐藏</span>
<el-switch
@change='changeStatus($event,scope.row,"hide")'
v-model="scope.row.hide"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column
prop="productId"
prop="visit"
header-align="center"
align="center"
label="商品关联id">
</el-table-column>
<el-table-column
prop="isHot"
header-align="center"
align="center"
label="是否热门">
</el-table-column>
<el-table-column
prop="isBanner"
header-align="center"
align="center"
label="是否轮播图">
</el-table-column>
<el-table-column
prop="content"
header-align="center"
align="center"
label="视频详细内容">
label="浏览次数">
</el-table-column>
<el-table-column
prop="sort"
@ -122,7 +133,6 @@
align="center"
label="创建时间">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
@ -130,6 +140,7 @@
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="view(scope.row)" >查看视频</el-button>
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
</template>
@ -146,16 +157,36 @@
</el-pagination>
<!-- 表单弹窗, 新增数据和修改数据 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<el-dialog
title="查看视频"
:visible.sync="videoVisible"
width="30%"
>
<video width="500" height="300" :src="videoPath.imageInput" autoplay="autoplay" type="video/mp4"></video>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="videoVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import AddOrUpdate from '@/views/content/video/video-add-and-update.vue'
import * as api from '@/api/video'
import {videoDeleteApi, videoListApi, videoUpdateApi} from "@/api/video";
import video from "@/views/content/video/index.vue";
export default {
computed: {
video() {
return video
}
},
data () {
return {
videoVisible:false,
videoPath:{},
dataForm: {
key: ''
},
@ -163,6 +194,7 @@ export default {
pageIndex: 1,
pageSize: 10,
totalPage: 0,
total: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
@ -171,15 +203,40 @@ export default {
components: {
AddOrUpdate
},
activated () {
mounted () {
this.getDataList()
},
methods: {
view(row){
this.videoVisible = true
this.videoPath = row
},
changeStatus($event, val, type) {
if (type === 'banner') {
val.isBanner = $event
}
if (type === 'hot') {
val.isHot = $event
}
if (type === 'hide') {
val.hide = $event
}
videoUpdateApi(val).then(res => {
this.$message.success("修改成功！");
this.getDataList()
})
},
// 获取数据列表
getDataList () {
this.dataListLoading = true
api.ebvideoListApi().then(res => {
// TODO 获取数据列表
this.dataListLoading = false
videoListApi().then(res => {
console.log(res)
this.pageSize = res.limit
this.totalPage = res.page
this.total = res.total
this.dataList = res.list
})
},
// 每页数
@ -205,20 +262,22 @@ export default {
})
},
// // 删除
// deleteHandle (id) {
// var ids = id ? [id] : this.dataListSelections.map(item => {
// return item.id
// })
// this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// api.ebvideoDeleteApi(id).then(res => {
// // TODO 处理删除
// })
// })
// })
deleteHandle (id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
videoDeleteApi({id:id}).then(res => {
this.$message.success("删除成功！");
this.getDataList()
})
})
}
}
}
</script>

241
src/views/content/video/video-add-and-update.vue
View File

@ -15,8 +15,15 @@
<!-- <el-form-item label="作者类型：1管理员，2游客" prop="authorType">-->
<!-- <el-input v-model="dataForm.authorType" placeholder="作者类型：1管理员，2游客"></el-input>-->
<!-- </el-form-item>-->
<el-form-item label="视频图片" prop="imageInput">
<el-input v-model="dataForm.imageInput" placeholder="视频图片"></el-input>
<el-form-item label="上传视频" prop="imageInput">
<div class="upLoadPicBox" @click="modalPicTap('1')" >
<div v-if="dataForm.imageInput" class="pictrue">
<video style="width: 50px;height: 50px" :src="dataForm.imageInput"></video>
</div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont"/>
</div>
</div>
</el-form-item>
<el-form-item label="视频简介" prop="synopsis">
<el-input v-model="dataForm.synopsis" placeholder="视频简介"></el-input>
@ -38,26 +45,37 @@
<!-- <el-option label="否" :value=0></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="商品关联id" prop="productId">
<el-input v-model="dataForm.productId" placeholder="商品关联id"></el-input>
</el-form-item>
<el-form-item label="是否热门" prop="isHot">
<el-select v-model="dataForm.isHot" placeholder="是否热门">
<el-option label="是" :value=1></el-option>
<el-option label="否" :value=0></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否轮播图" prop="isBanner">
<el-select v-model="dataForm.isBanner" placeholder="是否轮播图">
<el-option label="是" :value=1></el-option>
<el-option label="否" :value=0></el-option>
</el-select>
</el-form-item>
<el-form-item label="详细内容" prop="content">
<el-form-item label="详细内容" prop="content">
<Tinymce v-model="dataForm.content"></Tinymce>
</el-form-item>
<el-form-item label="商品关联" prop="productId">
<el-button v-if="dataForm.productId === undefined " type="primary" round size="small" @click="store()">点击关联商品</el-button>
<span v-else>商品编号：{{dataForm.productId}},商品名称：{{dataForm.storeName}}</span>
</el-form-item>
<el-form-item label="是否热门" prop="isHot">
<el-switch
v-model="dataForm.isHot"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="是否轮播图" prop="isBanner">
<el-switch
v-model="dataForm.isBanner"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="是否隐藏" prop="hide">
<el-switch
v-model="dataForm.hide"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="dataForm.sort" :min="0" :max="9999" label="排序"></el-input-number>
</el-form-item>
@ -67,37 +85,101 @@
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataSubmit()">确定</el-button>
</span>
<el-dialog
title="关联商品"
:visible.sync="storeVisible"
width="80%"
append-to-body
>
<el-table
:data="tableData.data"
style="width: 100%"
size="mini"
:highlight-current-row="true"
:header-cell-style=" {fontWeight:'bold'}"
>
<el-table-column
prop="id"
label="ID"
min-width="50"
/>
<el-table-column label="商品图" min-width="80">
<template slot-scope="scope">
<div class="demo-image__preview">
<el-image
style="width: 36px; height: 36px"
:src="scope.row.image"
:preview-src-list="[scope.row.image]"
/>
</div>
</template>
</el-table-column>
<el-table-column label="商品名称"
prop="storeName"
min-width="300"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="price"
label="商品售价"
min-width="90"
align="center"
/>
<el-table-column
prop="sales"
label="销量"
min-width="90"
align="center"
/>
<el-table-column
prop="stock"
label="库存"
min-width="90"
align="center"
/>
<el-table-column label="操作" min-width="150" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleSave(scope.row)" >选中</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
:page-sizes="[20, 40, 60, 80]"
:page-size="tableFrom.limit"
:current-page="tableFrom.page"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="pageChange"
/>
</div>
</el-dialog>
</el-dialog>
</template>
<script>
import * as api from '@/api/video'
import Tinymce from '@/components/Tinymce/index'
import {videoCreateApi, videoDetailApi, videoUpdateApi} from "@/api/video";
import {productLstApi} from "@/api/store";
export default {
components: {Tinymce },
data() {
return {
visible: false,
dataForm: {
id: 0,
title: '',
author: '',
authorType: '',
imageInput: '',
synopsis: '',
shareTitle: '',
shareSynopsis: '',
visit: '',
sort: '',
url: '',
status: '',
hide: '',
productId: '',
isHot: '',
isBanner: '',
content: '',
tableData: {
data: [],
total: 0
},
tableFrom: {
page: 1,
limit: 20,
cateId: '',
keywords: '',
type: '1'
},
storeVisible: false,
visible: false,
dataForm: {},
dataRule: {
title: [
{required: true, message: '视频标题 为必填项', trigger: 'blur'}
@ -120,9 +202,7 @@ export default {
shareSynopsis: [
{required: true, message: '视频分享简介 为必填项', trigger: 'blur'}
],
visit: [
{required: true, message: '浏览次数 为必填项', trigger: 'blur'}
],
sort: [
{required: true, message: '排序 为必填项', trigger: 'blur'}
],
@ -130,40 +210,72 @@ export default {
{required: true, message: '原文链接 为必填项', trigger: 'blur'}
],
status: [
{required: true, message: '状态：0无效，1有效 为必填项', trigger: 'blur'}
{required: true, message: '状态 为必填项', trigger: 'blur'}
],
hide: [
{required: true, message: '是否隐藏 0不隐藏，1隐藏 为必填项', trigger: 'blur'}
],
productId: [
{required: true, message: '商品关联id 为必填项', trigger: 'blur'}
{required: true, message: '是否隐藏为必填项', trigger: 'blur'}
],
isHot: [
{required: true, message: '是否热门(小程序) 为必填项', trigger: 'blur'}
{required: true, message: '是否热门为必填项', trigger: 'blur'}
],
isBanner: [
{required: true, message: '是否轮播图(小程序) 为必填项', trigger: 'blur'}
{required: true, message: '是否轮播图为必填项', trigger: 'blur'}
],
content: [
{required: true, message: '视频详细内容 为必填项', trigger: 'blur'}
],
createTime: [
{required: true, message: '创建时间 为必填项', trigger: 'blur'}
],
updateTime: [
{required: true, message: '更新时间 为必填项', trigger: 'blur'}
]
}
}
},
methods: {
delStore(){
this.dataForm.productId = undefined
this.$message.success("关联商品已经删除！");
},
handleSave(row){
this.dataForm.productId = row.id
this.dataForm.storeName = row.storeName
console.log(row)
this.storeVisible = false
},
store(){
this.getList()
this.storeVisible = true
},
handleSizeChange(val) {
this.tableFrom.limit = val
this.getList()
},
pageChange(page) {
this.tableFrom.page = page
this.getList()
},
getList(){
productLstApi(this.tableFrom).then(res => {
this.tableData.data = res.list
this.tableData.total = res.total
}).catch(res => {
this.$message.error(res.message)
})
},
modalPicTap(tit, num, i, status) {
const _this = this;
this.$modalUpload(function (img) {
if (tit === '1' && !num) {
_this.dataForm.imageInput = img[0].sattDir
}
}, tit, 'content')
},
init(id) { // 初始化表单验证规则
this.dataForm.id = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
api.ebvideoDetailApi(id).then(res => {
videoDetailApi({id:id}).then(res => {
this.dataForm = res;
})
}
@ -173,10 +285,21 @@ export default {
dataSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
api.EbVideoCreateApi().then(res => {
// TODO 保存数据
if (this.dataForm.id){
videoUpdateApi(this.dataForm).then(res => {
this.visible = false
this.$message.success("修改成功！");
this.$emit('refreshDataList');
})
}else {
videoCreateApi(this.dataForm).then(res => {
this.visible = false
this.$message.success("添加成功！");
this.$emit('refreshDataList');
});
}
}
})
}
}