From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mp/menu/components/MenuEditor.vue | 244 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 244 insertions(+), 0 deletions(-)
diff --git a/src/views/mp/menu/components/MenuEditor.vue b/src/views/mp/menu/components/MenuEditor.vue
new file mode 100644
index 0000000..5df1785
--- /dev/null
+++ b/src/views/mp/menu/components/MenuEditor.vue
@@ -0,0 +1,244 @@
+<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="璇疯緭鍏ュ皬绋嬪簭鐨刟ppid"
+ 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
+ type="news"
+ :account-id="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" v-model="menu.reply" />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import WxReplySelect from '@/views/mp/components/wx-reply'
+import WxNews from '@/views/mp/components/wx-news'
+import WxMaterialSelect from '@/views/mp/components/wx-material-select'
+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>
--
Gitblit v1.8.0