book-hi/pages/home/components/ConfirmBooks.vue

<template>
    <u-popup v-model="showPopup" @close="closePopup" @open="openPopup" mode="center" border-radius="20">
        <view class="popup-content">
            <view class="popup-title">需要确认你手里的书册数齐全</view>
            <view class="desc-text">缺册会导致拒收，请核对册数后再提交</view>

            <view class="book-info">
                <image class="book-cover" src="/static/img/book-cover.jpg" mode="aspectFit" />
                <view class="book-detail">
                    <view class="book-name">这里是本本名称换行文字过多展示这里是书本...</view>
                    <view class="book-isbn">ISBN:9787020134144</view>
                </view>
            </view>

            <view class="buttons">
                <button class="confirm-btn" @click="confirmComplete">确认书册齐全</button>
                <button class="incomplete-btn" @click="markIncomplete">书册不全，有缺册</button>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    data() {
        return {
            showPopup: false
        };
    },
    methods: {
        openPopup() {
            this.showPopup = true;
        },
        closePopup() {
            this.showPopup = false;
        },
        confirmComplete() {
            // 处理确认书册齐全的逻辑
            this.$emit('confirm');
            this.closePopup();
        },
        markIncomplete() {
            // 处理书册不全的逻辑
            this.$emit('incomplete');
            this.closePopup();
        }
    }
};
</script>

<style lang="scss">
.popup-content {
    background: #FFFFFF;
    padding: 40rpx;
    width: 600rpx;

    .popup-title {
        font-size: 32rpx;
        color: #333333;
        font-weight: 500;
        text-align: center;
    }

    .desc-text {
        font-size: 26rpx;
        color: #999999;
        text-align: center;
        margin-top: 20rpx;
        margin-bottom: 30rpx;
    }

    .book-info {
        display: flex;
        background: #F8F8F8;
        padding: 20rpx;
        border-radius: 10rpx;
        margin-bottom: 30rpx;

        .book-cover {
            width: 120rpx;
            height: 160rpx;
            border-radius: 6rpx;
        }

        .book-detail {
            flex: 1;
            margin-left: 20rpx;

            .book-name {
                font-size: 28rpx;
                color: #333333;
                line-height: 1.4;
                margin-bottom: 10rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            .book-isbn {
                font-size: 26rpx;
                color: #999999;
            }
        }
    }

    .buttons {
        display: flex;
        flex-direction: column;
        gap: 20rpx;

        button {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            border-radius: 10rpx;
            font-size: 32rpx;
            border: none;

            &.confirm-btn {
                background-color: #38C148;
                color: #FFFFFF;
            }

            &.incomplete-btn {
                background-color: #F1F1F1;
                color: #FF5B5B;
            }
        }
    }
}
</style>