<template>
    <!-- 顶部导航栏 -->
    <TopNavigation />
    <!-- 我的列表 -->
    <div class="content">
        <van-sticky :offset-top="bar.value && bar.value.show ? barHeight : 0">
            <div class="my_list">
                <div class="my_list_con">我的订单</div>
                <!-- 标签页展示切换 -->
                <div class="label_tabs">
                    <div
                        :class="tabLabel == 'whole' ? 'label_selected' : 'label_not_selected'"
                        @click="tabLabel = 'whole'"
                        class="label_tab"
                    >
                        全部
                    </div>
                    <div
                        :class="tabLabel == 'inTransaction' ? 'label_selected' : 'label_not_selected'"
                        @click="tabLabel = 'inTransaction'"
                        class="label_tab"
                    >
                        交易中
                    </div>
                    <div
                        :class="tabLabel == 'completed' ? 'label_selected' : 'label_not_selected'"
                        @click="tabLabel = 'completed'"
                        class="label_tab"
                    >
                        已完成
                    </div>
                </div>
            </div>
        </van-sticky>
        <!-- 列表展示 -->
        <div class="list_display">
            <div class="list_display_con" v-for="(item, index) in listDisplay" :key="index">
                <div class="list_display_top">
                    <div class="list_display_top_time">订单时间&nbsp;:&nbsp;{{ item.time }}</div>
                    <div class="transaction_status">{{ item.transactionStatus }}</div>
                </div>
                <van-divider />
                <div class="list_display_bottom">
                    <img :src="item.img" alt="" class="list_display_bottom_img" />
                    <div class="product_details">
                        <div class="product_details_title">{{ item.title }}</div>
                        <div class="product_details_collection">{{ item.collection }}</div>
                        <div class="product_details_price">
                            <span class="product_details_price_symbol">￥</span>{{ item.price }}
                        </div>
                    </div>
                    <div class="product_details_number">x{{ item.number }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TopNavigation from '../../components/TopNavigation.vue';
import list from '../../mixins/list';
export default {
    components: {
        TopNavigation
    },
    mixins: [list],
    inject: ['bar', 'barHeight'],
    data() {
        return {
            tabLabel: 'whole',
            listDisplay: [
                {
                    time: '2021-05-20 07:52',
                    transactionStatus: '交易中',
                    img: require('@assets/commodity-background-map.png'),
                    title: '陶瓷艺术大师艺术大师 易查理陶瓷艺术大师艺术大师 易查理',
                    collection: '收藏品',
                    price: 320,
                    number: 1
                },
                {
                    time: '2021-05-20 07:52',
                    transactionStatus: '已完成',
                    img: require('@assets/commodity-background-map.png'),
                    title: '陶瓷艺术大师艺术大师 易查理陶瓷艺术大师艺术大师 易查理',
                    collection: '收藏品',
                    price: 320,
                    number: 1
                },
                {
                    time: '2021-05-20 07:52',
                    transactionStatus: '已完成',
                    img: require('@assets/commodity-background-map.png'),
                    title: '陶瓷艺术大师艺术大师 易查理陶瓷艺术大师艺术大师 易查理',
                    collection: '收藏品',
                    price: 320,
                    number: 1
                }
            ]
        };
    },
    methods: {}
};
</script>

<style lang="less" scoped>
.navBar {
    width: 100%;
    height: 44px;
}
.content {
    width: 100%;
    height: 100%;
    margin-top: 44px;
    position: absolute;
    background: @bg;
}
.my_list {
    width: 100%;
    background: #15152d;
    padding: 12px 16px 10px 16px;
    box-sizing: border-box;
    .my_list_con {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 16px;
    }
    .label_tabs {
        width: 100%;
        display: flex;
        .label_tab {
            width: 108px;
            height: 24px;
            background: #29293f;
            border-radius: 4px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            line-height: 24px;
            text-align: center;
            margin-right: 16px;
        }
        .label_tab:last-child {
            margin-right: 0;
        }
        .label_selected {
            font-weight: 500;
            color: #28b6ff;
        }
        .label_not_selected {
            font-weight: 400;
            color: #939599;
        }
    }
}
.list_display {
    width: 100%;
    height: 812px;
    background: @bg;
    padding: 10px 16px 16px 8px;
    box-sizing: border-box;
    .list_display_con {
        width: 100%;
        background: #29293f;
        border-radius: 8px;
        margin-bottom: 16px;
        padding: 10px;
        box-sizing: border-box;
        .list_display_top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            .list_display_top_time {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #c8c9cc;
            }
            .transaction_status {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #28b6ff;
            }
        }
        .list_display_bottom {
            margin-top: 8px;
            display: flex;
            position: relative;
            .list_display_bottom_img {
                width: 80px;
                height: 80px;
                margin-right: 12px;
            }
            .product_details_title {
                width: 215px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                margin-bottom: 6px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .product_details_collection {
                width: 56px;
                height: 22px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #28b6ff;
                line-height: 22px;
                margin-bottom: 10px;
                text-align: center;
            }
            .product_details_price {
                margin-left: 10px;
                position: relative;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #28b6ff;
                .product_details_price_symbol {
                    font-size: 10px;
                    position: absolute;
                    bottom: 1px;
                    left: -10px;
                }
            }
            .product_details_number {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #c8c9cc;
                position: absolute;
                right: 0px;
                bottom: 0px;
            }
        }
    }
    .list_display_con:last-child {
        margin-bottom: 0;
    }
}
</style>

