详情页面ui修改

src/components/order/bottomButtons.vue

 <template>
 	<view class="bottom-button">
-		<view v-for="(item, index) in buttons" :class="['button-view', item.type]">
-			<u-button :class="['list-button', item.type]" @click="handleClick(index)"
-				:hover-class="item.type == 'image' ? 'none' : ''" :custom-style="buttonStyle[item.type]" type="primary"
-				shape="circle">
+		<view v-for="(item, index) in list" :class="['button-view', item.type]">
+			<u-button :class="['list-button', item.type]" @click="handleClick(item)"
+				:hover-class="item.type == 'image' || item.disabled ? 'none' : ''"
+				:custom-style="buttonStyle[item.disabled ? 'disabled' : item.type]" type="primary" shape="circle">
 				<view class="image-view" v-if="item.type == 'image'">
 					<image :src="baseImageUrl + item.image" class="image-content"></image>
 				</view>
 				<view :class="['text-content', item.type]">{{item.label}}</view>
 			</u-button>
+			<view v-if="index == 1"style="width: 6rpx;"></view>
 		</view>
 	</view>
 </template>
@@ -22,17 +23,29 @@
 					return [{
 							label: '过程反馈',
 							type: 'image',
-							image: 'dianhua.png'
+							image: 'guochengfankui.png',
+							show: true,
+							disabled: false,
 						},
 						{
 							label: '异常签到',
 							type: 'image',
-							image: 'daohang.png'
+							image: 'yichangqiandao.png',
+							show: false,
+							disabled: false
+						},
+						{
+							label: '现场拍照',
+							type: 'image',
+							image: 'xiancahngpaizhao.png',
+							show: true,
+							disabled: false,
 						},
 						{
 							label: '接单',
 							type: 'text',
-							image: ''
+							show: true,
+							disabled: true
 						}
 					]
 				}
@@ -42,6 +55,11 @@
 			baseImageUrl() {
 				return process.uniEnv.qn_base_url
 			},
+			list() {
+				return this.buttons.filter((item) => {
+					return item.show == true
+				})
+			},
 			buttonStyle() {
 				return {
 					'image': {
@@ -63,12 +81,23 @@
 						'width': '100%'
 
 					},
+					'disabled': {
+						'background-color': '#D1D4D4',
+						'border-color': 'transparent',
+						'display': 'flex',
+						'flex-direction': 'column',
+						'height': '104rpx',
+						'width': '100%'
+
+					},
 				}
 			},
 		},
 		methods: {
-			handleClick(index) {
-				this.$emit('submit', index)
+			// 0 主流程； 1 过程反馈；2 异常签到； 3 现场拍照	
+			handleClick(item) {
+				if (item.disabled) return
+				this.$emit('submit', item.id)
 			}
 		}
 	}
@@ -82,6 +111,8 @@
 		padding: 0 30rpx 44rpx 30rpx;
 
 		.button-view {
+			max-width: 600rpx;
+			display: flex;
 			&.image {}
 
 			&.text {
@@ -92,16 +123,18 @@
 				display: flex;
 				flex-direction: column;
 				max-width: 600rpx;
-
+				width: 100%;
 				&.image {}
 
 				&.text {}
+
 				.image-view {
 					flex-shrink: 0;
 					background-color: #FFFFFF;
 					border-radius: 38rpx;
 					width: 76rpx;
 					height: 76rpx;
+
 					.image-content {
 						width: 76rpx;
 						height: 76rpx;
@@ -125,7 +158,5 @@
 				}
 			}
 		}
-
-
 	}
 </style>

src/components/order/index.vue

@@ -40,7 +40,7 @@
 				<view v-if="showCountTime" class="bottom-left-view">
 					<view :class="['bottom-tag-view', {'timeout': timeout}]"><text>{{tagText}}</text></view>
 					<u-count-down :timestamp="timestamp" font-size="40" show-days separator="zh"
-						:color="timeout ? '#FA5A49' : '#FF930D'" @change="handleChange"separator-color="#666666" ref="order-count-down"></u-count-down>
+						:color="timeout ? '#FA5A49' : '#FF930D'" @change="handleChange" separator-color="#666666" ref="order-count-down"></u-count-down>
 				</view>
 				<view v-else-if="showTime">
 					<text>{{timeTitle}}</text>

