|
@@ -4,7 +4,7 @@
|
4
|
4
|
<bread-crumb :crumbs="crumbs"></bread-crumb>
|
5
|
5
|
<el-col :span="5" style="text-align: right;" v-show="initButtons">
|
6
|
6
|
<el-button type="primary" size="small" :disabled="subload" icon="el-icon-upload" @click="submitSave">保存并发布</el-button>
|
7
|
|
- <el-button type="danger" size="small" :disabled="subload" icon="el-icon-delete" >停用菜单</el-button>
|
|
7
|
+ <el-button type="danger" size="small" :disabled="subload" icon="el-icon-delete" @click="deleteMenus">停用菜单</el-button>
|
8
|
8
|
</el-col>
|
9
|
9
|
</div>
|
10
|
10
|
<div class="app-container" id="winxin-menus-box">
|
|
@@ -41,7 +41,7 @@
|
41
|
41
|
</div>
|
42
|
42
|
</li>
|
43
|
43
|
|
44
|
|
- <li class="jsAddMenu pre_menu_li" v-show="menus.button.length<3">
|
|
44
|
+ <li class="jsAddMenu pre_menu_li" v-show="!menus.button||menus.button.length<3">
|
45
|
45
|
<a href="javascript:void(0);" class="pre_menu_link" @click="addItem(-1)">
|
46
|
46
|
<i class="icon_menu_dot "></i>
|
47
|
47
|
<span class="js_l1Title_">
|
|
@@ -84,7 +84,7 @@
|
84
|
84
|
<div class="menu_form_item menu_more_info" v-show="typeof(currentMenu.sub_button) == 'undefined' || !currentMenu.sub_button || currentMenu.sub_button.length==0">
|
85
|
85
|
<div class="menu_form__nav clearfix">
|
86
|
86
|
<label for="" class="tit">菜单内容</label>
|
87
|
|
- <el-radio-group v-model="menuType" class="radio_item" @change="changeMenuType">
|
|
87
|
+ <el-radio-group v-model="menuType" class="radio_item" @change="changeBigType">
|
88
|
88
|
<el-radio v-for="(menu, index) in menuTypeOptions" :key="index" :label="menu.id" :value="menu.id">{{menu.name}}</el-radio>
|
89
|
89
|
</el-radio-group>
|
90
|
90
|
</div>
|
|
@@ -92,13 +92,41 @@
|
92
|
92
|
<div class="inner send_message " v-show="menuType==1">
|
93
|
93
|
<div class="send_message_tit">
|
94
|
94
|
<div class="send_nav">
|
95
|
|
- <i class="ico_size"></i>
|
96
|
|
- 文字
|
|
95
|
+ <el-button type="text" icon="el-icon-edit-outline" style="padding:0" :disabled="currentMenu.type=='click'" @click="selectMenuType(1)">文字</el-button>
|
|
96
|
+ </div>
|
|
97
|
+ <div class="send_nav">
|
|
98
|
+ <el-button type="text" icon="el-icon-picture-outline" style="padding:0" :disabled="currentMenu.type=='media_id'" @click="selectMenuType(2)">图片</el-button>
|
97
|
99
|
</div>
|
98
|
100
|
</div>
|
99
|
|
- <textarea class="send_message_edit" id="click_menu_act" v-model="currentMenu.message" placeholder="请输入你需要的文字"></textarea>
|
100
|
|
- <span class="tips" id="acterrinfo" v-if="!messageError" > {{menuMessageTip}}</span>
|
101
|
|
- <span class="tips" id="acterrinfo" v-if="messageError" style="color: #f00;"> {{menuMessageTip}}</span>
|
|
101
|
+ <textarea v-show="currentMenu.type=='click'" class="send_message_edit" id="click_menu_act" v-model="currentMenu.message" placeholder="请输入你需要的文字"></textarea>
|
|
102
|
+ <span v-show="currentMenu.type=='click'" class="tips" id="acterrinfo" v-if="!messageError" > {{menuMessageTip}}</span>
|
|
103
|
+ <span v-show="currentMenu.type=='click'" class="tips" id="acterrinfo" v-if="messageError" style="color: #f00;"> {{menuMessageTip}}</span>
|
|
104
|
+ <div v-show="currentMenu.type=='media_id'" class="mediaID-box">
|
|
105
|
+ <el-row>
|
|
106
|
+ <el-col :span="12" >
|
|
107
|
+ <div class="mediaID-item">
|
|
108
|
+ <i class="el-icon-news"></i>
|
|
109
|
+ <span class="icon-name">从素材库选择</span>
|
|
110
|
+ </div>
|
|
111
|
+ </el-col>
|
|
112
|
+ <el-col :span="12" >
|
|
113
|
+ <div class="mediaID-item">
|
|
114
|
+ <el-upload
|
|
115
|
+ class="media-uploader"
|
|
116
|
+ :action="addMaterialUrl"
|
|
117
|
+ :show-file-list="false"
|
|
118
|
+ :with-credentials='true'
|
|
119
|
+ :on-success="handleMediaSuccess"
|
|
120
|
+ :before-upload="beforeMediaUpload"
|
|
121
|
+ >
|
|
122
|
+ <img v-if="currentMenu.media_url" :src="currentMenu.media_url" class="media">
|
|
123
|
+ <i v-else class="el-icon-plus media-uploader-icon"></i>
|
|
124
|
+ </el-upload>
|
|
125
|
+ <span class="icon-name">上传图片</span>
|
|
126
|
+ </div>
|
|
127
|
+ </el-col>
|
|
128
|
+ </el-row>
|
|
129
|
+ </div>
|
102
|
130
|
</div>
|
103
|
131
|
<div class="inner jump_page" v-show="menuType==2">
|
104
|
132
|
<span class="tips_size">订阅者点击该子菜单会跳到以下链接</span>
|
|
@@ -141,8 +169,10 @@
|
141
|
169
|
</template>
|
142
|
170
|
|
143
|
171
|
<script>
|
|
172
|
+import axios from 'axios';
|
144
|
173
|
import BreadCrumb from "../components/bread-crumb";
|
145
|
|
-import {GetAuthorizationInfo,GetMenus,SaveMenus} from "@/api/mpwechat/mpwechat";
|
|
174
|
+import {GetAuthorizationInfo} from "@/api/mpwechat/mpwechat";
|
|
175
|
+import {GetMenus,SaveMenus,DeleteMenu} from "@/api/mpwechat/mpmenus";
|
146
|
176
|
export default {
|
147
|
177
|
name: "menus",
|
148
|
178
|
components: {
|
|
@@ -159,10 +189,12 @@ export default {
|
159
|
189
|
{id:2, name:' 跳转网页'},
|
160
|
190
|
{id:3, name:' 跳转小程序'},
|
161
|
191
|
],
|
|
192
|
+ addMaterialUrl: process.env.BASE_API + '/api/mpwechat/media/add_material',
|
162
|
193
|
initButtons:false,
|
163
|
194
|
subload:false,
|
164
|
195
|
menus:{button:[]},
|
165
|
196
|
currentMenu:{
|
|
197
|
+ big_type:0,
|
166
|
198
|
type:'',
|
167
|
199
|
name:'',
|
168
|
200
|
url:'',
|
|
@@ -172,6 +204,7 @@ export default {
|
172
|
204
|
message:'',
|
173
|
205
|
sub_button:[],
|
174
|
206
|
media_id:'',
|
|
207
|
+ media_url:'',
|
175
|
208
|
},
|
176
|
209
|
menuType:0,
|
177
|
210
|
currentPatient:-1,
|
|
@@ -228,6 +261,57 @@ export default {
|
228
|
261
|
this.$message.error(res.msg);
|
229
|
262
|
}
|
230
|
263
|
}).catch(e=>{});
|
|
264
|
+ },
|
|
265
|
+ handleMediaSuccess:function(res, file) {
|
|
266
|
+ console.log(res, file);
|
|
267
|
+ },
|
|
268
|
+ beforeMediaUpload:function(file) {
|
|
269
|
+ var allow = {"image/bmp":1,"image/png":1,"image/jpeg":1,"image/jpg":1,"image/gif":1};
|
|
270
|
+ // const isJPG = file.type === 'image/jpeg';
|
|
271
|
+ const isImg = file.type in allow;
|
|
272
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
273
|
+
|
|
274
|
+ if (!isImg) {
|
|
275
|
+ this.$message.error('上传图片只能是 bmp/png/jpeg/jpg/gif 格式!');
|
|
276
|
+ }
|
|
277
|
+ if (!isLt2M) {
|
|
278
|
+ this.$message.error('上传图片大小不能超过 2MB!');
|
|
279
|
+ }
|
|
280
|
+ return isImg && isLt2M;
|
|
281
|
+ },
|
|
282
|
+ deleteMenus:function(){
|
|
283
|
+ this.$confirm('删除后,公众号的菜单也将被删除', '删除提示', {
|
|
284
|
+ dangerouslyUseHTMLString:true,
|
|
285
|
+ confirmButtonText: '确定',
|
|
286
|
+ cancelButtonText: '取消',
|
|
287
|
+ type: 'warning'
|
|
288
|
+ }).then(() => {
|
|
289
|
+ DeleteMenu().then(response=>{
|
|
290
|
+ var res = response.data;
|
|
291
|
+ if (res.state==1) {
|
|
292
|
+ this.$message.success('删除成功');
|
|
293
|
+ this.currentMenu = {
|
|
294
|
+ type:'',
|
|
295
|
+ name:'',
|
|
296
|
+ url:'',
|
|
297
|
+ appid:'',
|
|
298
|
+ pagepath:'',
|
|
299
|
+ key:'',//key规则:V_[number]_click;VC_[number]_click
|
|
300
|
+ message:'',
|
|
301
|
+ sub_button:[],
|
|
302
|
+ media_id:'',
|
|
303
|
+ media_url:'',
|
|
304
|
+ big_type:0
|
|
305
|
+ };
|
|
306
|
+ this.currentPatient = -1;
|
|
307
|
+ this.currentChild = -1;
|
|
308
|
+ this.menus = {button:[]};
|
|
309
|
+ }else {
|
|
310
|
+ this.$message.error(res.msg);
|
|
311
|
+ }
|
|
312
|
+ }).catch(e=>{});
|
|
313
|
+ }).catch(() => {
|
|
314
|
+ });
|
231
|
315
|
},
|
232
|
316
|
submitSave:function () {
|
233
|
317
|
this.subload = true;
|
|
@@ -309,6 +393,8 @@ export default {
|
309
|
393
|
message:'',
|
310
|
394
|
sub_button:[],
|
311
|
395
|
media_id:'',
|
|
396
|
+ media_url:'',
|
|
397
|
+ big_type:0
|
312
|
398
|
};
|
313
|
399
|
}
|
314
|
400
|
}
|
|
@@ -323,6 +409,7 @@ export default {
|
323
|
409
|
this.menus = res.data.menus;
|
324
|
410
|
for (const index in this.menus.button) {
|
325
|
411
|
var button = this.menus.button[index];
|
|
412
|
+ this.menus.button[index]['big_type'] = typeof(button.type) !='undefined' && button.type ? this.setBigType(button.type):0;
|
326
|
413
|
if(typeof(button.key) !='undefined' && button.key) {
|
327
|
414
|
var keys = button.key.split("_")
|
328
|
415
|
if (typeof(keys[1]) !='undefined') {
|
|
@@ -333,6 +420,7 @@ export default {
|
333
|
420
|
if(typeof(button.sub_button) !='undefined' && button.sub_button) {
|
334
|
421
|
for (const chilid in button.sub_button) {
|
335
|
422
|
var cbutton = button.sub_button[chilid];
|
|
423
|
+ this.menus.button[index].sub_button[chilid]['big_type'] = typeof(cbutton.type) !='undefined' && cbutton.type ? this.setBigType(cbutton.type):0;
|
336
|
424
|
if(typeof(cbutton.key) !='undefined' && cbutton.key) {
|
337
|
425
|
var keys = cbutton.key.split("_")
|
338
|
426
|
if (typeof(keys[1]) !='undefined') {
|
|
@@ -367,10 +455,29 @@ export default {
|
367
|
455
|
break;
|
368
|
456
|
}
|
369
|
457
|
},
|
370
|
|
- changeMenuType:function(value){
|
|
458
|
+ setBigType(type) {
|
|
459
|
+ var bitType = 0;
|
|
460
|
+ switch (this.currentMenu.type) {
|
|
461
|
+ case 'click':
|
|
462
|
+ bitType = 1;
|
|
463
|
+ break;
|
|
464
|
+ case 'media_id':
|
|
465
|
+ bitTypee = 2;
|
|
466
|
+ break;
|
|
467
|
+ }
|
|
468
|
+ return bitType;
|
|
469
|
+ },
|
|
470
|
+ changeBigType:function(value){
|
|
471
|
+ // this.currentMenu.big_type = value;
|
371
|
472
|
switch (value) {
|
372
|
473
|
case 1:
|
373
|
|
- this.currentMenu.type = 'click';
|
|
474
|
+ if (this.currentMenu.big_type == 1 ) {
|
|
475
|
+ this.currentMenu.type = 'click';
|
|
476
|
+ } else if (this.currentMenu.big_type == 2) {
|
|
477
|
+ this.currentMenu.type = 'media_id';
|
|
478
|
+ } else {
|
|
479
|
+ this.currentMenu.type = 'click';
|
|
480
|
+ }
|
374
|
481
|
break;
|
375
|
482
|
case 2:
|
376
|
483
|
this.currentMenu.type = 'view';
|
|
@@ -382,6 +489,14 @@ export default {
|
382
|
489
|
break;
|
383
|
490
|
}
|
384
|
491
|
},
|
|
492
|
+ selectMenuType:function(type){
|
|
493
|
+ this.currentMenu.big_type = type;
|
|
494
|
+ if(type==1) {
|
|
495
|
+ this.currentMenu.type = 'click';
|
|
496
|
+ }else if(type==2) {
|
|
497
|
+ this.currentMenu.type = 'media_id';
|
|
498
|
+ }
|
|
499
|
+ },
|
385
|
500
|
selectItem:function(mi, ni, node){
|
386
|
501
|
this.currentPatient = mi;
|
387
|
502
|
this.currentChild = ni;
|
|
@@ -395,6 +510,8 @@ export default {
|
395
|
510
|
message:'',
|
396
|
511
|
sub_button:[],
|
397
|
512
|
media_id:'',
|
|
513
|
+ media_url:'',
|
|
514
|
+ big_type:0,
|
398
|
515
|
};
|
399
|
516
|
for (const key in node) {
|
400
|
517
|
this.currentMenu[key] = node[key];
|
|
@@ -567,8 +684,10 @@ export default {
|
567
|
684
|
}
|
568
|
685
|
},
|
569
|
686
|
'currentMenu.type':function(){
|
|
687
|
+
|
570
|
688
|
if (this.currentPatient>=0&&this.currentChild>=0) {
|
571
|
689
|
this.menus.button[this.currentPatient].sub_button[this.currentChild].type = this.currentMenu.type;
|
|
690
|
+ this.menus.button[this.currentPatient].sub_button[this.currentChild].big_type = this.currentMenu.big_type;
|
572
|
691
|
if (this.currentMenu.type == 'click' && this.currentMenu.key.length==0) {
|
573
|
692
|
this.cclick += 1;
|
574
|
693
|
var key = 'VC_' + this.cclick + "_click";
|
|
@@ -577,6 +696,7 @@ export default {
|
577
|
696
|
}
|
578
|
697
|
} else if (this.currentPatient>=0){
|
579
|
698
|
this.menus.button[this.currentPatient].type = this.currentMenu.type;
|
|
699
|
+ this.menus.button[this.currentPatient].big_type = this.currentMenu.big_type;
|
580
|
700
|
if (this.currentMenu.type == 'click' && this.currentMenu.key.length==0) {
|
581
|
701
|
this.pclick += 1;
|
582
|
702
|
var key = 'V_' + this.cclick + "_click";
|
|
@@ -630,7 +750,7 @@ export default {
|
630
|
750
|
};
|
631
|
751
|
</script>
|
632
|
752
|
|
633
|
|
-<style scoped>
|
|
753
|
+<style >
|
634
|
754
|
#winxin-menus-box {
|
635
|
755
|
font-size: 14px;
|
636
|
756
|
color: #485b6d;
|
|
@@ -929,6 +1049,7 @@ export default {
|
929
|
1049
|
}
|
930
|
1050
|
#winxin-menus-box .menu_form_item .send_message_tit .send_nav {
|
931
|
1051
|
width: 80px;
|
|
1052
|
+ display: inline-block;
|
932
|
1053
|
}
|
933
|
1054
|
#winxin-menus-box .menu_form_item .send_message_tit .ico_size {
|
934
|
1055
|
width: 14px;
|
|
@@ -984,6 +1105,46 @@ export default {
|
984
|
1105
|
#winxin-menus-box .menu_form__con .mitips {
|
985
|
1106
|
display:block;left:84px;position:relative;margin-top:10px;color: #c0c8d4;
|
986
|
1107
|
}
|
|
1108
|
+#winxin-menus-box .mediaID-item {
|
|
1109
|
+ text-align: center;
|
|
1110
|
+ padding: 10px;
|
|
1111
|
+ /* cursor: pointer; */
|
|
1112
|
+}
|
|
1113
|
+
|
|
1114
|
+/* #winxin-menus-box .mediaID-item:hover {
|
|
1115
|
+ background:#c0c8d4;
|
|
1116
|
+} */
|
|
1117
|
+#winxin-menus-box .mediaID-item i {
|
|
1118
|
+ display: block;
|
|
1119
|
+}
|
|
1120
|
+#winxin-menus-box .mediaID-item .el-icon-news {
|
|
1121
|
+ font-size: 80px;
|
|
1122
|
+}
|
|
1123
|
+#winxin-menus-box .mediaID-item .media-uploader .el-upload {
|
|
1124
|
+ border: 1px dashed #d9d9d9 !important;
|
|
1125
|
+ border-radius: 6px;
|
|
1126
|
+ cursor: pointer;
|
|
1127
|
+ position: relative;
|
|
1128
|
+ overflow: hidden;
|
|
1129
|
+ margin: 10px;
|
|
1130
|
+}
|
|
1131
|
+#winxin-menus-box .mediaID-item .media-uploader .el-upload:hover {
|
|
1132
|
+ border-color: #409EFF;
|
|
1133
|
+}
|
|
1134
|
+#winxin-menus-box .mediaID-item .media-uploader-icon {
|
|
1135
|
+ font-size: 28px;
|
|
1136
|
+ color: #8c939d;
|
|
1137
|
+ width: 55px;
|
|
1138
|
+ height: 55px;
|
|
1139
|
+ line-height: 55px;
|
|
1140
|
+ text-align: center;
|
|
1141
|
+}
|
|
1142
|
+#winxin-menus-box .mediaID-item .media {
|
|
1143
|
+ width: 55px;
|
|
1144
|
+ height: 55px;
|
|
1145
|
+ display: block;
|
|
1146
|
+}
|
|
1147
|
+
|
987
|
1148
|
/*.app-container .cell.clearfix .time ul li {*/
|
988
|
1149
|
/*float: left;*/
|
989
|
1150
|
/*list-style: none;*/
|