<template>
    <div class="page">
        <div class="profit-info">
            <h6 class="tit">累计优选佣金</h6>
            <div class="money">4505.8</div>
        </div>

        <div class="filter">
            <span class="key">时间：</span>
            <picker mode="date" @change="dateChange($event, 'startDate')"
                ><input
                    class="value"
                    placeholder="开始日期"
                    :disabled="true"
                    v-model="filter.startDate"
            /></picker>
            <span class="row">至</span>
            <picker mode="date" @change="dateChange($event, 'endDate')"
                ><input
                    class="value"
                    placeholder="结束日期"
                    :disabled="true"
                    v-model="filter.endDate"
            /></picker>
        </div>

        <ul class="list">
            <li>
                <div class="top">
                    <div class="tit">订单佣金</div>
                    <div class="money">+12.90</div>
                </div>
                <div class="info">
                    <div class="date">2021/03/29</div>
                    <div class="formula">￥16(佣金)-￥2(积分抵扣) = ￥16</div>
                </div>
                <div class="bottom">
                    <div class="num">订单号：154546464666</div>
                    <div class="link">查看订单</div>
                </div>
            </li>
            <li>
                <div class="top">
                    <div class="tit">订单佣金</div>
                    <div class="money">+12.90</div>
                </div>
                <div class="info">
                    <div class="date">2021/03/29</div>
                    <div class="formula">￥16(佣金)-￥2(积分抵扣) = ￥16</div>
                </div>
                <div class="bottom">
                    <div class="num">订单号：154546464666</div>
                    <div class="link">查看订单</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            filter: {
                startDate: "",
                endDate: "",
            },
        };
    },

    onShow() {},

    // 函数
    methods: {
        dateChange(e, name) {
            this.filter[name] = e.detail.value;
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.filter {
    display: flex;
    align-items: center;
    padding: px(40);
    font-size: px(44);
    background-color: #fff;
    .row {
        padding: 0 px(20);
        flex-shrink: 0;
    }
    .key {
        flex-shrink: 0;
    }
    .value {
        border: 1px solid #f1f1f1;
        height: px(80);
        width: px(200);
        padding: 0 px(10);
        width: 90%;
    }
}

.profit-info {
    text-align: center;
    padding: px(60) px(40);
    background-color: #fff;
    .tit {
        font-size: px(44);
    }
    .money {
        font-size: px(56);
        color: #ff4b26;
        margin-top: px(30);
    }
}
.list {
    padding: px(50) 0;
    border-top: 1px solid #f1f1f1;
    background-color: #fff;
    li {
        border-bottom: 1px solid #f1f1f1;
        padding: px(30) px(40);
    }
    .top,.info,.bottom{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tit{
        font-size: px(48);
    }
    .money{
        color:#ff4b26;
    }
    .info,.bottom{
        font-size: px(40);
        color: #666;
        margin-top: px(10);
    }
    .formula{
        font-weight: bold;
    }
    .link{
        color: #4395ff;
    }
    .num{
        color: #999;
    }
}
</style>