WenWuGuanJia/answer_pages/gift/express_feed.vue

<template>
	<view class="wrap">
		<u-navbar title="订单物流" :placeholder="true" bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<view class="main" v-if="hasLoad">
			<view class="box">
				<view class="b-row">
					<view class="b-tit">快递公司</view>
					<view class="b-cont">
						<text class="s-text">{{ state.company }}</text>
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">快递单号</view>
					<view class="b-cont">
						<text class="s-text">{{ state.number }}</text>
						<text class="s-copy" @click="onCopy(state.number)">点击复制</text>
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">发货时间</view>
					<view class="b-cont">
						<text class="s-text">{{ timeFormat(state.deployed_at) }}</text>
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">当前状态</view>
					<view class="b-cont">
						<text class="s-text">{{ state.state_text }}</text>
					</view>
				</view>
			</view>
			<view class="feed-detail">
				<view class="address-data">
					<view class="iconfont icon-pos"></view>
					<text class="b-address">
						<text class="s-tit">收货地址:</text>
						<text class="s-cont">{{ state.address }}</text>
					</text>
				</view>
				<view class="feed-data">
					<view class="iconfont icon-feed"></view>
					<view class="feed-list">
						<view class="b-row" v-for="(item, index) in state.track_list" :key="index">
							<view class="s-cont">{{ item.context }}</view>
							<view class="s-time">{{ item.time }}</view>
						</view>
						<view class="b-text" v-if="state.track_list.length === 0">暂无数据</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
	</view>
</template>

<script>
import { getExpressFeed } from '@/service/api/gift.js';
// import mixinsCommon from '@/mixins/common.js';
// import mixinsAuth from '../../mixins/auth.js';
export default {
	// mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			state: {},
			hasLoad: false,
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		this.loadFeed(options.id);
	},
	methods: {
		loadFeed(recordId) {
			getExpressFeed(recordId).then(([err, res]) => {
				console.log('getExpressFeed', err, res);
				if (!err) {
					this.hasLoad = true;
					this.loadingType = -1;
					this.state = res;
				} else {
					this.loadingType = 3;
					this.loadingText = err.data.msg || '加载失败';
				}
			});
		}
	}
};
</script>

<style lang="scss">
// page {
// 	padding-bottom: env(safe-area-inset-bottom);
// 	background: $pq-bg-color;
// }

.wrap {
}

.box {
	margin-top: 30upx;
	background: #fff;
	padding: 15upx 0;

	.b-row {
		padding: 15upx 30upx;
		display: flex;
		// justify-content: space-between;

		.b-tit {
			font-size: 28upx;
			width: 180upx;
			color: #666;
		}

		.b-cont {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #333;
		}

		.s-copy {
			margin-left: 20upx;
			font-size: 24upx;
			color: #ffc300;
		}

		.s-province,
		.s-city,
		.s-area {
			margin-right: 10upx;
		}

		.s-phone {
			margin-left: 20upx;
		}

		.s-btn {
			padding: 0 30upx;
			background: #ffc300;
			color: #fff;
			font-size: 24upx;
			height: 60upx;
			line-height: 60upx;
			border-radius: 30upx;
		}
	}
}

.feed-detail {
	padding: 30upx;
	background: #fff;
	margin-top: 30upx;

	.address-data {
		display: flex;

		.iconfont {
			margin-right: 20upx;
			color: #999;
			font-size: 36upx;
		}

		.b-address {
			color: #999;
			font-size: 28upx;
			line-height: 40upx;

			.s-tit {
				margin-right: 10upx;
			}

			.s-cont {
			}
		}
	}

	.feed-data {
		margin-top: 60upx;
		display: flex;

		.iconfont {
			margin-right: 20upx;
			color: #aaa;
			font-size: 36upx;
		}

		.feed-list {
			.b-text {
				color: #999;
				font-size: 28upx;
			}

			.b-row {
				margin-bottom: 30upx;

				&:last-child {
					margin-bottom: 0;
				}

				&:first-child {
					.s-cont {
						color: #333;
					}

					.s-time {
						color: #666;
					}
				}

				.s-cont {
					color: #999;
					font-size: 28upx;
				}

				.s-time {
					margin-top: 10upx;
					color: #999;
					font-size: 26upx;
				}
			}
		}
	}
}
</style>