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

<template>
    <view class="partner-home">
        <!-- 头部信息 -->
        <view class="header">
            <image class="avatar" src="/static/img/logo.png" mode="aspectFit"></image>
            <view class="header-text">
                <text class="title">您好，合伙人</text>
                <text class="subtitle">这里是合伙人数据中心</text>
            </view>
            <navigator url="/pages-mine/pages/partner-rule" class="rule-btn">合伙人规则</navigator>
        </view>
        <view class="content" style="margin-top: -180rpx;">
            <!-- 收入统计 -->
            <view class="income-section">
                <view class="section-header">
                    <text class="section-title">收入统计</text>
                    <text class="tip">每月20号到账上月结算收益</text>
                </view>
                <view class="income-grid">
                    <view class="income-item">
                        <text class="amount">¥{{ detail.totalIncome || "0.00" }}</text>
                        <text class="label">累计收入</text>
                    </view>
                    <view class="income-item">
                        <text class="amount">¥{{ detail.todayEstimateIncome || "0.00" }}</text>
                        <text class="label">今日预估</text>
                    </view>
                    <view class="income-item">
                        <text class="amount">¥{{ detail.lastMontyEstimateIncome || "0.00" }}</text>
                        <text class="label">上月预估</text>
                    </view>
                    <view class="income-item">
                        <text class="amount">¥{{ detail.thisMontyEstimateIncome || "0.00" }}</text>
                        <text class="label">本月预估</text>
                    </view>
                    <view class="income-item">
                        <text class="amount">¥{{ detail.lastMontySettlement || "0.00" }}</text>
                        <text class="label">上月结算</text>
                    </view>
                    <view class="income-item">
                        <text class="amount">¥{{ detail.waitAccount || "0.00" }}</text>
                        <text class="label">待到账</text>
                    </view>
                </view>
            </view>

            <!-- 实用工具 -->
            <view class="tools-section">
                <text class="section-title">实用工具</text>
                <view class="tools-grid">
                    <navigator url="/pages-mine/pages/partner/income-detail" class="tool-item">
                        <image src="/pages-mine/static/partner1.png" mode="aspectFit"></image>
                        <text>收入明细</text>
                    </navigator>
                    <navigator url="/pages-mine/pages/partner/order-detail" class="tool-item">
                        <image src="/pages-mine/static/partner2.png" mode="aspectFit"></image>
                        <text>订单明细</text>
                    </navigator>
                </view>
            </view>

            <!-- 生成海报按钮 -->
            <button class="generate-poster" @click="generatePoster">生成专属二维码海报</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            detail: {
                totalIncome: 0,
                todayEstimateIncome: 0,
                lastMontyEstimateIncome: 0,
                thisMontyEstimateIncome: 0,
                lastMontySettlement: 0,
                waitAccount: 0,
            },
        };
    },
    onLoad() {
        this.getPartnerInfo();
    },
    methods: {
        getPartnerInfo() {
            uni.$u.get("/token/getUserPartnerInfo").then((res) => {
                if (res.code == 200) {
                    this.detail = res.data;
                }
            });
        },
        generatePoster() {
            // TODO: 实现生成海报功能
            uni.showToast({
                title: "正在生成海报...",
                icon: "loading",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.partner-home {
    min-height: 100vh;
    background-color: #f5f5f5;

    .section-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        display: block;
    }
    .header {
        display: flex;
        align-items: flex-start;
        background-color: #4caf50;
        padding: 30rpx;
        padding-top: 45rpx;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        height: 322rpx;
        border-radius: 0rpx 0rpx 161rpx 161rpx;

        .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .header-text {
            flex: 1;
            color: #fff;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                display: block;
            }

            .subtitle {
                font-size: 24rpx;
                opacity: 0.8;
            }
        }

        .rule-btn {
            padding: 10rpx 20rpx;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 30rpx;
            color: #fff;
            font-size: 24rpx;
        }
    }

    .income-section {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin: 20rpx auto;
        width: calc(100% - 40rpx);

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .tip {
                font-size: 24rpx;
                color: #999;
            }
        }

        .income-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20rpx;

            .income-item {
                background-color: #f8f8f8;
                padding: 20rpx;
                border-radius: 12rpx;
                text-align: center;

                .amount {
                    color: #ff4d4f;
                    font-size: 32rpx;
                    font-weight: bold;
                    display: block;
                }

                .label {
                    font-size: 24rpx;
                    color: #666;
                    margin-top: 8rpx;
                }
            }
        }
    }

    .tools-section {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin: 20rpx auto;
        width: calc(100% - 40rpx);

        .tools-grid {
            display: flex;
            gap: 30rpx;

            .tool-item {
                flex: 1;
                display: flex;
                align-items: center;
                padding: 20rpx;
                border-radius: 12rpx;

                image {
                    width: 90rpx;
                    height: 90rpx;
                    margin-right: 10rpx;
                }

                text {
                    font-size: 26rpx;
                    color: #333;
                }
            }
        }
    }

    .generate-poster {
        width: calc(100% - 60rpx);
        height: 88rpx;
        line-height: 88rpx;
        background-color: #4caf50;
        color: #fff;
        border-radius: 10rpx;
        font-size: 28rpx;
        margin: 40rpx auto;
    }
}
</style>