yihuo/pages/store/convert.vue

<template>
    <view>
        <scroll-view
            class="wrapper"
            :style="{ top: top + 'px' }"
            scroll-y
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
            @scrolltolower="loadMore"
        >
            <view class="paddingX14">
                <view class="cell" v-for="item in tableData" :key="item.tradeNo">
                    <view class="flex-align-between time">
                        <view>兑换时间：{{ item.createTime }}</view>
                        <text class="color-green" v-if="item.status === 99">已完成</text>
                        <text class="color-money" v-else-if="item.status === 12">系统取消</text>
                    </view>
                    <view class="font2 paddingT18 text-center" style="color: #999">兑换源石：</view>
                    <view class="bold paddingT2 text-center" style="color: #000; font-size: 64rpx">
                        {{ item.totalMagicAmount }}
                    </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 padding15 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 top-line">
                        <view class="order-no">订单号：{{ item.tradeNo }}</view>
                        <button
                            class="btn-clear copy flex-shrink0"
                            @click.stop="$common.copy(item.tradeNo)"
                        >
                            复制
                        </button>
                    </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'
    import ossurl from '@/utils/ossurl'
    export default {
        mixins: [pageMixin],
        components: { empty },
        data() {
            return {
                LEVEL_MAP,
                refreshing: false,
                ossurl
            }
        },
        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.convertList(
                    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 {
        border-radius: 12rpx;
        padding: 2rpx 30rpx;
        margin-bottom: 20rpx;
        position: relative;
        overflow: hidden;
        color: #999999;
        background-color: #fff;
        .time,
        .order-no {
            font-size: 24rpx;
            line-height: 44rpx;
            color: #999999;
        }
        .time {
            border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
            padding: 22rpx 0;
        }
        .top-line {
            padding: 22rpx 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .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: 2rpx 10rpx;
            height: 32rpx;
            line-height: 32rpx;
            border-radius: 8rpx;
            text-align: center;
            font-size: 24rpx;

            background: #fec433;
            color: #000000;
            margin: 0;
        }
        .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;
            }
        }
    }
    .itemList {
        background: #f8f8f8;
        border-radius: 12rpx;
    }
    .itemListBox {
        padding: 20rpx 28rpx;
    }
</style>