weCom/pages/index/consumption.vue

<template>
	<view class="content">
		<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">
			<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">
			<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.ReceiptMoney}}</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">
					<span>查看消费明细</span>
				</view>
				
				
			</view>
		</view>
	 
		<uni-popup ref="popup" type="bottom" >
			<view class="popupBox">
			  <view class="popupTitleBox">
				  <view class="popupTitle">消费明细</view>
				  <image src="../../static/img/cha.png" mode="" class="chaImg"></image>
			  </view>
			  <view class="popupCp">鲁A9JK82</view>
			  <view class="popupLcBox">
				  <view class="popupLc">进店里程：<span style="color: #3C3C3C;">12233km</span> </view>
				  <view class="shishouamount">实收金额：<span style="color: #FF0000;">2030.43</span> </view>
			  </view>
			  
			  <view class="plineBox">
				  <view class="pline">
					  <view class="tableTop">
						  <view class="w50">项目信息</view>
						  <view class="w25">工时</view>
						  <view class="w25">金额</view>
					  </view>
					  <view class="tableLine">
						  <view class="w50">
							  <view class="tableName">
								  <view class="ka">卡</view>
								  <view class="itemname">项目名称</view>
							  </view>
						  </view>
						  <view class="w25">
							  <view class="tableNum">12.00</view>
						  </view>
						  <view class="w25">
							  <view class="tableNum">2312.22</view>
						  </view>
					  </view>
					  <view class="tableLine">
							  <view class="w50">
								  <view class="tableName">
									  <view class="itemname">奖金元</view>
								  </view>
							  </view>
							  <view class="w25">
								  <view class="tableNum">12.00</view>
							  </view>
							  <view class="w25">
								  <view class="tableNum">2312.22</view>
							  </view>
					  </view>
					  <view class="tableLine">
						  <view class="w50">
							  <view class="tableName">
								  <view class="itemname">奖金元</view>
							  </view>
							  <view class="remarks">商品备注有显示，没有不显示行</view>
						  </view>
						  <view class="w25">
							  <view class="tableNum">12.00</view>
						  </view>
						  <view class="w25">
							  <view class="tableNum">2312.22</view>
						  </view>
					  </view>
				  </view>
			  </view>
			  
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 customerId:'',
				 list:[],
				 array:'',
				 nodataShow:false,
				 index:0,
				 plateNumber:'',
			}
		},
		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(){
				this.$http('enterprise/wechat/listIntegralInfoByCustomerId', {
				   customerID:this.customerId,
				   unionID:'EEADACCD-8A19-499D-8AD7-6975D2C93243',
				   page:1,
				   limit:50,
				   plateNumber:this.plateNumber
				}, 'GET').then(res => {
				    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(){
			    this.$refs.popup.open('bottom')
		   }
		}
	}
</script>

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

.cBox{
	padding: 0 24rpx;
}
.line{
	padding: 30rpx 0rpx;background: #FFFFFF;
border-radius: 10rpx;margin-top: 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{
	height: 36rpx;
	border-radius: 4rpx;
	border: 1rpx solid #DDDDDD;
	line-height: 36rpx;
	padding: 0 10rpx;
	margin-left: 20rpx;
}
.cp{
	line-height: 36rpx;
	font-size: 30rpx;
	color: #333333;
}
.span1{
	line-height: 36rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #FF0000;
}
.lineLine1{
	font-size: 24rpx;
	color: #666666;
	line-height: 33rpx;
	padding-top: 16rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.line2{
	font-size: 24rpx;
	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: 24rpx;
	color: #3C3C3C;
	line-height: 33rpx;
	padding: 20rpx;
	padding-bottom: 0;
}
 .popupBox{
		width: 750rpx;
		height: 80vh;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;
	}
	.popupTitleBox{
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}
	.popupTitle{
		font-size: 30rpx;
		color: #3C3C3C;
		line-height: 42rpx;
	}
	.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: 24rpx;
		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{
		padding: 24rpx;
	}
	.pline{
		margin-bottom: 20rpx;
		background: #F4F5F7;
		border-radius: 10rpx;
	}
	.w50{
		width: 50%;
	}
	.w25{
		width: 25%;
		text-align: right;
	}
	.tableName{
		display: flex;
		
	}
	.ka{
		width: 28rpx;
		height: 28rpx;
		background: #FF8113;
		border-radius: 4rpx;
		text-align: center;
		line-height: 28rpx;
		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;
	}
</style>