停车收费优惠券管理功能

src/projects/parking/App.vue

@@ -5,8 +5,21 @@
 </template>
 
 <script>
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
 	export default {
 		name: 'Home',
+		created() {},
+		methods: {
+			removeElement(element) {
+				for (var i = 0; i < element.length; i++) {
+					console.log(element[i]);
+					document.body.removeChild(element[i]);
+				}
+			}
+		},
 		mounted() {
 			mui('body').on('tap', '.kfz', function() {
 				mui.toast('开发中');
@@ -14,7 +27,27 @@
 			mui('body').on('tap', '.jump', function() {
 				document.location.href = this.href;
 			});
-		}
+		},
+		watch: {
+			//解决系统返回键app外的元素仍然存在的问题
+			'$route': function(to, from) {
+				var muidtpicker = document.getElementsByClassName('mui-dtpicker mui-active');
+				var muibackdrop = document.getElementsByClassName('mui-backdrop');
+				var muipoppicker = document.getElementsByClassName('mui-poppicker mui-active');
+				if (muidtpicker) {
+					this.removeElement(muidtpicker);
+					//console.log(muidtpicker)
+				}
+				if (muibackdrop) {
+					this.removeElement(muibackdrop);
+					//console.log(muibackdrop)
+				}
+				if (muipoppicker) {
+					this.removeElement(muipoppicker);
+					//console.log(muibackdrop)
+				}
+			}
+		},
 	}
 </script>
 

src/projects/parking/apis/merchant.js

@@ -30,3 +30,23 @@ export function giveDiscountTicket(params) {
 		method: 'post',
 	})
 }
