BD-LDBD-UNI/components/Card.vue

<template>
	<view class="card-view">
		<view class="classHead">
			<view class="classBorder">

			</view>
			<view class="classTitle">
				{{titles}}
			</view>
		</view>
		<view class="classBody" @tap="routerTo(titles)">
			<view style="display: flex;align-items: center;">
				<view style="display: flex;align-items: center;" v-if="titles=='附近门店' || titles=='服务门店'">
					<image v-if="data.logoUrl" class="classImg" :src="baseImagePath + data.logoUrl"></image>
					<image v-else class="classImg" :src="require('../static/moren-mendian.png')"></image>
				</view>
				<view style="display: flex;align-items: center;" v-else>
					<image v-if="data.brandLogo" class="classImg" :src="baseImagePath+data.brandLogo"></image>
					<image v-else class="classImg" :src="require('../static/morentu.png')"></image>
				</view>
				<view style="padding: 0 0 0 30rpx;display: flex;flex-direction: column;"
					v-if="titles=='附近门店' || titles=='服务门店'">
					<view v-if="data.name">
						<view class="classBodyHead">
							{{data.name}}
						</view>
						<view v-if="titles=='服务门店'" class="classBodyContent"
							style="display: flex;align-items: baseline;">
							<image class="location" :src="require('../static/address.png')"></image>
							<view class="locationNum">
								据您{{data.distance}}km
							</view>
						</view>
						<view v-else-if="titles=='附近门店'" class="classBodyContent">
							{{data.contacts}}
						</view>
					</view>
					<view v-else style="height: 100%;display: flex;align-items: center;">
						<view class="chooseView">
							请选择门店
						</view>
					</view>


				</view>
				<view style="padding: 0 0 0 30rpx;" v-else>
					<view v-if="data.carNumber!=null">
						<view class="carBodyHead classBodyHead">
							<view style="display: flex;justify-content: left;">
								<image class="carImg" :src="require('../static/car.png')"></image>
							<span>{{data.carNumber}}</span>
							</view>
							
							<view class="vehicleBorder"></view><span>{{data.carMadelLevel}}</span>
						</view>

						<view class="classBodyContent">
							{{data.carModelName}}
						</view>
					</view>
					<view v-else style="height: 100%;display: flex;align-items: center;">
						<view class="chooseView">
							请选择车辆
						</view>
					</view>
				</view>
			</view>
			<view class="viewRight">
				<image class="classChoose" :src="require('../static/choose.png')">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				categoryCurrent: 0, //分类轮播下标
				baseImagePath: this.baseImagePath
			};
		},
		props: {
			data: {
				type: Object,
				default: function() {
					return {};
				}
			},
			titles: {
				type: String,
				default: ""
			},
			page: {
				type: String,
				default: ''
			}
		},
		methods: {
			// 路由跳转
			routerTo(item) {
				console.log(item);
				console.log('page', this.page);
				if (item == "附近门店" || item == "服务门店") {
					this.$yrouter.push({
						path: "/pages/preCarWash/chooseShop/index?type=" + this.page
					});
				} else if (item == "车辆信息" || item == "预约车辆" || item == "使用车辆") {

					this.$yrouter.push({
						path: "/pages/preCarWash/chooseCar/index?id=" + this.data.id
					});
				}
			}
		}
	}
</script>

<style>
	.location {
		width: 23rpx;
		height: 23rpx;
		padding-right: 10rpx;
	}

	.locationNum {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 31rpx;
	}

	.card-view {
		width: 94%;
		height: 239rpx;
		margin-left: 3%;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 28rpx;
	}

	.classHead {
		display: flex;
		padding-top: 28rpx;
		width: 100%;
		height: 28rpx;
	}

	.classBorder {
		width: 5rpx;
		height: 28rpx;
		background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
		border-radius: 3rpx;
	}

	.classTitle {
		height: 25rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		padding-left: 28rpx;
		line-height: 28rpx;
	}

	.classBody {
		display: flex;
		justify-content: space-between;
		padding: 28rpx;
		padding-top: 0rpx;
		align-items: center;
		margin-top: 36rpx;
	}

	.classImg {
		width: 120rpx;
		height: 120rpx;
		/* background: linear-gradient(135deg, #D10498 0%, #D21728 100%); */
		border-radius: 8rpx;
	}

	.classBodyHead {
		height: 31rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 31rpx;
	}

	.classBodyContent {
		width: 370rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 31rpx;
		padding-top: 22rpx;
	}

	.viewRight {
		height: 100%;
		/* line-height: 183rpx;
		margin-top: -28rpx;
		margin-left: 100rpx; */
	}

	.classChoose {
		width: 15rpx;
		height: 23rpx;
	}

	.carBodyHead {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.vehicleBorder {
		width: 1rpx;
		height: 20rpx;
		background: #DBDBDB;
		margin-left: 15rpx;
		margin-right: 18rpx;
	}

	.carImg {
		width: 33rpx;
		height: 27rpx;
		margin-right: 13rpx;
	}

	.chooseView {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 42rpx;
	}
</style>