book-hi/pages/home/components/reduce-share.vue

<template>
    <custom-popup v-model="showPopup" mode="center" border-radius="24" width="540rpx" :bg-color="'transparent'">
        <view class="share-container">
            <!-- 标题 -->
            <view class="title-text">
                <view>好友邀您助力</view>
                <view>减少买书消费</view>
            </view>

            <!-- 活动规则按钮 -->
            <view class="rules-button-container">
                <u-button class="rules-button" :custom-style="rulesButtonStyle" @click="viewRules">查看活动规则</u-button>
            </view>

            <!-- 用户信息区域 -->
            <view class="user-info">
                <view class="avatar-container">
                    <u-avatar :src="avatarUrl" size="140"></u-avatar>
                </view>
                <view class="username">{{ username }}</view>
            </view>

            <!-- 助力按钮 -->
            <button class="help-button" @click="inviteClickHelp" v-if="inviteDone == 1">
                点击助力
            </button>

            <button class="help-button" @click="close" v-if="inviteDone == 0">
                助力成功
            </button>

            <!-- 关闭按钮 -->
            <view class="close-button" @click="close">
                <image src="/static/img/activity/close2.png" mode="widthFix"></image>
            </view>
        </view>
    </custom-popup>
</template>

<script>
import customPopup from "@/components/custom-popup.vue";

export default {
    components: {
        customPopup,
    },
    data() {
        return {
            showPopup: false,
            avatarUrl: "", // 用户头像URL
            username: "", // 用户名，带星号
            // 自定义按钮样式
            rulesButtonStyle: {
                backgroundColor: "#39c248",
                color: "#FFFFFF",
                fontSize: "28rpx",
                width: "280rpx",
                height: "80rpx",
                borderRadius: "40rpx",
            },
            // 邀请可以助力 0-否(完成不能再助力) 1-是
            inviteDone: 1,
            reduceCode: "",
        };
    },
    methods: {
        open(reduceCode) {
            this.showPopup = true;
            this.reduceCode = reduceCode;
            this.getInviteHelpQuery(reduceCode);
        },
        //获取分享的邀请人信息
        getInviteHelpQuery(reduceCode) {
            this.$u.api.reduceHelpQueryAjax(reduceCode).then((res) => {
                console.log(res, 'res')
                if (res.code == 200) {
                    this.avatarUrl = res.data.imgPath;
                    this.username = res.data.nickName;
                    this.inviteDone = res.data.inviteDone;
                } else {
                    this.username = res.msg;
                    uni.showToast({
                        icon: "none",
                        title: res.msg,
                    });
                }
            });
        },

        close() {
            this.showPopup = false;
            uni.removeStorageSync("reduceCode");
        },
        viewRules() {
            // 打开活动规则弹窗
            this.$emit("view-rules");
        },

        //调用助力接口
        inviteClickHelp() {
            let reduceCode = this.reduceCode || uni.getStorageSync("reduceCode");
            this.$u.api.reduceClickHelpAjax({ reduceCode: reduceCode }).then((res) => {
                if (res.code == 200) {
                    this.close();
                    this.inviteDone = 0;
                    uni.showToast({
                        icon: "none",
                        title: "助力成功",
                        duration: 2000
                    });
                    this.$emit("inviteSuccess");
                } else {
                    uni.showToast({
                        icon: "none",
                        title: res.msg || "助力失败",
                        duration: 2000
                    });
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.share-container {
    position: relative;
    padding: 40rpx;
    border-radius: 24rpx;
    text-align: center;
    background: url("https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/bg.png") no-repeat center center;
    background-size: 100% 100%;
}

.title-text view {
    font-size: 50rpx;
    font-weight: bold;
    color: #000;
}

.rules-button-container {
    display: flex;
    justify-content: center;
    margin: 20rpx 0 40rpx;

    .rules-button {
        position: relative;

        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 80rpx;
            height: 2rpx;
            background-color: #39c248;
        }

        &::before {
            left: -90rpx;
        }

        &::after {
            right: -90rpx;
        }
    }
}

.user-info {
    .avatar-container {
        margin: 0 auto 20rpx;
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        overflow: hidden;
    }

    .username {
        font-size: 28rpx;
        color: #333;
        background: #39c248;
        padding: 6rpx 20rpx;
        border-radius: 30rpx;
        color: #fff;
        display: inline-block;
        position: relative;
        top: -50rpx;
    }
}

.help-button {
    height: 90rpx;
    background: linear-gradient(to bottom, #47d46c, #24ad3c);
    font-size: 32rpx;
    color: #ffffff;
    border-radius: 10rpx;
    line-height: 90rpx;
    width: 100%;
    margin-top: 20rpx;
    border: none;
}

.close-button {
    position: absolute;
    bottom: -120rpx;
    left: 50%;
    transform: translateX(-50%);

    image {
        width: 70rpx;
        height: 70rpx;
    }
}
</style>