kxmall-ui/kxmall-rider-ui/pages/task/task.vue

<template>
  <view class="app">
    <view class="hdr">
      <view class="header">
        <image :src="userInfo.workState ? workStatus[userInfo.workState].img : workStatus[0].img" class="header_bg"/>
        <view class="header_nav">
<!--          <view @click="exit()">-->
<!--            <image class="header_left_img" src="@/static/task/task_left.png"></image>-->
<!--            <text class="leftqh">退出</text>-->
<!--          </view>-->
          <view style="text-align: center;font-size: 36rpx;color: #FFFFFF;">我的任务</view>
          <view v-if="userInfo.state" style="position: relative;top: 180rpx" @click="changeStatus()">
            <image class="header_right_img" src="@/static/task/qiehuan.png"></image>
            <text class="qh">切换</text>
          </view>
          <view v-else></view>
        </view>
        <view class="status">
          <text>{{ userInfo.workState ? workStatus[userInfo.workState].lable : workStatus[0].lable }}</text>
        </view>
      </view>
      <view v-if="userInfo.state" class="nav_list">
        <view v-for="(item, index) in menuList" :key="index"
              :class="['nav_list_item', {'selector': index === menuIndex}]" @click="toggleMenu(index)">
          <text>{{ item.label }}</text>
          <text v-show="item.num" style="color: red;">({{ item.num }})</text>
        </view>
      </view>
    </view>
    
    <view class="app-main">
      <view v-for="(item, index) in list" :key="index" class="form">
        <view class="form_item">
          <view class="form_item_l item2">{{ menuList[menuIndex].label }}</view>
        </view>
        <view v-if="item.predictTime" class="form_item">
          <view class="form_item_l">送达时间</view>
          <view class="form_item_r">{{ item.predictTime }}</view>
        </view>
        <view class="form_item">
          <view class="form_item_l">订单编号</view>
          <view class="form_item_r">{{ item.orderNo }}</view>
        </view>
        <view class="form_item">
          <view class="form_item_l">收货地址</view>
          <view class="form_item_r fr2">
            <view class="v1">
              <text class="shdz">{{ item.province }}-{{ item.city }}-{{ item.county }}-{{ item.address }}</text>
            </view>
            <view class="v2">
              <image class="addr" src="@/static/task/xxxard.png" @click="openMap(item)"/>
            </view>
          </view>
        </view>
        <view class="form_item">
          <view class="form_item_l">联系电话</view>
          <view class="form_item_r" @click="call(item.phone)">
            <text style="padding-right: 24rpx;">{{ item.phone }}</text>
            <image class="phone" src="@/static/task/call.png"></image>
          </view>
        </view>
        
        <view style="padding-bottom: 46rpx;padding-top: 36rpx;text-align: right;">
          <button class="btn btn2" @click="getDetails(item.id)">订单详情</button>
          <block v-if="menuIndex === 0">
            <button class="btn btn3" @click="accept(item)">接单</button>
          </block>
          <block v-if="menuIndex === 1">
            <!--            <button class="btn btn2 btn4" @click="order_error(item)">订单异常</button>-->
            <button class="btn btn3" @click="inRoad(item)">出发</button>
          </block>
          <block v-if="menuIndex === 2">
            <!--            <button class="btn btn2 btn4" @click="order_error(item)">订单异常</button>-->
            <button class="btn btn3" @click="start(item)">开始服务</button>
          </block>
          <block v-if="menuIndex === 3">
            <button class="btn btn3" @click="complete(item)">完成服务</button>
          </block>
        </view>
      </view>
      <!-- <view v-if="list.length==0" style="text-align: center;padding-top: 60rpx;color: #999999;font-size: 30rpx;">
        暂无任何信息
      </view> -->
      <view v-if="userInfo.state" class="loadMore">
        <uni-load-more :status="finish ? 'noMore' : 'more'"/>
      </view>
      <view v-else class="audit-box">用户异常，请联系管理员</view>
      
      <!-- <view class="botm">
        <view class="botm_inner">
          <image class="rw_img" src="../../static/task/fuwuxing.png"></image>
          <text class="botm_txt">
            我的任务
          </text>
        </view>
      </view> -->
      <!-- 遮罩层-->
      
      <view v-if="errOrder.show == true" class="mask">
        <view class="mask-modal">
          <view class="mask-modal-tit">服务异常</view>
          <textarea v-model="errOrder.msg" class="mask_area" placeholder="请输入异常原因"
                    placeholder-class="pl"></textarea>
          <view class="mask_bottom">
            <view>
              <button class="mask_btn" style="float: left;" @click="checkErr(false)">取消</button>
            </view>
            <view>
              <button class="mask_btn mask_btn2" style="float: right;" @click="checkErr(true)">确定</button>
            </view>
          </view>
        </view>
      </view>
    
    </view>
  </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
