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>
import thorui from '@/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>