OfficeApp/components/logistiComptent/logistiCard/logistiCard.vue

<template>

	<view>
		<view>
			<view class="order">
				<p class="tit" v-if="goodsInfo.status==0" style="background-color: #0122C7;">
					商户姓名:&nbsp;&nbsp;{{goodsInfo.shop_name}}
				</p>

				<p class="tit" v-if="goodsInfo.status==1" style="background-color: #FF7C32;">
					收货人姓名:&nbsp;&nbsp;{{ fuzzyName(goodsInfo.receiver_name) }}</p>

				<p class="tit" v-if="goodsInfo.status==2" style="background-color: #47BE62;">
					收货人姓名:&nbsp;&nbsp;{{fuzzyName(goodsInfo.receiver_name)}}</p>
				<p class="tit" v-if="goodsInfo.status==3" style="background-color: red;display: flex;justify-content: space-between;">
					<text>收货人姓名:&nbsp;&nbsp;{{fuzzyName(goodsInfo.receiver_name)}}</text>
					<text>已取消</text>
        </p>
				<view class="contents">
					<!-- 已取货 -->
					<view class="left" v-if='goodsInfo.status==0'>
						<view style="margin: 0;padding: 0;" @click="goDetil">
							<view class="list">
								<text>
									店主姓名
								</text>
								<view>
									{{goodsInfo.shop_user ||'暂无'}}

								</view>
							</view>
							<view class="list">
								<text>
									联系方式
								</text>
								<view @click.stop="callFn(goodsInfo.shop_phone)">
									<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
										color="#2979ff" size="22"></u-icon>


									<text class="phone_num"> {{goodsInfo.shop_phone}}</text>
								</view>
							</view>
							<view class="list">
								<text>
									商家地址
								</text>
								<view>
									<view class="address">
										{{goodsInfo.shop_address}}
									</view>
								</view>
							</view>
							<view class="list">
								<text>
									订单编号
								</text>
								<view>
									<view class="address">
										{{goodsInfo.order_sn}}
									</view>
								</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 goodsInfo.products">
										<text class="goods_detil">{{item.goods_name}}</text>
										<text>X{{item.product_num}}{{item.goods_unit}}</text>
									</view>
								</view>
							</view>

						</view>

						<view class="total">
							共计{{goodsInfo.product_count}}件商品
						</view>

						<u-button v-if="!is_captain" type="primary" @click="qrqodeFn" class="custom-style"
							style="background-color: #0122C7;border: 0;">
							<u-icon name="scan" color="white" size="25" style="margin-right: 10rpx;"></u-icon>
							扫码取货</u-button>
						<u-button v-else type="primary" @click="goDetil" class="custom-style"
							style="background-color: #0122C7;border: 0;">

							查看详情</u-button>

					</view>


					<!-- 已送达 -->
					<view v-if="goodsInfo.status==1" class="left">

						<view style="margin: 0;padding:0" @click="goDetil">

							<view class="list">
								<text>
									收货地址
								</text>
								<view>
									<view class="address">
										{{goodsInfo.receiver_address}}
									</view>
								</view>
							</view>
							<view class="list">
								<text>
									订单编号
								</text>
								<view>
									{{goodsInfo.order_sn}}

								</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 goodsInfo.products">
										<text class="goods_detil">{{item.goods_name}}</text>
										<text>X{{item.product_num}}{{item.goods_unit}}</text>
									</view>
								</view>
							</view>


						</view>

						<view class="list">
							<text>
								联系电话
							</text>
							<view @click.stop="callFn(goodsInfo.receiver_phone)">
								<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone" color="#FF7C32"
									size="22"></u-icon> {{goodsInfo.receiver_phone}}

							</view>
						</view>

						<view class="total">
							共计{{goodsInfo.product_count}}件商品
						</view>

						<u-button v-if="!is_captain" type="primary" @click="showPop = true"
							style="background-color: #FF7C32; border: 0;"><u-icon name="car-fill" color="white"
								size="25" style="margin-right: 10rpx;"></u-icon> 货物送达</u-button>
						<u-button v-else type="primary" @click="goDetil" class="custom-style"
							style="background-color: #FF7C32;border: 0;">
							<u-icon name="scan" color="white" size="25" style="margin-right: 10rpx;"></u-icon>
							查看详情</u-button>

					</view>

					<!-- 详情 -->
					<view class="left" @click="goDetil" v-if='goodsInfo.status==2'>
						<view style="margin: 0;padding:0">
							<view class="list">
								<text>
									联系电话
								</text>
								<view @click.stop="callFn(goodsInfo.receiver_phone)">
									<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
										color="#47BE62" size="22"></u-icon> {{goodsInfo.receiver_phone}}

								</view>
							</view>
							<view class="list">
								<text>
									用户地址
								</text>
								<view>
									<view class="address">
										{{goodsInfo.receiver_address}}
									</view>
								</view>
							</view>

							<view class="list">
								<text>
									取货时间
								</text>
								<view>
									{{goodsInfo.qh_time}}

								</view>
							</view>
							<view class="list">
								<text>
									送达时间
								</text>
								<view>
									{{goodsInfo.ps_time}}

								</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 goodsInfo.products">
									<text class="goods_detil">{{item.goods_name}}</text>
									<text>X{{item.product_num}}{{item.goods_unit}}</text>
								</view>
							</view>
						</view>
