charge_miniapp/pages/order/order.vue

<template>
	<ax-body @init="initBody" blank="0">
		<view class="body">
			<view class="app-flex c-between top">
				<view class="tabs">
					<view v-for="(item,index) in tabs.data" :key="index" @click="tabs.index=index" 
					class="tab" :class="{active:tabs.index==index}">{{item.name}}</view>
				</view>
				<view><text @click="openFilter()" class="ax-iconline i-setting filter-icon"></text></view>
			</view>
			<view class="list app-hide-scrollbar">
				<view v-for="(item,index) in orders.data" :key="index" class="item" @click="toOrderDeile(item)">
					<view class="title">
						<view class="name">{{item.params.stationName}}</view>
						<view class="state" :class="[getSates(item).color]">{{getSates(item).name}}</view>
					</view>
					<view class="subinfo">
						<view>
							<view>订单时间: {{item.createTime}}</view>
							<view>终端名称:  {{item.params.deviceName}}</view>
						</view>
						<view>
							<view @click.stop="customerService()" class="invoice">开发票</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money-txt">充电费用：</view>
						<view class="money">
							<text style="color:red;" v-if="item.discountMoney||item.firmPrice">共减 ￥{{(item.discountMoney+item.firmPrice).toFixed(4)}}</text>
							<text style="width: 20rpx;display: inline-block;"></text>
							<text :style="{color:`${item.discountMoney||item.firmPrice?'':'red'}`}"><text v-if="item.discountMoney||item.firmPrice">实付</text> ￥{{item.realCost.toFixed(4) || ''}}</text>
						</view>
					</view>
				</view>
				<view v-if="orders.data.length==0" class="empty">
					<icon class="ax-iconblock i-meiyou icon"></icon>
					<view>暂无数据</view>
				</view>
				<view v-if="orders.total>orders.data.length" @click="loadData(true)" class="loadmore"><text>点击加载更多</text></view>
			</view>
			<!-- 筛选查询 -->
			<ax-popup ref="filter" position="top" maskType="black" maskEnable maskClose>
				<view class="filter-box" :style="{'--filter-padding-top':`${bodyTop+60}px`}">
					<view class="divider"></view>
					<view class="filter-form">
						<view class="cell">
							<view class="lable">开始时间</view>
							<picker @change="onChange('start',$event)" :value="filter.start" class="content" mode="date">
								<text>{{filter.start}}</text>
								<text class="ax-iconline i-arrow-right icon"></text>
							</picker>
						</view>
						<view class="cell">
							<view class="lable">结束时间</view>
							<picker @change="onChange('end',$event)" :value="filter.end" class="content" mode="date">
								<text>{{filter.end}}</text>
								<text class="ax-iconline i-arrow-right icon"></text>
							</picker>
						</view>
					</view>
					<view class="fast">
						<view class="cell">
							<view class="lable">快速设定</view>
						</view>
						<view class="shortcut-list">
							<view v-for="(item,index) in shortcuts" :key="index" @click="shortcut(item)" class="shortcut">{{item.name}}</view>
						</view>
					</view>
					<view @click="submit()" class="submit">确认查询</view>
				</view>
			</ax-popup>
		</view>
	</ax-body>
</template>

<script>
	export default {
		onLoad() {
			this.shortcut({code:'currentMonth'});
			this.loadData();
		},
		data() {
			return {
				bodyTop: 0,
				tabs:{
					index: 0,
					data:[{name:'全部订单',type:-1},{name:'进行中',type:1},{name:'已完成',type:2}]
				},
				shortcuts:[
					{name:'近7天',code:'7day'},
					{name:'近30天',code:'30day'},
					{name:'近三月',code:'3months'},
					{name:'本月份',code:'currentMonth'},
				],
				orders:{
					total: 0,
					data:[],
				},
				filter:{
					start: '',
					end: '',
				},
				formSubmitPara : {//提交的参数信息
					startDate: '',
					endDate: '',
					pageNum : 1,
					pageSize : 10,
					type:-1,//全部订单
				}
			}
		},
		watch:{
			"tabs.index":function(){
				this.loadData();
			}
		},
		methods: {
			initBody(data){
				this.bodyTop = data.top;
			},
			shortcut(item){
				const now = new Date();
				const format = this.$app.date.format;
				switch (item.code){
					case '7day':
						now.setDate(now.getDate()-7);
						this.filter.start = format('yyyy-MM-dd',now);
						this.filter.end = this.$app.date.format('yyyy-MM-dd');
					break;
					case '30day':
						now.setDate(now.getDate()-30);
						this.filter.start = format('yyyy-MM-dd',now);
						this.filter.end = this.$app.date.format('yyyy-MM-dd');
					break;
					case '3months':
						this.filter.start = format('yyyy-MM-dd',new Date(now.getFullYear(),now.getMonth()-3,1));
						this.filter.end = format('yyyy-MM-dd',new Date(now.getFullYear(),now.getMonth()+1,0));
					break;
					case 'currentMonth':
						this.filter.start = format('yyyy-MM-dd',new Date(now.getFullYear(),now.getMonth(),1));
						this.filter.end = format('yyyy-MM-dd',new Date(now.getFullYear(),now.getMonth()+1,0));
					break;
				}
			},
			openFilter(){
				this.$refs.filter.open();
			},
			submit(){
				console.log(this.filter);
				this.formSubmitPara.startDate = this.filter.start;
				this.formSubmitPara.endDate = this.filter.end;
				this.loadData();
				this.$refs.filter.close();
			},
			onChange(name,e){
				this.filter[name] = e.detail.value;
			},
			loadData(append){
				this.formSubmitPara.type = this.tabs.data[this.tabs.index].type;
				if(append){
					//点击加载更多的调用
					this.formSubmitPara.pageNum = this.formSubmitPara.pageNum + 1;
				}else{
					this.formSubmitPara.pageNum = 0;
					this.orders.data =[];
					this.orders.total = 0;
				}
				this.$api.base("post","/chargeApi/queryOrderList",this.formSubmitPara,{}).then(res=>{
					console.log("订单列表：",res)
					this.orders.data = this.orders.data.concat(res.table.rows);
					this.orders.total = res.table.total;
				})
			},
			//映射状态信息
			getSates(item){
				var obj = {color:"",name:"未知"};
				if(item.status == 0){
					obj.color = "";
					obj.name = "待充电";
				}else if(item.status == 1){
					obj.color = "green";
					obj.name = "充电中";
				}else if(item.status == 2){
					obj.color = "green";
					obj.name = "结算中";
				}else if(item.status == 3){
					obj.color = "blue";
					obj.name = "已完成";
				}else if(item.status == 5){
					obj.color = "blue";
					obj.name = "订单取消";
				}
				return obj;
			},
			toOrderDeile(item){
				if(item.status == 0 || item.status == 1){
					//有充电中的订单，点击时跳转到充电中页面进行查看
					this.$app.url.goto('/pages/charging/charging?orderId='+item.id+"&deviceId="+item.deviceId,true);
				}else{
					this.$app.url.goto('/pages/order-detail/order-detail?orderId='+item.id);
				}
				
			},
			// 打开客服
			customerService(){
				const cs = this.$config.customerService;
				this.$app.act.customerService(cs.id,cs.url).catch(err=>{
					console.log(err);
					this.$app.popup.alert('客服中心失联啦,请联系管理员!');
				});
			},
		}
	}
</script>

<style scoped>
@import url("order.css");
</style>