wxThird/pages/user/historySpend.vue

<template>
	<view class="box">
		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'历史消费'" ></homenav>
		<view class="screenBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view style="height: 44px;"></view>
		   <picker @change="bindPickerChange" :value="index" :range="array">
				<view class="screenName"> <span>车牌号：{{array[index]}}</span> 
				  <image src="../../static/timg/icon_arrow_right.png" mode="" class="jtImg"></image>
				</view>
			</picker>
		</view>
		<view style="height: 90rpx;"></view>
		<view class="itemHistory" v-for="(item,index) in itemData" :key="index" @click="goDetail(item)">
			<view class="topBox">
				<view class="dan">{{item.code}}</view>
				
				<!-- SheetType单据类型(1维修单 2销售单3洗车单4销售退货) -->
				<view class="stateBox" v-if="item.SheetType == 1">
					<!-- 0待施工（已保存）1施工中（已派工）2已完工 3已质检 4 已作废 -->
					<view class="danState"  :class="{danState2:item.PayState == 2,danState3:item.PayState == 0}" v-if="item.SheetState == 0">待施工</view>
					<view class="danState"  :class="{danState2:item.PayState == 2,danState3:item.PayState == 0}" v-if="item.SheetState == 1">施工中</view>
					<view class="danState"  :class="{danState2:item.PayState == 2,danState3:item.PayState == 0}" v-if="item.SheetState == 2">已完工</view>
					<view class="danState"  :class="{danState2:item.PayState == 2,danState3:item.PayState == 0}" v-if="item.SheetState == 3">已质检</view>
					<view class="danState"   v-if="item.SheetState == 4">已作废</view>
					<!-- 结算状态 -->
					<view v-if="item.SheetState == 4">
						<view class="danState" v-if="item.PayState == 0">/未结算</view>
						<view class="danState" v-if="item.PayState == 2">/已结算</view>
					</view>
					<view v-else>
						<view class="danState3" v-if="item.PayState == 0">/未结算</view>
						<view class="danState2" v-if="item.PayState == 2">/已结算</view>
					</view>
					
					
				</view>
				<view class="stateBox"  v-if="item.SheetType == 2">
					<!-- 0待施工（已保存）1施工中（已派工）2已审核 3已质检 4 已作废 -->
					<view class="danState"  :class="{danState3:item.PayState == 2}" v-if="item.SheetState < 2 ">未审核</view>
					<view class="danState"  :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 2">已审核</view>
					<view class="danState"  v-if="item.SheetState == 4">已作废</view>
					<!-- 结算状态 -->
					<view v-if="item.SheetState == 4">
						<view class="danState" v-if="item.PayState == 0">/未结算</view>
						<view class="danState" v-if="item.PayState == 2">/已结算</view>
					</view>
					<view v-else>
						<view class="danState3" v-if="item.PayState == 0">/未结算</view>
						<view class="danState2" v-if="item.PayState == 2">/已结算</view>
					</view>
					
					
					
				</view>
				<view class="stateBox"  v-if="item.SheetType == 3">
					<!-- 0待施工（已保存）1施工中（已派工）2已完工 3已质检 4 已作废 -->
					<view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 0">已保存</view>
					<view class="danState"  v-if="item.SheetState == 4">已作废</view>
					<!-- 结算状态 -->
					<view v-if="item.SheetState == 4">
						<view class="danState" v-if="item.PayState == 0">/未结算</view>
						<view class="danState" v-if="item.PayState == 2">/已结算</view>
					</view>
					<view v-else>
						<view class="danState" v-if="item.PayState == 0">/未结算</view>
						<view class="danState2" v-if="item.PayState == 2">/已结算</view>
					</view>
					
				</view>
				
			</view>
			
			
			<view class="carPlate">
				<view class="plateBox">
					<view class="plate">{{item.PlateNumber}}</view>
					
					<view class="mileage" v-if="item.CurrentMileage>0">{{item.CurrentMileage}}km</view>
				</view>
				<view v-if="ReceiptsMoney" class="price"><span style="font-size: 22rpx;">￥</span>{{item.money?item.money:0}}</view>
			</view>
			<view class="time">{{item.time}}</view>

			<view class="shopName">{{item.ShopName}}</view>
			
			<!-- <view class="itemN" v-if="item.listItems.length != 0">
				<view class="itemContent" v-if="item.listItems.length != 0" v-for="(v,i) in item.listItems">{{v.ItemName}},</view>
			</view>
			<view class="itemN" v-if="item.listParts.length != 0">
				<view class="itemContent" v-if="item.listParts.length != 0" v-for="(v,i) in item.listParts">{{v.GoodsName}},</view>
			</view> -->
			<view class="itemN" v-if="item.ItemName">
				<view class="itemContent" >{{item.ItemName}}</view>
			</view>
			<view class="itemN" v-if="item.GoodsName">
				<view class="itemContent" >{{item.GoodsName}}</view>
			</view>
			
			<view v-if="((item.PayState == 2) && (appraise == true) && ((item.lastDay <= 30 && item.EvaluateState == 0) || item.EvaluateState == 1))" class="bottom">
				<view v-if="(item.EvaluateState == 0) && (item.lastDay <= 30) && appraise == true && item.PayState == 2" @click.stop="goAppraise(item)" class="ping">评价</view>
				<view v-if="item.EvaluateState == 1" @click.stop="goAppraiseDetail(item)" class="kan">查看评价</view>
			</view>
		</view>
		<view class="itemHistory" v-for="(item,index) in oldlist" :key="index" @click="goDetail2(item)">
			<view class="topBox">
				<view class="dan">{{item.Code}}</view>
				
				<!-- SheetType单据类型(1维修单 2销售单3洗车单4销售退货) -->
				
				<view class="stateBox" >
					<view class="danState2">{{item.CheckoutState?item.CheckoutState:''}}</view>
				</view>
				
			</view>
			
			
			<view class="carPlate">
				<view class="plateBox">
					<view class="plate">{{item.PlateNumber}}</view>
					
					<view class="mileage" v-if="item.CurrentMileage>0">{{item.CurrentMileage}}km</view>
				</view>
				<view v-if="ReceiptsMoney&&item.CheckoutMoney" class="price"><span style="font-size: 22rpx;">￥</span>{{item.CheckoutMoney}}</view>
			</view>
			<view class="time">{{item.time}}</view>
		
			<view class="shopName">{{item.ShopName}}</view>
			<view class="itemN" v-if="item.ItemName">
				<view class="itemContent" >{{item.ItemName}}</view>
			</view>
			<view class="itemN" v-if="item.GoodsName">
				<view class="itemContent" >{{item.GoodsName}}</view>
			</view>
			
			
		</view>
		

		<!-- 上拉 加载更多 -->
		<view class="noMore" v-if="noMoreShow && (itemData.length!=0)">没有更多数据</view>
		<!-- 无数据空白页 -->
		<nodata v-if="itemData.length==0&&oldlist.length==0"></nodata>
        <!-- 手机号授权 -->
		<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
			<view class="authorizCont" @click.stop="">
				<view class="authorizName">{{wxOpenData.miniAppName}}</view>
				<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
				<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
			</view>
			<view style="text-align: center;padding-top: 56rpx;">
				<image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	import homenav from "../../components/homenav/nav.vue"
	export default {
		components: {
			nodata,homenav
		},

		data() {
			return {
				page: 1,
				itemData: [],
				oldlist:[],
				noMoreShow: false,
				appraise:false,
				ReceiptsMoney:false,//支付金额
				iStatusBarHeight:'',
				array: [],
				index: 0,
				wxOpenData: '',
				plateNumber:'',
				ext:'',
				authorizShow:false,
				userInfo: '',
				code:'',
			}
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.page = 1
			this.userInfo=this.$store.state.userInfo;
			this.ext=this.$common.getExtStoreId();
			if(this.userInfo){
				this.myOrderCoupon()
				this.myPower()
				this.showPower()
				this.getplateNumber()
			}else{
				this.$common.automaticlogin().then(val => {
					this.userInfo=this.$store.state.userInfo;
					this.wxOpenData=this.$store.state.wxOpenData;
					
					if(!this.userInfo){
						this.authorizShow=true
					}else{
						this.myOrderCoupon()
						this.myPower()
						this.showPower()
						this.getplateNumber()
					}
				})
			}
			
		},
		methods: {
			decryptPhoneNumber: function(e) {
			  console.log(e);
			  this.code=e.detail.code
			  this.wxPhoneLogin()
			  this.authorizShow=false;
			},
			wxPhoneLogin(){
					 var that=this;
					 this.$http('miniApp2/sys/wxPhoneLogin', {
					   appId:this.ext.appId,
					   unionId:this.ext.unionId,
					   code:this.code,
					   openId:this.wxOpenData.openid
					  },'POST').then(res => {
						var data = res.data;
						if(data.loginInfo){
							this.userInfo=data.loginInfo.openUser;
							this.wxOpenData=data.loginInfo;
							this.$store.commit('mutationswxOpenData', data)
							this.$store.commit('mutationsuserInfo', this.userInfo)
						    this.myOrderCoupon()
						    this.myPower()
						    this.showPower()
						    this.getplateNumber()
						}	
					  })
			},
			bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.detail)
					this.index = e.detail.value
					this.plateNumber=this.array[this.index]
					if(this.index==0){
						this.plateNumber=''
					}
					this.myOrderCoupon()
			},
			getplateNumber(){
				console.log("444")
				this.wxOpenData= this.$store.state.wxOpenData;
				this.$http('openweiXinCardInfoController/plateNumber-by-customerId', {
				    customerId:this.wxOpenData.loginInfo.uid
				}, 'GET').then(res => {
					this.array=res.data.split(',')
					this.array.unshift('全部')
				})
			},
			//显示权限
			showPower() {
				this.$http('openweiXinCardInfoController/getShowSetting', {
			
				}, 'GET').then(res => {
					var list = res.data
					list.forEach((item, index) => {
						
						if (item.fieldValue == 'ReceiptsMoney') {
							this.ReceiptsMoney = item.isChecked
						}
						
						
						
					})
					
				})
			},
			//评价权限
			myPower() {
				this.$http('openMiniEvaluate/getEvaluateSetting', {
			
				}, 'GET').then(res => {
					// var list = res.data.Items
					this.appraise = res.data
					
					
				})
			},
			goAppraiseDetail(item) {
				uni.navigateTo({
					url: 'myAppraiseDetail?sheetId=' + item.id
				})
			},
			goAppraise(item){
				uni.navigateTo({
					url: 'appraise?sheetID=' + item.id + '&shopID=' + item.shopID
				})
			},
			goDetail(item) {
				 uni.navigateTo({
					url: 'historyDetail?id=' + item.id + '&lastDay=' + item.lastDay
				}) 

			},
			goDetail2(item){
				uni.navigateTo({
					url: '../subPack/oldhistoryDetail?id=' + item.id + '&lastDay=' + item.lastDay
				})
			},
			myOrderCoupon() {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				/* this.$http('openweiXinCardInfoController/queryConsumptionList', {
                     plateNumber:this.plateNumber
					// page: this.page,
					// limit: 10,
				}, 'POST').then(res => {
					uni.hideLoading();
					// var list = res.data.Items
					var list = res.data
					
					

					if (this.page == 1) {
						this.itemData = list
					} else {
						this.itemData = this.itemData.concat(list)
					}

					if (list.length < 10) {
						this.noMoreShow = true
					} else {
						this.noMoreShow = false
					}

					
					


				}) */
				this.$http('openweiXinCardInfoController/queryConsumptionListV2', {
				     plateNumber:this.plateNumber
					// page: this.page,
					// limit: 10,
				}, 'POST').then(res => {
					uni.hideLoading();
					var list = res.data.list
					this.oldlist=res.data.oldlist
					this.itemData = list
					if (list.length < 10) {
						this.noMoreShow = true
					} else {
						this.noMoreShow = false
					}
				})
			},
			//时间对比
			getDateBeforeNow(stringTime) {
							console.log("传参未格式化", stringTime);
							stringTime = new Date(stringTime.replace(/-/g, '/'))
			
							// 统一单位换算
							var minute = 1000 * 60;
							var hour = minute * 60;
							var day = hour * 24;
							var week = day * 7;
							var month = day * 30;
							var year = month * 12;
			
							var time1 = new Date().getTime(); //当前的时间戳
							console.log("当前时间", time1);
			
							// 对时间进行毫秒单位转换
							var time2 = new Date(stringTime).getTime(); //指定时间的时间戳
			
							console.log("传过来的时间", time2);
			
							var time = time1 - time2;
							console.log("计算后的时间", time);
			
							var result = null;
							// if (time < 0) {
							// 	// alert("传过来的时间的时间不能晚于当前时间！");
							// 	result = stringTime;
							// } else if (time / year >= 1) {
							// 	result = parseInt(time / year) + "年前";
							// } else if (time / month >= 1) {
							// 	result = parseInt(time / month) + "月前";
							// } else if (time / week >= 1) {
							// 	result = parseInt(time / week) + "周前";
							// } else if (time / day >= 1) {
							// 	result = parseInt(time / day) + "天前";
							// } else if (time / hour >= 1) {
							// 	result = parseInt(time / hour) + "小时前";
							// } else if (time / minute >= 1) {
							// 	result = parseInt(time / minute) + "分钟前";
							// } else {
							// 	result = "刚刚";
							// }
							
							if (time < 0) {
								// alert("传过来的时间的时间不能晚于当前时间！");
								result = -1;
							} else if (time / day >= 0) {
								result = parseInt(time / day);//多少天前
							}
							console.log("多少天前", result);
							return result;
						},
			

		},
		

		// 下拉刷新 
		onPullDownRefresh() {
			this.page = 1
			this.myOrderCoupon()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		// 上拉加载更多
		onReachBottom() {
			// this.page++;
			this.myOrderCoupon()
		},
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #F4F5F7;
		padding-top: 20rpx;
		
	}
