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">
					<view class="title" @click="toOrderDeile(item)">
						<view class="name">{{ item.params.stationName }}</view>
						<view class="state" :class="[getSates(item).color]">{{ getSates(item).name }}</view>
					</view>
					<view class="subinfo" @click="toOrderDeile(item)">
						<view>
							<view>订单时间: {{ item.createTime }}</view>
							<view>终端名称: {{ item.params.deviceName }}</view>
						</view>
					</view>
					<view class="bottom" @click="toOrderDeile(item)">
						<view class="money-txt">充电费用：</view>
						<view class="money">
							<text style="color:red;" v-if="item.discountMoney || item.firmPrice">共减
								￥{{ (item.discountMoney + item.firmPrice + item.couponPrice).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 class="button-box">
						<view @click.stop="customerService()" class="invoice">开发票</view>
						<view class="arrears-btn-box" v-if="item.maspStatus === 1"
							@click="$app.url.goto('/pages/coupon-buy/coupon-buy')">
							<view class="overflow-mon">超{{ (item.maspAmount + item.maspRealAmount).toFixed(2) }}元</view>
							<view class="arrears-btn">去补缴</view>
						</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(options) {
		this.shortcut({ code: 'currentMonth' });
		if (options.index) {
			this.tabs.index = options.index
			this.formSubmitPara.status = 1
		} else {
			this.loadData();
		}
	},
	data() {
		return {
			bodyTop: 0,
			tabs: {
				index: 0,
				data: [{ name: '全部订单', status: '' }, { name: '进行中', status: 1 }, { name: '已完成', status: 3 }]
			},
			shortcuts: [
				{ name: '近7天', code: '7day' },
				{ name: '近30天', code: '30day' },
				{ name: '近三月', code: '3months' },
				{ name: '本月份', code: 'currentMonth' },
			],
			orders: {
				total: 0,
				data: [],
			},
			filter: {
				start: '',
				end: '',
			},
			formSubmitPara: {//提交的参数信息
				startTime: '',
				endTime: '',
				pageNum: 1,
				pageSize: 10,
				status: '',//全部订单
			}
		}
	},
	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.startTime = this.filter.start + ' 00:00:00';
			this.formSubmitPara.endTime = this.filter.end + ' 23:59:59';
			this.loadData();
			this.$refs.filter.close();
		},
		onChange(name, e) {
			this.filter[name] = e.detail.value;
		},
		loadData(append) {
			this.formSubmitPara.status = this.tabs.data[this.tabs.index].status;
			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", "/applet/v1/charge/getPage", 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>