添加视频鉴赏

src/api/video.js

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

src/views/content/video/index.vue

@@ -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>
+          <el-switch
-          <span v-else>隐藏</span>
+            @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">
+        label="浏览次数">
-      </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="视频详细内容">
       </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
+      this.dataListLoading = false
-      api.ebvideoListApi().then(res => {
+      videoListApi().then(res => {
-        // TODO 获取数据列表
+        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) {
+    deleteHandle (id) {
-    //   var ids = id ? [id] : this.dataListSelections.map(item => {
+      var ids = id ? [id] : this.dataListSelections.map(item => {
-    //     return item.id
+        return item.id
-    //   })
+      })
-    //   this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+      this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-    //     confirmButtonText: '确定',
+        confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
+        cancelButtonText: '取消',
-    //     type: 'warning'
+        type: 'warning'
-    //   }).then(() => {
+      }).then(() => {
-    //     api.ebvideoDeleteApi(id).then(res => {
+        videoDeleteApi({id:id}).then(res => {
-    //       // TODO 处理删除
+          this.$message.success("删除成功！");
-    //     })
+          this.getDataList()
-    //   })
+        })
-    // })
+      })
+    }
+
 }
 }
 </script>

src/views/content/video/video-add-and-update.vue

@@ -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-form-item label="上传视频" prop="imageInput">
-        <el-input v-model="dataForm.imageInput" placeholder="视频图片"></el-input>
+        <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,
+      tableData: {
-      dataForm: {
+        data: [],
-        id: 0,
+        total: 0
-        title: '',
-        author: '',
-        authorType: '',
-        imageInput: '',
-        synopsis: '',
-        shareTitle: '',
-        shareSynopsis: '',
-        visit: '',
-        sort: '',
-        url: '',
-        status: '',
-        hide: '',
-        productId: '',
-        isHot: '',
-        isBanner: '',
-        content: '',
-
       },
+      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'}
+          {required: true, message: '是否隐藏为必填项', trigger: 'blur'}
-        ],
-        productId: [
-          {required: true, message: '商品关联id  为必填项', 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,9 +285,20 @@ export default {
     dataSubmit() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          api.EbVideoCreateApi().then(res => {
+          if (this.dataForm.id){
-            // TODO 保存数据
+            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');
+            });
+          }
+
         }
       })
     }