book-hi/pages-home/pages/order-success.vue

<template>
    <view class="order-success" @touchstart="touchStart" @touchend="touchEnd">
        <image class="success-icon" src="../static/success.png" mode="widthFix"></image>
        <text class="success-title">订单提交成功</text>
        <text class="success-message">您的订单已提交，书嗨稍后将安排快递上门取书！</text>
        <view class="button-group">
            <u-button
                class="notify-button"
                :custom-style="{ borderColor: '#07c160', width: '235rpx', color: '#07c160' }"
                type="default"
                @click="goHome"
                >返回首页</u-button
            >
            <!-- <u-button class="notify-button" :custom-style="{borderColor: '#07c160',width:'235rpx',
            color: '#07c160'}" type="default" @click="notifyStatusChange">状态变更通知</u-button> -->
            <u-button
                :custom-style="{ background: '#07c160', width: '235rpx', color: '#ffffff' }"
                class="view-order-button"
                type="primary"
                @click="viewOrder"
                >查看订单</u-button
            >
        </view>
        <!-- 公众号图片展示 -->
        <view class="gzh-img-box" @click="openOfficialAccount">
            <image class="gzh-img" src="../static/gzh.png" mode="widthFix" style="width: 100vw;margin-top: 100rpx;"></image>
        </view>
        <OrderSuccessPopup ref="orderPopupRef" />
    </view>
</template>

<script>
import OrderSuccessPopup from "../components/OrderSuccessPopup.vue";
export default {
    data() {
        return {
            startX: 0
        };
    },
    components: {
        OrderSuccessPopup,
    },
    onUnload() {
        uni.navigateTo({
            url: "/pages/home/index",
        });
    },
    methods: {
        touchStart(e) {
            this.startX = e.touches[0].clientX;
        },
        touchEnd(e) {
            const endX = e.changedTouches[0].clientX;
            if (this.startX - endX > 50) {
                // 左滑距离超过50px
                uni.navigateBack({ delta: 2 }); // 返回两级
            }
        },

        notifyStatusChange() {
            // 处理状态变更通知逻辑
            console.log("状态变更通知");
        },
        viewOrder() {
            uni.navigateTo({
                url: "/pages-mine/pages/order-page?status=-1",
            });
        },
        goHome() {
            uni.switchTab({
                url: "/pages/home/index",
            });
        },
        //获取弹窗信息
        getDialogInfo() {
            uni.$u.http.post("/token/submitPage/dialog").then((res) => {
                if (res.code == 200) {
                    res.data?.id && this.$refs.orderPopupRef.openPopup(res.data);
                }
            });
        },
        // 打开公众号
        openOfficialAccount() {
            uni.navigateTo({
                url: '/pages-home/pages/official-account'
            });
        }
    },
    onLoad() {
        let frequency = uni.getStorageSync("frequency");
        if (!frequency) {
            this.getDialogInfo();
        }
    },
};
</script>

<style lang="scss" scoped>
.order-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    padding: 34rpx 0 44rpx 0;
    height: 100vh;

    .success-icon {
        width: 200rpx;
        height: 200rpx;
    }

    .success-title {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 40rpx;
        color: #333333;
        line-height: 107rpx;
    }

    .success-message {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        margin-bottom: 40rpx;
    }

    .button-group {
        display: flex;
        justify-content: center;
        gap: 70rpx;
    }
}
</style>