bztang-admin/plugins/video-share/views/videoGoods/list.blade.php

601 lines
29 KiB
PHP

@extends('layouts.base')
@section('title', '发现管理')
@section('content')
<style>
.find-manage #app .manage-title{padding:15px 0;padding-bottom:10px;font-size:16px;line-height:30px;border-bottom:solid 1px #eee;color:#333;margin-bottom:25px;}
.el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
.el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
.find-manage #app .el-dialog__body{position:initial;}
#app {
margin-left: 20px;
}
.replace-sty-box {
display: flex;
justify-content: center;
cursor: pointer;
margin-top: 5px;
}
.replace-sty {
display: flex;
justify-content: center;
background: #29BA9C;
width: 60px;
color: white;
border-radius: 5px;
font-size: 12px;
line-height: 20px;
}
.space-sty {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.find-manage #app .video-sty .el-dialog__body{
padding: 0;
}
.video-sty .el-dialog {
background: rgba(0, 0, 0, 0);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.el-icon-close:before{
font-size: 50px;
color: #fff;
}
</style>
<div class="find-manage">
<div id="app">
<div class="manage-title">
<b>发现管理</b>
</div>
<template>
<el-form :inline="true" :model="search_form" ref="search_form">
<el-row>
<el-col :span="24">
<el-form-item label="视频ID">
<el-input v-model="search_form.id" placeholder="请输入视频ID"></el-input>
</el-form-item>
<el-form-item label="会员ID">
<el-input v-model="search_form.uid" placeholder="请输入会员ID"></el-input>
</el-form-item>
<el-form-item label="会员昵称/姓名/手机号">
<el-input v-model="search_form.member" placeholder="请输入会员昵称/姓名/手机号"></el-input>
</el-form-item>
<el-form-item label="发现标题">
<el-input v-model="search_form.title" placeholder="请输入发现标题"></el-input>
</el-form-item>
<el-form-item label="商品ID">
<el-input v-model="search_form.goods_id" placeholder="请输入商品ID"></el-input>
</el-form-item>
<el-form-item label="时间范围">
<el-date-picker v-model="search_form.time" type="datetimerange" range-separator="" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<template>
<el-select v-model="seleceTime" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item>
<template>
<el-select v-model="search_form.category_id" placeholder="请选择">
<el-option
v-for="item in categorys"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item style="text-align:right;">
<a href="#">
<el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
</a>
<a href="#">
<!-- <el-button type="default" @click="outExcel()">导出EXCEL</el-button> -->
</a>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template>
<!-- 表格start -->
<el-table :data="list" style="width: 100%" v-loading="search_loading">
<el-table-column prop="id" label="视频ID" align="center"></el-table-column>
<el-table-column
align="center"
label="会员">
<template slot-scope="scope">
<template v-if="scope.row.member">
<img :src="scope.row.member.avatar_image" style="width:30px;height:30px;padding:1px;border:1px solid #ccc;">
<div>[[scope.row.member.nickname]]</div>
</template>
<template v-else-if="!scope.row.member">
会员已被删除
</template>
</template>
</el-table-column>
<el-table-column prop="title" label="发现标题" align="center">
<template slot-scope="scope">
<el-popover class="item" placement="top" effect="light">
<div style="text-align:center;">
<div style="text-align:left;margin-bottom:10px;font-weight:900">修改视频标题</div>
<el-input v-model="change_title" style="width:400px" size="small"></el-input>
<el-button size="small" @click="titleChange(scope)">确定</el-button>
</div>
<a slot="reference">
<i class="el-icon-edit edit-i" title="点击编辑" @click="editTitle(scope.$index,'title')"></i>
</a>
</el-popover>
[[scope.row.title]]
</template>
</el-table-column>
<el-table-column prop="cover" label="发现视频" align="center">
<template slot-scope="scope">
<img :src="scope.row.cover" @click="video(scope.row.id)" style="width:60px;height:60px;padding:1px;border:1px solid #ccc;margin-bottom:5px">
<div class="replace-sty-box">
<span class="replace-sty" @click="replaceVideo(scope.row)">更换</span>
</div>
</template>
</el-table-column>
<el-table-column label="视频分类" align="center">
<template slot-scope="scope" >
<el-select v-model="scope.row.category_id" placeholder="请选择" @change="changeCate(scope.row.category_id,scope.row.id)">
<el-option
v-for="item in categorys"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
align="center"
label="关联商品">
<template slot-scope="scope">
<template v-if="scope.row.goods">
<div class="space-sty" :title="scope.row.goods.title">[[scope.row.goods.title]]</div>
</template>
<template v-else-if="!scope.row.goods && !scope.row.goods_id">
未关联商品
</template>
<template v-else-if="!scope.row.goods && scope.row.goods_id">
商品已被删除
</template>
<div>
<el-button v-if="scope.row.mid_ground_video_id==0" @click="goodsShow(scope.row.id)">更换</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="分享次数/点赞次数/评论数量" align="center">
<template slot-scope="scope">
<span>[[scope.row.share_num]]</span>
<span>/</span>
<span>[[scope.row.like_num]]</span>
<span>/</span>
<span>[[scope.row.comment_sum]]</span>
</template>
</el-table-column>
<el-table-column prop="order_price" label="转化订单金额(元)" align="center"></el-table-column>
<el-table-column prop="amount_total" label="奖励金额(元)" align="center"></el-table-column>
<el-table-column label="" align="center" width="110px">
<template slot-scope="scope">
<a :href="'{{ yzWebFullUrl('plugin.video-share.admin.bonus.index', array('search[vid]' => '',)) }}'+[[scope.row.id]]">
<el-button size="mini">分红记录</el-button>
</a>
</template>
</el-table-column>
<el-table-column label="显示" prop="number" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
:active-value="1" :inactive-value="0"
active-color="#13ce66"
@change="Switch(scope,list)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="推荐" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.is_recommend"
:active-value="1" :inactive-value="0"
active-color="#13ce66"
@change="Switch2(scope,list)">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="isstate" label="操作">
<template slot-scope="scope">
<el-dropdown>
<el-button type="primary">
操作<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-button
type="text"
size="mini"
@click="displayComments(scope)">查看评论</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button
type="text"
size="mini"
@click="del(scope,list)">删除</el-button>
</el-dropdown-item>
<el-dropdown-item v-if="scope.row.mid_ground_video_id>0">
<el-button
type="text"
size="mini"
@click="updateYzGoods(scope.row.id,scope.row.goods_id)">更新</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<el-row>
<el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
<el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="page_total"
:page-size="page_size" :current-page="current_page"></el-pagination>
</el-col>
</el-row>
<el-dialog :visible.sync="is_open" class="video-sty">
<div style="text-align: center">
<video :src="videolist" controls="controls" style="max-width:600px;max-height: 800px;"></video>
</div>
</el-dialog>
</template>
<el-dialog :visible.sync="goods_show" width="60%" center title="选择商品">
<div>
<div style="text-align: center">
<el-input v-model="search_goods_keyword" style="width:80%"></el-input>
<el-button type="primary" @click="searchGoods()" style="margin-left:20px;">搜索</el-button>
</div>
<el-table :data="goods_list" style="width: 100%;height:500px;overflow:auto">
<el-table-column label="ID" prop="id" align="center"></el-table-column>
<el-table-column label="商品信息" align="center">
<template slot-scope="scope">
<div v-if="scope.row"
style="display:flex;align-items: center;justify-content:center;">
<img v-if="scope.row.thumb" :src="scope.row.thumb"
style="width:50px;height:50px"></img>
<div style="margin-left:10px">[[scope.row.title]]</div>
</div>
</template>
</el-table-column>
<el-table-column prop="refund_time" label="操作" align="center">
<template slot-scope="scope">
<el-button @click="sureGoods(scope.row)">
选择
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-row>
<el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
<el-pagination background layout="prev, pager, next" @current-change="goodsCurrentChange"
:total="goods_page_total"
:page-size="goods_page_size" :current-page="goods_current_page"></el-pagination>
</el-col>
</el-row>
</template>
<video-card :dialog-visible.sync="dialogVisible" :video_row="video_row" v-if="dialogVisible"></video-card>
</div>
@include('Yunshop\VideoShare::componemts.videoCard')
@include('public.admin.uploadMultimediaImg')
<script>
var vm = new Vue({
el:"#app",
delimiters: ['[[', ']]'],
data() {
let List = {!! $list?:'{}' !!}
let category = {!! $category?:'{}' !!}
console.log(List);
return{
is_open:false,
list:List.data,
loading:false,
page_total:List.total,
page_size:List.per_page,
current_page:List.current_page,
search_form:{
id:'{!! $_REQUEST['id'] !!}',
is_time:''
},
real_search_form:{},
search_loading:false,
seleceTime:'',
options:[
{
value:1,
label:'搜索发布时间'
},
{
value:0,
label:'不搜索发布时间'
}
],
categorys:category,
videolist:'',
change_title:'',
goods_show:false,
goods_list:[],
goods_page_total:0,
goods_page_size:0,
goods_current_page:0,
search_goods_keyword:'',
video_goods_id:0,
dialogVisible:false,
video_row:{},
}
},
mounted: function () {
},
methods: {
updateYzGoods(id,goods_id){
this.loading = true;
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.update-yz-goods') !!}',{id:id,goods_id:goods_id}).then(function (response){
this.loading = false;
this.$message({message: response.data.msg, type: 'success'});
window.location.reload()
},function (response) {
this.loading = false;
this.$message({message: response.data.msg, type: 'error'});
}
);
},
video(id){//查询视频
this.is_open = true;
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.video') !!}',{id:id}).then(function (response){
console.log(response.data.data);
this.videolist = response.data.data.video_src
},function (response) {
console.log(response);
}
);
},
currentChange(val) {
this.loading = true;
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.search') !!}',{page:val,search:this.real_search_form}).then(function (response){
let data = response.data.data.list;
this.page_total = data.total;
this.list = data.data;
this.page_size = data.per_page;
this.current_page = data.current_page;
this.loading = false;
},function (response) {
console.log(response);
this.loading = false;
}
);
},
goodsShow(id) {
this.goods_show = true
this.video_goods_id = id
},
searchGoods() {
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.get-good-list') !!}', {search: this.search_goods_keyword}
).then(function (response) {
console.log(response.data.data.data)
if (response.data.result) {
this.goods_list = response.data.data.data;
this.goods_page_total = response.data.data.total;
this.goods_page_size = response.data.data.per_page;
this.goods_current_page = response.data.data.current_page;
console.log(response.data.data)
} else {
console.log()
this.$message({message: response.data.msg, type: 'error'});
}
this.search_loading = false;
}
);
},
goodsCurrentChange(val) {
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.get-good-list') !!}', {
page: val,
search: this.search_goods_keyword
}).then(function (response) {
this.goods_list = response.data.data.data;
this.goods_page_total = response.data.data.total;
this.goods_page_size = response.data.data.per_page;
this.goods_current_page = response.data.data.current_page;
this.loading = false;
}, function (response) {
// console.log(response);
this.loading = false;
}
);
},
sureGoods(rows) {
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.edit-goods') !!}', {
goods_id: rows.id,
video_goods_id:this.video_goods_id
}).then(function (response) {
if (response.data.result){
this.$message.success("修改关联商品成功");
window.location.reload();
}else {
this.$message.error(response.data.msg);
}
}, function (response) {
this.$message.error(response.msg);
}
);
},
search() {
this.search_form.start_time='';
this.search_form.end_time='';
if(this.seleceTime===0){
this.search_form.is_time=0;
this.search_loading = true;
}
else{
this.search_loading = true;
this.search_form.is_time=1;
if(this.search_form.time){
this.search_form.is_time=1;
this.search_form.start_time = Math.round(this.search_form.time[0]/1000).valueOf();
this.search_form.end_time = Math.round(this.search_form.time[1]/1000).valueOf();
}
}
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.search') !!}',{search:this.search_form}
).then(function (response) {
if (response.data.result){
let data = response.data.data.list;
this.page_total = data.total;
this.list = data.data;
this.page_size = data.per_page;
this.current_page = data.current_page;
this.loading = false;
this.real_search_form=Object.assign({},this.search_form);
}
else {
this.$message({message: response.data.msg,type: 'error'});
}
this.search_loading = false;
},function (response) {
this.search_loading = false;
this.$message({message: response.data.msg,type: 'error'});
}
);
},
del(scope, rows){
if(confirm("确认删除?")) {
rows.splice(scope.$index, 1);
let json={
id:scope.row.id
}
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.del') !!}',json).then(function (response){
if (response.data.result) {
this.$message.success("删除成功");
} else {
this.$message({message: response.data.msg,type: 'error'});
}
},function (response) {
console.log(response);
this.loading = false;
}
);
}
},
titleChange(scope) {
let id = scope.row.id
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.edit-title') !!}', {
id: id,
title: this.change_title
}).then(function (response) {
if (response.data.result){
this.$message.success("修改标题成功");
scope.row.title = this.change_title
} else {
this.$message({message: response.data.msg, type: 'error'});
}
}, function (response) {
this.$message({message: response.data.msg, type: 'error'});
}
);
},
displayComments(scope){
let id = scope.row.id
let url = "{!! yzWebUrl('plugin.video-share.admin.video-comments.display-comments') !!}&id=" + id
console.log(url)
window.location.href=url
},
Switch(scope, rows){
let json={
vid:scope.row.id
}
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.changeStatus') !!}',json).then(function (response){
if (response.data.result){
this.$message.success("修改状态成功");
}
else{
this.$message({message: response.data.msg,type: 'error'});
}
},function (response) {
console.log(response);
this.loading = false;
}
);
},
Switch2(scope, rows){
let json={
vid:scope.row.id
}
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.changeRecommend') !!}',json).then(function (response){
if (response.data.result){
this.$message.success("修改状态成功");
}
else{
this.$message({message: response.data.msg,type: 'error'});
}
},function (response) {
console.log(response);
this.loading = false;
}
);
},
changeCate(category_id, id){
let json={
category_id:category_id,
id:id
}
this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.changeCategory') !!}',json).then(function (response){
if (response.data.result){
this.$message.success("修改成功");
}
else{
this.$message({message: response.data.msg,type: 'error'});
}
},function (response) {
console.log(response);
this.loading = false;
}
);
},
// 更换视频地址
replaceVideo(row) {
this.dialogVisible = true;
this.video_row = row;
}
},
});
</script>
@endsection