bztang-admin/plugins/wechat/views/admin/examine/examine.blade.php

326 lines
12 KiB
PHP

@extends('layouts.base')
@section('title', "图文审核")
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/wechat/src/common/static/index.css')}}">
<style>
.top-title {
background: #fff;
margin: 10px;
padding: 20px 0;
border-radius: 10px;
}
.vue-main-title {
padding: 0 20px 20px 20px;
}
.top-title .vue-main-title .el-button {
border: 1px solid #25cbae;
color: #25cbae;
background: #f1fcfa;
}
.bottom-content {
display: flex;
flex-wrap: wrap;
margin: 0 20px;
}
.context {
display: flex;
justify-content: flex-start;
margin-bottom: 10px;
}
.member-img {
width: 50px;
height: 50px;
margin-right: 5px;
}
.member_nickname {
color: #52c2e0;
font-weight: bold;
text-align: left;
}
.bottom-content div {
margin-bottom: 10px;
}
.el-button {
height: 40px;
}
.bottom-content .el-input {
width: 200px;
margin-right: 10px;
}
.bottom-content .block {
margin-right: 10px;
}
.vue-main {
border-radius: 10px;
padding-left: 0;
}
/* .el-table__row .el-table_1_column_3 .cell {
color: #13c7a7;
} */
.el-button:focus,
.el-button:hover {
color: #fff;
border-color: #13c7a7;
background-color: #13c7a7;
}
.reviewed {
color: #e59133;
font-weight: 500;
}
.publish {
color: #13c7a7;
font-weight: 500;
}
.upload-cover {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.upload-cover .el-input__inner {
padding:0 !important;
}
.upload-cover .upload-box {
width: 100px;
height: 50px;
display: flex;
flex-direction: column;
}
.upload-cover .el-icon-plus {
font-size: 18px;
}
.upload-cover .el-icon-link {
font-size: 18px;
margin: 0 10px;
}
.upload-cover .el-icon-delete-solid{
font-size: 18px;
}
</style>
<div class="all">
<div id="app" v-cloak>
<link rel="stylesheet" href="//at.alicdn.com/t/font_432132_zbfevy1oy.css">
<div class="top-title">
<div class="vue-main-title">
<div class="vue-main-title-left"></div>
<div class="vue-main-title-content">发布审核</div>
<el-button type="primary" style="background:#13c7a7;color:#fff" @click="syncPublic">同步公众号发表记录</el-button>
</div>
<div class="bottom-content">
<el-input v-model="form.title" placeholder="请输入标题/关键词"></el-input>
<el-select v-model="form.status" placeholder="发布状态" clearable>
<el-option :label="item.name" :value="item.value" v-for="(item,index) in send_state" :key="index"></el-option>
</el-select>
<div class="block">
<el-date-picker v-model="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
<el-button @click="search(1)" style="background:#13c7a7;color:#fff" class="btn-style">搜索</el-button>
</div>
</div>
<div class="vue-main">
<div class="vue-main-title">
<div class="vue-main-title-left"></div>
<div class="vue-main-title-content">发布列表</div>
</div>
<el-table :data="list_data" style="width: 100%">
<el-table-column label="时间" align="center" prop="created_at"></el-table-column>
<el-table-column label="发布内容" align="center">
<template slot-scope="scope">
<div v-for="(item,index) in scope.row.has_many_article" :key="index" class="context">
<el-image class="member-img" :src="item.thumb_url" fit="contain"></el-image>
<span class="member_nickname">[[item.title]]</span>
</div>
</template>
</el-table-column>
<el-table-column label="发布状态" align="center">
<template slot-scope="scope">
<!-- 0待审核 -1已驳回 1已发布 -->
<span :class="scope.row.status === 0 ? 'reviewed' : scope.row.status === -1 ? '已驳回' : 'publish'">[[scope.row.status === 0 ? '待审核' : scope.row.status === -1 ? '已驳回' : '已发布']]</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div class="upload-cover" v-for="(item,index) in scope.row.has_many_article" :key="index" v-if="scope.row.has_many_article.length >= 0 && scope.row.status !== 0">
<div class="upload-box" @click="uploadImgCover(item.id)" v-if="!item.thumb_url && scope.row.status !== -1">
<i class="el-icon-plus"></i>
<span>上传封面</span>
</div>
<div @click="copy(`textUrl_${item.id}_${scope.row.id}`)">
<el-input v-model="item.url" :ref="`textUrl_${item.id}_${scope.row.id}`" style="width: 12px;height:1px;opacity: 0;"></el-input>
<i class="el-icon-link"></i>
</div>
<i class="el-icon-delete-solid" @click="delExamineRecord(item.examine_id,scope.row.article_id)"></i>
</div>
<div class="upload-cover" v-if="scope.row.has_many_article.length === 0 && scope.row.status !== 0">
<div class="upload-box" @click="uploadImgCover('')" v-if="scope.row.status !== -1">
<i class="el-icon-plus"></i>
<span>上传封面</span>
</div>
<div @click="copy('textNull')" v-if="scope.row.status !== -1">
<el-input ref="textNull" style="width: 1px;height:12px;opacity: 0;"></el-input>
<i class="el-icon-link"></i>
</div>
<i class="el-icon-delete-solid" @click="delExamineRecord('',scope.row.article_id)"></i>
</div>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="vue-page" v-if="total>0">
<el-row>
<el-col align="right">
<el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total" :page-size="per_page" :current-page="current_page" background></el-pagination>
</el-col>
</el-row>
</div>
<upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
</div>
</div>
@include('public.admin.uploadImg')
<script>
var app = new Vue({
el: "#app",
delimiters: ['[[', ']]'],
name: 'test',
data() {
return {
form: {
title: '',
status: ''
},
date: '',
send_state: [{
value: 0,
name: '待审核'
}, {
value: 1,
name: '已发布'
}, {
value: -1,
name: '已驳回'
}],
list_data: [],
current_page: 1,
total: 1,
per_page: 1,
chooseImgName:'',
uploadIndex:0,
uploadShow:false,
}
},
mounted() {
this.getRecordData(1);
},
methods: {
getRecordData(page) {
this.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.article.index') !!}", {
page,
...this.form,
time_arr:[this.date !== null ? this.date[0] : '',this.date !== null ? this.date[1] : '']
}).then(res => {
return res.json();
}).then(response => {
if (response.result) {
// console.log(response,'response');
this.list_data = response.data.data
this.current_page = response.data.current_page;
this.total = response.data.total;
this.per_page = response.data.per_page;
} else {
console.log(123);
this.$message.error(response.msg);
}
});
},
search(val) {
this.getRecordData(val);
},
changeProp(val) {
this.uploadShow = !val;
},
sureImg(name,image,image_url) {
// console.log(this.uploadIndex,image_url,'image');
this.uploadCover(this.uploadIndex,image_url)
},
uploadImgCover(index){
this.uploadShow = true;
this.uploadIndex = index;
},
// 同步公众号发表记录
syncPublic(){
this.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.article.refresh') !!}", {examine_id:''}).then(res => {
return res.json();
}).then(response => {
if (response.result) {
this.$message.success(response.msg);
location.reload();
} else {
this.$message.error(response.msg);
}
});
},
// 复制链接
copy(indexUrl){
let url = this.$refs[indexUrl];
// console.log( this.$refs[indexUrl],indexUrl) // 改变了的值
if(indexUrl == 'textNull') {
url.select(); // 选择对象
}else {
url[0].select(); // 选择对象
}
document.execCommand("Copy",false);
this.$message({message:"复制成功!",type:"success"});
},
// 上传封面
uploadCover(id,thumb_url){
this.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.article.changeArticleImage') !!}", {id,thumb_url}).then(res => {
return res.json();
}).then(response => {
if (response.result) {
this.$message.success(response.msg);
this.getRecordData(1);
} else {
this.$message.error(response.msg);
}
});
},
// 删除审核记录
delExamineRecord(examine_id,article_id){
this.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.article.deleteArticle') !!}", {examine_id,article_id}).then(res => {
return res.json();
}).then(response => {
if (response.result) {
this.$message.success(response.msg);
this.getRecordData(1);
} else {
this.$message.error(response.msg);
}
});
}
},
})
</script>
@endsection