// import websocketMixin from '@/mixins/websocketMixin.js';
import {
  mapState,
  mapMutations
} from 'vuex';

export default {
  components: {
    uniLoadMore
  },
  // mixins: [websocketMixin],
  computed: {
    ...mapState(['token', 'userInfo'])
  },
  data() {
    return {
      reportInterval: null,  // 用来存储定时任务的 ID
      workStatus: [{
        lable: '休息中',
        value: 0,
        img: require('@/static/task/xiuxi.png')
      },
        {
          lable: '开工中',
          value: 1,
          img: require('@/static/task/kaigong.png')
        }
      ],
      
      menuIndex: 0,
      menuList: [{
        label: '待接单',
        status: 0,
        num: 0
      },
        {
          label: '已接单',
          status: 6,
          num: 0
        },
        {
          label: '正在路上',
          status: 1,
          num: 0
        },
        {
          label: '服务中',
          status: 2,
          num: 0
        },
        {
          label: '完成',
          status: 4,
          num: 0
        },
      ],
      
      list: [], // 任务列表
      pageNo: 1, // 页码
      pageSize: 10, // 页数
      loadData: false, // 列表加载中
      finish: false, // 列表全部加载完成
      
      errOrder: {
        show: false,
        id: null,
        address: '',
        msg: ''
      },
      
      reportLimit: 0,
    }
  },
  onLoad(e) {
    let that = this;
    if (that.userInfo.state) {
      that.resetData();
      // 初始化WebSocket连接
      // that.initWebSocket();
    }
    // 如果已有定时任务，先清除
    if (this.reportInterval) {
      clearInterval(this.reportInterval);
    }
    // 每隔30秒上报一次
    this.reportInterval = setInterval(() => {
      this.reportLocation();  // 每隔 15 秒上报一次位置
    }, 15000);
  },
  beforeDestroy() {
    // 在组件销毁时清除定时任务，避免内存泄漏
    this.stopReporting();
  },
  destroyed() {
    // 销毁时清除定时任务（为了兼容 Vue 2 的生命周期钩子）
    this.stopReporting();
  },
  //上拉加载
  onReachBottom() {
    let that = this;
    if (that.userInfo.state) {
      uni.showNavigationBarLoading()
      this.getTaskList()
    }
  },
  
  //下拉刷新
  onPullDownRefresh() {
    //uni.startPullDownRefresh()
    if (this.userInfo.state) {
      // 审核通过
      this.resetData();
    } else {
      // 审核中
      this.getUserInfo().then(res => {
        if (res) {
          this.resetData();
        } else {
          uni.showToast({
            title: '后台审核中'
          })
        }
      })
    }
    
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  methods: {
    ...mapMutations(['saveUserInfo', 'logout']),
    // 清除定时任务
    stopReporting() {
      if (this.reportInterval) {
        clearInterval(this.reportInterval);  // 清除定时任务
        this.reportInterval = null;  // 重置定时任务 ID
      }
    },
    /* 获取后台用户信息（进入即判断是否过期） */
    getUserInfo() {
      let that = this;
      return new Promise((resolve, reject) => {
        that.request("get", "rider/wxLogin/getRiderInfo", that.token, null).then(res => {
          console.log('getUserInfo', res)
          if (res.code === 200) {
            that.saveUserInfo(newUserData); // 缓存用户基础数据
            resolve(true)
          } else {
            resolve(false)
          }
        })
      })
    },
    reportLocation() {
      let that = this;
      return new Promise((resolve, reject) => {
        // 获取经纬度
        uni.getLocation({
          type: 'wgs84', // 使用GPS坐标系
          success: function (res) {
            const latitude = res.latitude;
            const longitude = res.longitude;
            console.log('纬度：' + latitude);
            console.log('经度：' + longitude);
            
            let content = {
              latitude: latitude,
              longitude: longitude
            };
            
            // 上报经纬度
            that.request("post", "rider/task/reportLocation", that.token, content, error => {
              if (that.reportLimit > 4) {
                uni.showToast({
                  title: '位置上报失败，当前网络可能不稳定'
                })
                that.reportLimit = 0;
                reject(error)
              }
            })
          },
          fail: function (err) {
            resolve(false)
            console.error('获取位置失败：', err);
          }
        });
      })
    },
    // 退出
    exit() {
      let that = this;
      uni.showModal({
        title: '系统提示',
        content: '是否确认退出？',
        showCancel: true,
        confirmText: '取消',
        cancelText: '确认',
        success: function (res) {
          if (res.cancel) {
            that.logout();
            uni.redirectTo({
              url: '/pages/login/login'
            })
          }
        }
      })
    },
    
    // 切换工作状态
    changeStatus() {
      let that = this
      let workState = that.userInfo.workState;
      let params = {
        riderId: that.userInfo.id
      }
      that.request("get", "rider/app/" + (workState ? 'toRest' : 'toWorking'), that.token, params).then(res => {
        console.log('changeStatus', res)
        if (res.code === 200) {
          that.userInfo.workState = workState ? 0 : 1;
          that.saveUserInfo(that.userInfo);
          that.resetData();
        }
      })
    },
    
    // 切换菜单
    toggleMenu(index) {
      this.finish = false
      if (!this.userInfo.state) {
        uni.showToast({
          title: '审核中,可下拉获取最新审核状态'
        })
        return;
      }
      if (!this.loadData) {
        this.menuIndex = index;
        this.pageNo = 1;
        this.list = [];
        this.getTaskList();
      } else {
        uni.showToast({
          title: '数据加载中，请稍后'
        })
      }
    },
    
    // 刷新页面数据
    resetData() {
      if (!this.loadData) {
        this.pageNo = 1;
        this.list = [];
        this.finish = false
        this.getWorkStatus();
        this.getTaskTotal();
        this.getTaskList();
      } else {
        uni.showToast({
          title: '数据加载中，请稍后'
        })
      }
    },
    
    //获取工作状态
    getWorkStatus() {
      let that = this;
      let params = {
        riderId: that.userInfo.id
      };
      that.request("get", "rider/app/getWorkingState", that.token, params).then(res => {
        console.log('getWorkStatus', res)
        that.status = res.data.workState == 1 ? true : false;
      })
    },
    // 获取订单坐标
    getOrderPoi(address) {
      console.log('address', address)
      const result = {
        lat: 0.00,
        lng: 0.00
      }
      return result;
    },
    
    // 拨打电话
    call(phone) {
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      });
    },
    
    // 开启导航
    async openMap(data) {
      debugger
      console.log('openMap', data)
      let that = this;
      // data = {
      // 	province: '福建省',
      // 	city: '福州市',
      // 	county: '晋安区',
      // 	address: '长河路88号'
      // };
      let address = `${data.province}${data.city}${data.county}${data.address}`;
      if (data.latitude && data.longitude) {
        wx.openLocation({
          latitude: Number(data.latitude), // 纬度，范围为-90~90，负数表示南纬
          longitude: Number(data.longitude), // 经度，范围为-180~180，负数表示西经
          scale: 8, // 缩放比例
          name: data.address,
          address,
          success(success) {
            console.log('success', success)
          },
          fail(fail) {
            console.log('fail', fail)
          }
        })
      } else {
        uni.showToast({
          title: '经纬度获取失败，无法进行导航',
          icon: 'none',
          mask: true,
          duration: 2000
        });
      }
    },
    
    // 订单详情
    getDetails(id) {
      console.log("传过去的id:" + id)
      uni.navigateTo({
        url: `../order/order?id=${id}`
      })
    },
    
    // 完成配送
    async complete(data) {
      let that = this;
      let id = data.id;
      let address = `${data.province}${data.city}${data.county}${data.address}`;
      let point = await that.getOrderPoi(address);
      if (point) {
        let params = {
          riderOrderId: id,
          lng: point.lng,
          lat: point.lat
        }
        that.request("get", "rider/task/complete", that.token, params).then(res => {
          if (res.code == 200) {
            uni.showToast({
              title: '操作成功'
            })
            that.resetData()
          }
        })
      }
      
      uni.navigateTo({
        url: `../task/complete?id=${id}`
      })
    },
    
    // 获取各类任务列表统计数量
    getTaskTotal() {
      let that = this;
      that.request("get", "rider/task/statistical", that.token, null).then(res => {
        if (res.data) {
          let keys = ['waiting', 'allocated', 'inroad', 'working', 'completed'];
          keys.forEach((keyName, index) => {
            that.menuList[index].num = res.data[keyName] || 0;
          })
        }
      })
    },
    
    // 获取任务列表
    getTaskList() {
      let that = this;
      if (that.finish) {
        return;
      }
      that.loadData = true;
      let params = {
        status: that.menuList[that.menuIndex].status,
        page: that.pageNo,
        limit: that.pageSize
      };
      
      that.request("get", "rider/task/list", that.token, params).then(res => {
        if (res.code === 200) {
          let newList = res.rows;
          newList.forEach(item => {
            if (item.predictTime) {
              if (typeof (item.predictTime) === 'number') {
                item.predictTime = that.dateFtt('yyyy-MM-dd hh:mm:ss', new Date(item.predictTime))
              }
            }
          })
          that.list = that.list.concat(newList);
          that.finish = that.list.length >= res.total;
          that.pageNo++;
          console.log('page', that.pageNo)
          console.log('that.list', that.list.length)
          that.loadData = false; // 获取结束
        } else {
          that.loadData = false; // 获取结束
        }
      })
    },
    
    async accept(data) {
      let that = this;
      let id = data.id;
      let params = {
        riderOrderId: id,
      }
      that.request("get", "rider/task/accept", that.token, params).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: '接单成功'
          })
          that.resetData()
        }
      })
    },
    
    async inRoad(data) {
      let that = this;
      let id = data.id;
      let params = {
        riderOrderId: id,
      }
      that.request("get", "rider/task/inRoad", that.token, params).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: '出发成功'
          })
          that.resetData()
        }
      })
    },
    
    // 开始配送
    async start(data) {
      let that = this;
      let id = data.id;
      let address = `${data.province}${data.city}${data.county}${data.address}`;
      let point = await that.getOrderPoi(address);
      if (point) {
        let params = {
          riderOrderId: id,
          lng: point.lng,
          lat: point.lat
        }
        that.request("get", "rider/task/begin", that.token, params).then(res => {
          // console.log(res)
          if (res.code === 200) {
            uni.showToast({
              title: '操作成功'
            })
            that.resetData()
          }
        })
      }
    },
    
    //订单异常
    order_error(data) {
      let that = this;
      let address = `${data.province}${data.city}${data.county}${data.address}`;
      that.errOrder = {
        show: true,
        id: data.id,
        address,
        msg: ''
      }
    },
    
    //提交订单异常
    async checkErr(type) {
      let that = this
      if (type) {
        if (!that.errOrder.msg.length) {
          uni.showToast({
            title: '请输入异常原因'
          })
          return;
        }
        that.errOrder.show = false;
        let point = await that.getOrderPoi(that.errOrder.address);
        if (point) {
          let params = {
            riderOrderId: that.errOrder.id,
            reason: that.errOrder.msg,
            lng: point.lng,
            lat: point.lat
          }
          that.request("get", "rider/task/abnormal", that.token, params).then(res => {
            if (res.code == 200) {
              uni.showToast({
                title: '操作成功'
              })
              that.resetData()
            }
          })
        }
      } else {
        that.errOrder.show = false;
      }
    }
    
  }
}
</script>

