gas-cylinder-h5/pages/order/orderDetails.vue

<template>
	<!-- 订单详情 -->
	<view>
		<u-navbar title="详情" autoBack placeholder></u-navbar>
		<view class="card_order_details">
			<view class="details_title" style="color: #3c9cff;" v-if="orderData.state == 2">待配送</view>
			<view class="details_title" style="color: #f9ae3d;" v-else-if="orderData.state == 5">配送中</view>
			<view class="details_title" style="color: #5ac725;" v-else-if="orderData.state == 3">已送达</view>
			<view class="details_title" style="color: #f56c6c;" v-else-if="orderData.state == 4">已取消</view>
			<view class="gas_card">
				<image class="gas_iamge" src="../../static/image/bottle.png" mode=""></image>
				<view class="gas_card_tl">
					<view class="title_gas" v-if="orderData.goods && orderData.spec">
						{{orderData.goods.name}}{{orderData.spec.name}}
					</view>
					<view class="title_gas_num">×{{orderData.quantity}}</view>
				</view>
			</view>
			<view class="details_title1" style="margin-top: 40rpx;">订单编号: <span>{{orderData.orderId}}</span></view>
			<view class="details_title1">配送地址: <span>{{orderData.address}}</span></view>
			<view class="details_title1" v-if="orderData.state == 5">送气员电话:
				<span>{{orderData.user.phone}}</span> <u-icon color="#70B603" size="26" name="phone-fill"
					@click.native.stop="phone(orderData.user.phone)"></u-icon>
			</view>
			<view class="details_title1">下单时间: <span>{{orderData.orderTime}}</span></view>
			<view class="details_title1" v-if="orderData.state == 5 || orderData.state == 4 && orderData.deliveryTime">
				配送时间: <span>{{orderData.deliveryTime}}</span>
			</view>
			<view class="details_title1" v-if="orderData.state == 3 || orderData.state == 4 && orderData.arriveTime">
				送达时间: <span>{{orderData.arriveTime}}</span></view>
		</view>
		<view class="btn_cancel" v-if="orderData.state == 3">
			<u-button text="取消订单" color="#d7d7d7" @click="cancel"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderData: {},
			}
		},
		mounted() {
			var value = uni.getStorageSync('detailsData');
			this.orderData = value
			uni.$on('refresh', () => {
				this.getOrderList()
			})
		},
		methods: {
			getOrderList() {
				var value = uni.getStorageSync('detailsData');
				this.orderData = value
			},
			cancel() {
				uni.redirectTo({
					url: '/pages/order/delivery?id=' + '100' + '&title=' + '确定取消' + '&orderId=' + this.orderData.id
				});
			},
			phone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
						console.log('拨打电话成功！');
					},
					fail: () => {
						console.error('拨打电话失败！');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_order_details {
		margin: 20rpx 30rpx;
	}

	.details_title {
		margin-left: 20rpx;
		color: #333;
		font-size: 30rpx;
		font-weight: 500;
	}

	.gas_card {
		margin-top: 20rpx;
		display: flex;
	}

	.gas_iamge {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.gas_card_tl {
		margin-left: 20rpx;
	}

	.title_gas {
		font-size: 34rpx;
		font-weight: 700;
	}

	.title_gas_num {
		font-size: 30rpx;
		font-weight: 500;
		margin-top: 10rpx;
	}

	.details_title1 {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #7f7f7f;
		margin-top: 20rpx;

		span {
			margin-left: 10rpx;
			font-size: 26rpx;
			color: #000;
		}
	}

	.btn_cancel {
		margin-top: 40rpx;
		margin-left: 30rpx;
		width: 300rpx;
	}
</style>