.jtImg{
	width: 12rpx;height: 20rpx;
	margin-top: 10rpx;
}
.screenBox{
		background: #FFFFFF;
		margin-bottom: 20rpx;
		position: fixed;
		width: 100vw;
		top: 0;left: 0;
	}
     .screenName{
		 padding: 24rpx;font-size: 28rpx;
		     display: flex;
		     justify-content: space-between;
	 }
	.itemHistory {
		margin: 0rpx 24rpx 20rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
	.topBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dan {
		font-size: 24rpx;
		
		color: #999999;
	}
	.stateBox{
		display: flex;
	}
	.danState{
		font-size: 24rpx;
		color: #999999;
		
	}
	.danState2{
		font-size: 24rpx;
		    color: #00A040;
	}
	.danState3{
		font-size: 24rpx;
		color: #FF4F00;
	}
	.time {
		font-size: 24rpx;
		color: #999999;
	}

	.carPlate {
		margin: 20rpx 0rpx 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.plateBox {
		display: flex;
	}
	.plate {
		font-size: 30rpx;
		color: #3C3C3C;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.mileage {
		font-size: 24rpx;
		color: #F19D01;
		padding: 0rpx 10rpx;
		border: 1px solid #F19D01;
		border-radius: 4rpx;
		height: 33rpx;
	}
	.price{
		font-size: 32rpx;
		font-weight: 500;
		color: #FF0000;
	}
	.itemN {
		margin-top: 15rpx;
		display: flex;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.shopName{
		color: #666666;
		font-size: 24rpx;
		margin-top: 15rpx;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.itemContent {
		color: #666666;
		font-size: 24rpx;
		
	}
	.bottom{
		padding-top: 20rpx;
		border-top: 1rpx solid #EEEEEE;
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx;
		margin-left: -24rpx;
		margin-right: -24rpx;
	}
	
	.ping{
		text-align: center;
		color: #666666;
		width: 150rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		margin-right: 24rpx;
	}
	.kan{
		text-align: center;
		color: #666666;
		width: 150rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		margin-right: 24rpx;
	}
	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
	.authorizBox{
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
		}
		.authorizCont{
			margin-top: 30vh;
			width: 564rpx;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-left: 93rpx;
			position: relative;
		}
		.authorizCloseImg{
			width: 62rpx;
			height: 62rpx;
		}
		.sqLogoBox{
			width: 180rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 90rpx;
			text-align: center;
			position: absolute;
			top: -50rpx;
			left: 192rpx;
		}
		.authorizName{
			color: #333333;
			line-height: 42rpx;
			font-size: 30rpx;
			text-align: center;
			padding-top: 58rpx;
		}
		.authorizMs{
			color: #999999;
			line-height: 36rpx;
			font-size: 26rpx;
			width: 452rpx;
			padding-top: 24rpx;
			text-align: center;
			margin-left: 56rpx;
		}
		.authorizContbutton{
			width: 422rpx;
			height: 88rpx;
			background: #D53533;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size:30rpx;
			color: #FFFFFF;
			margin-top: 62rpx;
			margin-left:71rpx;
		}
</style>