Skip to content

S
self-support
Commit 5e3bcaf6 authored by Facius's avatar Facius
Browse files
Options

feat: 【ID1001298】 前台-工单排序调整

parent 3842edcf
Hide whitespace changes
Inline Side-by-side
Showing with 416 additions and 335 deletions
src/pages/index/order.vue
View file @ 5e3bcaf6
<template> <template>
<TabBarPage title="订单" :fixed="true" @click="goTop"> <TabBarPage title="订单" :fixed="true" @click="goTop">
<view class="tools-box"> <view class="tools-box">
<view class="search-sub"> <view class="search-sub">
<u-subsection :current="curNow" :list="subList" active-color="white" bg-color="white" <u-subsection
inactive-color="#666" button-color="#2272FF" border-radius="36" @change="sectionChange" height="72" :current="curNow"
bold> :list="subList"
</u-subsection> active-color="white"
</view> bg-color="white"
<view class="search-btn" @click="handleClickSearch"> inactive-color="#666"
<image class="search-image" mode="widthFix" :src="sousuoImage"></image> button-color="#2272FF"
<text class="search-btn-text">搜订单</text> border-radius="36"
</view> @change="sectionChange"
</view> height="72"
<view class="u-tabs-box" v-show="curNow == 0"> bold
<u-tabs height="66" activeColor="#2272FF" bg-color="none" inactive-color="#999" bar-height="4" >
bar-width="44" :offset="[0,0]" :list="list" count="total" :current="current" @change="change" </u-subsection>
:is-scroll="false" font-size="28" bold></u-tabs> </view>
</view> <view class="search-btn" @click="handleClickSearch">
<image class="search-image" mode="widthFix" :src="sousuoImage"></image>
<text class="search-btn-text">搜订单</text>
</view>
</view>
<view class="u-tabs-box" v-show="curNow == 0">
<u-tabs
height="66"
activeColor="#2272FF"
bg-color="none"
inactive-color="#999"
bar-height="4"
bar-width="44"
:offset="[0, 0]"
:list="list"
count="total"
:current="current"
@change="change"
:is-scroll="false"
font-size="28"
bold
></u-tabs>
</view>
<view class="tab-view"> <view class="tab-view">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" scroll-anchoring <scroll-view
refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" :scroll-top="scrollTop" scroll-y
refresher-background="#F4F5F7" @refresherrefresh="onRefresh" style="height: 100%;width: 100%;"
@refresherrestore="onRestore" @scroll="scroll" enable-back-to-top> @scrolltolower="reachBottom"
<view class="loading-view" v-if="!loaded && !_freshing"> scroll-anchoring
<u-loading mode="flower"></u-loading> refresher-enabled="true"
</view> :refresher-triggered="triggered"
<NoOrder v-else-if="noMore" imageName="zwdd.png" :customStyle="noOrderCustomStyle" /> :refresher-threshold="100"
<template v-else> :scroll-top="scrollTop"
<view v-for="(item, index) in orderList" :key="item.orderId"> refresher-background="#F4F5F7"
<OrderCell :orderData="item" :type="orderType" :location="dataValue" @click="handleClick" @refresherrefresh="onRefresh"
@action="handleClickCellButton"> </OrderCell> @refresherrestore="onRestore"
</view> @scroll="scroll"
<view class="load-more-view"> enable-back-to-top
<u-loadmore v-show="(pageNumber == 1 && loaded) || pageNumber > 1" :status="loadStatus" bgColor="#F4F5F7"></u-loadmore> >
</view> <view class="loading-view" v-if="!loaded && !_freshing">
</template> <u-loading mode="flower"></u-loading>
</scroll-view> </view>
</view> <NoOrder
v-else-if="noMore"
</TabBarPage> imageName="zwdd.png"
:customStyle="noOrderCustomStyle"
/>
<template v-else>
<view v-for="(item, index) in orderList" :key="item.orderId">
<OrderCell
:orderData="item"
:type="orderType"
:location="dataValue"
@click="handleClick"
@action="handleClickCellButton"
>
</OrderCell>
</view>
<view class="load-more-view">
<u-loadmore
v-show="(pageNumber == 1 && loaded) || pageNumber > 1"
:status="loadStatus"
bgColor="#F4F5F7"
></u-loadmore>
</view>
</template>
</scroll-view>
</view>
</TabBarPage>
</template> </template>
<script> <script>
import TabBarPage from "@/components/tabBarList/index.vue" import TabBarPage from '@/components/tabBarList/index.vue'
import OrderCell from "@/components/order/index.vue" import OrderCell from '@/components/order/index.vue'
import NoOrder from "@/components/order/noOrder.vue" import NoOrder from '@/components/order/noOrder.vue'
export default {
components: {
TabBarPage,
OrderCell,
NoOrder,
},
data() {
return {
curNow: 0,
pageNumber: 0,
pageSize: 1000, // 因为要排序，暂时去掉分页
orderList: [],
list: [
{
name: '待预约',
total: 0,
},
{
name: '待签到',
total: 0,
},
{
name: '待完工',
total: 0,
},
{
name: '审核中',
total: 0,
},
{
name: '异常单',
total: 0,
},
],
current: 0,
loadStatus: 'loading',
dataValue: [],
loaded: false,
triggered: true,
_freshing: false,
scrollTop: 0,
old: {
scrollTop: 0,
},
}
},
computed: {
subList() {
return ['待处理', '已完工']
},
// 0:'去预约', 1:'去签到', 2:'去完工', 3:'审核中', 4:'去处理', 5'已完工'
orderType() {
return this.indexStatus[this.currentIndex]
},
currentIndex() {
return this.curNow == 0 ? this.current : 5
},
sousuoImage() {
return process.uniEnv.qn_base_url + 'sousuo.png'
},
types() {
return {
waitAppointment: 0, // 待预约、
waitCheckIn: 1, // 待签到、
waitFinish: 2, // 待完工、
audit: 3, // 审核中、
exception: 4, // 异常单、
finish: 5, //已完工
}
},
//waitAccept、waitAppointment、waitCheckIn、waitFinish、exception、finish
indexStatus() {
return {
0: 'waitAppointment',
1: 'waitCheckIn',
2: 'waitFinish',
3: 'audit',
4: 'exception',
5: 'finish',
}
},
countKeys() {
return [
'toAppointmentCount',
'toCheckinCount',
'toFinishCount',
'reviewingCount',
'exceptionCount',
]
},
noMore() {
return this.orderList.length == 0 && this.loaded
},
noOrderCustomStyle() {
return this.curNow == 0
? 'margin-top: 100rpx;background-color: #F4F5F7'
: 'margin-top: 200rpx;background-color: #F4F5F7'
},
},
onLoad(e) {
getApp().trackPage('订单首页')
this._freshing = false
if (e && e.type) {
this.current = e.type
}
},
onShow() {
this.reloadOrderInfo()
},
methods: {
sectionChange(index) {
this.curNow = index
this.reloadOrderList()
},
// tab栏切换
change(index) {
this.current = index
this.reloadOrderList()
},
export default { reachBottom(e) {
components: { if (this.loadStatus != 'loadmore') return
TabBarPage, this.loadStatus == 'loading'
OrderCell, this.getOrderList(this.currentIndex)
NoOrder },
}, // 页面数据
data() { getOrderList(index) {
return { // 状态处理
curNow: 0, this.pageNumber += 1
pageNumber: 0, if (this.pageNumber == 1) {
pageSize: 20, this.loaded = false
orderList: [], }
list: [{ var param = {
name: '待预约', pageNumber: this.pageNumber,
total: 0, pageSize: this.pageSize,
}, keyword: '',
{ type: this.indexStatus[index],
name: '待签到', }
total: 0, var self = this
}, self.$u.api.listOrder(param).then((res) => {
{ if (res.code == 200) {
name: '待完工', if (res.data.type != self.orderType) return
total: 0,
},
{
name: '审核中',
total: 0,
},
{
name: '异常单',
total: 0,
}
],
current: 0,
loadStatus: 'loading',
dataValue: [],
loaded: false,
triggered: true,
_freshing: false,
scrollTop: 0,
old: {
scrollTop: 0
}
};
},
computed: {
subList() {
return ['待处理', '已完工']
},
// 0:'去预约', 1:'去签到', 2:'去完工', 3:'审核中', 4:'去处理', 5'已完工'
orderType() {
return this.indexStatus[this.currentIndex]
},
currentIndex() {
return this.curNow == 0 ? this.current : 5
},
sousuoImage() {
return process.uniEnv.qn_base_url + 'sousuo.png'
},
types() {
return {
'waitAppointment': 0, // 待预约、
'waitCheckIn': 1, // 待签到、
'waitFinish': 2, // 待完工、
'audit': 3, // 审核中、
'exception': 4, // 异常单、
'finish': 5, //已完工
}
},
//waitAccept、waitAppointment、waitCheckIn、waitFinish、exception、finish
indexStatus() {
return {
0: 'waitAppointment',
1: 'waitCheckIn',
2: 'waitFinish',
3: 'audit',
4: 'exception',
5: 'finish'
}
},
countKeys() {
return ['toAppointmentCount', 'toCheckinCount', 'toFinishCount', 'reviewingCount', 'exceptionCount']
},
noMore() {
return this.orderList.length == 0 && this.loaded
},
noOrderCustomStyle() {
return this.curNow == 0 ? 'margin-top: 100rpx;background-color: #F4F5F7' : 'margin-top: 200rpx;background-color: #F4F5F7'
}
},
onLoad(e) {
getApp().trackPage('订单首页')
this._freshing = false;
if (e && e.type) {
this.current = e.type
}
},
onShow() {
this.reloadOrderInfo()
},
methods: {
sectionChange(index) {
this.curNow = index;
this.reloadOrderList()
},
// tab栏切换
change(index) {
this.current = index;
this.reloadOrderList()
},
reachBottom(e) { if (self.pageNumber == 1) {
if (this.loadStatus != 'loadmore') return self.orderList = []
this.loadStatus == 'loading' }
this.getOrderList(this.currentIndex) if (res.data.list) {
}, self.orderList.push(...res.data.list)
// 页面数据 if (self.list[self.types[res.data.type]]) {
getOrderList(index) { self.list[self.types[res.data.type]].total = res.data.total
// 状态处理 }
this.pageNumber += 1 self.orderList.sort((x, y) => {
if (this.pageNumber == 1) { return x.currentOverTime <= y.currentOverTime ? 1 : -1
this.loaded = false })
} self.loadStatus =
var param = { res.data.total > self.orderList.length &&
pageNumber: this.pageNumber, res.data.list.length == self.pageSize
pageSize: this.pageSize, ? 'loadmore'
keyword: '', : 'nomore'
type: this.indexStatus[index] }
} } else {
var self = this; console.log(res.message, '获取订单数量失败！')
self.$u.api.listOrder(param).then((res) => { }
if (res.code == 200) { self.$nextTick(() => {
if (res.data.type != self.orderType) return if (self._freshing) {
self.triggered = false
if (self.pageNumber == 1) { self._freshing = false
self.orderList = [] }
} })
if (res.data.list) { this.loaded = true
self.orderList.push(...res.data.list) })
if (self.list[self.types[res.data.type]]) { },
self.list[self.types[res.data.type]].total = res.data.total
}
self.loadStatus = res.data.total > self.orderList.length && res.data.list.length == self.pageSize ? 'loadmore' : 'nomore'
}
} else {
console.log(res.message, "获取订单数量失败！");
}
self.$nextTick(()=>{
if (self._freshing) {
self.triggered = false;
self._freshing = false;
}
})
this.loaded = true
});
}, // 获取订单数量
getOrderCount() {
var self = this
self.$u.api.listOrderCount().then((res) => {
if (res.code == 200) {
if (res.data) {
// 修改各个tab数量
var i = 0
var count = 0
for (var item of self.list) {
item.total = res.data[self.countKeys[i]]
count += item.total
i++
}
// 获取订单数量 // 修改tab总数
getOrderCount() { if (count > 0) {
var self = this uni.setTabBarBadge({
self.$u.api.listOrderCount().then((res) => { index: 1,
if (res.code == 200) { text: String(count),
if (res.data) { })
// 修改各个tab数量 } else {
var i = 0 uni.removeTabBarBadge({
var count = 0 index: 1,
for (var item of self.list) { })
item.total = res.data[self.countKeys[i]] }
count += item.total }
i++ } else {
} console.log(res.message, '获取订单数量失败！')
}
// 修改tab总数 })
if (count > 0) { },
uni.setTabBarBadge({ handleClickCellButton(item) {
index: 1, // 去完工
text: String(count) uni.navigateTo({
}) url:
} else { 'pages/order/complete?orderId=' +
uni.removeTabBarBadge({ item.orderId +
index: 1 '&categoryId=' +
}) item.categoryId +
} '&orderServiceType=' +
} item.orderServiceType +
} else { '&inGuaranteePeriod=' +
console.log(res.message, "获取订单数量失败！"); item.inGuaranteePeriod +
} '&partnerCompanyId=' +
}); item.partnerCompanyId +
}, '&auditResultsId=' +
handleClickCellButton(item) { (item.auditResults
// 去完工 ? Object.keys(item.auditResults)[
uni.navigateTo({ Object.keys(item.auditResults).length - 1
url: 'pages/order/complete?orderId='+item.orderId ]
+ "&categoryId=" + item.categoryId : '') +
+ "&orderServiceType=" + item.orderServiceType '&maintainStep=' +
+ "&inGuaranteePeriod=" + item.inGuaranteePeriod item.maintainStep +
+ "&partnerCompanyId=" + item.partnerCompanyId '&orderStatus=' +
+ "&auditResultsId=" + (item.auditResults?Object.keys(item.auditResults)[Object.keys(item.auditResults).length - 1]:'') item.orderStatus +
+ "&maintainStep=" + item.maintainStep '&brandId=' +
+ '&orderStatus=' + item.orderStatus item.lianbaoBrandId,
+ '&brandId=' + item.lianbaoBrandId })
}) },
}, handleClick(item, type, showCountTime) {
handleClick(item, type, showCountTime) { // type:类型，showCountTime：是否显示倒计时。详情页面情况太多，提前传值可以避免页面晃动 // type:类型，showCountTime：是否显示倒计时。详情页面情况太多，提前传值可以避免页面晃动
//type类型 //type类型
// 'waitAccept': 待接单、待抢单;'waitAppointment': 待预约;'waitCheckIn': 待签到;'waitFinish': 待完工;'audit': 审核中;'exception': 异常单;'finish': 已完工;'other': 工单结算信息 // 'waitAccept': 待接单、待抢单;'waitAppointment': 待预约;'waitCheckIn': 待签到;'waitFinish': 待完工;'audit': 审核中;'exception': 异常单;'finish': 已完工;'other': 工单结算信息
uni.navigateTo({ uni.navigateTo({
url: 'pages/order/detail?id=' + item.orderId + '&type=' + type + '&showCountTime=' + showCountTime url:
}) 'pages/order/detail?id=' +
}, item.orderId +
handleClickSearch() { '&type=' +
uni.navigateTo({ type +
url: 'pages/order/search' '&showCountTime=' +
}) showCountTime,
}, })
onRefresh() { },
if (this._freshing) return; handleClickSearch() {
this._freshing = true; uni.navigateTo({
this.reloadOrderInfo() url: 'pages/order/search',
}, })
onRestore() { },
this.triggered = 'restore'; // 需要重置 onRefresh() {
}, if (this._freshing) return
reloadOrderInfo() { this._freshing = true
this.reloadOrderList() this.reloadOrderInfo()
this.getOrderCount(); },
}, onRestore() {
reloadOrderList() { this.triggered = 'restore' // 需要重置
this.pageNumber = 0 },
this.loadStatus = 'loading' reloadOrderInfo() {
this.getOrderList(this.currentIndex); this.reloadOrderList()
}, this.getOrderCount()
scroll(e) { },
this.old.scrollTop = e.detail.scrollTop reloadOrderList() {
}, this.pageNumber = 0
goTop(e) { this.loadStatus = 'loading'
this.scrollTop = this.old.scrollTop this.getOrderList(this.currentIndex)
this.$nextTick(function() { },
this.scrollTop = 0 scroll(e) {
}); this.old.scrollTop = e.detail.scrollTop
}, },
} goTop(e) {
}; this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
})
},
},
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-tabs-box { .u-tabs-box {
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.tab-view { .tab-view {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
// padding-bottom: 20rpx; // padding-bottom: 20rpx;
.load-more-view { .load-more-view {
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.loading-view { .loading-view {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 300rpx; margin-top: 300rpx;
position: absolute; position: absolute;
} }
} }
.tools-box { .tools-box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding-bottom: 20rpx; padding-bottom: 20rpx;
.search-sub { .search-sub {
height: 72rpx; height: 72rpx;
width: 320rpx; width: 320rpx;
} }
.search-btn { .search-btn {
height: 72rpx; height: 72rpx;
width: 220rpx; width: 220rpx;
background-color: #ffffff; background-color: #ffffff;
border-radius: 36rpx; border-radius: 36rpx;
color: #999999; color: #999999;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.search-image { .search-image {
width: 36rpx; width: 36rpx;
height: 32rpx; height: 32rpx;
flex-shrink: 0; flex-shrink: 0;
margin-right: 24rpx; margin-right: 24rpx;
} }
.search-btn-text { .search-btn-text {
line-height: 36rpx; line-height: 36rpx;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
} }
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment