feat(Activities): 动态获取地图URL并添加用户openid参数
重构活动页面WebView组件,新增动态获取地图URL功能 添加用户openid参数到URL中 增加错误处理和备用URL机制
Showing
2 changed files
with
76 additions
and
18 deletions
src/api/map.js
0 → 100644
| 1 | +/* | ||
| 2 | + * @Date: 2025-09-04 17:23:17 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2025-09-04 17:23:43 | ||
| 5 | + * @FilePath: /lls_program/src/api/map.js | ||
| 6 | + * @Description: 文件描述 | ||
| 7 | + */ | ||
| 8 | +import { fn, fetch } from './fn'; | ||
| 9 | + | ||
| 10 | +const Api = { | ||
| 11 | + GET_MAP_URL: '/srv/?a=map&t=get_map_url', | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +/** | ||
| 15 | + * @description: 获取地图URL | ||
| 16 | + * @param {Object} params - 请求参数 | ||
| 17 | + * @returns {number} response.code - 响应状态码 | ||
| 18 | + * @returns {string} response.msg - 响应消息 | ||
| 19 | + * @returns {Object} response.data - 响应数据 | ||
| 20 | + * @returns {string} response.data.url - 地图URL | ||
| 21 | + */ | ||
| 22 | +export const getMapUrlAPI = (params) => fn(fetch.get(Api.GET_MAP_URL, params)); |
| ... | @@ -32,6 +32,9 @@ | ... | @@ -32,6 +32,9 @@ |
| 32 | import { ref, onMounted } from 'vue' | 32 | import { ref, onMounted } from 'vue' |
| 33 | import Taro from '@tarojs/taro' | 33 | import Taro from '@tarojs/taro' |
| 34 | import BottomNav from '../../components/BottomNav.vue' | 34 | import BottomNav from '../../components/BottomNav.vue' |
| 35 | +// 获取接口信息 | ||
| 36 | +import { getUserProfileAPI } from '@/api/user' | ||
| 37 | +import { getMapUrlAPI } from '@/api/map' | ||
| 35 | 38 | ||
| 36 | /** | 39 | /** |
| 37 | * 活动页面WebView组件 | 40 | * 活动页面WebView组件 |
| ... | @@ -42,7 +45,7 @@ import BottomNav from '../../components/BottomNav.vue' | ... | @@ -42,7 +45,7 @@ import BottomNav from '../../components/BottomNav.vue' |
| 42 | const webUrl = ref('') // 动态设置URL | 45 | const webUrl = ref('') // 动态设置URL |
| 43 | const loading = ref(true) | 46 | const loading = ref(true) |
| 44 | const error = ref(false) | 47 | const error = ref(false) |
| 45 | -const baseUrl = 'https://oa.onwall.cn/f/map/#/checkin/?id=2400107' // 基础URL | 48 | +const baseUrl = ref('') // 动态获取的基础URL |
| 46 | 49 | ||
| 47 | /** | 50 | /** |
| 48 | * 处理WebView加载完成 | 51 | * 处理WebView加载完成 |
| ... | @@ -92,28 +95,61 @@ const handleRetry = () => { | ... | @@ -92,28 +95,61 @@ const handleRetry = () => { |
| 92 | /** | 95 | /** |
| 93 | * 构建包含位置参数的URL | 96 | * 构建包含位置参数的URL |
| 94 | */ | 97 | */ |
| 95 | -const buildUrlWithLocation = (lng, lat) => { | 98 | +const buildUrlWithLocation = (lng, lat, openid) => { |
| 96 | - if (lng && lat) { | 99 | + if (lng && lat && baseUrl.value) { |
| 97 | - const separator = baseUrl.includes('?') ? '&' : '?' | 100 | + const separator = baseUrl.value.includes('?') ? '&' : '?' |
| 98 | - return `${baseUrl}${separator}current_lng=${lng}¤t_lat=${lat}` | 101 | + return `${baseUrl.value}${separator}current_lng=${lng}¤t_lat=${lat}&openid=${openid}` |
| 102 | + } | ||
| 103 | + return baseUrl.value || '' | ||
| 104 | +} | ||
| 105 | + | ||
| 106 | +/** | ||
| 107 | + * 初始化页面数据 | ||
| 108 | + */ | ||
| 109 | +const initPageData = async () => { | ||
| 110 | + try { | ||
| 111 | + // 获取地图URL | ||
| 112 | + const mapUrlResponse = await getMapUrlAPI() | ||
| 113 | + if (mapUrlResponse.code && mapUrlResponse.data?.url) { | ||
| 114 | + baseUrl.value = mapUrlResponse.data.url | ||
| 115 | + console.log('获取到的地图URL:', baseUrl.value) | ||
| 116 | + } else { | ||
| 117 | + console.error('获取地图URL失败:', mapUrlResponse.msg) | ||
| 118 | + // 使用默认URL作为备用 | ||
| 119 | + baseUrl.value = 'https://oa.onwall.cn/f/map/#/checkin/?id=2400107' | ||
| 120 | + } | ||
| 121 | + | ||
| 122 | + // 获取用户信息 | ||
| 123 | + const { code, data } = await getUserProfileAPI() | ||
| 124 | + if (code) { | ||
| 125 | + // 获取路由参数中的经纬度信息 | ||
| 126 | + const instance = Taro.getCurrentInstance() | ||
| 127 | + const { current_lng, current_lat } = instance.router?.params || {} | ||
| 128 | + | ||
| 129 | + console.log('接收到的位置参数:', { current_lng, current_lat }) | ||
| 130 | + // 处理用户信息 | ||
| 131 | + const openid = data?.user.openid || '' | ||
| 132 | + // 构建完整的URL | ||
| 133 | + webUrl.value = buildUrlWithLocation(current_lng, current_lat, openid) | ||
| 134 | + | ||
| 135 | + console.log('最终WebView URL:', webUrl.value) | ||
| 136 | + } | ||
| 137 | + } catch (error) { | ||
| 138 | + console.error('初始化页面数据失败:', error) | ||
| 139 | + // 使用默认URL作为备用 | ||
| 140 | + baseUrl.value = 'https://oa.onwall.cn/f/map/#/checkin/?id=2400107' | ||
| 141 | + | ||
| 142 | + Taro.showToast({ | ||
| 143 | + title: '获取地图信息失败', | ||
| 144 | + icon: 'none' | ||
| 145 | + }) | ||
| 99 | } | 146 | } |
| 100 | - return baseUrl | ||
| 101 | } | 147 | } |
| 102 | 148 | ||
| 103 | // 页面挂载时初始化 | 149 | // 页面挂载时初始化 |
| 104 | -onMounted(() => { | 150 | +onMounted(async () => { |
| 105 | console.log('活动页面WebView初始化') | 151 | console.log('活动页面WebView初始化') |
| 106 | - | 152 | + await initPageData() |
| 107 | - // 获取路由参数中的经纬度信息 | ||
| 108 | - const instance = Taro.getCurrentInstance() | ||
| 109 | - const { current_lng, current_lat } = instance.router?.params || {} | ||
| 110 | - | ||
| 111 | - console.log('接收到的位置参数:', { current_lng, current_lat }) | ||
| 112 | - | ||
| 113 | - // 构建完整的URL | ||
| 114 | - webUrl.value = buildUrlWithLocation(current_lng, current_lat) | ||
| 115 | - | ||
| 116 | - console.log('最终WebView URL:', webUrl.value) | ||
| 117 | }) | 153 | }) |
| 118 | </script> | 154 | </script> |
| 119 | 155 | ... | ... |
-
Please register or login to post a comment