公众号菜单

src/router/modules/charge.ts

@@ -1,60 +1,60 @@
-// import { RouteRecordRaw } from 'vue-router';
-// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// // @ts-ignore
-// const router: RouteRecordRaw[] = [
-//   {
-//     path: '/charge',
-//     component: () => import('@/layout/index.vue'),
-//     meta: { title: '回传管理', icon: 'user' },
-//     children: [
-//       {
-//         path: 'index',
-//         name: 'user-account11',
-//         meta: { title: '巨量2.0事件-微信小程序', icon: 'home' },
-//         component: () => import('@/views/payBack/juliangPlus/index.vue')
-//       },
-//       {
-//         path: 'index1',
-//         name: 'user-account',
-//         meta: { title: '被关注回复', icon: 'home' },
-//         component: () =>
-//           import('@/views/officialAccount/attentionReply/index.vue')
-//       },
-//       {
-//         path: 'index3',
-//         name: 'user-account33',
-//         meta: { title: '关键字回复', icon: 'home' },
-//         component: () =>
-//           import('@/views/officialAccount/keywordReply/index.vue')
-//       },
-//       {
-//         path: 'index4',
-//         name: 'user-account44',
-//         meta: { title: '公众号列表', icon: 'home' },
-//         component: () =>
-//           import('@/views/officialAccount/officialList/index.vue')
-//       },
-//       {
-//         path: 'index5',
-//         name: 'user-account55',
-//         meta: { title: '客服消息', icon: 'home' },
-//         component: () => import('@/views/officialAccount/newsService/index.vue')
-//       },
-//       {
-//         path: 'index6',
-//         name: 'user-account66',
-//         meta: { title: '用户分群', icon: 'home' },
-//         component: () => import('@/views/customer/segment/index.vue')
-//       },
-//       {
-//         path: 'index2',
-//         name: 'user-account123',
-//         meta: { title: '菜单', icon: 'home', hidden: false },
-//         component: () =>
-//           import('@/views/officialAccount/publicCustomMenu/index.vue')
-//       }
-//     ]
-//   }
-// ];
+import { RouteRecordRaw } from 'vue-router';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const router: RouteRecordRaw[] = [
+  {
+    path: '/charge',
+    component: () => import('@/layout/index.vue'),
+    meta: { title: '回传管理', icon: 'user' },
+    children: [
+      {
+        path: 'index',
+        name: 'user-account11',
+        meta: { title: '巨量2.0事件-微信小程序', icon: 'home' },
+        component: () => import('@/views/payBack/juliangPlus/index.vue')
+      },
+      {
+        path: 'index1',
+        name: 'user-account',
+        meta: { title: '被关注回复', icon: 'home' },
+        component: () =>
+          import('@/views/officialAccount/attentionReply/index.vue')
+      },
+      {
+        path: 'index3',
+        name: 'user-account33',
+        meta: { title: '关键字回复', icon: 'home' },
+        component: () =>
+          import('@/views/officialAccount/keywordReply/index.vue')
+      },
+      {
+        path: 'index4',
+        name: 'user-account44',
+        meta: { title: '公众号列表', icon: 'home' },
+        component: () =>
+          import('@/views/officialAccount/officialList/index.vue')
+      },
+      {
+        path: 'index5',
+        name: 'user-account55',
+        meta: { title: '客服消息', icon: 'home' },
+        component: () => import('@/views/officialAccount/newsService/index.vue')
+      },
+      {
+        path: 'index6',
+        name: 'user-account66',
+        meta: { title: '用户分群', icon: 'home' },
+        component: () => import('@/views/customer/segment/index.vue')
+      },
+      {
+        path: 'index2',
+        name: 'user-account123',
+        meta: { title: '菜单', icon: 'home', hidden: false },
+        component: () =>
+          import('@/views/officialAccount/publicCustomMenu/index.vue')
+      }
+    ]
+  }
+];
 
-// export default router;
+export default router;

src/views/officialAccount/publicCustomMenu/form/customMenu.vue

@@ -116,7 +116,7 @@
                     <div
                       v-if="menus?.buttons[menus?.curActiveIndex]?.sub_button[menus?.curSubActiveIndex]?.type == 'view'">
                       <el-form-item label="网页链接">
