OfficeApp/components/logistiComptent/logistiCard/logistiCard.vue

<template>

	<view class="order">

		<!-- <u-notify message="成功" duration="2000" show="true"></u-notify> -->
		<view v-if='goodsInfo.status !==2'>
			<view class="" @click="goDetil">
				<p v-if="goodsInfo.status==0">{{goodsInfo.shop_name}}</p>
				<p v-else>{{goodsInfo.user_name}}</p>
				<view class='phone' v-if="goodsInfo.status==0">联系方式 :{{goodsInfo.shop_phone}} </view>
				<view class='phone' v-else>联系方式 :{{goodsInfo.user_phone}} </view>
				<view class="content_box">
					<view class="left">
						<view v-if="goodsInfo.status==0">
							商家地址
						</view>
						<view v-if="goodsInfo.status==1">
							用户地址
						</view>
						<view style="margin: 20rpx 0;">
							订单编号
						</view>
						<view class="">
							采购商品
						</view>
					</view>
					<view class="right">
						<view class="goods_tit" v-if="goodsInfo.status==0">
							{{goodsInfo.shop_address}}
						</view>
						<view class="goods_tit" v-else>
							{{goodsInfo.user_address}}
						</view>
						<view style="margin: 20rpx 0;">
							{{goodsInfo.order_sn}}
						</view>
						<view class='product' v-for="(item,index) in goodsInfo.products" :key="index">
							<text class="goods_tit">{{item.goods_name}}</text>
							<text>X{{item.product_num}}{{item.goods_unit}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="icon" @click='getMore' v-if="flag">
				<image style="width: 70rpx;height: 70rpx;text-align: center;" src="@/static/img/logistics/more.png"
					alt="">
			</view> -->
		</view>

		<view v-else class='finishOrder' @click="goDetil">
			<view>
				<text style="color:#999">订单编号</text> <text> {{goodsInfo.order_sn}}</text>
			</view>
			<view class="phone">
				<text style="color:#999">联系方式</text> {{goodsInfo.user_phone}}
			</view>
			<view style="margin: 20rpx 0;">
				<text style="color:#999">收货时间</text> {{goodsInfo.xd_time||"暂未收货"}}
			</view>
			<view style="margin: 20rpx 0;">
				<text style="color:#999">送达时间</text> {{goodsInfo.pc_time||"暂未送达"}}
			</view>
			<view style="margin: 20rpx 0;">
				<text style="color:#999">取货时间</text> {{goodsInfo.qh_time||"暂未取货"}}
			</view>

		</view>
		<view class="total">
			共计{{goodsInfo.product_count}}件商品
		</view>
		<view class="cil_left">
		</view>
		<view class="cil_right">
		</view>
		<u-modal :show="showPop" @confirm="confirm" :content="popContent[goodsInfo.status]" @close="showPop=false"
			:closeOnClickOverlay="true"></u-modal>
		<u-button type="primary" @click="showPop = true" v-if='goodsInfo.status==0'>已取货</u-button>
		<u-button type="primary" @click="showPop = true" style="background-color: #34A853;border: none;"
			v-if='goodsInfo.status==1'>已送达</u-button>
		<u-button type="primary" @click="goDetil" style="background-color: red;border:none"
			v-if='goodsInfo.status==2'>查看详情</u-button>
	</view>


</template>

<script scoped>
	import {
		takeGoods,
		doneDelivery
	} from "@/api/logistics.js"
	export default {
		props: ['goodsInfo'],
		data() {
			return {

				list: [],
				flag: undefined,
				showPop: false,
				popContent: ["请确认已经收到货", "请确认已送达"]
			}
		},
		methods: {
			goDetil() {
				let status = this.goodsInfo.status
				uni.navigateTo({
					url: `/pages/logistics/${status==0?"deliveryDetil":"logisticDetil"}?id=${this.goodsInfo.id}`
				})
			},

			test() {
				this.showMore()
				this.getMore()
			},
			// 取货{}
			takeGood() {

				takeGoods({
					user_id: this.goodsInfo.courier_id,
					logistics_id: this.goodsInfo.id
				}).then(res => {
					this.$emit('showTost')
					this.$emit('getlist')
				})

			},
			async confirm() {
				await this.goodsInfo.status == 0 ? this.takeGood() : this.doneGood()
				this.showPop = false
				this.showMore()

			},
			// 送达
			doneGood() {
				doneDelivery({
					user_id: this.goodsInfo.courier_id,
					// user_id: 167,
					logistics_id: this.goodsInfo.id
				}).then(res => {
					this.$emit('showTost')
					this.$emit('getlist')
				})
			},
			showMore() {
				if (this.goodsInfo.products.length <= 3) {
					this.list = this.goodsInfo.products
				} else {
					this.flag = true
					for (let i = 0; i < 3; i++) {
						this.list.push(this.goodsInfo.products[i])
					}
				}
			},
			getMore() {
				if (this.flag) {
					for (let i = 3; i < this.goodsInfo.products.length; i++) {
						this.list.push(this.goodsInfo.products[i])
					}
					this.flag = false
				}
			}
		},

		mounted() {
			// this.showMore()
			console.log(this.goodsInfo)
			// console.log(this.goodsInfo)
			// conso

		}
	}
</script>

<style lang='scss' scoped>
	.order {
		position: relative;
		background-color: white;
		margin: 20rpx 0;
		border-radius: 15rpx;
		height: auto;
		padding: 2vh 3vw;
		box-sizing: border-box;

		.custom-style {
			border: 0;
			width: 25vw;
			position: absolute;
			top: 0;
			right: 0;
			height: 4vh;
			border-radius: 0 7px 0 7px;
		}

		.goods_tit {
			width: 60vw;

			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
			white-space: nowrap;
		}

		p {
			font-family: "PingFang SC-Medium";
			font-size: 32rpx;
			font-weight: bold;
		}

		.phone {
			color: #999999;
			padding: 10rpx 0;
			border-bottom: 1px dashed blue;
		}

		.content_box {
			display: flex;
			justify-content: space-between;
			margin: 15rpx 0;

			.left {
				flex: 1;
				color: #999999;
			}

			.right {
				flex: 4;

				.product {
					margin: 10rpx 0;
					display: flex;
					justify-content: space-between;
				}

				.icon_a {
					/* transform: translateX(180deg); */
					transform: rotate(90deg);
					display: inline-block;
					/* font-family: ; */
				}


			}
		}

		.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;

		}

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

		.icon {
			text-align: center;

		}
	}

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