BJ_ZTEITS-Developers / parking-cloud-yudao

	1	+<!--
	2	+MIT License
	3	+
	4	+Copyright (c) 2020 www.joolun.com
	5	+
	6	+Permission is hereby granted, free of charge, to any person obtaining a copy
	7	+of this software and associated documentation files (the "Software"), to deal
	8	+in the Software without restriction, including without limitation the rights
	9	+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	10	+copies of the Software, and to permit persons to whom the Software is
	11	+furnished to do so, subject to the following conditions:
	12	+
	13	+The above copyright notice and this permission notice shall be included in all
	14	+copies or substantial portions of the Software.
	15	+
	16	+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	17	+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	18	+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	19	+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	20	+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	21	+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
	22	+SOFTWARE.
	23	+-->
	24	+<template>
	25	+ <div class="app-container">
	26	+ <div class="public-account-management clearfix" v-loading="saveLoading">
	27	+ <!--左边配置菜单-->
	28	+ <div class="left">
	29	+ <div class="weixin-hd">
	30	+ <div class="weixin-title">
	31	+ {{menuName}}
	32	+ </div>
	33	+ </div>
	34	+ <div class="weixin-menu menu_main clearfix">
	35	+ <div class="menu_bottom" v-for="(item, i) of menu.button" :key="i" >
	36	+ <!-- 一级菜单 -->
	37	+ <div @click="menuFun(i,item)" class="menu_item el-icon-s-fold" :class="{'active': isActive == i}">{{item.name}}</div>
	38	+ <!--以下为二级菜单-->
	39	+ <div class="submenu" v-if="isSubMenuFlag == i">
	40	+ <div class="subtitle menu_bottom" v-if="item.sub_button" v-for="(subItem, k) in item.sub_button" :key="k">
	41	+ <div class="menu_subItem" :class="{'active': isSubMenuActive == i + '' +k}" @click="subMenuFun(subItem, i, k)">{{subItem.name}}</div>
	42	+ </div>
	43	+ <!-- 二级菜单加号，当长度小于 5 才显示二级菜单的加号 -->
	44	+ <div class="menu_bottom menu_addicon" v-if="!item.sub_button \|\| item.sub_button.length < 5" @click="addSubMenu(i,item)"><i class="el-icon-plus"></i></div>
	45	+ </div>
	46	+ </div>
	47	+ <!-- 一级菜单加号 -->
	48	+ <div class="menu_bottom menu_addicon" v-if="menuKeyLength < 3" @click="addMenu"><i class="el-icon-plus"></i></div>
	49	+ </div>
	50	+ <div class="save_div">
	51	+ <!--<el-button class="save_btn" type="warning" size="small" @click="saveFun">保存菜单</el-button>-->
	52	+ <el-button class="save_btn" type="success" size="small" @click="saveAndReleaseFun">保存并发布菜单</el-button>
	53	+ </div>
	54	+ </div>
	55	+ <!--右边配置-->
	56	+ <div v-if="showRightFlag" class="right">
	57	+ <div class="configure_page">
	58	+ <div class="delete_btn">
	59	+ <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteMenu(tempObj)">删除当前菜单</el-button>
	60	+ </div>
	61	+ <div>
	62	+ <span>菜单名称：</span>
	63	+ <el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength=nameMaxlength clearable></el-input>
	64	+ </div>
	65	+ <div v-if="showConfigurContent">
	66	+ <div class="menu_content">
	67	+ <span>菜单内容：</span>
	68	+ <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
	69	+ <el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
	70	+ </el-select>
	71	+ </div>
	72	+ <div class="configur_content" v-if="tempObj.type == 'view'">
	73	+ <span>跳转链接：</span>
	74	+ <el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable></el-input>
	75	+ </div>
	76	+ <div class="configur_content" v-if="tempObj.type == 'miniprogram'">
	77	+ <div class="applet">
	78	+ <span>小程序的appid：</span>
	79	+ <el-input class="input_width" v-model="tempObj.appid" placeholder="请输入小程序的appid" clearable></el-input>
	80	+ </div>
	81	+ <div class="applet">
	82	+ <span>小程序的页面路径：</span>
	83	+ <el-input class="input_width" v-model="tempObj.pagepath" placeholder="请输入小程序的页面路径，如：pages/index" clearable></el-input>
	84	+ </div>
	85	+ <div class="applet">
	86	+ <span>备用网页：</span>
	87	+ <el-input class="input_width" v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable></el-input>
	88	+ </div>
	89	+ <p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
	90	+ </div>
	91	+ <div class="configur_content" v-if="tempObj.type == 'article_view_limited'">
	92	+ <el-row>
	93	+ <div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">
	94	+ <WxNews :objData="tempObj.content.articles"></WxNews>
	95	+ <el-row class="ope-row">
	96	+ <el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj"></el-button>
	97	+ </el-row>
	98	+ </div>
	99	+ <div v-if="!tempObj.content \|\| !tempObj.content.articles">
	100	+ <el-row>
	101	+ <el-col :span="24" style="text-align: center">
	102	+ <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
	103	+ </el-col>
	104	+ </el-row>
	105	+ </div>
	106	+ <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">
	107	+ <WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
	108	+ </el-dialog>
	109	+ </el-row>
	110	+ </div>
	111	+ <div class="configur_content" v-if="tempObj.type == 'click' \|\| tempObj.type == 'scancode_waitmsg'">
	112	+ <WxReplySelect :objData="tempObj" v-if="hackResetWxReplySelect"></WxReplySelect>
	113	+ </div>
	114	+ </div>
	115	+ </div>
	116	+ </div>
	117	+ <!--一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
	118	+ <div v-if="!showRightFlag" class="right">
	119	+ <p>请选择菜单配置</p>
	120	+ </div>
	121	+ </div>
	122	+ </div>
	123	+</template>
	124	+
	125	+<script>
	126	+ // import { save, saveAndRelease ,getList} from '@/api/wxmp/wxmenu'
	127	+ import WxReplySelect from '@/views/mp/components/wx-news/main.vue'
	128	+ import WxNews from '@/views/mp/components/wx-news/main.vue';
	129	+ import WxMaterialSelect from '@/views/mp/components/wx-news/main.vue'
	130	+
	131	+ export default {
	132	+ name: 'mpMenu',
	133	+ components: {
	134	+ WxReplySelect,
	135	+ WxNews,
	136	+ WxMaterialSelect
	137	+ },
	138	+ data(){
	139	+ return{
	140	+ showRightFlag:false,//右边配置显示默认详情还是配置详情
	141	+ menu:{
	142	+ button:[
	143	+ ]
	144	+ },//横向菜单
	145	+ isActive: -1,// 一级菜单点中样式
	146	+ isSubMenuActive: -1,// 一级菜单点中样式
	147	+ isSubMenuFlag: -1,// 二级菜单显示标志
	148	+ tempObj:{},//右边临时变量，作为中间值牵引关系
	149	+ tempSelfObj:{
	150	+ //一些临时值放在这里进行判断，如果放在tempObj，由于引用关系，menu也会多了多余的参数
	151	+ },
	152	+ visible2: false,//素材内容 "选择素材"按钮弹框显示隐藏
	153	+ tableData:[], //素材内容弹框数据,
	154	+ menuName:'',
	155	+ showConfigurContent:true,
	156	+ nameMaxlength:0,//名称最大长度
	157	+ menuOptions: [{
	158	+ value: 'view',
	159	+ label: '跳转网页'
	160	+ }, {
	161	+ value: 'miniprogram',
	162	+ label: '跳转小程序'
	163	+ }, {
	164	+ value: 'click',
	165	+ label: '点击回复'
	166	+ }, {
	167	+ value: 'article_view_limited',
	168	+ label: '跳转图文消息'
	169	+ }, {
	170	+ value: 'scancode_push',
	171	+ label: '扫码直接返回结果'
	172	+ }, {
	173	+ value: 'scancode_waitmsg',
	174	+ label: '扫码回复'
	175	+ }, {
	176	+ value: 'pic_sysphoto',
	177	+ label: '系统拍照发图'
	178	+ }, {
	179	+ value: 'pic_photo_or_album',
	180	+ label: '拍照或者相册'
	181	+ }, {
	182	+ value: 'pic_weixin',
	183	+ label: '微信相册'
	184	+ }, {
	185	+ value: 'location_select',
	186	+ label: '选择地理位置'
	187	+ }],
	188	+ dialogNewsVisible:false,
	189	+ saveLoading:false,
	190	+ hackResetWxReplySelect:false
	191	+ }
	192	+ },
	193	+ created() {
	194	+ this.getMenuFun()
	195	+ },
	196	+ mounted() {
	197	+
	198	+ },
	199	+ filters:{
	200	+ },
	201	+ computed: {
	202	+ },
	203	+ methods:{
	204	+ deleteTempObj(){
	205	+ this.$delete(this.tempObj,'repName')
	206	+ this.$delete(this.tempObj,'repUrl')
	207	+ this.$delete(this.tempObj,'content')
	208	+ },
	209	+ openMaterial(){
	210	+ this.dialogNewsVisible = true
	211	+ },
	212	+ selectMaterial(item){
	213	+ if(item.content.articles.length>1){
	214	+ this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {
	215	+ confirmButtonText: '确定'
	216	+ })
	217	+ }
	218	+ this.dialogNewsVisible = false
	219	+ this.tempObj.article_id = item.articleId
	220	+ this.tempObj.mediaName = item.name
	221	+ this.tempObj.url = item.url
	222	+ item.mediaType = this.tempObj.mediaType
	223	+ item.content.articles = item.content.articles.slice(0,1)
	224	+ this.tempObj.content = item.content
	225	+ },
	226	+ getMenuFun(){
	227	+ getList().then((res)=>{
	228	+ this.menu.button = JSON.parse(res.msg).button;
	229	+ });
	230	+ },
	231	+ handleClick(tab, event){
	232	+ this.tempObj.mediaType = tab.name
	233	+ },
	234	+ saveAndReleaseFun(){
	235	+ this.$confirm('确定要保证并发布该菜单吗?', '提示', {
	236	+ confirmButtonText: '确定',
	237	+ cancelButtonText: '取消',
	238	+ type: 'warning'
	239	+ }).then(() => {
	240	+ this.saveLoading = true
	241	+ saveAndRelease({
	242	+ strWxMenu:this.menu
	243	+ }).then(response => {
	244	+ this.saveLoading = false
	245	+ if(response.code == 200){
	246	+ this.$message({
	247	+ showClose: true,
	248	+ message: '发布成功',
	249	+ type: 'success'
	250	+ })
	251	+ }else{
	252	+ this.$message.error(response.data.msg)
	253	+ }
	254	+ }).catch(() => {
	255	+ this.saveLoading = false
	256	+ })
	257	+ }).catch(() => {
	258	+ })
	259	+ },
	260	+ // 一级菜单点击事件
	261	+ menuFun(i, item){
	262	+ this.hackResetWxReplySelect = false//销毁组件
	263	+ this.$nextTick(() => {
	264	+ this.hackResetWxReplySelect = true//重建组件
	265	+ })
	266	+ this.showRightFlag = true;//右边菜单
	267	+ this.tempObj = item;//这个如果放在顶部，flag会没有。因为重新赋值了。
	268	+ this.tempSelfObj.grand = "1";//表示一级菜单
	269	+ this.tempSelfObj.index = i;//表示一级菜单索引
	270	+ this.isActive = i; //一级菜单选中样式
	271	+ this.isSubMenuFlag = i; //二级菜单显示标志
	272	+ this.isSubMenuActive = -1; //二级菜单去除选中样式
	273	+ this.nameMaxlength = 4
	274	+ if(item.sub_button&&item.sub_button.length>0){
	275	+ this.showConfigurContent = false
	276	+ }else{
	277	+ this.showConfigurContent = true
	278	+ }
	279	+ },
	280	+ // 二级菜单点击事件
	281	+ subMenuFun(subItem, index, k){
	282	+ this.hackResetWxReplySelect = false//销毁组件
	283	+ this.$nextTick(() => {
	284	+ this.hackResetWxReplySelect = true//重建组件
	285	+ })
	286	+ this.showRightFlag = true;//右边菜单
	287	+ this.tempObj = subItem;//将点击的数据放到临时变量，对象有引用作用
	288	+ this.tempSelfObj.grand = "2";//表示二级菜单
	289	+ this.tempSelfObj.index = index;//表示一级菜单索引
	290	+ this.tempSelfObj.secondIndex = k;//表示二级菜单索引
	291	+ this.isSubMenuActive = index + "" + k; //二级菜单选中样式
	292	+ this.isActive = -1;//一级菜单去除样式
	293	+ this.showConfigurContent = true;
	294	+ this.nameMaxlength = 7
	295	+ },
	296	+ // 添加横向一级菜单
	297	+ addMenu(){
	298	+ let menuKeyLength = this.menuKeyLength
	299	+ let addButton = {
	300	+ name: "菜单名称",
	301	+ sub_button: []
	302	+ }
	303	+ this.$set(this.menu.button,menuKeyLength,addButton)
	304	+ this.menuFun(this.menuKeyLength-1, addButton)
	305	+ },
	306	+ // 添加横向二级菜单
	307	+ addSubMenu(i,item){
	308	+ if(!item.sub_button\|\|item.sub_button.length<=0){
	309	+ this.$set( item, 'sub_button',[])
	310	+ this.$delete( item, 'type')
	311	+ this.$delete( item, 'pagepath')
	312	+ this.$delete( item, 'url')
	313	+ this.$delete( item, 'key')
	314	+ this.$delete( item, 'article_id')
	315	+ this.$delete( item, 'textContent')
	316	+ this.showConfigurContent = false
	317	+ }
	318	+ let subMenuKeyLength = item.sub_button.length;//获取二级菜单key长度
	319	+ let addButton = {
	320	+ name: "子菜单名称"
	321	+ }
	322	+ this.$set(item.sub_button,subMenuKeyLength,addButton);
	323	+ this.subMenuFun(item.sub_button[subMenuKeyLength], i, subMenuKeyLength)
	324	+ },
	325	+ //删除当前菜单
	326	+ deleteMenu(obj){
	327	+ let _this = this;
	328	+ this.$confirm('确定要删除吗?', '提示', {
	329	+ confirmButtonText: '确定',
	330	+ cancelButtonText: '取消',
	331	+ type: 'warning'
	332	+ }).then(() => {
	333	+ _this.deleteData();// 删除菜单数据
	334	+ _this.tempObj = {};
	335	+ _this.showRightFlag = false;
	336	+ this.isActive = -1;
	337	+ this.isSubMenuActive = -1;
	338	+ }).catch(() => {
	339	+ });
	340	+ },
	341	+ // 删除菜单数据
	342	+ deleteData(){
	343	+ // 一级菜单的删除方法
	344	+ if(this.tempSelfObj.grand == "1"){
	345	+ this.menu.button.splice(this.tempSelfObj.index,1);
	346	+ }
	347	+ // 二级菜单的删除方法
	348	+ if(this.tempSelfObj.grand == "2"){
	349	+ this.menu.button[this.tempSelfObj.index].sub_button.splice(this.tempSelfObj.secondIndex, 1);
	350	+ }
	351	+ this.$message({
	352	+ type: 'success',
	353	+ message: '删除成功!'
	354	+ });
	355	+ }
	356	+ },
	357	+ computed:{
	358	+ // menuObj的长度，当长度小于 3 才显示一级菜单的加号
	359	+ menuKeyLength:function(){
	360	+ return this.menu.button.length;
	361	+ }
	362	+ }
	363	+ }
	364	+</script>
	365	+<!--本组件样式-->
	366	+<style lang="less" scoped="scoped">
	367	+/* 公共颜色变量 */
	368	+.clearfix{*zoom:1;}
	369	+.clearfix::after{content: "";display: table; clear: both;}
	370	+div{
	371	+ text-align: left;
	372	+}
	373	+.weixin-hd{
	374	+ color: #fff;
	375	+ text-align: center;
	376	+ position: relative;
	377	+ bottom: 426px;
	378	+ left:0px;
	379	+ width: 300px;
	380	+ height:64px;
	381	+ background: transparent url(assets/menu_head.png) no-repeat 0 0;
	382	+ background-position: 0 0;
	383	+ background-size: 100%
	384	+}
	385	+.weixin-title{
	386	+ color:#fff;
	387	+ font-size:14px;
	388	+ width:100%;
	389	+ text-align: center;
	390	+ position:absolute;
	391	+ top: 33px;
	392	+ left: 0px;
	393	+}
	394	+.weixin-menu{
	395	+ background: transparent url(assets/menu_foot.png) no-repeat 0 0;
	396	+ padding-left: 43px;
	397	+ font-size: 12px
	398	+}
	399	+.menu_option{
	400	+ width: 40%!important;
	401	+}
	402	+.public-account-management{
	403	+ min-width: 1200px;
	404	+ width: 1200px;
	405	+ margin: 0 auto;
	406	+ .left{
	407	+ float: left;
	408	+ display: inline-block;
	409	+ width: 350px;
	410	+ height: 715px;
	411	+ background: url("assets/iphone_backImg.png") no-repeat;
	412	+ background-size: 100% auto;
	413	+ padding: 518px 25px 88px;
	414	+ position: relative;
	415	+ box-sizing: border-box;
	416	+ /第一级菜单/
	417	+ .menu_main{
	418	+ .menu_bottom{
	419	+ position: relative;
	420	+ float: left;
	421	+ display: inline-block;
	422	+ box-sizing: border-box;
	423	+ width: 85.5px;
	424	+ text-align: center;
	425	+ border: 1px solid #ebedee;
	426	+ background-color: #fff;
	427	+ cursor: pointer;
	428	+ &.menu_addicon{
	429	+ height: 46px;
	430	+ line-height: 46px;
	431	+ }
	432	+ .menu_item{
	433	+ height: 44px;
	434	+ line-height: 44px;
	435	+ text-align: center;
	436	+ box-sizing: border-box;
	437	+ width: 100%;
	438	+ &.active{
	439	+ border: 1px solid #2bb673;
	440	+ }
	441	+ }
	442	+ .menu_subItem{
	443	+ height: 44px;
	444	+ line-height: 44px;
	445	+ text-align: center;
	446	+ box-sizing: border-box;
	447	+ &.active{
	448	+ border: 1px solid #2bb673;
	449	+ }
	450	+ }
	451	+ }
	452	+ i{
	453	+ color:#2bb673;
	454	+ }
	455	+ /第二级菜单/
	456	+ .submenu{
	457	+ position: absolute;
	458	+ width: 85.5px;
	459	+ bottom: 45px;
	460	+ .subtitle{
	461	+ background-color: #fff;
	462	+ box-sizing: border-box;
	463	+ }
	464	+ }
	465	+ }
	466	+ .save_div{
	467	+ margin-top: 15px;
	468	+ text-align: center;
	469	+ .save_btn{
	470	+ bottom: 20px;
	471	+ left: 100px;
	472	+ }
	473	+ }
	474	+ }
	475	+ /右边菜单内容/
	476	+ .right{
	477	+ float: left;
	478	+ width: 63%;
	479	+ background-color: #e8e7e7;
	480	+ padding: 20px;
	481	+ margin-left: 20px;
	482	+ -webkit-box-sizing: border-box;
	483	+ box-sizing: border-box;
	484	+ .configure_page{
	485	+ .delete_btn{
	486	+ text-align: right;
	487	+ margin-bottom: 15px;
	488	+ }
	489	+ .menu_content{
	490	+ margin-top: 20px;
	491	+ }
	492	+ .configur_content{
	493	+ margin-top: 20px;
	494	+ background-color: #fff;
	495	+ padding: 20px 10px;
	496	+ border-radius: 5px
	497	+ }
	498	+ .blue{
	499	+ color:#29b6f6;
	500	+ margin-top: 10px;
	501	+ }
	502	+ .applet{
	503	+ margin-bottom: 20px;
	504	+ span{
	505	+ width: 20%;
	506	+ }
	507	+ }
	508	+ .material{
	509	+ .input_width{
	510	+ width: 30%;
	511	+ }
	512	+ .el-textarea{
	513	+ width: 80%
	514	+ }
	515	+ }
	516	+ }
	517	+ }
	518	+}
	519	+</style>
	520	+<!--修改UI框架样式-->
	521	+<!--<style lang="less" scoped>-->
	522	+<!-- .public-account-management{-->
	523	+<!-- .el-input{-->
	524	+<!-- width: 70%;-->
	525	+<!-- margin-right: 2%;-->
	526	+<!-- }-->
	527	+<!-- }-->
	528	+<!--</style>-->
	529	+<!--素材样式-->
	530	+<style lang="scss" scoped>
	531	+ .pagination{
	532	+ text-align: right;
	533	+ margin-right: 25px;
	534	+ }
	535	+ .select-item{
	536	+ width: 280px;
	537	+ padding: 10px;
	538	+ margin: 0 auto 10px auto;
	539	+ border: 1px solid #eaeaea;
	540	+ }
	541	+ .select-item2{
	542	+ padding: 10px;
	543	+ margin: 0 auto 10px auto;
	544	+ border: 1px solid #eaeaea;
	545	+ }
	546	+ .ope-row{
	547	+ padding-top: 10px;
	548	+ text-align: center;
	549	+ }
	550	+ .item-name{
	551	+ font-size: 12px;
	552	+ overflow: hidden;
	553	+ text-overflow:ellipsis;
	554	+ white-space: nowrap;
	555	+ text-align: center;
	556	+ }
	557	+</style>
...	...