426 lines
11 KiB
Vue
426 lines
11 KiB
Vue
<template>
|
|
<!-- <WorkbenchSkeleton v-if="data.is_show_skeleton"></WorkbenchSkeleton>-->
|
|
<view class="ctr" v-if="data.list !== null">
|
|
<view class="fixed-top">
|
|
<me-top title="工作台"></me-top>
|
|
<view class="filter flex-sb line-after">
|
|
<view v-for="(item, type) in filterType" :key="type" class="filter-item flex-c" @click="filter(type)">
|
|
<view :class="['title', 'flex-c', data.type === type ? 'title-active' : '']">{{item.name}}{{ countOrderByType(type) }}</view>
|
|
<view class="select-style" v-if="data.type === type"></view>
|
|
</view>
|
|
</view>
|
|
<view class="date flex-l" v-if="data.type === 'need_visit'">
|
|
<view @click="filterNeedVisit(type)" :class="['item', 'flex-c', data.need_visit_type === type ? 'item-selected' : '']" v-for="(item, type) in needVisitType" :key="type">{{item.name}}{{ countOrderByType(type) }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<me-empty-space :height="listMarginTop"></me-empty-space>
|
|
|
|
<view class="list" :style="{ transform: data.type === 'need_visit' ? 'translateY(100rpx)' : 'translateY(0)' }" v-if="data.list.length > 0">
|
|
<view class="item" v-for="(item, index) in data.list" :key="index" @click="toDetail(item.id)">
|
|
<view class="top flex-sb">
|
|
<view class="time flex-l">
|
|
<me-icon type="icon-time" color="var(--themeColor)" size="44rpx"></me-icon>
|
|
<text class="time-text" v-if="item.order_info.plan_time !== null">{{helpers.formatDate(item.plan_time)}}</text>
|
|
<text class="time-text" v-else>未预约时间</text>
|
|
</view>
|
|
<view class="status flex-r">{{getOrderStatusText(item.status)}}</view>
|
|
</view>
|
|
<view class="title flex-l">{{item.order_info.item_title}}</view>
|
|
<view class="address-ctr flex-sb">
|
|
<view class="left">
|
|
<view class="detail flex-l" v-if="item.order_info.address !== ''">{{item.order_info.address}}</view>
|
|
</view>
|
|
<view class="right" v-if="item.status !== enums.ORDER_DISPATCH_STATUS.STATUS_FINISH" @click.stop="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="user-ctr flex-sb">
|
|
<view class="user-name flex-l">
|
|
<me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
|
|
<view class="name flex-l">{{ item.order_info.customer }}</view>
|
|
</view>
|
|
<view class="phone flex-r">{{ item.order_info.tel }}</view>
|
|
</view>
|
|
<view class="operate-ctr flex-sb">
|
|
<view class="left flex-l">
|
|
<me-icon type="icon-money-cny-circle-line" color="var(--summaryColor)" size="44rpx"></me-icon>
|
|
<view class="name flex-l" v-if="item.order_info.receive_type === 1">上门报价</view>
|
|
<view class="name flex-l" v-else>平台已收款</view>
|
|
</view>
|
|
<view v-if="item.status !== enums.ORDER_DISPATCH_STATUS.STATUS_FINISH" class="right flex-r" @click.stop="helpers.makePhoneCall(item.order_info.tel)">
|
|
<me-icon type="icon-call" color="var(--themeColor)" size="44rpx"></me-icon>
|
|
<view class="name flex-l">联系客户</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<me-empty v-else text="暂无数据"></me-empty>
|
|
|
|
<me-empty-space height="100"></me-empty-space>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onShow, onReachBottom} from '@dcloudio/uni-app'
|
|
import {ref, reactive, computed, inject} from 'vue'
|
|
import MeIcon from "../../components/me-icon/me-icon";
|
|
import MeEmptySpace from "../../components/me-empty-space/me-empty-space";
|
|
import MeTop from "../../components/me-top/me-top.vue";
|
|
import api from "../../api/api";
|
|
import helpers from "../../utils/helpers";
|
|
import enums from "../../utils/enums";
|
|
import WorkbenchSkeleton from "./workbench-skeleton";
|
|
|
|
onReachBottom(() => {
|
|
if (data.page < data.last_page) {
|
|
data.page = data.page + 1
|
|
getList()
|
|
}
|
|
})
|
|
|
|
//订单详情
|
|
const toDetail = (id) => {
|
|
helpers.jumpToPage('order-info', `id=${id}`)
|
|
}
|
|
|
|
//上报异常
|
|
const reportOrderException = (orderId) => {
|
|
helpers.jumpToPage('report-order-exception', `order_id=${orderId}`)
|
|
}
|
|
|
|
//是否显示骨架屏
|
|
const isShowSkeleton = computed(() => {
|
|
return data.list === null || countOrder === undefined
|
|
})
|
|
|
|
const getOrderStatusText = (status) => {
|
|
return enums.WORKBENCH_STATUS_TEXT[status]
|
|
}
|
|
|
|
onShow(() => {
|
|
init()
|
|
})
|
|
|
|
const userLocation = reactive({
|
|
lng: null,
|
|
lat: null,
|
|
})
|
|
|
|
const formatDistance = (lat, lng) => {
|
|
const res = helpers.getDistances(userLocation.lat, userLocation.lng, lat, lng);
|
|
return `${res.distance}${res.unit}`;
|
|
}
|
|
|
|
//初始化
|
|
const init = () => {
|
|
//获取师傅当前位置
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success(res) {
|
|
userLocation.lng = res.longitude
|
|
userLocation.lat = res.latitude
|
|
data.page = 1
|
|
getList()
|
|
countWorkbenchOrder()
|
|
},
|
|
fail(err) {
|
|
uni.showToast({
|
|
title: '请授权位置权限',
|
|
icon: "error"
|
|
})
|
|
}
|
|
});
|
|
}
|
|
|
|
const countOrder = ref({})
|
|
const countWorkbenchOrder = () => {
|
|
api.countWorkbenchOrder().then(res => {
|
|
countOrder.value = res
|
|
}).catch(() => {})
|
|
}
|
|
|
|
const countOrderByType = (type) => {
|
|
if (Object.keys(countOrder.value).length === 0 || countOrder.value[type] === 0) {
|
|
return ''
|
|
}
|
|
|
|
return '(' + (countOrder.value[type] > 99 ? '99+' : countOrder.value[type]) + ')'
|
|
}
|
|
|
|
const data = reactive({
|
|
type: 'pending',
|
|
need_visit_type: 'today',
|
|
page: 1,
|
|
page_size: 10,
|
|
last_page: 0,
|
|
is_show_skeleton: false,//因页面改版，暂时关闭骨架屏
|
|
list: null
|
|
})
|
|
const getList = () => {
|
|
if (data.page > 1) {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
}
|
|
|
|
let params = {
|
|
page: data.page,
|
|
page_size: data.page_size,
|
|
workbench_type: data.type,
|
|
need_visit_type: data.need_visit_type,
|
|
}
|
|
api.workbenchOrderList(params).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(() => {})
|
|
}
|
|
|
|
const listMarginTop = computed(() => {
|
|
let globalData = inject('globalData')
|
|
let res = (globalData.statusBarH + (globalData.customBarH - globalData.statusBarH) + 50) * 2
|
|
if (data.type !== 'need_visit') {
|
|
res += 20
|
|
}
|
|
|
|
return res
|
|
})
|
|
|
|
const filterType = reactive({
|
|
'pending': {
|
|
name: '待沟通',
|
|
},
|
|
'need_visit': {
|
|
name: '待上门',
|
|
},
|
|
'ongoing': {
|
|
name: '服务中',
|
|
},
|
|
'finished': {
|
|
name: '已完成',
|
|
},
|
|
})
|
|
|
|
const needVisitType = reactive({
|
|
'today': {
|
|
name: '今日',
|
|
},
|
|
'tomorrow': {
|
|
name: '明日',
|
|
},
|
|
'all': {
|
|
name: '全部',
|
|
}
|
|
})
|
|
|
|
const filter = (type) => {
|
|
data.type = type
|
|
|
|
if (type === 'need_visit') {
|
|
data.need_visit_type = 'today'
|
|
}
|
|
|
|
data.page = 1
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
getList()
|
|
}
|
|
|
|
const filterNeedVisit = (type) => {
|
|
data.need_visit_type = type
|
|
data.page = 1
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
getList()
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ctr {
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
.list {
|
|
transition: transform 0.3s ease;
|
|
.item:first-child {
|
|
margin-top: 0!important;
|
|
}
|
|
.item {
|
|
width: 686rpx;
|
|
background: var(--containerBgColor);
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
.top {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
.time {
|
|
width: 456rpx;
|
|
height: 80rpx;
|
|
.time-text {
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: var(--themeColor);
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
.status {
|
|
width: 190rpx;
|
|
height: 80rpx;
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #E18F00;
|
|
}
|
|
}
|
|
.title {
|
|
width: 100%;
|
|
min-height: 60rpx;
|
|
line-height: 48rpx;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: var(--titleColor);
|
|
}
|
|
.address-ctr {
|
|
width: 100%;
|
|
.left {
|
|
width: 466rpx;
|
|
.detail, .area {
|
|
width: 100%;
|
|
min-height: 60rpx;
|
|
line-height: 44rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.detail {
|
|
color: var(--titleColor);
|
|
}
|
|
.area {
|
|
color: var(--summaryColor);
|
|
}
|
|
}
|
|
.right {
|
|
width: 180rpx;
|
|
.icon-ctr {
|
|
height: 60rpx;
|
|
width: 100%
|
|
}
|
|
.distance {
|
|
width: 100%;
|
|
min-height: 44rpx;
|
|
line-height: 44rpx;
|
|
font-size: 28rpx;
|
|
color: var(--titleColor);
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
.user-ctr {
|
|
width: 646rpx;
|
|
height: 90rpx;
|
|
background: var(--auxiliaryBgColor);
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 10rpx;
|
|
.user-name {
|
|
width: 50%;
|
|
.name, {
|
|
font-size: 28rpx;
|
|
color: var(--titleColor);
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
.phone {
|
|
width: 50%;
|
|
font-size: 28rpx;
|
|
color: var(--titleColor);
|
|
}
|
|
}
|
|
.operate-ctr {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
margin-top: 20rpx;
|
|
.left, .right {
|
|
width: 50%;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
.name {
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
.left {
|
|
color: var(--summaryColor);
|
|
}
|
|
.right {
|
|
color: var(--themeColor);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.fixed-top {
|
|
position: fixed;
|
|
top: 0;
|
|
background-color: var(--pageBgColor);
|
|
width: 686rpx;
|
|
z-index: 100;
|
|
.filter {
|
|
width: 686rpx;
|
|
height: 100rpx;
|
|
position: relative;
|
|
.filter-item {
|
|
width: 170rpx;
|
|
height: 100%;
|
|
position: relative;
|
|
.title {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
color: var(--summaryColor);
|
|
line-height: 28rpx;
|
|
}
|
|
.title-active {
|
|
color: var(--themeColor) !important;
|
|
}
|
|
.select-style {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 122rpx;
|
|
height: 4rpx;
|
|
background: var(--themeColor);
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
.date {
|
|
width: 686rpx;
|
|
height: 100rpx;
|
|
animation: animation-fade-out .3s ease-out 0s 1;
|
|
.item {
|
|
height: 60rpx;
|
|
border-radius: 8rpx;
|
|
background-color: var(--auxiliaryBgColor);
|
|
color: var(--summaryColor);
|
|
font-size: 28rpx;
|
|
padding: 0 24rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
.item-selected {
|
|
background-color: var(--themeColor10);
|
|
color: var(--themeColor);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|