caimei-applets-hehe/components/cm-module/orderDetails/logisticsRecord.vue

<template name="logistics">
	<view class="logistics-template">
		<!-- 物流信息 -->
		<view class="logistics-content" v-if="logisticsData.length > 0" v-for="(item,index) in logisticsData" :key="index">
			<view class="logistics-top">
				<text class="name">物流信息</text>
			</view>
			<view class="logistics-warp">
				<view  class="logistics-warp__wrapper">
					<view class="logistics-main">
					 	<view class="logistics-main-top">
					 		<view class="main-top" @click="showlogistics(index)">
								{{item.expressname}}：{{item.expressNumber}}
								<text class="clipboard" @click="clipboard(item.expressNumber)">复制</text>
								<text class="arrow-showMore iconfont icon-web_xiangxiazhankai" :style="{'transform':item.isOpen?'rotate(180deg)':'rotate(0)'}"></text>
							</view>
					 		<view class="main-bot">
								发货时间：{{item.expressNewtime}}
							</view>
					 	</view>
						<view v-if="item.expressRecord.length > 0" v-for="(infoItem,infoIndex) in item.expressRecord" :key="infoIndex" :class="{'logistics-warp--hide':!item.isOpen}" class="logistics-main-bot logistics-animation" :style="{'transform':item.isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':item.isOpen?'translateY(0)':'translateY(-50%)'}" >
							{{infoItem.time}}  {{infoItem.desc}}
						</view>
						<view v-if="item.expressRecord" :class="{'logistics-warp--hide':!item.isOpen}" class="logistics-main-bot logistics-animation" :style="{'transform':item.isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':item.isOpen?'translateY(0)':'translateY(-50%)'}">
							暂无物流信息
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="logistics-content" v-else>
			暂无物流信息
		 </view>
	</view>
</template>

<script>
	const thorui = require("@/components/clipboard/clipboard.thorui.js")
	export default{
		name:"logistics",
		data() {
			return{
				title:'发票信息',
				logisticsData:''
			}
		},
		created(){
			
		},
		computed: {

		},
		methods:{
			initData(res) {
				this.logisticsData = res;
			},
			showlogistics(index){
				let isOpen = this.logisticsData[index]['isOpen'];
				this.logisticsData[index]['isOpen'] = !isOpen;
			},
			clipboard(data) {
				thorui.getClipboardData(data, (res) => {
					if (res) {
						this.$util.msg("复制成功",2000,true,'success');
					} else {
						this.$util.msg("复制失败",2000,true,'none');
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.logistics-template{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		float: left;
		.logistics-content{
			width: 702rpx;
			padding: 20rpx 24rpx;
			height: auto;
			.arrow-showMore {
				position: absolute;
				right: 24rpx;
				z-index: 99;
			}
			.logistics-top{
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				font-size: $font-size-28;
				color: $text-color;
				text-align: left;
				padding-bottom: 24rpx;
				border-bottom: 1px solid #F8F8F8;
				.name{
					float: left;
					font-weight: bold;
				}
				.icon-web_xiangxiazhankai{
					transform: rotate(0deg);
					transform-origin: center center;
					float: right;
					font-size: $font-size-32;
					color: #000000;
					/* transition: transform 0.3s ease;*/
					transition-property: transform;
					transition-duration: 0.3s;
					transition-timing-function: ease;
				}
				.icon-web_xiangxiazhankai-active{
					transform: rotate(180deg);
				}
			}
			.logistics-warp{
				width: 100%;
				overflow: hidden;
				.table{
					height: 76rpx;
					line-height: 76rpx;
					font-size: $font-size-26;
					color: $text-color;
					text-align: left;
				}
			}	
			.logistics-main-top{
				width: 100%;
				height: auto;
				float: left;
				padding-top: 24rpx;
				margin-bottom: 14rpx;
				.main-top,.main-bot{
					font-size: $font-size-28;
					color: $text-color;
					line-height: 40rpx;
					margin: 4rpx 0;
				}
			}
			.logistics-main-bot{
				width: 100%;
				height: auto;
				font-size: $font-size-24;
				color: $text-color;
				line-height: 56rpx;
				text-align: justify;
			}
			.logistics-animation {
				/* transition: transform 0.3s ease;*/
				transition-property: transform;
				transition-duration: 0.3s;
				transition-timing-function: ease;
			}
			.logistics-warp__wrapper{
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
			}
			.logistics-warp--hide {
				// padding: 0 0;
				// height: 0px;
				// line-height: 0px;
				display: none;
			}	
			.clipboard{
				width: 84rpx;
				height: 36rpx;
				background: linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
				text-align: center;
				font-size: $font-size-24;
				color: #FFFFFF;
				border-radius: 6rpx;
				line-height: 36rpx;
				display: inline-block;
				margin-left: 42rpx;
			}
		}
	}
</style>