yihuo/pages/sell_record/buy_record.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"
        >
            <tabbar2 custom-class="marginX14 marginY10" :tabs="tabs" @change="clickTab" />
            <view v-if="tableData" class="paddingX14">
                <view
                    v-for="(item, index) in tableData"
                    :key="item.id"
                    class="cell marginB12 paddingX15 relative"
                >
                    <view class="paddingT15 paddingB10 flex-align">
                        <image
                            :src="item.itemList[0].cover"
                            class="image flex-shrink0"
                            mode="aspectFit"
                        />
                        <view
                            class="flex1 self-stretch paddingY5 flex-column-between paddingL12 color-white"
                        >
                            <view class="flex-align">
                                <view class="font4 line-ellipsis flex1 bold" style="width: 0">
                                    {{ item.itemList[0].name }}
                                </view>
                            </view>
                            <view class="flex-align font4">
                                <view>售价：¥</view>
                                <view class="bold flex1">{{ item.totalAmount }}</view>
                                <image
                                    v-if="item.level"
                                    style="width: 110rpx; height: 32rpx"
                                    :src="LEVEL_MAP[item.level].titleText"
                                />
                            </view>
                            <view class="color-theme">
                                <text class="font2">实付款：</text>
                                <text class="font8 bold">¥{{ item.paymentAmount }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="line"></view>
                    <view class="font2 color-white paddingY9">
                        <view class="order-no font2 flex-align-between">
                            <view>订单号：{{ item.tradeNo }}</view>
                            <view class="flex-align-end">
                                <button
                                    class="btn-clear copy marginL5 flex-shrink0"
                                    @click.stop="$common.copy(item.tradeNo)"
                                >
                                    复制
                                </button>
                            </view>
                        </view>
                        <view class="font2 flex-align-between paddingT8">
                            下单时间: {{ item.createTime }}
                        </view>
                        <view v-if="item.paymentTime" class="font2 flex-align-between paddingT8">
                            付款时间: {{ item.paymentTime }}
                        </view>
                    </view>
                    <image
                        v-if="item.status === 99"
                        :src="resource.sell_status_ok"
                        class="status"
                    />
                    <image
                        v-else-if="item.status === 0"
                        :src="resource.sell_status_to_pay"
                        class="status"
                    />
                    <image
                        v-else-if="item.status === 10"
                        :src="resource.sell_status_cancel"
                        class="status"
                    />
                    <image
                        v-else-if="item.status === 11"
                        :src="resource.sell_status_timeout"
                        class="status"
                        style="width: 124rpx"
                    />
                </view>
            </view>
            <empty v-if="isEmpty" :top="200" light />
        </scroll-view>
    </view>
</template>
<script>
import { LEVEL_MAP } from '@/utils/config'
import tabbar2 from '@/components/tabbar2'
import empty from '@/components/empty'
import pageMixin from './../../mixin/page'
import resource from '@/utils/resource'

const Tabs = [
    { title: '全部', value: '' },
    { title: '待支付', value: 'to_pay' },
    { title: '已完成', value: 'complete' }
]

export default {
    mixins: [pageMixin],
    components: { empty, tabbar2 },
    data() {
        return {
            resource,
            LEVEL_MAP,
            tabs: Tabs,
            tab: Tabs[0],
            refreshing: false
        }
    },
    computed: {
        top() {
            let height = this.$store.state.systemInfo.statusBarHeight + 36 + 50
            return height
        }
    },
    mounted() {
        this.refresh(true)
    },
    methods: {
        pullRefresh() {
            this.refreshing = true
            this.refresh()
        },
        async loadData(loading) {
            const res = await this.$service.sell.buyList(
                this.pageNum,
                this.pageSize,
                this.tab.value,
                loading
            )
            setTimeout(() => {
                this.refreshing = false
            }, 1000)
            return res
        },
        clickTab(item) {
            this.tab = item
            this.refresh(true)
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}
.cell {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px 0px rgba(167, 110, 244, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    .line {
        height: 1px;
        opacity: 0.2;
        background: #e9d9ff;
    }
    .image {
        box-shadow: 0px 0px 5px 0px rgba(167, 110, 244, 0.5);
        border-radius: 8px;
        width: 180rpx;
        height: 180rpx;
    }
    .status {
        width: 100rpx;
        height: 40rpx;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
    }
    .order-no {
        .copy {
            padding: 0 6rpx;
            line-height: 32rpx;
            border-radius: 8rpx;
            text-align: center;
            font-size: 24rpx;
            border: 1px solid #4d6fff;
            color: #4d6fff;
        }
    }
}
</style>