caimei-applets-caimei/pages/notice/club/notice-article.vue

<template>
    <view class="container cart clearfix">
        <tui-skeleton
            v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <view class="container-main" v-else>
            <view class="clearfix">
                <!-- 空白页 -->
                <view class="empty-container" v-if="isEmpty">
                    <image class="empty-container-image" :src="StaticUrl + '/icon/icon-notice-empty@2x.png'"></image>
                    <text class="error-text">暂无任何消息~</text>
                </view>
                <!-- 列表 -->
                <view
                    class="tui-notice"
                    v-else
                    v-for="(cell, index) in list"
                    :key="index"
                    @click.stop="handleOrderClick(cell)"
                >
                    <tui-swipe-action :operateWidth="80" :backgroundColor="'#F7F7F7'">
                        <template v-slot:content>
                            <notice-cell :cellType="5" :cell="cell"></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>
                <!--加载loadding-->
                <tui-loadmore :visible="loadding" :index="3" type="black" />
                <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
                <!--加载loadding-->
            </view>
        </view>
    </view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import noticeMixins from './mixins/notice.mixins.js'
import noticeCell from './components/notice-cell.vue'
export default {
    mixins: [noticeMixins],
    components: {
        noticeCell
    },
    data() {
        return {
            skeletonShow: true,
            StaticUrl: this.$Static,
            listQuery: {
                source: 2,
                commonId: 0,
                messageType: 0,
                pageNum: 1,
                pageSize: 10
            },
            list: [
                {
                    id: 1,
                    time: '16546464',
                    content: 'abnwahdowadjhwadojw',
                    link: 'https://www.caimei365.com/info/detail-7880-1.html'
                },
                {
                    id: 1,
                    time: '16546464',
                    content: 'abnwahdowadjhwadojw'
                }
            ],
            isEmpty: false,
            loadding: false,
            pullUpOn: true,
            pullFlag: true,
            hasNextPage: false,
            nomoreText: '上拉显示更多'
        }
    },
    onLoad(option) {
        this.initData(option)
    },
    methods: {
        async initData(option) {
            const userInfo = await this.$api.getStorage()
            this.listQuery.messageType = option.messageType
            this.listQuery.commonId = userInfo.clubId ? userInfo.clubId : 0
            this.getUserAuthClubMessageList()
        },
        handleOrderClick(cell) {
            const link = `${
                process.env.NODE_ENV === 'development' ? 'http://120.79.25.27:8009' : 'https://www.caimei365.com'
            }/info/detail-${cell.thisId}-1.html`
            console.log(link)
            uni.navigateTo({
                url: `/pages/h5/article/path?link=${link}`
            })
        }
    },
    onReachBottom() {
        if (this.hasNextPage) {
            this.loadding = true
            this.pullUpOn = true
            this.getReachBottomData()
        }
    },
    onPullDownRefresh() {
        //下拉刷新
        this.listQuery.pageNum = 1
        this.getUserAuthClubMessageList()
        uni.stopPullDownRefresh()
    },
    onShow() {}
}
</script>

<style lang="scss">
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-notice {
    margin-bottom: 24rpx;
}
.tui-notice-cell {
    width: 702rpx;
    height: auto;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 16rpx 24rpx;
    margin: 0 auto;
    .tui-cell-top {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        .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: 160rpx;
        box-sizing: border-box;
        padding: 16rpx;
        border-radius: 8rpx;
        background-color: #f7f7f7;
        .cell-image {
            width: 128rpx;
            height: 128rpx;
            border-radius: 8rpx;
            float: left;
            image {
                width: 128rpx;
                height: 128rpx;
                display: block;
                border-radius: 8rpx;
            }
        }
        .cell-content {
            width: 490rpx;
            height: 100%;
            box-sizing: border-box;
            padding: 0 20rpx;
            line-height: 42rpx;
            font-size: 28rpx;
            color: #666666;
            text-align: justify;
            float: left;
            text-overflow: ellipsis;
            display: -webkit-box;
            word-break: break-all;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    }
    .tui-cell-bot {
        width: 100%;
        height: 80rpx;
        box-sizing: border-box;
        padding: 16rpx 0 0 0;
        .tui-cell-btn {
            width: 160rpx;
            height: 64rpx;
            border-radius: 35rpx;
            box-sizing: border-box;
            border: 1px solid #999999;
            text-align: center;
            line-height: 64rpx;
            font-size: 26rpx;
            color: #333333;
            float: right;
            margin-left: 24rpx;
        }
    }
}
.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>