book-hi/pages-car/pages/pay-success.vue

<template>
    <view class="pay-success">
        <view class="success-icon">
            <image src="../static/pay-success.png" mode="aspectFit"></image>
        </view>
        <view class="success-title">支付成功</view>
        <view class="success-desc">您的书籍将邮寄，请耐心等待</view>
        <view class="action-buttons">
            <button class="btn-return" @click="handleReturn">返回首页</button>
            <button class="btn-view" @click="handleViewCart">返回购物车</button>
        </view>
        
        <!-- 温馨提示 -->
        <view class="tip-section">
            <view class="tip-title">温馨提示</view>
            <view class="tip-content">
                平台不会以快递丢失/商品质量等为由，向您索取银行卡信息或手机验证码。请您时刻保持警惕，如遇问题，请您先与平台核实
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            orderId:''
        }
    },
    onLoad(options){
        this.orderId = options.orderId
    },
    methods: {
        handleReturn() {
            uni.switchTab({
                url: '/pages/sell/index'
            })
        },
        handleViewCart() {
            uni.switchTab({
                url: '/pages/cart/index'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.pay-success {
    min-height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 120rpx;

    .success-icon {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 40rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .success-title {
        font-size: 36rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 20rpx;
    }

    .success-desc {
        font-size: 28rpx;
        color: #999;
        margin-bottom: 80rpx;
    }

    .action-buttons {
        display: flex;
        gap: 30rpx;
        padding: 0 40rpx;
        width: 100%;
        box-sizing: border-box;

        button {
            flex: 1;
            height: 88rpx;
            border-radius: 10rpx;
            font-size: 32rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            &.btn-return {
                background: #f5f5f5;
                color: #666;
            }

            &.btn-view {
                background: #07c160;
                color: #fff;
            }
        }
    }

    .tip-section {
        margin-top: 80rpx;
        padding: 0 40rpx;
        width: 100%;
        box-sizing: border-box;

        .tip-title {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 16rpx;
        }

        .tip-content {
            font-size: 24rpx;
            color: #999;
            line-height: 1.6;
            text-align: justify;
        }
    }
}
</style>