<!--
 * @Author: euzhi
 * @Description: 我的订单
-->
<template>
<view class="appCotent">
    <div class="myOrder">
        <u-tabs :current='current' :list="list4" lineWidth="30" @change="changeVal" lineColor="#f56c6c" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
        </u-tabs>
        <div class="order__content">
            <div class="order__items" @click="orderDetail" v-if="current===0||current===1">
                <div class="item">
                    <div class="item__time">
                        <span>2022.03.23 12:14:32</span>
                        <span>待发货</span>
                    </div>
                    <div class="item__top">
                        <div class="top__img">
                            <img src="" alt="" srcset="">
                        </div>
                        <div class="top__right">
                            <div class="right__one one__text">
                                <span>强力清洗剂 大容量 标</span>
                                <span>￥25.5</span>
                            </div>
                            <div class="right__two">
                                <span>强力清洗剂 大容量 标120 ml*3瓶装</span>
                                <span>×4</span>
                            </div>
                        </div>
                    </div>
                    <div class="order">订单编号:3543859111977240</div>
                    <div class="order__num">
                        <span>总金额:</span>
                        <span>￥25.5</span>
                    </div>
                    <div class="order__btn" @click.stop="pull">
                        <span>申请退款</span>
                    </div>
                </div>
            </div>
            <div class="order__items" @click="orderDetail" v-if="current===0||current===2">
                <div class="item">
                    <div class="item__time">
                        <span>2022.03.23 12:14:32</span>
                        <span style="color:#F88D28">待收货</span>
                    </div>
                    <div class="item__top">
                        <div class="top__img">
                            <img src="" alt="" srcset="">
                        </div>
                        <div class="top__right">
                            <div class="right__one one__text">
                                <span>强力清洗剂 大容量 标</span>
                                <span>￥25.5</span>
                            </div>
                            <div class="right__two">
                                <span>强力清洗剂 大容量 标120 ml*3瓶装</span>
                                <span>×4</span>
                            </div>
                        </div>
                    </div>
                    <div class="order">订单编号:3543859111977240</div>
                    <div class="order__num">
                        <span>总金额:</span>
                        <span>￥25.5</span>
                    </div>
                    <div class="order__btn">
                        <span>查看物流</span>
                        <span class="btn__two">确认收货</span>
                    </div>
                </div>
            </div>
            <div class="order__items" @click="orderDetail" v-if="current===0||current===3">
                <div class="item">
                    <div class="item__time">
                        <span>2022.03.23 12:14:32</span>
                        <span style="color:#1BF134">已收货</span>
                    </div>
                    <div class="item__top">
                        <div class="top__img">
                            <img src="" alt="" srcset="">
                        </div>
                        <div class="top__right">
                            <div class="right__one one__text">
                                <span>强力清洗剂 大容量 标</span>
                                <span>￥25.5</span>
                            </div>
                            <div class="right__two">
                                <span>强力清洗剂 大容量 标120 ml*3瓶装</span>
                                <span>×4</span>
                            </div>
                        </div>
                    </div>
                    <div class="order">订单编号:3543859111977240</div>
                    <div class="order__num">
                        <span>总金额:</span>
                        <span>￥25.5</span>
                    </div>
                    <div class="order__btn">
                        <span>查看物流</span>
                    </div>
                </div>
            </div>
            <div class="order__items" @click="orderDetail" v-if="current===0||current===4">
                <div class="item">
                    <div class="item__time">
                        <span>2022.03.23 12:14:32</span>
                        <span style="color:#666666">已退款</span>
                    </div>
                    <div class="item__top">
                        <div class="top__img">
                            <img src="" alt="" srcset="">
                        </div>
                        <div class="top__right">
                            <div class="right__one one__text">
                                <span>强力清洗剂 大容量 标</span>
                                <span>￥25.5</span>
                            </div>
                            <div class="right__two">
                                <span>强力清洗剂 大容量 标120 ml*3瓶装</span>
                                <span>×4</span>
                            </div>
                        </div>
                    </div>
                    <div class="order">订单编号:3543859111977240</div>
                    <div class="order__num">
                        <span></span>
                        <span>退款成功</span>
                    </div>
                    <div class="order__btn">
                        <span>删除记录</span>
                        <span class="btn__two">查看详情</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</view>
</template>

<script>
export default {
    data() {
        return {
            current: 0,
            list4: [{
                name: '全部订单'
            }, {
                name: '待发货',
                // badge: {
                //     isDot: true
                // }
            }, {
                name: '待收货',
            }, {
                name: '已收货'
            }, {
                name: '退款/售后'
            }],
        }
    },
    onLoad: function (e) {
        this.$nextTick(() => {
            this.current = Number(e.page) || 0
        })
    },
    methods: {
        pull() {
            uni.navigateTo({
                url: '/pagesD/pages/personal/pull'
            });
        },
        orderDetail() {
            uni.navigateTo({
                url: '/pagesD/pages/personal/orderDetail'
            });
        },
        changeVal(v) {
            this.current = v.index
        }
    },
}
</script>

<style lang="scss" scoped>
.myOrder {
    uni-view {
        background: #fff;
    }

    .order__content {
        padding: 40rpx;

        .order__items {
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
            border-radius: 20rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;

            .item {
                .item__time {
                    display: flex;
                    align-items: center;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20rpx;

                    >span:nth-of-type(1) {
                        font-size: 26rpx;
                        font-family: DIN;
                        font-weight: 500;
                        color: #999999;
                    }

                    >span:nth-of-type(2) {
                        font-size: 26rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #F1251B;
                    }
                }

                .item__top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .top__img {
                        width: 120rpx;
                        height: 120rpx;
                        background: #F88D28;
                        border-radius: 8rpx;
                    }

                    .top__right {
                        .right__one {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            >span:nth-of-type(1) {
                                font-size: 32rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #333333;
                                width: 320rpx;
                                padding-right: 70rpx;
                            }

                            >span:nth-of-type(2) {
                                font-size: 24rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #F1251B;
                            }
                        }

                        .right__two {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            >span:nth-of-type(1) {
                                font-size: 28rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #999999;
                                width: 320rpx;
                            }

                            >span:nth-of-type(2) {
                                font-size: 26rpx;
                                font-family: DIN;
                                font-weight: 500;
                                color: #999999;
                            }
                        }
                    }
                }

                .order {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #666666;
                    margin: 20rpx 0;
                }

                .order__num {
                    text-align: right;

                    >span:nth-of-type(1) {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #666666;
                    }

                    >span:nth-of-type(2) {
                        font-size: 30rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #F1251B;
                    }
                }

                .order__btn {
                    text-align: right;
                    margin-top: 30rpx;

                    span {
                        width: 180rpx;
                        height: 56rpx;
                        display: inline-block;
                        background: #FFFFFF;
                        border: 1rpx solid #DDDDDD;
                        border-radius: 28rpx;
                        font-size: 30rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #999999;
                        line-height: 56rpx;
                        text-align: center;
                        font-size: 30rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #999999;
                    }

                    .btn__two {
                        color: #F1251B;
                        border: 1rpx solid #F1251B;
                        margin-left: 20rpx;
                    }
                }
            }
        }
    }
}
</style>
