241101

.env.development

@@ -1,11 +1,11 @@
 VITE_APP_NAME=后台管理系统
 VITE_SOCKET_URL=wss://server.gxwebsoft.com
 #VITE_SERVER_URL=https://server.gxwebsoft.com/api
-VITE_THINK_URL=https://gxtyzx-api.websoft.top/api
+#VITE_THINK_URL=https://gxtyzx-api.websoft.top/api
-VITE_API_URL=https://modules.gxwebsoft.com/api
+#VITE_API_URL=https://modules.gxwebsoft.com/api
 
 
-VITE_SERVER_URL=https://common-api.websoft.top/api
+VITE_SERVER_URL=https://server.gxwebsoft.com/api
-#VITE_API_URL=http://127.0.0.1:9001/api
+VITE_API_URL=http://127.0.0.1:9091/api
-#VITE_THINK_URL=http://127.0.0.1:9099/api
+VITE_THINK_URL=http://127.0.0.1:9099/api
 #/booking/bookingItem

package-lock.json

@@ -43,6 +43,7 @@
         "vue-echarts": "^6.2.3",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.5",
+        "vue-tianditu": "^2.7.6",
         "vuedraggable": "^4.1.0",
         "xgplayer": "^2.31.7",
         "xlsx": "^0.18.5"
@@ -9029,6 +9030,49 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-tianditu": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmmirror.com/vue-tianditu/-/vue-tianditu-2.7.6.tgz",
+      "integrity": "sha512-Yvcxg0IAgGB3ZY8zlC5ayjo9f85fa8PFTaifguTNpri76g67GO9toaRWMjBKi39yYHMBADaT3P6bEkJx87X8MQ==",
+      "dependencies": {
+        "mitt": "^3.0.0",
+        "vue-demi": "^0.12.1"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.2",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-tianditu/node_modules/vue-demi": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz",
+      "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "0.40.5",
       "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.40.5.tgz",
@@ -16421,6 +16465,23 @@
         "@vue/devtools-api": "^6.1.4"
       }
     },
+    "vue-tianditu": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmmirror.com/vue-tianditu/-/vue-tianditu-2.7.6.tgz",
+      "integrity": "sha512-Yvcxg0IAgGB3ZY8zlC5ayjo9f85fa8PFTaifguTNpri76g67GO9toaRWMjBKi39yYHMBADaT3P6bEkJx87X8MQ==",
+      "requires": {
+        "mitt": "^3.0.0",
+        "vue-demi": "^0.12.1"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz",
+          "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+          "requires": {}
+        }
+      }
+    },
     "vue-tsc": {
       "version": "0.40.5",
       "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.40.5.tgz",

package.json

@@ -47,6 +47,7 @@
     "vue-echarts": "^6.2.3",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.5",
+    "vue-tianditu": "^2.7.6",
     "vuedraggable": "^4.1.0",
     "xgplayer": "^2.31.7",
     "xlsx": "^0.18.5"

src/api/think/thinkSite/model/index.ts

@@ -16,6 +16,8 @@ export interface ThinkSite {
   businessTime?: string;
   // 场馆地址
   address?: string;
+  lat?: string;
+  lng?: string;
   // 场馆介绍
   info?: string;
   // 场馆电话

src/main.ts

@@ -5,6 +5,8 @@ import router from './router';
 import permission from './utils/permission';
 import i18n from './i18n';
 import './styles/index.less';
+import VueTianditu from "vue-tianditu"
+import "vue-tianditu/lib/style.css";
 
 const app = createApp(App);
 
@@ -12,5 +14,9 @@ app.use(store);
 app.use(router);
 app.use(permission);
 app.use(i18n);
+app.use(VueTianditu, {
+  v: "4.0", //目前只支持4.0版本
+  tk: "bfbc6bd9e85fcda67b62788705aa6427"
+});
 
 app.mount('#app');

src/views/booking/bookingSite/components/bookingSiteEdit.vue

@@ -350,6 +350,7 @@
               status: 'done'
             });
           }
