You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
466 lines
11 KiB
466 lines
11 KiB
<template>
|
|
<view class="content">
|
|
|
|
<view style="width: 710rpx; margin: 40rpx auto 20rpx;">
|
|
|
|
<view class="flex rr" style="align-items: center;">
|
|
<uni-icons type="sound" size="50rpx" color="#FBA54F"></uni-icons>
|
|
<view class="xx" v-html="notice">
|
|
</view>
|
|
<!-- 长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”,扣信用分5分罚款500元，公布三日望引以为戒！ -->
|
|
</view>
|
|
|
|
<view
|
|
style="width: 670rpx;height: 80rpx;background-color: #fff; border-radius: 16rpx;padding: 15rpx 20rpx;">
|
|
<view class="flex-sb" style="line-height: 40rpx; font-size: 28rpx;">
|
|
<view :class="{'sb-w8' : true, select : item == selectDate}" @click="onSelectDate(item)"
|
|
v-for="(item, index) in dateList">
|
|
<view class="">
|
|
{{ item.format('dddd')[2] }}
|
|
</view>
|
|
<view class="">
|
|
{{ index == 0 ? '今' : index == 1 ? '明' : item.format('DD') }}
|
|
</view>
|
|
</view>
|
|
<!-- <view class="sb-w8" style="border-left: 1rpx solid #999;"><uni-icons type="list" size="34rpx"/></view> -->
|
|
</view>
|
|
<!-- <view class="flex-sb" style="line-height: 48rpx;">
|
|
<view class="sb-w8" v-for="(item, index) in dateList">
|
|
{{ index == 0 ? '今' : index == 1 ? '明' : item.format('DD') }}
|
|
</view> -->
|
|
|
|
<!-- <view class="sb-w8" style="border-left: 1rpx solid #999;"><uni-icons type="down" size="34rpx"/></view> -->
|
|
<!-- </view> -->
|
|
</view>
|
|
|
|
<view class="flex-sb" style="margin-top: 20rpx;">
|
|
<view :class="{'status-card' : true, select : queryParams.state == 0}" @click="selectTenState(0)">
|
|
<view>
|
|
<view class="num">{{ completedQuantity }}</view>
|
|
<view>已完成</view>
|
|
</view>
|
|
</view>
|
|
<view :class="{'status-card' : true, select : queryParams.state == 1}" @click="selectTenState(1)">
|
|
<view>
|
|
<view class="num">{{ confirmedQuantity }}</view>
|
|
<view>待确认</view>
|
|
</view>
|
|
</view>
|
|
<view :class="{'status-card' : true, select : queryParams.state == 2}" @click="selectTenState(2)">
|
|
<view>
|
|
<view class="num">{{ numberOfVisits }}</view>
|
|
<view>待上门</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mt20">
|
|
|
|
<van-list v-if="orderList.length > 0" v-model:loading="loading" :finished="finished" @load="onLoad">
|
|
|
|
<view class="item" v-for="(item, index) in orderList"
|
|
@click="toOrderDetail(item.id)">
|
|
<view class="top">
|
|
<view class="service">
|
|
<text>{{item.projectId_dictText}}</text>
|
|
<uni-icons type="right" size="15"></uni-icons>
|
|
<text>{{item.type_dictText}}</text>
|
|
</view>
|
|
<view class="status">
|
|
<text> {{item.tenState_dictText}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="left">
|
|
<image mode="aspectFill" :src="item.image"></image>
|
|
<view class="tag">
|
|
{{item.technicianId_dictText}}
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="text-hidden-1">
|
|
客户姓名：{{item.name}}
|
|
</view>
|
|
<view class="text-hidden-1">
|
|
下单时间：{{item.createTime}}
|
|
</view>
|
|
<view class="text-hidden-1">
|
|
下单地址：{{item.addressId_dictText}}
|
|
</view>
|
|
<view class="text-hidden-1">
|
|
总计时间：{{item.useTime}}分钟
|
|
</view>
|
|
<view class="price">
|
|
总价格：<text class="num">{{item.money}}元</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.state !=4" class="bottom">
|
|
<view class="b2" v-if="item.tenState == 0"
|
|
@click.stop="confirmVipOrder(item, getOrderList)">
|
|
确认订单
|
|
</view>
|
|
<view class="b2" v-if="item.tenState == 1" @click.stop="startVipOrder(item, getOrderList)">
|
|
技师出发
|
|
</view>
|
|
<view class="b2" v-if="item.tenState == 2" @click.stop="arriveVipOrder(item, getOrderList)">
|
|
到达打卡
|
|
</view>
|
|
<view class="b2" v-if="item.tenState == 3"
|
|
@click.stop="startVipService(item, startServiceCallback)">
|
|
开始服务
|
|
</view>
|
|
<view class="b1" v-if="item.tenState == 4 && !item.isTimeout"
|
|
@click.stop="toCountdown(item)">
|
|
服务时间
|
|
</view>
|
|
<view class="b2" v-if="item.tenState == 4"
|
|
@click.stop="endVipService(item, toEvaluate, item.id, item.projectId,item.technicianId)">
|
|
结束服务
|
|
</view>
|
|
<!-- <view class="b1" @click.stop="toEvaluate()" v-if="item.tenState == 5">
|
|
投诉举报
|
|
</view> -->
|
|
<view class="b2" @click.stop="toEvaluate(item.id,item.projectId,item.technicianId)"
|
|
v-if="item.tenState == 5">
|
|
立即评价
|
|
</view>
|
|
</view>
|
|
<view v-else class="bottom">
|
|
<view @click.stop="()=>{}" class="b3">
|
|
用户取消
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</van-list>
|
|
|
|
<van-empty v-else image="/static/empty/order.png" image-size="400rpx" :description="getStatus()" />
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import orderMixins from '@/mixins/order.js'
|
|
export default {
|
|
mixins: [orderMixins],
|
|
data() {
|
|
return {
|
|
dateList: [],
|
|
active: 0,
|
|
queryParams: {
|
|
state: 1,
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
},
|
|
orderList: [], //订单列表数据
|
|
loading: false,
|
|
finished: false,
|
|
tenState: 0,
|
|
selectDate: null,
|
|
config: [],
|
|
notice: '',
|
|
completedQuantity: 0,
|
|
confirmedQuantity: 0,
|
|
numberOfVisits: 0,
|
|
countdownOrder: uni.getStorageSync('countdownOrder') ? JSON.parse(uni.getStorageSync('countdownOrder')) :
|
|
{}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getOrderList(this.queryParams.state)
|
|
this.getConfig()
|
|
|
|
this.dateList = []
|
|
|
|
let today = this.dayjs()
|
|
this.selectDate = today;
|
|
|
|
this.dateList.push(today)
|
|
|
|
for (let i = 1; i < 7; i++) {
|
|
this.dateList.push(today.add(i, 'day'))
|
|
}
|
|
},
|
|
methods: {
|
|
onLoad() {
|
|
this.queryParams.pageSize += 10
|
|
this.getOrderList()
|
|
},
|
|
//获取订单列表
|
|
getOrderList(state, order) {
|
|
|
|
let params = {
|
|
...this.queryParams,
|
|
tenstate : this.queryParams.state,
|
|
}
|
|
|
|
if (this.selectDate) {
|
|
params.serviceDate = this.selectDate.format('YYYY-MM-DD')
|
|
}
|
|
|
|
this.$api('getTenOrderPageList', params, res => {
|
|
if (res.code == 200) {
|
|
res.result.records.forEach(item => {
|
|
item.isTimeout = true; //是否服务时间已过
|
|
if (item && item.startServiceTime) { //有开始服务时间说明技师已开始服务
|
|
let isTimeout = new Date(item.startServiceTime).valueOf() + item.useTime *
|
|
1000 * 60
|
|
if (Date.now() <= isTimeout) {
|
|
item.isTimeout = false
|
|
}
|
|
}
|
|
})
|
|
this.orderList = res.result.records;
|
|
|
|
//统计各种状态订单数量
|
|
let titles = ['completedQuantity', 'confirmedQuantity', 'numberOfVisits']
|
|
let current = titles[state]
|
|
this[current] = res.result.total
|
|
|
|
//打开倒计时页面
|
|
if (order && order.id) {
|
|
this.orderList.forEach(item => {
|
|
if (item.id == order.id) {
|
|
this.toCountdown(item)
|
|
}
|
|
})
|
|
}
|
|
|
|
if (this.queryParams.pageSize > this.orderList.length) {
|
|
this.finished = true
|
|
}
|
|
} else {
|
|
this.finished = true
|
|
}
|
|
this.loading = false
|
|
})
|
|
},
|
|
selectTenState(state) {
|
|
this.queryParams.pageSize = 10
|
|
this.queryParams.state = state;
|
|
this.getOrderList(state)
|
|
},
|
|
onSelectDate(selectDate) {
|
|
if (this.selectDate == selectDate) {
|
|
this.selectDate = null
|
|
} else {
|
|
this.selectDate = selectDate
|
|
}
|
|
this.queryParams.pageSize = 10
|
|
this.queryParams.serviceTime = this.dayjs(selectDate).format('YYYY-MM-DD')
|
|
this.getOrderList(this.queryParams.state)
|
|
},
|
|
toEvaluate(id, projectId, terId) {
|
|
uni.navigateTo({
|
|
url : `/pages/order/evaluate?id=${id}&projectId=${projectId}&terId=${terId}`
|
|
})
|
|
},
|
|
toOrderDetail(id) {
|
|
uni.navigateTo({
|
|
url: '/pages/order/orderDetail?id=' + id
|
|
})
|
|
},
|
|
getConfig() {
|
|
this.vid = uni.getStorageSync("ivcode");
|
|
this.$api('getConfig', {}, res => {
|
|
if (res.code == 200) {
|
|
res.result.forEach(n => {
|
|
if (n.keyValue == 'notice') {
|
|
this.notice = n.content
|
|
}
|
|
})
|
|
this.config = res.result
|
|
}
|
|
})
|
|
},
|
|
//获取当前查询订单状态
|
|
getStatus() {
|
|
let titles = ['暂无已完成订单', '暂无待确认订单', '暂无待上门']
|
|
return titles[this.queryParams.state]
|
|
},
|
|
//跳转倒计时
|
|
toCountdown(order) {
|
|
let {
|
|
useTime,
|
|
startServiceTime
|
|
} = order
|
|
let isTimeout = new Date(startServiceTime).valueOf() + useTime * 1000 * 60
|
|
if (Date.now() >= isTimeout) {
|
|
return uni.showToast({
|
|
title: '服务时间已过',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/mine/countdown?time=${useTime}&startTime=${startServiceTime}`
|
|
})
|
|
},
|
|
//开始服务回调
|
|
startServiceCallback(order) {
|
|
this.getOrderList(this.queryParams.state, order)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
body {
|
|
background-color: #f3f3f3;
|
|
font-family: PingFang SC;
|
|
}
|
|
|
|
.rr {
|
|
height: 52rpx;
|
|
background: #fbecdd;
|
|
border-radius: 16rpx;
|
|
width: calc(710rpx - 40rpx);
|
|
padding: 20rpx;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.xx {
|
|
width: 602rpx;
|
|
height: 56rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
color: #323232;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.status-card {
|
|
width: 132rpx;
|
|
height: 92rpx;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
|
|
padding: 40rpx;
|
|
text-align: center;
|
|
color: #ccc;
|
|
|
|
.num {
|
|
color: #0d0d0d;
|
|
font-size: 42rpx;
|
|
}
|
|
}
|
|
|
|
.status-card.select {
|
|
background-color: var(--van-primary-color);
|
|
color: #eee;
|
|
|
|
.num {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.select {
|
|
color: var(--van-primary-color);
|
|
font-weight: 900;
|
|
}
|
|
|
|
.item {
|
|
width: calc(100% - 40rpx);
|
|
background-color: #fff;
|
|
margin: 20rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
|
|
.service {}
|
|
|
|
.status {
|
|
color: var(--van-primary-color);
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
margin: 10rpx 0;
|
|
|
|
.left {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
overflow: hidden;
|
|
border-radius: 10rpx;
|
|
|
|
image {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
}
|
|
|
|
.tag {
|
|
color: var(--van-primary-color);
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
width: 100%;
|
|
background-color: #e7fdf7;
|
|
border: 1px solid var(--van-primary-color);
|
|
border-radius: 8rpx;
|
|
padding: 2rpx 0;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: calc(100% - 160rpx);
|
|
color: #777;
|
|
font-size: 24rpx;
|
|
padding-left: 20rpx;
|
|
line-height: 40rpx;
|
|
|
|
.price {
|
|
font-weight: 900;
|
|
text-align: right;
|
|
|
|
text {
|
|
color: #ff780099;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 25rpx;
|
|
|
|
.b1,
|
|
.b3 {
|
|
border: 1px solid #777;
|
|
color: #777;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.b2 {
|
|
background: linear-gradient(178deg, #4FD3BC, #60C285);
|
|
color: #fff;
|
|
}
|
|
|
|
.b3 {
|
|
background: transparent;
|
|
}
|
|
|
|
view {
|
|
margin: 12rpx;
|
|
border-radius: 28rpx;
|
|
padding: 8rpx 28rpx;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|