weCom/pages/index/consumption.vue

<template>
	<view class="content">
		<view style="margin-top: -26rpx;"></view>
		<view class="topbox">
			<view class="top">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="screenName"> <span>车牌号：{{array[index]}}</span> 
					  <image src="../../static/img/icon_arrow_down.png" mode="" class="carUpimg"></image>
					</view>
				</picker>
				<!-- <span>全部车辆</span>
				<image class="carUpimg" src="../../static/img/icon_arrow_down.png" mode=""></image> -->
			</view>
		</view>
		<view  class="nodataBox" v-show="nodataShow||list.length==0">
			<image src="http://dmsphoto.66km.com.cn/thFiles/3C95A4C5-73F8-4B34-902B-703B8A0825C9.png" mode="widthFix" class="nodataImg"></image>
			<view class="noTxt">暂无数据</view>
		</view>
		<view class="cBox"  v-show="!nodataShow&&list.length!=0">
			<view class="line" v-for="(item,index) in list">
				<view class="lineTop">
					<view class="ltLeft">
						<view class="cp">{{item.PlateNumber}}</view>
						<view class="km" v-if="item.CurrentMileage">{{item.CurrentMileage}}km</view>
					</view>
					<view class="ltRgiht">
						<span class="span1">¥{{item.RecvedMoney}}</span>
					</view>
					
				</view>
				<view class="lineCont">
					<view class="lineLine1">消费门店：{{item.ShopName}}</view>
					<view class="line2">
						<view>日期：{{item.PickTime}}</view>
						<view>接待人员：{{item.PickName}}</view>
					</view>
					<view class="line2">
						<view>车牌号：{{item.PlateNumber}}</view>
						<view style="color: #999999;" v-if="item.PayState == 0">未结算</view>
						<view style="color: #00A040;" v-if="item.PayState == 2">已结算</view>
					</view>
					<view class="lineLine1">备注：{{item.Comment}}</view>
				</view>
				<view class="lineBottom" @click="seeData(item)">
					<span>查看消费明细</span>
					<image class="mxJt" src="../../static/img/big_rightArrow.png" mode=""></image>
				</view>
				
				
			</view>
		</view>
	 <view style="height: 40rpx;background: #FFFFFF;"></view>
		<uni-popup ref="popup" type="bottom" >
			<view class="popupBox">
			  <view class="popupTitleBox">
				  <view class="chaImg"></view>
				  <view class="popupTitle">消费明细</view>
				  <image src="../../static/img/cha.png" mode="" class="chaImg" @click="gaunbi"></image>
			  </view>
			  <view class="popupCp">{{carData.PlateNumber}}</view>
			  <view class="popupLcBox">
				  <view class="popupLc">进店里程：<span style="color: #3C3C3C;" v-if="carData.CurrentMileage">{{carData.CurrentMileage}}km</span> </view>
				  <view class="shishouamount">实收金额：<span style="color: #FF0000;">{{carData.RecvedMoney}}</span> </view>
			  </view>
			  <view class="ps">
				  <view class="plineBox" v-if="lineData.billItemDetailList.length" >
					  <view class="pline">
						  <view class="tableTop">
							  <view class="w50">项目信息</view>
							  <view class="w25">工时</view>
							  <view class="w25">金额</view>
						  </view>
						  <view class="tableLine"  v-for="(item,index) in lineData.billItemDetailList">
							  <view class="w50">
								  <view class="tableName">
									  <view class="ka"  v-if="item.cardDetailID">卡</view>
									  <view class="ka" v-if="item.servicePackID">套餐</view>
									  <view class="itemname">{{item.itemName}}</view>
								  </view>
								   <view class="remarks"v-if="item.comment">{{item.comment}}</view>
							  </view>
							  <view class="w25">
								  <view class="tableNum">{{item.saleQty}}</view>
							  </view>
							  <view class="w25">
								  <view class="tableNum">{{item.realMoney}}</view>
							  </view>
						  </view>
					  </view>
				  </view>
				  <view class="plineBox" v-if="lineData.billPartDetailList.length" >
						  <view class="pline">
							  <view class="tableTop">
								  <view class="w50">商品信息</view>
								  <view class="w25">数量</view>
								  <view class="w25">金额</view>
							  </view>
							  <view class="tableLine"  v-for="(item,index) in lineData.billPartDetailList">
								  <view class="w50">
									  <view class="tableName">
										  <view class="ka" v-if="item.cardDetailID">卡</view>
										  <view class="ka" v-if="item.servicePackID">套餐</view>
										  <view class="itemname">{{item.goodsName}}</view>
									  </view>
									   <view class="remarks"v-if="item.comment">{{item.comment}}</view>
								  </view>
								  <view class="w25">
									  <view class="tableNum">{{item.saleQty}}</view>
								  </view>
								  <view class="w25">
									  <view class="tableNum">{{item.realMoney}}</view>
								  </view>
							  </view>
						  </view>
				  </view>
				  <view class="plineBox" v-if="lineData.billSurchargesList.length" >
					  <view class="pline">
						  <view class="tableTop">
							  <view class="w75">附加费</view>
							
							  <view class="w25">金额</view>
						  </view>
						  <view class="tableLine"  v-for="(item,index) in lineData.billSurchargesList">
							  <view class="w75">
								  <view class="tableName">
									  <view class="itemname">{{item.surchargesName}}</view>
								  </view>
							
							  </view>
							  
							  <view class="w25">
								  <view class="tableNum">{{item.surchargesMoeny}}</view>
							  </view>
						  </view>
					  </view>
				  </view>
			  </view>
			  
			
			  
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 customerId:'',
				 list:[],
				 array:[],
				 nodataShow:false,
				 index:0,
				 plateNumber:'',
				 lineId:'',
				 lineData:{
					 billItemDetailList:[],
					 billPartDetailList:[],
					 billSurchargesList:[]
				 },
				 carData:'',
			}
		},
		onLoad() {

		},
		methods: {
			getdata(){
				    var that=this;
					this.customerId=uni.getStorageSync('customerId')
					this.array=uni.getStorageSync('PlateNumberArr')
					this.array.unshift('全部')
					if(!this.customerId){
						this.nodataShow=true
					}else{
						this.getList()
					}
					
			},
			getList(){
				uni.showLoading({
				 	title: '加载中'
				});
				this.$http('enterprise/wechat/listIntegralInfoByCustomerId', {
				   customerID:this.customerId,
				   unionID:'EEADACCD-8A19-499D-8AD7-6975D2C93243',
				   page:1,
				   limit:50,
				   plateNumber:this.plateNumber
				}, 'GET').then(res => {
					uni.hideLoading();
				    this.list=res.data.Items
				})
			},
			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.getList()
			},
           seeData(item){
			    this.lineId=item.ID;
				this.carData=item
				this.maintenanceOrderDetail()
			    this.$refs.popup.open('bottom')
		   },
		   maintenanceOrderDetail(){
			   this.$http('enterprise/wechat/maintenanceOrderDetail', {
			     id:this.lineId
			   }, 'GET').then(res => {
			      this.lineData=res.data  
			   })
		   },
		   gaunbi(){
			   this.$refs.popup.close()
		   }
		}
	}
