wanyu_frontend/pages/index/index.vue

<template>
<!--  <IndexSkeleton v-if="data.is_show_skeleton"></IndexSkeleton>-->
  <template v-if="data.list !== null">
    <view class="ctr">
      <view class="list" v-if="data.list.length > 0">
        <view class="order-item" v-for="(item, index) in data.list" :key="index">
          <view class="top flex-sb" @click="toDetail(item.id)">
            <view class="type flex-l">{{item.order_info.item_title}}</view>
            <view class="price flex-r important-color" v-if="item.order_info.receive_type === 1">上门报价</view>
            <view class="price flex-r" v-else>平台已收款</view>
          </view>
          <view class="content flex-sb">
            <view class="left" @click="toDetail(item.id)">
              <view class="address-name flex-l" v-if="item.order_info.address !== ''">
                {{item.order_info.address}}
              </view>
              <view class="time-ctr flex-l" v-if="item.order_info.plan_time !== null">
                <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
                <text class="time">{{helpers.formatDate(item.order_info.plan_time)}}</text>
              </view>
            </view>
            <view class="right" @click="helpers.openLocation(item.order_info.lat, item.order_info.lng)">
              <view class="icon-ctr flex-c">
                <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
              </view>
              <view class="distance flex-c" v-if="item.order_info.lng == 0 || item.order_info.lat == 0">未知距离</view>
              <view class="distance flex-c" v-else>{{formatDistance(item.order_info.lat, item.order_info.lng)}}</view>
            </view>
          </view>
          <view class="discount flex-l" @click="toDetail(item.id)" v-if="item.order_info.coupon !== null">已支付定金：{{item.order_info.coupon.threshold}}元抵扣{{item.order_info.coupon.discount_value}}元</view>
          <view class="btn-ctr flex-sb">
            <me-button @click="acceptOrder(index, item.id)" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
            <me-button @click="rejectOrder(index, item.id)" active-color="var(--contentBgColor)" text="拒 接" width="166rpx" text-color="var(--titleColor)"></me-button>
          </view>
        </view>
      </view>
      <me-empty v-else text="暂无数据"></me-empty>
      <me-empty-space height="100"></me-empty-space>
    </view>
  </template>

</template>

<script setup>
import {onReachBottom, onShow, onPullDownRefresh} from '@dcloudio/uni-app'
import {reactive} from 'vue'
import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space";
import helpers from "../../utils/helpers";
import api from "../../api/api";
import IndexSkeleton from "./index-skeleton";

onPullDownRefresh(() => {
  data.page = 1
  getList()
})

const acceptOrder = (index, id) => {
  uni.showModal({
    title: '接单提示',
    confirmText: '确认',
    content: '接单后请及时和客户联系，确认接单？',
    success: function (res) {
      if (res.confirm) {
        uni.showLoading({
          title: '接单中'
        });

        api.orderConfirm({type: 'accept', order_dispatch_id: id}).then(res => {
          helpers.delayHideLoading()
          helpers.showToast('已接单')
          data.list.splice(index, 1)
        }).catch(() => {})
      }
    }
  });
}

const rejectOrder = (index, id) => {
  uni.showModal({
    title: '请您确认是否拒单？多次拒单平台会减少对您的派单量！',
    confirmText: '确认',
    editable: true,
    placeholderText: '请输入拒接原因',
    success: function (res) {
      if (res.confirm) {
        if (!res.content) {
          return helpers.showToast('请输入拒接原因')
        }

        uni.showLoading({
          title: '拒接中'
        });
        api.orderConfirm({type: 'reject', order_dispatch_id: id, reject_reason: res.content}).then(() => {
          helpers.delayHideLoading()
          helpers.showToast('已拒接')
          data.list.splice(index, 1)
        }).catch(() => {})
      }
    }
  });
}

const toDetail = (id) => {
  helpers.jumpToPage('order-info', `id=${id}`)
}

onShow(() => {
  if (data.list === null) {
    init()
  }
})

const data = reactive({
  page: 1,
  page_size: 10,
  last_page: 0,
  is_show_skeleton: true,
  list: null
})
const getList = () => {
  if (data.page > 1) {
    uni.showLoading({
      title: '加载中'
    });
  }

  api.orderDispatchList({page: data.page, page_size: data.page_size}).then(res => {
    data.last_page = res.last_page
    if (data.page === 1) {
      data.list = res.data;
    } else {
      data.list = data.list.concat(helpers.deepObj(res.data))
    }
    data.is_show_skeleton = false
    helpers.delayHideLoading()
  }).catch(() => {}).finally(() => {
    uni.stopPullDownRefresh();
  })
}

const userLocation = reactive({
  lng: null,
  lat: null,
})

//初始化
const init = () => {
  //获取师傅当前位置
  uni.getLocation({
    type: 'gcj02',
    success(res) {
      userLocation.lng = res.longitude
      userLocation.lat = res.latitude
      data.page = 1
      getList()
    },
    fail(err) {
      uni.showToast({
        title: '请授权位置权限',
        icon: "error"
      })
    }
  });
}

const formatDistance = (lat, lng) => {
  const res = helpers.getDistances(userLocation.lat, userLocation.lng, lat, lng);
  return `${res.distance}${res.unit}`;
}

onReachBottom(() => {
  if (data.page < data.last_page) {
    data.page = data.page + 1
    getList()
  }
})
</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  .fixed-top {
    position: fixed;
    top: 0;
    background-color: var(--pageBgColor);
    width: 686rpx;
  }
  .refresh {
    width: 108rpx;
    height: 108rpx;
    background: var(--themeColor);
    border-radius: 50%;
    position: fixed;
    bottom: 64rpx;
    right: 32rpx;
  }

  .rotate {
    animation: spin 0.5s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
  }
}
</style>