优化小程序菜单管理功能

src/api/system/payment/model/index.ts

@@ -8,6 +8,8 @@ export interface Payment {
   id?: number;
   // 支付方式
   name?: string;
+  // 支付类型
+  type?: number;
   // 标识
   code?: string;
   // 支付图标

src/components/PayMethod/index.vue

@@ -30,17 +30,16 @@
       dictCode?: string;
     }>(),
     {
-      placeholder: '请选择服务器厂商'
+      placeholder: '请选择支付方式'
     }
   );
 
   // 字典数据
   const options = ref<SelectProps['options']>([
-    { value: 'wxPay', label: '微信支付', icon: 'WechatOutlined' },
+    { value: 0, label: '余额支付', key: 'balancePay', icon: 'PayCircleOutlined' },
-    { value: 'aliPay', label: '支付宝支付', icon: 'AlipayCircleOutlined' },
+    { value: 1, label: '微信支付', key: 'wxPay', icon: 'WechatOutlined' },
-    { value: 'balancePay', label: '余额支付', icon: 'PayCircleOutlined' },
+    { value: 2, label: '会员卡支付',key: 'userCardPay',  icon: 'IdcardOutlined' },
-    { value: 'yearCardPay', label: '年卡支付', icon: 'IdcardOutlined' },
+    { value: 3, label: '支付宝支付',key: 'aliPay',  icon: 'AlipayCircleOutlined' }
-    { value: 'icCardPay', label: 'IC卡支付', icon: 'IdcardOutlined' }
   ]);
 
   /* 更新选中数据 */

src/views/cms/mp-weixin/admin/components/mpMenuEdit.vue

@@ -0,0 +1,279 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑菜单' : '添加菜单'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="菜单名称" name="title">
+        <a-input
+          allow-clear
+          placeholder="请输入菜单名称"
+          v-model:value="form.title"
+        />
+      </a-form-item>
+      <a-form-item label="路由地址" name="path">
+        <a-input
+          allow-clear
+          placeholder="请输入路由地址"
+          v-model:value="form.path"
+        />
+      </a-form-item>
+      <a-form-item label="菜单图标" name="icon">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseFile"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="图标颜色" name="color">
+        <ele-color-picker
+          :show-alpha="true"
+          v-model:value="form.color"
+          :predefine="predefineColors"
+        />
+      </a-form-item>
+      <a-form-item label="打开方式" name="target">
+        <DictSelect
+          dict-code="navType"
+          class="form-item"
+          placeholder="请选择链接方式"
+          v-model:value="form.target"
+        />
+      </a-form-item>
+      <a-form-item label="所在行" name="rows">
+        <a-input-number
+          :min="0"
+          :max="3"
+          class="ele-fluid"
+          placeholder="请输入所在行"
+          v-model:value="form.rows"
+        />
+      </a-form-item>
+      <a-form-item label="管理人员可见" name="adminShow">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.adminShow === 1"
+          @update:checked="updateAdminShow"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addMpMenu, updateMpMenu } from '@/api/cms/mp-menu';
+  import { MpMenu } from '@/api/cms/mp-menu/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 类型 0服务 1订单
+    type?: number;
+    // 修改回显的数据
+    data?: MpMenu | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<MpMenu>({
+    menuId: undefined,
+    parentId: 0,
+    title: '',
+    type: 2,
+    isMpWeixin: true,
+    path: undefined,
+    component: undefined,
+    target: undefined,
+    icon: '',
+    color: undefined,
+    hide: undefined,
+    position: undefined,
+    rows: undefined,
+    active: undefined,
+    userId: 0,
+    adminShow: undefined,
+    home: undefined,
+    sortNumber: 100,
+    comments: '',
+    status: 0
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    title: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写菜单名称',
+        trigger: 'blur'
+      }
+    ],
+    path: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写路由地址',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseFile = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.thumbnail,
+      status: 'done'
+    });
+    form.icon = data.thumbnail;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.icon = '';
+  };
+
+  const updateAdminShow = (value: boolean) => {
+    form.adminShow = value ? 1 : 0;
+  };
+
+  // 预设颜色
+  const predefineColors = ref([
+    '#40a9ff',
+    '#9254de',
+    '#36cfc9',
+    '#73d13d',
+    '#f759ab',
+    '#cf1313',
+    '#ff4d4f',
+    '#ffa940',
+    '#ffc53d',
+    '#f3d3d3',
+    '#1b1b1b',
+    '#363636',
+    '#4d4d4d',
+    '#737373',
+    '#a6a6a6',
+    '#d9d9d9',
+    '#e6e6e6',
+    '#f2f2f2',
+    '#f7f7f7',
+    '#fafafa'
+  ]);
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateMpMenu : addMpMenu;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.type) {
+          form.type = props.type;
+        }
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.icon) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.icon,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/cms/mp-weixin/admin/components/search.vue

