OfficeApp/pages/logistics/logisticDetil.vue

<template>
	<view class="content">
		<view v-if='showLoading'>
			<u-loading-page :loading="showLoading"></u-loading-page>
		</view>


		<view v-else>
			<view class="order">
				<p class="tit" v-if="goodsDetil.logistics.status==1">订单编号:&nbsp;&nbsp;{{goodsDetil.logistics.order_sn}}
				</p>
				<p class="tit" v-if="goodsDetil.logistics.status==2" style="background-color: #47BE62;">
					订单编号:&nbsp;&nbsp;{{goodsDetil.logistics.order_sn}}</p>
				<p class="tit" v-if="goodsDetil.logistics.status==3" style="background-color: red;">
					订单编号:&nbsp;&nbsp;{{goodsDetil.logistics.order_sn}}</p>
				<view class="contents">

					<!-- 已取消 -->
					<view class="left" v-if="goodsDetil.logistics.status==3">
						<view class="list">
							<text>
								取消时间
							</text>
							<view>
								{{goodsDetil.record[1].create_time}}
							</view>
						</view>
						<view class="list">
							<text>
								收货详情
							</text>
							<view>
								<view>
									{{goodsDetil.logistics.receiver_address}}
								</view>
								<view>
									{{ fuzzyName(goodsDetil.logistics.receiver_name) ||"顾客姓名"}}:&nbsp;&nbsp;{{goodsDetil.logistics.receiver_phone||"顾客电话"}}
								</view>
								<view>
									{{goodsDetil.create_time}}
								</view>
							</view>

						</view>

						<view class="list">
							<text>
								取货详情
							</text>
							<view>
								<view>
									{{goodsDetil.logistics.shop_address||"商家地址"}}
								</view>
								<view>
									{{goodsDetil.logistics.shop_name||"商家电话"}}
									:&nbsp;&nbsp;{{goodsDetil.logistics.shop_phone||"商家电话"}}
								</view>

							</view>
						</view>

						<view class="hr">

						</view>
						<view>
							<view>
								物流信息
							</view>
							<view style="margin: 10rpx 0;">
								<u-steps :current="record.length" direction="column">
									<u-steps-item :title="item.content" :desc="item.create_time"
										v-for="(item,index) in goodsDetil.record">
									</u-steps-item>
								</u-steps>
							</view>
						</view>
						<view class="pro_list">
							<text style="width: 15vw;">
								商品信息
							</text>
							<view>
								<view class="goods_tit" v-for="(item,index) in goodsDetil.product">
									<text style="width: 60vw;margin: 0;padding: 0;">{{item.goods_name}}</text>
									<text>X{{item.product_num}}{{item.goods_unit}}</text>
								</view>
							</view>
						</view>
					</view>


					<!-- 已送达 -->
					<view class="left" v-if="goodsDetil.logistics.status==2">
						<view class="list">
							<text>
								收货时间
							</text>
							<view>
								{{goodsDetil.record[2].create_time}}
							</view>
						</view>
						<view class="list">
							<text>
								收获详情
							</text>
							<view>
								<view>
									{{goodsDetil.logistics.receiver_address}}
								</view>
								<view>
									{{ fuzzyName(goodsDetil.logistics.receiver_name) ||"顾客姓名"}}:&nbsp;&nbsp;{{goodsDetil.logistics.receiver_phone||"顾客电话"}}
								</view>
								<view>
									{{goodsDetil.record[2].create_time}}
								</view>
							</view>

						</view>
						<view class="list">
							<text>
								取货详情
							</text>
							<view>
								<view>
									{{goodsDetil.logistics.shop_address||"商家地址"}}
								</view>
								<view>
									{{goodsDetil.logistics.shop_name||"商家电话"}}
									:&nbsp;&nbsp;{{goodsDetil.logistics.shop_phone||"商家电话"}}
								</view>
								<view>
									{{goodsDetil.record[1].create_time}}
								</view>
							</view>
						</view>
						<!-- 下划线 -->
						<view class="hr">

						</view>
						<view>
							<view>
								物流信息
							</view>
							<view style="margin: 10rpx 0;">
								<u-steps :current="record.length" direction="column">
									<u-steps-item :title="item.content" :desc="item.create_time"
										v-for="(item,index) in goodsDetil.record">
									</u-steps-item>
								</u-steps>
							</view>
						</view>
						<view class="pro_list">
							<text style="width: 15vw;">
								商品信息
							</text>
							<view>
								<view class="goods_tit" v-for="(item,index) in goodsDetil.product">
									<text style="width: 60vw;margin: 0;padding: 0;">{{item.goods_name}}</text>
									<text>X{{item.product_num}}{{item.goods_unit}}</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 已取货 -->
					<view class="left" v-if="goodsDetil.logistics.status==1">
						<view class=" list">
							<text>
								用户名称
							</text>
							<view>
								{{ fuzzyName(goodsDetil.logistics.receiver_name)}}
							</view>
						</view>
						<view class="list">
							<text>
								联系方式
							</text>
							<view @click.stop="callFn(goodsDetil.logistics.receiver_phone)">
								<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone" color="#2979ff"
									size="22"></u-icon> {{goodsDetil.logistics.receiver_phone}}
							</view>
						</view>
						<view class="list" style="margin: 10rpx 0;">
							<text style="width: 16vw;">
								收货地址
							</text>
							<view>
								<view>
									{{goodsDetil.logistics.receiver_address}}
								</view>
							</view>
						</view>
						<view>
							<view>
								物流信息
							</view>
							<view style="margin: 20rpx 0;">
								<u-steps :current="record.length-1" direction="column">
									<u-steps-item :title="item.content" :desc="item.create_time"
										v-for="(item,index) in (record)">
									</u-steps-item>
								</u-steps>
							</view>

						</view>
						<view class="hr">

						</view>
						<view class="pro_list">
							<text style="color: #999;width: 15vw;">
								商品信息
							</text>
							<view>
								<view class="goods_tit" v-for="(item,index) in goodsDetil.product">
									<text style="width: 60vw;margin: 0;padding: 0;">{{item.goods_name}}</text>
									<text>X{{item.product_num}}{{item.goods_unit}}</text>
								</view>
							</view>
						</view>


					</view>

					<view class="total" v-if="goodsDetil.logistics.status==2||goodsDetil.logistics.status==3">
						<text>共计{{goodsDetil.product_count}}件 </text>
					</view>
					<view class="btn" v-if="goodsDetil.logistics.status==1">
						<u-button type="primary" style="background-color: #FF7C32;border: 0; border-radius: 2vw;"
							@click="showPop=true"><u-icon name="car-fill" color="white" size="25"
								style="margin-right: 10rpx;;"></u-icon>
							货物送达</u-button>
					</view>

				</view>

			</view>

			<view>
				<u-modal :show="showPop" @close="showPop=false" title="请输入收件码" @confirm="confirm"
					:closeOnClickOverlay="true">
					<view class="slot-content">
						<u--input placeholder="请输入收件码" type="number" border="surround" v-model="take_code"></u--input>
					</view>
				</u-modal>
				<u-toast ref="uToast"></u-toast>
			</view>

		</view>

	</view>


	</view>

