yihuo/pages/order_award/index.vue

<template>
    <page title="宝箱订单" ref="pageRef" nav-color="#fff" custom-class="paddingB30">
        <tabbar
            :data="tabbarData"
            custom-class="paddingX20 marginB7"
            :initial="initial"
            @change="onChange"
        />
        <view v-if="tableData && tableData.length > 0">
            <view v-for="item in tableData" :key="item.tradeNo" class="cell">
                <view class="filter" />
                <view class="top">
                    <view class="flex-align-between">
                        <view class="font2">下单时间：{{ item.createTime }}</view>
                        <view class="color-money font2">
                            <text v-if="item.status === 99" class="color-green">已完成</text>
                            <text v-else-if="item.status === 0">待支付</text>
                            <text v-else-if="item.status === 10">用户取消</text>
                            <text v-else-if="item.status === 11">超时取消</text>
                        </view>
                    </view>
                    <view v-if="item.status === 0" class="paddingT5">
                        {{ item.paymentTimeoutTime }} 将自动取消该订单，如有优惠券，将自动退回
                    </view>
                </view>
                <view class="middle flex-align flex1">
                    <image :src="item.luckPool.cover" mode="aspectFill" class="img" />
                    <view class="self-stretch flex-column-between marginL12 flex1">
                        <view class="bold font4">{{ item.luckPool.name }}</view>
                        <view class="flex-align-between">
                            <view class="bold font4">¥{{ item.price }}</view>
                            <view class="font2">X{{ item.quantity }}</view>
                        </view>
                        <view class="color-theme font2">
                            使用优惠券-{{ item.couponAmount }} 使用源石-{{ item.magicAmount }}
                        </view>
                        <view class="color-theme">
                            <text class="font2">实付款：</text>
                            <text class="font8 bold">¥{{ item.paymentAmount }}</text>
                        </view>
                    </view>
                </view>
                <view class="listWrapper" v-if="item.status === 99">
                    <view class="bottom listBox">

                        <scroll-view scroll-x class="scroll-wrapper">
                            <view
                                class="relative item"
                                v-for="(item, index) in item.itemList"
                                :key="index"
                            >
                                <view class="imgBox">
                                    <image
                                        class="super-image"
                                        :src="item.spu.cover"
                                        mode="aspectFit"
                                    />
                                </view>

                                <image
                                    class="level-image"
                                    :src="LEVEL_MAP[item.level].titleText"
                                    mode="aspectFit"
                                />
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <view class="orderNo flex-align-between" v-else>
                    <view class="line-ellipsis">订单号：{{ item.tradeNo }}</view>
                    <view class="flex-align-end flex-shrink0">
                        <button
                            class="btn-clear copy marginL5"
                            @click.stop="$common.copy(item.tradeNo)"
                        >
                            复制
                        </button>
                    </view>
                </view>
            </view>
        </view>
        <empty v-if="isEmpty" :top="200" light />
    </page>
</template>
<script>
    import { LEVEL_MAP } from '@/utils/config'
    import tabbar from '@/components/tabbar'
    import empty from '@/components/empty'
    import pageMixin from './../../mixin/page'
    import loginMixin from '@/mixin/login'

    export default {
        mixins: [pageMixin, loginMixin],
        components: { tabbar, empty },
        data() {
            return {
                LEVEL_MAP,
                initial: 0,
                tabbarData: [
                    {
                        label: '已完成',
                        value: 'complete'
                    },
                    {
                        label: '未完成',
                        value: 'uncomplete'
                    }
                ],
                index: 0
            }
        },
        computed: {
            itemWidth() {
                let width = this.$store.state.systemInfo.screenWidth
                width = (width - 28 - 30 - 16) / 5
                let height = (91 / 60) * width
                return { width, height }
            }
        },
        onLoad(options) {
            this.initial = options.active || 0
            this.index = this.initial
        },
        mounted() {
            setTimeout(() => {
                this.refresh(true)
            }, 100)
        },
        onPullDownRefresh() {
            this.refresh()
        },
        onReachBottom() {
            this.loadMore()
        },
        methods: {
            init() {
                this.refresh()
            },
            async loadData(loading) {
                const item = this.tabbarData[this.index]
                const res = await this.$service.award.orders(
                    this.pageNum,
                    this.pageSize,
                    item.value,
                    loading
                )
                return res
            },
            onChange(index) {
                this.index = index
                this.refresh(true)
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }
    .cell {
        background: #fff;

        border-radius: 16rpx;
        margin: 20rpx 14px;
        position: relative;
        padding: 0 15px;
        .filter {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: -1;
            border-radius: 16rpx;
            backdrop-filter: blur(20rpx);
        }
        .top {
            padding: 20rpx 0;
            border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
        }
        .middle {
            padding: 24rpx 0;
            .img {
                width: 180rpx;
                height: 180rpx;
                border-radius: 8rpx;
            }
        }
        .bottom {
            .scroll-wrapper {
                overflow: hidden;
                white-space: nowrap;
                width: 100%;
                .item {
                    display: inline-block;
                }
            }
            .super {
                position: absolute;
                z-index: -1;
                left: 0;
                top: 0;
            }

            .super-text {
                width: 80rpx;
                height: 36rpx;
                position: absolute;
                bottom: 10rpx;
            }
        }
        .orderNo {
            height: 58rpx;
            line-height: 58rpx;
            font-size: 24rpx;
        }
        .btn {
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;
            padding: 0 20rpx;
            font-size: 28rpx;

            border-radius: 24rpx;
        }
        .copy {
            padding: 0 6rpx;
            line-height: 32rpx;
            border-radius: 8rpx;
            text-align: center;
            font-size: 24rpx;
            background-color: #fec433;
            color: #000;
        }
    }
    .listWrapper {
        padding-bottom: 20rpx;
        .listBox {
            background: #f8f8f8;
            padding: 20rpx;
        }
    }
    .item {
        margin-right: 20rpx;
        text-align: center;
        .imgBox {
            border-radius: 6rpx 6rpx 6rpx 6rpx;
            background-color: #fff;
            width: 110rpx;
            height: 150rpx;
            margin-bottom: 12rpx;
        }
        .super-image {
            width: 110rpx;
            height: 150rpx;
        }
        .level-image{
          width: 90rpx;
          height: 32rpx;
        }
    }
</style>