上传预约详情（遗产讲述', '达人同游', '我要跟拍）

pages.json

@@ -91,6 +91,9 @@
 			},
 			{
 				"path": "service/StudyAndPathDetail"
+			},
+			{
+				"path": "service/reservationDetail"
 			}
 		]
 	}],

pages_order/components/list/cardList.vue

@@ -1,6 +1,8 @@
 <template>
 	<view>
-		<view class="card" v-for="(item,index) in 10" :key="index">
+		<view class="card" 
+		@click="$utils.navigateTo(`/pages_order/service/reservationDetail?type=${type}&id=${item.id}`)"
+		v-for="(item,index) in 10" :key="index">
 			<view class="card-img">
 				<image src="../../static/applyRelic/jdz.png" mode="aspectFill"></image>
 			</view>
@@ -30,9 +32,13 @@
 
 <script>
 	export default {
+		props : {
+			type : {
+				default : 0
+			}
+		},
 		data() {
 			return {
-
 			}
 		},
 		methods: {

pages_order/service/following.vue

@@ -5,7 +5,7 @@
 		<view class="following-top-img">
 			<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill" />
 		</view>
-		<cardList />
+		<cardList :type="2"/>
 		<tabber/>
 	</view>
 </template>

pages_order/service/reservationDetail.vue

@@ -0,0 +1,244 @@
+<template>
+	<!-- '遗产讲述', '达人同游'， 我要跟拍 的共同详情页面 -->
+	<view class="page">
+		<navbar :title="titles[type]" leftClick @leftClick="$utils.navigateBack" />
+		
+		<view class="info">
+			<!-- 上面 -->
+			<view class="top">
+				<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill"></image>
+				<view class="left">
+					<view class="title">
+						摄影师协会
+					</view>
+					<view class="left-list">
+						<view>
+							<uv-icon
+							name="star"
+							size="50rpx"
+							></uv-icon>
+							收藏
+						</view>
+						<view>
+							<uv-icon
+							name="star"
+							size="50rpx"
+							></uv-icon>
+							收藏
+						</view>
+						<view>
+							<uv-icon
+							name="star"
+							size="50rpx"
+							></uv-icon>
+							收藏
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 下面 -->
+			<view class="bottom">
+				<view>
+					<image src="../static/reservationDetail/1.png" mode=""></image>
+					<view>
+						预约时间
+					</view>
+				</view>
+				<view>
+					<image src="../static/reservationDetail/2.png" mode=""></image>
+					<view>
+						价格
+					</view>
+				</view>
+				<view>
+					<image src="../static/reservationDetail/3.png" mode=""></image>
+					<view>
+						预约
+					</view>
+				</view>
+			</view>
+		</view>
+	
+		<view class="detail">
+			<view class="content">
+				<view class="thumb-up">
+					<uv-icon
+					name="thumb-up"
+					size="40rpx"
+					color="#B12731"
+					></uv-icon>
+					
+					<text>推荐度</text>  <text>9</text>
+				</view>
+				
+				<view class="text">
+					
+					<view class="line">
+						<view class="left">
+							专业擅长
+						</view>
+						<view class="right">
+							景德镇陶瓷考古研究所资料陈列馆副主任。累德镇交物鉴定小组成员。现为景德镇市第三批市级非物质文化遗产项目景德镇传统陶瓷书法”
+						</view>
+					</view>
+					
+					<view class="line">
+						<view class="left">
+							个人简介
+						</view>
+						<view class="right">
+							景德镇陶瓷考古研究所资料陈列馆副主任。累德镇交物鉴定小组成员。现为景德镇市第三批市级非物质文化遗产项目景德镇传统陶瓷书法”
+						</view>
+					</view>
+					
+				</view>
+			</view>
+			
+			<view class="video-list">
+				<view class="title">
+					讲解现场
+				</view>
+				<view class="list">
+					<view 
+					v-for="(item, index) in 10"
+					:key="index">
+						<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<tabber/>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				titles: ['遗产讲述', '达人同游', '我要跟拍'],
+				type: 0,
+			}
+		},
+		onLoad(args) {
+			this.type = args.type
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.page{
+	.info{
+		.top{
+			display: flex;
+			padding: 40rpx;
+			image{
+				width: 240rpx;
+				height: 280rpx;
+				border-radius: 20rpx;
+				margin-right: 40rpx;
+			}
+			.left{
+				.title{
+					font-size: 32rpx;
+					margin-top: 20rpx;
+				}
+				.left-list{
+					display: flex;
+					font-size: 26rpx;
+					background-color: #fff;
+					border-radius: 20rpx;
+					padding: 20rpx;
+					margin-top: 50rpx;
+					box-shadow: 0 0 10rpx 10rpx #00000010;
+					>view{
+						margin: 20rpx 30rpx;
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						align-items: center;
+					}
+				}
+			}
+		}
+		.bottom{
+			display: flex;
+			justify-content: space-around;
+			image{
+				width: 100rpx;
+				height: 100rpx;
+				margin-bottom: 10rpx;
+			}
+			>view{
+				background-color: #fff;
+				box-shadow: 0 0 10rpx 10rpx #00000010;
+				border-radius: 20rpx;
+				height: 180rpx;
+				width: 180rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+				color: $uni-color;
+			}
+		}
+	}
+	.detail{
+		width: 100%;
+		background-color: #fff;
+		.content{
+			padding: 40rpx;
+			.thumb-up{
+				background-color: #F6F2E7;
+				color: $uni-color;
+				font-size: 28rpx;
+				font-weight: 900;
+				padding: 10rpx 25rpx;
+				display: flex;
+				width: fit-content;
+				border-radius: 30rpx;
+				text{
+					margin-left: 10rpx;
+				}
+			}
+			
+			.text{
+				.line{
+					margin-top: 40rpx;
+					display: flex;
+					line-height: 50rpx;
+					.left{
+						width: 180rpx;
+						flex-shrink: 0;
+						color: $uni-color;
+						font-weight: 900;
+					}
+				}
+			}
+		}
+		.video-list{
+			padding: 15rpx;
+			.title{
+				font-weight: 900;
+				color: $uni-color;
+				padding: 15rpx;
+			}
+			.list{
+				display: flex;
+				flex-wrap: wrap;
+				>view{
+					margin: 15rpx;
+					image{
+						width: 330rpx;
+						height: 350rpx;
+						border-radius: 30rpx;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

pages_order/service/tellList.vue

@@ -8,32 +8,7 @@
 			<view>遗产点</view>
 		</view>
 
-		<!-- <view class="card" v-for="(item,index) in 10">
-			<view class="card-img">
-				<image src="../static/applyRelic/jdz.png" mode="aspectFill"></image>
-			</view>
-			<view class="card-content">
-				<view style="display: flex; align-items: center;">
-					<text>刘申林</text>
-					<image class="card-content-img" src="../static/tell/goldMedal.png"></image>
-				</view>
-				<view class="card-content-tag">
-					提前一周预约
-				</view>
-				<view style="font-size: 12px; color: #999;">
-					御窑厂、刘家弄、观音阁、陶瓷博物馆御窑博物馆...
-				</view>
-				<view class="card-content-bottom">
-					<view style="color: #FF280C;">
-						￥300起
-					</view>
-					<view class="card-content-bottom-one">
-						￥线上预约
-					</view>
-				</view>
-			</view>
-		</view> -->
-		<cardList />
+		<cardList :type="type"/>
 		<tabber/>
 	</view>
 </template>
@@ -76,65 +51,5 @@
 				margin-left: 5%;
 			}
 		}
-
-		// .card {
-		// 	display: flex;
-		// 	height: 300rpx;
-		// 	width: 94%;
-		// 	margin: 40rpx 0 0 3%;
-		// 	align-items: center;
-
-		// 	.card-img {
-		// 		height: 240rpx;
-		// 		width: 420rpx;
-
-		// 		image {
-		// 			height: 100%;
-		// 			width: 100%;
-		// 		}
-		// 	}
-
-		// 	.card-content {
-		// 		margin-left: 3%;
-		// 		font-size: 28rpx;
-
-		// 		.card-content-img {
-		// 			display: flex;
-		// 			margin-left: 10rpx;
-		// 			width: 100rpx;
-		// 			height: 40rpx;
-		// 		}
-
-		// 		.card-content-tag {
-		// 			display: inline-block;
-		// 			font-size: 24rpx;
-		// 			padding: 2rpx 20rpx;
-		// 			border: 2rpx solid #FBA21E;
-		// 			background-color: #FFF1D2;
-		// 			color: #FBAF35;
-		// 			border-radius: 20rpx;
-		// 		}
-
-		// 		.card-content-bottom {
-		// 			display: flex;
-		// 			justify-content: space-between;
-		// 			align-items: center;
-
-		// 			.card-content-bottom-one {
-		// 				display: inline-block;
-		// 				color: #FFFDF6;
-		// 				background-color: #C83741;
-		// 				margin-right: 4%;
-		// 				padding: 8rpx 20rpx;
-		// 				border-radius: 40rpx;
-		// 			}
-
-		// 		}
-
-		// 		view {
-		// 			margin-top: 10rpx;
-		// 		}
-		// 	}
-		// }
 	}
 </style>