<template>
<view class="page">
<u-navbar title="订单管理" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='50' id="navbar">
</u-navbar>
<view class="toptab">
<view class="" @click="show = true">
{{zttxt}} <u-icon name="arrow-down-fill" color="#3D3D3D" size="24"></u-icon>
</view>
<!-- <view class="">
支付方式 <u-icon name="arrow-down-fill" color="#3D3D3D" size="24"></u-icon>
</view> -->
<view class="">
<!-- 时间筛选 <u-icon name="arrow-down-fill" color="#3D3D3D" size="24"></u-icon> -->
<text class="one" @click="btntime(1)">{{kstime}}</text>--<text class="one" @click="btntime(2)">{{jstime}}</text>
</view>
</view>
<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
<u-picker mode="time" v-model="showtime" :params="params" @confirm='confirmkstime'></u-picker>
<scroll-view class="list"
scroll-y="true"
:scroll-with-animation="true"
@scrolltolower="handleScrollToLower">
<view class="list_item" v-for="(item,index) in orderlist" :key="index" @click="btnxq(item.orderNo)">
<view class="top">
<view class="">
订单编号：{{item.orderNo == null ? '--' : item.orderNo}}
</view>
<view class="zt" v-if="item.status == 0">待支付</view>
<view class="zt" v-if="item.status == 1">支付中</view>
<view class="zt" v-if="item.status == 2">待使用</view>
<view class="zt" v-if="item.status == 3">使用中</view>
<view class="zt" v-if="item.status == 4">已完成</view>
<view class="zt" v-if="item.status == 5">超时自动取消</view>
<view class="zt" v-if="item.status == 6">用户取消订单</view>
<view class="zt" v-if="item.status == 7">退款中</view>
<view class="zt" v-if="item.status == 8">已退款</view>
<view class="zt" v-if="item.status == 9">用户结束订单</view>
</view>
<view class="xinxi">
店铺名称：{{item.storeName == null ? '--' : item.storeName}}
</view>
<view class="xinxi">
房间名称：{{item.roomName == null ? '--' : item.roomName}}
</view>
<view class="xinxi">
<view class="">
支付时间：{{item.payTime == null ? '--' : item.payTime}}
</view>
<view class="price">
￥{{item.totalFee == null ? '--' : item.totalFee}}
</view>
</view>
<!-- <view class="bot" v-if="item.status == 4">
<view class="time">
<text v-if="false"> 剩余时间：<text>00小时55分39秒</text></text>
</view>
<view class="jieshu">
退款
</view>
</view> -->
</view>
<view class="" style="width: 100%;text-align: center;font-size: 32rpx;color: #ccc;margin-top: 30rpx;">
没有更多订单啦...
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
zttxt:'订单状态',
zttxtid:'',
kstime:'',
jstime:'',
num:'',
orderlist:[],
pagenum:1,
pagesize:10,
total:0,
params: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
showtime: false,
show: false,
list: [
{
value: '',
label: '全部'
},{
value: '0',
label: '待支付'
},{
value: '1',
label: '支付中'
},{
value: '2',
label: '待使用'
},{
value: '3',
label: '使用中'
},{
value: '4',
label: '已完成'
},{
value: '5',
label: '超时自动取消'
},{
value: '6',
label: '用户取消订单'
},{
value: '7',
label: '退款中'
},{
value: '8',
label: '已退款'
}],
}
},
onLoad() {
},
onShow() {
this.pagenum = 1
this.orderlist = []
this.getlist()
},
methods: {
// 监听滚动到底部
handleScrollToLower() {
if(this.total == this.orderlist.length){
uni.showToast({
title: '没有更多订单了',
icon: 'none',
duration:2000
})
}else{
this.getlist()
}
},
// 点击选择时间
btntime(num){
this.showtime = true
this.num = num
},
// 筛选开始时间
confirmkstime(e){
if(this.num == 1){
this.kstime = e.year + '-' + e.month + '-' + e.day
if(this.jstime != ''){
this.pagenum = 1
this.orderlist = []
this.getlist()
}
}else{
this.jstime = e.year + '-' + e.month + '-' + e.day
if(this.kstime != ''){
this.pagenum = 1
this.orderlist = []
this.getlist()
}
}
},
// 点击状态筛选
confirm(e) {
this.zttxt = e[0].label
this.zttxtid = e[0].value
this.pagenum = 1
this.orderlist = []
this.getlist()
},
// 请求订单列表
getlist(){
this.$u.get(`/app/order/orderList?pageNum=${this.pagenum}&pageSize=${this.pagesize}&statusList=${this.zttxtid}&startTime=${this.kstime}&endTime=${this.jstime}`).then(res =>{
if(res.code == 200){
this.total = res.total
if(this.pagenum > 1){
this.pagenum++
this.orderlist = this.orderlist.concat(res.rows)
}else{
this.pagenum++
this.orderlist = res.rows
}
}
})
},
// 点击跳转到订单详情
btnxq(orderNo){
uni.navigateTo({
url:'/page_moban/orderxq?orderNo=' + orderNo
})
}
}
}
</script>
<style lang="scss">
/deep/ .uicon-nav-back,
/deep/ .u-title{
padding-bottom: 20rpx;
}
/deep/ .uicon-arrow-down-fill{
margin-left: 16rpx;
}
.list{
width: 100%;
height: 80vh;
overflow: scroll;
.list_item{
width: 750rpx;
max-height: 420rpx;
background: #FFFFFF;
margin-top: 20rpx;
padding-bottom: 40rpx;
box-sizing: border-box;
.top{
display: flex;
justify-content: space-between;
height: 94rpx;
line-height: 94rpx;
padding: 0 32rpx;
box-sizing: border-box;
.zt{
color: #000;
}
border-bottom: 1px solid #D8D8D8;
}
.xinxi{
padding: 0 32rpx;
box-sizing: border-box;
margin-top: 24rpx;
font-size: 28rpx;
color: #3D3D3D;
display: flex;
justify-content: space-between;
.price{
font-weight: 600;
font-size: 28rpx;
color: #48893B;
}
}
.bot{
padding: 0 32rpx;
padding-top: 24rpx;
box-sizing: border-box;
border-top: 1px solid #D8D8D8;
margin-top: 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
.jieshu{
width: 194rpx;
height: 64rpx;
border-radius: 14rpx 14rpx 14rpx 14rpx;
border: 2rpx solid #48893B;
font-weight: 600;
font-size: 32rpx;
color: #48893B;
text-align: center;
line-height: 64rpx;
}
.time{
text{
color: #48893B;
}
}
}
}
}
page {
background: #F6F6F6;
}
.toptab{
width: 100%;
height: 90rpx;
line-height: 90rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 50rpx;
box-sizing: border-box;
background-color: #fff;
view{
display: flex;
align-items: center;
.one{
display: inline-block;
width: 200rpx;
height: 50rpx;
border: 1px solid #ccc;
border-radius: 10rpx;
line-height: 50rpx;
text-align: center;
}
}
}
</style>