vue仿微信公众号添加菜单代码
(由于是php项目,已经单独引入了vue.js 不想引入太多 ajax就用jq 和vue混合开发…)
<extend name="Common/body" />
<block name="css">
<style>
.con>.con-l>.l-bottom>.list>.box>.hidden {
display: none
}
.con>.con-l>.l-bottom>.list>.box {
position: relative;
}
.con>.con-l>.l-bottom>.list>.box>.sub-list {
position: absolute;
bottom: 125%;
left: 1%;
text-decoration: none;
background-color: #fafafa;
inline-size: 1;
}
.con>.con-l>.l-bottom>.list>.box>.sub-list>.sub-box {
height: 45px;
/* width: 132px; */
border: 1px solid #e7e7eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #353535;
}
.active1 {
color: #07c160 !important;
border: 0.5px #07c160 solid !important;
}
.con>.con-l>.l-bottom>.list>.box>.sub-list>.box-none {
text-decoration: none;
height: 45px;
/* width: 132px; */
border: 1px solid #e7e7eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #c1c1c1;
position: relative;
}
.con {
display: flex;
/* padding-top: 30px; */
}
.con-l {
width: 300px;
height: 600px;
margin: 0 50px 0 0;
}
.con-l>.l-top {
width: 320px;
height: 60px;
background-image: url("../../../../Public/Admin/images/phone-top.png");
background-size: 320px 64px;
background-repeat: no-repeat;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.con-l>.l-top>span {
margin-top: 20px;
}
.con-l>.l-middle {
width: 318px;
height: 500px;
border-left: 1px solid #e7e7eb;
border-right: 1px solid #e7e7eb;
border-bottom: 0.5px solid #e7e7eb;
}
.con-l>.l-bottom {
width: 318px;
height: 50px;
background-image: url("../../../../Public/Admin/images/phone-bottom.png");
background-size: 318px 50px;
background-repeat: no-repeat;
border: 0.5px solid #e7e7eb;
}
.con-l>.l-bottom>.list {
height: 50px;
/* background-color: #c1c1c1; */
margin-left: 42px;
display: flex;
/* border-top: 1px solid #e7e7eb; */
}
.con-l>.l-bottom>.list>.box {
width: 100%;
height: 50px;
/* background-color: #c1c1c1; */
/* margin-left: 40px; */
display: flex;
border-right: 0.5px solid #e7e7eb;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #353535
}
.con-l>.l-bottom>.list>.box-none {
width: 100%;
height: 50px;
/* background-color: #c1c1c1; */
/* margin-left: 40px; */
display: flex;
border: solid #e7e7eb;
border-width: 0 0.5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
color: #c1c1c1;
text-decoration: none;
}
.con-l>.l-bottom>.list>.box-none-one {
width: 100%;
height: 50px;
/* background-color: #c1c1c1; */
/* margin-left: 40px; */
display: flex;
border: solid #e7e7eb;
border-width: 0 0.5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #c1c1c1;
text-decoration: none;
}
.con-l>.l-bottom>.list>.active {
color: #07c160;
border: 0.5px #07c160 solid;
}
.icon {
display: inline-block;
width: 0;
height: 0;
border-width: 12px;
border-style: dashed;
border-color: transparent;
border-left-width: 0;
border-right-color: #e7e7eb;
border-right-style: solid;
position: absolute;
bottom: 2%;
left: -1%;
border-right-color: #f4f5f9;
}
.con-r {
position: relative;
width: 1066px;
height: 610px;
background-color: #f4f5f9;
padding: 0 30px;
}
.con-r-show {
width: 1066px;
height: 610px;
}
/* .con-r>.r-top>.top-left {} */
.con-r>.r-top>.top-right {
color: #576b95;
}
.con-r>.r-top {
color: #576b95;
}
.con-r>.r-top {
height: 40px;
width: 1066px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e7e7eb;
}
.con-r>.r-content {
padding-top: 40px;
/* height: 40px; */
width: 1066px;
}
.con-r>.r-content>.title {
display: flex;
}
.con-r>.r-content>.title>.title-l {
margin: 5px 30px 0 0;
}
.con-r>.r-content>.title>.title-r {}
.con-r>.r-content>.title>.title-r>.input {
background-color: #fff;
border: 0;
outline: 0;
width: 228px;
height: 30px;
padding: 5px;
}
.con-r>.r-content>.title>.title-r>.tip {
color: #9a9a9a;
font-size: 14px;
}
.con-r>.content-c {
display: flex;
align-items: center;
margin-top: 30px;
color: #7f7f7f;
}
.con-r>.content-c>.c-left {
margin-right: 30px;
}
.con-r>.content-c>#radio-list {
/* margin-right: 30px; */
display: flex;
justify-content: center;
align-items: center;
margin: 0 !important;
line-height: 0 !important;
padding: 0 !important;
}
.con-r>.content-c>#radio-list>#input1 {
margin: 0;
}
/* .con-r>.content-c>.c-left>.input {} */
.con-r>.content-b {
background-color: #fff;
margin-top: 30px;
padding: 20px 20px;
}
.con-r>.content-b>.b-top {
color: #9a9a9a;
margin-bottom: 20px;
}
.con-r>.content-b>.b-bottom {
display: flex;
align-items: center;
}
.con-r>.content-b>.b-bottom>.text {
margin-right: 10px;
}
.con-r>.content-b>.b-bottom>.input {
border: 0.5px solid #e7e7eb;
padding: 5px;
outline: 0;
}
.btns {
display: flex;
justify-content: space-between;
align-items: center;
width: 320px;
}
.btns>.btn1 {
margin: 20px 30px 0 20px;
background-color: #06ad56;
border: none;
border-radius: 5px;
width: 120px;
height: 35px;
color: #fff;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.wechat-menu {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px;
}
</style>
</block>
<block name="content">
<div id="app">
<div class="wechat-menu">
<div class="con">
<div class="con-l">
<div class="l-top">
<span> 壹点视群</span>
</div>
<div class="l-middle"></div>
<div class="l-bottom">
<div class="list">
<div class="box" :class="item.active == 1 ? 'active': ''" draggable="true"
v-for="(item, index) in buttonList" :key="index">
<input class="hidden" id="hiddenVal" name="{{item.url}}" value="" />
<div @click="getActive(index)"> {{item.name}}</div>
<div class="sub-list">
<div class="sub-box " v-for="(item3,index3) in item.sub_button" :key="index3"
:style="buttonList.length == 1 ?'width: 132px;':'width: 85px;'"
:class="item3.active == 1 ? 'active1': ''" @click="getSubActive(index3,index)">
{{item3.name}}
</div>
<a href="#" @click="getSubClick(index)"
:style="buttonList.length == 1 ?'width: 132px;':'width: 85px;'" class="box-none"
title="最多添加五个菜单" v-show="item.sub_button.length < 5 ">+
</a>
</div>
</div>
<a href="#" id="boxNone" class="box-none-one active" v-show="buttonList.length == 0"
title="最多添加三个菜单" @click="getClick()">+添加菜单</a>
<a href="#" id="boxNoneB" @click="getClick()" class="box-none"
v-show="buttonList.length < 3 && buttonList.length != 0" title="最多添加三个菜单">+</a>
</div>
</div>
</div>
<div class="con-r-show">
<!-- 主菜单 -->
<div class="con-r" v-show="buttonList.length != 0 && item2.active == 1"
v-for="(item2,index2) in buttonList" :key="index2">
<span class="icon">
</span>
<div class="r-top">
<div class="top-left">菜单名称</div>
<div class="top-right" @click="getDel(index2)">删除菜单</div>
</div>
<div class="r-content">
<div class="title">
<div class="title-l">菜单名称</div>
<div class="title-r">
<input class="input" maxlength="8" v-model="buttonList[index2].name"
@input="getText($event)">
<div class="tip">仅支持中文和数字,字数不超过4个汉字或者8个字母</div>
</div>
</div>
</div>
<div class="content-c">
<div class="c-left">菜单内容</div>
<!-- <label> -->
<label id="radio-list">
<!-- <input class="input" name="" checked="checked" type="radio" value="跳转网页" ></input> -->
<radio id="input1" name="" value="跳转网页"></radio>
</label>
</div>
<div class="content-b">
<div class="b-top">订阅者点击该子菜单会跳到以下链接</div>
<div class="b-bottom">
<div class="text">页面地址</div>
<input class="input" @input="getUrl($event)" v-model="buttonList[index2].url"
placeholder="请输入网址">
</input>
</div>
</div>
</div>
<!-- 子菜单 -->
<div v-if="buttonList[ids]">
<div class="con-r" v-if="buttonList.length != 0 && item5.active == 1"
v-for="(item5,index5) in buttonList[ids].sub_button" :key="index5">
<span class="icon">
</span>
<div class="r-top">
<div class="top-left">菜单名称</div>
<div class="top-right" @click="getSubDel(index5)">删除菜单</div>
</div>
<div class="r-content">
<div class="title">
<div class="title-l">菜单名称</div>
<div class="title-r">
<input class="input" maxlength="8"
v-model="buttonList[ids].sub_button[index5].name" @input="getText($event)">
<div class="tip">仅支持中文和数字,字数不超过4个汉字或者8个字母</div>
</div>
</div>
</div>
<div class="content-c">
<div class="c-left">菜单内容</div>
<div class="radio-list">
<radio id="input1" name="" value="跳转网页"></radio>
</div>
</div>
<div class="content-b">
<div class="b-top">订阅者点击该子菜单会跳到以下链接</div>
<div class="b-bottom">
<div class="text">页面地址</div>
<input class="input" @input="getUrl($event)"
v-model="buttonList[ids].sub_button[index5].url" placeholder="请输入网址">
</input>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btns" v-show="buttonList.length != 0">
<button class="btn1" @click="getShow()">保存</button>
<button class="btn1" @click="getShowNow()">发布</button>
</div>
</div>
</div>
</block>
<block name="js">
<script src="__PUBLIC__/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/common.js"></script>
<script src="__PUBLIC__/simpleboot/extend/js/layer/layer.js"></script>
<script src="__PUBLIC__/js/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
list: "",
ids: "0",
num: "0",
isShowRight: false,
buttonList: [
{
type: "view",
name: "菜单名称",
url: "",
active: "0",
sub_button: [],
}
],
},
mounted() {
this.getMenu();
},
methods: {
async getMenu() {
const _this = this;
await $.post(
"/index.php?m=admin&c=system_setting&a=wechatMenu"
).done(function (res) {
_this.buttonList = res;
});
await this.buttonList.forEach((item, index) => {
if (item.active == 1) {
// this.isShowRight = true;
this.getActive(index)
} else {
if (item.sub_button) {
item.sub_button.forEach((item2, index2) => {
if (item2.active == 1) {
this.getSubActive(index2, index)
}
})
}
}
});
},
getClick() {
this.buttonList.push({
type: "view",
name: "菜单名称",
url: "",
active: "0",
sub_button: [],
})
console.log(this.buttonList);
},
getSubClick(num) {
console.log(num);
console.log(this.buttonList);
this.buttonList[num].sub_button.push({
type: "view",
name: "子菜单",
url: "",
active: "0"
})
},
// // 输入名称
getText(e) {
},
// // 输入网址
getUrl(e) {
}
,
getSubDel(num) {
console.log("子菜单");
var r = confirm("确认删除此菜单吗?");
if (r == true) {
var list = this.buttonList[this.ids].sub_button;
list.splice(num, 1);
// list.pop(list[num]);
} else {
return
}
},
getDel(num) {
console.log("主菜单");
console.log(num);
console.log(this.buttonList[num]);
var r = confirm("确认删除此菜单吗?");
if (r == true) {
var list = this.buttonList;
list.splice(num, 1);
console.log(list.length);
} else {
return
}
},
getActive(index) {
this.buttonList.forEach(item => {
item.active = 0
if (item.sub_button) {
item.sub_button.forEach(item2 => {
item2.active = 0
})
}
});
this.buttonList[index].active = 1;
}
,
getSubActive(subIndex, index) {
this.ids = index;
this.buttonList.forEach(item => {
item.active = 0
if (item.sub_button) {
item.sub_button.forEach(item2 => {
item2.active = 0
})
}
});
this.buttonList[index].sub_button[subIndex].active = 1;
}
,
getShow() {
console.log(this.buttonList);
$.post(
"/index.php?m=admin&c=system_setting&a=saveWechatMenu",
{
menu: { button: this.buttonList }
}
).done(function (result) {
if (result.status == 1) {
layer.msg(result.info, {
icon: 1,
time: 2000
});
setInterval(function () {
window.location.href = result.url;
}, 2000);
} else {
layer.msg(result.info, {
icon: 2
});
}
});
},
getShowNow() {
$.post(
"/index.php?m=admin&c=system_setting&a=publishWechatMenu", {}
).done(function (result) {
if (result.status == 1) {
layer.msg(result.info, {
icon: 1,
time: 2000
});
setInterval(function () {
window.location.href = result.url;
}, 2000);
} else {
layer.msg(result.info, {
icon: 2
});
}
});
}
}
})
</script>
</block>