diancan_uni/pages/pay-success/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <com-header :page-title="pageTitle" :show-back="showBack" :show-header="showHeader"></com-header>
        <view class="wrap">
            <view class="wrap_t">
                <image class="banner" src="/static/statics/img/success_bg.png"></image>
            </view>
            <view class="order_wrap">
                <view class="order_t">
                    <image class="icon_success" src="/static/statics/img/icon_success.png"></image>
                    <view class="tips">支付成功</view>
                    <view class="desc">您的订单会快速进行处理</view>
                    <view class="price">
                        <text class="unit">¥</text>
                        {{ orderInfo.pay_price }}
                    </view>
                </view>
                <image class="order_nr_t" src="/static/statics/img/line_tu.png"></image>
                <view class="order_nr">
                    <view class="order_item">
                        <text class="item_l">订单编号：</text>
                        <text class="item_r">{{ orderInfo.order_num }}</text>
                    </view>
                    <view class="order_item">
                        <text class="item_l">下单时间：</text>
                        <text class="item_r">{{ orderInfo.created_at }}</text>
                    </view>
                    <view class="order_item">
                        <text class="item_l">支付方式：</text>
                        <text class="item_r">{{ orderInfo.pay_name }}</text>
                    </view>
                    <view class="order_item">
                        <text class="item_l">交易时间：</text>
                        <text class="item_r">{{ orderInfo.pay_at }}</text>
                    </view>
                </view>
            </view>
            <view class="btn_wrap" @tap="toOrderDetail">
                <view class="btn">订单详情</view>
            </view>
        </view>
    </view>
</template>

<script>
// index.js
let myPro = require('../../utils/wxRequest.js');

let util = require('../../utils/util.js');

export default {
    data() {
        return {
            pageTitle: '支付成功',
            showBack: true,
            showHeader: false,
            order_id: '',

            orderInfo: {
                order_num: '',
                created_at: '',
                pay_name: '',
                pay_at: ''
            }
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;
        that.setData({
            order_id: options.order_id
        });
    },
    onShow: function () {
        // Do something when page show.
        let that = this; // 获取订单信息

        that.getOrderDetail();
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取订单信息
        getOrderDetail() {
            let that = this;
            let params = {
                order_id: that.order_id
            };
            myPro
                .wxRequest('user/v2/order/detail', 'GET', params)
                .then((res) => {
                    that.setData({
                        orderInfo: res.result
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 去订单详情
        toOrderDetail(event) {
            let that = this;
            uni.redirectTo({
                url: '/pages/user/order/detail/index?order_id=' + that.order_id
            });
        }
    }
};
</script>
<style>
/**index.wxss**/
.page_title {
    width: 750rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    color: #ffffff;
    font-size: 36rpx;
}
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
}
.wrap_t .banner {
    width: 750rpx;
    height: 501rpx;
}
.order_wrap {
    width: 690rpx;
    /* background: #FFFFFF; */
    margin: -300rpx auto 0;
    position: relative;
    display: flex;
    flex-direction: column;
}
.order_wrap .banner_wenzi {
    width: 514rpx;
    height: 203rpx;
    position: absolute;
    top: -180rpx;
    left: 50%;
    transform: translateX(-50%);
}
.order_t {
    padding: 40rpx 0 30rpx;
    text-align: center;
    background: #ffffff;
    border-radius: 10rpx 10rpx 0 0;
}
.order_t .icon_success {
    width: 177rpx;
    height: 124rpx;
}
.order_t .tips {
    font-size: 44rpx;
    font-weight: 500;
    color: #2d5f59;
    padding-top: 20rpx;
}
.order_t .desc {
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.54);
    padding-top: 10rpx;
}
.order_t .price {
    font-size: 60rpx;
    color: #000000;
    padding-top: 20rpx;
}
.order_t .price .unit {
    font-size: 40rpx;
}
.order_wrap .order_nr_t {
    width: 690rpx;
    height: 28rpx;
}
.order_nr {
    padding: 40rpx 0 18rpx;
    background: #ffffff;
    border-radius: 0 0 10rpx 10rpx;
}
.order_nr .order_item {
    padding: 0 30rpx 28rpx;
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.54);
}
.order_nr .order_item .item_r {
    padding-left: 20rpx;
    color: rgba(0, 0, 0, 0.87);
}
.btn_wrap {
    margin-top: 90rpx;
}
.btn_wrap .btn {
    width: 405rpx;
    height: 98rpx;
    margin: 0 auto;
    background: #2d5f59;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #fefefe;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>