parent
3025da4686
commit
2b9d84cf46
@ -0,0 +1,364 @@ |
||||
<template> |
||||
<view> |
||||
<view class="headsearch width94 mart15 paddtop15 paddbotm10 fotct"> |
||||
<view class="font15 height40 fcorfff width94">总加油金额</view> |
||||
<view class="font28 fcorfff width94">¥<text class="margle font40">{{GasOrder.refuelPrice}}</text></view> |
||||
<view class="alijus marb20 mart10"> |
||||
<view class="width50 fcorfff font16"> |
||||
<view class="width100">总笔数</view> |
||||
<view class="width100 mart10 font22">{{GasOrder.refuelNum}} 笔</view> |
||||
</view> |
||||
<view class="width50 fcorfff font16"> |
||||
<view class="width100">总升数</view> |
||||
<view class="width100 mart10 font22">{{GasOrder.refuelLiters}} 升</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="headsearch width94 mart15 paddtop5 paddbotm10 fotct"> |
||||
|
||||
<view class="mart10 width90 alijusstart"> |
||||
<view class="fcorfff font14 margleri10 width60 fotlt">开始时间 :</view> |
||||
<picker mode="date" :value="startdate" :start="startDate" :end="endDate" @change="bindDateChange"> |
||||
<view class="uni-input datetim fcorfff">{{startdate}}<i class="down"></i></view> |
||||
</picker> |
||||
</view> |
||||
<view class="mart10 width90 alijusstart"> |
||||
<view class="fcorfff font14 margleri10 width60 fotlt">结束时间 :</view> |
||||
<picker mode="date" :value="enddate" :start="startDate" :end="endDate" @change="bindDateChange1"> |
||||
<view class="uni-input datetim fcorfff">{{enddate}}<i class="down"></i></view> |
||||
</picker> |
||||
</view> |
||||
<view class="mart10 width90 alijusstart"> |
||||
<view class="fcorfff font14 margleri10 width60 fotlt">油品 :</view> |
||||
<picker mode="selector" :range="oilList" range-key="codeName" @change="changeUserCard"> |
||||
<view class="uni-input datetim fcorfff font14">{{typeName}}<i class="down"></i></view> |
||||
</picker> |
||||
</view> |
||||
<view class="mart10 width90 alijusstart"> |
||||
<view class="fcorfff font14 margleri10 width60 fotlt">状态 :</view> |
||||
<picker mode="selector" :range="statulist" range-key="codeName" @change="changeUserstu"> |
||||
<view class="uni-input datetim fcorfff font14">{{statusname}}<i class="down"></i></view> |
||||
</picker> |
||||
</view> |
||||
<view class="input-box fotlt alijusstart mart15 marb10"> |
||||
<input placeholder="订单号搜索" v-model="orderNo" placeholder-style="color:#c0c0c0;" |
||||
@input="searchOrder()" /> |
||||
<view class="icon search"></view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view v-if="orderDetailsList == ''" class="mart40 fotct font14 fcor666"> |
||||
<image mode="widthFix" style="width: 70vw;" src="../../../static/img/noorder.png"></image> |
||||
</view> |
||||
<view class="width94 backcorfff headcont mart10" v-for="(item,index) in orderDetailsList" :key="index" |
||||
@click="jumpDetails(item.orderNo)"> |
||||
<view class="alijusstart width94 height30 fcor333 paddtop5"> |
||||
<view class="width70 font14 text1">{{item.orderNo}}</view> |
||||
<image class="iconw alicntend" mode="widthFix" src="../../../static/img/jtg.png"></image> |
||||
<text class="width20 font14 fotrt" v-if="item.status == 1">待支付</text> |
||||
<text class="width20 font14 fotrt" v-if="item.status == 2">已支付</text> |
||||
<text class="width20 font14 fotrt" v-if="item.status == 3">已完成</text> |
||||
<text class="width20 font14 fotrt" v-if="item.status == 4">已退款</text> |
||||
<text class="width20 font14 fotrt" v-if="item.status == 5">已取消</text> |
||||
<text class="width20 font14 fotrt" v-if="item.status == 6">已退款</text> |
||||
<text class="width20 font14 fotrt" v-if="item.status == 7">拒绝退款</text> |
||||
</view> |
||||
<view class="line1 width94"></view> |
||||
<view class="width94 mart5"> |
||||
<image :src="item.gasLogo" mode="widthFix" class="counimgs flleft"></image> |
||||
<view class="counscou paddtop10"> |
||||
<view class="width94 height25 font14 fcor666"> |
||||
油品: <text class="margle marglerig">{{item.gasOilNo}}</text> 升数: <text |
||||
class="margle">{{item.gasOilLiters}}L</text> |
||||
</view> |
||||
<view class="width94 height25 alijusstart "> |
||||
<view class="width50 font14 fcor666">加油金额: ¥{{item.totalPrice}}</view> |
||||
<view class="width50 font14 fcor333 fotrt">实付: |
||||
<text class="font18" v-if="item.payRealPrice">¥{{item.payRealPrice}}</text> |
||||
<text class="font18" v-else>¥0</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="line1 width94 mart5"></view> |
||||
<view class="height30 width94 mart5 font14 fcor666">下单时间: |
||||
{{item.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getDictionaryByCodeType, |
||||
getGasOrderList, |
||||
countGasOrder |
||||
} from '../../../Utils/Api.js'; |
||||
export default { |
||||
data() { |
||||
const currentDate = this.getDate({ |
||||
format: true |
||||
}) |
||||
return { |
||||
startdate: currentDate, |
||||
enddate: currentDate, |
||||
pageNum: 1, |
||||
pagesize: 10, |
||||
isLoadMore: false, //是否加载中 |
||||
orderNo: '', //搜索内容 |
||||
oilList: [{ |
||||
codeValue: '', |
||||
codeName: '全部' |
||||
}], //数据字典 |
||||
typeName: '全部', // 名称 |
||||
typeId: '', //区分类型 |
||||
statulist: [{ |
||||
codeValue: '', |
||||
codeName: '全部' |
||||
}, { |
||||
codeValue: 3, |
||||
codeName: '已完成' |
||||
}, { |
||||
codeValue: 4, |
||||
codeName: '已退款' |
||||
}, { |
||||
codeValue: 6, |
||||
codeName: '退款中' |
||||
}, ], //状态 |
||||
statuid: '', |
||||
statusname: '全部', |
||||
orderDetailsList: [], //列表数据 |
||||
GasOrder: '' //统计 |
||||
} |
||||
}, |
||||
onLoad() { |
||||
this.getDictionaryByCodeType(); |
||||
this.getGasOrderList(); |
||||
this.countGasOrder(); |
||||
}, |
||||
computed: { |
||||
startDate() { |
||||
return this.getDate('start'); |
||||
}, |
||||
endDate() { |
||||
return this.getDate('end'); |
||||
} |
||||
}, |
||||
onReachBottom() { //上拉触底函数 |
||||
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求 |
||||
this.isLoadMore = true |
||||
this.pageNum += 1 |
||||
this.getGasOrderList() |
||||
} |
||||
}, |
||||
methods: { |
||||
bindDateChange: function(e) { |
||||
this.startdate = e.target.value; |
||||
this.pageNum = 1; |
||||
this.orderDetailsList = []; |
||||
this.GasOrder = ''; |
||||
this.isLoadMore = true; |
||||
this.countGasOrder(); |
||||
this.getGasOrderList(); |
||||
}, |
||||
bindDateChange1: function(e) { |
||||
this.enddate = e.target.value; |
||||
this.pageNum = 1; |
||||
this.orderDetailsList = []; |
||||
this.GasOrder = ''; |
||||
this.isLoadMore = true; |
||||
this.countGasOrder(); |
||||
this.getGasOrderList(); |
||||
}, |
||||
getDate(type) { |
||||
const date = new Date(); |
||||
let year = date.getFullYear(); |
||||
let month = date.getMonth() + 1; |
||||
let day = date.getDate(); |
||||
|
||||
if (type === 'start') { |
||||
year = year - 60; |
||||
} else if (type === 'end') { |
||||
year = year + 2; |
||||
} |
||||
month = month > 9 ? month : '0' + month;; |
||||
day = day > 9 ? day : '0' + day; |
||||
return `${year}-${month}-${day}`; |
||||
}, |
||||
//查询数据字典油品 |
||||
getDictionaryByCodeType() { |
||||
let datas = { |
||||
codeType: 'GAS_OIL_TYPE' |
||||
} |
||||
getDictionaryByCodeType(datas).then(res => { |
||||
if (res.return_code == '000000') { |
||||
let List = res.return_data; |
||||
for (var i = 0; i < List.length; i++) { |
||||
this.oilList.push(List[i]); |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
//选择油品 |
||||
changeUserCard(e) { |
||||
this.typeId = this.oilList[e.target.value].codeValue; |
||||
this.typeName = this.oilList[e.target.value].codeName; |
||||
this.pageNum = 1; |
||||
this.orderDetailsList = []; |
||||
this.GasOrder = ''; |
||||
this.isLoadMore = true; |
||||
this.countGasOrder(); |
||||
this.getGasOrderList(); |
||||
}, |
||||
//选择状态 |
||||
changeUserstu(e) { |
||||
this.statuid = this.statulist[e.target.value].codeValue; |
||||
this.statusname = this.statulist[e.target.value].codeName; |
||||
this.pageNum = 1; |
||||
this.orderDetailsList = []; |
||||
this.GasOrder = ''; |
||||
this.isLoadMore = true; |
||||
this.countGasOrder(); |
||||
this.getGasOrderList(); |
||||
}, |
||||
//订单统计 |
||||
countGasOrder() { |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
let a = new Date(this.startdate).getTime(); |
||||
let b = new Date(this.enddate).getTime(); |
||||
let startTime = a - 28800000; |
||||
let endTime = b + 57599000; |
||||
let datas = { |
||||
orderNo: this.orderNo, |
||||
oilNo: this.typeId, |
||||
status: this.statuid, |
||||
pageNum: this.pageNum, |
||||
pageSize: this.pagesize, |
||||
payTimeS: startTime, |
||||
payTimeE: endTime |
||||
} |
||||
countGasOrder(datas).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.GasOrder = res.return_data; |
||||
} |
||||
}) |
||||
}, |
||||
//查询列表 |
||||
getGasOrderList() { |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
let a = new Date(this.startdate).getTime(); |
||||
let b = new Date(this.enddate).getTime(); |
||||
let startTime = a - 28800000; |
||||
let endTime = b + 57599000; |
||||
let datas = { |
||||
orderNo: this.orderNo, |
||||
oilNo: this.typeId, |
||||
status: this.statuid, |
||||
pageNum: this.pageNum, |
||||
pageSize: this.pagesize, |
||||
payTimeS: startTime, |
||||
payTimeE: endTime |
||||
} |
||||
getGasOrderList(datas).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000' && res.return_data.list !='') { |
||||
this.orderDetailsList = this.orderDetailsList.concat(res.return_data.list); |
||||
if (res.return_data.pages == this.pageNum) { |
||||
this.isLoadMore = true; |
||||
} else { |
||||
this.isLoadMore = false |
||||
} |
||||
} else { |
||||
this.orderDetailsList = []; |
||||
this.isLoadMore = true |
||||
} |
||||
}); |
||||
}, |
||||
//搜索条件 |
||||
searchOrder() { |
||||
this.orderDetailsList = []; |
||||
this.pageNum = 1; |
||||
this.getGasOrderList(); |
||||
}, |
||||
//跳转详情 |
||||
jumpDetails(item) { |
||||
uni.navigateTo({ |
||||
url: '../../home/oderDetails/oderDetails?ordesid=' + item |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page { |
||||
background-color: #f3f4f8; |
||||
} |
||||
|
||||
.datetim { |
||||
width: 130px; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
text-align: right; |
||||
border-radius: 15px; |
||||
} |
||||
|
||||
i { |
||||
border: solid #ffffff; |
||||
border-width: 0 2px 2px 0; |
||||
display: inline-block; |
||||
padding: 4px; |
||||
margin-left: 10px; |
||||
vertical-align: 3px; |
||||
} |
||||
|
||||
.down { |
||||
-webkit-transform: rotate(45deg); |
||||
} |
||||
|
||||
.headsearch { |
||||
border-radius: 8px; |
||||
background-color: #4c7fe6; |
||||
} |
||||
|
||||
.input-box { |
||||
width: 90%; |
||||
margin-left: 5%; |
||||
background-color: #f5f5f5; |
||||
border-radius: 10rpx; |
||||
height: 35px; |
||||
|
||||
.icon { |
||||
align-items: center; |
||||
width: 60upx; |
||||
font-size: 40upx; |
||||
color: #c0c0c0; |
||||
} |
||||
|
||||
input { |
||||
padding-left: 28upx; |
||||
height: 28upx; |
||||
font-size: 28upx; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.headcont { |
||||
height: 150px; |
||||
border-radius: 8px; |
||||
} |
||||
|
||||
.counimgs { |
||||
width: 60px; |
||||
max-height: 60px; |
||||
} |
||||
|
||||
.counscou { |
||||
margin-left: 70px; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in new issue