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

<template>
  <view class="app">
    <view class="hdr">
      <view class="header">
        <image class="header_bg" :src="userInfo.workState ? workStatus[userInfo.workState].img : workStatus[0].img" />
        <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 @click="changeStatus()" v-if="userInfo.state" style="position: relative;top: 180rpx">
            <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 class="nav_list" v-if="userInfo.state">
        <view :class="['nav_list_item', {'selector': index === menuIndex}]" @click="toggleMenu(index)"
          v-for="(item, index) in menuList" :key="index">
          <text>{{ item.label }}</text>
          <text style="color: red;" v-show="item.num">({{ item.num }})</text>
        </view>
      </view>
    </view>

    <view class="app-main">
      <view class="form" v-for="(item, index) in list" :key="index">
        <view class="form_item">
          <view class="form_item_l item2">{{ menuList[menuIndex].label }}</view>
          <view class="form_item_r">配送费<span style="color: red">￥{{ item.freightPrice }}</span></view>
        </view>
        <view class="form_item">
          <view class="form_item_l">前置仓库</view>
          <view class="form_item_r">{{ item.storeName }}</view>
        </view>
        <view class="form_item" v-if="item.predictTime">
          <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="start(item)">开始配送</button>
          </block>
          <block v-if="menuIndex == 1">
            <button class="btn btn2 btn4" @click="order_error(item)">订单异常</button>
            <button class="btn btn3" @click="complete(item)">完成配送</button>
          </block>
          <block v-if="menuIndex == 2">
            <button class="btn btn2 btn4" @click="order_error(item)">订单异常</button>
            <button class="btn btn3" @click="complete(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 class="loadMore" v-if="userInfo.state">
        <uni-load-more :status="finish ? 'noMore' : 'more'" />
      </view>
      <view class="audit-box" v-else>审核中</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 class="mask_area" v-model="errOrder.msg" placeholder="请输入异常原因" placeholder-class="pl"></textarea>
          <view class="mask_bottom">
            <view>
              <button @click="checkErr(false)" style="float: left;" class="mask_btn">取消</button>
            </view>
            <view>
              <button @click="checkErr(true)" style="float: right;" class="mask_btn mask_btn2">确定</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: 1,
            num: 0
          },
          {
            label: '超时',
            status: 2,
            num: 0
          },
          {
            label: '配送异常',
            status: 3,
            num: 0
          },
          {
            label: '完成',
            status: 4,
            num: 0
          }
        ],

        list: [], // 任务列表
        pageNo: 1, // 页码
        pageSize: 10, // 页数
        loadData: false, // 列表加载中
        finish: false, // 列表全部加载完成

        errOrder: {
          show: false,
          id: null,
          address: '',
          msg: ''
        },
      }
    },
    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).then(res => {
                resolve(false)
              })

            },
            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 => {
          console.log(res.data)
          if (res.data) {
            let keys = ['waitingCount', 'dispenseCount', 'timeoutCount', 'abnormalCount', 'completedCount'];
            keys.forEach((keyName, index) => {
              that.menuList[index].num = res.data[keyName] || 0;
            })
          }
        })
      },

      // 获取任务列表
      getTaskList() {
        //console.log("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;
            console.log(newList)
            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 = newList.length >= res.total;
            that.pageNo++;
            that.loadData = false; // 获取结束
          } else {
            that.loadData = false; // 获取结束
          }
        })
      },

      // 开始配送
      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>