-                        <el-input style="width:300px;"
+                        <el-input style="width:300px;" type="url"
                           v-model="menus.buttons[menus.curActiveIndex].sub_button[menus.curSubActiveIndex].url"
                           auto-complete="off" placeholder="请输入网页链接"></el-input>
                       </el-form-item>
@@ -137,7 +137,6 @@
                     <el-form-item label="菜单名称" prop="title">
                       <el-input v-model="menus.buttons[menus.curActiveIndex].name" @change="nameChange"
                         style="width: 260px" :maxlength="10" placeholder="请输入菜单名称(最多10个字符)"></el-input>
-                      <span style="color:#fd555d;padding-left:10px">受微信限制，如您发现微信显示有问题，请减少内容</span>
                     </el-form-item>
                     <div v-if="!menus.buttons[menus.curActiveIndex].sub_button.length">
                       <el-form-item label="菜单内容">
@@ -163,7 +162,7 @@
                       </div>
                       <div v-if="menus?.buttons[menus?.curActiveIndex]?.type == 'view'">
                         <el-form-item label="网页链接">
-                          <el-input style="width:300px;" v-model="menus.buttons[menus.curActiveIndex].url"
+                          <el-input style="width:300px;" type="url" v-model="menus.buttons[menus.curActiveIndex].url"
                             auto-complete="off" placeholder="请输入网页链接"></el-input>
                         </el-form-item>
                       </div>
