high-mini-manage/pages/user/orderStatistics/orderStatistics.vue

<template>
	<view class="pd-main font16">
		<view class="headsearch   paddtop10 paddbotm10 fotct">
			<view class="  fcorfff paddtop10 paddbotm10 ">总加油金额</view>
			<view class="font28 fcorfff ">¥<text class="margle font40">{{GasOrder.refuelPrice || 0}}</text></view>
			<view class="alijus marb20 mart10">
				<view class="width50 fcorfff ">
					<view class="width100">总笔数</view>
					<view class="width100 mart10 font22">{{GasOrder.refuelNum || 0}} 笔</view>
				</view>
				<view class="width50 fcorfff ">
					<view class="width100">总升数</view>
					<view class="width100 mart10 font22">{{GasOrder.refuelLiters || 0}} 升</view>
				</view>
			</view>
		</view>
		<view class="headsearch  mart15 paddtop10 paddbotm10 fotct">

			<view class="mart10 width90 dis-flex flex-sp">
				<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 dis-flex flex-sp">
				<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 dis-flex flex-sp">
				<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 dis-flex flex-sp">
				<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 dis-flex flex-center 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=" backcorfff headcont mart10 pd-main font14" v-for="(item,index) in orderDetailsList" :key="index"
			@click="jumpDetails(item.orderNo)">
			<view class="alijusstart fcor333 paddtop10 paddbotm10 bor-botm1">
				<text :user-select="true" class="  text1">{{item.orderNo}}</text>
				<image class="iconw margle " style="height: 15px;" mode="widthFix" src="/static/img/jtg.png"></image>
				<text class="flex-1  fotrt" >{{item.status | filterStatus }}</text>
			</view>
			<view class="paddtop10 paddbotm10 bor-botm1">
				<view class=" dis-flex  fcor666">
					油号/枪号: <text class="margle marglerig">{{item.gasOilNo}}#/{{item.gasGunNo}}号枪</text>
				</view>
				<view class=" dis-flex  fcor666 mart5">
					升数:<text class="margle">{{item.gasOilLiters}}L</text>
				</view>
				<view class="dis-flex flex-sp mart5">
					<view class="  fcor666">加油金额: ¥{{item.gasRefuelPrice}}</view>
					<view class="  fcor333 fotrt dis-flex font18">实付:
						<text class="margle" >¥{{item.payPrice || 0}}</text>
						
					</view>
				</view>
			</view>
			<view class="paddtop10 mart5  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: 1,
					codeName: '待支付'
				}, {
					codeValue: 2,
					codeName: '已支付'
				}, {
					codeValue: 3,
					codeName: '已取消'
				},{
					codeValue: 4,
					codeName: '已退款'
				}, {
					codeValue: 5,
					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');
			}
		},
		filters:{
			filterStatus(value){
				switch (value) {
				    case 1:
				       return "待支付";
				    case 2:
				        return "已支付";
					case 3:
					   return "已取消";
					case 4:
					    return "已退款";
					case 5:
					   return "退款中";
					case 6:
					    return "退款失败";
				    default:
				        return "未知";
				}
			}
		},
		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>