244 lines
6.9 KiB
Vue
244 lines
6.9 KiB
Vue
<template>
|
|
<IndexSkeleton v-if="data.is_show_skeleton"></IndexSkeleton>
|
|
<view v-else class="ctr">
|
|
<view class="fixed-top">
|
|
<me-top title="接单大厅"></me-top>
|
|
</view>
|
|
|
|
<me-empty-space :height="listMarginTop"></me-empty-space>
|
|
<view class="list">
|
|
<view class="order-item" v-for="(item, index) in data.list" :key="index">
|
|
<view class="top flex-sb">
|
|
<view class="type flex-l" @click="toDetail(item.id)">{{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">
|
|
{{item.order_info.address}}
|
|
</view>
|
|
<view class="address flex-l">
|
|
{{helpers.removeCommas(item.order_info.area.merge_name)}}
|
|
</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">
|
|
<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" v-if="item.order_info.receive_type === 1">已支付订金：{{item.order_info.online_amount}}元抵扣{{item.order_info.discount_amount}}元</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>
|
|
<view class="refresh flex-c" @click="refreshStart()" hover-class="auto-mask-layer-radius100" hover-start-time="0" hover-stay-time="50">
|
|
<view class="icon flex-c" :style="{ transform: `rotate(${refresh.rotate_deg}deg)` }">
|
|
<me-icon type="icon-reset-left-line" color="#FFFFFF" size="60rpx"></me-icon>
|
|
</view>
|
|
</view>
|
|
<me-empty-space height="100"></me-empty-space>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onLoad, onShow, onReachBottom} from '@dcloudio/uni-app'
|
|
import {ref, reactive, computed, watch, inject} 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 MeTop from "../../components/me-top/me-top";
|
|
import helpers from "../../utils/helpers";
|
|
import api from "../../api/api";
|
|
import IndexSkeleton from "./index-skeleton";
|
|
|
|
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 => {
|
|
uni.hideLoading();
|
|
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(() => {
|
|
uni.hideLoading();
|
|
helpers.showToast('已拒接')
|
|
data.list.splice(index, 1)
|
|
}).catch(() => {})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const listMarginTop = computed(() => {
|
|
return (inject('globalData').statusBarH + (inject('globalData').customBarH - inject('globalData').statusBarH)) * 2
|
|
})
|
|
|
|
const toDetail = (id) => {
|
|
helpers.jumpToPage('order-info', `id=${id}`)
|
|
}
|
|
|
|
onLoad(() => {
|
|
init()
|
|
})
|
|
|
|
const data = reactive({
|
|
page: 1,
|
|
page_size: 10,
|
|
last_page: 0,
|
|
is_show_skeleton: true,
|
|
list: []
|
|
})
|
|
const getList = () => {
|
|
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
|
|
}).catch(() => {}).finally(() => {
|
|
refreshComplete()
|
|
})
|
|
}
|
|
|
|
const refresh = reactive({
|
|
interval: null,
|
|
rotate_deg: 0
|
|
})
|
|
const refreshStart = () => {
|
|
if (refresh.interval !== null) {
|
|
return
|
|
}
|
|
|
|
if (userLocation.lng === null || userLocation.lat === null) {
|
|
helpers.showToast('请授权位置权限')
|
|
return
|
|
}
|
|
|
|
refresh.interval = setInterval(() => {
|
|
refresh.rotate_deg -= 12;
|
|
}, 16);
|
|
|
|
data.page = 1
|
|
getList()
|
|
}
|
|
|
|
const refreshComplete = () => {
|
|
if (refresh.interval !== null) {
|
|
clearInterval(refresh.interval);
|
|
refresh.interval = null
|
|
uni.showToast({
|
|
title: '已刷新',
|
|
icon: "success"
|
|
})
|
|
}
|
|
}
|
|
|
|
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>
|