</script>

<style scoped>
.topbox{
	padding: 24rpx;background: #fff;
}
.carUpimg{
		width: 26rpx;height: 16rpx;
		margin-left: 10rpx;
	}

.cBox{
	padding: 0 24rpx;
	padding-bottom: 40rpx;
}
.line{
	padding: 30rpx 0rpx;background: #FFFFFF;
border-radius: 10rpx;margin-top: 20rpx;
padding-bottom: 20rpx;
}
.lineTop{
	border-bottom: 1px solid #EEEEEE;
	display: flex;justify-content: space-between;
	padding-bottom: 22rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.ltLeft{
	display: flex;
}
.km{
	border-radius: 4rpx;
	border: 2rpx solid #DDDDDD;
	/* height: 36rpx; */
	padding: 2rpx 10rpx;
	margin-left: 20rpx;
	/* line-height: 40rpx; */
}
.cp{
	line-height: 40rpx;
	font-size: 30rpx;
	color: #333333;
	font-weight: 600;
}
.span1{
	line-height: 36rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #FF0000;
}
.lineLine1{
	font-size: 26rpx;
	color: #666666;
	line-height: 33rpx;
	padding-top: 16rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.line2{
	font-size: 26rpx;
	color: #666666;
	line-height: 33rpx;
	padding-top: 16rpx;
	display: flex;
	justify-content: space-between;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.lineCont{
	border-bottom: 1px solid #EEEEEE;
	padding-bottom: 16rpx;
}
.lineBottom{
	font-size: 26rpx;
	color: #3C3C3C;
	line-height: 33rpx;
	padding: 20rpx;
	padding-bottom: 0;
	display: flex;
	justify-content: space-between;
}
 .popupBox{
		width: 750rpx;
		height: 80vh;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: fixed;
		    left: 0;
		    bottom: 0;
	}
	.popupTitleBox{
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}
	.popupTitle{
		font-size: 30rpx;
		color: #3C3C3C;
		line-height: 42rpx;
		font-weight: 600;
	}
	.chaImg{
		width: 27rpx;height: 27rpx;margin-top: 9rpx;
	}
	.popupCp{
		font-weight: 500;
		font-size: 30rpx;
		color: #3C3C3C;
		padding-left: 30rpx;
	}
	.popupLcBox{
		display: flex;justify-content: space-between;
		font-size: 26rpx;
		color: #999999;
		padding: 10rpx 30rpx 34rpx 30rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.tableTop{
		display: flex;font-size: 26rpx;
        color: #999999;
		padding: 20rpx 20rpx 0rpx 20rpx;
	}
	.tableLine{
		display: flex;
		border-bottom: 1px solid #EEEEEE;
		padding: 20rpx ;
	}
	.tableLine:last-child{
		border-bottom:none;
	}
	.plineBox{
		margin: 20rpx 24rpx 0 24rpx;
		    background: #f9f9f9;
			border-radius: 10rpx;
	}
	.pline{
		margin-bottom: 20rpx;
		background: #f9f9f9;
		border-radius: 10rpx;
	}
	.w50{
		width: 50%;
	}
	.w25{
		width: 25%;
		text-align: right;
	}
	.w75{
		width: 75%;
	}
	.tableName{
		display: flex;
		
	}
	.ka{
		padding: 0 4rpx;
		height: 28rpx;
		background: #FF8113;
		border-radius: 4rpx;
		text-align: center;
		line-height: 30rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		margin-right: 10rpx;
	}
	.itemname{
		font-size: 26rpx;	line-height: 28rpx;
		color: #3C3C3C;
	}
	.tableNum{
		font-size: 26rpx;	line-height: 28rpx;
		color: #3C3C3C;
	}
	.remarks{
		font-size: 24rpx;
		color: #999999;
		line-height: 33rpx;
		padding-top: 10rpx;
	}
	.nodataImg{
	  width: 400rpx;
	  padding-top: 100rpx;
	}
	.noTxt{
		font-size: 32rpx;
		color: #999999;
		padding-top: 50rpx;
	}
	.nodataBox{
		text-align: center;background: #fff;
	}
	.mxJt{
		width: 30rpx;height: 30rpx;
	}
	.ps{
		height:calc(80vh - 250rpx) ;
		overflow-y: auto;
	}
</style>