You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
364 lines
10 KiB
364 lines
10 KiB
<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>
|
|
|