@@ -0,0 +1,89 @@
|
||||
<meta name="referrer" content="never">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||||
<style>
|
||||
#replyDetail {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 20px;
|
||||
color: #444;
|
||||
}
|
||||
.pagination{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
|
||||
<div id="replyDetail" v-cloak>
|
||||
<el-form :model="detailForm" ref="detailForm" :rules="ruleForm" label-width="100px" class="demo-detailForm">
|
||||
<el-form-item label="标题:" prop="name">
|
||||
<el-input v-model="detailForm.name" placeholder="请输入标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字:" prop="rules">
|
||||
<div class="display-flex">
|
||||
<div v-for="(item,index) in detailForm.rules" style=" padding: 5px;
|
||||
border: 1px solid #e6e6e6;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;margin-right: 10px;"><span>{{item}}</span><i @click="delKey(index)"
|
||||
class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<el-input v-model="keys" placeholder="请输入关键字、空格确认" @keyup.space.native="searchFile(keys)"
|
||||
style="border: none;background: none;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型:" prop="type">
|
||||
<el-radio-group v-model="detailForm.type" @change="typeChange">
|
||||
<el-radio label="news">图文消息</el-radio>
|
||||
<el-radio label="image">图片</el-radio>
|
||||
<el-radio label="video">视频</el-radio>
|
||||
<el-radio label="voice">音频</el-radio>
|
||||
<el-radio label="text">文本</el-radio>
|
||||
<el-radio label="link">链接</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="回复内容:" prop="content_title" v-if="detailForm.type">
|
||||
<div class="display-flex">
|
||||
<div style="flex: 1;">
|
||||
<el-select style="position: relative;" v-model="detailForm.content_title" @change="selectChange">
|
||||
<el-option v-for="item in options" :key="item.media_id" :label="item.title" :value="item.media_id">
|
||||
<div class="display-flex">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px" :src="Fast.api.cdnurl(item.thumb_url)" v-if="detailForm.type!='voice' && detailForm.type!='text' && detailForm.type!='link'">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px" :src="Fast.api.cdnurl(item.image)"
|
||||
v-if="detailForm.type=='link'">
|
||||
<div class="ellipsis-1" style="width: 60px;" v-if="detailForm.type=='text' || detailForm.type=='link'">{{ item.media_id }}</div>
|
||||
<div class="ellipsis-1" style="width: 100px;">{{ item.title }}</div>
|
||||
<div class="ellipsis-1" style="flex: 1;" v-if="detailForm.type!='text' && detailForm.type!='link'">{{ item.media_id }}</div>
|
||||
<div class="ellipsis-1" style="flex: 1;" v-if="detailForm.type=='text'">{{ item.thumb_url }}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
|
||||
<div class="text-center display-flex"
|
||||
style="position: sticky;background: #fff;height:32px;top:0;z-index:1;justify-content: center;">
|
||||
<el-pagination class="pagination" :page-sizes="[6]" :current-page="currentPage"
|
||||
:total="totalPage" layout="total, prev, pager,next, jumper"
|
||||
pager-count="5" @size-change.stop="pageSizeChange"
|
||||
@current-change="pageCurrentChange" />
|
||||
</el-pagination>
|
||||
<div class="theme-color cursor-pointer" style="margin-left: 8px;" @click="getoptions">
|
||||
跳转
|
||||
</div>
|
||||
</div>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="create-store theme-color cursor-pointer" @click="createTemplate"
|
||||
v-if="detailForm.type=='text' || detailForm.type=='link'">新建</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer display-flex">
|
||||
<div @click="dispatchSub" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
|
||||
<div @click="dispatchSub('yes','detailForm')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,89 @@
|
||||
<meta name="referrer" content="never">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||||
<style>
|
||||
#replyDetail {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 20px;
|
||||
color: #444;
|
||||
}
|
||||
.pagination{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
|
||||
<div id="replyDetail" v-cloak>
|
||||
<el-form :model="detailForm" ref="detailForm" :rules="ruleForm" label-width="100px" class="demo-detailForm">
|
||||
<el-form-item label="标题:" prop="name">
|
||||
<el-input v-model="detailForm.name" placeholder="请输入标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字:" prop="rules">
|
||||
<div class="display-flex">
|
||||
<div v-for="(item,index) in detailForm.rules" style=" padding: 5px;
|
||||
border: 1px solid #e6e6e6;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;margin-right: 10px;"><span>{{item}}</span><i @click="delKey(index)"
|
||||
class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<el-input v-model="keys" placeholder="请输入关键字、空格确认" @keyup.space.native="searchFile(keys)"
|
||||
style="border: none;background: none;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型:" prop="type">
|
||||
<el-radio-group v-model="detailForm.type" @change="typeChange">
|
||||
<el-radio label="news">图文消息</el-radio>
|
||||
<el-radio label="image">图片</el-radio>
|
||||
<el-radio label="video">视频</el-radio>
|
||||
<el-radio label="voice">音频</el-radio>
|
||||
<el-radio label="text">文本</el-radio>
|
||||
<el-radio label="link">链接</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="回复内容:" prop="content_title" v-if="detailForm.type">
|
||||
<div class="display-flex">
|
||||
<div style="flex: 1;">
|
||||
<el-select style="position: relative;" v-model="detailForm.content_title" @change="selectChange">
|
||||
<el-option v-for="item in options" :key="item.media_id" :label="item.title" :value="item.media_id">
|
||||
<div class="display-flex">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px" :src="Fast.api.cdnurl(item.thumb_url)" v-if="detailForm.type!='voice' && detailForm.type!='text' && detailForm.type!='link'">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px" :src="Fast.api.cdnurl(item.image)"
|
||||
v-if="detailForm.type=='link'">
|
||||
<div class="ellipsis-1" style="width: 60px;" v-if="detailForm.type=='text' || detailForm.type=='link'">{{ item.media_id }}</div>
|
||||
<div class="ellipsis-1" style="width: 100px;">{{ item.title }}</div>
|
||||
<div class="ellipsis-1" style="flex: 1;" v-if="detailForm.type!='text' && detailForm.type!='link'">{{ item.media_id }}</div>
|
||||
<div class="ellipsis-1" style="flex: 1;" v-if="detailForm.type=='text'">{{ item.thumb_url }}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
|
||||
<div class="text-center display-flex"
|
||||
style="position: sticky;background: #fff;height:32px;top:0;z-index:1;justify-content: center;">
|
||||
<el-pagination class="pagination" :page-sizes="[6]" :current-page="currentPage"
|
||||
:total="totalPage" layout="total, prev, pager,next, jumper"
|
||||
pager-count="5" @size-change.stop="pageSizeChange"
|
||||
@current-change="pageCurrentChange" />
|
||||
</el-pagination>
|
||||
<div class="theme-color cursor-pointer" style="margin-left: 8px;" @click="getoptions">
|
||||
跳转
|
||||
</div>
|
||||
</div>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="create-store theme-color cursor-pointer" @click="createTemplate"
|
||||
v-if="detailForm.type=='text' || detailForm.type=='link'">新建</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer display-flex">
|
||||
<div @click="dispatchSub" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
|
||||
<div @click="dispatchSub('yes','detailForm')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,277 @@
|
||||
<meta name="referrer" content="never">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||||
<style>
|
||||
#replyIndex {
|
||||
background: #fff;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.el-tabs__nav {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
width: 80px !important;
|
||||
left: 10px;
|
||||
height: 3px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.el-tabs--top .el-tabs__item.is-top:last-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.custom-tabs {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.custom-body {
|
||||
padding: 0 20px 30px;
|
||||
}
|
||||
|
||||
.custom-button-container {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.demo-detailForm {
|
||||
height: calc(100vh - 246px);
|
||||
}
|
||||
.select-item{
|
||||
background: #fff;
|
||||
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 230px;
|
||||
height: 136px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.select-item:focus,.select-item:hover{
|
||||
color: #fff;
|
||||
}
|
||||
.select-item .select-item-img{
|
||||
height: 136px;
|
||||
}
|
||||
.select-item .el-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.news-title,.image-title,.video-title{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
z-index: 100;
|
||||
background: linear-gradient(360deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
height: 42px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.voice-item,.text-item,.link-item{
|
||||
width: 230px;
|
||||
height: 40px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
color: #444;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.voice-item:hover,.voice-item:focus{
|
||||
color: #444;
|
||||
}
|
||||
.voice-title{
|
||||
line-height: 28px;flex: 1;margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
<div id="replyIndex" v-cloak>
|
||||
<div class="custom-tabs">
|
||||
<el-tabs v-model="activeName" @tab-click="tabClick">
|
||||
<el-tab-pane label="关键字回复" name="auto_reply"></el-tab-pane>
|
||||
<el-tab-pane label="关注回复" name="subscribe"></el-tab-pane>
|
||||
|
||||
<el-tab-pane label="默认回复" name="default_reply"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="custom-button-container" v-if="activeName=='auto_reply'">
|
||||
<div class="display-flex">
|
||||
<div class="custom-refresh" @click="getList">
|
||||
<i class="el-icon-refresh"></i>
|
||||
</div>
|
||||
{if condition = "$auth->check('shopro/wechat/auto_reply/add')"}
|
||||
<el-button type="primary" size="small" icon="el-icon-plus" @click="operation('create',null)">新建
|
||||
</el-button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-body demo-detailForm" v-if="activeName=='subscribe' || activeName=='default_reply'">
|
||||
<el-form :model="detailForm" ref="detailForm" :rules="rules" label-width="100px" class="">
|
||||
<el-form-item label="类型:" prop="type">
|
||||
<el-radio-group v-model="detailForm.type" @change="typeChange">
|
||||
<el-radio label="news">图文消息</el-radio>
|
||||
<el-radio label="image">图片</el-radio>
|
||||
<el-radio label="video">视频</el-radio>
|
||||
<el-radio label="voice">音频</el-radio>
|
||||
<el-radio label="text">文本</el-radio>
|
||||
<el-radio label="link">链接</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="回复内容:" prop="content_title" v-if="detailForm.type">
|
||||
<div class="display-flex">
|
||||
<div class="flex-1">
|
||||
<el-select style="position: relative;" v-model="detailForm.content_title"
|
||||
@change="selectChange">
|
||||
<el-option v-for="item in options" :key="item.media_id" :label="item.title" :value="item.media_id">
|
||||
<div class="display-flex">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px" :src="Fast.api.cdnurl(item.thumb_url)"
|
||||
v-if="detailForm.type!='voice' && detailForm.type!='text' && detailForm.type!='link'">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px" :src="Fast.api.cdnurl(item.image)"
|
||||
v-if="detailForm.type=='link'">
|
||||
<div class="ellipsis-item" style="width: 60px;" v-if="detailForm.type=='text' || detailForm.type=='link'">
|
||||
{{ item.media_id }}</div>
|
||||
<div class="ellipsis-1" style="width: 100px;">{{ item.title }}</div>
|
||||
<div class="ellipsis-item" style="flex: 1;" v-if="detailForm.type!='text' && detailForm.type!='link'">
|
||||
{{ item.media_id }}</div>
|
||||
<div class="ellipsis-item" style="flex: 1;" v-if="detailForm.type=='text'">
|
||||
{{ item.thumb_url }}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
<div class="text-center display-flex"
|
||||
style="position: sticky;background: #fff;height:32px;top:0;z-index:1;justify-content: center;">
|
||||
<el-pagination class="pagination" :page-sizes="[6]" :current-page="selectCurrentPage"
|
||||
:total="selectTotalPage" layout="total, prev, pager,next, jumper" pager-count="5"
|
||||
@size-change.stop="selectSizeChange" @current-change="selectCurrentChange" />
|
||||
</el-pagination>
|
||||
<div class="theme-color cursor-pointer" style="margin-left: 8px;" @click="getoptions">
|
||||
跳转
|
||||
</div>
|
||||
</div>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="create-store theme-color cursor-pointer" @click="createTemplate"
|
||||
v-if="detailForm.type=='text' || detailForm.type=='link'">创建</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="" v-if="detailForm.content_title">
|
||||
<a class="select-item" v-if="detailForm.type=='news'" :href="detailForm.content_id.url" target="_blank" rel="noopener noreferrer">
|
||||
<el-image v-if="detailForm.content_id.thumb_url" :src="Fast.api.cdnurl(detailForm.content_id.thumb_url)">
|
||||
</el-image>
|
||||
<div class="news-title ellipsis-item-2">{{detailForm.content_id.title}}</div>
|
||||
</a>
|
||||
<div class="select-item" v-if="detailForm.type=='image'">
|
||||
<div class="select-item-img">
|
||||
<el-image v-if="detailForm.content_id.thumb_url" :src="Fast.api.cdnurl(detailForm.content_id.thumb_url)">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="image-title ellipsis-item">{{detailForm.content_id.title}}</div>
|
||||
</div>
|
||||
<div class="select-item" v-if="detailForm.type=='video'">
|
||||
<div class="select-item-img">
|
||||
<el-image v-if="detailForm.content_id.thumb_url" :src="Fast.api.cdnurl(detailForm.content_id.thumb_url)">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="video-title ellipsis-item">{{detailForm.content_id.title}}</div>
|
||||
</div>
|
||||
<a class="voice-item" v-if="detailForm.type=='voice'" :href="'detail?media_id='+detailForm.content_id.media_id">
|
||||
<div class="voice-title ellipsis-item">
|
||||
{{detailForm.content_id.title}}</div>
|
||||
<div class="theme-color" style="line-height: 28px;font-size: 20px;"><i
|
||||
class="el-icon-video-play"></i></div>
|
||||
</a>
|
||||
<div class="text-item" v-if="detailForm.type=='text'">
|
||||
<div class="voice-title ellipsis-item">
|
||||
{{detailForm.content_id.title}}</div>
|
||||
</div>
|
||||
<div class="link-item" v-if="detailForm.type=='link'">
|
||||
<div class="voice-title ellipsis-item">
|
||||
{{detailForm.content_id.title}}</div>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<div class="dialog-footer display-flex">
|
||||
<div @click="dispatchSub" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
|
||||
<div @click="dispatchSub('yes','detailForm')" class="dialog-define-btn display-flex-c cursor-pointer">确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-body" v-if="activeName=='auto_reply'">
|
||||
<div class="custom-table-body">
|
||||
<el-table :data="listData" border style="width: 100%" :row-class-name="tableRowClassName"
|
||||
:cell-class-name="tableCellClassName" :header-cell-class-name="tableCellClassName"
|
||||
@row-dblclick="operation">
|
||||
<el-table-column prop="id" label="ID" width="60">
|
||||
</el-table-column>
|
||||
<el-table-column label="规则名称" min-width="300">
|
||||
<template slot-scope="scope">
|
||||
<div class="ellipsis-item">
|
||||
{{scope.row.name}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关键词" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<div class="ellipsis-item">
|
||||
{{scope.row.rules}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="回复类型" width="100">
|
||||
<template slot-scope="scope">
|
||||
<div class="ellipsis-item">
|
||||
{{operation('filter',JSON.parse(scope.row.content).type)}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<div class="opt-container display-flex">
|
||||
{if condition = "$auth->check('shopro/wechat/auto_reply/edit')"}
|
||||
<div class="table-edit-text" @click="operation('edit',scope.row.id)">
|
||||
编辑
|
||||
</div>
|
||||
{/if}
|
||||
{if condition = "$auth->check('shopro/wechat/auto_reply/del')"}
|
||||
<div class="table-delete-text" @click="operation('delete',scope.row.id)">
|
||||
删除
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="pagination-container" v-if="activeName=='auto_reply'">
|
||||
<el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalPage">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,114 @@
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||||
<style>
|
||||
#fansIndex {
|
||||
color: #666;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 0 20px 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.sex-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
|
||||
<div id="fansIndex" v-cloak>
|
||||
<div class="custom-header custom-index">
|
||||
<div class="custom-header-title">
|
||||
粉丝列表
|
||||
</div>
|
||||
<div class="custom-header-search">
|
||||
<el-input placeholder="搜索粉丝" suffix-icon="el-icon-search" v-model="searchKey" size="small">
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sync-button-container display-flex">
|
||||
<div class="custom-refresh" @click="getfansList">
|
||||
<i class="el-icon-refresh"></i>
|
||||
</div>
|
||||
{if condition = "$auth->check('shopro/wechat/fans/syncfans')"}
|
||||
<el-button type="primary" @click="getSync" size="small">同步所有粉丝</el-button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="custom-table-body">
|
||||
<el-table :data="fansList" border style="width: 100%" :row-class-name="tableRowClassName"
|
||||
:cell-class-name="tableCellClassName" :header-cell-class-name="tableCellClassName">
|
||||
<el-table-column prop="id" label="ID" min-width="60">
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="关注粉丝" min-width="230">
|
||||
<template slot-scope="scope">
|
||||
<div class="display-flex">
|
||||
<img class="avatar-img"
|
||||
:src="scope.row.headimgurl?Fast.api.cdnurl(scope.row.headimgurl):'/assets/addons/shopro/img/wechat/avatar.jpg'">
|
||||
<img class="sex-img" v-if="scope.row.sex==0" src="/assets/addons/shopro/img/wechat/male-female.png">
|
||||
<img class="sex-img" v-if="scope.row.sex==1" src="/assets/addons/shopro/img/wechat/male.png">
|
||||
<img class="sex-img" v-if="scope.row.sex==2" src="/assets/addons/shopro/img/wechat/female.png">
|
||||
<div class="ellipsis-item">{{scope.row.nickname}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="粉丝地区" min-width="130">
|
||||
<template slot-scope="scope">
|
||||
<div class="ellipsis-item" v-if="scope.row.country">
|
||||
{{scope.row.country}} {{scope.row.province}} {{scope.row.city}}
|
||||
</div>
|
||||
<div v-if="!scope.row.country">-</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="subscribe" label="关注状态" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<div class="display-flex">
|
||||
<span v-if="scope.row.subscribe=='1'" class="display-flex">
|
||||
<span class="shopro-status-dot shopro-status-normal-dot"></span>
|
||||
<span class="shopro-status-normal">正在关注</span>
|
||||
</span>
|
||||
<span v-else-if="scope.row.subscribe=='0'" class="display-flex">
|
||||
<span class="shopro-status-dot shopro-status-nonormal-dot"></span>
|
||||
<span class="shopro-status-nonormal">取消关注</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="subscribe_time" label="关注时间" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{moment(scope.row.subscribe_time*1000).format("YYYY-MM-DD HH:mm:ss")}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="subscribe_time" label="更新时间" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{moment(scope.row.updatetime*1000).format("YYYY-MM-DD HH:mm:ss")}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="操作" min-width="80px">
|
||||
<template slot-scope="scope">
|
||||
{if condition = "$auth->check('shopro/user/user/profile')"}
|
||||
<span class="theme-color cursor-pointer" @click="viewBtn(scope.row.openid)">查看</span>
|
||||
{/if}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalPage">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,126 @@
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||||
<style>
|
||||
#materialDetail {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 20px;
|
||||
color: #444;
|
||||
}
|
||||
.del-image-btn {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #7438D5;
|
||||
color: #fff;
|
||||
top: -7px;
|
||||
right: -7px;
|
||||
}
|
||||
|
||||
.goods-images {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
border: 1px solid #7438D5;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.label-auto {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.add-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px dashed #E6E6E6;
|
||||
border-radius: 4px;
|
||||
justify-content: center;
|
||||
}
|
||||
.el-textarea{
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
|
||||
<div id="materialDetail" v-cloak>
|
||||
<div v-if="sourceType=='text'">
|
||||
<el-form :model="detailForm" ref="detailForm" :rules="rules" label-width="100px" class="demo-detailForm">
|
||||
<el-form-item label="标题:" prop="name">
|
||||
<el-input v-model="detailForm.name" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容:" prop="content">
|
||||
<el-input type="textarea" v-model="detailForm.content" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="sourceType=='link'">
|
||||
<el-form :model="detailForm" ref="detailForm" :rules="rules" label-width="100px" class="demo-detailForm">
|
||||
<el-form-item label="标题:" prop="name">
|
||||
<el-input v-model="detailForm.name" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" prop="description">
|
||||
<el-input type="textarea" v-model="detailForm.description" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片:" prop="image">
|
||||
<div class="display-flex">
|
||||
<div class="goods-image-box display-flex" v-if="detailForm.image">
|
||||
<div class="goods-images" style="margin-right: 0;">
|
||||
<img class="label-auto" :src="Fast.api.cdnurl(detailForm.image)"
|
||||
style="border-radius: 4px;">
|
||||
<div class="del-image-btn" @click="delImg('image',null)">
|
||||
<img class="label-auto" src="/assets/addons/shopro/img/goods/close.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-img display-flex" @click="addImg('image',null,false)"
|
||||
v-if="!detailForm.image">
|
||||
<i class="el-icon-plus"></i>
|
||||
</div>
|
||||
<!-- <div class="msg-tip"></div> -->
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接地址:" prop="url">
|
||||
<el-input v-model="detailForm.url" placeholder="http(s)://"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="dialog-footer" style="justify-content: space-between;">
|
||||
<el-popover placement="top" width="270" v-model="visible">
|
||||
<div class="popover-container">
|
||||
<p>文本内容</p>
|
||||
<p>
|
||||
<el-input v-model="hrefMsg"></el-input>
|
||||
</p>
|
||||
<p>链接地址</p>
|
||||
<p>
|
||||
<el-input v-model="hrefA" placeholder="http(s)://"></el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" @click="addHref()">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="addHref('yes')">确定</el-button>
|
||||
</div>
|
||||
<div style="margin-left: 100px;" v-if="sourceType=='text'" class="theme-color cursor-pointer" slot="reference">插入超链接</div>
|
||||
</el-popover>
|
||||
<div class="display-flex">
|
||||
<div @click="dispatchSub" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
|
||||
<div @click="dispatchSub('yes','detailForm')" class="dialog-define-btn display-flex-c cursor-pointer">确定
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,126 @@
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||||
<style>
|
||||
#replyDetail {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 20px;
|
||||
color: #444;
|
||||
}
|
||||
.del-image-btn {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #7438D5;
|
||||
color: #fff;
|
||||
top: -7px;
|
||||
right: -7px;
|
||||
}
|
||||
|
||||
.goods-images {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
border: 1px solid #7438D5;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.label-auto {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.add-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px dashed #E6E6E6;
|
||||
border-radius: 4px;
|
||||
justify-content: center;
|
||||
}
|
||||
.el-textarea{
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
|
||||
<div id="materialDetail" v-cloak>
|
||||
<div v-if="sourceType=='text'">
|
||||
<el-form :model="detailForm" ref="detailForm" :rules="rules" label-width="100px" class="demo-detailForm">
|
||||
<el-form-item label="标题:" prop="name">
|
||||
<el-input v-model="detailForm.name" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容:" prop="content">
|
||||
<el-input type="textarea" v-model="detailForm.content" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="sourceType=='link'">
|
||||
<el-form :model="detailForm" ref="detailForm" :rules="rules" label-width="100px" class="demo-detailForm">
|
||||
<el-form-item label="标题:" prop="name">
|
||||
<el-input v-model="detailForm.name" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" prop="description">
|
||||
<el-input type="textarea" v-model="detailForm.description" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片:" prop="image">
|
||||
<div class="display-flex">
|
||||
<div class="goods-image-box display-flex" v-if="detailForm.image">
|
||||
<div class="goods-images" style="margin-right: 0;">
|
||||
<img class="label-auto" :src="Fast.api.cdnurl(detailForm.image)"
|
||||
style="border-radius: 4px;">
|
||||
<div class="del-image-btn" @click="delImg('image',null)">
|
||||
<img class="label-auto" src="/assets/addons/shopro/img/goods/close.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-img display-flex" @click="addImg('image',null,false)"
|
||||
v-if="!detailForm.image">
|
||||
<i class="el-icon-plus"></i>
|
||||
</div>
|
||||
<!-- <div class="msg-tip"></div> -->
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接地址:" prop="url">
|
||||
<el-input v-model="detailForm.url" placeholder="http(s)://"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="dialog-footer" style="justify-content: space-between;">
|
||||
<el-popover placement="top" width="270" v-model="visible">
|
||||
<div class="popover-container">
|
||||
<p>文本内容</p>
|
||||
<p>
|
||||
<el-input v-model="hrefMsg"></el-input>
|
||||
</p>
|
||||
<p>链接地址</p>
|
||||
<p>
|
||||
<el-input v-model="hrefA" placeholder="http(s)://"></el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" @click="addHref()">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="addHref('yes')">确定</el-button>
|
||||
</div>
|
||||
<div style="margin-left: 100px;" v-if="sourceType=='text'" class="theme-color cursor-pointer" slot="reference">插入超链接</div>
|
||||
</el-popover>
|
||||
<div class="display-flex">
|
||||
<div @click="dispatchSub" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
|
||||
<div @click="dispatchSub('yes','detailForm')" class="dialog-define-btn display-flex-c cursor-pointer">确定
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,359 @@
|
||||
<meta name="referrer" content="never">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||||
<style>
|
||||
#materialIndex {
|
||||
background: #fff;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.el-tabs__nav {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
width: 80px !important;
|
||||
left: 10px;
|
||||
height: 3px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.el-tabs--top .el-tabs__item.is-top:last-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.custom-tabs {
|
||||
padding-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.custom-body {
|
||||
padding: 0 20px 30px;
|
||||
}
|
||||
|
||||
.v-waterfall-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.v-waterfall-item {
|
||||
float: left;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.v-waterfall-item>div {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.news-container {
|
||||
position: relative;
|
||||
height: calc(100vh - 270px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.news-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.news-container::-webkit-scrollbar-thumb {
|
||||
width: 6px;
|
||||
background: #e6e6e6;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.news-container .news-item {
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
margin: 0 30px 30px 0;
|
||||
transition: all 1s;
|
||||
/* border: 1px solid #E6E6E6; */
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.index-item {
|
||||
background: #fff;
|
||||
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.frist-item {
|
||||
position: relative;
|
||||
height: 136px;
|
||||
}
|
||||
|
||||
.frist-item .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.frist-item .frist-title {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
z-index: 100;
|
||||
background: linear-gradient(360deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
height: 42px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.other-items {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
padding: 0 10px 0 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.other-items .frist-title {
|
||||
width: 160px;
|
||||
line-height: 16px;
|
||||
margin-right: 18px;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
height: 50px;
|
||||
padding: 11px 0;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.other-items .el-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.custom-button-container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: all 0.6s;
|
||||
-ms-transition: all 0.8s;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
transform: scale(1.2);
|
||||
-ms-transform: scale(1.2);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.image-video-item .image-video-img {
|
||||
height: 136px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-video-item .el-image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-title {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.material-tip {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.tip-container {
|
||||
padding: 16px;
|
||||
border-radius: 5px;
|
||||
background-color: #F1EBFA;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tip-href,
|
||||
.tip-href:hover,
|
||||
.tip-href:focus {
|
||||
color: #7438D5;
|
||||
}
|
||||
.el-image{
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
<div id="materialIndex" v-cloak>
|
||||
<div class="material-tip">
|
||||
<div class="tip-container">
|
||||
<p><strong>素材说明</strong></p>
|
||||
<p class="display-flex">素材管理中图文消息、图片、视频、音频、需要您在公众号平台进行上传。 <a class="tip-href"
|
||||
href="https://mp.weixin.qq.com" target="_blank">微信公众号管理</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-tabs">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="图文消息" name="news"></el-tab-pane>
|
||||
<el-tab-pane label="图片" name="image"></el-tab-pane>
|
||||
<el-tab-pane label="视频" name="video"></el-tab-pane>
|
||||
<el-tab-pane label="音频" name="voice"></el-tab-pane>
|
||||
<el-tab-pane label="文本" name="text"></el-tab-pane>
|
||||
<el-tab-pane label="链接" name="link"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="custom-button-container">
|
||||
<div class="display-flex">
|
||||
<div class="custom-refresh" @click="getlistData">
|
||||
<i class="el-icon-refresh"></i>
|
||||
</div>
|
||||
{if condition = "$auth->check('shopro/wechat/material/add')"}
|
||||
<div v-if="activeName=='text' || activeName=='link'" class="create-btn" @click="operation('create',null)"><i
|
||||
class="el-icon-plus"></i>新建素材</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-body">
|
||||
<div class="news-container" v-if="activeName=='news'">
|
||||
<div class="news-item" v-for="item in listData">
|
||||
<a v-for="(it,index) in item.content.news_item" :class="index==0?'frist-item':'other-items'"
|
||||
:href="it.url" target="_blank" rel="noopener noreferrer">
|
||||
<div class="frist-title ellipsis-item-2">{{it.title}}</div>
|
||||
<el-image v-if="it.thumb_url" :src="Fast.api.cdnurl(it.thumb_url)"></el-image>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeName=='image' || activeName=='video'">
|
||||
<el-row :gutter="30">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" v-for="item in listData">
|
||||
<div class="index-item image-video-item">
|
||||
<template v-if="activeName=='image'">
|
||||
<div class="image-video-img">
|
||||
<el-image v-if="item.url" :src="Fast.api.cdnurl(item.url)" :preview-src-list="item.arr" fit="contain">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="image-title ellipsis-item">{{item.name}}</div>
|
||||
</template>
|
||||
<template v-if="activeName=='video'">
|
||||
<a :href="'https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&vid='+item.vid+'&auto=1'"
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
<div class="image-video-img">
|
||||
<el-image v-if="item.cover_url" :src="Fast.api.cdnurl(item.cover_url)" fit="contain">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="display-flex-b">
|
||||
<div class="pic-title ellipsis-item"
|
||||
style="height:36px;line-height: 36px;padding: 0 10px;">
|
||||
{{item.name}}</div>
|
||||
<div class="pic-title ellipsis-item" v-if="activeName=='video'"
|
||||
style="height:36px;line-height: 36px;padding: 0 10px;">
|
||||
{{item.newcat}}-{{item.newsubcat}}</div>
|
||||
</div>
|
||||
<div class="pic-title ellipsis-item" v-if="activeName=='video'"
|
||||
style="height:36px;line-height: 36px;padding: 0 10px;">
|
||||
{{item.content}}</div>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-if="activeName=='voice'">
|
||||
<el-row :gutter="30">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" v-for="item in listData">
|
||||
<a class="index-item btn-dialog" :href="'shopro/wechat/material/detail?media_id='+item.media_id">
|
||||
<div class="display-flex-b" style="padding: 14px 10px;">
|
||||
<div class="pic-title ellipsis-item" style="line-height: 28px;">
|
||||
{{item.name}}</div>
|
||||
<div class="theme-color" style="height: 28px;font-size: 20px;"><i
|
||||
class="el-icon-video-play"></i></div>
|
||||
</div>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-if="activeName=='text'">
|
||||
<el-row :gutter="30">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" v-for="item in listData">
|
||||
<div class="index-item" style="padding: 14px 0;">
|
||||
<div style="padding: 10px 10px;">
|
||||
<div class="pic-title ellipsis-item-2" style="line-height: 24px;height: 48px;">
|
||||
{{item.name}}</div>
|
||||
</div>
|
||||
<div class="display-flex" style="justify-content: flex-end;padding: 0 10px;">
|
||||
{if condition = "$auth->check('shopro/wechat/material/edit')"}
|
||||
<span class="table-edit-text" @click="operation('edit',item.id)">编辑</span>
|
||||
{/if}
|
||||
{if condition = "$auth->check('shopro/wechat/material/del')"}
|
||||
<span class="table-delete-text" @click="operation('delete',item.id)">删除</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-if="activeName=='link'">
|
||||
<el-row :gutter="30">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" v-for="item in listData">
|
||||
<div class="index-item" style="padding-top: 10px;">
|
||||
<a class="link-item" :href="JSON.parse(item.content).url" target="_blank">
|
||||
<div class="pic-title ellipsis-item" style="height:36px;line-height: 36px;padding: 0 10px;">
|
||||
{{item.name}}
|
||||
</div>
|
||||
<div class="display-flex" style="padding: 0 10px;">
|
||||
<div class="pic-title ellipsis-item-2 flex-1"
|
||||
style="line-height: 16px;padding-right: 10px;color:#666">
|
||||
{{JSON.parse(item.content).description}}</div>
|
||||
<el-image style="width: 32px;
|
||||
height: 32px;" v-if="item.content" :src="Fast.api.cdnurl(JSON.parse(item.content).image)"
|
||||
:preview-src-list="item.arr" fit="contain">
|
||||
</el-image>
|
||||
</div>
|
||||
</a>
|
||||
<div class="display-flex" style="justify-content: flex-end;padding: 10px 10px;">
|
||||
{if condition = "$auth->check('shopro/wechat/material/edit')"}
|
||||
<span class="table-edit-text" @click="operation('edit',item.id)">编辑</span>
|
||||
{/if}
|
||||
{if condition = "$auth->check('shopro/wechat/material/del')"}
|
||||
<span class="table-delete-text" @click="operation('delete',item.id)">删除</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<el-pagination @current-change="pageCurrentChange" :current-page="currentPage" :page-size="20"
|
||||
layout="total, prev, pager, next, jumper" :total="totalPage">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,464 @@
|
||||
<meta name="referrer" content="never">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<style>
|
||||
#wechat-menu {
|
||||
height: 640px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 20px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-body {
|
||||
height: 570px;
|
||||
background: #F2F2F6;
|
||||
border-radius: 6px;
|
||||
padding: 26px 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.body-left {
|
||||
width: 284px;
|
||||
height: 494px;
|
||||
background: #fff;
|
||||
border: 1px solid #E7E7EB;
|
||||
margin-right: 30px;
|
||||
padding-top: 444px;
|
||||
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
border-top: 1px solid #E7E7EB;
|
||||
}
|
||||
|
||||
.left-tip {
|
||||
color: #999;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 40px;
|
||||
border-right: 1px solid #E7E7EB;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-item-add {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-add-body {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
.menu-item-add-2 {
|
||||
width: 82px;
|
||||
height: 44px;
|
||||
border: 1px solid #E7E7EB;
|
||||
border-bottom: none;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.menu-item-add-2s {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
background: url('/assets/addons/shopro/img/wechat/add-btn.png');
|
||||
}
|
||||
|
||||
.body-right {
|
||||
flex: 1;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.body-right-content {
|
||||
background: #fff;
|
||||
height: 494px;
|
||||
}
|
||||
|
||||
.right-title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-bottom: #E7E7EB 1px solid;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.frist-show {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 494px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: #E74C3C;
|
||||
}
|
||||
|
||||
.select-body {
|
||||
padding: 20px 26px;
|
||||
}
|
||||
|
||||
.display-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.draggable-item {
|
||||
width: 82px;
|
||||
border-right: #E7E7EB 1px solid;
|
||||
}
|
||||
|
||||
.menu-active {
|
||||
border: 1px solid #7438D5;
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.menu-add-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: #444;
|
||||
padding-right: 30px;
|
||||
line-height: 34px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* radio */
|
||||
.el-radio__inner:hover,
|
||||
.el-input__inner:hover,
|
||||
.el-radio__inner:focus,
|
||||
.el-input__inner:focus {
|
||||
border-color: #7438D5;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked+.el-radio__label {
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
border-color: #7438D5;
|
||||
background: #7438D5;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-item {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.public-btn {
|
||||
width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #7438D5;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.seve-btn {
|
||||
border: 1px solid #7438D5;
|
||||
margin-right: 30px;
|
||||
background: #F2F2F6;
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
/* width: 400px; */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.select-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.select-url {
|
||||
width: 98px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background: #EAE4F5;
|
||||
border: 1px solid #B092E1;
|
||||
border-radius: 4px;
|
||||
margin-right: 30px;
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.left-tip i {
|
||||
font-size: 8px !important;
|
||||
}
|
||||
|
||||
.one-ellipsis {
|
||||
display: block;
|
||||
/* width: 130px; */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.ellipsis-item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/Sortable.min.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vuedraggable.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
|
||||
<div id="wechatMenu" v-cloak @click.stop="menuHide">
|
||||
<div class="menu-title">
|
||||
<div style="margin-right: 20px;">菜单名称</div>
|
||||
<el-input v-model="menuTitle" size="small" placeholder="请输入菜单名称"></el-input>
|
||||
</div>
|
||||
<div class="menu-body">
|
||||
<div class="body-left">
|
||||
<div class="left-bottom">
|
||||
<div class="menu-icon display-flex">
|
||||
<img src="/assets/addons/shopro/img/wechat/code.png">
|
||||
</div>
|
||||
<!-- 拖动组件 -->
|
||||
<draggable :list="menuData" v-bind="$attrs" class="menu-item" :options="{animation:100}">
|
||||
<div v-for="(item,index) in menuData" :key="index"
|
||||
class="draggable-item display-flex cursor-pointer" @click.stop="menuSelect(index,null)"
|
||||
:class="item.selected?'menu-active':''">
|
||||
<span v-if="item.sub_button.length>0" style="margin-right: 6px;">≡</span>{{item.name}}
|
||||
<div v-if="item.sub_button" class="menu-add-body" :class="item.show?'menu-add-show':''"
|
||||
:style="{'border-bottom':item.sub_button.length>=5?'1px solid #E7E7EB':'none'}">
|
||||
<div>
|
||||
<draggable :list="item.sub_button" v-bind="$attrs" :options="{animation:500}">
|
||||
<div class="menu-item-add-2 one-ellipsis" v-for="(it,idx) in item.sub_button"
|
||||
:key="idx" @click.stop="menuSelect(index,idx)"
|
||||
:class="it.selected?'menu-active':''">
|
||||
{{it.name}}
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="menu-item-add-2 menu-item-add-2s cursor-pointer"
|
||||
v-if="item.sub_button.length<5" @click.stop="addMenu(index,2)">
|
||||
<i class="el-icon-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="menu-item-add display-flex cursor-pointer" v-if="menuData.length<3"
|
||||
@click.stop="addMenu(null,1)">
|
||||
<i class="el-icon-plus"></i>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="left-tip">
|
||||
<i class="el-icon-rank margin-right-5" style="font-size: 8px;"></i>
|
||||
可直接拖动菜单排序
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right">
|
||||
<div class="body-right-content" v-if="rightShow" @click.stop="menuShow">
|
||||
<div class="right-title">
|
||||
<div class="cursor-pointer">添加<span v-if="selectLevel==2">子</span>菜单</div>
|
||||
<div class="delete-btn cursor-pointer" @click.stop="delMenu()">
|
||||
删除菜单
|
||||
</div>
|
||||
</div>
|
||||
<div class="select-body">
|
||||
<el-form ref="rightData" :model="rightData" label-width="106px">
|
||||
<el-form-item :label="selectLevel==2?'子菜单名称':'菜单名称'">
|
||||
<div class="select-tip">
|
||||
<el-input v-model="rightData.name" @keyup="limitLength()"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top:-20px">
|
||||
<div class="select-tip">
|
||||
<div class="tip" v-if="selectLevel==1">菜单名称字数不多于4个汉字或8个字母</div>
|
||||
<div class="tip" v-if="selectLevel==2">菜单名称字数不多于8个汉字或16个字母</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div v-if="(selectLevel==1 && rightData.sub_button==0) || selectLevel==2">
|
||||
<el-form-item :label="selectLevel==2?'子页面内容':'页面内容'">
|
||||
<el-radio-group v-model="rightData.type" @change="changeRadio()">
|
||||
<el-radio label="view">跳转网页</el-radio>
|
||||
<el-radio label="miniprogram">跳转小程序</el-radio>
|
||||
<el-radio label="click">回复素材</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div v-if="rightData.type=='click'">
|
||||
<el-form-item label="消息类型">
|
||||
<el-radio-group v-model="rightData.media_type" @change="typeChange">
|
||||
<el-radio label="news">图文消息</el-radio>
|
||||
<el-radio label="image">图片</el-radio>
|
||||
<el-radio label="video">视频</el-radio>
|
||||
<el-radio label="voice">音频</el-radio>
|
||||
<el-radio label="text">文本</el-radio>
|
||||
<el-radio label="link">链接</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="消息内容:" prop="media_id" v-if="rightData.media_type">
|
||||
<div class="display-flex">
|
||||
<div style="flex: 1;">
|
||||
<el-select style="position: relative;" v-model="rightData.media_id"
|
||||
@change="selectChange">
|
||||
<el-option v-for="item in options" :key="item.media_id"
|
||||
:label="item.title" :value="item.media_id+''">
|
||||
<div class="display-flex">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px"
|
||||
:src="Fast.api.cdnurl(item.thumb_url)"
|
||||
v-if="rightData.media_type!='voice' && rightData.media_type!='text' && rightData.media_type!='link'">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px" :src="Fast.api.cdnurl(item.image)"
|
||||
v-if="rightData.media_type=='link'">
|
||||
<div class="ellipsis-item" style="width: 60px;"
|
||||
v-if="rightData.media_type=='text' || rightData.media_type=='link'">
|
||||
{{ item.media_id }}</div>
|
||||
<div class="ellipsis-item" style="width: 100px;">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="ellipsis-item" style="flex: 1;"
|
||||
v-if="rightData.media_type!='text' && rightData.media_type!='link'">
|
||||
{{ item.media_id }}</div>
|
||||
<div class="ellipsis-item" style="flex: 1;"
|
||||
v-if="rightData.media_type=='text'">
|
||||
{{ item.thumb_url }}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
<div class="text-center display-flex"
|
||||
style="position: sticky;background: #fff;height:32px;top:0;z-index:1;justify-content: center;">
|
||||
<el-pagination class="pagination" :page-sizes="[20]"
|
||||
:current-page="selectCurrentPage" :total="selectTotalPage"
|
||||
layout="total, prev, pager,next, jumper" pager-count="20"
|
||||
@size-change.stop="selectSizeChange"
|
||||
@current-change="selectCurrentChange" />
|
||||
</el-pagination>
|
||||
<div class="theme-color cursor-pointer" style="margin-left: 8px;"
|
||||
@click="getoptions">
|
||||
跳转
|
||||
</div>
|
||||
</div>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="margin-left: 10px;cursor: pointer;color: #7438D5;"
|
||||
@click="createTemplate"
|
||||
v-if="rightData.media_type=='text' || rightData.media_type=='link'">创建</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label=""
|
||||
v-if="rightData.media_type && rightData.media_type!='text' && rightData.media_type!='link'">
|
||||
<div style="color: #666;">如果没有数据,请去公众号添加</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="AppId" v-if="rightData.type=='miniprogram'">
|
||||
<el-input v-model="rightData.appid"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="小程序路径" v-if="rightData.type=='miniprogram'">
|
||||
<div class="select-tip">
|
||||
<el-input v-model="rightData.pagepath"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top:-20px" v-if="rightData.type=='miniprogram'">
|
||||
<div class="select-tip">
|
||||
<div class="tip" v-if="rightData.type=='view'">点击该菜单会跳到页面链接</div>
|
||||
<div class="tip" v-if="rightData.type=='miniprogram'">小程序路径不可用时跳转页面链接</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top:-20px" v-if="rightData.type=='view'">
|
||||
<div class="select-tip">
|
||||
<div class="tip" v-if="rightData.type=='view'">点击该菜单会跳到页面链接</div>
|
||||
<div class="tip" v-if="rightData.type=='miniprogram'">小程序路径不可用时跳转页面链接</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="页面链接" v-if="rightData.type=='view' || rightData.type=='miniprogram'">
|
||||
<div class="select-tip">
|
||||
<el-input v-model="rightData.url"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="rightData.type=='view' || rightData.type=='miniprogram'">
|
||||
<div class="select-tip">
|
||||
<div class="select-url cursor-pointer" @click.stop="choosePath">选择路径</div>
|
||||
<div>{{rightData.url_name}}</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="frist-show">
|
||||
点击左侧菜单进行编辑操作
|
||||
</div>
|
||||
<div class="save-item">
|
||||
<div class="public-btn seve-btn cursor-pointer" @click.stop="subData('save')">保存</div>
|
||||
<div class="public-btn cursor-pointer" @click.stop="subData('publish')">保存&发布</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,470 @@
|
||||
<meta name="referrer" content="never">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<style>
|
||||
#wechat-menu {
|
||||
height: 640px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 20px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-body {
|
||||
height: 570px;
|
||||
background: #F2F2F6;
|
||||
border-radius: 6px;
|
||||
padding: 26px 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.body-left {
|
||||
width: 284px;
|
||||
height: 494px;
|
||||
background: #fff;
|
||||
border: 1px solid #E7E7EB;
|
||||
margin-right: 30px;
|
||||
padding-top: 444px;
|
||||
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
border-top: 1px solid #E7E7EB;
|
||||
}
|
||||
|
||||
.left-tip {
|
||||
color: #999;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 40px;
|
||||
border-right: 1px solid #E7E7EB;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-item-add {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-add-body {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
.menu-item-add-2 {
|
||||
width: 82px;
|
||||
height: 44px;
|
||||
border: 1px solid #E7E7EB;
|
||||
border-bottom: none;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.menu-item-add-2s {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
background: url('/assets/addons/shopro/img/wechat/add-btn.png');
|
||||
}
|
||||
|
||||
.body-right {
|
||||
flex: 1;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.body-right-content {
|
||||
background: #fff;
|
||||
height: 494px;
|
||||
}
|
||||
|
||||
.right-title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-bottom: #E7E7EB 1px solid;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.frist-show {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 494px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: #E74C3C;
|
||||
}
|
||||
|
||||
.select-body {
|
||||
padding: 20px 26px;
|
||||
}
|
||||
|
||||
.display-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.draggable-item {
|
||||
width: 82px;
|
||||
border-right: #E7E7EB 1px solid;
|
||||
}
|
||||
|
||||
.menu-active {
|
||||
border: 1px solid #7438D5;
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.menu-add-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: #444;
|
||||
padding-right: 30px;
|
||||
line-height: 34px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* radio */
|
||||
.el-radio__inner:hover,
|
||||
.el-input__inner:hover,
|
||||
.el-radio__inner:focus,
|
||||
.el-input__inner:focus {
|
||||
border-color: #7438D5;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked+.el-radio__label {
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
border-color: #7438D5;
|
||||
background: #7438D5;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-item {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.public-btn {
|
||||
width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #7438D5;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.seve-btn {
|
||||
border: 1px solid #7438D5;
|
||||
margin-right: 30px;
|
||||
background: #F2F2F6;
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
/* width: 400px; */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.select-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.select-url {
|
||||
width: 98px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background: #EAE4F5;
|
||||
border: 1px solid #B092E1;
|
||||
border-radius: 4px;
|
||||
margin-right: 30px;
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.left-tip i {
|
||||
font-size: 8px !important;
|
||||
}
|
||||
|
||||
.one-ellipsis {
|
||||
display: block;
|
||||
/* width: 130px; */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
color: #7438D5;
|
||||
}
|
||||
|
||||
.ellipsis-item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/Sortable.min.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vuedraggable.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
|
||||
<div id="wechatMenu" v-cloak @click.stop="menuHide">
|
||||
<div class="menu-title">
|
||||
<div style="margin-right: 20px;">菜单名称</div>
|
||||
<el-input v-model="menuTitle" size="small" placeholder="请输入菜单名称"></el-input>
|
||||
</div>
|
||||
<div class="menu-body">
|
||||
<div class="body-left">
|
||||
<div class="left-bottom">
|
||||
<div class="menu-icon display-flex">
|
||||
<img src="/assets/addons/shopro/img/wechat/code.png">
|
||||
</div>
|
||||
<!-- 拖动组件 -->
|
||||
<draggable :list="menuData" v-bind="$attrs" class="menu-item" :options="{animation:100}">
|
||||
<div v-for="(item,index) in menuData" :key="index"
|
||||
class="draggable-item display-flex cursor-pointer" @click.stop="menuSelect(index,null)"
|
||||
:class="item.selected?'menu-active':''">
|
||||
<span v-if="item.sub_button.length>0" style="margin-right: 6px;">≡</span>{{item.name}}
|
||||
<div v-if="item.sub_button" class="menu-add-body" :class="item.show?'menu-add-show':''"
|
||||
:style="{'border-bottom':item.sub_button.length>=5?'1px solid #E7E7EB':'none'}">
|
||||
<div>
|
||||
<draggable :list="item.sub_button" v-bind="$attrs" :options="{animation:500}">
|
||||
<div class="menu-item-add-2 one-ellipsis" v-for="(it,idx) in item.sub_button"
|
||||
:key="idx" @click.stop="menuSelect(index,idx)"
|
||||
:class="it.selected?'menu-active':''">
|
||||
{{it.name}}
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="menu-item-add-2 menu-item-add-2s cursor-pointer"
|
||||
v-if="item.sub_button.length<5" @click.stop="addMenu(index,2)">
|
||||
<i class="el-icon-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="menu-item-add display-flex cursor-pointer" v-if="menuData.length<3"
|
||||
@click.stop="addMenu(null,1)">
|
||||
<i class="el-icon-plus"></i>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="left-tip">
|
||||
<i class="el-icon-rank margin-right-5" style="font-size: 8px;"></i>
|
||||
可直接拖动菜单排序
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right">
|
||||
<div class="body-right-content" v-if="rightShow" @click.stop="menuShow">
|
||||
<div class="right-title">
|
||||
<div class="cursor-pointer">添加<span v-if="selectLevel==2">子</span>菜单</div>
|
||||
<div class="delete-btn cursor-pointer" @click.stop="delMenu()">
|
||||
删除菜单
|
||||
</div>
|
||||
</div>
|
||||
<div class="select-body">
|
||||
<el-form ref="rightData" :model="rightData" label-width="106px">
|
||||
<el-form-item :label="selectLevel==2?'子菜单名称':'菜单名称'">
|
||||
<div class="select-tip">
|
||||
<el-input v-model="rightData.name" @keyup="limitLength()"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top:-20px">
|
||||
<div class="select-tip">
|
||||
<div class="tip" v-if="selectLevel==1">菜单名称字数不多于4个汉字或8个字母</div>
|
||||
<div class="tip" v-if="selectLevel==2">菜单名称字数不多于8个汉字或16个字母</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div v-if="(selectLevel==1 && rightData.sub_button==0) || selectLevel==2">
|
||||
<el-form-item :label="selectLevel==2?'子页面内容':'页面内容'">
|
||||
<el-radio-group v-model="rightData.type" @change="changeRadio">
|
||||
<el-radio label="view">跳转网页</el-radio>
|
||||
<el-radio label="miniprogram">跳转小程序</el-radio>
|
||||
<el-radio label="click">回复素材</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div v-if="rightData.type=='click'">
|
||||
<el-form-item label="消息类型">
|
||||
<el-radio-group v-model="rightData.media_type" @change="typeChange">
|
||||
<el-radio label="news">图文消息</el-radio>
|
||||
<el-radio label="image">图片</el-radio>
|
||||
<el-radio label="video">视频</el-radio>
|
||||
<el-radio label="voice">音频</el-radio>
|
||||
<el-radio label="text">文本</el-radio>
|
||||
<el-radio label="link">链接</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="消息内容:" prop="media_id" v-if="rightData.media_type">
|
||||
<div class="display-flex">
|
||||
<div style="flex: 1;">
|
||||
<el-select style="position: relative;" v-model="rightData.media_id"
|
||||
@change="selectChange">
|
||||
<el-option v-for="item in options" :key="item.media_id"
|
||||
:label="item.title" :value="item.media_id+''">
|
||||
<div class="display-flex">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px"
|
||||
:src="Fast.api.cdnurl(item.thumb_url)"
|
||||
v-if="rightData.media_type!='voice' && rightData.media_type!='text' && rightData.media_type!='link'">
|
||||
<img style="width: 30px;
|
||||
height: 30px;margin-right:20px" :src="Fast.api.cdnurl(item.image)"
|
||||
v-if="rightData.media_type=='link'">
|
||||
<div class="ellipsis-item" style="width: 60px;"
|
||||
v-if="rightData.media_type=='text' || rightData.media_type=='link'">
|
||||
{{ item.media_id }}</div>
|
||||
<div class="ellipsis-item" style="width: 100px;">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="ellipsis-item" style="flex: 1;"
|
||||
v-if="rightData.media_type!='text' && rightData.media_type!='link'">
|
||||
{{ item.media_id }}</div>
|
||||
<div class="ellipsis-item" style="flex: 1;"
|
||||
v-if="rightData.media_type=='text'">
|
||||
{{ item.thumb_url }}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
<div class="text-center display-flex"
|
||||
style="position: sticky;background: #fff;height:32px;top:0;z-index:1;justify-content: center;">
|
||||
<el-pagination class="pagination" :page-sizes="[20]"
|
||||
:current-page="selectCurrentPage" :total="selectTotalPage"
|
||||
layout="total, prev, pager,next, jumper" pager-count="20"
|
||||
@size-change.stop="selectSizeChange"
|
||||
@current-change="selectCurrentChange" />
|
||||
</el-pagination>
|
||||
<div class="theme-color cursor-pointer" style="margin-left: 8px;"
|
||||
@click="getoptions">
|
||||
跳转
|
||||
</div>
|
||||
</div>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="margin-left: 10px;cursor: pointer;color: #7438D5;"
|
||||
@click="createTemplate"
|
||||
v-if="rightData.media_type=='text' || rightData.media_type=='link'">创建</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label=""
|
||||
v-if="rightData.media_type && rightData.media_type!='text' && rightData.media_type!='link'">
|
||||
<div style="color: #666;">如果没有数据,请去公众号添加</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="rightData.type=='miniprogram'">
|
||||
<el-form-item label="AppId">
|
||||
<el-input v-model="rightData.appid" @input="()=>{this.$forceUpdate();}"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="小程序路径">
|
||||
<div class="select-tip">
|
||||
<el-input v-model="rightData.pagepath" @input="()=>{this.$forceUpdate();}"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top:-20px">
|
||||
<div class="select-tip">
|
||||
<div class="tip" v-if="rightData.type=='view'">点击该菜单会跳到页面链接</div>
|
||||
<div class="tip" v-if="rightData.type=='miniprogram'">小程序路径不可用时跳转页面链接</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item style="margin-top:-20px" v-if="rightData.type=='view'">
|
||||
<div class="select-tip">
|
||||
<div class="tip" v-if="rightData.type=='view'">点击该菜单会跳到页面链接</div>
|
||||
<div class="tip" v-if="rightData.type=='miniprogram'">小程序路径不可用时跳转页面链接</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div v-if="rightData.type=='view' || rightData.type=='miniprogram'">
|
||||
<el-form-item label="页面链接">
|
||||
<div class="select-tip">
|
||||
<input type="text" class="hidden" v-model="rightData.url">
|
||||
<el-input v-model="rightData.url" @input="()=>{this.$forceUpdate();}"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="select-tip">
|
||||
<div class="select-url cursor-pointer" @click.stop="choosePath">选择路径</div>
|
||||
<div>{{rightData.url_name}}</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="frist-show">
|
||||
点击左侧菜单进行编辑操作
|
||||
</div>
|
||||
<div class="save-item">
|
||||
<div class="public-btn seve-btn cursor-pointer" @click.stop="subData('save')">保存</div>
|
||||
<div class="public-btn cursor-pointer" @click.stop="subData('publish')">保存&发布</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,133 @@
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||||
<style>
|
||||
#listsIndex {
|
||||
padding: 0 20px 30px;
|
||||
background: #fff;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.current-menu {
|
||||
/* border: 1px solid #e6e6e6; */
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
/* margin-bottom: 10px; */
|
||||
margin-left: 70px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.current-menu-title {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.table-edit-publish,
|
||||
.table-edit-copy {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-edit-publish {
|
||||
color: #18d3a9
|
||||
}
|
||||
|
||||
.span-item {
|
||||
padding: 5px 10px;
|
||||
background: rgba(157, 96, 255, 0.1);
|
||||
border: 1px solid rgba(157, 96, 255, 0.5);
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
margin-right: 6px;
|
||||
line-height: 12px;
|
||||
color: #A268FF;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
|
||||
<div id="listsIndex" v-cloak>
|
||||
<div class="custom-header">
|
||||
<div class="custom-header-title">
|
||||
菜单管理
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-button-container">
|
||||
<div class="display-flex">
|
||||
<div class="custom-refresh" @click="getList">
|
||||
<i class="el-icon-refresh"></i>
|
||||
</div>
|
||||
{if condition = "$auth->check('shopro/wechat/menu/add')"}
|
||||
<div class="create-btn" @click="operation('create',null)"><i class="el-icon-plus"></i>新建菜单</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="current-menu display-flex-b" v-if="currentMenu.length>0">
|
||||
<div class="current-menu-title">当前菜单</div>
|
||||
<div style="border: 1px solid #e6e6e6;height: 32px;flex: 1;border-radius: 4px;" class="display-flex">
|
||||
<div class="display-flex" style="flex: 1;padding: 5px;">
|
||||
<div class="span-item" v-for="item in currentMenu">{{item.name}}</div>
|
||||
</div>
|
||||
{if condition = "$auth->check('shopro/wechat/menu/copy')"}
|
||||
<el-button type="primary" size="small" @click="operation('copy',0)">复制</el-button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-table-body">
|
||||
<el-table :data="listData" border style="width: 100%" :row-class-name="tableRowClassName"
|
||||
:cell-class-name="tableCellClassName" :header-cell-class-name="tableCellClassName"
|
||||
@row-dblclick="operation">
|
||||
<el-table-column prop="id" label="ID" width="60">
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单名称" min-width="500">
|
||||
<template slot-scope="scope">
|
||||
<div class="display-flex">
|
||||
<div class="ellipsis-item" style="margin-right: 40px;width: 200px;">{{scope.row.name}}</div>
|
||||
<div class="display-flex">
|
||||
<div class="span-item" v-for="item in JSON.parse(scope.row.content)">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<div class="opt-container display-flex">
|
||||
{if condition = "$auth->check('shopro/wechat/menu/publish')"}
|
||||
<div class="table-edit-publish" @click="operation('status',scope.row.id)">
|
||||
发布
|
||||
</div>
|
||||
{/if}
|
||||
{if condition = "$auth->check('shopro/wechat/menu/edit')"}
|
||||
<div class="table-edit-text" @click="operation('edit',scope.row.id)">
|
||||
编辑
|
||||
</div>
|
||||
{/if}
|
||||
{if condition = "$auth->check('shopro/wechat/menu/copy')"}
|
||||
<div class="table-edit-copy" @click="operation('copy',scope.row.id)">复制</div>
|
||||
{/if}
|
||||
{if condition = "$auth->check('shopro/wechat/menu/del')"}
|
||||
<div class="table-delete-text" @click="operation('delete',scope.row.id)">
|
||||
删除
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalPage">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
在新工单中引用
屏蔽一个用户