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>