Skip to content

phsl / admin

Go to a project
Commit c27be373 by dhb52
Options

refactor: mp/menu 拆分组件

parent 82dc0054
Showing with 474 additions and 0 deletions
src/views/mp/menu/components/MenuEditor.vue 0 → 100644
<template>
<div>
<div class="configure_page">
<div class="delete_btn">
<el-button type="danger" @click="emit('delete')">
<Icon icon="ep:delete" />
删除当前菜单
</el-button>
</div>
<div>
<span>菜单名称：</span>
<el-input
class="input_width"
v-model="menu.name"
placeholder="请输入菜单名称"
:maxlength="isParent ? 4 : 7"
clearable
/>
</div>
<div v-if="isLeave">
<div class="menu_content">
<span>菜单标识：</span>
<el-input
class="input_width"
v-model="menu.menuKey"
placeholder="请输入菜单 KEY"
clearable
/>
</div>
<div class="menu_content">
<span>菜单内容：</span>
<el-select v-model="menu.type" clearable placeholder="请选择" class="menu_option">
<el-option
v-for="item in menuOptions"
:label="item.label"
:value="item.value"
:key="item.value"
/>
</el-select>
</div>
<div class="configur_content" v-if="menu.type === 'view'">
<span>跳转链接：</span>
<el-input class="input_width" v-model="menu.url" placeholder="请输入链接" clearable />
</div>
<div class="configur_content" v-if="menu.type === 'miniprogram'">
<div class="applet">
<span>小程序的 appid ：</span>
<el-input
class="input_width"
v-model="menu.miniProgramAppId"
placeholder="请输入小程序的appid"
clearable
/>
</div>
<div class="applet">
<span>小程序的页面路径：</span>
<el-input
class="input_width"
v-model="menu.miniProgramPagePath"
placeholder="请输入小程序的页面路径，如：pages/index"
clearable
/>
</div>
<div class="applet">
<span>小程序的备用网页：</span>
<el-input
class="input_width"
v-model="menu.url"
placeholder="不支持小程序的老版本客户端将打开本网页"
clearable
/>
</div>
<p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
</div>
<div class="configur_content" v-if="menu.type === 'article_view_limited'">
<el-row>
<div class="select-item" v-if="menu && menu.replyArticles">
<WxNews :articles="menu.replyArticles" />
<el-row class="ope-row" justify="center" align="middle">
<el-button type="danger" circle @click="deleteMaterial">
<icon icon="ep:delete" />
</el-button>
</el-row>
</div>
<div v-else>
<el-row justify="center">
<el-col :span="24" style="text-align: center">
<el-button type="success" @click="showNewsDialog = true">
素材库选择
<Icon icon="ep:circle-check" />
</el-button>
</el-col>
</el-row>
</div>
<el-dialog title="选择图文" v-model="showNewsDialog" width="80%" destroy-on-close>
<WxMaterialSelect
:objData="{ type: 'news', accountId: props.accountId }"
@select-material="selectMaterial"
/>
</el-dialog>
</el-row>
</div>
<div
class="configur_content"
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
>
<WxReplySelect v-if="hackResetWxReplySelect" :objData="menu.reply" />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
import WxNews from '@/views/mp/components/wx-news/main.vue'
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
import menuOptions from './menuOptions'
const message = useMessage()
const props = defineProps<{
accountId?: number
modelValue: any
isParent: boolean
}>()
const emit = defineEmits<{
(e: 'delete', v: void)
(e: 'update:modelValue', v: any)
}>()
const menu = computed({
get() {
return props.modelValue
},
set(val) {
emit('update:modelValue', val)
}
})
const showNewsDialog = ref(false)
const hackResetWxReplySelect = ref(false)
const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0))
watch(menu, () => {
hackResetWxReplySelect.value = false // 销毁组件
nextTick(() => {
hackResetWxReplySelect.value = true // 重建组件
})
})
// ======================== 菜单编辑（素材选择） ========================
const selectMaterial = (item: any) => {
const articleId = item.articleId
const articles = item.content.newsItem
// 提示，针对多图文
if (articles.length > 1) {
message.alertWarning('您选择的是多图文，将默认跳转第一篇')
}
showNewsDialog.value = false
// 设置菜单的回复
menu.value.articleId = articleId
menu.value.replyArticles = []
articles.forEach((article) => {
menu.value.replyArticles.push({
title: article.title,
description: article.digest,
picUrl: article.picUrl,
url: article.url
})
})
}
const deleteMaterial = () => {
delete menu.value['articleId']
delete menu.value['replyArticles']
}
</script>
<style lang="scss" scoped>
.el-input {
width: 70%;
margin-right: 2%;
}
.configure_page {
.delete_btn {
margin-bottom: 15px;
text-align: right;
}
.menu_content {
margin-top: 20px;
}
.configur_content {
padding: 20px 10px;
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.ope-row {
padding-top: 10px;
text-align: center;
}
}
}
.blue {
margin-top: 10px;
color: #29b6f6;
}
.applet {
margin-bottom: 20px;
span {
width: 20%;
}
}
.input_width {
width: 40%;
}
.material {
.input_width {
width: 30%;
}
.el-textarea {
width: 80%;
}
}
}
</style>
src/views/mp/menu/components/MenuPreviewer.vue 0 → 100644
<template>
<div class="menu_bottom" v-for="(parent, x) of menuList" :key="x">
<!-- 一级菜单 -->
<div
@click="menuClicked(parent, x)"
class="menu_item"
:class="{ active: props.activeIndex === `${x}` }"
>
<Icon icon="ep:fold" color="black" />{{ parent.name }}
</div>
<!-- 以下为二级菜单-->
<div class="submenu" v-if="parentIndex === x && parent.children">
<div class="subtitle menu_bottom" v-for="(child, y) in parent.children" :key="y">
<div
class="menu_subItem"
v-if="parent.children"
:class="{ active: activeIndex === `${x}-${y}` }"
@click="subMenuClicked(child, x, y)"
>
{{ child.name }}
</div>
</div>
<!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号 -->
<div
class="menu_bottom menu_addicon"
v-if="!parent.children || parent.children.length < 5"
@click="addSubMenu(x, parent)"
>
<Icon icon="ep:plus" class="plus" />
</div>
</div>
</div>
<!-- 一级菜单加号 -->
<div class="menu_bottom menu_addicon" v-if="menuList.length < 3" @click="addMenu">
<Icon icon="ep:plus" class="plus" />
</div>
</template>
<script setup lang="ts">
import { Menu } from './types'
const props = defineProps<{
modelValue: Menu[]
activeIndex: string
parentIndex: number
accountId?: number
}>()
const emit = defineEmits<{
(e: 'update:modelValue', v: Menu[])
(e: 'menu-clicked', parent: Menu, x: number)
(e: 'submenu-clicked', child: Menu, x: number, y: number)
}>()
const menuList = computed<Menu[]>({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
// 添加横向一级菜单
const addMenu = () => {
const index = menuList.value.length
const menu = {
name: '菜单名称',
children: [],
reply: {
// 用于存储回复内容
type: 'text',
accountId: props.accountId // 保证组件里，可以使用到对应的公众号
}
}
menuList.value[index] = menu
menuClicked(menu, index - 1)
}
// 添加横向二级菜单；parent 表示要操作的父菜单
const addSubMenu = (i: number, parent: any) => {
const subMenuKeyLength = parent.children.length // 获取二级菜单key长度
const addButton = {
name: '子菜单名称',
reply: {
// 用于存储回复内容
type: 'text',
accountId: props.accountId // 保证组件里，可以使用到对应的公众号
}
}
parent.children[subMenuKeyLength] = addButton
subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength)
}
const menuClicked = (parent: Menu, x: number) => {
emit('menu-clicked', parent, x)
}
const subMenuClicked = (child: Menu, x: number, y: number) => {
emit('submenu-clicked', child, x, y)
}
</script>
<style lang="scss" scoped>
.menu_bottom {
position: relative;
display: inline-block;
float: left;
width: 85.5px;
text-align: center;
cursor: pointer;
background-color: #fff;
border: 1px solid #ebedee;
box-sizing: border-box;
&.menu_addicon {
height: 46px;
line-height: 46px;
.plus {
color: #2bb673;
}
}
.menu_item {
display: flex;
width: 100%;
height: 44px;
line-height: 44px;
// text-align: center;
box-sizing: border-box;
align-items: center;
justify-content: center;
&.active {
border: 1px solid #2bb673;
}
}
.menu_subItem {
height: 44px;
line-height: 44px;
text-align: center;
box-sizing: border-box;
&.active {
border: 1px solid #2bb673;
}
}
}
/* 第二级菜单 */
.submenu {
position: absolute;
bottom: 45px;
width: 85.5px;
.subtitle {
background-color: #fff;
box-sizing: border-box;
}
}
</style>
src/views/mp/menu/components/types.ts 0 → 100644
export interface Replay {
title: string
description: string
picUrl: string
url: string
}
export type MenuType =
| ''
| 'click'
| 'view'
| 'scancode_waitmsg'
| 'scancode_push'
| 'pic_sysphoto'
| 'pic_photo_or_album'
| 'pic_weixin'
| 'location_select'
| 'article_view_limited'
interface _RawMenu {
// db
id: number
parentId: number
accountId: number
appId: string
createTime: number
// mp-native
name: string
menuKey: string
type: MenuType
url: string
miniProgramAppId: string
miniProgramPagePath: string
articleId: string
replyMessageType: string
replyContent: string
replyMediaId: string
replyMediaUrl: string
replyThumbMediaId: string
replyThumbMediaUrl: string
replyTitle: string
replyDescription: string
replyArticles: Replay
replyMusicUrl: string
replyHqMusicUrl: string
}
export type RawMenu = Partial<_RawMenu>
interface _Reply {
type: string
accountId: number
content: string
mediaId: string
url: string
thumbMediaId: string
thumbMediaUrl: string
title: string
description: string
articles: null | Replay[]
musicUrl: string
hqMusicUrl: string
}
export type Reply = Partial<_Reply>
interface _Menu extends RawMenu {
children: _Menu[]
reply: Reply
}
export type Menu = Partial<_Menu>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment