<template>
    <div class="page">
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <div class="collection-info" v-for="(item, index) in list" :key="index">
                <van-image width="64" height="64" radius="4px" fit="cover" :src="item.pic" />
                <div class="collection-content">
                    <div class="text1">{{ item.name }}</div>
                    <div class="text2">兑换账户:{{ item.phone }}</div>
                    <div class="text2">消耗绿洲核:{{ item.totalPrice }}个</div>
                </div>
                <div class="status" :class="{ status1: item.status === 'PENDING' }">
                    {{ getLabelName(item.status, statusOptions) }}
                </div>
            </div>

            <van-empty
                v-if="empty"
                description="当前没有兑换纪录哦～"
                :image="require('../../assets/kong-pimg-zhanji.png')"
            />
        </van-list>
    </div>
</template>

<script>
import list from '../../mixins/list';
export default {
    mixins: [list],
    data() {
        return {
            url: '/exchangeOrder/my',
            statusOptions: [
                { label: '等待发放', value: 'PENDING' },
                { label: '已发放', value: 'FINISH' },
                { label: '已取消', value: 'CANCELLED' }
            ]
        };
    },
    methods: {}
};
</script>

<style lang="less" scoped>
.page {
    padding: 16px;
}
.collection-info {
    padding: 12px;
    background-color: @bg2;
    position: relative;
    .flex();
    .collection-content {
        flex-grow: 1;
        margin-left: 10px;
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
        }
        .text2 {
            font-size: 12px;
            color: #6a6d83;
            line-height: 17px;
            margin-top: 2px;
        }
    }

    .status {
        width: 68px;
        height: 18px;
        background: #5464e6;
        border-radius: 0px 4px 0px 4px;
        font-size: 12px;
        color: #ffffff;
        line-height: 18px;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
    }
}
.collection-info + .collection-info {
    margin-top: 16px;
}
</style>
