book-hi/pages-mine/pages/partner/partner-status.vue

<template>
    <view class="partner-status">
        <!-- 待审核状态 -->
        <view class="status-content" v-if="detail.status === 0">
            <view class="icon-wrapper">
                <image src="/pages-mine/static/pending.png" mode="aspectFit" class="status-icon"></image>
            </view>
            <view class="status-title">请等待管理员审核</view>
            <view class="status-desc">您的申请已提交成功，预计1个工作日内审核完毕</view>
            <view class="status-tip">审核结果会通过消息通知到小程序内</view>
            <view class="btn-wrapper">
                <u-button type="primary" color="#38C148" @click="goHome">返回首页</u-button>
            </view>
        </view>

        <!-- 审核驳回状态 -->
        <view class="status-content" v-if="detail.status !== 0">
            <view class="icon-wrapper">
                <image src="/pages-mine/static/rejected.png" mode="aspectFit" class="status-icon"></image>
            </view>
            <view class="status-title">{{ statusMap[detail.status] }}</view>
            <view class="status-desc">您好，由于您所在区域不在平台的服务范围内</view>
            <view class="status-tip">暂时无法参与合伙人计划，给您带来的不便深感抱歉！</view>
            <view class="btn-wrapper">
                <u-button type="primary" color="#38C148" @click="goHome">返回首页</u-button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusMap: ["审核中", "审核通过", "审核驳回", "已拉黑但仍有余额", "已拉黑无余额"],
            detail: {},
            status: "pending", // 'pending' 或 'rejected'
        };
    },
    onLoad(options) {
        // 根据路由参数设置状态
        this.getPartnerStatus();
    },
    methods: {
        goHome() {
            uni.switchTab({
                url: "/pages/home/index",
            });
        },
        // 获取合伙人状态
        getPartnerStatus() {
            uni.$u.get("/token/getUserPartnerInfo").then((res) => {
                if (res.code == 200) {
                    this.detail = res.data;
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.partner-status {
    min-height: 100vh;
    background-color: #fff;
    padding: 120rpx 40rpx;

    .status-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .icon-wrapper {
        width: 200rpx;
        height: 200rpx;
        background: rgba(56, 193, 72, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40rpx;

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

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

    .status-desc {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 12rpx;
    }

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

    .btn-wrapper {
        width: 100%;
        padding: 0 30rpx;

        .u-button {
            height: 88rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
        }
    }

    .bottom-line {
        width: 100rpx;
        height: 8rpx;
        background: #d8d8d8;
        border-radius: 4rpx;
        margin-top: 200rpx;
    }
}
</style>