src/pages/order/detail.vue

 <template>
 	<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="content">
 		<view class="header" v-if="order.currentOverTime && showTimeOut">
+			<view class="tip-text">{{tipText}}</view>
+			<view class="header-content">
 				<view class="title">
 					<view :class="['bottom-tag-view', {'timeout': timeout}]"><text>{{timeout ? '超' : '剩'}}</text></view>
-					<u-count-down :timestamp="timestampDiff(order.currentOverTime)" font-size="44" show-days separator="zh" separator-size="44"
-						:color="tipColor" :separator-color="tipColor" @change="timeOutChange(order.currentOverTime)" ref="order-count-down"></u-count-down>
+					<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 v-show="allowRejection" class="reject-button" @click="$u.throttle(rejectOrder, 500)">拒单</view>
 			</view>
-				<u-button v-if="allowRejection || 1" :custom-style="customStyle" size="mini" @click="rejectOrder" shape="circle">拒单</u-button>
 		</view>
+		<view class="content">
 			<view class="card base-item">
 				<Detail :order="order" :readMore.sync="readMore" :operate="isAllowDianhuaAndDaohang"></Detail>
 			</view>
@@ -42,51 +45,7 @@
 		</view>
 		<!-- 不是从我的页面进来才显示 -->
 		<template v-if="!isFromMine">
-			<BottomButtons :buttons="buttons" @submit="handleSubmit"></BottomButtons>
-			<view v-if="showCenterBtn" class="toolbar">
-				<!-- 背景，内容，请求接口 根据状态不同改变  {{operationDoing[order.orderStatus].background}} -->
-				<!-- 过程反馈 -->
-				<view class="left">
-					<view v-if="allowFeedback" @click="clickFeedback" class="button">
-						<text>反馈</text>
-					</view>
-				</view>
-				<!--接单，抢单，已被抢， 预约 ，签到 ，去完工  timestampDiff(order.currentOverTime)>0 -->
-				<view class="center">
-					<view>
-						<u-toast ref="uToast" />
-					</view>
-					<view v-if="showCenterBtn" @click="$u.throttle(handleClickSure, 500)"   class="button" :class="['center-button-view', btnClass]">
-						<text>{{ centerButtonText }}</text>
-						<view v-if="order.currentOverTime && showTimeOut"  class="time-view">
-							<text style="padding-right: 8rpx;">{{timeOut?'剩':'超'}}</text>
-				<!-- 			<u-count-down
-								:timestamp="timestampDiff(order.currentOverTime)"
-								font-size="20"
-								color="#FFFFFF"
-								bg-color="transparent"
-								separator-color="#FFFFFF"
-								separator-size="20"
-								:ref="'uCountDown'"
-								show-days
-								height="20"
-								:show-days="threeDays()"
-								:show-minutes="!threeDays()"
-								:show-seconds="!threeDays()"
-								:separator="threeDays() ? 'zh' : 'colon'"
-								@change="timeOutChange(order.currentOverTime)" >
-							</u-count-down> -->
-						</view>
-					</view>
-				</view>
-				<!-- 异常预约 ，现场拍照 这里是调用拍照的两个组件-->
-				<view class="right">
-					<view v-if="errorSignIn || scenePhoto" @click="$u.throttle(handleClickRight, 500)" :class="['button', {'active': scenePhoto}]">
-						<text :style="errorSignIn ? 'font-size:24rpx' : ''">{{errorSignIn ? '异常\n签到' : '拍照'}}</text>
-
-					</view>
-				</view>
-			</view>
+			<BottomButtons v-if="showCenterBtn" :buttons="buttons" @submit="handleSubmit"></BottomButtons>
 			<take-photo type="test" v-if="takeStatus" @close="closeTake" :upload="false" :num="1"></take-photo>
 			<!-- <PopView title="查看交互规范" message="为完善交付质量，请查看对应的交付规范" :visible.sync="visible" @click="handleClick"/> -->
 			<u-popup border-radius="12" v-model="visible" safe-area-inset-bottom mode="center" width="690rpx"
