gas-cylinder-app/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 || orderData.state == 6">配送中</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">订单编号: <span>{{orderData.orderId}}</span></view>
			<view class="details_title1">配送地址: <span>{{orderData.address}}</span></view>
			<view class="details_title1" v-if="orderData.state == 5 || orderData.state == 6 ||  orderData.state == 4">
				联系电话:
				<span>{{orderData.phone}}</span> <u-icon color="#70B603" size="26" name="phone-fill"
					@click.native.stop="phone(orderData.phone)"></u-icon>
			</view>
			<view class="details_title1">下单时间: <span>{{orderData.orderTime}}</span></view>
			<view class="details_title1" v-if="orderData.state == 5 || orderData.state == 6 || orderData.state == 4">
				配送时间:
				<span>{{orderData.deliveryTime}}</span>
			</view>
			<view class="details_title1" v-if="orderData.state == 3 || orderData.state == 4">送达时间:
				<span>{{orderData.arriveTime}}</span>
			</view>
			<view class="card_steel_cylinder" v-if="orderData.orderInnerCodeList">
				<view class="steel_list_title">钢瓶列表</view>
				<u-checkbox-group v-model="checked" @change="checkboxChange">
					<view style="width: 100%;display: flex;flex-direction: column;">
						<view class="item_steel" v-for="(item,index) in orderData.orderInnerCodeList" :key="index">
							<view style="display: flex;align-items: center;">
								<u-checkbox :name="item.innerCode" :checked="item.checked"
									:disabled="item.state == 2"></u-checkbox>
								<view class="steel_title">{{index + 1}}</view>
								<view class="steel_title1">{{item.innerCode}}</view>
							</view>
							<view class="steel_red" v-if="item.state == 2">已取消</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="btn_cancel" v-if="orderData.state == 3">
			<u-button type="error" text="取消订单" @click="cancel"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: [],
				orderData: {},
				arrCode: [],
			}
		},
		mounted() {
			var value = uni.getStorageSync('detailsData');
			if (value.orderInnerCodeList) {
				value.orderInnerCodeList.forEach(item => {
					item.checked = false
				})
			}
			this.orderData = value
			uni.$on('refresh', () => {
				this.getOrderList()
			})
		},
		methods: {
			getOrderList() {
				var value = uni.getStorageSync('detailsData');
				this.orderData = value
			},
			// 选择钢瓶编号
			checkboxChange(value) {
				this.arrCode = value
			},
			cancel() {
				if (this.arrCode.length > 0) {
					const param = {
						id: Number(this.orderData.id),
						state: 4,
						chipUid: this.arrCode,
					}
					uni.showLoading({
						mask: true,
					});
					this.$api.put('/api/order/state', param).then(res => {
						if (res.code == 200) {
							this.frequencyCoding = ''
							this.list = []
							uni.$u.toast('取消成功')
							setTimeout(() => {
								uni.$emit('refresh');
								uni.navigateBack({
									delta: 1
								});
							}, 1000)
						} else {
							uni.$u.toast(res.data.msg)
						}
						uni.hideLoading();
					}).catch(() => {
						uni.hideLoading();
					})
				} else {
					uni.$u.toast('请选择取消单位内编号')
				}
				// 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 {
		display: flex;
		margin-left: 20rpx;
		color: #333;
		font-size: 32rpx;
		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: 40rpx;
		font-weight: 700;
	}

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

	.card_steel_cylinder {
		margin-top: 30rpx;
	}

	.steel_list_title {
		font-size: 32rpx;
		font-weight: 600;
	}

	.item_steel {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #E4E7ED;
	}

	.steel_title {
		margin-left: 20rpx;
		margin-right: 10rpx;
		color: #7f7f7f;
		font-size: 30rpx;
	}

	.steel_title1 {
		font-size: 30rpx;
	}

	.steel_red {
		color: #fa3534;
		font-size: 30rpx;
	}

	.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 {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
	}
</style>