<style lang="scss" scoped>
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100vw;
}

.app-main {
  position: absolute;
  width: 750rpx;
  top: 410rpx;
}

.toLogin {
  padding-top: 100rpx;
  text-align: center;
  color: red;
  font-size: 30rpx;
}

.header_right_img {
  width: 56rpx;
  height: 56rpx;
  position: absolute;
  right: 72rpx;
  top: -6rpx;
  
}

.header_left_img {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: 10rpx;
}

.qh {
  font-size: 30rpx;
  color: #FFFFFF;
  position: absolute;
  right: 0;
  top: 4rpx;
}

.leftqh {
  font-size: 30rpx;
  color: #FFFFFF;
  position: absolute;
  left: 46rpx;
  top: 4rpx;
}

.app {
  background-color: #F6F6F6;
}

.ret {
  width: 20rpx;
  height: 36rpx;
}

.header {
  height: 322rpx;
  position: relative;
}

.header_bg {
  width: 750rpx;
  height: 322rpx;
}

.header_nav {
  width: 686rpx;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 60rpx;
  left: 32rpx;
}

.header_nav view {
  flex: 1;
}

.status {
  width: 750rpx;
  text-align: center;
  position: absolute;
  color: #FFFFFF;
  font-size: 48rpx;
  top: 164rpx;
  font-weight: bold;
  
}

