yihuo/pages/packages/index.vue

<template>
    <page title="物流包裹" ref="pageRef" nav-color="#fff">
        <view v-if="data">
            <view>
                <view v-for="item in data" class="cell" :key="item.id">
                    <view class="top flex-align-between" v-if="item.expressNo">
                        <view class="font4">{{ item.expressCompany }}</view>
                        <view class="flex-align">
                            <view class="font4">{{ item.expressNo }}</view>
                            <button
                                class="btn-clear copy marginL5 flex-shrink0"
                                @click.stop="$common.copy(item.tradeNo)"
                            >
                                复制
                            </button>
                        </view>
                    </view>
                    <view class="top" v-else>
                        <view class="font4">待揽收</view>
                    </view>
                    <view class="font4 paddingT8 text-center color-theme">
                        共{{ item.num }}种商品
                    </view>
                    <view class="itemListBox">
                        <scroll-view
                            scroll-x
                            class="scroll-wrapper itemList"
                            v-if="item.list.length > 4"
                        >
                            <view class="item" v-for="(goods, index) in item.list" :key="index">
                                <image
                                    class="super"
                                    :src="LEVEL_MAP[goods.data.level].bg"
                                    mode="scaleToFill"
                                />
                                <image
                                    class="super-image translateX"
                                    mode="aspectFit"
                                    :src="goods.data.cover"
                                />
                                <view
                                    class="bg-title bold"
                                    :style="
                                        'background-image:url(' + ossurl.welfare.detail.numBg + ')'
                                    "
                                >
                                    x {{ goods.data.quantity ? goods.data.quantity : goods.total }}
                                </view>
                            </view>
                        </scroll-view>
                        <view v-else class="flex-align-around padding15 itemList">
                            <view class="item" v-for="(goods, index) in item.list" :key="index">
                                <image
                                    class="super"
                                    :src="LEVEL_MAP[goods.data.level].bg"
                                    mode="scaleToFill"
                                />
                                <image
                                    class="super-image translateX"
                                    mode="aspectFit"
                                    :src="goods.data.cover"
                                />
                                <view
                                    class="bg-title bold"
                                    :style="
                                        'background-image:url(' + ossurl.welfare.detail.numBg + ')'
                                    "
                                >
                                    x {{ goods.data.quantity ? goods.data.quantity : goods.total }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-if="item.expressNo" class="flex-align-end paddingX15 paddingY15">
                        <view>
                            <button class="btn marginL15" @click="showExpress(item)">
                                查看物流信息
                            </button>
                        </view>
                    </view>
                </view>
            </view>
            <empty v-if="isEmpty" :top="200" />
        </view>
    </page>
</template>
<script>
    import empty from '@/components/empty'
    import { LEVEL_MAP } from '@/utils/config'
    import ossurl from '@/utils/ossurl'
    export default {
        components: { empty },
        data() {
            return {
                LEVEL_MAP,
                data: null,
                isEmpty: false,
                type: 1,
                ossurl
            }
        },
        onLoad(options) {
            this.tradeNo = options.tradeNo
            this.type = options.type
        },
        mounted() {
            this.getData(true)
        },
        onPullDownRefresh() {
            this.getData()
        },
        methods: {
            async getData(loading = false) {
                let res = null
                if (this.type == 1) {
                    res = await this.$service.mall.packages(this.tradeNo, loading)
                } else {
                    res = await this.$service.award.packages(this.tradeNo, loading)
                }
                this.isEmpty = res && res.length === 0
                if (res && res.length > 0) {
                    res = this.changeData(res)
                }
                this.data = res
                console.log(this.data)
                uni.stopPullDownRefresh()
            },
            showExpress(item) {
                this.$router.push('express', {
                    tradeNo: this.tradeNo,
                    packageId: item.id,
                    type: this.type
                })
            },
            changeData(res) {
                if (!res) return false
                res.forEach((item) => {
                    item.num = item.itemList.length
                    let goods = item.itemList
                    let goodsMap = {}
                    goods.forEach((item) => {
                        let key = item.spuId + '_' + item.level
                        let obj = goodsMap[key]
                        if (obj) {
                            goodsMap[key] = {
                                total: obj.total + 1,
                                data: obj.data
                            }
                        } else {
                            goodsMap[key] = {
                                total: 1,
                                data: item
                            }
                        }
                    })
                    item.list = Object.values(goodsMap)
                })
                return res
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .cell {
        margin: 24rpx 28rpx;
        background: #fff;
        overflow: hidden;
        border-radius: 16rpx;
        .top {
            margin: 0 30rpx;
            padding: 20rpx 0;
            border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
        }
        .copy {
            padding: 0 6rpx;
            height: 32rpx;
            line-height: 32rpx;
            border-radius: 8rpx;
            text-align: center;
            font-size: 24rpx;
            background-color: #fec433;
            color: #000;
        }
        .scroll-wrapper {
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            .item {
                display: inline-block;
                margin-right: 20rpx;
            }
        }
        .item {
            width: 158rpx;
            height: 206rpx;
            position: relative;
            background: #ffffff;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            margin-right: 12rpx;
            .super {
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                width: 120rpx;
                height: 182rpx;
            }
            .super-image {
                width: 158rpx;
                height: 206rpx;
                border-radius: 6rpx 6rpx 6rpx 6rpx;
                background-color: #fff;
            }
            .bg-title {
                width: 36rpx;
                height: 32rpx;
                background-size: 100% 100%;
                font-size: 20rpx;
                font-family: Arial, Arial;
                font-weight: 400;
                color: #ffffff;
                line-height: 32rpx;
                text-align: center;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .btn {
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;
            padding: 0 20rpx;
            background-color: #fec433;
            color: #000;
            font-size: 28rpx;
            border-radius: 24rpx;
            border: none;
            box-shadow: none;
            ::after {
                display: none !important;
            }
        }
        .border-top {
            border-top: 2rpx solid rgba(0, 0, 0, 0.05);
        }
    }
    .itemListBox {
        padding: 20rpx 28rpx;
    }
    .itemList {
        background: #f8f8f8;
        border-radius: 12rpx;
        padding: 12rpx;
    }
</style>