lkkk

index.html

@@ -19,6 +19,9 @@
  <page>
   <div id="app"><!--app-html--></div>
   <script type="module" src="/src/main.ts"></script>
-  <!-- <script src="https://webapi.amap.com/maps?v=2.0&key=c1369e6bb23dc1ebe480ac518a91ddac"></script> -->
+  <script
+   type="text/javascript"
+   src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"
+  ></script>
  </page>
 </html>

package.json

@@ -33,7 +33,6 @@
   "vue-i18n": "^9.1.9"
  },
  "devDependencies": {
-  "@amap/amap-jsapi-loader": "^1.0.1",
   "@dcloudio/types": "^3.2.7",
   "@dcloudio/uni-automator": "3.0.0-alpha-3061620221230002",
   "@dcloudio/uni-cli-shared": "3.0.0-alpha-3061620221230002",
@@ -48,6 +47,7 @@
   "unplugin-auto-import": "^0.16.6",
   "unplugin-vue-components": "^0.25.1",
   "vite": "4.0.4",
+  "vite-plugin-mkcert": "^1.16.0",
   "vite-plugin-svg-icons": "^2.0.1"
  }
 }

src/api/courseItemApi.ts

+import request from '@/utils/request'
+
+// 获取培训报名信息
+export const getCourse = (data?: any) => request('/XiBU/LQKJ.K3.PeiXunSystem.WebApi.WebApiService.CourseDetail,LQKJ.K3.PeiXunSystem.WebApi.common.kdsvc', 'POST', data)
+

src/api/trainRegistration.ts

+import request from '@/utils/request'
+
+// 获取培训报名信息
+export const getTrainList = (data?: any) => request('/XiBU/LQKJ.K3.PeiXunSystem.WebApi.WebApiService.CourseSelect,LQKJ.K3.PeiXunSystem.WebApi.common.kdsvc', 'POST', data)

src/manifest.json

@@ -96,6 +96,13 @@
     },
     "vueVersion" : "3",
     "h5" : {
-        "template" : "index.html"
+        "template" : "index.html",
+        "sdkConfigs" : {
+            "maps" : {
+                "qqmap" : {
+                    "key" : "3M5BZ-SFCRJ-AHSF7-XRA5Q-Y6NIJ-DXBH4"
+                }
+            }
+        }
     }
 }

src/pages/class/components/classItem.vue

