shop-app/pages/order/detail/components/LogisitcsInfo.vue

<!--
 * @Author: ch
 * @Date: 2022-04-15 16:36:02
 * @LastEditors: ch
 * @LastEditTime: 2022-04-18 16:31:12
 * @Description: file content
-->
<template>
		<UiWhiteBox>
			<u-cell class="address" isLink v-if="lastLogisitcs" @click="$Router.push('/addressList')">
				<view slot="title" class="address--title">{{lastLogisitcs.context}}</view>
				<image class="address--icon" slot="icon" src="@/static/order/fj.png" />
				<view slot="label" class="address--label">
					<text>{{lastLogisitcs.time}}</text>
				</view>
			</u-cell>
			<u-cell class="address" :border="false">
				<view slot="title" :class="lastLogisitcs ? 'address--title__grey' :''">
					{{logisitcsInfo.recipientAddress}}
				</view>
				<image class="address--icon" slot="icon" v-if="lastLogisitcs" src="@/static/order/dw2.png" />
				<image class="address--icon" slot="icon" v-else src="@/static/order/dw.png" />
				<view slot="label" class="address--label">
					<text>{{logisitcsInfo.recipientName}}</text>
					<text>{{logisitcsInfo.recipientPhone}}</text>
				</view>
			</u-cell>
		</UiWhiteBox>
</template>
<script>
import UiWhiteBox from '@/components/UiWhiteBox.vue';
export default {
	components : {UiWhiteBox},
	props: {
		logisitcsInfo : {
			type : Object,
			defalut : () => ({})
		}
	},
	computed : {
		lastLogisitcs (){
			const list = this.logisitcsInfo && this.logisitcsInfo.logisticsDataList
			if(list && list.length > 0){
				return list[0]
			}else{
				return null
			}
			
		}
	}
	
}
</script>
<style lang="scss" scoped>
.address{
	/deep/.u-cell__body__content{
		padding: 10rpx 0;

	}
	&--title{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 500rpx;
		&__grey{
			color: $color-grey4;
		}
	}
	&--icon{
		width: 28rpx;
		height: 34rpx;
		margin-right: 30rpx;
	}
	&--label{
		margin-top: 26rpx;
		text{
			color: $color-grey4;
			margin-right: 40rpx;
		}
	}
}
</style>