book-hi/pages-car/pages/arrival-reminder.vue

<template>
    <view class="arrival-reminder-page">
        <page-scroll
            ref="pageScroll"
            emptyText="暂无到货提醒"
            @updateList="updateList"
            url="/token/shop/user/noticeArrivalList"
            :immediate="true"
        >
            <view class="list-container">
                <arrival-reminder-item 
                    v-for="(item, index) in list" 
                    :key="index" 
                    :info="item"
                    @cancel="handleCancel"
                />
            </view>
        </page-scroll>
    </view>
</template>

<script>
import PageScroll from '@/components/pageScroll/index.vue';
import ArrivalReminderItem from '../components/arrival-reminder-item.vue';

export default {
    components: {
        PageScroll,
        ArrivalReminderItem
    },
    data() {
        return {
            list: []
        };
    },
    methods: {
        updateList(data) {
            this.list = data
        },
        handleCancel(item) {
            uni.showModal({
                title: '提示',
                content: '确定要取消该书籍的到货提醒吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 调用取消到货提醒接口
                        uni.$u.http.post('/token/shop/user/noticeArrivalCancel', {
                            isbn: item.isbn,
                        }).then(res => {
                            if (res.code === 200) {
                                uni.showToast({ title: '已取消到货提醒', icon: 'none' });
                                this.list = this.list.filter(row => row.isbn !== item.isbn);
                                this.$refs.pageScroll?.loadData(true)
                            } else {
                                uni.showToast({ title: '取消到货提醒失败', icon: 'none' });
                            }
                        });
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.arrival-reminder-page {
    background-color: #f5f5f5;
    min-height: 100vh;
}

.list-container {
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}
</style>