优化小程序端配置功能

src/components/Simulator/index.vue

@@ -1,8 +1,82 @@
 <template>
   <div class="phone-layout" v-if="form">
     <div class="phone-header-black ele-fluid">
-      <div class="title ele-fluid"> 商品详情 </div>
+      <div class="title ele-fluid">
+        <div class="title-bar">
+          <a class="back" @click="openUrl(`/mp-weixin/home`)"></a>
+          <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">
+            <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.title">
       <div class="phone-body" style="overflow-y: auto; overflow-x: hidden">
         <a-carousel arrows autoplay :dots="true">
@@ -143,18 +217,38 @@
   } from '@ant-design/icons-vue';
   import { formatNumber } from 'ele-admin-pro/es';
   import { ref } from 'vue';
+  import { MpWeixinParam, WebsiteField } from '@/api/cms/website/field/model';
+  import { listWebsiteField } from '@/api/system/website/field';
+  import UserCardEdit from '@/views/cms/field/components/website-field-edit.vue';
+  import MpMenuEdit from '@/views/cms/mp-weixin/menu/components/mpMenuEdit.vue';
+  import { MpMenu } from '@/api/cms/mp-menu/model';
+  import { listMpMenu } from '@/api/cms/mp-menu';
+  import { openUrl } from '@/utils/common';
 
   withDefaults(
     defineProps<{
       value?: string;
       placeholder?: string;
       form?: any | null;
+      type?: number;
+      list?: any[] | null;
     }>(),
     {
       placeholder: undefined
     }
   );
 
+  const param = ref<MpWeixinParam>({});
+  const showUserCardEdit = ref(false);
+  const showMpMenuEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<WebsiteField | null>(null);
+
+  // 订单图标
+  const order = ref<any[]>();
+  // 服务图标
+  const server = ref<any[]>();
+
   const config = ref({
     selector: '#content', //容器，可使用css选择器
     branding: false,
@@ -169,6 +263,36 @@
     //   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 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);
+  });
 </script>
 
 <style lang="less" scoped>
@@ -194,6 +318,21 @@
         justify-content: center;
         align-items: end;
         padding-bottom: 13px;
+        .title-bar {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          .back {
+            display: block;
+            width: 50px;
+            cursor: pointer;
+          }
+          .share {
+            display: block;
+            width: 50px;
+            cursor: pointer;
+          }
+        }
       }
     }
     .phone-body-bg {
@@ -307,4 +446,69 @@
   :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;
+    }
+  }
+
+  .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);
+    }
+    .btn-center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 </style>