siyu_app/components/todo-list.vue

<template>
	
		<view class="doto-inner">
			<!--   <mescroll-body ref="mescrollRef" class="mescrollRef" @init="mescrollInit" top="0" bottom="0" :down="downOption" @down="downCallback" :up="upOption"
			     @up="upCallback" @emptyclick="emptyClick"> -->	
					 <block v-for="(item,index) in listData" :key="index">
						<view class="cell">
							<view class="item">
								<view class="leftContent">
									<view class="top">
										<image class="icon" src="/static/images/home/thing_time.png"></image>
										<view class="content">{{ item.content }}</view>
									</view>
									<view class="date">{{ item.eventTime }}</view>
								</view>
								<view class="rightContent">
									<text v-if="item.status==0" class="state">未完成</text>
									<text v-else class="dstate">已完成</text>
								</view>
							</view>
							<u-line color="#eee" />
						</view>
					 </block>
					 
				 <!-- </mescroll-body>	 -->	 
					 
	<!-- 		<view>
				<view class="item">
					<view class="leftContent">
						<view class="top">
							<image class="icon" src="/static/images/home/thing_time.png"></image>
							<view class="content">打电话跟进20个意向客户</view>
						</view>
						
						<view class="date">2022-12-22</view>
					</view>
					<view class="rightContent">
						<text class="state">未完成</text>
					</view>
				</view>
				<u-line  color="#eee" />
			</view> -->
			
		
	</view>	
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		name:"todo-list",
		props: {
			listData: {
				type: Array,
				default: null
			},
			isHot: {
				type: Boolean,
				default: false
			},
			permission: {
				type: Object,
				default: function(){
					return {};
				}
			}
		},
		data() {
			return {
				downOption: {
					auto: false, 
					use:false,
				},
				upOption: {
					auto: false, // 不自动加载
					use:false,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				    toTop:{
				    	width:0,
				    }
				},
			}
		},
		methods: {
			clickItem(e) {
				try {
					this.$Router.push({
						name: "newsDetail",
						query: e
					})
				} catch (er) {
					//TODO handle the exception
					console.error(er)
				}
		
			},
			formatTitle(title) {
				if (title != undefined) {
					var string = this.removeHTMLTag(title);
					string = this.escape2Html(string);
					return string;
				}
				return ''
			},
			/*移除HTML标签代码*/
			removeHTMLTag(str) {
				str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
				str = str.replace(/[ | ]*\n/g, ''); //去除行尾空白
				str = str.replace(/\n[\s| | ]*\r/g, ''); //去除多余空行
				str = str.replace(/&nbsp;/ig, ''); //去掉空格 
				return str;
			},
			//转意符换成普通字符
			escape2Html(str) {
				var arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			}
		}
		
	}
</script>

<style lang="scss">
	
	.doto-inner{
		margin: 0rpx 0;
		//display: flex;
		//flex-wrap: wrap;  //flex-wrap 设置当项目在容器中一行无法显示的时候如何处理。 nowrap 不换行  wrap：//正常换行  wrap-reverse：向上换行，第一行位于下方
		
		.cell{
			padding-top: 22rpx;
		    // margin-bottom: 16rpx;
		}
		.item{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			.leftContent{
				width: calc(90% - 38rpx);
				.top{
					display: flex;
					flex-direction: row;
				}
				.icon{
					width: 28rpx;
					height: 28rpx;
					margin-left: 21rpx;
					margin-top: 10rpx;
				}
				.content{
					color: #111;
					font-size: 30rpx;
					margin-left: 20rpx;
					font-weight: 400;
				}
				.date{
					margin-top: 22rpx;
					font-size: 22rpx;
					color: #999;
					margin-left: 66rpx;
				}
				
			}
			.rightContent{
				
				display: flex;
				align-items: center;
				.state{
					// width: 92rpx;
					// height: 40rpx;
					// background-color: #eeeeee;
					// border-radius: 8rpx;
					font-size: 24rpx;
					text-align: center;
				    color: #F79912;
				}
				.dstate{
					// width: 92rpx;
					// height: 40rpx;
					// background-color: #eeeeee;
					// border-radius: 8rpx;
					font-size: 24rpx;
					text-align: center;
				    color: #FF5C03;
				}
			}
		}
	}

</style>