project init

pages/news/newsList.vue

@@ -0,0 +1,202 @@
+<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>