junzitang/pagesT/order/orderLogistics.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="order-view">
			<view class="clearfix top-view">
				<view class="float_left">
					<text class="top-label">订单编号：</text>
					<text class="top-val">{{ order_detail.no }}</text>
				</view>
				<view class="float_right" @click="lianxi">
					<text class="ibonfont ibonkefu"></text>
					联系卖家
				</view>
			</view>
			<view class="goods-ul clearfix">
				<view class="goods-li" v-for="(item, index) in order_detail.goodsData" :key="index">
					<view class="num-view">x{{ item.buyNum }}</view>
					<image :src="item.images[0]" mode="aspectFill"></image>
				</view>
			</view>
			<view class="logistics-view">
				<view class="logistics-li">
					<text class="logistics-label">运单号：</text>
					<text class="logistics-val">{{ express_info.nu }}</text>
				</view>
				<view class="logistics-li">
					<text class="logistics-label">国内承运人：</text>
					<text class="logistics-val">{{ express_info.expressName }}</text>
				</view>
				<!-- <view class="logistics-li">
					<text class="logistics-label">国内承运人电话：</text>
					<text class="logistics-val">95543</text>
				</view> -->
			</view>
		</view>
		<view class="logistics-line">
			<u-time-line v-if="express_info.list.length">
				<u-time-line-item v-for="(item, index) in express_info.list" :key="index">
					<template v-slot:node>
						<view class="u-node" :style="{ background: index === 0 ? '#19be6b' : '#999999' }"></view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-desc" :class="[index === 0 ? 'u-order-desc-on' : '']">{{ item.context }}</view>
							<view class="u-order-time">{{ item.time }}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
			<u-time-line v-else>
				<u-time-line-item>
					<template v-slot:node>
						<view class="u-node" style="background:#19be6b"></view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-desc u-order-desc-on">商品已下单</view>
							<view class="u-order-time">{{ $_utils.formatDate(order_detail.createTime) }}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			express_info: {
				list: []
			},
			order_detail: {}
		};
	},
	onLoad(options) {
		this.order_id = options.id;
		this.getExpressInfoByOrderId();
		this.getOrderInfoById();
	},
	computed: {
		enterprisemobile() {
			return this.$store.state.enterpriseInfo.mobile;
		}
	},
	methods: {
		// 联系客服
		async lianxi() {
			uni.makePhoneCall({
				phoneNumber: this.enterprisemobile
			});
		},
		getExpressInfoByOrderId() {
			this.$u.api.getExpressInfoByOrderId(this.order_id).then(data => {
				this.express_info = data.data;
			});
		},
		// 获取订单详情
		getOrderInfoById() {
			this.$u.api.getOrderInfoById(this.order_id).then(data => {
				this.order_detail = data.data;
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.order-view {
	padding: 24upx;
	font-size: 28upx;
	border-top: 1px solid #e7e7e7;
	border-bottom: 24upx solid #f7f7f7;
	.top-view {
		.top-label {
			color: #999999;
		}
		.float_right {
			font-size: 24upx;
			.ibonkefu {
				color: #999999;
				font-size: 32upx;
				margin-right: 10upx;
			}
		}
	}
	.goods-ul {
		padding: 24upx 0;
		.goods-li {
			display: inline-block;
			margin-right: 24upx;
			width: 150upx;
			height: 150upx;
			background-color: #f4f4f4;
			border-radius: 10upx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
			.num-view {
				position: absolute;
				bottom: 0;
				right: 0;
				color: #ffffff;
				background-color: rgba($color: #000000, $alpha: 0.6);
				padding: 0 6upx;
				line-height: 32upx;
				font-size: 24upx;
				text-align: center;
				z-index: 1;
				min-width: 46upx;
			}
		}
	}
	.logistics-view {
		padding-top: 24upx;
		border-top: 1px solid #e7e7e7;
		.logistics-li {
			padding-bottom: 10upx;
			.logistics-label {
				color: #999999;
			}
		}
	}
}
.logistics-line {
	padding: 24upx;
	padding-left: 48upx;
	.u-node {
		width: 20rpx;
		height: 20rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	.u-order-desc-on {
		color: #333333;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
}
</style>