yihuo/pages/store/goods_gift.vue

<template>
    <view>
        <scroll-view
            v-if="top"
            class="wrapper"
            :style="{ top: top + 'px' }"
            scroll-y
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
        >
            <view class="paddingX14 paddingB20">
                <view class="cell" v-for="item in tableData" :key="item.tradeNo">
                    <view class="flex-align-between time">
                        <view>赠送时间：{{ item.createTime }}</view>
                    </view>
                    <scroll-view scroll-x class="scroll-wrapper" 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: LEVEL_MAP[goods.data.level].bgColor }"
                            >
                                x {{ goods.total }}
                            </view>
                        </view>
                    </scroll-view>
                    <view v-else class="flex-align-around padding15">
                        <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: LEVEL_MAP[goods.data.level].bgColor }"
                            >
                                x {{ goods.total }}
                            </view>
                        </view>
                    </view>
                    <view class="flex-align top-line">
                        <view class="order-no">订单号：{{ item.tradeNo }}</view>
                        <button
                            class="btn-clear copy marginL5 flex-shrink0"
                            @click.stop="$common.copy(item.tradeNo)"
                        >
                            复制
                        </button>
                    </view>
                    <view class="flex-align">
                        <view class="gift-no">受赠人：</view>
                        <view class="flex-align">
                            <image class="gift_img" :src="item.toUser.avatar" mode="aspectFit" />
                            <view class="color-white">{{ item.toUser.nickname }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <empty v-if="isEmpty" :top="200" light />
        </scroll-view>
    </view>
</template>
<script>
import pageMixin from '../../mixin/page'
import empty from '@/components/empty'
import { LEVEL_MAP } from '@/utils/config'

export default {
    mixins: [pageMixin],
    components: { empty },
    data() {
        return {
            LEVEL_MAP,
            refreshing: false,
            flag: 0
        }
    },
    computed: {
        top() {
            let height = this.$store.state.systemInfo.statusBarHeight + 36 + 50 + 10
            return height
        }
    },
    mounted() {
        this.refresh(true)
    },
    methods: {
        pullRefresh() {
            this.refreshing = true
            this.refresh()
        },
        async loadData(loading = false) {
            const res = await this.$service.award.transferOrderPageMy(
                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
        }
    }
}
</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: rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 20rpx 0px rgba(167, 110, 244, 0.5);
    border: 2rpx solid rgba(255, 255, 255, 0.4);
    border-radius: 16rpx;
    padding: 0;
    margin-bottom: 20rpx;
    position: relative;
    overflow: hidden;
    .time,
    .order-no {
        margin: 0 30rpx;
        color: #fff;
        font-size: 24rpx;
        height: 60rpx;
        line-height: 60rpx;
    }
    .time {
        border-bottom: 2rpx solid rgba($color: #e9d9ff, $alpha: 0.2);
    }
    .top-line {
        border-top: 2rpx solid rgba($color: #e9d9ff, $alpha: 0.2);
    }
    .item-wrapper {
        margin: 40rpx 0 30rpx 0;
        height: 182rpx;
        width: 100%;
    }
    .scroll-wrapper {
        margin: 40rpx 0 30rpx 30rpx;
        overflow: hidden;
        height: 182rpx;
        white-space: nowrap;
        width: 100%;
        .item {
            display: inline-block;
            margin-right: 8rpx;
        }
    }
    .copy {
        padding: 0 6rpx;
        height: 32rpx;
        line-height: 32rpx;
        border-radius: 8rpx;
        text-align: center;
        font-size: 24rpx;
        border: 1px solid #4d6fff;
        color: #4d6fff;
    }
    .item {
        width: 120rpx;
        height: 182rpx;
        position: relative;
        .super {
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
            width: 120rpx;
            height: 182rpx;
        }
        .super-image {
            position: absolute;
            top: 14rpx;
            width: 109rpx;
            height: 120rpx;
        }
        .bg-title {
            color: #fff;
            font-size: 24rpx;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 16rpx;
            padding: 2rpx 0;
        }
    }
    .gift-no {
        margin: 0 10rpx 0 30rpx;
        color: #fff;
        font-size: 24rpx;
        height: 60rpx;
        line-height: 60rpx;
    }
    .gift_img {
        width: 40rpx;
        height: 40rpx;
        font-size: 24rpx;
        border-radius: 50%;
        margin-right: 10rpx;
    }
}
</style>