caimei-applets-caimei/pages/seller/notice/service/service.vue

<template>
    <view class="service">
        <tui-skeleton
            v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <view class="container">
            <tab-list v-model="params.type" />
            <view v-for="(cell, index) in messageList" class="info-card" :key="index">
                <view class="tui-notice clearfix">
                    <tui-swipe-action :operateWidth="80" :backgroundColor="'#F7F7F7'">
                        <template v-slot:content>
                            <notice-cell :cellType="1" :cell="cell" @trampInfo="trampInfo"></notice-cell>
                        </template>
                        <template v-slot:button>
                            <view class="tui-custom-btn_box">
                                <view class="tui-custom-btn" @click.stop="deleteBtn(cell.id, index)">
                                    <text class="iconfont icon-shanchu3"></text>
                                </view>
                            </view>
                        </template>
                    </tui-swipe-action>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import tabList from '../components/notice-server-tab.vue'
import noticeCell from '../components/notice-cell.vue'
export default {
    components: {
        noticeCell,
        tabList
    },
    data() {
        return {
            skeletonShow: false, // 刷新
            params: {
                messageType: 3,
                pageNum: 1,
                pageSize: 10,
                source: 2,
                commonId: '',
                type: ''
            },
            messageList: [], // 信息列表
            userInfo: {},
            isLastPage: false, //  是否是最后一页
        }
    },
    watch: {
        'params.type': {
            handler(val) {
                this.getMessageList({ isRefresh: true })
            }
        }
    },
    mounted() {
        this.getMessageList({ isRefresh: false })
    },
    methods: {
        // 请求信息列表
        async getMessageList(options) {
            this.userInfo = uni.getStorageSync('userInfo')
            this.params.commonId = this.userInfo.serviceProviderId
            const { data } = await this.SellerService.getSellerNotice(this.params)
            if (options.isRefresh) {
                this.messageList = data.list
            }
            else {
                this.messageList = [...this.messageList, ...data.list]
            }
            this.isLastPage = data.isLastPage
        },
        // 删除
        deleteBtn(id, index) {
            // 删除通知消息
            this.UserService.authDeleteMessage({ id: id })
                .then(response => {
                    uni.vibrateShort({
                        success: () => {
                            this.params.pageSize = this.params.pageNum * this.params.pageSize
                            this.params.pageNum = 1
                            this.getMessageList({isRefresh: true})
                        }
                    })
                })
                .catch(error => {
                    console.log('error=>', error.msg)
                })
        },
        // 详情
        async trampInfo($event) {
            const time = $event.time.replace(/[年月日]/g, '-')
            if ($event.shopTieredType === 7 && $event.shopTieredType === 10) {
                this.$api.navigateTo(
                    '/pages/seller/notice/service/Institutional_visits?spId=' +
                        this.userInfo.serviceProviderId +
                        '&accDateTime=' +
                        $event.time + '&type=' + this.params.type
                )
            } else {
                const {data} = await this.SellerService.getFindUserId({id: $event.clubId, userType: 1})
                this.$api.navigateTo('/pages/seller/club/club-portrait?userId=' + data)
            }
        }
    },
    onPullDownRefresh() {
        this.params.pageSize = 10
        this.params.pageNum = 1
        this.getMessageList({isRefresh: true})
        uni.stopPullDownRefresh()
    },
    onReachBottom() {
        if (!this.isLastPage) {
            this.params.pageNum += 1
            this.getMessageList({isRefresh: false})
        }
    }
}
</script>

<style scopde lang="scss">
.container {
    box-sizing: border-box;
}
.info-card {
    margin-bottom: 24rpx;
    box-sizing: border-box;
}
page {
    background-color: #f7f7f7;
}
.container-main {
    width: 100%;
    box-sizing: border-box;
    padding: 24rpx 0;
    .empty-container-image {
        width: 260rpx;
        height: 260rpx;
        margin-top: -300rpx;
    }
}
.tui-swipeout-content {
    white-space: normal !important;
}
.tui-notice {
    margin-bottom: 24rpx;
}
.tui-notice-cell {
    width: 702rpx;
    height: auto;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 24rpx;
    margin: 0 auto;
    .tui-cell-top {
        width: 100%;
        height: 105rpx;
        line-height: 105rpx;
        border-bottom: 1px solid #ccc;
        margin-bottom: 33rpx;
        .cell-title {
            font-size: 32rpx;
            color: #333333;
            float: left;
            font-weight: bold;
        }
        .cell-time {
            font-size: 24rpx;
            color: #999999;
            float: right;
        }
    }
    .tui-cell-content {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        border-radius: 8rpx;
        line-height: 44rpx;
        padding: 24rpx;
        background-color: #f7f7f7;
        font-size: 28rpx;
        color: #333333;
        text-align: justify;
    }
}
.tui-custom-btn_box {
    width: 80px;
    height: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
}

.tui-custom-btn {
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    background-color: #f94b4b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    .icon-shanchu3 {
        font-size: 32rpx;
    }
}
</style>