详情页面布局修改

src/pages/order/detail.vue

@@ -66,12 +66,33 @@
 					<text>接单时间：2021.04.21  16:40:35</text>
 				</view>
 			</view>
+			<view class="card appoint-item">
+				<appoint-time @dateChange="dateChange" @timeChange="timeChange" @weekChange="weekChange"></appoint-time>
+			</view>
+		</view>
+		<view class="toolbar">
+			<!-- view用于占位 -->
+			<view class="left">
+				<view v-show="allowFeedback" @click="clickFeedback" class="button"></view>
+			</view>
+			<view class="center">
+				<view v-if="centerButton=='appoint'" @click="clickCenterButton" class="button" :class="centerButtonClass">
+					{{ centerButtonText }}
+				</view>
+			</view>
+			<view class="right">
+				<view v-show="allowFeedback" @click="clickFeedback" class="button"></view>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	import appointTime from '@/components/appoint/appoint-time.vue'
 	export default {
+		components:{
+			appointTime
+		},
 		data() {
 			return {
 				background: {
@@ -84,7 +105,11 @@
 				},
 				orderId: null,
 				order: {},
-				allowRejection: false,
+				allowRejection: false, // 允许拒单
+				allowFeedback: true, // 允许过程反馈
+				needPhotograph: true, // 需要现场拍摄
+				centerButton: 'appoint', // 是否显示按钮
+				centerButtonText: '预约',
 			};
 		},
 		onLoad(e) {
@@ -102,6 +127,10 @@
 			navigationIcon() {
 				return process.uniEnv.qn_base_url + 'icon/daohang-1@2x.png'
 			},
+			centerButtonClass() {
+				let btnClass = "appoint-btn"
+				return btnClass
+			},
 		},
 		methods: {
 			loadOrderDetail() {
@@ -149,7 +178,31 @@
 			 */
 			rejectOrder() {
 				console.log("点击拒单")
-			}
+			},
+			/**
+			 * 点击下一周
+			 * @param {Object} data
+			 */
+			weekChange(data){
+				console.log(data,'week-data')
+			},
+			/**
+			 * 点击日期选择
+			 * @param {Object} data
+			 */
+			dateChange(data){
+				console.log(data,'week-data')
+			},
+			/**
+			 * 时间段选择变化
+			 * @param {Object} data
+			 */
+			timeChange(data){
+				console.log(data,'week-data')
+			},
+			clickCenterButton() {
+				
+			},
 		}
 	}
 </script>
@@ -276,6 +329,64 @@
 		}
 		.record-item {
 		}
+		.appoint-item {
+			padding: 0;
+		}
+	}
+	.toolbar {
+		margin-bottom: 104rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.left {
+			width: 100rpx;
+			height: 100rpx;
+			.button {
+				width: 100rpx;
+				height: 100rpx;
+				background: #929CB8;
+				border-radius: 100rpx;
+			}
+		}
+		.center {
+			width: 140rpx;
+			height: 140rpx;
+			margin-left: 74rpx;
+			margin-right: 74rpx;
+			.button {
+				width: 140rpx;
+				height: 140rpx;
+				border-radius: 100rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				color: #FFFFFF;
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+			.appoint-btn {
+				background: #2272FF;
+				box-shadow: 2px 2px 20px 0px rgba(34, 114, 255, 0.3);
+			}
+			.sign-timeout-btn {
+				background: #FA5A49;
+				box-shadow: 2px 2px 20px 0px rgba(34, 114, 255, 0.3);
+			}
+			.appoint-btn {
+				background: #2272FF;
+				box-shadow: 2px 2px 20px 0px rgba(34, 114, 255, 0.3);
+			}
+		}
+		.right {
+			width: 100rpx;
+			height: 100rpx;
+			.button {
+				width: 100rpx;
+				height: 100rpx;
+				background: #12CF84;
+				border-radius: 100rpx;
+			}
+		}
 	}
 }