Skip to content

Commit 1b0f1dd

Browse files
YunaiVYunaiV
committed
mp：完善【菜单】的回复功能
1 parent 74c3a2d commit 1b0f1dd

File tree

1 file changed

+154
-62
lines changed

1 file changed

+154
-62
lines changed

‎src/views/mp/menu/index.vue

Lines changed: 154 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
2020
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2121
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2222
SOFTWARE.
23+
芋道源码：
24+
① less 切到 scss，减少对 less 和 less-loader 的依赖
25+
②
2326
-->
2427
<template>
2528
<div class="app-container">
@@ -75,60 +78,64 @@ SOFTWARE.
7578
</div>
7679
<div>
7780
<span>菜单名称：</span>
78-
<el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength="nameMaxLength"
79-
clearable />
81+
<el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength="nameMaxLength" clearable />
8082
</div>
8183
<div v-if="showConfigureContent">
82-
<div class="menu_content">
83-
<span>菜单内容：</span>
84-
<el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
85-
<el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value" />
86-
</el-select>
87-
</div>
88-
<div class="configur_content" v-if="tempObj.type === 'view'">
89-
<span>跳转链接：</span>
90-
<el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable />
91-
</div>
92-
<div class="configur_content" v-if="tempObj.type === 'miniprogram'">
93-
<div class="applet">
94-
<span>小程序的appid：</span>
95-
<el-input class="input_width" v-model="tempObj.appid" placeholder="请输入小程序的appid" clearable></el-input>
96-
</div>
97-
<div class="applet">
98-
<span>小程序的页面路径：</span>
99-
<el-input class="input_width" v-model="tempObj.pagepath" placeholder="请输入小程序的页面路径，如：pages/index" clearable></el-input>
100-
</div>
101-
<div class="applet">
102-
<span>备用网页：</span>
103-
<el-input class="input_width" v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable></el-input>
104-
</div>
105-
<p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
84+
<div class="menu_content">
85+
<span>菜单标识：</span>
86+
<el-input class="input_width" v-model="tempObj.menuKey" placeholder="请输入菜单 KEY" clearable />
87+
</div>
88+
<div class="menu_content">
89+
<span>菜单内容：</span>
90+
<el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
91+
<el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value" />
92+
</el-select>
93+
</div>
94+
<div class="configur_content" v-if="tempObj.type === 'view'">
95+
<span>跳转链接：</span>
96+
<el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable />
97+
</div>
98+
<div class="configur_content" v-if="tempObj.type === 'miniprogram'">
99+
<div class="applet">
100+
<span>小程序的 appid ：</span>
101+
<el-input class="input_width" v-model="tempObj.miniProgramAppId" placeholder="请输入小程序的appid" clearable />
106102
</div>
107-
<div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
108-
<el-row>
109-
<div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">
110-
<WxNews :objData="tempObj.content.articles"></WxNews>
111-
<el-row class="ope-row">
112-
<el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj"></el-button>
113-
</el-row>
114-
</div>
115-
<div v-if="!tempObj.content || !tempObj.content.articles">
116-
<el-row>
117-
<el-col :span="24" style="text-align: center">
118-
<el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
119-
</el-col>
120-
</el-row>
121-
</div>
122-
<el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">
123-
<WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
124-
</el-dialog>
125-
</el-row>
103+
<div class="applet">
104+
<span>小程序的页面路径：</span>
105+
<el-input class="input_width" v-model="tempObj.miniProgramPagePath"
106+
placeholder="请输入小程序的页面路径，如：pages/index" clearable />
126107
</div>
127-
<div class="configur_content" v-if="tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'">
128-
<WxReplySelect :objData="tempObj" v-if="hackResetWxReplySelect"></WxReplySelect>
108+
<div class="applet">
109+
<span>小程序的备用网页：</span>
110+
<el-input class="input_width" v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable />
129111
</div>
130-
</div>
131-
</div>
112+
<p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
113+
</div>
114+
<div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
115+
<el-row>
116+
<div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">
117+
<WxNews :objData="tempObj.content.articles"></WxNews>
118+
<el-row class="ope-row">
119+
<el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj"></el-button>
120+
</el-row>
121+
</div>
122+
<div v-if="!tempObj.content || !tempObj.content.articles">
123+
<el-row>
124+
<el-col :span="24" style="text-align: center">
125+
<el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
126+
</el-col>
127+
</el-row>
128+
</div>
129+
<el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">
130+
<WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
131+
</el-dialog>
132+
</el-row>
133+
</div>
134+
<div class="configur_content" v-if="tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'">
135+
<wx-reply-select :objData="tempObj.reply" v-if="hackResetWxReplySelect" />
136+
</div>
137+
</div>
138+
</div>
132139
</div>
133140
<!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
134141
<div v-else class="right">
@@ -139,10 +146,10 @@ SOFTWARE.
139146
</template>
140147

