Files

439 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<div class="wechat-reply-wrapper wechat-menu">
<div class="ibox-content clearfix">
<el-row :gutter="20">
<el-col :span="8">
<div class="view-wrapper col-sm-4">
<div class="mobile-header">公众号</div>
<section class="view-body">
<div class="time-wrapper"><span class="time">9:36</span></div>
</section>
<div class="menu-footer">
<ul class="flex">
<li v-for="(menu, index) in menus" :class="{active:menu === checkedMenu}">
<span @click="activeMenu(menu,index,null)"><i class="icon-sub" />{{ menu.name || '一级菜单' }}</span>
<div class="sub-menu">
<ul>
<li v-for="(child, cindex) in menu.subButtons" :class="{active:child === checkedMenu}">
<span @click="activeMenu(child,cindex,index)">{{ child.name || '二级菜单' }}</span>
</li>
<li v-if="menu.subButtons.length < 5" @click="addChild(menu,index)"><i class="icon-add" /></li>
</ul>
</div>
</li>
<li v-if="menus.length < 3" @click="addMenu()"><i class="icon-add" /></li>
</ul>
</div>
</div>
</el-col>
<el-col :span="12">
<div v-show="checkedMenuId !== null" class="control-wrapper menu-control col-sm-8">
<section>
<div class="control-main">
<h3 class="popover-title">菜单名称 <a class="fr" href="javascript:void(0);" @click="delMenu">删除</a></h3>
<p class="tips-txt">已添加子菜单仅可设置菜单名称</p>
<div class="menu-content control-body">
<form action="">
<div class="form-group clearfix">
<label for="" class="el-form-item__label" style="width: 80px;">菜单名称</label>
<div class="col-sm-9 group-item">
<input v-model="checkedMenu.name" type="text" placeholder="菜单名称" style="width: 370px;" class="el-input__inner">
</div>
</div>
<div class="form-group clearfix">
<label class="el-form-item__label" style="width: 80px;" for="">规则状态</label>
<div class="group-item col-sm-9">
<select id="" v-model="checkedMenu.type" style="width: 370px;" class="el-input__inner" name="">
<option value="click">关键字</option>
<option value="view">跳转网页</option>
<option value="miniprogram">小程序</option>
</select>
</div>
</div>
<div class="menu-control-box">
<!-- 关键字 -->
<div class="keywords item" :class="{show:checkedMenu.type=='click'}">
<span class="el-form-item__label">关键字</span>
<input v-model="checkedMenu.key" type="text" placeholder="请输入关键字" class="form-control">
</div>
<!-- 跳转地址 -->
<div class="url item" :class="{show:checkedMenu.type=='view'}">
<span class="el-form-item__label">跳转地址</span>
<input v-model="checkedMenu.url" type="text" placeholder="请输入跳转地址" class="form-control">
<p class="text-left" />
</div>
<!-- 小程序 -->
<div class="wrchat-app item" :class="{show:checkedMenu.type=='miniprogram'}">
<div class="list">
<span class="el-form-item__label">appId</span>
<input v-model="checkedMenu.appId" class="form-control" type="text">
</div>
<div class="list">
<span class="el-form-item__label">备用网页url</span>
<input v-model="checkedMenu.url" class="form-control" type="text">
</div>
<div class="list">
<span class="el-form-item__label">小程序路径</span>
<input v-model="checkedMenu.pagePath" class="form-control" type="text">
</div>
</div>
<!-- 多客服 -->
<div class="service item">
<p>回复内容</p>
<textarea cols="60" rows="10" />
</div>
</div>
</form>
</div>
</div>
</section>
</div>
</el-col>
</el-row>
</div>
<div class="ibox-content submit">
<button class="el-button el-button--primary" @click="submit">保存发布</button>
</div>
</div>
</div>
</template>
<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { del, add, get } from '@/api/yxCache'
import eForm from './form'
import { Message } from 'element-ui'
export default {
components: { eForm },
mixins: [initData],
data() {
return {
delLoading: false,
menus: [],
checkedMenu: {
type: 'click',
name: ''
},
checkedMenuId: null,
parentMenuId: null
}
},
created() {
get().then(res => {
this.menus = JSON.parse(res.result)
})
},
methods: {
checkPermission,
beforeInit() {
this.url = 'api/yxCache'
const sort = 'key,desc'
this.params = { page: this.page, size: this.size, sort: sort }
return true
},
subDelete(key) {
this.delLoading = true
del(key).then(res => {
this.delLoading = false
this.$refs[key].doClose()
this.dleChangePage()
this.init()
this.$notify({
title: '删除成功',
type: 'success',
duration: 2500
})
}).catch(err => {
this.delLoading = false
this.$refs[key].doClose()
console.log(err.response.data.message)
})
},
add() {
this.isAdd = true
this.$refs.form.dialog = true
},
edit(data) {
this.isAdd = false
const _this = this.$refs.form
_this.form = {
key: data.key,
result: data.result,
addTime: data.addTime
}
_this.dialog = true
},
defaultMenusData: function() {
return {
type: 'click',
name: '',
subButtons: []
}
},
defaultChildData: function() {
return {
type: 'click',
name: ''
}
},
addMenu: function() {
if (!this.check()) return false
var data = this.defaultMenusData(); var id = this.menus.length
this.menus.push(data)
this.checkedMenu = data
this.checkedMenuId = id
this.parentMenuId = null
},
addChild: function(menu, index) {
if (!this.check()) return false
var data = this.defaultChildData(); var id = menu.subButtons.length
menu.subButtons.push(data)
this.checkedMenu = data
this.checkedMenuId = id
this.parentMenuId = index
},
delMenu: function() {
console.log(this.parentMenuId)
this.parentMenuId === null
? this.menus.splice(this.checkedMenuId, 1) : this.menus[this.parentMenuId].subButtons.splice(this.checkedMenuId, 1)
this.parentMenuId = null
this.checkedMenu = {}
this.checkedMenuId = null
},
activeMenu: function(menu, index, pid) {
if (!this.check()) return false
pid === null
? (this.checkedMenu = menu) : (this.checkedMenu = this.menus[pid].subButtons[index], this.parentMenuId = pid)
this.checkedMenuId = index
},
check: function() {
if (this.checkedMenuId === null) return true
if (!this.checkedMenu.name) {
// $eb.message('请输入按钮名称!');
this.$message({
message: '请输入按钮名称',
type: 'error',
duration: 1000,
onClose: () => {
// this.init()
}
})
return false
}
if (this.checkedMenu.type == 'click' && !this.checkedMenu.key) {
// $eb.message('请输入关键字!');
this.$message({
message: '请输入关键字',
type: 'error',
duration: 1000,
onClose: () => {
// this.init()
}
})
return false
}
if (this.checkedMenu.type == 'view' && !this.checkedMenu.url) {
this.$message({
message: '请输入跳转地址',
type: 'error',
duration: 1000,
onClose: () => {
// this.init()
}
})
return false
}
if (this.checkedMenu.type == 'miniprogram' &&
(!this.checkedMenu.appId ||
!this.checkedMenu.pagePath ||
!this.checkedMenu.url)) {
// $eb.message('请填写完整小程序配置!');
this.$message({
message: '请填写完整小程序配置',
type: 'error',
duration: 1000,
onClose: () => {
// this.init()
}
})
return false
}
return true
},
submit: function() {
// this.$message.error('错了哦,这是一条错误消息')
// return false;
if (!this.check()) return false
// console.log(this.menus.length)
if (!this.menus.length) {
this.$message({
message: '请添加菜单',
type: 'error',
duration: 1000
})
return false
}
add({ buttons: this.menus }).then(function(res) {
console.log(555)
Message({ message: '添加成功', type: 'success' })
}).catch(function(err) {
// $eb.message('error',err);
// this.$message.error('错了哦,这是一条错误消息');
// Message({message: "2222",type: 'error'})
})
}
}
}
</script>
<style rel="stylesheet/scss" scoped>
body {
font-family: "open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
}
.form-control, .single-line {
background-color: #FFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 6px 12px;
-webkit-transition: border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;
transition: border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;
width: 100%;
font-size: 14px;}
.flex{ display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; }
#app .layout-ceiling-main a{ color:#9ba7b5}
#table-list .mp-search-wrapper{ float: right; margin-left: 12px; }
#table-list .mp-header-wrapper{ overflow: hidden; }
#table-list .mp-header-wrapper h1{ padding-left:15px; float: left; font-size: 18px; line-height: 24px; padding-bottom: 20px; font-weight: 400; color: #464c5b; }
.mp-form{ padding: 20px 20px 20px 0; }
.mp-form .ivu-tree li{ margin: 0; }
.mp-form .ivu-color-picker .ivu-select-dropdown{ left: -38px !important; }
.mp-form .mp-upload{ display: inline-block; }
.mp-form .demo-upload-list{ display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.2); margin-right: 4px; }
.mp-form .demo-upload-list img{ width: 100%; height: 100%; }
.mp-form .demo-upload-list-cover{ display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); }
.mp-form .demo-upload-list:hover .demo-upload-list-cover{ display: block; }
.mp-form .demo-upload-list-cover i{ color: #fff; font-size: 20px; cursor: pointer; margin: 0 2px; }
[v-cloak]{ display: none}
.mp-form .mp-upload-btn{ width:58px; height:58px; line-height:58px; }
.mp-form .add-submit-item .ivu-btn{ position: fixed; left: 0; bottom: 0; border-radius: 0; }
.vertical-center-modal .ivu-modal{ top: 0; }
.vertical-center-modal .ivu-modal-header{ z-index: 9; position: relative; }
.vertical-center-modal .ivu-modal-close{ z-index: 10; }
.wechat-reply-wrapper .fl{ float: left; }
.wechat-reply-wrapper .fr{ float: right; }
.wechat-reply-wrapper .clearfix:after{ content:"."; display:block; height:0; visibility:hidden; clear:both; }
.wechat-reply-wrapper .ibox-title{ padding:15px; font-size: 16px; border-bottom: 1px solid #e7eaec; }
.wechat-reply-wrapper .ibox-title p{ border-left: 2px solid #2494f2; text-indent: 8px; }
.wechat-reply-wrapper .ibox-content{ padding: 15px; }
.wechat-reply-wrapper .ibox-content .view-wrapper{ position: relative; width: 317px; background-image:url(../../../assets/wechat/mobile_head.png); background-repeat: no-repeat; background-position: left top; background-color: #f5f5f5; }
.wechat-reply-wrapper .ibox-content .view-wrapper .mobile-header{ position: relative; left: 0; top: 36px; width: 100%; text-align: center; color: #fff; font-size: 16px; }
.wechat-reply-wrapper .ibox-content .view-wrapper .view-body{ margin-top: 65px; background-color: #f5f5f5; height: 500px; }
.wechat-reply-wrapper .view-wrapper .view-body .time-wrapper{ margin-bottom: 10px; text-align: center; }
.wechat-reply-wrapper .view-wrapper .view-body .time-wrapper .time{ display: inline-block; color: #f5f5f5; display: inline-block; color: #f5f5f5; background: rgba(0,0,0,.3); padding: 3px 8px; border-radius: 3px; font-size: 12px; }
.wechat-reply-wrapper .view-wrapper .view-body .view-item{ display: none; }
.wechat-reply-wrapper .view-wrapper .view-body .view-item.show{ display: none; }
.wechat-reply-wrapper .view-wrapper .view-body .view-item .avatar{ width: 40px; height: 40px; }
.wechat-reply-wrapper .view-wrapper .view-body .view-item .avatar img{ max-width: 100%; height: auto; }
.wechat-reply-wrapper .view-wrapper .view-body .view-item .box-content{ position: relative; max-width: 60%; min-height: 40px; margin-left: 15px; padding: 10px; border: 1px solid #ccc; word-break: break-all; word-wrap: break-word; line-height: 1.5; border-radius: 5px; }
.wechat-reply-wrapper .view-wrapper .view-body .view-item .box-content .picbox{ max-width: 100%; }
.wechat-reply-wrapper .view-wrapper .view-body .view-item .box-content:before{ content: ''; position: absolute; left: -13px; top: 11px; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #ccc; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.wechat-reply-wrapper .view-wrapper .view-body .view-item .box-content:after{ content: ''; content: ''; position: absolute; left: -12px; top: 11px; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #f5f5f5; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.wechat-reply-wrapper .submit{text-align: center;}
/* 图文 */
.view-wrapper .view-body .view-item.news-box{ width: 100%; background-color: #fff; border-radius: 5px; }
.view-wrapper .view-body .view-item .vn-content{ padding:0;}
.view-wrapper .view-body .view-item .vn-content .vn-title{ line-height: 1.5; font-size: 16px; }
.view-wrapper .view-body .view-item .vn-content .vn-time{ padding: 5px 0; font-size: 12px; color: #999; }
.view-wrapper .view-body .view-item .vn-content .vn-picture{ width: 100%; height: 150px; background-size: cover; background-position: center center; border-radius: 5px 5px 0 0;}
.view-wrapper .view-body .view-item .vn-content .vn-picture-info{ line-height: 22px; color: #7b7b7b; padding: 0; display: block; overflow: hidden; word-break: break-all; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.view-wrapper .view-body .view-item .vn-more{ display: block; padding: 10px 0 0; border-top: 1px solid #dddddd; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.view-wrapper .view-body .view-item .vn-content .con-item-box{ position: relative; }
.view-wrapper .view-body .view-item .vn-content .con-item-box .first-title{ width: 100%; height: 44px; line-height: 44px; font-size: 14px; position: absolute; left: 0; bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /*background: rgba(0,0,0,.8);*/ color: #fff; text-indent: 1em; }
.view-wrapper .view-body .view-item .vn-content .con-item-list{ margin-top: 10px; margin:6px 10px 0 10px; border-top: 1px solid #FBFBFB; }
.view-wrapper .view-body .view-item .vn-content .con-item-list .list-tit-info{ width: 70%; line-height: 1.5; word-wrap:break-word; }
.view-wrapper .view-body .view-item .vn-content .con-item-list .list-pic{ width: 20%; min-height: 50px; background-size: cover; background-position: center center; }
/* 音乐 */
.view-wrapper .view-body .view-item.music-box .box-content{ position: relative; width: 100%; background: #080; color: #fff; border-color: #080; }
.view-wrapper .view-body .view-item.music-box .box-content p{ width: 75%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.view-wrapper .view-body .view-item.music-box .box-content .music-icon{ position: absolute; right: 11px; top: 50%; width: 30px; height: 30px; background: #0a0; text-align: center; line-height: 30px; margin-top: -15px; font-size: 16px; }
.view-wrapper .view-body .view-item.music-box .box-content:after{ display: none; }
.view-wrapper .view-body .view-item.music-box .box-content:before{ border-top: 10px solid #080; }
/* 视频 */
.view-wrapper .view-body .view-item.video-box{ width: 100%; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; }
.view-wrapper .view-body .view-item.video-box .vn-title{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 右侧控制器 */
.wechat-reply-wrapper .ibox-content .control-wrapper{ position: relative; width: 535px; height: 565px; padding: 0; margin-left: 20px; border: 1px solid #e2e2e2; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-title{ position: absolute; left: 71px; top: -12px; width: auto; padding: 0 10px; font-size: 20px; background-color: #fff; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body{ margin-top: 40px; padding: 0 10px; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group label{ font-weight: normal; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group .tips:after{ content: '*'; color: red; position: absolute; margin-left: 4px; font-weight: bold; line-height: 1.8em; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group .group-item{ position: relative; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group .group-item .file-btn{ position: absolute; right: 15px; top: 0; display: block; width: 66px; border-radius: 6px; cursor: pointer; padding: .5rem; background-color: #18a689; color: #fff; text-align: center; height: 100%; line-height: 23px; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group .group-item textarea{ resize: none; width: 100%; height: 100px; padding: 10px; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body .tips-info{ padding-left: 100px; font-size: 12px; color: #737373; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body .control-main .control-item{ display: none; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body .control-main .control-item.show{ display: block; }
/* 微信菜单定制 */
.wechat-menu{ position: relative; }
.wechat-menu ul{ padding: 0; }
.wechat-menu .menu-footer{ position: absolute; left:0; bottom: -10px; width: 100%; padding-left: 43px; background: url("../../../assets/wechat/mobile_foot.png") no-repeat 0px 20px; border-top: 1px solid #e7e7eb; }
.wechat-menu .menu-footer span{display: block;}
.wechat-menu .menu-footer .icon-add{ background: url(../../../assets/wechat/index.png) 0 0 no-repeat; width: 14px; height: 14px; vertical-align: middle; display: inline-block; margin-top: -2px; border-bottom: none!important; }
.wechat-menu .menu-footer li{ position: relative; -webkit-flex: 1; -moz-flex:1; -ms-flex: 1; flex: 1; height: 50px; line-height: 50px; text-align: center; cursor: pointer; list-style: none; border: 1px solid transparent; border-right: 1px solid #e7e7eb; }
.wechat-menu .menu-footer .icon-sub{ background: url(../../../assets/wechat/index.png) 0 -48px no-repeat; width: 7px; height: 7px; vertical-align: middle; display: inline-block; margin-right: 2px; margin-top: -2px; }
.wechat-menu .menu-footer .sub-menu{ position: absolute; border-radius: 3px; border: 1px solid #d0d0d0; display: block; bottom: 60px; width: 100%; background-color: #fafafa; }
.wechat-menu .menu-footer .sub-menu:after{ content: ''; position: absolute; width: 10px; height: 10px; background: #fafafa;-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); bottom: -5px; border-bottom: 1px solid #d0d0d0; border-right: 1px solid #d0d0d0; left: 50%; margin-left: -5px; }
.wechat-menu .menu-footer .sub-menu li{border-right: 0; border-bottom: 1px solid #d0d0d0;}
.wechat-menu .menu-footer .sub-menu li:last-child{border-bottom: 0;}
.wechat-menu .menu-footer .active{border:1px solid #44b549;}
.wechat-menu .menu-footer .sub-menu li.active{border:1px solid #44b549 !important;}
/* 右侧 */
.wechat-menu .menu-control .popover-title{ padding: 8px 14px; margin: 0; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; font-weight: 400; }
.wechat-menu .menu-control .popover-title a{ color: #06C; font-size: 12px; }
.wechat-menu .menu-control .tips-txt{line-height: 40px; padding: 0 20px;}
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body.menu-content{ padding: 0 20px; margin-top: 0; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body.menu-content .radio{ display: inline-block !important; width: 45%; }
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body.menu-content .menu-control-box {padding: 0 20px;}
.wechat-reply-wrapper .ibox-content .control-wrapper .control-body.menu-content .menu-control-box .radio{ display: block!important; width: 100%; }
.menu-control-box .item{ display: none; }
.menu-control-box .show{ display: block; }
</style>