<!--
|
* @Author: wuyue
|
* @Date: 2022-10-24 15:42:41
|
* @LastEditTime: 2022-12-12 17:48:01
|
* @LastEditors: wuyue
|
* @Descripttion:
|
* @version:
|
-->
|
<template>
|
<div class="logisticsTracking">
|
<div v-if="!formData.length">暂无物流信息</div>
|
<div v-else>
|
<div v-for="(item,index) in formData" :key="index">
|
<div class="logisticsText">{{item.companyName}}</div>
|
<span class="logisticsText">快递编号：{{item.expressNo}}</span>
|
<i class="isShowBtn el-icon-caret-bottom" @click="changeShow(item)"
|
v-show="(item.productInfos && item.productInfos.length || item.trackDetail&&item.trackDetail.length )&& !item.show"></i>
|
<i class="isShowBtn el-icon-caret-top" @click="changeShow(item)"
|
v-show="(item.productInfos && item.productInfos.length || item.trackDetail&&item.trackDetail.length ) && item.show"></i>
|
<div v-if="item.productInfos && item.productInfos.length && item.show">
|
<div class="label-style">包含商品：</div>
|
<el-table size="mini" stripe border :data="item.productInfos">
|
<el-table-column label="商品名称" prop="prodName"></el-table-column>
|
<el-table-column label="商品主编码" prop="prodCode"></el-table-column>
|
</el-table>
|
</div>
|
<div v-if="item.trackDetail && item.trackDetail.length && item.show">
|
<div class="label-style">物流信息：</div>
|
<el-table size="mini" stripe border :data="item.trackDetail">
|
<el-table-column label="时间" prop="date"></el-table-column>
|
<el-table-column label="流转信息" prop="logistic"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: ['formData'],
|
methods: {
|
/**
|
* 是否收起物流信息
|
*/
|
changeShow(item) {
|
this.$set(item, 'show', !item.show)
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.logisticsTracking {
|
.isShowBtn {
|
cursor: pointer;
|
font-size: 20px;
|
color: #909399;
|
}
|
.logisticsText {
|
display: inline-block;
|
}
|
.label-style {
|
line-height: 45px;
|
height: 45px;
|
color: #000;
|
font-size: 18px;
|
}
|
}
|
</style>
|
