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

<template>
    <u-popup v-model="showPopup" @close="closePopup" @open="openPopup" mode="center" border-radius="20" width="100%" class="first-order-free-popup">
        <view class="popup-content">
            <image 
                class="gift-image" 
                src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/free_dialog.png" 
                mode="widthFix"
                @click="closePopup"
            />
            <view class="action-buttons">
                <view class="check-rules" @click="checkRules">查看规则 ></view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    name: 'FirstOrderFreePopup',
    data() {
        return {
            showPopup: false
        };
    },
    methods: {
        openPopup() {
            this.showPopup = true;
        },
        closePopup() {
            this.showPopup = false;
            this.$emit('close');
        },
        startBuying() {
            this.$emit('start');
            this.closePopup();
        },
        checkRules() {
            // 跳转到卖书规则页面
            uni.navigateTo({
                url: '/pages-mine/pages/rules-for-sellbooks'
            });
        }
    }
};
</script>

<style lang="scss" >

.popup-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 16rpx;

    .gift-image {
        width: 100%;
        height: auto;
    }

    .action-buttons {
        position: absolute;
        bottom: 100rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .check-rules {
        font-size: 40rpx;
        color: #FFFFFF;
        text-align: center;
        padding: 10rpx;
        padding-left: 80rpx;
    }
}
</style>