<template>
<view class="pages">
<u-navbar title="订单管理" :border-bottom="false" :background="bgc" back-icon-color="#3D3D3D" title-color='#3D3D3D'
title-size='36' height='44'></u-navbar>
<view class="top">
<view class="inp">
<view class="time">
时间范围
</view>
<view class="date">
<text @click="btnks(1)">{{firsTime}}</text> - <text @click="btnks(2)">{{lasTime}}</text>
</view>
</view>
<view class="serch">
<image src="https://api.ccttiot.com/smartmeter/img/static/uBY0VGovU7BZrSdUi7cn" mode=""></image> <input @blur="blurs" v-model="keyword" type="text" placeholder="请输入内容"/>
</view>
<view class="tab_list">
<view :class="activeindex == 1 ? 'active' : ''" @click="btntab(1)">全部</view>
<view :class="activeindex == 2 ? 'active' : ''" @click="btntab(2)">进行中</view>
<view :class="activeindex == 3 ? 'active' : ''" @click="btntab(3)">已完成</view>
</view>
</view>
<scroll-view scroll-y="true" @scrolltolower="onScrollToLower" style="height: 1360rpx;" class="order_list">
<view class="order_item" v-for="(item,index) in wateringList" :key="index" @click="btndetail(item.billId)">
<view class="tops">
<view>订单编号：{{item.billNo}}</view>
<view style="color: #8883F0;" v-if="item.isUsing == true"> <text></text> 进行中 </view>
<view style="color: springgreen;" v-if="item.isFinished == true"> <text style="background-color: springgreen;"></text> 已完成 </view>
</view>
<view class="xiao">
<view>租赁用户</view>
<view>{{item.userName}}</view>
</view>
<view class="xiao">
<view>设备编号</view>
<view>{{item.deviceNo}}</view>
</view>
<view class="xiao">
<view>经营场所</view>
<view style="color: #8883F0;">{{item.storeName}}</view>
</view>
<view class="xiao">
<view>购买套餐</view>
<view>{{item.suitName}}</view>
</view>
<view class="xiao">
<view>套餐时长</view>
<view>{{item.suitTime}}小时</view>
</view>
<view class="xiao">
<view>合作伙伴信息</view>
<view>{{item.agentName}}（{{item.agentMobile}}）</view>
</view>
<view class="bot">
<view>套餐金额：<text>￥{{item.money}}</text> </view>
<view>{{item.createTime}}</view>
</view>
</view>
<view class="" style="width: 100%;text-align: center;color: #ccc;margin-top: 50rpx;">
-已经到底了-
</view>
</scroll-view>
<!-- 选择时间 -->
<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
params: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
show: false,
num: '',
firsTime:'',
lasTime:'',
activeindex:1,
pagenum: 1,
wateringList: [],
pagesize: 10, // 一页多少数据
total: 0,
type:2,
keyword:'',
isUsing:'',
isFinished:''
}
},
onLoad() {
let today = new Date()
this.firsTime = this.formatDates(today)
this.lasTime = this.formatDate(today)
this.getlist()
},
// 分享到好友（会话）
onShareAppMessage: function() {
return {
title: '创亿康',
path: '/pages/index/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '创亿康',
query: '',
path: '/pages/index/index'
}
},
methods: {
// 跳转到详情
btndetail(billId){
uni.navigateTo({
url:'/page_user/orderdetail?billId=' + billId
})
},
// tab切换
btntab(num){
this.activeindex = num
if(num == 1){
this.isUsing = ''
this.isFinished = ''
this.wateringList = []
this.pagenum = 1
this.getlist()
}else if(num == 2){
this.isUsing = true
this.isFinished = false
this.wateringList = []
this.pagenum = 1
this.getlist()
}else{
this.isUsing = false
this.isFinished = true
this.wateringList = []
this.pagenum = 1
this.getlist()
}
},
// 选择时间
btnks(num) {
this.show = true
if (num == 1) {
this.num = 1
this.wateringList = []
this.pagenum = 1
this.getlist()
} else {
this.num = 2
this.wateringList = []
this.pagenum = 1
this.getlist()
}
},
// 确定时间
confirm(e) {
if (this.num == 1) {
this.firsTime = e.year + '-' + e.month + '-' + e.day
this.wateringList = []
this.pagenum = 1
this.getlist()
} else {
this.lasTime = e.year + '-' + e.month + '-' + e.day
this.wateringList = []
this.pagenum = 1
this.getlist()
}
},
formatDate(date) {
let year = date.getFullYear()
let month = String(date.getMonth() + 1).padStart(2, '0')
let day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
},
formatDates(date) {
let year = date.getFullYear()
let month = String(date.getMonth()).padStart(2, '0')
let day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
},
// 查询订单
getlist(){
this.$u.get(`/app/bill/incomeList?pageNum=${this.pagenum}&pageSize=${this.pagesize}&keyword=${this.keyword}&createDateRange=${this.firsTime + ',' + this.lasTime}&isUsing=${this.isUsing}&isFinished=${this.isFinished}`).then(res => {
if(res.code == 200){
this.total = res.total
if (res.rows.length > 0) {
// 有数据，追加到列表
this.wateringList = this.wateringList.concat(res.rows)
this.pagenum++
}
}
})
},
// 滚动到底部
onScrollToLower() {
if (this.total > this.wateringList.length) {
this.getlist() // 上拉加载更多
} else {
}
},
// 失焦搜索
blurs(){
this.wateringList = []
this.pagenum = 1
this.getlist()
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .u-title {
padding-bottom: 15rpx;
}
/deep/ .u-icon__icon {
padding-bottom: 15rpx;
}
.active{
font-size: 32rpx !important;
color: #3D3D3D !important;
font-weight: 600;
border-bottom: 6rpx solid #8883F0;
transition-duration: .3s;
}
.pages {
background-color: #F7FAFE !important;
height: 100vh;
width: 100%;
overflow: hidden;
.order_list{
padding-bottom: 350rpx;
box-sizing: border-box;
height: 1020rpx;
overflow: scroll;
.order_item{
width: 672rpx;
height: 512rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.07);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin: auto;
margin-top: 18rpx;
padding: 24rpx 28rpx;
box-sizing: border-box;
.bot{
display: flex;
justify-content: space-between;
border-top: 1px solid #D8D8D8;
padding-top: 22rpx;
box-sizing: border-box;
margin-top: 22rpx;
view{
text{
color: #8883F0;
}
}
}
.xiao{
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #3D3D3D;
margin-top: 20rpx;
}
.tops{
display: flex;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid #D8D8D8;
padding-bottom: 20rpx;
box-sizing: border-box;
view{
display: flex;
align-items: center;
text{
display: inline-block;
width: 14rpx;
height: 14rpx;
border-radius: 50%;
background-color: #8883F0;
margin-right: 6rpx;
}
}
}
}
}
.top{
width: 750rpx;
height: 390rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
padding-top: 42rpx;
box-sizing: border-box;
.tab_list{
display: flex;
justify-content: space-between;
padding: 0 128rpx;
box-sizing: border-box;
margin-top: 48rpx;
font-size: 32rpx;
color: #808080;
view{
padding-bottom: 4rpx;
box-sizing: border-box;
}
}
.inp{
width: 672rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.07);
border-radius: 10rpx 10rpx 10rpx 10rpx;
margin: auto;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 28rpx;
.time{
margin-right: 34rpx;
font-size: 32rpx;
color: #3D3D3D;
}
.date{
font-size: 32rpx;
color: #979797;
}
}
.serch{
width: 672rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.07);
border-radius: 10rpx 10rpx 10rpx 10rpx;
margin: auto;
margin-top: 24rpx;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 28rpx;
image{
width: 44rpx;
height: 44rpx;
margin-right: 22rpx;
}
}
}
}
</style>