361 lines
8.8 KiB
Vue
361 lines
8.8 KiB
Vue
|
<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.formatDate(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 = false
|
|||
|
|
this.isFinished = true
|
|||
|
|
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}`
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 查询订单
|
|||
|
|
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%;
|
|||
|
|
.order_list{
|
|||
|
|
padding-bottom: 100rpx;
|
|||
|
|
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>
|