@@ -166,7 +125,6 @@
 				showTimeSelect: false,
 				submitType: '',
 				nextUrl:'',
-				btnClass:'appoint-btn',
 				takeStatus:false,
 				errorSignIn:false,
 				scenePhoto: false,
@@ -186,21 +144,8 @@
 				isFromMine: false,
 				settlementInfo: {formatTime: '-', list: [], amount: ''},
 				unloaded: false,
-				buttons: [{
-					label: '过程反馈',
-					type: 'image',
-					image: 'dianhua.png'
-				},
-				{
-					label: '异常签到',
-					type: 'image',
-					image: 'daohang.png'
-				},
-				{
-					label: '接单',
-					type: 'text',
-					image: ''
-				}]
+				timeout: false,
+				timestamp: 0
 			}
 		},
 		onLoad(option) {
@@ -235,22 +180,61 @@
 			this.closeLocationChange()
 		},
 		computed: {
-			centerButtonClass() {
-				let btnClass = "appoint-btn"
-				return btnClass
-			},
-			timeout() {
-				return this.order.currentOverTime < new Date().getTime()
-			},
-			tipColor() {
-				return this.timeout ? '#FA5A49' : '#FF930D'
-			},
 			customStyle() {
 				return {
 					'height': '48rpx',
 					'width': '100rpx',
-					'color': '#2272FF'
-				}
+					'color': '#FFFFFF',
+					'border-color': 'transparent',
+					'background-color': 'transparent'
+				}
+			},
+			tipText() {
+				switch (this.centerButtonText) {
+					case '接单':
+						return this.timeout ? '您的订单已超时，请及时接单' : '请您注意剩余时间，及时接单'
+					case '预约':
+						return this.timeout ? '您的订单已超时，请及时预约' : '请您注意剩余时间，及时预约'
+					case '去完工':
+						return this.timeout ? '您的订单已超时，请及时完工' : '请您注意剩余时间，及时完工'
+					default:
+						return ''
+				}
+			},
+			buttons() {
+				//id: 0 主流程； 1 过程反馈；2 异常签到； 3 现场拍照	
+				return [{
+				label: '过程反馈',
+				type: 'image',
+				image: 'guochengfankui.png',
+				show: this.allowFeedback,
+				disabled: false,
+				id: 1
+			},
+			{
+				label: '异常签到',
+				type: 'image',
+				image: 'yichangqiandao.png',
+				show: this.errorSignIn,
+				disabled: false,
+				id: 2
+			},
+			{
+				label: '现场拍照',
+				type: 'image',
+				image: 'xiancahngpaizhao.png',
+				show: this.scenePhoto,
+				disabled: false,
+				id: 3
+			},
+			{
+				label: this.centerButtonText,
+				type: 'text',
+				image: '',
+				show: true,
+				disabled: this.centerBtnDisabled,
+				id: 0
+			}]
 			} 
 		},
 		methods: {
@@ -272,7 +256,6 @@
 				
 				if(this.getDistance(res.latitude,res.longitude)>this.signDistance){
 					// 计算签到距离
-					this.btnClass = "isGan-btn"
 					this.centerBtnDisabled = false
 				}else{
 					this.centerBtnDisabled = true
@@ -325,13 +308,9 @@
 					if (res.code == 200) {
 						self.order = res.data
 						this.getCurrentBtn()
-						var nowTime = new Date();
-						if(this.showTimeOut && this.order.currentOverTime && nowTime.getTime() > this.order.currentOverTime){
-							this.btnClass='timeOut-btn'
-						}
-						// if(self.order.isFirstOrder){
-						// 	this.visible = true
-						// }
+						var nowTime = new Date().getTime();
+						this.timeout = this.order.currentOverTime && nowTime> this.order.currentOverTime
+						this.timestamp = Math.round(Math.abs(this.order.currentOverTime - nowTime) / 1000)
 						// 格式化时间
 						this.settlementInfo.formatTime = this.order.settleCenterSyncDatetime ? this.$u.timeFormat(this.order.settleCenterSyncDatetime, 'yyyy.mm.dd hh:MM:ss') : '-'
 					} else {
@@ -546,8 +525,23 @@
 					this.handleBtn()
 				}
 			},
-			handleSubmit(index) {
-				console.log(index)
+			handleSubmit(id) {
+				console.log(id)
+				// 0 主流程； 1 过程反馈；2 异常签到； 3 现场拍照	
+				switch (id) {
+					case 0:
+						this.handleClickSure()
+						break
+					case 1:
+						this.clickFeedback()
+						break
+					case 2:
+						this.take()
+						break
+					case 3:
+						this.scenePhotoClick()
+						break
+				}
 			},
 			handleBtn() {
 				console.log('click button')
@@ -660,7 +654,7 @@
 			isGan(){
 				this.centerButtonText = "已被抢"
 				this.submitType = ""
-				this.btnClass='isGan-btn'
+				this.centerBtnDisabled = true
 			},
 			clickFeedback(){
 				// 过程反馈
@@ -745,22 +739,14 @@
 			 Rad(d){
 				  return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
 			 },
-			 timestampDiff(currentOverTime){ // 计算超时时间
-			    if(!currentOverTime){
-					return 0
-				}
-			 	return Math.round(Math.abs(this.order.currentOverTime - new Date().getTime())  / 1000);
-			 },
-			 timeOutChange(currentOverTime){
-				let self = this
-				var nowTime = new Date(); // 当前时间
-				if(currentOverTime && nowTime.getTime() > currentOverTime){
-					if(this.centerBtnDisabled === false && this.submitType === 'maintainWorkerCheckin'){
-						this.btnClass = "isGan-btn"
-					}else{
-						this.btnClass='timeOut-btn'
-					}
-					this.$refs['order-count-down'].seconds += 2
+			 timeOutChange(timestamp){
+				 if (this.timeout) this.$refs['order-count-down'].seconds += 2
+				 console.log('-----timestamp-----:', timestamp, this.timeout)
+				 if (timestamp == 0 && !this.timeout) { // 超时之后倒计时变为正计时
+				 	setTimeout(()=> {
+				 		this.timestamp = 1
+				 		this.timeout = true
+				 	}, 1000)
 				 }
 			 },
 			 // handleClick(){
@@ -774,9 +760,6 @@
 			 	this.visible = false
 				// 添加客服
 			 },
-			 threeDays() {
-				 return this.timestampDiff(this.order.currentOverTime) > 3600 * 24 * 3
-			 }
 		}
 	};
 </script>
@@ -794,15 +777,18 @@
 		flex-direction: column;
 
 		.header {
-			padding: 24rpx 30rpx 24rpx 30rpx;
-			margin-bottom: 20rpx;
+			padding: 6rpx 30rpx 20rpx 30rpx;
+			.tip-text {
+				font-size: 26rpx;
+				color: #EFEFEF;
+			}
+			.header-content {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-			background-color: #FFFFFF;
-			border-radius: 12rpx;
 				max-height: 100rpx;
-
+				margin-top: 24rpx;
+			}
 			.title {
 				display: flex;
 				align-items: center;
@@ -810,29 +796,30 @@
 					width: 52rpx;
 					height: 52rpx;
 					border-radius: 26rpx;
-					color: #FFFFFF;
+					color: #FF930D;
 					font-size: 26rpx;
-					background-color: #FF930D;
+					background-color: #FFFFFF;
 					margin-right: 16rpx;
 					display: flex;
 					justify-content: center;
 					align-items: center;
 				
 					&.timeout {
-						background-color: #FA5A49;
+						color: #FA5A49;
 					}
 				}
 			}
 
-			.button {
-				// text-align: center;
-				// width: 106rpx;
-				// height: 52rpx;
-				// border-radius: 40rpx;
-				// font-size: 24rpx;
-				// font-weight: 400;
-				// line-height: 52rpx;
-				// color: #DEDEDE;
+			.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;
 			}
 		}
 
@@ -840,9 +827,7 @@
 			height: 100%;
 			border-radius: 12rpx;
 			overflow: auto;
-			margin-right: 30rpx;
-			margin-left: 30rpx;
-			margin-bottom: 30rpx;
+			margin: 6rpx 30rpx 30rpx 30rpx;
 
 			.card {
 				background-color: #FFFFFF;