Initial commit: 小众厨房项目代码

Co-authored-by: Cursor <cursoragent@cursor.com>
这个提交包含在:
可乐加冰
2026-09-23 17:04:10 +08:00
当前提交 f7d3d7d1bd
共有 1761 个文件被更改,包括 453668 次插入 和 0 次删除

查看文件

@@ -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>