BD-LDBD-UNI/pages/maintenance/setMeal/setMealDetail/index.vue

<template>
	<view class="setMealDetail">
		<image :src="'https://biaodianfuhao.oss-cn-beijing.aliyuncs.com/'+setMeal.imgUrl" alt="">
			<view class="header-card">
				<view class="header">
					{{setMeal.name}}
				</view>
				<view class="content">
					{{setMeal.title}}
				</view>
				<view class="bottom">
					<view class="left">
						{{setMeal.endTime}}
					</view>
					<view class="right">
						已售{{setMeal.buyNum}}
					</view>
				</view>
			</view>
			<!-- 套餐项目 -->
			<view class="servicesAvailable">
				<view class="header">
					<view class="title">
						套餐项目
					</view>
					<view class="border"></view>
				</view>
				<view class="body" v-for="(item, index) in setMeal.serviceList" :key="index">
					<view class="title">
						{{item.serviceName}}
					</view>
					<view class="border">

					</view>
					<view class="length">
						×{{item.sum||0}}
					</view>
				</view>
			</view>
			<!-- 可用门店 -->
			<view class="shop">
				<view class="header">
					<view class="title">
						可用门店
					</view>
					<view class="border"></view>
				</view>
				<view class="flexView">
					<view class="body" v-for="(item, index) in setMeal.shopList" :key="index">
						<image :src="'https://biaodianfuhao.oss-cn-beijing.aliyuncs.com/'+item.logoUrl" alt="">
							<view class="subbody">
								<view class="title">
									{{item.name}}
								</view>
								<view class="content">
									<view class="location">
										{{item.address}}
									</view>
									<view class="right">
										<image :src="require('../../../../static/address.png')" alt="">
											<view class="km">
												{{item.distance}}km
											</view>
									</view>
								</view>
							</view>
					</view>
				</view>
			</view>
			<!-- 套餐详情 -->
			<view class="detail">
				<view class="header">
					<view class="title">
						套餐详情
					</view>
					<view class="border"></view>
				</view>
				<view class="content">
					{{setMeal.title}}
				</view>
			</view>
			<view style="height: 200rpx;">

			</view>
			<!-- 底部按钮 -->
			<view class="bottomBtn">
				<view class="leftView">
					<view class="chooseNum">
						<view style="font-size: 26rpx;">
							￥
						</view>
						<view style="font-size: 56rpx;">
							{{price}}
						</view>
					</view>
				</view>
				<view class="rightView" @click="routerTo()">
					立即购买
				</view>
			</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		packageDetail
	} from "@/api/maintain.js";
	import {
		getUserCar
	} from "@/api/shop.js"
	export default {
		components: {},
		data() {
			return {
				setMeal: {},
				shopList: [{
						name: "海通洗车华南店",
						url: "https://biaodianfuhao.oss-cn-beijing.aliyuncs.com/1539087000475328514.png",
						location: "大连市甘井子区友好路236号 拷贝 3",
						km: "8.9km"
					},
					{
						name: "海通洗车华南店",
						url: "https://biaodianfuhao.oss-cn-beijing.aliyuncs.com/1539087000475328514.png",
						location: "大连市甘井子区友好路236号 拷贝 3",
						km: "8.9km"
					},
					{
						name: "海通洗车华南店",
						url: "https://biaodianfuhao.oss-cn-beijing.aliyuncs.com/1539087000475328514.png",
						location: "大连市甘井子区友好路236号 拷贝 3",
						km: "8.9km"
					},
					{
						name: "海通洗车华南店",
						url: "https://biaodianfuhao.oss-cn-beijing.aliyuncs.com/1539087000475328514.png",
						location: "大连市甘井子区友好路236号 拷贝 3",
						km: "8.9km"
					},
				],
				servicesAvailableList: [{
						name: "普通洗车",
						list: [{
								name: "xxxxxxx"
							},
							{
								name: "xxxxxxx"
							},
						]
					},
					{
						name: "常规保养",
						list: [{
								name: "xxxxxxx"
							},
							{
								name: "xxxxxxx"
							},
						]
					},
					{
						name: "二级保养",
						list: [{
								name: "xxxxxxx"
							},
							{
								name: "xxxxxxx"
							},
						]
					},
					{
						name: "钣金修复",
						list: [{
								name: "xxxxxxx"
							},
							{
								name: "xxxxxxx"
							},
							{
								name: "xxxxxxx"
							},
						]
					},
					{
						name: "磨泥打蜡",
						list: [{
							name: "xxxxxxx"
						}, ]
					},
				],
				price: "",
				longitude: app.globalData.longitude,
				latitude: app.globalData.latitude,
				userCar:{}
			};
		},
		onLoad(options) {
			// this.setMeal = JSON.parse(options.item);
			console.log(options);
			this.$nextTick(()=> {
				console.log(options);
				this.packageDetail(JSON.parse(options.item).id)
				this.getUserCar();
			});


		},
		methods: {
			getUserCar(){
				getUserCar().then(res=>{
					this.userCar = res.data;
				})
			},
			packageDetail(id) {
				console.log(id);
				packageDetail({
					longitude: this.longitude || "111",
					latitude: this.latitude || "111",
					id: id
				}).then(res => {
					console.log(res);
					this.setMeal = res.data;
					this.price = this.setMeal.carPrice < this.setMeal.suvPrice ? (this.setMeal.carPrice < this
						.setMeal.truckPrice ?
						this.setMeal.carPrice : this.setMeal.truckPrice) : (this.setMeal.suvPrice < this
						.setMeal.truckPrice ?
						this.setMeal.suvPrice : this.setMeal.truckPrice)
						console.log(setMeal.buyNum);
				})
			},
			routerTo(item) {
				if(this.userCar.id == null){
					uni.showToast({
						title: '请添加默认车辆',
						icon: 'none',
						duration: 2000
					});
				}else{
					this.$yrouter.push({
						path: "/pages/maintenance/setMeal/buySetMeal/index?item=" + JSON.stringify(this.setMeal)
					});
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #EDEDED;
	}

	.bottomBtn {
		width: 690rpx;
		height: 110rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 8rpx 17rpx 0px rgba(168, 165, 165, 0.26);
		border-radius: 55rpx;
		margin-left: 30rpx;
		position: fixed;
		bottom: 67rpx;
		z-index: 9998;

		.leftView {
			float: left;
			height: 100%;
			display: flex;
			align-items: center;
			margin-left: 57rpx;

			.chooseNum {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF3C00;
				line-height: 31rpx;
				display: flex;
				align-items: baseline;
			}
		}

		.rightView {
			float: right;
			width: 210rpx;
			height: 108rpx;
			background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
			border-radius: 0 55rpx 55rpx 0;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FEFEFE;
			line-height: 108rpx;
			text-align: center;
		}
	}

	.detail {
		background: #FFFFFF;
		border-radius: 10px;
		margin-top: 20rpx;
		padding: 36rpx 30rpx;

		.header {
			padding-bottom: 36rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 29rpx;
			}

			.border {
				width: 106rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #005BFF 0%, #FFFFFF 100%);
				opacity: 0.6;
			}
		}

		.content {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 36rpx;
		}
	}

	.shop {
		max-height: 514rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 36rpx 30rpx;

		.header {
			padding-bottom: 36rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 29rpx;
			}

			.border {
				width: 106rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #005BFF 0%, #FFFFFF 100%);
				opacity: 0.6;
			}
		}

		.flexView {
			max-height: 420rpx;
			overflow-x: auto;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;

			.body {
				width: 655rpx;
				height: 101rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding-bottom: 36rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.subbody {
					width: 76%;
					padding: 11rpx 21rpx 0rpx 21rpx;

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

					.content {
						padding-top: 21rpx;

						.location {
							width: 350rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 31rpx;
							float: left;
						}

						.right {
							display: flex;
							align-items: center;
							float: right;

							image {
								width: 23rpx;
								height: 23rpx;
							}

							.km {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}
						}
					}
				}
			}
		}

	}

	.servicesAvailable {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 36rpx 30rpx;

		.header {
			padding-bottom: 36rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 29rpx;
			}

			.border {
				width: 106rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #005BFF 0%, #FFFFFF 100%);
				opacity: 0.6;
			}
		}

		.body {
			display: flex;
			padding: 19rpx;
			align-items: center;
			justify-content: space-around;

			.title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 29rpx;
			}

			.border {
				width: 437rpx;
				height: 1rpx;
				border-bottom: 1px dashed #CCCCCC;
			}

			.length {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 29rpx;
			}
		}
	}

	.setMealDetail {
		image {
			width: 100%;
			height: 750rpx;
		}

		.header-card {
			background: #FFFFFF;
			border-radius: 0px 0px 16rpx 16rpx;
			padding: 40rpx 29rpx 35rpx 29rpx;

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

			.content {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 36rpx;
				padding-top: 25rpx;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				padding-top: 37rpx;

				.left {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #005BFF;
					line-height: 55rpx;
				}

				.right {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 55rpx;
				}
			}
		}
	}
</style>