完成换场地功能

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

@@ -13,20 +13,28 @@
       <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>
+          <div
+            class="ad-bar"
+            :style="{
+              backgroundImage: 'url(' + param.mp_user_top + ')'
+            }"
+            @click="onCarousel"
+          >
+            <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>
-            </template>
-          </a-carousel>
+            </a-carousel>
+          </div>
         </template>
         <!-- 导航菜单 -->
         <template v-if="form.showMenuCard">
@@ -38,8 +46,8 @@
               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>
+              <a-image :src="item.icon" :width="40" :preview="false" />
+              <span style="white-space: nowrap">{{ item.title }}</span>
             </div>
           </div>
           <!--  双排  -->
@@ -149,6 +157,7 @@
         </a>
       </div>
     </a-card>
+    <AdEdit v-model:visible="showAdEdit" :data="ad" @done="reload" />
   </div>
 </template>
 
@@ -173,6 +182,8 @@
   const { query } = unref(currentRoute);
 
   import MpMenuEdit from '@/views/cms/mp-weixin/menu/components/mpMenuEdit.vue';
+  import { Ad } from '@/api/cms/ad/model';
+  import AdEdit from '@/views/cms/ad/components/ad-edit.vue';
 
   const prpos = withDefaults(
     defineProps<{
@@ -196,6 +207,8 @@
   const param = ref<MpWeixinParam>({});
   const showUserCardEdit = ref(false);
   const showMpMenuEdit = ref(false);
+  const showAdEdit = ref(false);
+  const ad = ref<Ad>();
   // 当前编辑数据
   const current = ref<WebsiteField | null>(null);
 
@@ -245,6 +258,10 @@
 
   const onShare = () => {};
 
+  const onCarousel = (row?: Ad) => {
+    showAdEdit.value = true;
+  };
+
   const reload = () => {
     listWebsiteField({}).then((list) => {
       list.map((d) => {
@@ -329,6 +346,11 @@
         }
       }
     }
+    .ad-bar {
+      background-color: var(--grey-10);
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
     .phone-body-bg {
       padding: 0 16px;
       height: 680px;
@@ -534,6 +556,7 @@
     width: 330px;
     height: 80px;
     margin: 0 auto;
+    padding: 8px;
     background: #ffffff;
     border-radius: 5px;
     border-color: slategrey;