Skip to content

Commit c27be37

Browse files
dhb52dhb52
committed
refactor: mp/menu 拆分组件
1 parent 82dc005 commit c27be37

File tree

5 files changed

+618
-485
lines changed

5 files changed

+618
-485
lines changed

‎src/views/mp/menu/components/MenuEditor.vue

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<template>
2+
<div>
3+
<div class="configure_page">
4+
<div class="delete_btn">
5+
<el-button type="danger" @click="emit('delete')">
6+
<Icon icon="ep:delete" />
7+
删除当前菜单
8+
</el-button>
9+
</div>
10+
<div>
11+
<span>菜单名称：</span>
12+
<el-input
13+
class="input_width"
14+
v-model="menu.name"
15+
placeholder="请输入菜单名称"
16+
:maxlength="isParent ? 4 : 7"
17+
clearable
18+
/>
19+
</div>
20+
<div v-if="isLeave">
21+
<div class="menu_content">
22+
<span>菜单标识：</span>
23+
<el-input
24+
class="input_width"
25+
v-model="menu.menuKey"
26+
placeholder="请输入菜单 KEY"
27+
clearable
28+
/>
29+
</div>
30+
<div class="menu_content">
31+
<span>菜单内容：</span>
32+
<el-select v-model="menu.type" clearable placeholder="请选择" class="menu_option">
33+
<el-option
34+
v-for="item in menuOptions"
35+
:label="item.label"
36+
:value="item.value"
37+
:key="item.value"
38+
/>
39+
</el-select>
40+
</div>
41+
<div class="configur_content" v-if="menu.type === 'view'">
42+
<span>跳转链接：</span>
43+
<el-input class="input_width" v-model="menu.url" placeholder="请输入链接" clearable />
44+
</div>
45+
<div class="configur_content" v-if="menu.type === 'miniprogram'">
46+
<div class="applet">
47+
<span>小程序的 appid ：</span>
48+
<el-input
49+
class="input_width"
50+
v-model="menu.miniProgramAppId"
51+
placeholder="请输入小程序的appid"
52+
clearable
53+
/>
54+
</div>
55+
<div class="applet">
56+
<span>小程序的页面路径：</span>
57+
<el-input
58+
class="input_width"
59+
v-model="menu.miniProgramPagePath"
60+
placeholder="请输入小程序的页面路径，如：pages/index"
61+
clearable
62+
/>
63+
</div>
64+
<div class="applet">
65+
<span>小程序的备用网页：</span>
66+
<el-input
67+
class="input_width"
68+
v-model="menu.url"
69+
placeholder="不支持小程序的老版本客户端将打开本网页"
70+
clearable
71+
/>
72+
</div>
73+
<p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
74+
</div>
75+
<div class="configur_content" v-if="menu.type === 'article_view_limited'">
76+
<el-row>
77+
<div class="select-item" v-if="menu && menu.replyArticles">
78+
<WxNews :articles="menu.replyArticles" />
79+
<el-row class="ope-row" justify="center" align="middle">
80+
<el-button type="danger" circle @click="deleteMaterial">
81+
<icon icon="ep:delete" />
82+
</el-button>
83+
</el-row>
84+
</div>
85+
<div v-else>
86+
<el-row justify="center">
87+
<el-col :span="24" style="text-align: center">
88+
<el-button type="success" @click="showNewsDialog = true">
89+
素材库选择
90+
<Icon icon="ep:circle-check" />
91+
</el-button>
92+
</el-col>
93+
</el-row>
94+
</div>
95+
<el-dialog title="选择图文" v-model="showNewsDialog" width="80%" destroy-on-close>
96+
<WxMaterialSelect
97+
:objData="{ type: 'news', accountId: props.accountId }"
98+
@select-material="selectMaterial"
99+
/>
100+
</el-dialog>
101+
</el-row>
102+
</div>
103+
<div
104+
class="configur_content"
105+
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
106+
>
107+
<WxReplySelect v-if="hackResetWxReplySelect" :objData="menu.reply" />
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
</template>
113+
114+
<script setup lang="ts">
115+
import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
116+
import WxNews from '@/views/mp/components/wx-news/main.vue'
117+
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
118+
import menuOptions from './menuOptions'
119+
120+
const message = useMessage()
121+
122+
const props = defineProps<{
123+
accountId?: number
124+
modelValue: any
125+
isParent: boolean
126+
}>()
127+
128+
const emit = defineEmits<{
129+
(e: 'delete', v: void)
130+
(e: 'update:modelValue', v: any)
131+
}>()
132+
133+
const menu = computed({
134+
get() {
135+
return props.modelValue
136+
},
137+
set(val) {
138+
emit('update:modelValue', val)
139+
}
140+
})
141+
const showNewsDialog = ref(false)
142+
const hackResetWxReplySelect = ref(false)
143+
const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0))
144+
145+
watch(menu, () => {
146+
hackResetWxReplySelect.value = false // 销毁组件
147+
nextTick(() => {
148+
hackResetWxReplySelect.value = true // 重建组件
149+
})
150+
})
151+
152+
// ======================== 菜单编辑（素材选择） ========================
153+
const selectMaterial = (item: any) => {
154+
const articleId = item.articleId
155+
const articles = item.content.newsItem
156+
// 提示，针对多图文
157+
if (articles.length > 1) {
158+
message.alertWarning('您选择的是多图文，将默认跳转第一篇')
159+
}
160+
showNewsDialog.value = false
161+
162+
// 设置菜单的回复
163+
menu.value.articleId = articleId
164+
menu.value.replyArticles = []
165+
articles.forEach((article) => {
166+
menu.value.replyArticles.push({
167+
title: article.title,
168+
description: article.digest,
169+
picUrl: article.picUrl,
170+
url: article.url
171+
})
172+
})
173+
}
174+
175+
const deleteMaterial = () => {
176+
delete menu.value['articleId']
177+
delete menu.value['replyArticles']
178+
}
179+
</script>
180+
181+
<style lang="scss" scoped>
182+
.el-input {
183+
width: 70%;
184+
margin-right: 2%;
185+
}
186+
187+
.configure_page {
188+
.delete_btn {
189+
margin-bottom: 15px;
190+
text-align: right;
191+
}
192+
193+
.menu_content {
194+
margin-top: 20px;
195+
}
196+
197+
.configur_content {
198+
padding: 20px 10px;
199+
margin-top: 20px;
200+
background-color: #fff;
201+
border-radius: 5px;
202+
203+
.select-item {
204+
width: 280px;
205+
padding: 10px;
206+
margin: 0 auto 10px;
207+
border: 1px solid #eaeaea;
208+
209+
.ope-row {
210+
padding-top: 10px;
211+
text-align: center;
212+
}
213+
}
214+
}
215+
216+
.blue {
217+
margin-top: 10px;
218+
color: #29b6f6;
219+
}
220+
221+
.applet {
222+
margin-bottom: 20px;
223+
224+
span {
225+
width: 20%;
226+
}
227+
}
228+
229+
.input_width {
230+
width: 40%;
231+
}
232+
233+
.material {
234+
.input_width {
235+
width: 30%;
236+
}
237+
238+
.el-textarea {
239+
width: 80%;
240+
}
241+
}
242+
}
243+
</style>

0 commit comments

Comments
 (0)