517 行
22 KiB
HTML
可执行文件
517 行
22 KiB
HTML
可执行文件
<!--[1.8.76]-->
|
||
<link href="__PUBLIC__/user/css/customMenu.css" rel="stylesheet"/>
|
||
<style type="text/css">
|
||
.cri2 {
|
||
display: block;
|
||
}
|
||
|
||
.cri_b_left01 img {
|
||
width: 100px;
|
||
height: 100px
|
||
}
|
||
|
||
.active {
|
||
border-color: #409EFF;
|
||
}
|
||
|
||
.custom_right0402 {
|
||
color: #409EFF;
|
||
}
|
||
|
||
.custom_right01_del {
|
||
color: #409EFF;
|
||
}
|
||
|
||
.custom_left02_r02_c_t {
|
||
position: absolute;
|
||
transform: scale(0.9);
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.custom {
|
||
padding-left: 360px !important;
|
||
}
|
||
</style>
|
||
<div class="custom" id="WeChatMenuApp" v-cloak
|
||
v-loading="loading"
|
||
:element-loading-text="menuLoadingText"
|
||
element-loading-spinner="el-icon-loading">
|
||
<div class="custom_left">
|
||
<div class="custom_left01">{$merConf.name}</div>
|
||
<div class="custom_left02">
|
||
<div class="custom_left02_l">
|
||
<img src="__PUBLIC__/user/images/keyboard.png"/>
|
||
</div>
|
||
<div class="custom_left02_r">
|
||
<div class="custom_left02_r01" v-for="(item,key) in buttonList">
|
||
<div :class="key==active&&findActive==-1?'active':''" @click="unitWxMenu(key)"
|
||
class="custom_left02_r01_1">{{item.name}}
|
||
</div>
|
||
<div class="custom_left02_r02">
|
||
<div v-for="(items,keys) in item.sub_button"
|
||
class="custom_left02_r02_c"
|
||
:class="key==active&&keys==findActive?'active':''"
|
||
@click="findClick(key,keys)">
|
||
<span class="custom_left02_r02_c_t">{{items.name}}</span>
|
||
</div>
|
||
<div class="custom_left02_create2" v-show="buttonList[key]['sub_button'].length<5"
|
||
@click="addFindMenu(key)">+添加子菜单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="custom_left02_create" @click="addButton" v-show="buttonList.length<3">+添加菜单</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template v-if="buttonList.length">
|
||
<div class="custom_right">
|
||
<div class="custom_right01">
|
||
<span>自定义菜单</span>
|
||
<span class="custom_right01_del" @click="delMenu">删除菜单</span>
|
||
</div>
|
||
<div class="custom_right02">第一步：在左侧选择需要编辑的菜单，并对菜单进行命名</div>
|
||
<div class="custom_right03" v-if="!isFind">
|
||
<div class="custom_right03_l">主菜单名称</div>
|
||
<div class="custom_right03_r">
|
||
<div class="custom_right03_r01">
|
||
<el-input size="small" v-model="buttonList[active]['name']" placeholder="请输入菜单名称"
|
||
maxLength="6"></el-input>
|
||
</div>
|
||
<div class="custom_right03_r02">字数不超过6个汉字</div>
|
||
</div>
|
||
</div>
|
||
<div class="custom_right03" v-else>
|
||
<div class="custom_right03_l">子菜单名称</div>
|
||
<div class="custom_right03_r">
|
||
<div class="custom_right03_r01">
|
||
<el-input v-model="buttonList[active]['sub_button'][findActive]['name']"
|
||
size="small"
|
||
oninput="value=getStrLen(this.value)>16?splitLenStr(this.value,16):this.value"
|
||
placeholder="请输入菜单名称"></el-input>
|
||
</div>
|
||
<div class="custom_right03_r02">字数不超过8个汉字</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="isMenuConfig">
|
||
<div class="custom_right04">
|
||
<span>第二步：设置点击该菜单所触发的动作事件</span>
|
||
<span class="custom_right0402" @click="editMenu">修改菜单</span>
|
||
</div>
|
||
<div class="custom_right05_box" v-show="menuShow">
|
||
<div class="custom_right05">
|
||
<div class="custom_right05_inner">
|
||
<img src="__PUBLIC__/user/images/url.png" @click="showSetUrl"/>
|
||
<span>网址链接</span>
|
||
</div>
|
||
<div class="custom_right05_inner custom_right05_inner04" @click="showSelectLink = true">
|
||
<img src="__PUBLIC__/user/images/more.png"/>
|
||
<span>功能入口</span>
|
||
</div>
|
||
<div class="custom_right05_inner custom_right05_inner04" @click="showOtherSmallProgram = true">
|
||
<img src="__PUBLIC__/user/images/more.png"/>
|
||
<span>其他小程序入口</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cri cri2" v-show="urlShow">
|
||
<div class="cri2Box">
|
||
<div class="cri2_a" style="white-space: nowrap;">页面网址</div>
|
||
<div class="cri2_b" style="width: 70%;padding-right: 20px">
|
||
<div class="cri2_b01" style="width: 100%">
|
||
<el-input size="small"
|
||
@blur="setPageUrl" max-width="520px" v-model="pageUrls"
|
||
placeholder="例如：https://www.xxxxxxx.com"></el-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-button style="margin-left: 154px;margin-top: 5px"
|
||
type="primary" size="small"
|
||
@click="showChooseVipPath=true">获取会员卡内部地址
|
||
</el-button>
|
||
</div>
|
||
<el-dialog title="选择会员卡内部地址"
|
||
:visible.sync="showChooseVipPath"
|
||
:close-on-click-modal="false"
|
||
:modal-append-to-body="false"
|
||
:append-to-body="false"
|
||
width="600px"
|
||
:close-on-press-escape="false">
|
||
<el-table border size="small" :data="vipPathList">
|
||
<el-table-column align="center" prop="name" label="页面" min-width="100"></el-table-column>
|
||
<el-table-column align="center" prop="path" label="地址" min-width="70"></el-table-column>
|
||
<el-table-column align="center" label="操作" min-width="90">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="primary" plain round @click="useVipPath(scope.row.path)">使用
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
</div>
|
||
<div class="custom_right06">
|
||
<el-button type="primary" @click="submitMenu">保存并发布</el-button>
|
||
</div>
|
||
</template>
|
||
<div v-else>未添加菜单</div>
|
||
<el-dialog title="填写其他小程序" :modal-append-to-body="false" :visible.sync="showOtherSmallProgram" width="600px"
|
||
:close-on-click-modal="false">
|
||
<div style="padding: 0 20px">
|
||
<el-form label-width="120px">
|
||
<el-form-item label="小程序appID">
|
||
<el-input type="text" v-model="tempAppID"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="小程序入口地址">
|
||
<el-input type="text" v-model="tempUrl" placeholder="如: /pages/store/store"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button size="small" @click="showOtherSmallProgram = false">取 消</el-button>
|
||
<el-button size="small" type="primary" @click="sureChooseOtherSmallProgram">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog title="选择功能入口" :modal-append-to-body="false" :visible.sync="showSelectLink" width="600px"
|
||
:close-on-click-modal="false">
|
||
<div style="padding: 0 20px">
|
||
<div class="cri">
|
||
<div class="cri1_a" v-for="(fnItem,index) in fnList">
|
||
<div class="cri1_a01">{{fnItem.name}}</div>
|
||
<div class="cri1_a02" style="width: 50%;">{{fnItem.desc}}</div>
|
||
<div class="cri1_a05">
|
||
<el-button :type="selectFnIndex==index?'primary':''" size="small"
|
||
@click="selectFnIndex = index">
|
||
{{selectFnIndex==index?'已选择':'选择'}}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button size="small" @click="showSelectLink = false">取 消</el-button>
|
||
<el-button size="small" type="primary" @click="sureSelectLink">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
<script>
|
||
/**
|
||
* 获取字符长度包含中文
|
||
* @param str
|
||
* @returns {*}
|
||
*/
|
||
function getStrLen(str) {
|
||
str = str.replace(/[^\u0391-\uFFE5]/g, "aa");
|
||
let len = str.length; //先把中文替换成两个字节的英文，在计算长度
|
||
return len;
|
||
}
|
||
|
||
/**
|
||
* 截取字符串指定长度字符
|
||
* @param str
|
||
* @param len
|
||
*/
|
||
function splitLenStr(str, len) {
|
||
let count = 0;
|
||
var reg = /[^\u0391-\uFFE5]/g;
|
||
let flag = false;
|
||
for (let i = 0; i < str.length; i++) {
|
||
if (reg.test(str[i])) {
|
||
count += 2;
|
||
if (count > len) {
|
||
count -= 2;
|
||
flag = true;
|
||
}
|
||
} else {
|
||
count++;
|
||
}
|
||
if (count == len) {
|
||
flag = true;
|
||
}
|
||
if (flag) {
|
||
str = str.substr(0, i);
|
||
break;
|
||
}
|
||
}
|
||
return str;
|
||
}
|
||
|
||
var WeChatMenuApp = new Vue({
|
||
el: '#WeChatMenuApp',
|
||
data() {
|
||
return {
|
||
showChooseVipPath: false,//是否显示选择会员卡地址
|
||
vipPathList: [
|
||
{name: '会员卡首页', path: 'Index/index.html'},
|
||
{name: '充值', path: 'Onlinepay/index.html'},
|
||
{name: '积分商城', path: 'ScoreMall/index.html'},
|
||
{name: '修改密码', path: 'Set/forgetpwd.html'},
|
||
],//会员卡地址列表
|
||
buttonList: [],
|
||
//存放图文消息的数组
|
||
wxSourse: [],
|
||
canAdd: true,
|
||
active: 0,
|
||
buttonName: "",
|
||
isFind: false,
|
||
isMenuConfig: true,
|
||
findActive: -1,
|
||
menuShow: true,
|
||
sendMsgShow: false,
|
||
urlShow: false,
|
||
//被选中的卡券
|
||
cardSelected: null,
|
||
media_url: null,
|
||
wxSelected: null,
|
||
sourceActive: 1,
|
||
newInfo: {'title': null, 'pic': null, 'desc': null},
|
||
fnList: [
|
||
{index: 1, name: '小程序商城入口', desc: '点击设置小程序商城的入口（小程序需要和公众号绑定）'},
|
||
{index: 2, name: '积分商城入口', desc: '商家开启积分商城之后可以使用该入口功能'}
|
||
],
|
||
selectFnIndex: null,
|
||
pageUrls: null,
|
||
showSelectLink: false,
|
||
tempAppID: '',
|
||
tempUrl: '',
|
||
showOtherSmallProgram: false,
|
||
loading: false,
|
||
menuLoadingText: '',
|
||
}
|
||
},
|
||
created() {
|
||
//加载时就执行的方法
|
||
this.getWxMenu();
|
||
},
|
||
methods: {
|
||
//从接口获取微信菜单数据
|
||
getWxMenu() {
|
||
this.sendRequest('{:U("getMenu")}', {
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.buttonList = res.data;
|
||
res.data.length && this.unitWxMenu(0);
|
||
} else {
|
||
this.$message.error(res.message)
|
||
}
|
||
},
|
||
})
|
||
},
|
||
addButton() {
|
||
//添加一个一级菜单数组到data中
|
||
const obj = {
|
||
type: 'view',
|
||
name: '',
|
||
sub_button: [],
|
||
}
|
||
this.buttonList.push(obj);
|
||
},
|
||
unitWxMenu(key) {
|
||
this.active = key;
|
||
//判断如果有子级菜单 就不显示选项
|
||
if (this.buttonList[key].sub_button.length > 0) {
|
||
this.isMenuConfig = false;
|
||
} else {
|
||
this.isMenuConfig = true;
|
||
}
|
||
this.isFind = false;
|
||
this.findActive = -1;
|
||
var type = this.buttonList[key]['type'];
|
||
//对应的菜单展现出来
|
||
switch (type) {
|
||
case 'view':
|
||
//网址 展现网址菜单
|
||
this.showSetUrl();
|
||
this.pageUrls = this.buttonList[key]['url'];
|
||
break;
|
||
default:
|
||
this.editMenu();
|
||
break;
|
||
}
|
||
},
|
||
//子级菜单被点击
|
||
findClick(key, keys) {
|
||
this.isFind = true;
|
||
this.isMenuConfig = true;
|
||
//参数对应一下
|
||
this.active = key;
|
||
this.findActive = keys;
|
||
var type = this.buttonList[key].sub_button[keys].type;
|
||
//对应的菜单展现出来
|
||
switch (type) {
|
||
case 'view':
|
||
//网址 展现网址菜单
|
||
this.showSetUrl();
|
||
this.pageUrls = this.buttonList[key].sub_button[keys].url;
|
||
break;
|
||
default:
|
||
this.editMenu();
|
||
break;
|
||
}
|
||
},
|
||
//添加子菜单
|
||
addFindMenu(index) {
|
||
const obj = {
|
||
type: '',
|
||
name: '',
|
||
url: ''
|
||
}
|
||
//子级菜单没有事件
|
||
this.active = index;
|
||
//判断之前的长度
|
||
if (!this.buttonList[index].sub_button.length) {
|
||
this.$confirm('添加子菜单后，主菜单的功能内容将被清除,确定添加子菜单?', '温馨提示', {
|
||
confirmButtonText: '添加',
|
||
showCancelButton: false,
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.buttonList[index].sub_button.push(obj);
|
||
this.buttonList[index].type = null;
|
||
this.buttonList[index].key = null;
|
||
}).catch(() => {
|
||
})
|
||
} else {
|
||
this.buttonList[index].sub_button.push(obj);
|
||
}
|
||
},
|
||
//删除菜单
|
||
delMenu() {
|
||
const active = this.active;
|
||
const findactive = this.findActive;
|
||
//判断当前菜单选中的是主菜单还是子菜单
|
||
if (!this.isFind) {
|
||
//删除主菜单
|
||
if (this.buttonList[active].sub_button.length > 0) {
|
||
return this.$message.error('无法删除，该菜单下还有子菜单')
|
||
} else {
|
||
this.$confirm('确定要删除这个菜单？删除后不可恢复', '温馨提示', {
|
||
confirmButtonText: '删除',
|
||
showCancelButton: false,
|
||
type: 'error'
|
||
}).then(() => {
|
||
this.buttonList.splice(active, 1)
|
||
this.unitWxMenu(0);
|
||
}).catch(() => {
|
||
})
|
||
}
|
||
} else {
|
||
//删除子菜单
|
||
this.$confirm('确定要删除这个子菜单？删除后不可恢复', '温馨提示', {
|
||
confirmButtonText: '删除',
|
||
showCancelButton: false,
|
||
type: 'error'
|
||
}).then(() => {
|
||
this.buttonList[active].sub_button.splice(findactive, 1)
|
||
this.unitWxMenu(0);
|
||
}).catch(() => {
|
||
})
|
||
}
|
||
},
|
||
//展示设置链接
|
||
showSetUrl() {
|
||
this.menuShow = false;
|
||
this.sendMsgShow = false;
|
||
this.urlShow = true;
|
||
},
|
||
//使用会员卡内部地址
|
||
useVipPath(path) {
|
||
let merchant_id = localStorage.merchant_id;
|
||
this.pageUrls = 'http://' + window.location.host + '/index.php/Vip/' + path + '?merchantid=' + merchant_id;
|
||
this.showChooseVipPath = false;
|
||
this.$nextTick(() => {
|
||
this.setPageUrl();
|
||
})
|
||
},
|
||
//确定选择功能
|
||
sureSelectLink() {
|
||
if (!this.isFind) {
|
||
//一级菜单触发的事件
|
||
this.buttonList[this.active].type = 'custom';
|
||
this.buttonList[this.active].index = this.fnList[this.selectFnIndex].index;
|
||
} else {
|
||
//子级菜单触发的事件
|
||
this.buttonList[this.active].sub_button[this.findActive].type = 'custom';
|
||
this.buttonList[this.active].sub_button[this.findActive].index = this.fnList[this.selectFnIndex].index;
|
||
}
|
||
this.selectFnIndex = null;
|
||
this.showSelectLink = false;
|
||
},
|
||
//确定添加其他小程序
|
||
sureChooseOtherSmallProgram() {
|
||
if (!this.tempAppID || !this.tempUrl) {
|
||
return;
|
||
}
|
||
var active = this.active;
|
||
// console.log(this.buttonList);
|
||
var tempAppID = this.tempAppID;
|
||
var tempUrl = this.tempUrl;
|
||
if (!this.isFind) {
|
||
//一级菜单触发的事件
|
||
//获取cardid wx_code;
|
||
this.buttonList[active].type = 'custom';
|
||
this.buttonList[active].index = 1;
|
||
this.buttonList[active].appid = tempAppID;
|
||
this.buttonList[active].pagepath = tempUrl;
|
||
//获取一级信息
|
||
} else {
|
||
//获取cardid wx_code;
|
||
this.buttonList[active].sub_button[this.findActive].type = 'custom';
|
||
this.buttonList[active].sub_button[this.findActive].index = 1;
|
||
this.buttonList[active].sub_button[this.findActive].appid = tempAppID;
|
||
this.buttonList[active].sub_button[this.findActive].pagepath = tempUrl;
|
||
//子级菜单触发的事件
|
||
}
|
||
this.showOtherSmallProgram = false;
|
||
},
|
||
//编辑菜单
|
||
editMenu() {
|
||
this.menuShow = true;
|
||
this.sendMsgShow = false;
|
||
this.urlShow = false;
|
||
},
|
||
//设置页面路径
|
||
setPageUrl() {
|
||
if (!this.isFind) {
|
||
//一级菜单触发的事件
|
||
this.buttonList[this.active].type = 'view';
|
||
this.buttonList[this.active].url = this.pageUrls;
|
||
} else {
|
||
//子级菜单触发的事件
|
||
this.buttonList[this.active].sub_button[this.findActive].type = 'view';
|
||
this.buttonList[this.active].sub_button[this.findActive].url = this.pageUrls;
|
||
}
|
||
},
|
||
//保存菜单设置
|
||
submitMenu() {
|
||
this.$confirm('确定要保存菜单设置吗？', '温馨提示', {
|
||
confirmButtonText: '保存',
|
||
showCancelButton: false,
|
||
type: 'info'
|
||
}).then(() => {
|
||
//获取数据并且发布信息
|
||
this.loading = true;
|
||
this.menuLoadingText = '提交中，请等待';
|
||
|
||
this.sendRequest('{:U("upMenu")}', {
|
||
data: {
|
||
data: this.buttonList
|
||
},
|
||
success: (res) => {
|
||
this.loading = false;
|
||
if (res.status == 1) {
|
||
this.$message.success(res.message)
|
||
} else {
|
||
this.$message.error(res.message)
|
||
}
|
||
},
|
||
})
|
||
}).catch(() => {
|
||
})
|
||
}
|
||
}
|
||
});
|
||
</script> |