' -->

						</view>
						<view class="total">
							共计{{goodsInfo.product_count}}件商品
						</view>

						<u-button type="primary" class="custom-style" style="background-color: #47BE62;border: 0;">
							<u-icon name="eye-fill" color="white" size="25" style="margin-right: 10rpx;"></u-icon>
							查看详情</u-button>


					</view>

					<!-- 已取消 -->
					<view class="left" @click="goDetil" v-if='goodsInfo.status==3'>
						<view style="margin: 0;padding:0">
							<view class="list">
								<text>
									联系电话
								</text>
								<view @click.stop="callFn(goodsInfo.receiver_phone)">
									<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
										color="#47BE62" size="22"></u-icon> {{goodsInfo.receiver_phone}}

								</view>
							</view>
							<view class="list">
								<text>
									用户地址
								</text>
								<view>
									<view class="address">
										{{goodsInfo.receiver_address}}
									</view>
								</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 goodsInfo.products">
										<text class="goods_detil">{{item.goods_name}}</text>
										<text>X{{item.product_num}}{{item.goods_unit}}</text>
									</view>
								</view>
							</view>

						</view>
						<view class="total">
							共计{{goodsInfo.product_count}}件商品
						</view>

						<u-button type="primary" class="custom-style" style="background-color: red;border: 0;">
							<u-icon name="eye-fill" color="white" size="25" style="margin-right: 10rpx;"></u-icon>
							查看详情</u-button>


					</view>



				</view>


			</view>

		</view>

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

	</view>


</template>

<script scoped>
	import {
		takeGoods,
		doneDelivery
	} from "@/api/logistics.js"
	export default {
		props: ['goodsInfo'],
		data() {
			return {
				is_captain: 0,
				list: [],
				flag: undefined,
				showPop: false,
				take_code: "",

			}
		},
		mounted() {
			this.is_captain = JSON.parse(uni.getStorageSync("USER_INFO")).is_captain
			// console.log(this.is_captain + '5656565656s')
		},
		methods: {
			fuzzyName(name) {
				let length = name.length;
				let fuzzyChars = "*".repeat(length - 1);
				return name[0] + fuzzyChars;
			},
			goDetil() {
				let status = this.goodsInfo.status
				uni.navigateTo({
					url: `/pages/logistics/${status==0?"deliveryDetil":"logisticDetil"}?id=${this.goodsInfo.id}`
				})
			},
			callFn(num) {
				uni.makePhoneCall({
					phoneNumber: num
				});
				// console.log(9999)
			},

			// 扫码
			qrqodeFn() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						that.takeGood(res.result)

					}
				});
			},
			// 取货{}
			takeGood(sn) {
				takeGoods({
					logistics_id: this.goodsInfo.id,
					order_id: this.goodsInfo.order_id,
					order_sn: sn
				}).then(res => {
					this.$emit('showTost')
					this.$emit('getlist')
				})

			},
			confirm() {
				if (!this.take_code) {
					return
				}
				this.doneGood()
				this.showPop = false
				this.showMore()

			},
			// 送达
			doneGood() {
				doneDelivery({
					take_code: this.take_code,
					logistics_id: this.goodsInfo.id
				}).then(res => {
					this.$emit('showTost')
					this.$emit('getlist')
				})
			},

		},


	}
</script>

<style lang='scss' scoped>
	.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;

				.norow {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				/* .phone_num {
					color: red;
					line-height: 22px;
					display: inline-block;
				} */

				view {
					flex: 8;

					view {
						margin-bottom: 10rpx;
					}
				}

				text {
					flex: 2;
				}

			}
		}

		.pro_list {
			display: flex;

			text {
				margin-right: 20rpx;
			}
		}

		.total {
			margin: 20rpx 0;
			color: #3274F9;
			font-weight: bold;
			font-size: 32rpx;
			text-align: right;
		}



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

			.goods_detil {
				width: 55vw;
				margin: 0;
				padding: 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.tost_tit {
			text-align: center;
		}

	}

	.address {
		width: 65vw;

	}

	.finishOrder {
		text {
			display: inline-block;
			margin-right: 30rpx
		}
	}
</style>