@@ -421,15 +420,15 @@ onMounted(() => {
     init: true,
     buttons:
       [
-        { name: "首页", hasChild: false, showChildMenu: true, content: '', type: "miniprogram", url: "", key: "首页", sub_button: [], },
+        { name: "首页", hasChild: false, showChildMenu: true, content: '', type: "miniprogram", url: "/pages/index/index", key: "首页", sub_button: [], },
         {
-          name: "我的", hasChild: false, showChildMenu: false, content: '', type: "miniprogram", url: "", key: "我的", sub_button: [],
+          name: "我的", hasChild: false, showChildMenu: false, content: '', type: "miniprogram", url: "/pages/member/index", key: "我的", sub_button: [],
         },
         {
           name: "菜单名称3", hasChild: true, showChildMenu: false, content: '', type: "miniprogram", url: "", key: "菜单名称3",
           sub_button:
             [
-              { key: "子菜单名称", type: "miniprogram", name: "子菜单名称", content: '', url: "" }
+              { key: "子菜单名称", type: "view", name: "子菜单名称", content: '', url: "" }
             ]
         }
       ]

src/views/officialAccount/publicCustomMenu/form/validation.ts

@@ -11,6 +11,15 @@ export const validation = (buttons: Array<object>) => {
       ) {
         throw new Error(`(${button.name}) 链接不能为空`);
       }
+
+      if (
+        ['view'].includes(button.type) &&
+        button.sub_button.length <= 0 &&
+        !isValidUrl(button.url)
+      ) {
+        throw new Error(`(${button.name}) 链接不合法`);
+      }
+
       if (
         button.sub_button.length <= 0 &&
         button.type == 'click' &&
@@ -29,6 +38,10 @@ export const validation = (buttons: Array<object>) => {
           ) {
             throw new Error(`子菜单 (${subButton.name}) 链接不能为空`);
           }
+
+          if (['view'].includes(subButton.type) && !isValidUrl(subButton.url)) {
+            throw new Error(`(${subButton.name}) 链接不合法`);
+          }
           if (subButton.type == 'click' && !subButton.content) {
             throw new Error(`子菜单 (${subButton.name}) 文本内容不能为空`);
           }
@@ -42,3 +55,11 @@ export const validation = (buttons: Array<object>) => {
     return false;
   }
 };
+
+function isValidUrl(url: string) {
+  // 此处可以编写URL合法性检查的逻辑
+  // 返回 true 或 false 表示 URL 是否合法
+  // 例如，可以使用正则表达式进行检查
+  const urlRegex = /^(http|https):\/\/[^ "]+$/;
+  return urlRegex.test(url);
+}

src/views/officialAccount/publicCustomMenu/index.vue

@@ -4,7 +4,12 @@
       <Search :search="search" :reset="resetQuery">
         <template v-slot:body>
           <el-form-item label="模板名称">
-            <el-input placeholder="请输入模板名称" v-model="query.keyword" clearable></el-input>
+            <el-input placeholder="请输入模板名称" v-model="query.title" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="系统类型">
+            <el-select v-model="query.type" clearable placeholder="请选择系统类型">
+              <el-option v-for="item in systemType" :key="item.id" :label="item.label" :value="item.value" />
+            </el-select>
           </el-form-item>
           <el-form-item label="公众号">
             <el-select v-model="query.wechat_authorization_info_id" filterable remote clearable
@@ -20,7 +25,7 @@
               <el-alert title="注：一个公众号对应一套菜单配置，如果重复配置，原内容将被覆盖，以最新配置为准" type="warning" show-icon :closable="false" />
             </div>
             <div class="pt-5 pl-2">
-              <el-button type="primary" v-action="'wechatPlatform.WechatKeywords.add'" size="default"
+              <el-button type="primary" v-action="'wechatPlatform.WechatMenu.add'" size="default"
                 @click="openType('createVisible', null)">新增</el-button>
             </div>
             <el-table :data="tableData" class="mt-3" v-loading="loading">
@@ -43,16 +48,16 @@
 
               <el-table-column label="操作" width="200" fixed="right">
                 <template #default="scope">
-                  <el-button link type="primary" v-action="'wechatPlatform.WechatKeywords.edit'" size="small"
+                  <el-button link type="primary" v-action="'wechatPlatform.WechatMenu.edit'" size="small"
                     @click="openType('createVisible', scope.row)">编辑</el-button>
                   <br />
-                  <el-button link type="primary" v-action="'wechatPlatform.WechatKeywords.detail'" size="small"
+                  <el-button link type="primary" v-action="'wechatPlatform.WechatMenu.detail'" size="small"
                     @click="openType('createVisible', { look: true, ...scope.row })">查看</el-button>
                   <br />
-                  <el-button link type="primary" size="small" v-action="'wechatPlatform.WechatKeywords.del'"
+                  <el-button link type="primary" size="small" v-action="'wechatPlatform.WechatMenu.del'"
                     @click="deleteChange(scope.row)">删除</el-button>
                   <br />
-                  <el-button link type="primary" size="small" v-action="'wechatPlatform.WechatKeywords.allocation'"
+                  <el-button link type="primary" size="small" v-action="'wechatPlatform.WechatMenu.allocation'"
                     @click="openType('configPublicVisible', scope.row)">配置公众号</el-button>
                   <br />
                 </template>
@@ -76,11 +81,7 @@ import { checkPermission } from '@/directives/permission';
 import Create from './form/create.vue';
 import configPublic from '@/views/officialAccount/components/configPublic.vue'
 import { useGetList } from '@/hook/curd/useGetList';
-import {
-  wechatPlatformKeywordGetConfig,
-  wechatPlatformKeywordSetConfig,
-  wechatPlatformKeywordDel
-} from '@/api/officialAccount/keywordReply/index'
+import { wechatPlatformMenuDel } from '@/api/officialAccount/publicCustomMenu/index'
 import { wechatPlatformOfficialAccountList } from '@/api/officialAccount/officialList/index'
 const api = 'wechatPlatform/menu/list';
 import Cache from '@/support/cache';
@@ -92,7 +93,7 @@ const createTitle = ref('新增')
 const { data, query, search, reset, loading } = useGetList(api);
 const rolesIdentify = inject('rolesIdentify')
 const tableData = computed(() => data.value?.data);
-
+const systemType = ref([{ id: 1, label: 'android', value: 'android' }, { id: 2, label: 'ios', value: 'ios' }])
 
 const openType = (type: string, data: object | null) => {
   current.value = data;
@@ -135,7 +136,7 @@ const closeType = (type: string) => {
 
 const deleteChange = (row: object) => {
   ElMessageBox.confirm(
-    '确定要删除吗?',
+    '一旦删除此模板，其对应的公众号菜单会一并清空，确定要删除此菜单模板吗?',
     '提示',
     {
       confirmButtonText: '确定',
@@ -144,7 +145,7 @@ const deleteChange = (row: object) => {
     }
   )
     .then(() => {
-      wechatPlatformKeywordDel({ ids: row.id }).then(res => {
+      wechatPlatformMenuDel({ ids: row.id }).then(res => {
         console.log(res);
         ElMessage.success(res.message)
         search()