.status text {
  display: inline-block;
  width: 242rpx;
  height: 84rpx;
  background-color: #FFFFFF;
  border-radius: 39rpx;
  text-align: center;
  line-height: 84rpx;
  color: #3662DD;
}

.nav_list {
  height: 88rpx;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  position: relative;
}

.nav_list_item {
  flex: 1;
  height: 100%;
  line-height: 88rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666666;
  
  &.selector {
    position: relative;
    
    &:after {
      position: absolute;
      content: '';
      bottom: 0;
      left: 50%;
      width: 56rpx;
      height: 8rpx;
      margin-left: -28rpx;;
      border-radius: 4rpx;
      background-color: #3662DD;
    }
  }
  
}

.nav_list_item2 {
  width: 200rpx;
  position: absolute;
  right: 100rpx;
}

.nav_list_item3 {
  width: 100rpx;
  position: absolute;
  right: 0;
}


.form {
  padding: 0 47rpx;
  border-top: 24rpx solid #F6F6F6;
  background-color: #FFFFFF;
}

.form_item {
  height: 80rpx;
  border-bottom: 1rpx solid #F6F6F6;
  display: flex;
  flex-direction: row;
}

.selector {
  color: #3662DD;
}

.form_item_l {
  width: 170rpx;
  height: 98rpx;
  line-height: 98rpx;
  font-size: 28rpx;
  color: #999999;
}