@@ -0,0 +1,52 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { watch } from 'vue';
+  import useSearch from '@/utils/use-search';
+  import { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: MpMenuParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 表单数据
+  const { where } = useSearch<MpMenu>({
+    type: 0
+  });
+
+  const handleSearch = () => {
+    emit('search', where);
+  };
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/cms/mp-weixin/admin/components/simulator.vue

@@ -0,0 +1,550 @@
+<template>
+  <div class="phone-layout" v-if="form">
+    <div class="phone-header-black ele-fluid">
+      <div class="title ele-fluid">
+        <div class="title-bar">
+          <span class="back"></span>
+          <span>{{ form.pageName || '个人中心' }}</span>
+          <a class="share" @click="onShare"></a>
+        </div>
+      </div>
+    </div>
+    <!--  会员信息卡片  -->
+    <template v-if="form.showUserCard">
+      <a-popover>
+        <template #content> 点击更换背景 </template>
+        <div
+          class="user-card"
+          :style="{
+            backgroundImage: 'url(' + param.mp_user_top + ')'
+          }"
+          @click="
+            openUserCard({
+              name: 'mp_user_top',
+              value: param.mp_user_top,
+              comments: '小程序我的顶部背景图片',
+              sortNumber: 100
+            })
+          "
+        >
+          <div class="user-avatar" @click.stop="onAvatar">
+            <a-avatar :src="param.site_logo" :size="60" />
+            <div class="user-info">
+              <div class="nickname">昵称</div>
+              <div class="phone">手机号码</div>
+            </div>
+          </div>
+        </div>
+      </a-popover>
+      <UserCardEdit
+        v-model:visible="showUserCardEdit"
+        :data="current"
+        @done="reload"
+      />
+    </template>
+    <!--  订单卡片  -->
+    <template v-if="form.showOrderCard">
+      <div class="order-card ele-cell">
+        <div
+          v-for="(item, index) in order"
+          :key="index"
+          class="ele-cell-content ele-text-center btn-center"
+          @click="openMpMenuEdit(item)"
+        >
+          <a-image :src="item.icon" :width="30" :preview="false" />
+          <span>{{ item.title }}</span>
+        </div>
+      </div>
+    </template>
+    <template v-if="form.showToolsCard">
+      <div class="tools-card">
+        <div
+          v-for="(item, index) in server"
+          :key="index"
+          class="ele-cell"
+          @click="openMpMenuEdit(item)"
+        >
+          <a-avatar :src="item.icon" :size="24" />
+          <div
+            class="title ele-cell-content"
+            :style="{ color: item.color || '#333333' }"
+            >{{ item.title }}</div
+          >
+          <RightOutlined class="ele-text-secondary" />
+        </div>
+      </div>
+      <MpMenuEdit
+        v-model:visible="showMpMenuEdit"
+        :data="current"
+        @done="reload"
+      />
+    </template>
+
+    <template v-if="form.showMenuCard">
+      <div class="phone-body" style="overflow-y: auto; overflow-x: hidden">
+        <!-- 幻灯片轮播 -->
+        <template v-if="form.showCarousel">
+          <a-carousel arrows autoplay :dots="true">
+            <template v-if="adImageList">
+              <template v-for="(img, index) in adImageList" :key="index">
+                <div class="ad-item">
+                  <a-image
+                    :preview="false"
+                    :src="img.url"
+                    width="100%"
+                    height="200px"
+                  />
+                </div>
+              </template>
+            </template>
+          </a-carousel>
+        </template>
+        <!-- 导航菜单 -->
+        <template v-if="form.showMenuCard">
+          <div class="menu-card ele-cell">
+            <div
+              v-for="(item, index) in scrollList"
+              :key="index"
+              class="ele-cell-content ele-text-center btn-center"
+              @click="openMpMenuEdit(item)"
+            >
+              <a-image :src="item.icon" :width="30" :preview="false" />
+              <span>{{ item.title }}</span>
+            </div>
+          </div>
+          <MpMenuEdit
+            v-model:visible="showMpMenuEdit"
+            :data="current"
+            @done="reload"
+          />
+        </template>
+        <!-- 商户列表 -->
+        <template v-if="form.showShopCard">
+          <div class="merchant-card-title">场地预定</div>
+          <div
+            class="merchant-card ele-cell"
+            v-for="(item, index) in shopList"
+            :key="index"
+          >
+            <a-image :src="item.image" :width="96" :preview="false" />
+            <div class="merchant-info ele-cell-content">
+              <div class="merchant-name">{{ item.merchantName }}</div>
+              <div class="merchant-desc ele-cell-desc">
+                {{ item.comments }}
+              </div>
+            </div>
+            <!--            <div class="">-->
+            <!--              <a-button>我要去</a-button>-->
+            <!--            </div>-->
+          </div>
+        </template>
+        <!-- 培训课程 -->
+        <template v-if="form.showTtrainCard">
+          <div class="merchant-card-title">培训课程</div>
+          <div
+            class="merchant-card ele-cell"
+            v-for="(item, index) in shopList"
+            :key="index"
+            @click="openMpMenuEdit(item)"
+          >
+            <a-image :src="item.image" :width="96" :preview="false" />
+            <div class="merchant-info ele-cell-content">
+              <div class="merchant-name">{{ item.merchantName }}</div>
+              <div class="merchant-desc ele-cell-desc">
+                {{ item.comments }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+    <a-card
+      class="buy-bar"
+      :bordered="false"
+      :body-style="{ padding: '12px 16px' }"
+    >
+      <div class="ele-cell">
+        <a
+          class="home-btn ele-cell-content ele-text-secondary"
+          @click="openUrl(`/mp-weixin/home`)"
+        >
+          <HomeOutlined class="icon" />
+          <span>首页</span>
+        </a>
+        <a
+          class="shop-btn ele-cell-content ele-text-secondary"
+          @click="openUrl(`/mp-weixin/shop`)"
+        >
+          <ShopOutlined class="icon" />
+          <span>商城</span>
+        </a>
+        <a
+          class="order-btn ele-cell-content ele-text-secondary"
+          @click="openUrl(`/mp-weixin/order`)"
+        >
+          <ProfileOutlined class="icon" />
+          <span>订单</span>
+        </a>
+        <a
+          class="user-btn ele-cell-content ele-text-secondary"
+          @click="openUrl(`/mp-weixin/user`)"
+        >
+          <UserOutlined class="icon ele-text-danger" />
+          <span class="ele-text-danger">我的</span>
+        </a>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    ProfileOutlined,
+    ShopOutlined,
+    HomeOutlined,
+    UserOutlined,
+    RightOutlined
+  } from '@ant-design/icons-vue';
+  import { ref, unref, watch } from 'vue';
+  import { MpWeixinParam, WebsiteField } from '@/api/cms/website/field/model';
+  import { listWebsiteField } from '@/api/system/website/field';
+  import { MpMenu } from '@/api/cms/mp-menu/model';
+  import { listMpMenu } from '@/api/cms/mp-menu';
+  import { listAd } from '@/api/cms/ad';
+  import { listMerchant } from '@/api/shop/merchant';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { openUrl } from '@/utils/common';
+  import { useRouter } from 'vue-router';
+  const { currentRoute } = useRouter();
+  const { query } = unref(currentRoute);
+
+  import MpMenuEdit from './mpMenuEdit.vue';
+  import UserCardEdit from '@/views/cms/field/components/website-field-edit.vue';
+
+  const prpos = withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      form?: any | null;
+      type?: number;
+      list?: any[] | null;
+      refresh?: boolean;
+    }>(),
+    {
+      placeholder: undefined
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const param = ref<MpWeixinParam>({});
+  const showUserCardEdit = ref(false);
+  const showMpMenuEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<WebsiteField | null>(null);
+
+  // 幻灯片广告
+  const adImageList = ref<any[]>();
+  // 首页导航图标
+  const scrollList = ref<any[]>();
+  // 订单图标
+  const order = ref<any[]>();
+  // 服务图标
+  const server = ref<any[]>();
+  // 商户列表
+  const shopList = ref<Merchant[]>();
+
+  const config = ref({
+    selector: '#content', //容器，可使用css选择器
+    branding: false,
+    language: 'zh_CN', //调用放在langs文件夹内的语言包
+    toolbar: false, //隐藏工具栏
+    menubar: false, //隐藏菜单栏
+    inline: true, //开启内联模式
+    plugins: [] //选择需加载的插件
+    //选中时出现的快捷工具，与插件有依赖关系
+    // quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
+    // init_instance_callback: function (editor) {
+    //   editor.setContent('这里是你的内容字符串');
+    // }
+  });
+
+  /* 打开编辑弹窗 */
+  const openUserCard = (row?: WebsiteField) => {
+    current.value = row ?? null;
+    showUserCardEdit.value = true;
+  };
+
+  /* 打开编辑弹窗 */
+  const openMpMenuEdit = (row?: MpMenu) => {
+    current.value = row ?? null;
+    showMpMenuEdit.value = true;
+  };
+
+  const onShare = () => {};
+
+  const onAvatar = () => {};
+
+  const reload = () => {
+    listWebsiteField({}).then((list) => {
+      list.map((d) => {
+        const key = String(d.name);
+        param.value[key] = d.value;
+      });
+    });
+
+    listMpMenu({}).then((list) => {
+      server.value = list.filter((d) => d.type == 0);
+      order.value = list.filter((d) => d.type == 1);
+      scrollList.value = list.filter((d) => d.type == 2);
+    });
+
+    listAd({ adType: '幻灯片' }).then((res) => {
+      const carouselImages = res[0].images;
+      if (carouselImages) {
+        adImageList.value = JSON.parse(carouselImages);
+      }
+    });
+
+    listMerchant({}).then((list) => {
+      shopList.value = list;
+    });
+    emit('done');
+  };
+
+  reload();
+
+  watch(
+    () => prpos.refresh,
+    (refresh) => {
+      if (refresh) {
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .phone-layout {
+    position: fixed;
+    right: 16px;
+    width: 390px;
+    height: 844px;
+    background: url('@/assets/img/app-ui.png');
+    background-repeat: no-repeat;
+    background-position: top;
+    background-size: 100%;
+    //position: relative;
+    padding: 0 16px;
+    .phone-header-black {
+      height: 99px;
+      border-radius: 20px 20px 0 0;
+      background-size: 100%;
+      .title {
+        height: 99px;
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: end;
+        padding-bottom: 13px;
+        .title-bar {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          .back {
+            display: block;
+            width: 50px;
+            margin-left: 3px;
+            background-color: #ffffff;
+          }
+          .share {
+            display: block;
+            width: 50px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    .phone-body-bg {
+      padding: 0 16px;
+      height: 680px;
+      border-radius: 0 0 44px 44px;
+      overflow: hidden;
+    }
+    .phone-body {
+      width: 356px;
+      margin-left: 17px;
+      height: 630px;
+      padding: 0;
+      position: absolute;
+      top: 98px;
+      left: 0;
+      z-index: 999;
+      .comments {
+        padding: 20px;
+        word-break: break-all;
+      }
+      .form-data {
+        padding: 10px 20px;
+        .submit-btn {
+          padding: 30px 0;
+        }
+      }
+    }
+    .goods {
+      .price {
+        font-size: 18px;
+      }
+      .ele-cell-title {
+        font-weight: 600;
+        font-size: 16px;
+      }
+      .goods-attr {
+      }
+    }
+    .goods-divider {
+      height: 6px;
+    }
+    .buy-bar {
+      position: fixed;
+      width: 356px;
+      bottom: 70px;
+      //top: 881px;
+      background-color: #ffffff;
+      border-radius: 0 0 44px 44px;
+      border-top: 1px solid var(--grey-8);
+      .ele-cell-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .shop-btn,
+      .kefu-btn,
+      .star-btn {
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+        padding: 0 9px;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+      .icon {
+        font-size: 19px;
+      }
+      .buy-btn {
+        display: flex;
+        .add-cart {
+          border-radius: 100px 0 0 100px;
+          border: none;
+          background-color: var(--orange-5);
+          color: #ffffff;
+          height: 40px;
+          width: 95px;
+        }
+        .buy-now {
+          border-radius: 0 100px 100px 0;
+          border: none;
+          background-color: var(--red-6);
+          color: #ffffff;
+          height: 40px;
+          width: 95px;
+        }
+      }
+    }
+  }
+  :deep(.slick-slide) {
+    overflow: hidden;
+  }
+  :deep(.slick-arrow.custom-slick-arrow) {
+    font-size: 38px;
+  }
+  :deep(.slick-arrow.custom-slick-arrow) {
+    color: #fff;
+    background-color: rgba(31, 45, 61, 0.11);
+    transition: ease all 0.3s;
+    opacity: 0.3;
+    z-index: 1;
+  }
+  :deep(.slick-arrow.custom-slick-arrow:before) {
+    display: none;
+  }
+  :deep(.slick-arrow.custom-slick-arrow:hover) {
+    color: #fff;
+    opacity: 0.5;
+  }
+  :deep(.slick-slide h3) {
+    color: #fff;
+  }
+
+  .user-card {
+    height: 170px;
+    margin: 0 1px;
+    background-color: var(--grey-10);
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    .user-avatar {
+      margin-left: 16px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      .user-info {
+        margin-left: 10px;
+        .nickname {
+          color: var(--grey-3);
+          font-size: 18px;
+          font-weight: 500;
+        }
+        .phone {
+          color: var(--grey-5);
+        }
+      }
+    }
+  }
+
+  .order-card {
+    width: 340px;
+    height: 80px;
+    margin: 0 1px;
+    background: #ffffff;
+    border-radius: 5px;
+    border-color: slategrey;
+    position: absolute;
+    top: 230px;
+    left: 24px;
+    .btn-center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  .tools-card {
+    width: 340px;
+    margin: 0 1px;
+    padding: 6px 16px;
+    background: #ffffff;
+    border-radius: 5px;
+    border-color: slategrey;
+    position: absolute;
+    top: 324px;
+    left: 24px;
+    .ele-cell {
+      padding: 4px 0;
+      border-bottom: 1px solid var(--grey-9);
+      cursor: pointer;
+    }
+    .btn-center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>

src/views/cms/mp-weixin/admin/index.vue

@@ -0,0 +1,296 @@
+<template>
+  <a-page-header :title="title" @back="() => $router.go(-1)">
+    <div class="ele-cell ele-cell-align-top">
+      <!-- 设计画布 -->
+      <div class="body ele-cell-content ele-bg-white" style="display: ">
+        <a-card :bordered="false" :body-style="{ padding: '16px' }">
+          <ele-pro-table
+            ref="tableRef"
+            row-key="menuId"
+            :columns="columns"
+            :datasource="datasource"
+            :customRow="customRow"
+            tool-class="ele-toolbar-form"
+            class="sys-org-table"
+          >
+            <template #toolbar>
+              <search
+                @search="reload"
+                :selection="selection"
+                @add="openEdit"
+                @remove="removeBatch"
+                @batchMove="openMove"
+              />
+            </template>
+            <template #footer>
+              <div class="ele-text-secondary"
+                >温馨提示：选图标可以上<a
+                  href="https://www.iconfont.cn"
+                  target="_blank"
+                  >阿里巴巴矢量图标库</a
+                >，修改完后需要<a @click="clearSiteInfoCache">更新缓存</a
+                >才会生效</div
+              >
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'icon'">
+                <a-avatar :src="record.icon" :width="50" />
+              </template>
+              <template v-if="column.key === 'path'">
+                <span class="ele-text-placeholder">{{ record.path }}</span>
+              </template>
+              <template v-if="column.key === 'component'">
+                <span class="ele-text-placeholder">{{ record.component }}</span>
+              </template>
+              <template v-if="column.key === 'status'">
+                <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+                <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+              </template>
+              <template v-if="column.key === 'action'">
+                <a-space>
+                  <a @click="openEdit(record)">修改</a>
+                  <a-divider type="vertical" />
+                  <a-popconfirm
+                    title="确定要删除此记录吗？"
+                    @confirm="remove(record)"
+                  >
+                    <a class="ele-text-danger">删除</a>
+                  </a-popconfirm>
+                </a-space>
+              </template>
+            </template>
+          </ele-pro-table>
+        </a-card>
+      </div>
+      <!-- 载入模拟器 -->
+      <Simulator :form="form" :type="type" :refresh="refresh" @done="reload" />
+      <!-- 中间间隙 -->
+      <div style="width: 500px"></div>
+      <!-- 编辑弹窗 -->
+      <MpMenuEdit
+        v-model:visible="showEdit"
+        :type="type"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import MpMenuEdit from './components/mpMenuEdit.vue';
+  import Simulator from './components/simulator.vue';
+  import {
+    pageMpMenu,
+    removeMpMenu,
+    removeBatchMpMenu
+  } from '@/api/cms/mp-menu';
+  import type { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
+  import { getPageTitle, openUrl } from '@/utils/common';
+  import { removeSiteInfoCache } from '@/api/cms/website';
+  import success from '@/views/result/success/index.vue';
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<MpMenu[]>([]);
+  // 当前编辑数据
+  const current = ref<MpMenu | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 页面标题
+  const title = getPageTitle();
+  const type = ref<number>(2);
+  const refresh = ref(false);
+  // 模拟器的字段
+  const form = ref<any>({
+    pageName: '管理中心',
+    showUserCard: true,
+    showOrderCard: true,
+    showToolsCard: true
+  });
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    where.type = 4;
+    return pageMpMenu({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'menuId',
+      key: 'menuId',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '菜单图标',
+      dataIndex: 'icon',
+      key: 'icon',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '菜单名称',
+      dataIndex: 'title',
+      key: 'title',
+      align: 'center'
+    },
+    {
+      title: '路由地址',
+      dataIndex: 'path',
+      key: 'path'
+    },
+    // {
+    //   title: '分类ID',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center'
+    // },
+    {
+      title: '所在行',
+      dataIndex: 'rows',
+      key: 'rows',
+      align: 'center'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: MpMenuParam) => {
+    if (where?.type) {
+      type.value = Number(where?.type);
+    } else {
+      type.value = 0;
+    }
+    refresh.value = !refresh.value;
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: MpMenu) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  // 清除缓存
+  const clearSiteInfoCache = () => {
+    removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId')).then(
+      (msg) => {
+        if (msg) {
+          message.success('缓存已更新');
+        }
+      }
+    );
+  };
+
+  /* 删除单个 */
+  const remove = (row: MpMenu) => {
+    const hide = message.loading('请求中..', 0);
+    removeMpMenu(row.menuId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchMpMenu(selection.value.map((d) => d.menuId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: MpMenu) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'MpMenuUser'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/cms/mp-weixin/home/index.vue

@@ -28,8 +28,7 @@
                   href="https://www.iconfont.cn"
                   target="_blank"
                   >阿里巴巴矢量图标库</a
-                >，修改完后需要<a @click="openUrl(`/website/clear-cache`)"
+                >，修改完后需要<a @click="clearSiteInfoCache">清除缓存</a
-                  >清除缓存</a
                 >才会生效</div
               >
             </template>
@@ -97,6 +96,7 @@
   } from '@/api/cms/mp-menu';
   import type { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
   import { getPageTitle, openUrl } from '@/utils/common';
+  import { removeSiteInfoCache } from '@/api/cms/website';
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
@@ -214,6 +214,17 @@
     showMove.value = true;
   };
 
+  // 清除缓存
+  const clearSiteInfoCache = () => {
+    removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId')).then(
+      (msg) => {
+        if (msg) {
+          message.success('缓存已更新');
+        }
+      }
+    );
+  };
+
   /* 删除单个 */
   const remove = (row: MpMenu) => {
     const hide = message.loading('请求中..', 0);

src/views/cms/mp-weixin/order/index.vue

@@ -28,7 +28,7 @@
                   href="https://www.iconfont.cn"
                   target="_blank"
                   >阿里巴巴矢量图标库</a
-                >，修改完后需要<a @click="openUrl(`/website/clear-cache`)"
+                >，修改完后需要<a @click="clearSiteInfoCache"
                   >清除缓存</a
                 >才会生效</div
               >
@@ -97,6 +97,7 @@
   } from '@/api/cms/mp-menu';
   import type { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
   import { getPageTitle, openUrl } from '@/utils/common';
+  import { removeSiteInfoCache } from "@/api/cms/website";
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
@@ -210,6 +211,17 @@
     showMove.value = true;
   };
 
+  // 清除缓存
+  const clearSiteInfoCache = () => {
+    removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId')).then(
+      (msg) => {
+        if (msg) {
+          message.success('缓存已更新');
+        }
+      }
+    );
+  };
+
   /* 删除单个 */
   const remove = (row: MpMenu) => {
     const hide = message.loading('请求中..', 0);

src/views/cms/mp-weixin/shop/components/simulator.vue

@@ -10,26 +10,9 @@
       </div>
     </div>
     <div class="phone-body" style="overflow-y: auto; overflow-x: hidden">
-      <!-- 幻灯片轮播 -->
-      <template v-if="form.showCarousel">
-        <a-carousel arrows autoplay :dots="true">
-          <template v-if="adImageList">
-            <template v-for="(img, index) in adImageList" :key="index">
-              <div class="ad-item">
-                <a-image
-                  :preview="false"
-                  :src="img.url"
-                  width="100%"
-                  height="120px"
-                />
-              </div>
-            </template>
-          </template>
-        </a-carousel>
-      </template>
       <!-- 导航菜单 -->
       <template v-if="form.showMenuCard">
-        <div class="menu-card ele-cell">
+        <div class="menu-card ele-cell" style="margin-top: 10px">
           <div
             v-for="(item, index) in shopIcon"
             :key="index"

src/views/cms/mp-weixin/shop/index.vue

@@ -28,7 +28,7 @@
                   href="https://www.iconfont.cn"
                   target="_blank"
                   >阿里巴巴矢量图标库</a
-                >，修改完后需要<a @click="openUrl(`/website/clear-cache`)"
+                >，修改完后需要<a @click="clearSiteInfoCache"
                   >清除缓存</a
                 >才会生效</div
               >
@@ -97,6 +97,7 @@
   } from '@/api/cms/mp-menu';
   import type { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
   import { getPageTitle, openUrl } from '@/utils/common';
+  import { removeSiteInfoCache } from "@/api/cms/website";
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
@@ -212,6 +213,17 @@
     showMove.value = true;
   };
 
+  // 清除缓存
+  const clearSiteInfoCache = () => {
+    removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId')).then(
+      (msg) => {
+        if (msg) {
+          message.success('缓存已更新');
+        }
+      }
+    );
+  };
+
   /* 删除单个 */
   const remove = (row: MpMenu) => {
     const hide = message.loading('请求中..', 0);

src/views/cms/mp-weixin/user/components/mpMenuEdit.vue

@@ -70,6 +70,15 @@
           <a-select-option :value="4">管理中心</a-select-option>
         </a-select>
       </a-form-item>
+      <a-form-item label="所在行" name="rows">
+        <a-input-number
+          :min="0"
+          :max="3"
+          class="ele-fluid"
+          placeholder="请输入所在行"
+          v-model:value="form.rows"
+        />
+      </a-form-item>
       <a-form-item label="管理人员可见" name="adminShow">
         <a-switch
           checked-children="是"
@@ -145,6 +154,7 @@
     icon: '',
     color: undefined,
     hide: undefined,
+    rows: undefined,
     position: undefined,
     active: undefined,
     userId: 0,

src/views/cms/mp-weixin/user/components/search.vue

@@ -7,16 +7,15 @@
       </template>
       <span>添加</span>
     </a-button>
-    <a-space>
+<!--    <a-space>-->
-      <span class="ele-text-placeholder" style="margin-left: 20px"
+<!--      <span class="ele-text-placeholder" style="margin-left: 20px"-->
-        >菜单类型</span
+<!--        >菜单类型</span-->
-      >
+<!--      >-->
-      <a-radio-group v-model:value="where.type" @change="handleSearch">
+<!--      <a-radio-group v-model:value="where.type" @change="handleSearch">-->
-        <a-radio-button :value="0">会员功能</a-radio-button>
+<!--        <a-radio-button :value="0">会员功能</a-radio-button>-->
-        <a-radio-button :value="4">管理中心</a-radio-button>
+<!--        <a-radio-button :value="1">订单图标</a-radio-button>-->
-        <a-radio-button :value="1">订单图标</a-radio-button>
+<!--      </a-radio-group>-->
-      </a-radio-group>
+<!--    </a-space>-->
-    </a-space>
   </a-space>
 </template>
 

src/views/cms/mp-weixin/user/components/simulator.vue

@@ -296,9 +296,9 @@
       });
     });
 
-    listMpMenu({}).then((list) => {
+    listMpMenu({ type: 0 }).then((list) => {
-      server.value = list.filter((d) => d.type == 0);
+      server.value = list.filter((d) => d.rows == 1);
-      order.value = list.filter((d) => d.type == 1);
+      order.value = list.filter((d) => d.rows == 0);
       scrollList.value = list.filter((d) => d.type == 2);
     });
 

src/views/cms/mp-weixin/user/index.vue

@@ -28,7 +28,7 @@
                   href="https://www.iconfont.cn"
                   target="_blank"
                   >阿里巴巴矢量图标库</a
-                >，修改完后需要<a @click="openUrl(`/website/clear-cache`)"
+                >，修改完后需要<a @click="clearSiteInfoCache"
                   >清除缓存</a
                 >才会生效</div
               >
@@ -97,6 +97,7 @@
   } from '@/api/cms/mp-menu';
   import type { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
   import { getPageTitle, openUrl } from '@/utils/common';
+  import { removeSiteInfoCache } from "@/api/cms/website";
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
@@ -131,6 +132,7 @@
     if (filters) {
       where.status = filters.status;
     }
+    where.type = 0;
     return pageMpMenu({
       ...where,
       ...orders,
@@ -166,10 +168,16 @@
       dataIndex: 'path',
       key: 'path'
     },
+    // {
+    //   title: '分类ID',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center'
+    // },
     {
-      title: '分类ID',
+      title: '所在行',
-      dataIndex: 'type',
+      dataIndex: 'rows',
-      key: 'type',
+      key: 'rows',
       align: 'center'
     },
     {
@@ -211,6 +219,17 @@
     showMove.value = true;
   };
 
+  // 清除缓存
+  const clearSiteInfoCache = () => {
+    removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId')).then(
+      (msg) => {
+        if (msg) {
+          message.success('缓存已更新');
+        }
+      }
+    );
+  };
+
   /* 删除单个 */
   const remove = (row: MpMenu) => {
     const hide = message.loading('请求中..', 0);

src/views/system/payment/components/paymentEdit.vue

@@ -28,7 +28,7 @@
         />
       </a-form-item>
       <!--微信支付-->
-      <template v-if="form.code == 'wxPay'">
+      <template v-if="form.code == 1">
         <a-form-item label="微信商户号类型" name="wechatType">
           <a-radio-group v-model:value="form.wechatType">
             <a-radio :value="0">
@@ -159,6 +159,7 @@
   const form = reactive<Payment>({
     id: 0,
     name: undefined,
+    type: undefined,
     code: '',
     image: '',
     wechatType: 0,
@@ -266,6 +267,7 @@
   const onPayMethod = (value: string, item: any) => {
     form.name = item.label
     form.code = item.value
+    form.type = item.type
   }
 
   const onUpload = (d: ItemType) => {

src/views/system/payment/index.vue

@@ -119,17 +119,16 @@
     {
       title: '支付方式',
       dataIndex: 'name',
-      key: 'name',
+      key: 'name'
-      width: 280
-    },
-    {
-      title: '标识',
-      dataIndex: 'code',
-      key: 'code',
-      width: 280,
-      align: 'center'
     },
     // {
+    //   title: '标识',
+    //   dataIndex: 'code',
+    //   key: 'code',
+    //   width: 280,
+    //   align: 'center'
+    // },
+    // {
     //   title: '商户号类型',
     //   dataIndex: 'wechatType',
     //   key: 'wechatType',
@@ -141,12 +140,13 @@
       title: '是否启用',
       dataIndex: 'status',
       key: 'status',
+      width: 180,
       align: 'center'
     },
     {
       title: '操作',
       key: 'action',
-      width: 280,
+      width: 180,
       fixed: 'right',
       align: 'center',
       hideInSetting: true