caimei-applets-store/pages/notice/club/notice-users.vue

<template>
    <view>
        <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true" />
        <view class="container-main" v-else>
        	<view class="clearfix">
        		<!-- 空白页 -->
        		<view class="empty-container" v-if="isEmpty">
        			<image mode="aspectFill" class="empty_notice" src="@/static/tabBar/emtry_notice.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="1" :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)">
        							<image src="@/static/tabBar/delete_notice.png" class="deleteImage" mode="aspectFill"></image>
        						</view>
        					</view>
        				</template>
        			</tui-swipe-action>
        		</view>
        		<!--加载loadding-->
        		<!-- <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
        		<tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore> -->
        		<!--加载loadding-->
        	</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isRequest: false,
            isEmpty: true
        };
    }
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.container-main {
	width: 100%;
	box-sizing: border-box;
	padding: 24rpx 0;
    .empty-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 60vh;
    }
	.empty_notice {
		width: 290rpx;
		height: 230rpx;
	}
    .error-text{
        color: #999999;
        font-size: 26rpx;
    }
}
.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: 40rpx;
			font-size: 28rpx;
			color: #666666;
			text-align: justify;
			float: left;
		}
	}
	.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%;
	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;
    .deleteImage{
        width: 56rpx;
        height: 56rpx;
    }
}
</style>