.form_item_r {
  width: 486rpx;
  height: 98rpx;
  line-height: 98rpx;
  font-size: 28rpx;
  color: #333333;
  text-align: right;
}

.addr {
  display: inline-block;
  width: 34rpx;
  height: 36rpx;
  position: relative;
  top: 6rpx;
}

.phone {
  width: 38rpx;
  height: 36rpx;
  position: relative;
  top: 6rpx;
}

.item2 {
  font-weight: bold;
  color: #333333;
  font-size: 32rpx;
}

.btn {
  display: inline-block;
  width: 180rpx;
  height: 74rpx;
  line-height: 74rpx;
  color: #3662DD;
  font-size: 30rpx;
  border: 1rpx solid #3662DD;
  background-color: #FFFFFF;
}

.btn2 {
  margin-right: 30rpx;
}

.btn3 {
  background: linear-gradient(to right, #5095F4, #3662DD);
  color: #FFFFFF;
  border: none;
}

.botm {
  height: 120rpx;
  background-color: #FFFFFF;
  position: fixed;
  bottom: 0;
  width: 750rpx;
  
}

.botm_inner {
  height: 120rpx;
  position: relative;
  font-size: 30rpx;
  color: #3662DD;
}

.rw_img {
  width: 58rpx;
  height: 64rpx;
  position: absolute;
  top: 28rpx;
  left: 240rpx;
  
}

.botm_txt {
  position: absolute;
  left: 328rpx;
  top: -6rpx;
  /* #ifdef H5 */
  top: 40rpx;
  /* #endif */
}

.btn4 {
  border-color: #FF473C;
  color: #FF473C;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.mask-modal {
  width: 600rpx;
  height: 520rpx;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 16rpx;
}

.mask-modal-tit {
  color: #000000;
  font-size: 32rpx;
  padding: 40rpx 0;
  text-align: center;
  font-weight: bold;
}

.mask_area {
  width: 500rpx;
  height: 186rpx;
  font-size: 30rpx;
  background-color: #F8F8F8;
  margin: 0 auto;
  padding: 24rpx 20rpx;
  
}

.pl {
  font-size: 30rpx;
  color: #999999;
}

.mask_bottom {
  width: 500rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  padding-top: 40rpx;
}

.mask_bottom view {
  flex: 1;
  height: 96rpx;
}

.mask_btn {
  width: 238rpx;
  height: 94rpx;
  line-height: 94rpx;
  font-size: 32rpx;
  border: 1rpx solid #3662DD;
  color: #3662DD;
}

.mask_btn2 {
  background: linear-gradient(to right, #5095F4, #3662DD);
  border: none;
  color: #FFFFFF;
}

.fr2 {
  display: flex;
  flex-direction: row;
}

.fr2 .v1 {
  width: 428rpx;
  height: 98rpx;
  line-height: 98rpx;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fr2 .v2 {
  width: 58rpx;
  text-align: right;
  height: 98rpx;
}

.bgcor {
  background-color: red;
}

.loadMore {
  // padding: 0 0 120rpx;
  background-color: #F6F6F6;
}

.audit-box {
  color: #c30d23;
  font-size: 38rpx;
  font-weight: 600;
  text-align: center;
  padding: 120rpx 0;
}
</style>