+          console.log(images.value)
           if (props.data.files) {
             const arr = JSON.parse(props.data.files);
             arr.map((item) => {

src/views/think/thinkSite/components/search.vue

@@ -1,7 +1,7 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
-    <a-button type="primary" class="ele-btn-icon" :disabled="true" @click="add">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
       <template #icon>
         <PlusOutlined />
       </template>

src/views/think/thinkSite/components/thinkSiteEdit.vue

@@ -28,7 +28,7 @@
       </a-form-item>
       <a-form-item label="封面图" name="thumb">
         <a-avatar
-          :src="`https://gxtyzx.gxsportscenter.com/uploads/images/${form.thumb}`"
+          :src="form.thumb"
           size="120"
           shape="square"
         />
@@ -70,6 +70,16 @@
           v-model:value="form.address"
         />
       </a-form-item>
+      <a-form-item label="场馆定位" name="address">
+        <p>已选经纬度:{{ form.lng }}. {{ form.lat }}</p>
+        <tdt-map :center="mapState.center" :zoom="mapState.zoom" style="width: 100%; height: 700px" :controls="['Zoom']"
+                 @click.native="clickMap">
+          <tdt-marker :position="[form.lng, form.lat]" :draggable="false" />
+          <tdt-control>
+            <tdt-search @poi-click="poiClick" />
+          </tdt-control>
+        </tdt-map>
+      </a-form-item>
       <a-form-item label="场馆介绍" name="info">
         <!-- 编辑器 -->
         <tinymce-editor
@@ -131,58 +141,60 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
+import { ref, reactive, watch } from "vue";
-  import { Form, message } from 'ant-design-vue';
+import { Form, message } from "ant-design-vue";
-  import { assignObject, uuid } from 'ele-admin-pro';
+import { assignObject, uuid } from "ele-admin-pro";
-  import { addThinkSite, updateThinkSite } from '@/api/think/thinkSite';
+import { addThinkSite, updateThinkSite } from "@/api/think/thinkSite";
-  import { ThinkSite } from '@/api/think/thinkSite/model';
+import { ThinkSite } from "@/api/think/thinkSite/model";
-  import { useThemeStore } from '@/store/modules/theme';
+import { useThemeStore } from "@/store/modules/theme";
-  import { storeToRefs } from 'pinia';
+import { storeToRefs } from "pinia";
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
-  import { FormInstance } from 'ant-design-vue/es/form';
+import { FormInstance } from "ant-design-vue/es/form";
-  import { FileRecord } from '@/api/system/file/model';
+import { FileRecord } from "@/api/system/file/model";
-  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+import TinymceEditor from "@/components/TinymceEditor/index.vue";
-  import { uploadOss } from '@/api/system/file';
+import { uploadOss } from "@/api/system/file";
+import { TdtMap } from "vue-tianditu";
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const { styleResponsive } = storeToRefs(themeStore);
+const disabled = ref(false);
 
-  // 是否是修改
+const props = defineProps<{
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
-  const disabled = ref(false);
-
-  const props = defineProps<{
   // 弹窗是否打开
   visible: boolean;
   // 修改回显的数据
   data?: ThinkSite | null;
-  }>();
+}>();
 
-  const emit = defineEmits<{
+const emit = defineEmits<{
-    (e: 'done'): void;
+  (e: "done"): void;
-    (e: 'update:visible', visible: boolean): void;
+  (e: "update:visible", visible: boolean): void;
-  }>();
+}>();
 
-  // 提交状态
+// 提交状态
-  const loading = ref(false);
+const loading = ref(false);
-  // 是否显示最大化切换按钮
+// 是否显示最大化切换按钮
-  const maxable = ref(true);
+const maxable = ref(true);
-  // 表格选中数据
+// 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
+const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
+const images = ref<ItemType[]>([]);
-  const files = ref<ItemType[]>([]);
+const files = ref<ItemType[]>([]);
-  // 编辑器内容，双向绑定
+// 编辑器内容，双向绑定
-  const content = ref<any>('');
+const content = ref<any>("");
 
-  // 用户信息
+// 用户信息
-  const form = reactive<ThinkSite>({
+const form = reactive<ThinkSite>({
   id: undefined,
   name: undefined,
   thumb: undefined,
   price: undefined,
   businessTime: undefined,
   address: undefined,
+  lat: undefined,
+  lng: undefined,
   info: undefined,
   tel: undefined,
   sortNumber: undefined,
@@ -193,58 +205,79 @@
   createTime: undefined,
   updateTime: undefined,
   weekendOpen: undefined
-  });
+});
 
-  /* 更新visible */
+/* 更新visible */
-  const updateVisible = (value: boolean) => {
+const updateVisible = (value: boolean) => {
-    emit('update:visible', value);
+  emit("update:visible", value);
-  };
+};
 
-  // 表单验证规则
+// 表单验证规则
-  const rules = reactive({
+const rules = reactive({
   thinkSiteName: [
     {
       required: true,
-        type: 'string',
+      type: "string",
-        message: '请填写名称',
+      message: "请填写名称",
-        trigger: 'blur'
+      trigger: "blur"
     }
   ]
-  });
+});
 
-  const chooseImage = (data: FileRecord) => {
+const chooseImage = (data: FileRecord) => {
   images.value.push({
     uid: data.id,
     url: data.path,
-      status: 'done'
+    status: "done"
   });
   form.thumb = data.path;
-  };
+};
 
-  const chooseFiles = (data: FileRecord) => {
+const chooseFiles = (data: FileRecord) => {
   files.value.push({
     uid: data.id,
     url: data.path,
-      status: 'done'
+    status: "done"
   });
-  };
+};
 
-  const onDeleteFiles = (index: number) => {
+const onDeleteFiles = (index: number) => {
   files.value.splice(index, 1);
-  };
+};
 
-  const onDeleteItem = (index: number) => {
+const onDeleteItem = (index: number) => {
   images.value.splice(index, 1);
-    form.thumb = '';
+  form.thumb = "";
-  };
+};
 
-  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+const map = ref();
-  const config = ref({
+const mapState = {
+  center: [108.358150, 22.826820],
+  zoom: 12
+};
+const poiClick = ({ lonlat }) => {
+  const [lng, lat] = lonlat.split(",");
+  form.lng = parseFloat(lng);
+  form.lat = parseFloat(lat);
+  mapState.center = [form.lng, form.lat];
+  message.success("已选择");
+};
+
+const clickMap = (({ type, lnglat }) => {
+  if (type === "click") {
+    form.lng = lnglat.lng;
+    form.lat = lnglat.lat;
+    message.success("已选择");
+  }
+});
+
+const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+const config = ref({
   height: 450,
   images_upload_handler: (blobInfo, success, error) => {
     const file = blobInfo.blob();
     const formData = new FormData();
-      formData.append('file', file, file.name);
+    formData.append("file", file, file.name);
     uploadOss(file)
       .then((res) => {
         success(res.path);
@@ -255,33 +288,33 @@
   },
   // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
   file_picker_callback: (callback: any, _value: any, meta: any) => {
-      const input = document.createElement('input');
+    const input = document.createElement("input");
-      input.setAttribute('type', 'file');
+    input.setAttribute("type", "file");
     // 设定文件可选类型
-      if (meta.filetype === 'image') {
+    if (meta.filetype === "image") {
-        input.setAttribute('accept', 'image/*');
+      input.setAttribute("accept", "image/*");
-      } else if (meta.filetype === 'media') {
+    } else if (meta.filetype === "media") {
-        input.setAttribute('accept', 'video/*,.pdf');
+      input.setAttribute("accept", "video/*,.pdf");
     }
     input.onchange = () => {
       const file = input.files?.[0];
       if (!file) {
         return;
       }
-        if (meta.filetype === 'media') {
+      if (meta.filetype === "media") {
         if (file.size / 1024 / 1024 > 200) {
-            editorRef.value?.alert({ content: '大小不能超过 200MB' });
+          editorRef.value?.alert({ content: "大小不能超过 200MB" });
           return;
         }
-          if (file.type.startsWith('application/pdf')) {
+        if (file.type.startsWith("application/pdf")) {
           uploadOss(file).then((res) => {
             const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
             content.value = content.value + addPath;
           });
           return;
         }
-          if (!file.type.startsWith('video/')) {
+        if (!file.type.startsWith("video/")) {
-            editorRef.value?.alert({ content: '只能选择视频文件' });
+          editorRef.value?.alert({ content: "只能选择视频文件" });
           return;
         }
         uploadOss(file).then((res) => {
@@ -299,12 +332,12 @@
     };
     input.click();
   }
-  });
+});
 
-  const { resetFields } = useForm(form, rules);
+const { resetFields } = useForm(form, rules);
 
-  /* 保存编辑 */
+/* 保存编辑 */
-  const save = () => {
+const save = () => {
   if (!formRef.value) {
     return;
   }
@@ -317,29 +350,30 @@
         info: content.value,
         files: JSON.stringify(files.value)
       };
-        // const saveOrUpdate = isUpdate.value ? updateThinkSite : addThinkSite;
+      const saveOrUpdate = isUpdate.value ? updateThinkSite : addThinkSite;
-        // saveOrUpdate(formData)
+      saveOrUpdate(formData)
-        //   .then((msg) => {
+        .then((msg) => {
-        //     loading.value = false;
+          loading.value = false;
-        //     message.success(msg);
+          message.success(msg);
-        //     updateVisible(false);
+          updateVisible(false);
-        //     emit('done');
+          emit("done");
-        //   })
-        //   .catch((e) => {
-        //     loading.value = false;
-        //     message.error(e.message);
-        //   });
         })
-      .catch(() => {});
+        .catch((e) => {
-  };
+          loading.value = false;
+          message.error(e.message);
+        });
+    })
+    .catch(() => {
+    });
+};
 
-  watch(
+watch(
   () => props.visible,
   (visible) => {
     if (visible) {
       images.value = [];
       files.value = [];
-        content.value = '';
+      content.value = "";
       if (props.data) {
         assignObject(form, props.data);
         if (form.info) {
@@ -349,16 +383,17 @@
           images.value.push({
             uid: uuid(),
             url: props.data.thumb,
-              status: 'done'
+            status: "done"
           });
         }
+        console.log(images.value);
         if (props.data.files) {
           const arr = JSON.parse(props.data.files);
           arr.map((item) => {
             files.value.push({
               uid: uuid(),
               url: item.url,
-                status: 'done'
+              status: "done"
             });
           });
         }
@@ -371,5 +406,5 @@
     }
   },
   { immediate: true }
-  );
+);
 </script>

src/views/think/thinkSite/index.vue

@@ -37,7 +37,7 @@
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
-                <a-button :disabled="true" @click="openEdit(record)"
+                <a-button @click="openEdit(record)"
                   >修改</a-button
                 >
                 <a-divider type="vertical" />