lanan-app/components/orderCard/OrderCard.vue

<template>
	<view>
		<view class="orderCard" @click="onShowDetail">
			<view class="orderCardHeader">
				<text class="orderCardType">{{ getRescueTypeStr() }}</text>
				<text class="orderCardTitle">{{ orderData.rescuePosition }}</text>
			</view>
			<view class="orderCardStatus">
				<view class="orderCardStatusData">
					<template v-if="orderData.rescueStatus == 3">
						<image src="@/static/icons/homeOrderCard/dhjl.png" class="orderCardDistanceIcon" mode="aspectFit"></image>
						<text class="orderCardDistanceValue">{{orderData.distance / 1000 || 0}}KM</text>
						&nbsp;
						<image src="@/static/icons/homeOrderCard/yjsj.png" class="orderCardPredictIcon"></image>
						<text class="orderCardPredictDate">{{orderData.needTime || 0}}分钟</text>
						到达
					</template>
				</view>
				<text :class="{ toRescued: orderData.rescueStatus <= 2, inRescue: orderData.rescueStatus > 2 }"
					class="orderCardFlag">
					<template v-if="orderData.rescueStatus <= 2">{{orderData.rescueStatusStr}}</template>
					<template v-if="orderData.rescueStatus > 2">{{orderData.rescueStatusStr}}</template>
				</text>
			</view>
			<view class="orderCardProcess">
				<view v-if="orderData.rescueStatus == 2" class="orderCardSendOrders">
					系统正在派单中...
				</view>
				<view v-if="orderData.rescueStatus > 2">
					<text class="orderCardDriver">{{ orderData.driverName || "" }}</text>
					驾驶
					<text class="orderCardCarNo">{{ orderData.driverCarNum || "" }}</text>
				</view>
			</view>
			<view class="orderCardFooter">
				<text class="orderCardDateTime">{{ orderData.rescueTime || "" }}</text>
				<view class="orderCardBtnGroup">
					<template v-if="role == 'ddzx' && orderData.rescueStatus <= 2">
						<view @click.stop="deleteId" class="orderCardBtnGroupItem" style="background-color: #fff;color: #317DFA">
							删除订单</view>
						<view @click.stop="getzhipai" class="orderCardBtnGroupItem">指派司机</view>
					</template>
					<template v-else-if="orderData.rescueStatus > 2">
						<view @click.stop="gettel" class="orderCardBtnGroupItem">联系司机</view>
					</template>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="confirms" @cancel="cancels" keyName="realName"></u-picker>
		<u-modal :show="showDelete" title="是否确认删除" :showCancelButton="true" @confirm="deleteOk"
			@cancel="deleteCancel"></u-modal>
	</view>
</template>

<script>
	import request from '../../utils/request';
	export default {
		props: {
			orderData: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		mounted() {
			this.role = uni.getStorageSync('role')
		},
		data() {
			return {
				columns: [],
				id: '',
				show: false,
				showDelete: false,
				role: []
			}
		},
		methods: {
      getRescueTypeStr(){
        if(this.orderData.rescueTypeStr){
          return this.orderData.rescueTypeStr
        }
        switch (this.orderData.rescueType){
          case '1':
            return '拖车'
          case '2':
            return '送油'
          case '3':
            return '搭电'
          case '4':
            return '换胎'
          case '5':
            return '扣车'
          case '6':
            return '事故'
          case '7':
            return '秩序'
          default:
            return ''
        }
      },
			onShowDetail() {
				uni.navigateTo({
					url: '/pages/details/details?id=' + this.orderData.id
				})
			},
			// zhi指派司机
			getzhipai() {
				console.log('getzhipai: ', this.getzhipai);
				this.getsjlist()
				this.show = true
			},
			// 获取司机列表
			getsjlist() {
				this.columns = []
				// 获取司机信息
				request({
					url: '/app/rescueInfo/driverInMap?searchValue=',
					method: 'get',
				}).then((res) => {
					this.columns.push(res.data)
				})
			},
			// 指派确定
			confirms(e) {
				console.log(e);
				let data = {
					rescueId: this.orderData.id,
					driverId: e.value[0].id
				}
				request({
					url: '/system/rescueInfo/designateDriver',
					method: 'post',
					params: data
				}).then((res) => {
					console.log('确认司机', res);
					if (res.code == 200) {
						uni.showToast({
							title: '指派成功'
						})
						this.$emit('refresh')
					}
				})
				this.show = false
			},
			// 指派取消
			cancels() {
				this.show = false
			},
			// 删除订单
			deleteId() {
				this.showDelete = true
				return
			},
			deleteOk() {
				request({
					url: "/app/rescueInfo/delRescueInfo?id=" + this.orderData.id,
					method: 'post',
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "删除成功"
						})
						this.$emit('deleteOk')
					}
				})
				this.showDelete = false
			},
			deleteCancel() {
				console.log("取消");
				this.showDelete = false
			},
			// 联系司机
			gettel() {
				uni.makePhoneCall({
					phoneNumber: this.orderData.driverPhoneNum //仅为示例
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderCard {
		background-color: #fff;
		padding: 24rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		row-gap: 22rpx;
		box-shadow: 2rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.orderCardHeader {
		line-height: 1.5;

		.orderCardType {
			background-color: #EAF1FE;
			color: #317DFA;
			padding: 4rpx 16rpx;
			border-radius: 16rpx 0 16rpx 0;
			font-size: 24rpx;
			margin-right: 12rpx;
		}

		.orderCardTitle {
			color: #000;
			font-weight: bold;
		}
	}

	.orderCardStatus {
		display: flex;
		justify-content: space-between;
	}

	.orderCardStatusData {
		display: flex;
		align-items: center;
		column-gap: 4rpx;
		font-size: 24rpx;
	}

	.orderCardDistanceIcon,
	.orderCardPredictIcon {
		width: 36rpx;
		height: 36rpx;
	}

	.orderCardDistanceValue {
		color: #919191;
		margin-right: 16rpx;
	}

	.orderCardPredictDate {
		color: #317DFA;
	}

	.orderCardFlag {
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 4rpx;

		&.inRescue {
			background-color: #ECF8EA;
			color: #2FB821;
		}

		&.toRescued {
			background-color: #FAE9E9;
			color: #D42424;
		}
	}

	.orderCardProcess {

		.orderCardSendOrders,
		.orderCardDriver,
		.orderCardCarNo {
			color: #317DFA;
		}
	}

	.orderCardFooter {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.orderCardDateTime {
			color: #919191;
			font-size: 24rpx;
		}

		.orderCardBtnGroup {
			display: flex;
			align-items: center;
			column-gap: 16rpx;
		}

		.orderCardBtnGroupItem {
			background-color: #317DFA;
			color: #fff;
			border: 1px solid #317DFA;
			padding: 8rpx 16rpx;
			border-radius: 28rpx;
		}
	}
</style>