yihuo/pages/store/pick_up.vue

<template>
    <view>
        <view class="font3  paddingX14 tip" >
           <text class="cuIcon-warnfill" style="font-size: 32rpx;margin-right: 12rpx;"></text> 您的包裹一般在5个工作日内发货，如遇特殊情况可能会有延迟，敬请谅解~
        </view>
        <scroll-view
            class="wrapper"
            :style="{ top: top + 35 + 'px' }"
            scroll-y
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
            @scrolltolower="loadMore"
        >
            <view class="paddingX14">
                <view v-for="item in tableData" :key="item.tradeNo" class="cell">
                    <view class="top font2">
                        <view class="flex-align-between">
                            <text class="">下单时间：{{ item.createTime }}</text>
                            <text class="color-money" v-if="item.status === 0">待支付运费</text>
                            <text class="color-green" v-if="item.status === 99">已完成</text>
                            <text class="color-money" v-else-if="item.status === 1">
                                已进仓库进行配货
                            </text>
                            <text class="color-money" v-else-if="item.status === 2">待收货</text>
                            <text class="color-money" v-else-if="item.status === 10">已取消</text>
                            <text class="color-money" v-else-if="item.status === 11">超时取消</text>
                            <text class="color-money" v-else-if="item.status === 12">系统取消</text>
                        </view>
                        <view v-if="item.status === 0" class="paddingT5">
                            {{ item.paymentTimeoutTime }} 将自动取消该订单，如有优惠券，将自动退回
                        </view>
                    </view>
                    <view class="express flex-align">
                        <view class="location cuIcon-locationfill" style="font-size: 32rpx"></view>
                        <view class="flex1 marginL10">
                            <view class="font4 bold">
                                {{ item.contactName }}，{{ item.contactNo }}
                            </view>
                            <view class="font4 paddingT7">
                                {{ item.province }}{{ item.city }}{{ item.district
                                }}{{ item.address }}
                            </view>
                        </view>
                    </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-image translateX"
                                    mode="aspectFit"
                                    :src="goods.data.cover"
                                />
                                <view
                                    class="bg-title bold"
                                    :style="
                                        'background-image:url(' + ossurl.welfare.detail.numBg + ')'
                                    "
                                >
                                    x{{ goods.total }}
                                </view>
                            </view>
                        </scroll-view>
                        <view v-else class="flex-align-around padding14 itemList">
                            <view class="item" v-for="(goods, index) in item.list" :key="index">
                                <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.total }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="flex-align font4 marginX15 paddingT14 border-top">
                        <text style="color: #666666" class="flex-shrink0">订单号：</text>
                        <view class="color-2 text-right flex1 line-ellipsis ">
                            {{ item.tradeNo }}
                        </view>
                        <button
                            class="btn-clear copy marginL5 flex-shrink0"
                            @click.stop="copy(item.tradeNo)"
                        >
                            复制
                        </button>
                    </view>
                    <view
                        class="flex-align font4 paddingX15 paddingT15"
                        v-if="item.paymentTime"
                    >
                        <text style="color: #666666">付款时间：</text>
                        <view class="color-2">{{ item.paymentTime }}</view>
                    </view>
                    <view
                        class="flex-align-between font4 paddingX15 paddingT15"
                        v-if="item.status === 12 && item.cancelRemark"
                    >
                        <text style="color: #666666">备注</text>
                        <view class="color-money">{{ item.cancelRemark }}</view>
                    </view>
                    <view class="flex-align-end paddingX15 paddingY15">
                        <view class="flex-align">
                            <view class="font4">
                                <text class="">配送费：</text>
                                <text class="color-theme">¥{{ item.expressAmount }}</text>
                            </view>
                            <button
                                v-if="[1, 2, 99].includes(item.status)"
                                class="btn marginL15"
                                @click="showExpress(item)"
                            >
                                物流信息
                            </button>
                        </view>
                    </view>
                </view>
            </view>
            <empty v-if="isEmpty" :top="200" />
        </scroll-view>
    </view>
</template>
<script>
    import pageMixin from './../../mixin/page'
    import empty from '@/components/empty'
    import { LEVEL_MAP } from '@/utils/config'
    import { throttle } from '@/utils'
    import ossurl from '@/utils/ossurl'
    export default {
        mixins: [pageMixin],
        components: { empty },
        data() {
            return {
                ossurl,
                LEVEL_MAP,
                refreshing: false
            }
        },
        computed: {
            top() {
                let height = this.$store.state.systemInfo.statusBarHeight + 36 + 50 + 10
                return height
            },
            itemWidth() {
                let width = this.$store.state.systemInfo.screenWidth
                width = (width - 8 - 40) / 3
                let height = (165 / 109) * width
                return { width, height }
            }
        },
        mounted() {
            this.refresh(true)
        },
        methods: {
            pullRefresh() {
                this.refreshing = true
                this.refresh()
            },
            async loadData(loading = false) {
                const res = await this.$service.award.takeList(this.pageNum, this.pageSize, loading)
                setTimeout(() => {
                    this.refreshing = false
                }, 1000)
                return this.changeData(res)
            },
            changeData(res) {
                if (!res) return false
                res.forEach((item) => {
                    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
            },
            copy(text) {
                this.$common.copy(text)
            },
            pay(item) {
                throttle.call(() => {
                    this.realPay(item)
                })
            },
            realPay(item) {},
            showExpress(item) {
                this.$router.push('packages', { type: 2, tradeNo: item.tradeNo })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }
    .wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .cell {
        background: #fff;
        border-radius: 16rpx;
        padding: 0;
        margin-bottom: 20rpx;
        position: relative;
        overflow: hidden;
        .top {
            margin: 0 30rpx;
            padding: 20rpx 0;
            // height: 60rpx;
            border-bottom: 2rpx solid rgba(0,0,0,0.05);;
        }
        .express {
            padding: 28rpx 0;
            margin: 0 30rpx;
            border-bottom: 2rpx solid rgba(0,0,0,0.05);;
        }
        .item-wrapper {
            margin: 40rpx 0 30rpx 0;
            height: 182rpx;
            width: 100%;
        }
        .scroll-wrapper {
            margin: 28rpx 0 28rpx 28rpx;
            overflow: hidden;
            height: 182rpx;
            white-space: nowrap;
            width: 100%;
            .item {
                display: inline-block;
                margin-right: 8rpx;
            }
        }
        .item {
            width: 158rpx;
            height: 206rpx;
            background: #ffffff;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            opacity: 1;
            position: relative;
            .super {
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                width: 120rpx;
                height: 182rpx;
            }
            .super-image {
                width: 146rpx;
                height: 170rpx;
            }
            .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;
            }
        }
        .copy {
            padding: 0 6rpx;
            height: 32rpx;
            line-height: 32rpx;
            border-radius: 8rpx;
            text-align: center;
            color: #000;
            font-size: 24rpx;
            background: #FEC433;
        }
        .btn {
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;
            padding: 0 20rpx;
            color: #000;
            font-size: 24rpx;
            background: #FEC433;
            border-radius: 24rpx;
            ::after{
              display: none;
            }
        }
    }
    .border-top {
        border-top: 2rpx solid rgba(0,0,0,0.05);;
    }
    .itemList {
        background: #f8f8f8;
        border-radius: 12rpx;
    }
    .itemListBox {
        padding: 20rpx 28rpx;
    }
    .tip{
      font-size: 24rpx;
      background-color: #FEC433;
      padding: 8rpx 20rpx;
      display: flex;
      align-items: center;
    }
</style>