lanan-repair-app/components/reservationOrder/reservationOrder.vue

<template>
	<view class="orderInfo">
		<view class="header">
			<text class="orderTitle">{{ orderInfo.title }}</text>
<!--			<text class="orderStatus" :class="['status_' + orderInfo.status]">-->
			<text class="orderStatus" :class="['status_' + '01']">
				{{ getOrderStatusTxt() }}
			</text>
		</view>
		<view class="detail">
			<view class="line">
				<image class="line-icon" src="../../static/icons/order-icon1.png" mode="aspectFit"></image>
				<text class="line-text">{{orderInfo.address}}</text>
			</view>
			<view class="line">
				<image class="line-icon" src="../../static/icons/order-icon2.png" mode="aspectFit"></image>
				<text class="line-text">{{orderInfo.phone}}</text>
			</view>
			<view class="line">
				<image class="line-icon" src="../../static/icons/order-icon3.png" mode="aspectFit"></image>
				<text class="line-text">{{orderInfo.busiTypeStr}}</text>
			</view>
		</view>
		<view v-if="!hideFooter" class="footer">
			<view class="btn" :class="{phone: isDetail}">
				<image v-if="isDetail" class="btnIcon" src="../../static/icons/order-icon7.png" mode="aspectFit"></image>
				<text>拨打电话</text>
			</view>
			<view class="btn" :class="{address: isDetail}">
				<image v-if="isDetail" class="btnIcon" src="../../static/icons/order-icon6.png" mode="aspectFit"></image>
				<text>地址导航</text>
			</view>
			<view v-if="!isDetail" class="btn primary" @click="showOrderDetail">查看订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "reservationOrder",
		props: {
			orderInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
			isDetail: {
				type: Boolean,
				default: false
			},
			hideFooter: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			getOrderStatusTxt() {
        // console.log(this.orderInfo.status)
        switch (this.orderInfo.status) {
          case '01':
            this.isDetail = true
            return '等待维修'
          case '02':
            return '维修中'
          case '03':
            return '已完成'
          default:
            return ''
        }
			},
			showOrderDetail() {
				uni.navigateTo({
					url: '/pages-order/orderDetail/orderDetail?info=' + encodeURIComponent(JSON.stringify(this.orderInfo))
				})
			}
		}
	}
</script>

<style lang="less">
	.orderInfo {
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		box-shadow: 2rpx 4rpx 8rpx #efefef;
		padding: 0 30rpx;

		.header {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #EEEEEE;
			padding: 30rpx 0;

			.orderTitle {
				flex: 1;
				width: 0;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.orderStatus {
				font-weight: 500;
				font-size: 24rpx;

        &.status_01 {
          color: #0174F6;
        }
			}
		}

		.detail {
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #EEEEEE;;
			.line {
				margin: 30rpx 0;
				display: flex;
				align-items: center;
				column-gap: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}

			.line-icon {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.footer {
			display: flex;
			align-items: center;
			column-gap: 20rpx;
			.btn {
				margin-bottom: 30rpx;
				flex: 1;
				width: 0;
				height: 60rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				border: 1rpx solid #0174F6;
				font-weight: 500;
				font-size: 28rpx;
				color: #0174F6;

				display: flex;
				align-items: center;
				justify-content: center;
				column-gap: 8rpx;

				&.primary {
					background: #0174F6;
					color: #fff;
					color: #FFFFFF;
				}
				&.address {
					background: #0174F6;
					color: #fff;
					border: none;
				}
				&.phone {
					background: #E8A321;
					color: #fff;
					border: none;
				}

				.btnIcon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>