caimei-applets-hehe/pages/user/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="(loItem, 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)">
                                            {{ loItem.expressname }}：<text class="expressNumber">{{
                                                loItem.expressNumber
                                            }}</text>
                                            <text class="clipboard" @click.stop="clipboard(loItem.expressNumber)"
                                                >复制</text
                                            >
                                            <text
                                                class="arrow-showMore iconfont icon-web_xiangxiazhankai"
                                                :style="{
                                                    transform: loItem.isOpen ? 'rotate(180deg)' : 'rotate(0)',
                                                    transition: 'transform 0.3s ease'
                                                }"
                                            ></text>
                                        </view>
                                        <view class="main-bot"> 发货时间：{{ loItem.expressNewtime }} </view>
                                    </view>
                                    <view
                                        v-if="loItem.expressRecord.length > 0"
                                        v-for="(infoItem, infoIndex) in loItem.expressRecord"
                                        :key="infoIndex"
                                        :class="{ 'logistics-warp--hide': !loItem.isOpen }"
                                        class="logistics-main-bot logistics-animation"
                                        :style="{
                                            transform: loItem.isOpen ? 'translateY(0)' : 'translateY(-50%)',
                                            '-webkit-transform': loItem.isOpen ? 'translateY(0)' : 'translateY(-50%)'
                                        }"
                                    >
                                        {{ infoItem.time }} {{ infoItem.desc }}
                                    </view>
                                    <view
                                        v-if="loItem.expressRecord.length < 1"
                                        :class="{ 'logistics-warp--hide': !loItem.isOpen }"
                                        class="logistics-main-bot logistics-animation"
                                        :style="{
                                            transform: loItem.isOpen ? 'translateY(0)' : 'translateY(-50%)',
                                            '-webkit-transform': loItem.isOpen ? 'translateY(0)' : 'translateY(-50%)'
                                        }"
                                    >
                                        暂无物流信息
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="logistics-content" v-else> 暂无物流信息 </view>
                </view>
            </view>
        </view>
        <!-- 物流信息 -->
        <!-- <logistics-record ref="logistics"></logistics-record> -->
    </view>
</template>

<script>
import thorui from '@/components/clipboard/clipboard.thorui.js'
export default {
    components: {
        // logisticsRecord,
    },
    data() {
        return {
            orderId: '',
            goodsList: []
        }
    },
    onLoad(option) {
        //商品数据
        this.orderId = option.orderId
        this.getData()
    },
    methods: {
        navToListPage(id) {
            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) {
            console.log(data)
            thorui.getClipboardData(data, res => {
                if (res) {
                    this.$util.msg('复制成功', 2000, true, 'success')
                } else {
                    this.$util.msg('复制失败', 2000, true, 'none')
                }
            })
        },
        getData() {
            this.OrderService.QueryLogistics({
                orderId: this.orderId
            })
                .then(response => {
                    const resData = response.data
                    // 添加订单列表信息
                    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
                                }
                                if (loItem.routers) {
                                    loItem.routers.forEach((rItem, rIndex) => {
                                        newRouters.push({
                                            desc: rItem.desc,
                                            time: this.$api.timestampToTime(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(error => {
                    this.$util.msg(error.msg, 2000)
                })
        }
    }
}
</script>

<style lang="scss">
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: $font-size-28;
                color: $text-color;
                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: $font-size-26;
            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: $font-size-26;
                .color {
                    color: $text-color;
                }
            }
        }
    }
}

.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: $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;
            }
            .expressNumber {
                width: 250rpx;
                display: inline-block;
            }
        }
        .logistics-main-top {
            width: 100%;
            height: auto;
            float: left;
            padding-top: 24rpx;
            .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;
            float: left;
        }
        .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: $font-size-22;
            color: #ff457b;
            border-radius: 7rpx;
            line-height: 40rpx;
            display: inline-block;
        }
    }
}
</style>