详情页面

src/components/order/bottomButtons.vue

@@ -3,7 +3,7 @@
 		<view v-for="(item, index) in list" :class="['button-view', item.type]">
 			<u-button :class="['list-button', item.type, {'one': list.length == 1}]" @click="handleClick(item)"
 				:hover-class="item.type == 'image' || item.disabled ? 'none' : ''"
-				:custom-style="buttonStyle[item.disabled ? 'disabled' : item.type]" type="primary" shape="circle">
+				:custom-style="{...buttonStyle[item.disabled ? 'disabled' : item.type], ...item.customStyle}" type="primary" shape="circle">
 				<view class="image-view" v-if="item.type == 'image'">
 					<image :src="baseImageUrl + item.image" class="image-content"></image>
 				</view>
@@ -15,7 +15,13 @@
 
 <script>
 	export default {
-		props: {
+		props: {
+			// label: 按钮文字,
+			// type: 'text'普通按钮；'image'图文按钮
+			// image: type='image'的时候，按钮图片
+			// show: 是否显示,
+			// disabled: 是否禁用，true禁用；false 可以点击
+			// customStyle: 自定义button样式
 			buttons: {
 				type: Array,
 				default () {
@@ -44,7 +50,10 @@
 							label: '接单',
 							type: 'text',
 							show: true,
-							disabled: true
+							disabled: true,
+							customStyle: {
+								'background-color': '#2272FF'
+							}
 						}
 					]
 				}
@@ -132,6 +141,7 @@
 					margin-left: 40rpx;
 					&.one {
 						width: 600rpx;
+						margin-left: 0rpx;
 					}
 				}
 				.image-view {

src/components/order/detail.vue

@@ -164,7 +164,7 @@
 		padding-bottom: 6rpx;
 		background-color: #FFFFFF;
 		margin-bottom: 20rpx;
-		padding: 30rpx 30rpx 0 30rpx;
+		// padding: 30rpx 30rpx 0 30rpx;
 		border-radius: 6px;
 
 		.top-item {

src/pages/order/detail.vue

@@ -2,15 +2,15 @@
 	<view class="order-wrap">
 		<u-navbar :title="title" title-color="#FFFFFF" title-size="32" back-icon-color="#FFFFFF" :background="background" :border-bottom="false"></u-navbar>
 		<view class="header" v-if="order.currentOverTime && showTimeOut">
-			<!-- 抓紧时间提示 -->
-			<view class="tip-text">{{tipText}}</view>
+			<!-- 倒计时 -->
+			<view class="title">
+				<view class="bottom-tag-view"><text>{{timeout ? '超时' : '剩余'}}</text></view>
+				<u-count-down :timestamp="timestamp" font-size="28" show-days separator="zh" separator-size="32" height="40"
+					color="#2272FF" separator-color="#FFFFFF" @change="timeOutChange" ref="order-count-down" bg-color="#FFFFFF"></u-count-down>
+			</view>
 			<view class="header-content">
-				<!-- 倒计时 -->
-				<view class="title">
-					<view :class="['bottom-tag-view', {'timeout': timeout}]"><text>{{timeout ? '超' : '剩'}}</text></view>
-					<u-count-down :timestamp="timestamp" font-size="44" show-days separator="zh" separator-size="44"
-						color="#FFFFFF" separator-color="#FFFFFF" @change="timeOutChange" ref="order-count-down" bg-color="transparent"></u-count-down>
-				</view>
+				<!-- 抓紧时间提示 -->
+				<view class="tip-text">{{tipText}}</view>
 				<!-- 拒单 -->
 				<view v-show="allowRejection" class="reject-button" @click="$u.throttle(rejectOrder, 500)">拒单</view>
 			</view>
@@ -251,7 +251,10 @@
 					image: '',
 					show: true,
 					disabled: this.centerBtnDisabled,
-					id: 0
+					id: 0,
+					customStyle: {
+						'background-color': this.title == '待抢单' ? '#FF930D' : '#2272FF'
+					}
 				}]
 			},
 			wenjianImage() {
@@ -823,50 +826,38 @@
 		flex-direction: column;
 
 		.header {
-			padding: 6rpx 30rpx 20rpx 30rpx;
-			.tip-text {
-				font-size: 26rpx;
-				color: #EFEFEF;
-			}
+			padding: 4rpx 32rpx 14rpx 32rpx;
+			
 			.header-content {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				max-height: 100rpx;
-				margin-top: 24rpx;
+				margin-top: 12rpx;
+				.tip-text {
+					font-size: 26rpx;
+					color: #EFEFEF;
+				}
+				.reject-button {
+					text-align: center;
+					width: 106rpx;
+					height: 52rpx;
+					border-radius: 40rpx;
+					font-size: 24rpx;
+					font-weight: 400;
+					line-height: 52rpx;
+					color: #DEDEDE;
+					text-align: right;
+				}
 			}
 			.title {
 				display: flex;
 				align-items: center;
 				.bottom-tag-view {
-					width: 52rpx;
-					height: 52rpx;
-					border-radius: 26rpx;
-					color: #FF930D;
-					font-size: 26rpx;
-					background-color: #FFFFFF;
+					color: #FFFFFF;
+					font-size: 40rpx;
 					margin-right: 16rpx;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-				
-					&.timeout {
-						color: #FA5A49;
-					}
 				}
 			}
-
-			.reject-button {
-				text-align: center;
-				width: 106rpx;
-				height: 52rpx;
-				border-radius: 40rpx;
-				font-size: 24rpx;
-				font-weight: 400;
-				line-height: 52rpx;
-				color: #DEDEDE;
-				text-align: right;
-			}
 		}
 
 		.content {