<!--
 * @Author: euzhi
 * @Description: 我的订单
-->
<template>
<view class="appCotent">
    <div class="myOrder">
        <u-tabs :current='current' :list="list4" lineWidth="30" @change="changeVal" lineColor="#f56c6c" :activeStyle="{
            color: 'rgba(241, 37, 27, 1)',
            fontSize: '32rpx',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
        </u-tabs>
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <u-gap bgColor="transparent" height="15"></u-gap>
            <div class="order__content" v-for="(item,index) in orderList" :key="index">
                <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 v-if="item.aftersaleStatus==0 && item.currentPrice > 0" @click.stop="pull(item.id)">申请退款</span>
                            <span class="btn__two" @click.stop="orderDetail(item.id)">查看详情</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.stop="goCarTime(item.id)">查看物流</span>
                            <span class="btn__two" @click.stop="confirmReceipt(item.id)">确认收货</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.stop="goCarTime(item.id)">查看物流</span>
                            <span class="btn__two" @click.stop="orderDetail(item.id)">查看详情</span>
                        </div>
                    </div>
                </div>
                <div class="order__items" v-if="(current===0||current===4) && (item.orderStatus == 30 || item.orderStatus == 40)">
                    <div class="item">
                        <div class="item__time">
                            <span>{{item.successTime}}</span>
                            <span style="color:#666666" v-if="item.orderStatus==40">已退款</span>
                            <span v-else>退款中</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 v-if="item.orderStatus==40">退款成功</span>
                            <span v-else>退款中</span>
                        </div>
                        <div class="order__btn">
                            <u-modal :show="showDelModal" @confirm="confirmDel" @cancel="cancelModal" :title="delTitle" ref="delModal" :showCancelButton="true"></u-modal>
                            <span v-if="item.orderStatus==40" @click.stop="showDel(item.id)">删除记录</span>
                            <span class="btn__two" @click.stop="orderDetail(item.id)">查看详情</span>
                        </div>
                    </div>
                </div>

            </div>
        </scroll-list>
    </div>
</view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            option: {
                size: 10,
                auto: true
            },
            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.current) || 0
        })
    },
    methods: {
        // 刷新刷剧
        async refresh(paging) {
            // 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
            await this.getOrderList()
            this.$refs.list.refreshSuccess({
                list:this.list,
                total:this.orderList.length
            });
            // 刷新失败
            // this.$refs.list.refreshFail()
        },
        // 加载数据
        load(paging) {
            //console.log(paging)
            setTimeout(() => {
                let list = [];
                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?pageSize=' + paging.size + '&pageNum=' + paging.page,
                    method: 'get'
                };
                this.http.httpTokenRequest(opts, order).then(res => {
                    if (res.data.code == 200) {
                        list = res.data.data.rows
                        this.orderList = [...this.orderList, ...list];
                        // 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
                        this.$refs.list.loadSuccess({
                            list: this.orderList,
                            total: res.data.data.total
                        });
                        // 加载失败
                        // this.$refs.list.loadFail()
                    }
                })
            }, this.$u.random(100, 1000));
        },
        pull(orderId) {
            uni.navigateTo({
                url: '/pagesD/pages/personal/pull?orderId=' + orderId
            });
        },
        goCarTime(id) {
            uni.navigateTo({
                url: '/pagesD/pages/personal/carTime?orderId=' + id
            })
        },
        showDel(id) {
            let that = this;
            uni.showModal({
            	title: '删除记录',
            	content: '确认删除该纪录吗？',
            	success: function (res) {
            		let opts = {
            		    url: '/app/user/order/remove/' + id,
            		    method: 'delete'
            		};
            		that.http.httpTokenRequest(opts, {}).then(res => {
            		    if (res.data.code == 200) {
            		        uni.showToast({
            		            title: '删除成功',
            		            icon: "success",
            		        });
                            that.getOrderList()
            		    } else {
            		        uni.showToast({
            		            title: '删除失败',
            		            icon: "error"
            		        });
            		    }
            		    
            		})
            	}
            });
        },
        cancelModal() {
            this.showDelModal = false
        },
        confirmDel() {

            let opts = {
                url: '/app/user/order/remove/' + this.deleteId,
                method: 'delete'
            };
            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
                    this.orderList.length > 0 ? this.$refs.list.toggle() : this.$refs.list.show()
                }
            })
        },
        //确认收货
        confirmReceipt(orderId){
            let that = this;
            uni.showModal({
            	title: '确认收货',
            	content: '确认收货吗？',
            	success: function (res) {
            		if (res.confirm) {
            			let opts = {url: '/app/user/confirm/receipt/' + orderId,method: 'put'};
                        that.http.httpTokenRequest(opts, {}).then(res => {
                            if (res.data.code == 200) {
                                uni.showToast({
                                	title: '收货成功',
                                	icon: "success",
                                });
                            }
                            that.getOrderList();
                        })
            		} else if (res.cancel) {
            			
            		}
            	}
            });
            
        },
    },
    onShow() {
        //this.load()
    },
}
</script>

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

    .order__content {
        padding: 0 40rpx;
        z-index: 999999;

        .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: 340rpx;
                                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;
                        margin-left: 20rpx;
                    }

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