@@ -136,7 +136,7 @@ const toEvaluate = () => {
     .class-footer {
         width: 100%;
         display: flex;
-        justify-content: end;
+        justify-content: flex-end;
 
         uni-button {
             margin-left: 30rpx;

src/pages/course/components/courseItem.vue

@@ -217,7 +217,6 @@ const openInfo = () => {
 
         .line-content {
             display: flex;
-
         }
     }
 

src/pages/course/index.vue

@@ -24,9 +24,9 @@
         <view v-else class="empty">
             <u-empty text="暂无数据" mode="list" />
         </view>
-    </view>
-
 
+        {{ mapsInfo.addr }} 00000
+    </view>
 </template>
 
 <script setup lang='ts'>
@@ -34,7 +34,7 @@ import headers from '@/components/header/index.vue'
 import courseItem from './components/courseItem.vue';
 import {getCourse} from '@/api/courseItemApi';
 import { inClass, notStarted } from './demo'
-import { useAMap } from '@/utils/AMap'
+import useQqMaps from '@/utils/QqMaps'
 
 const tabsState = reactive({
     list: [{
@@ -47,7 +47,7 @@ const tabsState = reactive({
     ],
     current: 0
 })
-
+    
 const tagList = ref([
     { type: 'primary', name: '全部' },
     { type: 'info', name: '正常' },
@@ -58,11 +58,10 @@ const tagList = ref([
 
 const courseList: any = ref(inClass)
 
-const { initMap, Map } = useAMap()
+const { initQqMaps, mapsInfo } = useQqMaps()
 
 //点击标签
 const tabsChange = (index: number) => {
-    console.log(index);
     if (index) courseList.value = notStarted
     else courseList.value = inClass
 }
@@ -79,7 +78,7 @@ const changeTagType = (index: number) => {
 }
 
 onMounted(() => {
-    initMap()
+    initQqMaps()
 })
 
 </script>

src/utils/AMap.ts

-import AMapLoader from "@amap/amap-jsapi-loader";
-
-const Map = reactive({
-    myMap: {} as any, //把AMap中的方法保存在浏览器
-    lng: "",
-    lat: ""
-});
-
-export const useAMap = () => {
-    const initMap = () => {
-        AMapLoader.load({
-            key: "e2f3c4f1d287a2bf00de849aaf71d8d4", // 申请Web端开发者Key
-            version: "2.0", // 指定要加载的 JSAPI 的版本
-            plugins: [
-                "AMap.Geolocation",
-            ], // 需要使用的的插件列表,此处以定位为例
-        }).then((AMap) => {
-            Map.myMap = AMap;//保存获取到的方法
-            //调用获取定位方法
-            getGeolocation();
-        });
-    };
-
-    //地图定位
-    function getGeolocation() {
-        var Geolocation = new Map.myMap.Geolocation({
-            enableHighAccuracy: true, //是否使用高精度定位，默认:true
-            timeout: 10000, //超过10秒后停止定位，默认：5s
-        });
-        Geolocation.getCurrentPosition(function (status: any, result: any) {
-            if (status == "complete") {
-                onComplete(result);
-            } else {
-                onError(result);
-            }
-        });
-    }
-    //解析定位结果
-    function onComplete(data: any) {
-        console.log(data);
-        Map.lat = data.position.lat;
-        Map.lng = data.position.lng;
-    }
-    //解析定位错误信息
-    function onError(data: any) {
-        console.log(data);
-    }
-
-    function getLocation() {
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(showPosition);
-        } else {
-            alert("您的浏览器不支持获取地理位置信息。");
-        }
-    }
-
-    function showPosition(position: any) {
-        console.log(position);
-        var latitude = position.coords.latitude;
-        var longitude = position.coords.longitude;
-        uni.request({
-            url: 'https://restapi.amap.com/v3/geocode/regeo', //逆地理编码接口地址。
-            data: {
-                key: 'e2f3c4f1d287a2bf00de849aaf71d8d4',
-                //location：经纬度  lng ：经度  lat：纬度
-                location: longitude + ',' + latitude,
-                radius: 1000,
-                extensions: 'all',
-                batch: false,
-                roadlevel: 0
-            },
-            header: {
-                //自定义请求头信息
-            },
-            success: (res: any) => {
-                //详细地址信息
-                console.log(res.data.regeocode);
-            }
-        })
-
-        // alert("您当前的位置经纬度为：\n纬度：" + latitude + "\n经度：" + longitude);
-    }
-
-    return { initMap, Map }
-}

src/utils/QqMaps.ts

+import { jsonp } from "./util";
+
+const mapsInfo = reactive({
+    lat: '',
+    lng: '',
+    addr: ''
+})
+
+const windows: any = window
+
+const useQqMaps = () => {
+
+    const initQqMaps = () => {
+        var geolocation = new windows.qq.maps.Geolocation(
+            "3M5BZ-SFCRJ-AHSF7-XRA5Q-Y6NIJ-DXBH4",
+            "XBRLPX"
+        )
+        geolocation.getLocation(showPosition, showErr)
+    }
+
+    function showPosition(position: any) {
+        let url = 'https://apis.map.qq.com/ws/geocoder/v1/'
+        jsonp(url, {
+            key: '3M5BZ-SFCRJ-AHSF7-XRA5Q-Y6NIJ-DXBH4',
+            output: 'jsonp',
+            // 需要传入的参数
+            location: position.lat + ',' + position.lng,
+            get_poi: 1
+        }).then((res: any) => {
+            console.log(res.result, 'res.result');
+            mapsInfo.addr = res.result.address
+        })
+    }
+    function showErr() { }
+
+    return { initQqMaps, mapsInfo }
+}
+
+export default useQqMaps
\ No newline at end of file

src/utils/util.ts

@@ -65,4 +65,40 @@ export function debounce<T extends (...args: any[]) => any>(
       fn.call(this, ...args);
     }, delay);
   } as DebounceFunc<T>;
+}
+
+export const jsonp = function (url: any, data: any) {
+  return new Promise((resolve, reject) => {
+    // 1.初始化url
+    let dataString = url.indexOf('?') === -1 ? '?' : '&'
+    let callbackName: any = `jsonpCB_${Date.now()}`;
+    url += `${dataString}callback=${callbackName}`
+    if (data) {
+
+      // 2.有请求参数，依次添加到url
+      for (let k in data) {
+        url += `&${k}=${data[k]}`
+      }
+    }
+
+    let scriptNode = document.createElement('script');
+    scriptNode.src = url;
+    const windows: any = window
+    // 3. callback
+    windows[callbackName] = (result: any) => {
+      result ? resolve(result) : reject('没有返回数据');
+      delete window[callbackName];
+      document.body.removeChild(scriptNode);
+    }
+
+    // 4. 异常情况
+    scriptNode.addEventListener('error', () => {
+      reject('接口返回数据失败');
+      delete window[callbackName];
+      document.body.removeChild(scriptNode);
+    }, false)
+
+    // 5. 开始请求
+    document.body.appendChild(scriptNode)
+  })
 }
\ No newline at end of file

vite.config.ts

@@ -5,10 +5,13 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 import uni from '@dcloudio/vite-plugin-uni';
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
+import mkcert from "vite-plugin-mkcert";
+
 
 export default defineConfig({
     plugins: [
         uni(),
+        mkcert(),
         createSvgIconsPlugin({
             iconDirs: [resolve(process.cwd(), 'src/static/svg')],
             symbolId: 'icon-[dir]-[name]',
@@ -62,7 +65,7 @@ export default defineConfig({
         port: 7896,
         open: true,
         strictPort: false, // 端口被占用直接退出
-        https: false, // 默认用http方式
+        https: true, // 默认用http方式
         proxy: {
             '/XiBU': {
                 target: 'http://192.168.1.12',