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.
423 lines
9.4 KiB
423 lines
9.4 KiB
<template>
|
|
<view class="content">
|
|
|
|
<view style="
|
|
background-color: #fff;
|
|
text-align: center;
|
|
padding: 20px;
|
|
font-weight: 900;
|
|
">
|
|
我的订单
|
|
</view>
|
|
|
|
<van-tabs v-model:active="active"
|
|
color="#EF8C94"
|
|
@click-tab="onClickTab">
|
|
<van-tab title="全部"></van-tab>
|
|
<van-tab title="待确认"></van-tab>
|
|
<van-tab title="已完成"></van-tab>
|
|
<van-tab title="已取消"></van-tab>
|
|
</van-tabs>
|
|
|
|
<view style="width: 710rpx; margin: 40rpx auto 20rpx;">
|
|
|
|
|
|
<!-- <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> -->
|
|
|
|
<view class="flex-sb" style="margin-top: 20rpx;">
|
|
<view :class="{'status-card' : true, select : queryParams.state == 0}">
|
|
<view>
|
|
<view class="num">{{ completedQuantity }}</view>
|
|
<view>总接单数</view>
|
|
</view>
|
|
</view>
|
|
<view :class="{'status-card' : true, select : queryParams.state == 1}">
|
|
<view>
|
|
<view class="num">{{ confirmedQuantity }}</view>
|
|
<view>总佣金数额</view>
|
|
</view>
|
|
</view>
|
|
<view :class="{'status-card' : true, select : 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 v-show="item.state" 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, getOrderList)">
|
|
开始服务
|
|
</view>
|
|
<view class="b2" v-if="item.tenState == 4"
|
|
@click.stop="endVipService(item, toEvaluate, item.id, item.projectId)">
|
|
结束服务
|
|
</view>
|
|
<view class="b1" @click.stop="toEvaluate()" v-if="item.tenState == 5">
|
|
投诉举报
|
|
</view>
|
|
<view class="b2" @click.stop="toEvaluate(item.id,item.projectId)"
|
|
v-if="item.tenState == 5 && item.evaluated == 0">
|
|
立即评价
|
|
</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: {
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
},
|
|
orderList: [], //订单列表数据
|
|
loading: false,
|
|
finished: false,
|
|
tenState: 0,
|
|
selectDate: null,
|
|
config: [],
|
|
notice: '',
|
|
completedQuantity : 0,
|
|
confirmedQuantity : 0,
|
|
numberOfVisits : 0
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getOrderList()
|
|
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: {
|
|
onClickTab(){},
|
|
onLoad() {
|
|
this.queryParams.pageSize += 10
|
|
this.getOrderList()
|
|
},
|
|
//获取订单列表
|
|
getOrderList(state) {
|
|
|
|
let params = {
|
|
...this.queryParams,
|
|
}
|
|
|
|
if (this.selectDate) {
|
|
params.serviceDate = this.selectDate.format('YYYY-MM-DD')
|
|
}
|
|
|
|
this.$api('getTenOrderPageList', params, res => {
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
this.orderList = res.result.records;
|
|
let titles = ['completedQuantity','confirmedQuantity','numberOfVisits']
|
|
let current = titles[state]
|
|
this[current] = this.orderList.length
|
|
} else {
|
|
this.finished = true
|
|
}
|
|
if (this.queryParams.pageSize > this.orderList.length) {
|
|
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) {
|
|
uni.navigateTo({
|
|
url: '/pages/order/evaluate?id=' + id + '&projectId=' + projectId
|
|
})
|
|
},
|
|
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]
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
font-size: 26rpx;
|
|
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-color: #EF8C94;
|
|
color: #fff;
|
|
}
|
|
|
|
.b3 {
|
|
background: transparent;
|
|
}
|
|
|
|
view {
|
|
margin: 12rpx;
|
|
border-radius: 28rpx;
|
|
padding: 8rpx 28rpx;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|