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">
            <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 noticeCell from '../components/notice-cell.vue'
export default {
    components: {
        noticeCell
    },
    data() {
        return {
            skeletonShow: false, // 刷新
            messageList: [
                {
                    id: 1,
                    messageType: 1,
                    time: '2023年8月29日',
                    accountType: 1,
                    content: '大黄蜂'
                }
            ], // 信息列表
        }
    },
    methods: {
        // 请求信息列表
        async getMessageList(){
            console.log(1111)
        },
        // 删除
        deleteBtn() {},
        // 详情
        trampInfo($event) {
            this.$api.navigateTo('/pages/seller/notice/service/Institutional_visits?id=' + $event)
        }
    },
    onPullDownRefresh() {
        console.log('刷新')
        uni.stopPullDownRefresh()
    },
    onReachBottom() {
        console.log('到底了')
    }
}
</script>

<style scopde lang="scss">
.container {
    padding: 24rpx;
    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:0 24rpx;
	margin: 0 auto;
	.tui-cell-top{
		width: 100%;
		height: 105rpx;
		line-height: 105rpx;
        border-bottom: 1px solid #ccc;
		.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>