caimei-applets-store/pages/views/order/order-logistics.vue

<template>
    <view class="container logistics clearfix">
        <!-- 商品 -->
        <view class="logistics-container">
            <view class="logistics-batch" v-for="(item, index) in goodsList" :key="index">
                <view class="order-item" v-for="(comItem, comIndex) in item.companyList" :key="comIndex">
                    <view class="goods-title">
                        <view class="title-logo"><image :src="comItem.shopLogo" mode=""></image></view>
                        <view class="title-text">{{ comItem.name }}</view>
                    </view>
                    <view class="goods-item" v-for="(pros, prosIndex) in comItem.productsList" :key="prosIndex">
                        <view class="goods-pros-t">
                            <view class="pros-img"><image :src="pros.image" alt="" /></view>
                            <view class="pros-product">
                                <view class="producttitle">{{ pros.productName }}</view>
                                <view class="productspec">
                                    购买数量：
                                    <text class="color">{{ pros.number }}</text>
                                </view>
                                <view class="productspec">
                                    已发货数量：
                                    <text class="color">{{ pros.logNumber }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="logistics-template">
                    <!-- 物流信息 -->
                    <view
                        class="logistics-content"
                        v-if="item.logisticsData.length > 0"
                        v-for="(logItem, loIndex) in item.logisticsData"
                        :key="loIndex"
                    >
                        <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, loIndex)">
                                            {{ logItem.expressname }}：
                                            <text class="expressNumber">{{ logItem.expressNumber }}</text>
                                            <text class="clipboard" @click.stop="clipboard(logItem.expressNumber)">
                                                复制
                                            </text>
                                            <text
                                                class="arrow-showMore iconfont icon-web_xiangxiazhankai"
                                                :style="{
                                                    transform: logItem.isOpen ? 'rotate(180deg)' : 'rotate(0)',
                                                    transition: 'transform 0.3s ease'
                                                }"
                                            ></text>
                                        </view>
                                        <view class="main-bot">发货时间：{{ logItem.expressNewtime }}</view>
                                    </view>
                                    <view
                                        v-if="logItem.expressRecord.length > 0"
                                        v-for="(infoItem, infoIndex) in logItem.expressRecord"
                                        :key="infoIndex"
                                        :class="{ 'logistics-warp--hide': !logItem.isOpen }"
                                        class="logistics-main-bot logistics-animation"
                                        :style="{
                                            transform: logItem.isOpen ? 'translateY(0)' : 'translateY(-50%)',
                                            '-webkit-transform': logItem.isOpen ? 'translateY(0)' : 'translateY(-50%)'
                                        }"
                                    >
                                        {{ infoItem.time | dateFormat }} {{ infoItem.desc }}
                                    </view>
                                    <view
                                        v-if="logItem.expressRecord.length < 1"
                                        :class="{ 'logistics-warp--hide': !logItem.isOpen }"
                                        class="logistics-main-bot logistics-animation"
                                        :style="{
                                            transform: logItem.isOpen ? 'translateY(0)' : 'translateY(-50%)',
                                            '-webkit-transform': logItem.isOpen ? 'translateY(0)' : 'translateY(-50%)'
                                        }"
                                    >
                                        暂无物流信息
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="logistics-content" v-else>暂无物流信息</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import thorui from '@/components/common/tui-clipboard/tui-clipboard.js'
import { fetchLogisticsDetail } from '@/services/api/order.js'
import { dateFormat } from '@/common/utils.js'
export default {
    filters: {
        dateFormat(value) {
            if (!value) return '未知'
            if (value instanceof Date) {
                return dateFormat(value, 'yyyy-MM-dd hh:mm:ss')
            } else {
                value = new Date(value)
                return dateFormat(value, 'yyyy-MM-dd hh:mm:ss')
            }
        }
    },
    data() {
        return {
            orderId: '',
            goodsList: []
        }
    },
    onLoad(option) {
        //商品数据
        this.orderId = option.orderId
        this.getData()
    },
    methods: {
        navToListPage(id) {
            // this.$router.navigateTo('goods/product')
            // this.$api.navigateTo(`/pages/goods/product?id=${id}`)
        },
        showlogistics(index, loIndex) {
            let getGoodsList = this.goodsList[index],
                isOpen = getGoodsList.logisticsData[loIndex]['isOpen']
            this.goodsList[index].logisticsData[loIndex]['isOpen'] = !isOpen
        },
        clipboard(data) {
            thorui.getClipboardData(data, res => {
                if (res) {
                    this.$toast('复制成功')
                } else {
                    this.$toast('复制失败')
                }
            })
        },
        async getData() {
            try {
                const { data: resData } = await fetchLogisticsDetail({ orderId: this.orderId })
                // 添加订单列表信息
                let orderListArr = []
                resData.forEach((item, index) => {
                    let logisticsArr = [],
                        companyList = [],
                        shopOrderList = item.shopOrderList,
                        logisticsInfos = item.logisticsInformationList
                    // 添加物流信息
                    if (logisticsInfos.length > 0) {
                        logisticsInfos.forEach((loItem, loIndex) => {
                            let newRouters = []
                            logisticsArr.push({
                                expressname: loItem['logisticsCompanyName'],
                                expressNumber: loItem['nu'],
                                expressNewtime: item.deliveryTime,
                                isOpen: false
                            })
                            if (loIndex == 0) {
                                logisticsArr[loIndex]['isOpen'] = true
                            }
                            loItem.routers = JSON.parse(loItem.info)
                            if (loItem.routers) {
                                loItem.routers.forEach((rItem, rIndex) => {
                                    newRouters.push({
                                        desc: rItem.context,
                                        time: rItem.time
                                    })
                                })
                                logisticsArr[loIndex]['expressRecord'] = [...newRouters]
                            } else {
                                logisticsArr[loIndex]['expressRecord'] = []
                            }
                        })
                    }
                    // 供应商信息
                    shopOrderList.forEach((shopItem, shopIndex) => {
                        let prosListArr = [],
                            cmLogisticsRecords = shopItem.logisticsRecordList
                        // 商品信息
                        cmLogisticsRecords.forEach((prosItem, prosIndex) => {
                            prosListArr.push({
                                id: prosItem.organizeProductID,
                                productName: prosItem.productName,
                                image: prosItem.image,
                                number: prosItem.buyNum,
                                logNumber: prosItem.num
                            })
                        })
                        companyList.push({
                            shopLogo: shopItem.shopLogo,
                            name: shopItem.shopName,
                            showGoods: cmLogisticsRecords.length > 0,
                            productsList: [...prosListArr]
                        })
                    })
                    orderListArr.push({
                        logisticsData: [...logisticsArr],
                        companyList: [...companyList]
                    })
                })
                this.goodsList = [...orderListArr]
            } catch (e) {
                console.log('获取物流信息失败')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    height: auto;
}
.logistics-container {
    width: 100%;
    height: auto;
    float: left;
    background: #f7f7f7;
    border-top: 1px solid #f8f8f8;
    .logistics-batch {
        display: flex;
        flex-direction: column;
        margin-bottom: 24rpx;
    }
    .order-item {
        width: 702rpx;
        padding: 24rpx 24rpx 12rpx 24rpx;
        height: auto;
        float: left;
        background: #ffffff;
        margin-bottom: 20rpx;
        .goods-title {
            width: 100%;
            height: 48rpx;
            float: left;
            margin-bottom: 12rpx;
            .title-logo {
                width: 48rpx;
                height: 48rpx;
                float: left;
                border-radius: 8rpx;
                border: 1px solid #e1e1e1;
                image {
                    border-radius: 8rpx;
                    width: 48rpx;
                    height: 48rpx;
                }
            }
            .title-text {
                float: left;
                margin-left: 16rpx;
                font-size: 28rpx;
                color: #333333;
                text-align: left;
                line-height: 48rpx;
                font-weight: bold;
            }
        }
        .goods-item {
            width: 100%;
            height: auto;
            border-bottom: 1px solid #e1e1e1;
            &:last-child {
                border-bottom: none;
            }
        }
        .goods-pros-t {
            display: flex;
            align-items: center;
            width: 100%;
            height: 180rpx;
            padding: 20rpx 0;
            .pros-img {
                width: 180rpx;
                height: 180rpx;
                border-radius: 10rpx;
                margin: 0 26rpx 0 0;
                border: 1px solid #f3f3f3;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
            }
        }
        .pros-product {
            width: 468rpx;
            height: 100%;
            line-height: 36rpx;
            font-size: 26rpx;
            position: relative;
            .producttitle {
                width: 100%;
                display: inline-block;
                height: auto;
                text-overflow: ellipsis;
                display: -webkit-box;
                word-break: break-all;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: 28rpx;
            }
            .productspec {
                height: 36rpx;
                color: #999999;
                line-height: 36rpx;
                font-size: 26rpx;
                .color {
                    color: #333333;
                }
            }
        }
    }
}

.logistics-template {
    width: 702rpx;
    height: 100%;
    background: #ffffff;
    float: left;
    padding: 24rpx 24rpx 12rpx 24rpx;
    .logistics-content {
        width: 100%;
        padding: 20rpx 0;
        height: auto;
        .arrow-showMore {
            position: absolute;
            right: 24rpx;
            z-index: 99;
        }
        .logistics-top {
            width: 100%;
            height: 40rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            color: #333;
            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: 32rpx;
                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: 26rpx;
                color: #333;
                text-align: left;
            }
            .expressNumber {
                width: 250rpx;
                display: inline-block;
            }
        }
        .logistics-main-top {
            width: 100%;
            height: auto;
            float: left;
            padding-top: 24rpx;
            .main-top,
            .main-bot {
                font-size: 28rpx;
                color: #333;
                line-height: 40rpx;
                margin: 4rpx 0;
            }
        }
        .logistics-main-bot {
            position: relative;
            width: 100%;
            height: auto;
            font-size: 24rpx;
            color: #333;
            line-height: 56rpx;
            text-align: justify;
            float: left;

            padding-left: 40rpx;
            margin: 12rpx 0;

            &::before {
                position: absolute;
                left: 0;
                top: 18rpx;
                content: '';
                display: inline-block;
                width: 20rpx;
                height: 20rpx;
                background-color: #555555;
                border-radius: 50%;
                margin-right: 4rpx;
                vertical-align: middle;
            }
        }
        .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: 80rpx;
            height: 40rpx;
            background: #fff8fd;
            text-align: center;
            font-size: 22rpx;
            color: #ff457b;
            border-radius: 7rpx;
            line-height: 40rpx;
            display: inline-block;
        }
    }
}
</style>