141148
<script>
142-
import WxReplySelect from '@/views/mp/components/wx-news/main.vue'
149+
import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
143150
import WxNews from '@/views/mp/components/wx-news/main.vue';
144151
import WxMaterialSelect from '@/views/mp/components/wx-news/main.vue'
145-
import {deleteMenu, getMenuList, saveMenu} from "@/api/mp/menu";
152+
import { deleteMenu, getMenuList, saveMenu } from "@/api/mp/menu";
146153
import { getSimpleAccounts } from "@/api/mp/account";
147154
148155
export default {
@@ -177,7 +184,7 @@ export default {
177184
showConfigureContent: true, // 是否展示配置内容；如果有子菜单，就不显示配置内容
178185
hackResetWxReplySelect: false, // 重置 WxReplySelect 组件
179186
180-
tempObj:{}, // 右边临时变量，作为中间值牵引关系
187+
tempObj: {}, // 右边临时变量，作为中间值牵引关系
181188
tempSelfObj: { // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
182189
},
183190
visible2: false, //素材内容 "选择素材"按钮弹框显示隐藏
@@ -240,6 +247,7 @@ export default {
240247
getList() {
241248
this.loading = false;
242249
getMenuList(this.accountId).then(response => {
250+
response.data = this.convertMenuList(response.data);
243251
this.menuList = this.handleTree(response.data, "id");
244252
}).finally(() => {
245253
this.loading = false;
@@ -262,6 +270,39 @@ export default {
262270
}
263271
this.handleQuery()
264272
},
273+
// 将后端返回的 menuList，转换成前端的 menuList
274+
convertMenuList(list) {
275+
const menuList = [];
276+
list.forEach(item => {
277+
const menu = {
278+
...item,
279+
};
280+
if (item.type === 'click' || item.type === 'scancode_waitmsg') {
281+
this.$delete(menu, 'replyMessageType');
282+
this.$delete(menu, 'replyContent');
283+
this.$delete(menu, 'replyMediaId');
284+
this.$delete(menu, 'replyMediaUrl');
285+
this.$delete(menu, 'replyDescription');
286+
this.$delete(menu, 'replyArticles');
287+
menu.reply = {
288+
type: item.replyMessageType,
289+
accountId: item.accountId,
290+
content: item.replyContent,
291+
mediaId: item.replyMediaId,
292+
url: item.replyMediaUrl,
293+
title: item.replyTitle,
294+
description: item.replyDescription,
295+
thumbMediaId: item.replyThumbMediaId,
296+
thumbMediaUrl: item.replyThumbMediaUrl,
297+
articles: item.replyArticles,
298+
musicUrl: item.replyMusicUrl,
299+
hqMusicUrl: item.replyHqMusicUrl,
300+
}
301+
}
302+
menuList.push(menu);
303+
});
304+
return menuList;
305+
},
265306
266307
// ======================== 菜单操作 ========================
267308
// 一级菜单点击事件
@@ -285,7 +326,7 @@ export default {
285326
// 右侧的表单相关
286327
this.resetEditor();
287328
this.showRightFlag = true; // 右边菜单
288-
this.tempObj = subItem;//将点击的数据放到临时变量，对象有引用作用
329+
this.tempObj = subItem; // 将点击的数据放到临时变量，对象有引用作用
289330
this.tempSelfObj.grand = "2"; // 表示二级菜单
290331
this.tempSelfObj.index = index; // 表示一级菜单索引
291332
this.tempSelfObj.secondIndex = k; // 表示二级菜单索引
@@ -301,19 +342,27 @@ export default {
301342
const menuKeyLength = this.menuList.length;
302343
const addButton = {
303344
name: "菜单名称",
304-
children: []
345+
children: [],
346+
reply: { // 用于存储回复内容
347+
'type': 'text',
348+
'accountId': this.accountId // 保证组件里，可以使用到对应的公众号
349+
}
305350
}
306351
this.$set(this.menuList, menuKeyLength, addButton)
307352
this.menuClick(this.menuKeyLength - 1, addButton)
308353
},
309354
// 添加横向二级菜单；item 表示要操作的父菜单
310355
addSubMenu(i, item) {
311-
if (!item.children || item.children.length <= 0){
356+
// 清空父菜单的属性，因为它只需要 name 属性即可
357+
if (!item.children || item.children.length <= 0) {
312358
this.$set( item, 'children',[])
313-
// TODO 芋艿：需要搞的属性弄下
314359
this.$delete( item, 'type')
315-
this.$delete( item, 'pagepath')
360+
this.$delete( item, 'miniProgramAppId')
361+
this.$delete( item, 'miniProgramPagePath')
316362
this.$delete( item, 'url')
363+
this.$delete( item, 'reply')
364+
// TODO 芋艿：需要搞的属性弄下
365+
317366
this.$delete( item, 'key')
318367
this.$delete( item, 'article_id')
319368
this.$delete( item, 'textContent')
@@ -322,7 +371,11 @@ export default {
322371
323372
let subMenuKeyLength = item.children.length; // 获取二级菜单key长度
324373
let addButton = {
325-
name: "子菜单名称"
374+
name: "子菜单名称",
375+
reply: { // 用于存储回复内容
376+
'type': 'text',
377+
'accountId': this.accountId // 保证组件里，可以使用到对应的公众号
378+
}
326379
}
327380
this.$set(item.children, subMenuKeyLength, addButton);
328381
this.subMenuClick(item.children[subMenuKeyLength], i, subMenuKeyLength)
@@ -352,19 +405,19 @@ export default {
352405
handleSave() {
353406
this.$modal.confirm('确定要保证并发布该菜单吗？').then(() => {
354407
this.loading = true
355-
return saveMenu(this.accountId, this.menuList);
408+
return saveMenu(this.accountId, this.convertMenuFormList());
356409
}).then(() => {
357410
this.getList();
358411
this.$modal.msgSuccess("发布成功");
359-
}).catch(() => {}).finally(() => {
412+
}).finally(() => {
360413
this.loading = false
361414
});
362415
},
363416
// 表单 Editor 重置
364417
resetEditor() {
365-
this.hackResetEditor = false // 销毁组件
418+
this.hackResetWxReplySelect = false // 销毁组件
366419
this.$nextTick(() => {
367-
this.hackResetEditor = true // 重建组件
420+
this.hackResetWxReplySelect = true // 重建组件
368421
})
369422
},
370423
handleDelete() {
@@ -378,6 +431,45 @@ export default {
378431
this.loading = false
379432
});
380433
},
434+
// 将前端的 menuList，转换成后端接收的 menuList
435+
convertMenuFormList() {
436+
const menuList = [];
437+
this.menuList.forEach(item => {
438+
let menu = this.convertMenuForm(item);
439+
menuList.push(menu);
440+
// 处理子菜单
441+
if (!item.children || item.children.length <= 0) {
442+
return;
443+
}
444+
item.children = [];
445+
item.children.forEach(subItem => {
446+
menu.children.push(this.convertMenuForm(subItem))
447+
})
448+
})
449+
return menuList;
450+
},
451+
// 将前端的 menu，转换成后端接收的 menu
452+
convertMenuForm(menu) {
453+
let result = {
454+
...menu,
455+
children: undefined, // 不处理子节点
456+
reply: undefined, // 稍后复制
457+
}
458+
if (menu.type === 'click' || menu.type === 'scancode_waitmsg') {
459+
result.replyMessageType = menu.reply.type;
460+
result.replyContent = menu.reply.content;
461+
result.replyMediaId = menu.reply.mediaId;
462+
result.replyMediaUrl = menu.reply.url;
463+
result.replyTitle = menu.reply.title;
464+
result.replyDescription = menu.reply.description;
465+
result.replyThumbMediaId = menu.reply.thumbMediaId;
466+
result.replyThumbMediaUrl = menu.reply.thumbMediaUrl;
467+
result.replyArticles = menu.reply.articles;
468+
result.replyMusicUrl = menu.reply.musicUrl;
469+
result.replyHqMusicUrl = menu.reply.hqMusicUrl;
470+
}
471+
return result;
472+
},
381473
382474
// TODO 芋艿：未归类
383475

0 commit comments

Comments
 (0)