wechat_yxcl/pages/serviceAreaReimbursement/components/travelCard/travelCard.vue

<template>
	<view class="trip-detail" >
		<view class="trip-detail-top">
			<view class="uni-flex" style="justify-content: space-between;">
				<text class="span24">{{$util.cutDate(item.START_DATE,'YYYY-MM-DD')}}</text>
				<text class="span24">{{$util.cutDate(item.ARRIVE_DATE,'YYYY-MM-DD')}}</text>
			</view>
			<view class="trip-detail-traffic">
	
				<view class="trip-addr">{{item.START_PLACE}}</view>
	
				<view class="jt-logo">
					<image v-if="item.VEHICLE_TYPE==='出租车'" src="/static/images/expense/taxi.png" mode="aspectFit" ></image>
					<image v-else-if="item.VEHICLE_TYPE==='飞机'" src="/static/images/expense/fj.png" mode="aspectFit" ></image>
					<image v-else-if="item.VEHICLE_TYPE==='高铁'|| item.VEHICLE_TYPE==='动车'" src="/static/images/expense/gt.png" mode="aspectFit" ></image>
					<image v-else-if="item.VEHICLE_TYPE==='火车'" src="/static/images/expense/hc.png" mode="aspectFit" ></image>
					<image v-else-if="item.VEHICLE_TYPE==='轮船'" src="/static/images/expense/lc.png" mode="aspectFit" ></image>
					<image v-else src="/static/images/expense/qc.png" mode="aspectFit" ></image>
			
				</view>
		
				<view class="trip-addr" style="text-align: right;">{{item.ARRIVE_PLACE}}</view>
			</view>
			<view  class="uni-flex ai-center jc-between" >
				<view class="uni-flex ai-center" >
					<div v-if="cardType==1 && item.SUBSIDY_POPULATION"  class="uni-flex ai-center" style="margin-right: 24rpx;">
						<image src="/static/images/expense/rs.png" mode="aspectFit" style="width: 20rpx;height: 24rpx;margin-right: 8rpx;vertical-align: middle;"></image>
						<text class="text63 span24">{{item.SUBSIDY_POPULATION||0}} 人</text>
					</div>
					<div  class="uni-flex ai-center">
						
						<image src="/static/images/expense/pj.png" mode="aspectFit" style="width: 30rpx;height: 24rpx;margin-right: 8rpx;vertical-align: middle;"></image>
						<text class="text63 span24">{{item.BILL_COUNT||0}} 张</text>
					</div>
				</view>
				<view class="trip-price">交通<span>￥{{item.BILL_AMOUNT ? $util.fmoney(item.BILL_AMOUNT,2):'0.00'}}</span></view>
			</view>
		</view>
		<block v-if="cardType==1">
			
			<view class="uni-flex card-bottom" v-if="item.SUBSIDY_DAY || item.URBAN_TRAFFIC_ALLOWANCE || item.SUBSIDY_AMOUNT">
				
				<view style="flex:1;" v-if="item.SUBSIDY_DAY"><text class="text-title">补贴天数：</text><text>{{item.SUBSIDY_DAY||'暂无'}}</text></view>
				<view  style="flex:1;" v-if="item.URBAN_TRAFFIC_ALLOWANCE"><text class="text-title">补贴标准：</text><text>{{item.URBAN_TRAFFIC_ALLOWANCE||'暂无'}}</text></view>
				<view  style="flex:1;text-align: right;" v-if="item.SUBSIDY_AMOUNT"><text class="text-title">补贴金额：</text><text>{{item.SUBSIDY_AMOUNT||'暂无'}}</text></view>
				
			</view>
		</block>
		<block v-else>
			
			<view class=" card-bottom" v-if="item.EXPENSE_ITEM || item.OTHER_COST || item.EXPENSEDETAIL_DESC">
				<view class="uni-flex" style="align-items: center;justify-content: space-between;">
					
					<view style="flex:1;" v-if="item.EXPENSE_ITEM"><text class="text-title">制度规定标准：</text><text>{{item.EXPENSE_ITEM||'暂无'}}</text></view>
					<view  style="flex:1;text-align: right;" v-if="item.OTHER_COST"><text class="text-title">实际乘坐标准：</text><text>{{item.OTHER_COST||'暂无'}}</text></view>
				</view>
				
				<view class="uni-flex" style="align-items: flex-start;" v-if="item.EXPENSEDETAIL_DESC"><text class="text-title">备注：</text><text>{{item.EXPENSEDETAIL_DESC||'暂无'}}</text></view>
				
			</view>
		</block>
	</view>
	
</template>

<script>
	export default {
		props: {
			item: Object,
			cardType: {
				default: '1', // 1普通，2 超标准
				type: String
			}
		},
	}
</script>

<style scoped>
	.trip-detail {
		border: 2rpx solid rgb(234, 234, 234);
		box-shadow: 0px 1rpx 8rpx rgb(234, 234, 234);
		border-radius: 14rpx;
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 20rpx 24rpx 20rpx 24rpx;
	}
	
	.trip-detail-top {
		width: 100%;
		
		box-sizing: border-box;
		
	}
	.text63 {
		color: #696969;
		font-size: 24rpx;
	}
	.trip-detail-traffic {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* margin-bottom: 8rpx; */
	}
	
	.trip-detail-traffic>view {
		height: 100%;
	}
	
	.trip-addr {
		font-size: 30rpx;
		flex: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
	
	
	.jt-logo {
		background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAICAYAAAD6KtHFAAAAjElEQVRIie3WIQoCQRQG4G/FIggWi9Fm9hpewCu4V7CKeBejBxCr7Aab51AQ29oMslOdCe+L//zhwYPhVV3XCfm0bXvAHo9UZ/C/cUJCjTPmqUIsKb83lrhi1VeIJZVjihO2vw+xpLJU2OGIyTdsmibbRAE8Me7J71jjNkScd3m9EvkCF2ziuyvbCLMPK6EWTFmpDO0AAAAASUVORK5CYII=") no-repeat center 36rpx;
		background-size: 100%;
		width: 50px;
		text-align: center;

		vertical-align: top;
		display: inline-block;
	}
	
	
	.trip-price {
		color: #6cc09c;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.trip-price span {
	
		color: #ec8538;
		font-size: 28rpx;
		margin-left: 10rpx;
	}
	.jt-logo image {
		width: 78rpx;
		height: 50rpx;
	}
	.text-title {
		color: #888;
	}
	.card-bottom {
		align-items: center; 
		border-top: 2rpx dashed #eee;
		padding-top: 12rpx;
		margin-top: 8rpx;
	}
	.card-bottom text {
		font-size: 24rpx;
	}
</style>