382 lines
11 KiB
Vue
382 lines
11 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 style="margin-right: 20rpx;" @click="btnks(1)">{{firsTime}}</text> - <text style="margin-left: 20rpx;" @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: #17b402;" v-if="item.isUsing == true"> <text style="background-color: #17b402;"></text> 进行中 </view>
|
||
<view style="color: #8883F0;" v-if="item.isFinished == true"> <text style="background-color: #8883F0;"></text> 已完成 </view>
|
||
<view class="" v-if="item.isUsing == false && item.isFinished == false">
|
||
<view v-if="item.status == 1" style="color: rgb(99, 178, 168);"><text style="background-color: rgb(99, 178, 168);"></text> 未支付</view>
|
||
<view v-if="item.status == 2" style="color: #e6b000;"><text style="background-color: #e6b000;"></text> 支付成功</view>
|
||
<view v-if="item.status == 3" style="color: #e10328;"><text style="background-color: #e10328;"></text> 已退款</view>
|
||
<view v-if="item.status == 4" style="color: #5d5d5d;"><text style="background-color: #5d5d5d;"></text> 用户取消</view>
|
||
<view v-if="item.status == 5" style="color: #5d5d5d;"><text style="background-color: #5d5d5d;"></text> 系统超时取消</view>
|
||
<view v-if="item.status == 6" style="color: #e6b000;"><text style="background-color: #e6b000;"></text> 支付中</view>
|
||
<view v-if="item.status == 7" style="color: #e10328;"><text style="background-color: #e10328;"></text> 退款中</view>
|
||
<view v-if="item.status == 8" style="color: rgb(99, 178, 168);"><text style="background-color: rgb(99, 178, 168);"></text> 押金未支付</view>
|
||
<view v-if="item.status == 9" style="color: #e6b000;"><text style="background-color: #e6b000;"></text> 押金已支付</view>
|
||
</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}}{{item.timeUnit == 3 ? '分钟' : '小时'}}</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;
|
||
max-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;
|
||
text{
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
.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> |