ds_mobile_app/mobile/pages/order/lookLogistics.vue

<!-- 查看物流页面 -->
<template>
	<view class="look_logistics">
		<!-- 物流公司,及商品 start-->
		<view class="logistics_des">
			<view class="goods_image">
				<image :src="logisticsInfo.goodsImage" mode="aspectFill"></image>
			</view>
			<view class="logistics_desc" v-if="logisticsInfo.type!='1'">
				<view class="logistics_type">{{$L('承运公司')}}：<text>{{logisticsInfo.expressName ? logisticsInfo.expressName : '--'}}</text></view>
				<!-- <view class="logistics_type">物流状态：<text>{{logisticsInfo.type ? logisticsInfo.type : '--'}}</text></view> -->
				<view class="logistics_type">{{$L('物流单号')}}：<text>{{logisticsInfo.expressNumber ? logisticsInfo.expressNumber : '--'}}</text></view>
			</view>
			<view class="logistics_desc" v-if="logisticsInfo.type=='1'">
				<view class="logistics_type">{{$L('联系人')}}：<text>{{logisticsInfo.expressName ? logisticsInfo.expressName : '--'}}</text></view>
				<!-- <view class="logistics_type">物流状态：<text>{{logisticsInfo.type ? logisticsInfo.type : '--'}}</text></view> -->
				<view class="logistics_type">{{$L('联系电话')}}：<text>{{logisticsInfo.expressNumber ? logisticsInfo.expressNumber : '--'}}</text></view>
			</view>
		</view>
		<!-- 物流公司,及商品 end-->

		<!-- 物流轨迹 start -->
		<view class="lofistics_info" v-if="logisticsRouteList.length > 0">
			<!-- 纵向排列 -->
			<uni-steps :options=logisticsRouteList direction="column" :active="logisticsRouteList.length - 1"></uni-steps>
		</view>
		<view class="no_data" v-if="logisticsRouteList.length ==0&&logisticsInfo.type!='1'">
			<image :src="imgUrl+'order-detail/no_logistics.png'" mode=""></image>
			<text>{{$L('暂无物流信息，请耐心等待哦')}}~</text>
		</view>
		<!-- 物流轨迹 end -->
		<!-- 推荐商品 start-->
		<scroll-view class="recomment" scroll-y @scrolltolower='getData'>
			<recommendGoods ref='recomment_goods' />
		</scroll-view>
		<!-- 推荐商品 end-->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import recommendGoods from "@/components/recommend-goods.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import uniSteps from '@/components/uni-steps/uni-steps.vue';   //步骤条
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			recommendGoods,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniSteps
		},
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				logisticsInfo:{},  //物流信息
				logisticsRouteList:[],   //物流轨迹信息
			}
		},
		async onLoad(option) {
			//退款单号
			this.orderSn = option.orderSn;
			this.productLeadLittle = option.productLeadLittle;  //商品图片
			this.initData();
			this.getLogisticsTrajectory();
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		methods: {
			initData() {
			},



			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			//获取物流轨迹接口
			getLogisticsTrajectory(){
				let that = this;
				let param = {};
				param.url = 'v3/business/front/logistics/order/getTrace';
				param.method = 'GET';
				param.data = {};
				param.data.orderSn = that.orderSn;   //订单号
				that.$request(param).then(res => {
					if (res.state == 200) {
						let result = res.data;
						that.logisticsInfo = result || {};   //物流信息
						that.logisticsRouteList = result.routeList || [];   //物流轨迹信息
						that.logisticsRouteList = that.logisticsRouteList.map(function(item){
							return{
								"title":item.acceptTime,
								"desc":item.acceptStation
							}
						})
						that.loadFlag = true;
					} else {
						this.$api.msg(res.msg);
					}
				}).catch((e) => {
					//异常处理
				})
			},
			//获取推荐商品
			getData() {
				this.$refs.recomment_goods.getMoreData();
			},
		}
	}
</script>

<style lang='scss'>
	page {
		background: $bg-color-split;
		width: 750rpx;
		margin: 0 auto;
	}
	.look_logistics{
		width: 100%;
		background: #F5F5F5;
		.logistics_des{
			border-top: 20rpx solid #F5F5F5;
			background-color: #FFFFFF;
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			.goods_image{
				width: 200rpx;
				height: 200rpx;
				background: #F3F3F3;
				border-radius: 14rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 14rpx;
				}
			}
			.logistics_desc{
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 16rpx;
				.logistics_type{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #949494;
					line-height: 32rpx;
					margin: 20rpx 0;
				}
			}
		}
		.lofistics_info{
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			margin: 20rpx;
		}
		.no_data{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width: 210rpx;
				height: 210rpx;
				margin: 81rpx 0 43rpx;
			}
			text{
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #9A9A9A;
			}
		}
		.recomment{
			margin-top: 60rpx;
		}
	}
</style>