</template>

<script>
	import {
		doneDelivery
	} from "@/api/logistics.js"
	import {
		getDetil
	} from "@/api/logistics.js"
	export default {
		data() {
			return {
				showPop: false,
				showLoading: true,
				goodsDetil: undefined,
				flag: 0,
				take_code: ""
			}
		},
		computed: {
			record() {
				return this.goodsDetil.record.reverse()
			}
		},
		methods: {
			callFn(num) {
				uni.makePhoneCall({
					phoneNumber: num
				});
				// console.log(9999)
			},
			fuzzyName(name) {
				let length = name.length;
				let fuzzyChars = "*".repeat(length - 1);
				return name[0] + fuzzyChars;
			},
			confirm() {
				if (!this.take_code) return
				doneDelivery({
					take_code: this.take_code,
					logistics_id: this.goodsDetil.logistics.id
				}).then(res => {
					this.showToast()
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				})
				this.showPop = false

			},
			showToast() {
				this.$refs.uToast.show({
					type: 'success',
					title: '成功主题(带图标)',
					message: "操作成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
			},
		},
		onLoad(options) {
			getDetil({
				logistics_id: options.id
			}).then(res => {
				this.showLoading = false
				this.goodsDetil = res.data
			})

		},
	}
</script>

<style lang='scss' scoped>
	.content {
		background-color: #F5F5F5;
	}

	.btn {
		position: fixed;
		bottom: 20rpx;
		width: 90vw;
		left: 50%;
		transform: translateX(-50%);

	}

	.order {
		position: relative;
		background-color: white;
		border-radius: 15rpx;
		height: auto;
		box-sizing: border-box;
		overflow: hidden;
		margin: 2vh 2vw;

		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		/* padding: 2vh 2vw; */

		.tit {
			/* padding: 2vh 2vw; */
			font-size: 32rpx;
			font-weight: bold;
			background-color: #FF7C32;
			color: white;
			padding: 30rpx 20rpx;
		}

		.contents {
			background-color: #fff;
			padding: 30rpx 20rpx;

			.list {
				margin: 10rpx 0;
			}


			.hr {
				border-bottom: 1px dashed #0122C7;
				margin: 20rpx 0;
			}
		}



		.left {
			.list {
				display: flex;

				view {
					flex: 8;

					view {
						margin-bottom: 10rpx;
					}
				}

				text {
					flex: 2;
				}

			}
		}

		.pro_list {
			display: flex;

			text {
				margin-right: 20rpx;
			}
		}

		.total {
			/* font-family: "宋体"; */
			margin: 20rpx 0;
			color: #3274F9;
			font-weight: bold;
			font-size: 32rpx;
			text-align: right;
		}

		.cil_left {
			width: 30rpx;
			height: 30rpx;
			background-color: #F5F5F5;
			border-radius: 30rpx;
			position: absolute;
			top: 110rpx;
			left: -15rpx;

		}

		.cil_right {
			width: 30rpx;
			height: 30rpx;
			background-color: #F5F5F5;
			border-radius: 30rpx;
			position: absolute;
			top: 110rpx;
			right: -15rpx;

		}

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

		.tost_tit {
			text-align: center;
		}

	}
</style>