订单cell

src/components/order/index.vue

-<template>
-	<view class="order-view">
-		<text>订单</text>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: {
-			orderData: {
-				type: Object,
-				default: {}
-			}
+<template>
+	<view class="order-view" @click="handleClickCell">
+		<view class="top">
+			<view class="left">
+				<view class="tag">{{ orderData.orderServiceType }}</view>
+				<view class="store">{{ orderData.categoryName }}</view>
+				<view>{{ orderData.orderNumber }}</view>
+			</view>
+			<view class="right">{{ orderData.orderBusinessTypeText }}</view>
+		</view>
+		<view class="content">
+			<view class="title u-line-2">
+				<text>{{orderData.contactName }}</text> <text
+					style="margin-left: 8rpx;">{{ orderData.contactPhone }}</text>
+			</view>
+		</view>
+		<view class="address u-line-2">
+			<view class="left">
+				<view>
+					<u-icon name="map" size="32"></u-icon>
+					<text style="margin-left: 8rpx;">{{orderData.contactAddress }}</text>
+				</view>
+			</view>
+			<view class="right">{{getDistance(orderData.contactAddressLatitud,orderData.contactAddressLongitud)}}km
+			</view>
+		</view>
+
+		<u-divider margin-top="16" half-width="630" border-color="#F4F5F7" :use-slot="false">
+		</u-divider>
+
+		<view class="bottom">
+			<view class="left">
+				<view class="tag">剩</view>
+				<u-count-down :timestamp="timestamp" font-size="44" color="#FF930D"></u-count-down>
+			</view>
+			<u-button class="right-btn" @click.stop="handleClick">
+				{{orderText}}
+			</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			orderData: {
+				type: Object,
+				default: {
+					orderServiceType: '安装', // 服务类型：安装、维修
+					categoryName: '充电桩', // 品类：充电桩
+					orderBusinessTypeText: '分配单', // 业务类型：分配单、订单池
+					orderNumber: 'OR2021041809827', // 工单编号
+					contactName: '郭小清', // 客户信息
+					contactPhone: '13631612077', // 联系方式
+					contactAddress: '湾街道荔枝花园D座125号', // 详细地址
+					orderStatus: '0', // 工单状态
+					appointmentDatetime: '' // 预约时间
+				}
+			},
+			orderType: Number // 0:待接单  1:'去预约', 2:'去签到', 3:'去完工', 4:'审核中', 5:'去处理', 6'已完工'
+		},
+		data() {
+			return {
+
+			};
+		},
+		computed: {
+			/*
+			orderStatus:
+				待接单	orderStatus<31												工单状态小于31
+				待预约	orderStatus == 31  and appointmentDatetime == null			工单状态等于30并且预约时间为空
+				待签到	orderStatus == 31  and appointmentDatetime is not null		工单状态等于30并且预约时间不为空
+				待完工	orderStatus >31 and orderStatus < 80						工单状态大于31 小于80
+				审核中	orderStatus ==85 or  orderStatus == 87						工单状态 等于85 或者 等于有87
+				异常		orderStatus ==86 or  orderStatus == 88						工单状态 等于86 或者 等于有88
+				已完工	orderStatus in(80,81,89,110)								工单状态 等于80 or 81 or 89 or 110
+			*/
+			orderText() { // 按钮文字
+				if (!this.orderType) {
+					if (this.orderData.orderStatus < 31) {
+						this.orderType = 0
+					} else if (this.orderData.orderStatus == 31) {
+						if (this.orderData.appointmentDatetime) {
+							return this.orderType = 2
+						} else {
+							this.orderType = 1
+						}
+					} else if (this.orderData.orderStatus > 31 && this.orderData.orderStatus < 80) {
+						this.orderType = 3
+					} else if (this.orderData.orderStatus == 85 && this.orderData.orderStatus == 87) {
+						this.orderType = 4
+					} else if (this.orderData.orderStatus == 86 && this.orderData.orderStatus == 88) {
+						this.orderType = 5
+					} else if ([80, 81, 89, 110].indexOf(this.orderData.orderStatus) != -1) {
+						this.orderType = 6
+					}
+				}
+				return this.typeTexts[this.orderType]
+			},
+			buttonStyle() { // 按钮样式
+				switch (this.status) {
+					case 0:
+						if (this.orderData.currentWillOverTime) {
+							return this.buttonStyle[0]
+						} else {
+							return this.buttonStyle[1]
+						}
+					case 1: case 2: case 3: case 5:
+						return this.buttonStyle[0]
+					case 4: case 6:
+						return this.buttonStyle[2]
+				}
+			},
+			typeTexts() {
+				return [type0Text, '去预约', '去签到', '去完工', '审核中', '去处理', '已完工']
+			},
+			type0Text() {
+				return this.orderData.currentWillOverTime ? '接单' : '抢单'
+			},
+			buttonStyles() {
+				return [{
+					'background-color': '#2272FF',
+					'color': '#FFFFFF'
+				}, {
+					'background-color': '#FF930D',
+					'color': '#FFFFFF'
+				}, {
+					'background-color': 'transparent',
+					'color': '#2272FF'
+				}]
+			},
+			buttonDisabled() {
+				return this.orderData.orderStatus == 4 || this.orderData.orderStatus == 6
+			}
 		},
-		data() {
-			return {
-				
-			};
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.order-view {
-		width: 100%;
-		height: 200rpx;
-	}
-
+		methods: {
+			handleClick() {
+				if (buttonDisabled) return
+				this.$emit('action')
+			},
+			actionClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order-view {
+		width: 100%;
+		height: 200rpx;
+	}
 </style>

src/pages.json

@@ -16,12 +16,12 @@
 				"navigationBarTitleText": "订单"
 			}
 		},
-		{
-			"path": "pages/order/orderItem",
-			"style": {
-				"navigationBarTitleText": "订单详情"
-			}
-		},
+		// {
+		// 	"path": "pages/order/orderItem",
+		// 	"style": {
+		// 		"navigationBarTitleText": "订单详情"
+		// 	}
+		// },
 		{
 			"path": "pages/order/complete",
 			"style": {