fix

13404089107

2026-04-03 4640a30eb0adaa601e27ccd189a915cde69e4ad7

fix

 traditionalApp/components/updatePopup.vue

@@ -1,25 +1,25 @@
<template>
    <u-popup :show="show" mode="center" bgColor="transparent" @close="handleClose">
        <view class="update-popup-content">
            <image src="/static/image/home/popBg.png" class="update-bg" mode="aspectFill"></image>
            <view class="update-text-area">
                <text class="update-title">更新提示</text>
                <text class="update-desc">更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容</text>
    <view v-if="show" class="update-popup-mask" @tap="handleClose">
        <view class="update-popup-content" @tap.stop>
            <image src="/static/image/home/popBg.png" class="update-header-img" mode="widthFix"></image>
            <view class="text-content">
                <view class="update-title">更新提示</view>
                <scroll-view scroll-y class="desc-scroll">
                    <text class="update-desc">更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容</text>
                </scroll-view>
                <view class="update-btn" @tap="handleUpdate">立即更新</view>
                <view class="cancel-btn" @tap="handleClose">暂不更新</view>
            </view>
        </view>
    </u-popup>
    </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

interface Props {
    show: boolean;
}

const props = withDefaults(defineProps<Props>(), {
withDefaults(defineProps<Props>(), {
    show: false
});

@@ -39,75 +39,96 @@
</script>

<style scoped lang="scss">
.update-popup-content {
    width: 658rpx;
    height: 1180rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;

    .update-bg {
        width: 658rpx;
        height: 1180rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .update-text-area {
        position: absolute;
        top: 576rpx;
        left: 0;
        width: 100%;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 60rpx;
        box-sizing: border-box;

        .update-title {
            font-size: 48rpx;
            font-weight: 500;
            color: #333333;
        }

        .update-desc {
            margin-top: 48rpx;
            font-size: 28rpx;
            color: #000000;
            line-height: 1.6;
            text-align: left;
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 6;
            overflow: hidden;
        }

        .update-btn {
            margin-top: 40rpx;
            width: 100%;
            height: 88rpx;
            background-color: #C63520;
            color: #fff;
            font-size: 32rpx;
.update-popup-mask {
    position: fixed;
    inset: 0;
    z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 44rpx;
    padding: 40rpx;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.68);
}

.update-popup-content {
    width: 580rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalShow 0.3s ease-out;
}

.update-header-img {
    width: 100%;
    height: auto;
    z-index: 1;
    display: block;
}

.text-content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 410rpx 40rpx 40rpx;
    position: absolute;
    inset: 0;
    z-index: 2;
}

.update-title {
    font-size: 44rpx;
    font-weight: 700;
    color: #333333;
    margin-bottom: 30rpx;
}

.desc-scroll {
    width: 100%;
    height: 200rpx;
    margin-bottom: 40rpx;
}

.update-desc {
    font-size: 28rpx;
    color: #666666;
    line-height: 1.6;
    text-align: left;
    display: block;
}

.update-btn {
    width: 100%;
    height: 96rpx;
    background: #c63520;
    color: #ffffff;
    font-size: 34rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
        }

        .cancel-btn {
            margin-top: 24rpx;
            font-size: 28rpx;
            color: #999999;
            background: transparent;
            padding: 10rpx 20rpx;
    padding: 20rpx;
        }

@keyframes modalShow {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}
</style>

 traditionalApp/pages/home/home.vue

@@ -128,19 +128,18 @@
            </view>
        </view>

        <!-- Update Popup Component -->
        <updatePopup :show="showUpdatePopup" @close="showUpdatePopup = false" @submit="handleUpdateSubmit" />
        <UpdatePopup :show="showUpdatePopup" @close="closeUpdatePopup" @submit="handleUpdateConfirm" />
    </view>
</template>

<script setup lang="ts">
    import { ref, onMounted, computed } from "vue";
    import UpdatePopup from "@/components/updatePopup.vue";
    import { ref, onMounted, computed, } from "vue";
    import { onPageScroll } from "@dcloudio/uni-app";
    import updatePopup from "../../components/updatePopup.vue";

    const statusBarHeight = ref(0);
    const scrollY = ref(0); // Add scrollY reactive variable
    const showUpdatePopup = ref(false); // Update popup visibility
    const showUpdatePopup = ref(false); // Update popup visibility, set to true by default for immediate display

    onMounted(() => {
        uni.getSystemInfo({
@@ -148,11 +147,6 @@
                statusBarHeight.value = res.statusBarHeight || 0;
            },
        });

        // 延迟展示弹窗
        setTimeout(() => {
            showUpdatePopup.value = true;
        }, 500);
    });

    onPageScroll((e) => {
@@ -176,9 +170,18 @@
        return color;
    });

    const handleUpdateSubmit = () => {
    const handleOpenUpdate = () => {
        showUpdatePopup.value = true;
    };

    const closeUpdatePopup = () => {
        showUpdatePopup.value = false;
    };

    const handleUpdateConfirm = () => {
        console.log('User confirmed update');
        // Handle update logic here
        closeUpdatePopup();
    };

    const goLiveDetail = () => {
@@ -719,6 +722,98 @@
        }
    }

    /* CSS for update popup has been moved to updatePopup component */
    .update-popup-mask {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40rpx;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.68);
    }

    .update-popup-panel {
        width: 580rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 200rpx;
        animation: modalShow 0.3s ease-out;
    }

    .update-popup-image {
        width: 580rpx;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .update-popup-body {
        width: 100%;
        background: #ffffff;
        border-radius: 32rpx;
        padding: 220rpx 40rpx 40rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .update-popup-title {
        font-size: 44rpx;
        font-weight: 700;
        color: #333333;
        margin-bottom: 30rpx;
    }

    .update-popup-scroll {
        width: 100%;
        max-height: 300rpx;
        margin-bottom: 40rpx;
    }

    .update-popup-desc {
        display: block;
        font-size: 28rpx;
        color: #666666;
        line-height: 1.6;
        text-align: left;
    }

    .update-popup-button {
        width: 100%;
        height: 96rpx;
        border-radius: 16rpx;
        background: #c63520;
        color: #ffffff;
        font-size: 34rpx;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24rpx;
    }

    .update-popup-cancel {
        padding: 20rpx;
        font-size: 28rpx;
        color: #9999bb;
    }

    @keyframes modalShow {
        from {
            transform: scale(0.8);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }
</style>