<!--
 * @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" v-for="(item,index) in orderList">
            <div class="order__items" @click="orderDetail(item.id)" v-if="(current===0||current===1) && item.orderStatus == 10">
                <div class="item">
                    <div class="item__time">
                        <span>{{item.successTime}}</span>
                        <span>待发货</span>
                    </div>
                    <div class="item__top">
                        <div>
                            <img :src="item.mainImgUrl" class="top__img" alt="" srcset="">
                        </div>
                        <div class="top__right">
                            <div class="right__one one__text">
                                <span>{{item.title}}</span>
                                <span>￥{{item.amount/100}}</span>
                            </div>
                            <div class="right__two">
                                <span>{{item.spec}}</span>
                                <span>×{{item.nums}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="order">订单编号:{{item.orderNo}}</div>
                    <div class="order__num">
                        <span>总金额:</span>
                        <span>￥{{item.amount/100}}</span>
                    </div>
                    <div class="order__btn" @click.stop="pull(item.id)">
                        <span>申请退款</span>
                    </div>
                </div>
            </div>
            <div class="order__items" @click="orderDetail(item.id)" v-if="(current===0||current===2) && item.orderStatus == 20">
                <div class="item">
                    <div class="item__time">
                        <span>{{item.successTime}}</span>
                        <span style="color:#F88D28">待收货</span>
                    </div>
                    <div class="item__top">
                        <div>
                            <img :src="item.mainImgUrl" class="top__img" alt="" srcset="">
                        </div>
                        <div class="top__right">
                            <div class="right__one one__text">
                                <span>{{item.title}}</span>
                                <span>￥{{item.amount/100}}</span>
                            </div>
                            <div class="right__two">
                                <span>{{item.spec}}</span>
                                <span>×{{item.nums}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="order">订单编号:{{item.orderNo}}</div>
                    <div class="order__num">
                        <span>总金额:</span>
                        <span>￥{{item.amount/100}}</span>
                    </div>
                    <div class="order__btn">
                        <span @click="goCarTime(item.id)">查看物流</span>
                        <span class="btn__two">确认收货</span>
                    </div>
                </div>
            </div>
            <div class="order__items" v-if="(current===0||current===3) && item.orderStatus == 50">
                <div class="item">
                    <div class="item__time">
                        <span>{{item.successTime}}</span>
                        <span style="color:#1BF134">已收货</span>
                    </div>
                    <div class="item__top">
                        <div>
                            <img :src="item.mainImgUrl" class="top__img" alt="" srcset="">
                        </div>
                        <div class="top__right">
                            <div class="right__one one__text">
                                <span>{{item.title}}</span>
                                <span>￥{{item.amount/100}}</span>
                            </div>
                            <div class="right__two">
                                <span>{{item.spec}}</span>
                                <span>×{{item.nums}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="order">订单编号:{{item.orderNo}}</div>
                    <div class="order__num">
                        <span>总金额:</span>
                        <span>￥{{item.amount/100}}</span>
                    </div>
                    <div class="order__btn">
                        <span @click="goCarTime(item.id)">查看物流</span>
						<span @click="orderDetail(item.id)">查看详情</span>
                    </div>
                </div>
            </div>
            <div class="order__items" v-if="(current===0||current===4) && item.orderStatus == 30">
                <div class="item">
                    <div class="item__time">
                        <span>{{item.successTime}}</span>
                        <span style="color:#666666">已退款</span>
                    </div>
                    <div class="item__top">
                        <div>
                            <img :src="item.mainImgUrl" class="top__img" alt="" srcset="">
                        </div>
                        <div class="top__right">
                            <div class="right__one one__text">
                                <span>{{item.title}}</span>
                                <span>￥{{item.amount/100}}</span>
                            </div>
                            <div class="right__two">
                                <span>{{item.spec}}</span>
                                <span>×{{item.nums}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="order">订单编号:{{item.orderNo}}</div>
                    <div class="order__num">
                        <span></span>
                        <span>退款成功</span>
                    </div>
                    <div class="order__btn">
						<u-modal :show="showDelModal" @confirm="confirmDel" @cancel="cancelModal" :title="delTitle" ref="delModal" :showCancelButton="true"></u-modal>
                        <span @click="showDel(item.id)">删除记录</span>
                        <span class="btn__two" @click="orderDetail(item.id)">查看详情</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</view>
</template>

<script>
export default {
    data() {
        return {
            current: 0,
            list4: [{
                name: '全部订单'
            }, {
                name: '待发货',
                // badge: {
                //     isDot: true
                // }
            }, {
                name: '待收货',
            }, {
                name: '已完成'
            }, {
                name: '退款/售后'
            }],
			//商品订单列表
			orderList: [],
			showDelModal: false,
			deleteId: '',
			delTitle: '确认删除该纪录吗？',
        }
    },
    onLoad: function (e) {
        this.$nextTick(() => {
            this.current = Number(e.page) || 0
        })
    },
    methods: {
        pull(orderId) {
            uni.navigateTo({
                url: '/pagesD/pages/personal/pull?orderId=' + orderId
            });
        },
		goCarTime(id){
			uni.navigateTo({
			    url: '/pagesD/pages/personal/carTime?orderId=' + id
			})
		},
		showDel(id){
			//
			this.showDelModal = true
			this.deleteId = id
		},
		cancelModal(){
			this.showDelModal = false
		},
		confirmDel(){
			
			let opts = { url: '/app/user/order/remove/' + this.deleteId, method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: "success"
					});
				}else{
					uni.showToast({
						title: '删除失败',
						icon: "error"
					});
				}
				this.getOrderList()
			})
			this.showDelModal = false
		},
        orderDetail(id) {
            uni.navigateTo({
                url: '/pagesD/pages/personal/orderDetail?orderId=' + id
            });
        },
        changeVal(v) {
            this.current = v.index
			this.getOrderList()
        },
		getOrderList(){
			let order = {}
			//订单状态:0-未支付,10-待发货,20-待收货,30-退款/售后,50-已完成
			if(this.current == 0){
				
			}else if(this.current == 1){
				order.orderStatus = 10;
			}else if(this.current == 2){
				order.orderStatus = 20;
			}else if(this.current == 3){
				order.orderStatus = 50;
			}else if(this.current == 4){
				order.orderStatus = 30;
			}else{
			}
			let opts = { url: '/app/user/order/list', method: 'get' };
			this.http.httpTokenRequest(opts, order).then(res => {
				if (res.data.code == 200) {
					this.orderList = res.data.data.rows
				}
			})
		},
    },
	onShow() {
		this.getOrderList()
	},
	onLoad(e) {
		if(e.current) {
			this.current = parseInt(e.current)
		}
	  
	},
}
</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>
