-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ 支持官方端发送的 `com.tencent.map` 地图定位显示，使用高德地图的 js API，在 Apple 设备上点击将唤起系统的地图。API key 是我自己的，使用免费额度，如果你打算自行构建使用，建议更换 env 中的 key。 🎨 卡片组件现在由单独的组件负责，便于扩展 🐛 #61 #62 连接协议判断失效 :wheelchair: 部分程序参数移到了 env 里 :green_heart: [build-electron]
- Loading branch information
Showing
12 changed files
with
260 additions
and
305 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| VUE_APP_GA=G-ZQ88GPJRGH | ||
| VUE_APP_AMAP_KEY=99b8849d7b67f05e9f834bde4108f0f9 | ||
| VUE_APP_AMAP_SECRET=e9ac5aac621defdd6bb111b55fb75d73 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| window.createMap = function (key, msgId, point) { | ||
| if (key == undefined || point == undefined) return | ||
|
|
||
| AMapLoader.load({ | ||
| key: key, | ||
| version: "2.0", | ||
| }).then((AMap) => { | ||
| const map = new AMap.Map('map-' + msgId, { | ||
| viewMode: '2D', | ||
| zoom: 15, | ||
| center: [point.lng, point.lat] | ||
| }); | ||
| const marker = new AMap.Marker({ | ||
| position: [point.lng, point.lat] | ||
| }) | ||
| map.add(marker) | ||
| }).catch((e) => { | ||
| throw e | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| <!-- | ||
| * @FileDescription: 卡片消息消息组件 | ||
| * @Author: Stapxs | ||
| * @Date: 2023/05/23 | ||
| * @Version: 1.0 - 初始版本 | ||
| * @Description: 卡片消息的单独组件，由于卡片消息的类型过于复杂越写越乱，所以单独写一个组件 | ||
| 同时也是为了优化消息刷新机制的性能，可以对不同的卡片类型设置 v-once。 | ||
| --> | ||
|
|
||
| <!-- | ||
| 附加补充： | ||
| 这儿主要针对更复杂的 json 卡片消息 …… xml 类型的卡片消息因为自定义性比 json 低 | ||
| 其实已经被官方放弃了，除了比较旧的一些卡片消息，现在基本上都是 json 类型的卡片消息。 | ||
| --> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div v-if="item.type == 'xml'" v-html="View.buildXML(item.data, item.id, id)" @click="View.cardClick('xml-' + id)"></div> | ||
| <div v-else> | ||
| <div v-if="info.type == 'default'" v-html="buildJSON(info, id)" @click="View.cardClick('json-' + id)"></div> | ||
| <div v-once v-else-if="info.type == 'tencent.map'" class="msg-comp-map" @click="View.cardClick('map-' + id)"> | ||
| <p>{{ info.app.title }}</p> | ||
| <span>{{ info.app.desc }}</span> | ||
| <div | ||
| class="map" | ||
| :data-url="createMap()" | ||
| data-urlOpenType="_self" | ||
| :id="'map-' + id"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| import { MsgBodyFuns as ViewFuns } from '@/function/model/msg-body' | ||
| export default defineComponent({ | ||
| name: 'CardMessage', | ||
| props: [ 'item', 'id' ], | ||
| components: {}, | ||
| data() { | ||
| return { | ||
| View: ViewFuns, | ||
| info: ViewFuns.getJSONType(this.item.data), | ||
| } | ||
| }, | ||
| methods: { | ||
| /** | ||
| * 构建基础 JSON 消息 | ||
| * @param info 卡片信息 | ||
| * @param id 消息 ID | ||
| */ | ||
| buildJSON(data: any, id: string) { | ||
| const info = data.app | ||
| const div = document.createElement('div') | ||
| // 构建 HTML | ||
| const html = '<p>' + info.title + '</p>' + | ||
| '<span>' + info.desc + '</span>' + | ||
| '<img style="' + (info.preview === undefined ? 'display:none' : '') + '" src="' + info.preview + '">' + | ||
| (info.name ? '<div><img src="' + info.icon + '"><span>' + info.name + '</span></div>' : '') | ||
| div.className = 'msg-json' | ||
| div.id = 'json-' + id | ||
| div.dataset.url = info.url | ||
| div.dataset.urlOpenType = info.urlOpenType | ||
| div.innerHTML = html | ||
| // 附加信息 | ||
| if(Object.keys(data.append).length > 0) { | ||
| // 将 append 里的信息附加到 div 上 | ||
| for(const key in data.append) { | ||
| div.dataset[key] = data.append[key] | ||
| } | ||
| } | ||
| // 返回 | ||
| return div.outerHTML | ||
| }, | ||
| /** | ||
| * 创建高德地图模块 | ||
| */ | ||
| createMap() { | ||
| const json = JSON.parse(this.item.data) | ||
| window.createMap( | ||
| process.env.VUE_APP_AMAP_KEY, | ||
| this.id, | ||
| { | ||
| lat: json.meta['Location.Search'].lat, | ||
| lng: json.meta['Location.Search'].lng | ||
| } | ||
| ) | ||
| return this.info.app.url | ||
| } | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .msg-comp-map { | ||
| cursor: pointer; | ||
| } | ||
| .msg-comp-map > p { | ||
| font-weight: bold; | ||
| margin-bottom: 0; | ||
| } | ||
| .msg-comp-map > span { | ||
| font-size: 0.9rem; | ||
| opacity: 0.7; | ||
| } | ||
| .msg-comp-map > div.map { | ||
| height: 200px; | ||
| border-radius: 7px; | ||
| margin-top: 10px; | ||
| width: 400px; | ||
| max-width: calc(100vw - 150px); | ||
| pointer-events: none; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.