vite.config.js:
// vite.config.js import { defineConfig } from 'vite' import uni from '@dcloudio/vite-plugin-uni' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ uni(), ], server: { // 1. 配置代理规则 proxy: { // 2. '/api' 是你自定义的请求前缀 '/api': { // 3. target 是你的目标后端接口的真实地址 // target: 'http://localhost:9002', target: 'https://www.****.com/bus_admin_java', // 4. 改变请求源头，解决大部分跨域问题，必须为 true changeOrigin: true, // 5. (可选) 重写路径，移除 '/api' 前缀 rewrite: (path) => path.replace(/^\/api/, '') } } } })main.js:
import App from './App.vue' // #ifndef VUE3 import Vue from 'vue' import './uni.promisify.adaptor' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() // #endif // #ifdef VUE3 import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) return { app } } // #endifpages/index.vue:
<template> <view class="container"> <view class="title">实时位置追踪器</view> <switch :checked="tracking" @change="toggleTracking" color="#00ffff" >实时位置追踪</switch> <view v-if="latitude && longitude" class="location-info"> 当前经度: {{ longitude }} <br/> 当前纬度: {{ latitude }} </view> <!-- 雷达扫描效果 --> <view class="radar" v-if="tracking"> <view class="circle circle1"></view> <view class="circle circle2"></view> <view class="circle circle3"></view> <view class="pulse"></view> </view> </view> </template> <script> export default { data() { return { latitude: null, longitude: null, tracking: false, timer: null } }, methods: { toggleTracking(e) { this.tracking = e.detail.value if (this.tracking) { this.startTracking() } else { clearInterval(this.timer) this.timer = null } }, startTracking() { this.getLocation() this.timer = setInterval(() => { this.getLocation() }, 3000) }, getLocation() { uni.getLocation({ type: 'wgs84', // 使用 GCJ02 坐标 success: (res) => { this.latitude = res.latitude this.longitude = res.longitude console.log('当前位置', res) this.sendPosition(res.longitude, res.latitude) }, fail: (err) => { console.error('获取位置失败', err) } }) }, sendPosition(longitude, latitude) { uni.request({ url: '/api/bus/position/save', method: 'POST', data: { longitude: longitude, latitude: latitude }, success: (res) => { console.log(res) console.log('上传成功', res.data) }, fail: (err) => { console.error('上传失败', err) } }) } }, beforeDestroy() { if (this.timer) clearInterval(this.timer) } } </script> <style> .container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 40px 20px; background: radial-gradient(circle at center, #0a0a0a, #001010); min-height: 100vh; color: #00ffff; font-family: "Microsoft YaHei", sans-serif; } .title { font-size: 22px; font-weight: bold; margin-bottom: 20px; } .location-info { margin-top: 20px; font-size: 16px; text-align: center; } /* 雷达扫描效果 */ .radar { position: relative; width: 200px; height: 200px; margin-top: 40px; } .circle { position: absolute; border: 2px solid rgba(0, 255, 255, 0.3); border-radius: 50%; animation: pulseScale 3s linear infinite; } .circle1 { width: 60px; height: 60px; top: 70px; left: 70px; animation-delay: 0s; } .circle2 { width: 120px; height: 120px; top: 40px; left: 40px; animation-delay: 1s; } .circle3 { width: 180px; height: 180px; top: 10px; left: 10px; animation-delay: 2s; } .pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 255, 255, 0.1); border-radius: 50%; animation: rotateRadar 4s linear infinite; } @keyframes pulseScale { 0% { transform: scale(0.2); opacity: 0.5; } 50% { transform: scale(1); opacity: 0.2; } 100% { transform: scale(0.2); opacity: 0.5; } } @keyframes rotateRadar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } switch { margin-top: 20px; } </style>