+
+//历史记录列表
+export function discountTicketList(params) {
+	return request({
+		url: '/mobile/parkingInfoApi/discountTicketList',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//历史记录详情
+export function discountTicketDetail(id) {
+	return request({
+		url: '/mobile/parkingInfoApi/discountTicketDetail',
+		data: Qs.stringify({
+			id: id
+		}),
+		method: 'post',
+	})
+}

src/projects/parking/views/Layout.vue

@@ -1,11 +1,21 @@
 <template>
 	<div>
-		<router-view></router-view>
+		<keep-alive :include="keep_alive_components">
+			<router-view></router-view>
+		</keep-alive>
 	</div>
 </template>
 
 <script>
-</script>
-
-<style>
-</style>
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		computed: {
+			...mapGetters({
+				keep_alive_components: 'keep_alive_components',
+			})
+		}
+	}
+</script>

src/projects/parking/views/Merchant/History/Info.vue

@@ -6,48 +6,44 @@
 		<div class="mui-content">
 			<div class="vongi-car-hisdat">
 				<div class="vongi-car-carp">
-					鄂D90909
+					{{detail.carNumber}}
 				</div>
 			</div>
 			<div class="vongi-editme vongi-popup-center">
 				<form class="mui-input-group margin10">
 					<div class="mui-input-row">
 						<label>车辆状态</label>
-						<p>停车中</p>
+						<p v-text="detail.parkingStatusStr"></p>
 					</div>
 					<div class="mui-input-row">
 						<label>已停时长</label>
-						<p>15分钟</p>
+						<p v-text="detail.inTimeStr"></p>
 					</div>
 					<div class="mui-input-row">
 						<label>登记时间</label>
-						<p>2021-02-26 12:15:00</p>
-					</div>
-					<div class="mui-input-row">
-						<label>登记人</label>
-						<p>胡永平</p>
+						<p v-text="detail.couponCreateTime"></p>
 					</div>
 				</form>
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>协议商户</label>
-						<p>金盆洗脚城</p>
+						<p v-text="detail.merchantName">金盆洗脚城</p>
 					</div>
 					<div class="mui-input-row">
 						<label>停车位置</label>
-						<p>金盆岭停车场</p>
+						<p v-text="detail.parkingName"></p>
 					</div>
 					<div class="mui-input-row">
 						<label>赠送抵扣券</label>
-						<p>5元</p>
+						<p v-text="detail.couponMoney+'元'"></p>
 					</div>
 					<div class="mui-input-row">
 						<label>入场时间</label>
-						<p>2021-02-26 12:00:00</p>
+						<p v-text="detail.inParkTime"></p>
 					</div>
 					<div class="mui-input-row">
 						<label>离场时间</label>
-						<p>--</p>
+						<p v-text="detail.outParkTime?detail.outParkTime:'--'"></p>
 					</div>
 				</form>
 			</div>
@@ -58,6 +54,7 @@
 </template>
 
 <script>
+	import * as API_Merchant from '@/apis/merchant'
 	import CommonMerchant from '@/components/CommonMerchant.vue'
 	import Loading from '$project/components/Loading.vue'
 	import TopHeader from '$project/components/TopHeader.vue'
@@ -77,15 +74,35 @@
 				isLoading: false,
 
 				pageTitle: '登记详情',
+
+				id: this.$route.query.id,
+
+				detail: {}
 			}
 		},
 		created() {},
 		methods: {
+			//获取详情
+			getInfo() {
+				this.isLoading = true;
+				API_Merchant.discountTicketDetail(this.id).then(response => {
+
+					this.isLoading = false;
+
+					this.detail = response;
+
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
 			asynCallBack() {
 
 			},
 		},
-		mounted() {},
+		mounted() {
+			this.getInfo();
+		},
 		destroyed() {
 
 		},

src/projects/parking/views/Merchant/History/List.vue

@@ -5,36 +5,33 @@
 
 		<div class="mui-content vongi-kqtj-center vongi-dktz-c">
 			<div class="fyy-temper-date margin10">
-				<a href="" class="mui-col-xs-8">02-19 23:00 至 02-26 01:00<span
-						class="mui-icon mui-icon-arrowdown"></span></a>
-				<a href="" class="mui-col-xs-4">登记人<span class="mui-icon mui-icon-arrowdown"></span></a>
+				<a class="mui-col-xs-12">
+					<span @click="selectStartTime">{{listForm.startTime}}</span>
+					至
+					<span @click="selectEndTime">{{listForm.endTime}}</span>
+					<span class="mui-icon mui-icon-arrowdown"></span>
+				</a>
+				<!-- <a href="" class="mui-col-xs-4">登记人<span class="mui-icon mui-icon-arrowdown"></span></a> -->
 			</div>
 			<div class="vongi-clasadmin vongi-bagfff">
 				<div class="vongi-xzdw-search">
-					<input type="search" placeholder="请输入车牌号查询">
+					<input type="search" @keyup.enter="reloadList" v-model="listForm.carNumber" placeholder="请输入车牌号查询">
 					<span class="mui-icon mui-icon-search"></span>
 				</div>
 			</div>
 			<div class="vongi-archives">
 				<ul class="mui-table-view">
-					<li class="mui-table-view-cell">
-						<a class="mui-navigate-right" href="#">
-							鄂D99999
-							<span class="mui-pull-right mui-h6">
-								02-24 12:00
-							</span>
-						</a>
-					</li>
-					<li class="mui-table-view-cell">
-						<a class="mui-navigate-right" href="#">
-							鄂D99999
-							<span class="mui-pull-right mui-h6">
-								02-24 12:00
-							</span>
-						</a>
+					<li v-for="(item,index) in recordList" class="mui-table-view-cell">
+						<router-link class="mui-navigate-right" :to="{name:'MerchantHistoryInfo',query:{id:item.id}}">
+							{{item.carNumber}}
+							<span class="mui-pull-right mui-h6" v-text="item.createTime"></span>
+						</router-link>
 					</li>
 				</ul>
 			</div>
+
+			<NullList :remark="'暂无历史记录'" v-if="!recordList.length"></NullList>
+
 		</div>
 
 		<loading :visible="isLoading"></loading>
@@ -42,46 +39,155 @@
 </template>
 
 <script>
+	require('$project/assets/js/mui.picker.min.js');
+	import * as API_Merchant from '@/apis/merchant'
 	import CommonMerchant from '@/components/CommonMerchant.vue'
 	import Loading from '$project/components/Loading.vue'
 	import TopHeader from '$project/components/TopHeader.vue'
+	import isReachBottom from '$project/utils/isReachBottom'
+	import NullList from '$project/components/NullList.vue'
 	import {
 		mapGetters,
 		mapMutations
 	} from 'vuex'
+	import {
+		currentTimeStamp,
+		parseUnixTime,
+		afterTimeStamp
+	} from '$project/utils'
 	export default {
 		name: 'MerchantHistoryList',
 		components: {
 			CommonMerchant,
 			Loading,
 			TopHeader,
+			NullList
 		},
 		data() {
 			return {
 				isLoading: false,
 
 				pageTitle: '历史记录',
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+					startTime: '',
+					endTime: '',
+					carNumber: ''
+				},
+				recordList: [],
 			}
 		},
-		created() {},
+		created() {
+			this.listForm.startTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d} 00:00');
+			this.listForm.endTime = parseUnixTime(afterTimeStamp(1, this.listForm.startTime), '{y}-{m}-{d} 00:00');
+		},
 		methods: {
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_Merchant.discountTicketList(this.listForm).then(response => {
+					if (response) {
+						if (this.listForm.pageIndex == 1) {
+							this.recordList = response.data;
+							this.listForm.pageIndex = response.pageNumber;
+							this.listForm.totalPage = response.totalPage;
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.data
+							];
+						}
+					}
+					this.listForm.pageIndex++;
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getList();
+					} else {
+						return;
+					}
+				}
+			},
+			//重载列表
+			reloadList() {
+				this.listForm.pageIndex = 1;
+				this.getList();
+			},
+			//选择开始时间
+			selectStartTime() {
+				var _this = this;
+				var picker = new mui.DtPicker({
+					"type": "datetime",
+					"beginYear": 2020,
+					"endDate": new Date(),
+					"value": _this.listForm.startTime
+				});
+				picker.show(function(rs) {
+					_this.listForm.startTime = rs.text;
+					picker.dispose();
+					_this.reloadList();
+				});
+			},
+			//选择结束时间
+			selectEndTime() {
+				var _this = this;
+				var picker = new mui.DtPicker({
+					"type": "datetime",
+					"beginDate": new Date(_this.listForm.startTime),
+					"value": _this.listForm.endTime
+				});
+				picker.show(function(rs) {
+					_this.listForm.endTime = rs.text;
+					picker.dispose();
+					_this.reloadList();
+				});
+			},
 			asynCallBack() {
 
 			},
 		},
-		mounted() {},
+		mounted() {
+			this.getList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
 		destroyed() {
-
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
 		},
 		computed: {
 			...mapGetters({
 				openId: 'wx_openid',
 			})
-		}
+		},
+		//keepalive监控判断
+		beforeRouteLeave(to, from, next) {
+			console.log(to.name);
+			if (['MerchantHistoryInfo'].indexOf(to.name) > -1) {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', ['MerchantHistoryList'])
+			} else {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', [])
+			}
+			next()
+		},
 	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
+<style src="$project/assets/css/mui.picker.min.css"></style>
 <style>
 </style>