详情页面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>