<template>
    <view>
        <scroll-view :scroll-y="true" @scroll="handleContentScroll">
            <!-- 导航栏  :leftIconColor="!isTop ? '#fff' : '#000'"-->
            <!-- <u-navbar :placeholder="true" autoBack @click="autoBackFun">
                <view slot="center">
                    <view class="centerTitle" style="background-color: #fff;">{{ title }}</view>
                </view>
            </u-navbar> -->

            <view class="content" v-if=orderInfo>
                <view class="contentBox">
                    <view class="successClass">
                        <view style="margin-top: 36rpx;">
                            <image style="width: 320rpx;height: 172rpx;" @click="selectProductShowFun"
                                src="@/static/points/successIcon.png" mode=""></image>
                        </view>
                        <view class="payStatus"> 商品支付成功</view>
                        <view class="promiseSeedTime">我们将在{{productInfo.deliveryTime}}个小时内寄出 </view>
                    </view>
                    <view style="height: 2rpx;background-color: #f0f0f0;margin-top: 40rpx;"> </view>

                    <view class="address">
                        <view class="shxx">收货信息</view>
                        <view class="addressBox">
                            <image style="width: 45rpx;height: 40rpx;" @click="addressSelectFun"
                                src="@/static/points/addressIcon.png" mode=""></image>
                            <view style="margin-left: 16rpx;">
                                <view class="name">
                                    {{orderInfo.receiverName}} <text>
                                        {{orderInfo.receiverPhone}}</text>
                                </view>
                                <view class="address">
                                    {{orderInfo.addressName}}
                                </view>
                            </view>

                        </view>

                    </view>
                </view>

            </view>
            <view class="buttonClass">
                <u-button :customStyle="{
                    color: '#fff',
                    background: '#03C1B8'
                }" @click="goHome">返回首页</u-button>

                <u-button :customStyle="{
                    color: '#03C1B8 ',
                    background: ''
                }" @click="checkOrder">查看订单</u-button>

            </view>

        </scroll-view>

    </view>
</template>

<script>
import { getPointOrderInfo, } from '@/api/pointOrder'
export default {
    components: {},
    data() {
        return {
            title: '兑换成功',
            isTop: 0,
            redemptionRulesShowPopup: false,
            selectProductShowPopup: false,
            orderNo: null,
            orderInfo: null,
            productInfo: null,

        }
    },
    onLoad(data) {
        if (data.orderNo) {
            this.orderNo = data.orderNo
            this.getOrderInfo();
        }
    },
    onShow() {

    },
    onPageScroll(e) {
        //console.log("滚动距离为：" + e.scrollTop);
        this.isTop = e.scrollTop;
    },

    methods: {
        async getOrderInfo() {
            const res = await getPointOrderInfo({
                orderNo: this.orderNo,
               // openId: uni.getStorageSync('wx_copenid')
            })
            this.orderInfo = res.data.data.orderInfo
            this.productInfo = res.data.data.productInfo
        },
        handleContentScroll(e) {
            this.isTop = e.detail.scrollTop > 0
        },
        //返回首页
        goHome() {
            uni.switchTab({
                url: '/pages/index/index'
            });
        },
        //查看订单 //url: '/points/productDetails/pendingPayment'
        checkOrder() {
            uni.navigateTo({
                url: '/points/order/orderList'
            });
        },
        //返回上一页
        autoBackFun() {
            uni.navigateBack();
        },
        //去编辑地址
        goEditAddress() {
            uni.navigateTo({
                url: '/pages/address/address-edit'
            });
            // /let str = uni.$u.queryParams(params);
            // uni.navigateTo({
            // 	url: `/packageA/pages/shop/coupon/couponDetail${str}`
            // });
        },

    }
}
</script>

<style></style>
<style lang="scss" scoped>
.footer-bar {
    .u-button {
        width: 670rpx;
        height: 84rpx;
        border-radius: 98rpx 98rpx 98rpx 98rpx;
        margin: 20rpx 40rpx;
        background: '#000';
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 36rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;


    }
}

.centerTitle {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #060606;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.buttonClass {
    display: flex;
    padding: 32rpx;
    font-family: PingFang SC, PingFang SC;

    button {
        width: 288rpx;
        height: 84rpx;
        border-radius: 98rpx 98rpx 98rpx 98rpx;
        border: 2rpx solid #03C1B8;
    }

}

.content {
    background-color: #F8F8F8;
    padding: 32rpx;
    font-family: PingFang SC, PingFang SC;
    //height: 658rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;


    .contentBox {
        padding: 32rpx;
        width: 686rpx;
        height: 658rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .successClass {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

    }

    .payStatus {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 32rpx;
    }

    .promiseSeedTime {
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 24rpx;
    }

    .address {
        .shxx {
            margin-top: 20rpx;
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .addressBox {
            margin-top: 24rpx;
            display: flex;
            align-items: flex-start;

            .name {
                font-weight: 500;
                font-size: 32rpx;
                color: #333333;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;

            }

            .address {
                margin-top: 8rpx;
                font-weight: 500;
                font-size: 28rpx;
                color: #666666;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

        }


    }




}
</style>