weCom/pages/index/consumption.vue

<template>
	<view class="content">
		<view class="topbox">
			<view class="top">
				<span>全部车辆</span>
				<image class="carUpimg" src="../../static/img/icon_arrow_down.png" mode=""></image>
			</view>
		</view>
		<view class="cBox">
			<view class="line">
				<view class="lineTop">
					<view class="ltLeft">
						<view class="cp">鲁A12345</view>
						<view class="km">1000km</view>
					</view>
					<view class="ltRgiht">
						<span class="span1">¥759.00</span>
					</view>
					
				</view>
				<view class="lineCont">
					<view class="lineLine1">消费门店：店名一</view>
					<view class="line2">
						<view>日期：2019-09-12</view>
						<view>接待人员：王二</view>
					</view>
					<view class="line2">
						<view>车牌号：鲁A12345</view>
						<view style="color: #00A040;">已结算</view>
					</view>
					<view class="lineLine1">备注：备注信息有的话就全展示出来，换行展示，没有直接不显示这行，这是维修单</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 {
				
			}
		},
		onLoad() {

		},
		methods: {
           seeData(){
			    this.$refs.popup.open('bottom')
		   }
		}
	}
</script>

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

.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;
	}
</style>