unimall/unimall-app/pageB/car/mycar_detail.vue

<template>
	<view class="container">
		<view class="introduce-section">
			<view v-for="(item, index) in carInfo" :key="index" class="guess-item">
				<view class="grid col-4 car-title">
					<view class="cu-tag radius line-green">{{item.carNo}}</view>
					<view class='cu-tag radius line-green'>{{item.driver}}</view>
					<view class='cu-tag radius line-green'>{{item.driverPhone}}</view>
				</view>
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-if="item.personNoImg != ''" @tap="ViewImage" :data-url="item.personNoImg">
					 <image :src="item.personNoImg" mode="aspectFit"></image>
					</view>
					<view class="bg-img" v-if="item.personNoImg1 != ''" @tap="ViewImage" :data-url="item.personNoImg1">
					 <image :src="item.personNoImg1" mode="aspectFit"></image>
					</view>
					<view class="bg-img" v-if="item.driverNoImg != ''" @tap="ViewImage" :data-url="item.driverNoImg">
					 <image :src="item.driverNoImg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-if="item.carNoImg != ''" @tap="ViewImage" :data-url="item.carNoImg">
					 <image :src="item.carNoImg" mode="aspectFit"></image>
					</view>
					<view class="bg-img" v-if="item.carNoImg1 != ''" @tap="ViewImage" :data-url="item.carNoImg1">
					 <image :src="item.carNoImg1" mode="aspectFit"></image>
					</view>
					<view class="bg-img" v-if="item.driverNoImg1 != ''" @tap="ViewImage" :data-url="item.driverNoImg1">
					 <image :src="item.driverNoImg1" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import {  
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				carInfo:[]
			};
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onShow() {
		},
		onLoad(options) {
			const that = this
			uni.showLoading({
				title: '正在加载',
				mask:true
			})
			that.$api.request('tran', 'getMyCarListByCarNo', {
				carNo: options.carNo
			}, failres => {
				that.$api.msg(failres.errmsg)
				uni.hideLoading()
			}).then(res => {			
				that.carInfo = res.data
				uni.hideLoading()
			})
		},
		
		methods: {
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current:0,
					urls: img
				});
			},
		}
	}
</script>

<style lang='scss'>
	.car-title{
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	/* 销售信息 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;
		padding-bottom: 100upx;
		.guess-item {
			padding-bottom: 20upx;
			border-bottom: 1px solid #ccc;
		}
		.title {
			font-size: 28upx;
			color: $font-color-dark;
			font-weight:bold;
			height: 50upx;
			line-height: 50upx;
			flex:2.5;
		}
		.title-tip {
			flex:1;
		}
		.price-box {
			display: flex;
			align-items: baseline;
			height: 70upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}
	
		.price {
			font-size: $font-lg + 2upx;
		}
	
		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}
	
		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}
	
		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;
	
			view {
				flex: 1;
			}
		}
	}
</style>