以下是基于UniApp框架开发的低空经济无人机接单飞手平台小程序的关键代码片段，涵盖核心功能模块的实现逻辑：

用户登录与身份验证

// pages/login/login.vue
<template>
  <view class="login-container">
    <input type="text" v-model="phone" placeholder="请输入手机号" />
    <input type="password" v-model="password" placeholder="请输入密码" />
    <button @click="handleLogin">登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const res = await uni.request({
          url: 'https://api.example.com/login',
          method: 'POST',
          data: {
            phone: this.phone,
            password: this.password
          }
        });
        uni.setStorageSync('token', res.data.token);
        uni.reLaunch({ url: '/pages/index/index' });
      } catch (error) {
        uni.showToast({ title: '登录失败', icon: 'none' });
      }
    }
  }
}
</script>

订单列表展示

// pages/order/list.vue
<script>
export default {
  data() {
    return {
      orders: [],
      loading: false
    }
  },
  onLoad() {
    this.loadOrders();
  },
  methods: {
    async loadOrders() {
      this.loading = true;
      const res = await uni.request({
        url: 'https://api.example.com/orders',
        header: { 'Authorization': uni.getStorageSync('token') }
      });
      this.orders = res.data.list;
      this.loading = false;
    },
    handleAccept(orderId) {
      uni.request({
        url: `https://api.example.com/orders/${orderId}/accept`,
        method: 'POST',
        header: { 'Authorization': uni.getStorageSync('token') }
      }).then(() => {
        uni.showToast({ title: '接单成功' });
        this.loadOrders();
      });
    }
  }
}
</script>

地图轨迹展示

// pages/map/track.vue
<template>
  <map 
    id="map" 
    :latitude="latitude" 
    :longitude="longitude"
    :markers="markers"
    :polyline="polyline"
    style="width: 100%; height: 300px;">
  </map>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.90469,
      longitude: 116.40717,
      markers: [{
        id: 1,
        latitude: 39.90469,
        longitude: 116.40717,
        iconPath: '/static/marker.png'
      }],
      polyline: [{
        points: [
          {latitude: 39.90469, longitude: 116.40717},
          {latitude: 39.915, longitude: 116.404}
        ],
        color: '#FF0000',
        width: 2
      }]
    }
  }
}
</script>

支付功能集成

// pages/payment/index.vue
<script>
export default {
  methods: {
    handlePayment(orderId) {
      uni.requestPayment({
        provider: 'wxpay',
        orderInfo: JSON.stringify({
          orderId: orderId,
          amount: 100
        }),
        success: () => {
          uni.showToast({ title: '支付成功' });
        },
        fail: () => {
          uni.showToast({ title: '支付失败', icon: 'none' });
        }
      });
    }
  }
}
</script>

实时通信实现

// utils/socket.js
let socketTask = null;

export function connectSocket() {
  socketTask = uni.connectSocket({
    url: 'wss://api.example.com/ws',
    success: () => {
      console.log('连接成功');
    }
  });

  socketTask.onMessage((res) => {
    uni.$emit('message', JSON.parse(res.data));
  });
}

export function sendMessage(data) {
  socketTask.send({
    data: JSON.stringify(data)
  });
}

注意事项

1. 所有API请求需替换为实际后端接口地址
2. 地图组件需要申请对应平台的地图服务密钥
3. 支付功能需配置合法的支付商户信息
4. 实时通信需确保服务端支持WebSocket协议
5. 上线前需完成微信小程序或对应平台的资质审核