feat(scene): done casader

src/views/scenes/liveDrawer.vue

@@ -9,17 +9,17 @@
   >
     <div class="entry-x">
       <BasicForm @register="registerForm">
-        <!-- <template #location="{ field, model }">
-          <div>
-            <Card> </Card>
-          </div>
-        </template> -->
+        <template #map>
+          <!-- <Card style="width: 300px; height: 300px"> -->
+          <div ref="wrapRef" style="width: 300px; height: 300px"></div>
+          <!-- </Card> -->
+        </template>
       </BasicForm>
     </div>
   </BasicDrawer>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
+  import { defineComponent, ref, computed, unref, nextTick, onMounted } from 'vue';
   import { BasicForm, useForm, FormSchema } from '/@/components/Form/index';
   // import { Card } from 'ant-design-vue';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
@@ -29,6 +29,13 @@
 
   import { brandTypeListApi, uploadLiveApi, getAllSceneApi } from '/@/api/scene/live';
   import { data as CascaderData } from '/@/utils/cascaderData';
+
+  import { useScript } from '/@/hooks/web/useScript';
+
+  const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=d7bb98e7185300250dd5f918c12f484b';
+
+  //webapi.amap.com/maps?v=1.4.10&key=e661b00bdf2c44cccf71ef6070ef41b8
+
   // Card
   export default defineComponent({
     name: 'MenuDrawer',
@@ -36,6 +43,9 @@
     emits: ['success', 'register'],
     setup() {
       const isUpdate = ref(true);
+      const wrapRef = ref<HTMLDivElement | null>(null);
+      const { toPromise } = useScript({ src: A_MAP_URL });
+
       const { t } = useI18n();
       // const { createMessage } = useMessage();
       const schemas: FormSchema[] = [
@@ -113,8 +123,16 @@
               return !(record.levelType < 3);
             },
           },
-
-          // slot: 'location',
+          colProps: {
+            span: 20,
+          },
+        },
+        {
+          field: 'map',
+          label: '地图位置',
+          component: 'Input',
+          labelWidth: 100,
+          slot: 'map',
           colProps: {
             span: 20,
           },
@@ -140,7 +158,7 @@
             ...data.record,
           });
         }
-
+        initMap();
         // updateSchema({
         //   field: 'parentId',
         //   componentProps: {
@@ -149,11 +167,29 @@
         // });
       });
 
+      async function initMap() {
+        await toPromise();
+        await nextTick();
+        const wrapEl = unref(wrapRef);
+        console.log('wrapEl', wrapEl);
+        if (!wrapEl) return;
+        const AMap = (window as any).AMap;
+        console.log('AMap', AMap);
+        new AMap.Map(wrapEl, {
+          zoom: 11,
+          center: [116.397428, 39.90923],
+          viewMode: '3D',
+        });
+      }
+      onMounted(() => {
+        initMap();
+      });
+
       const getTitle = computed(() => (!unref(isUpdate) ? '新增直播间' : '编辑直播间'));
 
       async function handleSubmit() {}
 
-      return { registerDrawer, registerForm, getTitle, handleSubmit };
+      return { registerDrawer, registerForm, getTitle, handleSubmit, wrapRef };
     },
   });
 </script>