523 lines
27 KiB
PHP
523 lines
27 KiB
PHP
@extends('layouts.base')
|
||
@section('title', "公众号素材")
|
||
@section('content')
|
||
<style>
|
||
.rightlist #app .rightlist-head{line-height:50px;padding:15px 0;}
|
||
.rightlist #app{margin-left:30px;}
|
||
.el-form-item__label{padding-right:30px;}
|
||
.tip{font-size:12px;color:#999;}
|
||
/* .rightlist-head-con{padding-right:20px;font-size:16px;color:#888;} */
|
||
.rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;}
|
||
.el-tag{font-weight:700;font-size:15px;margin-bottom:30px;}
|
||
.el-icon-edit{font-size:16px;padding:0 15px;color:#409EFF;cursor: pointer;}
|
||
/* 滑块选择小白点 */
|
||
.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;}
|
||
/* 微信公众号布局 */
|
||
.image_text_head{width:100%;border:1px solid #ccc;box-shadow: 2px 2px 5px #888888;}
|
||
.image_text_head_time{width:90%;line-height:20px;margin-left:5%;padding:10px 0;border-bottom:1px solid #ccc;}
|
||
.image_text_con{width:330px;height:200px;overflow:hidden;position:relative;}
|
||
.image_text_con img{min-width:330px;height:200px;}
|
||
.image_text_con_title{position:absolute;bottom:0;width:100%;line-height:32px;background:#000;opacity:0.5;color:#fff;padding:0 15px;}
|
||
.image_text_list{height:100px;border-top:1px solid #ccc;padding:0 30px;overflow:hidden;}
|
||
.image_text_list_title{width:80%;display:inline-block;}
|
||
.image_text_list_img{width:18%;display:inline-block;padding-top:10px;}
|
||
|
||
.photo_text_con{width:300px;height:200px;overflow:hidden;}
|
||
.photo_text_con img{width:300px;height:220px;}
|
||
input[type=file] {display: none;}
|
||
|
||
.voice_con{width:300px;height:50px;overflow:hidden;position:relative;}
|
||
.voice_con img{width:50px;height:50px;}
|
||
.voice_con_time{display:inline-block;line-height:50px;margin-left:20px}
|
||
|
||
[v-cloak]{
|
||
display:none;
|
||
}
|
||
.text-tip {
|
||
color: #ff5b65;
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
|
||
<div class="rightlist">
|
||
<div id="app" v-loading="loading" v-cloak>
|
||
<link rel="stylesheet" href="//at.alicdn.com/t/font_913727_gt395lrelsk.css">
|
||
|
||
<div class="rightlist-head">
|
||
<div class="rightlist-head-con">公众号素材</div>
|
||
<div class="text-align:right">
|
||
<el-button type="primary" @click="syncWechat()">
|
||
<span v-if="activeName=='image_text'">同步公众号草稿箱</span>
|
||
<span v-if="activeName=='photo'">同步公众号图片素材</span>
|
||
<span v-if="activeName=='voice'">同步公众号语音素材</span>
|
||
<span v-if="activeName=='video'">同步公众号视频素材</span>
|
||
</el-button>
|
||
<span class="text-tip">注: 同步后，只保存在本地的图文会被删除，请确认好再进行同步!</span>
|
||
</div>
|
||
|
||
</div>
|
||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||
<el-tab-pane label="图文" name="image_text">
|
||
<div class="image_text">
|
||
<el-row>
|
||
<el-col :span="23" align="right">
|
||
<a href="{{ yzWebFullUrl('plugin.wechat.admin.material.controller.news.edit') }}">
|
||
<el-button type="primary">新增图文</el-button>
|
||
</a>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="6" style="margin:10px 30px;width:400px" v-for="(item,index) in datas" :key="index">
|
||
<div class="image_text_head">
|
||
<div style="width:100%;">
|
||
<div class="image_text_head_time">
|
||
<div>
|
||
<div style="width:80%;display:inline-block;">[[item.created_at]]</div>
|
||
<i @click="del('news',item.id)" class="iconfont icon-shanchu" style="float:right;display:inline-block;width:30px;height:30px;cursor:pointer" title="删除"></i>
|
||
<a :href="'{{ yzWebUrl('plugin.wechat.admin.material.controller.news.edit', array('id' => '')) }}'+[[item.id]]" style="color:#000;">
|
||
<i class="iconfont icon-bianjiqianbixieshuru2" style="float:right;display:inline-block;width:20px;height:30px;" title="编辑"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin:10px 30px">
|
||
|
||
<div class="image_text_con">
|
||
<img :src="item.has_many_wechat_news[0].thumb_url" alt="">
|
||
<div class="image_text_con_title">[[item.has_many_wechat_news[0].title]]</div>
|
||
</div>
|
||
</div>
|
||
<div class="image_text_list" v-for="(list,index) in item.has_many_wechat_news" :key="index" v-if="index!=0">
|
||
<div class="image_text_list_title">
|
||
[[list.title]]
|
||
</div>
|
||
<div class="image_text_list_img">
|
||
<img style="width:80px;height:80px;" :src="list.thumb_url" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 分页 -->
|
||
<el-row>
|
||
<el-col :span="24" align="right" style="padding:15px 5% 15px 0">
|
||
<el-pagination layout="prev, pager, next" @current-change="currentChangeWechatTextImg" :total="total" :page-size="per_size" background v-loading="loading"></el-pagination>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="图片" name="photo">
|
||
<el-row>
|
||
<el-col :span="23" align="right">
|
||
<el-upload action="{!! yzWebFullUrl('plugin.wechat.admin.material.controller.image.upload',['type' => 'wechat']) !!}" accept="image/*" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
|
||
<el-button type="primary">上传图片</el-button>
|
||
</el-upload>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="5" style="margin:10px 30px;width:330px;" v-for="(item,index) in photolist" :key="index">
|
||
<div class="image_text_head">
|
||
<div style="width:100%;">
|
||
<div class="image_text_head_time">
|
||
<div>
|
||
<div style="width:80%;display:inline-block;overflow:hidden;line-height:30px;height:30px">[[item.filename]]</div>
|
||
<i @click="del('image',item.id)" class="iconfont icon-shanchu" style="float:right;display:inline-block;width:30px;height:30px;cursor:pointer" title="删除"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin:10px">
|
||
<div class="photo_text_con">
|
||
<img :src="item.attachment" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 分页 -->
|
||
<el-row>
|
||
<el-col :span="24" align="right" style="padding:15px 5% 15px 0">
|
||
<el-pagination layout="prev, pager, next" @current-change="currentChangeWechatImg" :total="total" :page-size="per_size" background v-loading="loading"></el-pagination>
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="语音" name="voice">
|
||
<el-row>
|
||
<el-col :span="23" align="right">
|
||
<el-upload action="{!! yzWebFullUrl('plugin.wechat.admin.material.controller.voice.upload',['type' => 'wechat']) !!}" accept="audio/*" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
|
||
<el-button type="primary">上传音频</el-button>
|
||
</el-upload>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="5" style="margin:10px 30px;width:330px;" v-for="(item,index) in voicelist" :key="index">
|
||
<div class="image_text_head">
|
||
<div style="width:100%;">
|
||
<div class="image_text_head_time">
|
||
<div>
|
||
<div style="width:80%;display:inline-block;overflow:hidden;line-height:30px;height:30px">[[item.filename]]</div>
|
||
<i @click="del('voice',item.id)" class="iconfont icon-shanchu" style="float:right;display:inline-block;width:30px;height:30px;cursor:pointer" title="删除"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<audio :src="item.attachment" controls="controls" style="margin:10px 5px;"></audio>
|
||
<!-- <div style="margin:20px 30px">
|
||
<div class="voice_con">
|
||
<div class="iconfont icon-paishipin" style="display:block;font-size:40px;width:100%;height:60px;padding-top:20px;"></div>
|
||
<div class="voice_con_time">[[item.time_length]]</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 分页 -->
|
||
<el-row>
|
||
<el-col :span="24" align="right" style="padding:15px 5% 15px 0">
|
||
<el-pagination layout="prev, pager, next" @current-change="currentChangeWechatVoice" :total="total" :page-size="per_size" background v-loading="loading"></el-pagination>
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="视频" name="video">
|
||
<el-row>
|
||
<el-col :span="23" align="right">
|
||
<el-upload action="{!! yzWebFullUrl('plugin.wechat.admin.material.controller.video.upload',['type' => 'wechat']) !!}" accept="video/mp4" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
|
||
<el-button type="primary">上传视频</el-button>
|
||
</el-upload>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="5" style="margin:10px 30px;width:330px;" v-for="(item,index) in videolist" :key="index">
|
||
<div class="image_text_head">
|
||
<div style="width:100%;">
|
||
<div class="image_text_head_time">
|
||
<div>
|
||
<div style="width:80%;display:inline-block;overflow:hidden;line-height:30px;height:30px">[[item.filename]]</div>
|
||
<i @click="del('video',item.id)" class="iconfont icon-shanchu" style="float:right;display:inline-block;width:30px;height:30px;cursor:pointer" title="删除"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin:10px">
|
||
<div class="photo_text_con">
|
||
<video :src="item.attachment" controls="controls"></video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 分页 -->
|
||
<el-row>
|
||
<el-col :span="24" align="right" style="padding:15px 5% 15px 0">
|
||
<el-pagination layout="prev, pager, next" @current-change="currentChangeWechatVideo" :total="total" :page-size="per_size" background v-loading="loading"></el-pagination>
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
<script>
|
||
var app = new Vue({
|
||
el:"#app",
|
||
delimiters: ['[[', ']]'],
|
||
data() {
|
||
// let data = {!! $data?:'{}' !!};
|
||
// console.log(data);
|
||
// for(let i=0;i<data.data.length;i++){
|
||
// data.data[i].createtime = new Date(parseInt(data.data[i].createtime) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
|
||
// }
|
||
return{
|
||
activeName:"image_text",
|
||
datas:[],
|
||
loading:false,
|
||
photolist:"",
|
||
voicelist:"",
|
||
videolist:"",
|
||
// 分页
|
||
table_loading:false,
|
||
total:0,
|
||
per_size:0,
|
||
current_page:0,
|
||
rules:{},
|
||
}
|
||
},
|
||
created () {
|
||
this.getNewsdata();
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
var that = this;
|
||
that.loading = true;
|
||
// console.log(tab.name);
|
||
if(that.activeName == "image_text") {
|
||
this.getNewsdata();
|
||
// window.location.href='{!! yzWebFullUrl('plugin.wechat.admin.material.controller.news.index') !!}';
|
||
}
|
||
if(that.activeName == "photo") {
|
||
console.log("hahah");
|
||
that.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.image.index') !!}",{}).then(response => {
|
||
console.log(response);
|
||
if(response.data.result==1){
|
||
that.photolist = response.data.data.data;
|
||
that.per_size = response.data.data.per_page;
|
||
that.total = response.data.data.total;
|
||
that.current_page = response.data.data.current_page;
|
||
that.loading = false;
|
||
}
|
||
that.loading = false;
|
||
}),function(res){
|
||
console.log(res);
|
||
that.loading = false;
|
||
};
|
||
}
|
||
if(that.activeName == "voice") {
|
||
that.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.voice.index') !!}",{}).then(response => {
|
||
console.log(response);
|
||
if(response.data.result==1){
|
||
console.log("hahahahah")
|
||
that.voicelist = response.data.data.data;
|
||
for(let i=0;i<that.voicelist.length;i++){
|
||
that.voicelist[i].createtime = new Date(parseInt(that.voicelist[i].createtime) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
|
||
}
|
||
that.per_size = response.data.data.per_page;
|
||
that.total = response.data.data.total;
|
||
that.current_page = response.data.data.current_page;
|
||
that.loading = false;
|
||
}
|
||
that.loading = false;
|
||
}),function(res){
|
||
console.log(res);
|
||
that.loading = false;
|
||
};
|
||
}
|
||
if(that.activeName == "video") {
|
||
that.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.video.index') !!}",{}).then(response => {
|
||
console.log(response);
|
||
if(response.data.result==1){
|
||
console.log("hahahahah")
|
||
that.videolist = response.data.data.data;
|
||
that.loading = false;
|
||
that.per_size = response.data.data.per_page;
|
||
that.total = response.data.data.total;
|
||
that.current_page = response.data.data.current_page;
|
||
}
|
||
that.loading = false;
|
||
}),function(res){
|
||
console.log(res);
|
||
that.loading = false;
|
||
};
|
||
}
|
||
},
|
||
getNewsdata(){
|
||
var that = this;
|
||
that.loading = true;
|
||
that.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.news.index') !!}",{}).then(response => {
|
||
console.log(response);
|
||
if(response.data.result==1){
|
||
console.log("hahahahah")
|
||
that.datas = response.data.data.data;
|
||
console.log(that.datas)
|
||
for(let i=0;i<that.datas.length;i++){
|
||
// that.datas[i].createtime = new Date(parseInt(that.datas[i].createtime) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
|
||
}
|
||
that.per_size = response.data.data.per_page;
|
||
that.total = response.data.data.total;
|
||
that.current_page = response.data.data.current_page;
|
||
that.loading = false;
|
||
}
|
||
that.loading = false;
|
||
}),function(res){
|
||
console.log(res);
|
||
that.loading = false;
|
||
};
|
||
},
|
||
// 上传图片之前
|
||
beforeUpload(){
|
||
this.loading=true;
|
||
},
|
||
// 上传图片成功之后
|
||
uploadSuccess(response,file,fileList){
|
||
if(response.result==1){
|
||
this.$message.success("上传成功！")
|
||
this.handleClick();
|
||
}
|
||
else{
|
||
this.$message.error(response.msg);
|
||
}
|
||
this.loading=false;
|
||
},
|
||
syncWechat() {
|
||
console.log("lalal");
|
||
var that = this;
|
||
that.loading = true;
|
||
var type = "";
|
||
if(that.activeName=="image_text"){
|
||
type = "news";
|
||
}
|
||
else if(that.activeName=="photo"){
|
||
type = "image";
|
||
}
|
||
else if(that.activeName=="voice"){
|
||
type = "voice";
|
||
}
|
||
else if(that.activeName=="video"){
|
||
type = "video";
|
||
}
|
||
that.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.sync-wechat.index') !!}",{type:type}).then(response => {
|
||
console.log(response);
|
||
if(response.data.result==1){
|
||
window.location.href='{!! yzWebFullUrl('plugin.wechat.admin.material.controller.material.index') !!}';
|
||
that.loading = false;
|
||
}
|
||
else{
|
||
this.$message({message: response.data.msg,type: 'error'});
|
||
that.loading = false;
|
||
}
|
||
}).catch(response => {
|
||
this.$message({message: response.data.msg,type: 'error'});
|
||
that.loading = false;
|
||
})
|
||
},
|
||
// 删除素材
|
||
del(type,id){
|
||
this.$confirm('确定删除吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
|
||
this.loading=true;
|
||
if(type=="news"){
|
||
this.$http.post('{!! yzWebFullUrl('plugin.wechat.admin.material.controller.news.delete') !!}',{id:id}).then(function (response) {
|
||
if (response.data.result) {
|
||
this.$message({type: 'success',message: '删除成功!'});
|
||
this.currentChangeWechatTextImg(1);
|
||
}
|
||
else{
|
||
this.$message({type: 'error',message:response.data.msg });
|
||
}
|
||
this.loading=false;
|
||
},function (response) {
|
||
this.$message({type: 'error',message:response.data.msg });
|
||
this.loading=false;
|
||
}
|
||
);
|
||
}
|
||
if(type=="image"){
|
||
this.$http.post('{!! yzWebFullUrl('plugin.wechat.admin.material.controller.image.delete') !!}',{id:id}).then(function (response) {
|
||
if (response.data.result) {
|
||
this.$message({type: 'success',message: '删除成功!'});
|
||
this.currentChangeWechatImg(1);
|
||
}
|
||
else{
|
||
this.$message({type: 'error',message:response.data.msg });
|
||
}
|
||
this.loading=false;
|
||
},function (response) {
|
||
this.$message({type: 'error',message:response.data.msg });
|
||
this.loading=false;
|
||
}
|
||
);
|
||
}
|
||
if(type=="voice"){
|
||
this.$http.post('{!! yzWebFullUrl('plugin.wechat.admin.material.controller.voice.delete') !!}',{id:id}).then(function (response) {
|
||
if (response.data.result) {
|
||
this.$message({type: 'success',message: '删除成功!'});
|
||
this.currentChangeWechatVoice(1);
|
||
}
|
||
else{
|
||
this.$message({type: 'error',message:response.data.msg });
|
||
}
|
||
this.loading=false;
|
||
},function (response) {
|
||
this.$message({type: 'error',message:response.data.msg });
|
||
this.loading=false;
|
||
}
|
||
);
|
||
}
|
||
if(type=="video"){
|
||
this.$http.post('{!! yzWebFullUrl('plugin.wechat.admin.material.controller.video.delete') !!}',{id:id}).then(function (response) {
|
||
if (response.data.result) {
|
||
this.$message({type: 'success',message: '删除成功!'});
|
||
this.currentChangeWechatVideo(1);
|
||
}
|
||
else{
|
||
this.$message({type: 'error',message:response.data.msg });
|
||
}
|
||
this.loading=false;
|
||
},function (response) {
|
||
this.$message({type: 'error',message:response.data.msg });
|
||
this.loading=false;
|
||
}
|
||
);
|
||
}
|
||
|
||
}).catch(() => {
|
||
this.$message({type: 'info',message: '已取消删除'});
|
||
});
|
||
},
|
||
|
||
// 微信图文分页
|
||
currentChangeWechatTextImg(val){
|
||
this.loading = true;
|
||
this.$http.post('{!! yzWebFullUrl('plugin.wechat.admin.material.controller.news.index') !!}',{page:val}).then(function (response){
|
||
console.log(response);
|
||
this.datas = response.data.data.data;
|
||
this.per_size = response.data.data.per_page;
|
||
this.total = response.data.data.total;
|
||
this.current_page = response.data.data.current_page;
|
||
this.loading = false;
|
||
},function (response) {
|
||
console.log(response);
|
||
this.loading = false;
|
||
}
|
||
);
|
||
},
|
||
// 微信图片分页
|
||
currentChangeWechatImg(val){
|
||
this.loading = true;
|
||
this.$http.post('{!! yzWebFullUrl('plugin.wechat.admin.material.controller.image.index') !!}',{page:val}).then(function (response){
|
||
console.log(response);
|
||
this.photolist = response.data.data.data;
|
||
this.per_size = response.data.data.per_page;
|
||
this.total = response.data.data.total;
|
||
this.current_page = response.data.data.current_page;
|
||
this.loading = false;
|
||
},function (response) {
|
||
console.log(response);
|
||
this.loading = false;
|
||
}
|
||
);
|
||
},
|
||
// 微信语音分页
|
||
currentChangeWechatVoice(val){
|
||
this.loading = true;
|
||
this.$http.post('{!! yzWebFullUrl('plugin.wechat.admin.material.controller.voice.index') !!}',{page:val}).then(function (response){
|
||
console.log(response);
|
||
this.voicelist = response.data.data.data;
|
||
this.per_size = response.data.data.per_page;
|
||
this.total = response.data.data.total;
|
||
this.current_page = response.data.data.current_page;
|
||
this.loading = false;
|
||
},function (response) {
|
||
console.log(response);
|
||
this.loading = false;
|
||
}
|
||
);
|
||
},
|
||
// 微信视频分页
|
||
currentChangeWechatVideo(val){
|
||
this.loading = true;
|
||
this.$http.post('{!! yzWebFullUrl('plugin.wechat.admin.material.controller.video.index') !!}',{page:val}).then(function (response){
|
||
console.log(response);
|
||
this.videolist = response.data.data.data;
|
||
this.per_size = response.data.data.per_page;
|
||
this.total = response.data.data.total;
|
||
this.current_page = response.data.data.current_page;
|
||
this.loading = false;
|
||
},function (response) {
|
||
console.log(response);
|
||
this.loading = false;
|
||
}
|
||
);
|
||
},
|
||
},
|
||
})
|
||
|
||
</script>
|
||
@endsection
|