jobslink-user-clent/pages/news/newsList.vue

<template>
	<view>
		<view :key="group" v-for="(item,group) in list">
			<m-slide-list :prop="prop" :key="value.id" v-for="(value,index) in item" :value="value" :button="buttonList" @remove="click(value,group,index)"
			 @controller-reg="controller.reg" @controller-moving="controller.moving" @controller-opened="controller.opened"
			 @controller-closed="controller.closed">
				<view class="news-item">
					<view class="now-message-info" hover-class="uni-item--hover" @click="clickMethod(value)" :style="{width:windowWidth}">
						<view class="list-right">
							<view v-if="value[prop.isRead] === 0" class="point"></view>
							<view class="list-title">{{ value[prop.title] }}</view>
							<view class="list-detail">{{ value[prop.listDesc] }}</view>
						</view>
						<view class="list-right-1" v-if="value[prop.time]">{{ value[prop.time] }}</view>
					</view>
					<view style="clear:both"></view>
				</view>
			</m-slide-list>
			<!-- <view class="news-loading">
				加载中...
			</view> -->
		</view>
	</view>
</template>

<script>
	import mSlideList from '../../components/mark-slide-list/mark-slide-list.vue';
	import controller from '../../components/mark-slide-list/controller';
	import {
		mapGetters
	} from 'vuex'

	export default {
		components: {
			mSlideList
		},
		data() {
			return {
				loading: false,
				id: '',
				controller: new controller(),
				buttonList: [{
					title: '删除',
					background: '#ff3b32',
					clickName: 'remove'
				}]
			};
		},
		onLoad({
			type
		}) {
			this.id = type
			uni.setNavigationBarTitle({
				title: this.news.data[type].title
			});
		},
		onPullDownRefresh() {
			this.loading = true
			this.$store.dispatch("newsReload", this.id).then(() => {
				this.loading = false
				uni.stopPullDownRefresh();
			}).catch(() => {
				this.loading = false
				uni.stopPullDownRefresh();
			})
		},
		// onPageScroll(obj) {},
		onReachBottom() {
			if (!this.loading) {
				this.loading = true
				this.$store.dispatch("newsGetNextPage", this.id).then(() => {
					this.loading = false
				})
			}
		},
		methods: {
			//查看详情
			clickMethod(data) {
				this.news.data[this.id].navigateTo(data, this.$store.dispatch)
			},
			click(value, group, index) {
				this.$store.dispatch('removeNew', {
					id: value.id,
					key: this.id,
					group,
					index
				})
			}
		},
		computed: {
			...mapGetters(['news']),
			list() {
				if (this.id) {
					return this.news.data[this.id].data
				}
			},
			prop() {
				if (this.id) {
					return this.news.data[this.id].prop
				}
			},
			windowWidth() {
				return uni.getSystemInfoSync().windowWidth + 'px';
			}
		}

	};
</script>

<style lang="scss" scoped>
	.uni-item--hover {
		background-color: #f1f1f1 !important;
	}

	.news-item {
		height: 160rpx;
	}

	.now-message-info {
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
		font-size: 16px;
		clear: both;
		height: 160rpx;
		padding: 0 30rpx;
		// margin-bottom: 20rpx;
		background: #ffffff;
		float: left;
		border-bottom: 1px solid #f2f2f2;

		.icon-image {
			border-radius: 10rpx;
			width: 100rpx;
			height: 100rpx;
			float: left;
		}

		.icon-circle {
			background: #3396fb;
			border-radius: 100%;
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #ffffff;
			font-weight: bold;
			font-size: 20px;
			float: left;
		}

		.list-right {
			position: relative;
			float: left;
			margin-left: 25rpx;
			margin-right: 30rpx;

			.point {
				position: absolute;
				top: 15rpx;
				left: -25rpx;
				width: 20rpx;
				height: 20rpx;
				background: red;
				border-radius: 50%;
			}

			.list-title {
				width: 350rpx;
				line-height: 1.5;
				overflow: hidden;
				margin-bottom: 10rpx;
				color: #333;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}

			.list-detail {
				width: 350rpx;
				font-size: 14px;
				color: #a9a9a9;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}

		.list-right-1 {
			position: absolute;
			right: 30rpx;
			color: #a9a9a9;
			font-size: 24rpx;
		}
	}

	.news-loading {}
</style>