<!--
 * @Author: euzhi
 * @Description: 订单详情
-->
<template>
<view class="appCotent">
<div class="orderDetail">
    <div class="order__car">
        <div>
            <image src="@/static/my/car.png" />
        </div>
        <div>
            <div>
                运输中
            </div>
            <div>
                到达【北京邮区邮件处理中心】
            </div>
            <div class="order__btn btn__one" @click="viewCar">
                <span>查看物流</span>
            </div>
        </div>
    </div>
    <div class="address">
        <div class="address__left">
            <div class="right__title">
				{{orderInfo.address}}&emsp;{{orderInfo.detailInfo}}
            </div>
            <div class="right__phone">
                <!-- <span>默认</span> -->
				<span>{{orderInfo.userName}}</span>
				<span>{{orderInfo.telNumber}}</span>
            </div>
          
        </div>
    </div>
    <div class="pay__item">
        <div class="item">
            <div class="item__top">
                <div class="top__img">
                    <img :src="orderInfo.mainImgUrl" style="height: 120rpx;width: 120rpx;" alt="" srcset="">
                </div>
                <div class="top__right">
                    <div class="right__one one__text">
                        <span>{{orderInfo.title}}</span>
                        <span>￥{{orderInfo.amount/100}}</span>
                    </div>
                    <div class="right__two">
                        <span>{{orderInfo.spec}}</span>
                        <span>×{{orderInfo.nums}}</span>
                    </div>
                </div>
            </div>
            <div class="item__bottom">
                <div class="bottom__item">
                    <div>订单编号:</div>
                    <div>{{orderInfo.orderNo}}</div>
                </div>
                <div class="bottom__item">
                    <div>付款时间:</div>
                    <div>{{orderInfo.successTime}}</div>
                </div>
                <div v-if="orderInfo.aftersaleStatus==4">
                    <div class="bottom__item">
                        <div>退款原因:</div>
                        <div>{{orderInfo.reason}}</div>
                    </div>
                    <div class="bottom__item">
                        <div>退款拒绝原因:</div>
                        <div>{{orderInfo.applyBackReason}}</div>
                    </div>
                </div>
                <div class="bottom__item">
                    <div>商品总价:</div>
                    <div>￥{{orderInfo.amount/100}}</div>
                </div>
                <div class="bottom__item">
                    <div>实付款:</div>
                    <div class="bottom__price">￥{{orderInfo.amount/100}}</div>
                </div>
                
            </div>
            <div class="order__btn" v-if="orderInfo.aftersaleStatus==0 && orderInfo.orderStatus == 10" @click="pull(orderInfo.id)">
                <span>申请退款</span>
            </div>
        </div>
    </div>
</div>
</view>
</template>

<script>
export default {
	data(){
		return {
			//订单id
			orderId: '',
			//订单详情
			orderInfo: {},
		}
	},
    methods: {
        viewCar() {
            uni.navigateTo({
                url: '/pagesD/pages/personal/carTime?orderId=' + this.orderId
            })
        },
		pull(orderId) {
            uni.navigateTo({
                url: '/pagesD/pages/personal/pull?orderId=' + orderId
            })
        },//获得订单详情
		getOrderInfo(){
			let opts = { url: '/app/user/order/info/' + this.orderId, method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.orderInfo = res.data.data
				}
			})
		},
    },
	onLoad(e) {
	  this.orderId = e.orderId
	},
	onShow() {
		this.getOrderInfo()
	},
}
</script>

<style lang="scss" scoped>
.orderDetail {
    padding: 40rpx 0rpx;
    
    .order__car {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        padding: 40rpx;
        margin-bottom: 30rpx;
        position: relative;
        .btn__one{
            position: absolute;
            bottom: 50%;
            right: 40rpx;
        }
        >div:nth-of-type(1) {
            image {
                width: 100rpx;
                height: 100rpx;
                background: #D2FFE3;
                border-radius: 50%;
            }

            margin-right: 30rpx;
        }

        >div:nth-of-type(2) {
            >div:nth-of-type(1) {
                font-size: 34rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #00AD42;
            }

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

    .address {
        background: #ffffff;
        display: flex;
        align-items: center;
        padding: 30rpx 40rpx;
        margin-bottom: 30rpx;

        .address__left {
            .right__title {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 48rpx;
                margin-bottom: 20rpx;
            }

            .right__phone {
                display: flex;
                align-items: center;

                // span:nth-of-type(1) {
                //     font-size: 24rpx;
                //     font-family: PingFang SC;
                //     font-weight: bold;
                //     color: #F88D28;
                //     padding: 2rpx 4rpx;
                //     border: 1rpx solid #F88D28;
                // }

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

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

        .address__right {
            image {
                width: 14rpx;
                height: 24rpx;
            }
        }
    }

    .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;
        }
    }

    .pay__item {

        padding: 30rpx 40rpx;

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

            .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;
                        }
                    }
                }
            }

            .item__bottom {
                margin-top: 30rpx;

                .bottom__item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 30rpx;

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

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

                    .bottom__price {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #F1251B !important;
                    }
                }
            }
        }
    }
}
</style>
