wangluohuoyun-app/pages/news/index.vue

<template>
	<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
		style="background-color: #F5F6FA;"> -->
	<view>
		<u-navbar title="消息中心" leftIconSize='0' :bgColor="bgColor" :placeholder='true' leftIconColor="#fff"
			titleStyle='color:#fff' rightText='一键已读' @rightClick="rightClick">
		</u-navbar>
		<view class="top-bgc"></view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			style="background-color: #F5F6FA;">
			<view class="content" v-if="news.length > 0">
				<view class="info-item flex" v-for="(item,index) in news" :key="index" @click="read(item)">
					<view class="left">
						<image src="@/static/images/news/cy.png" class="img" v-if="item.newsType=='承运通知'">
						</image>
						<image src="@/static/images/news/xt.png" class="img" v-else>
						</image>
					</view>
					<view class="right"
						:style="{'border-bottom':index==news.length-1?'1px solid #fff':'1px solid #e6e6e6'}">
						<view class="row1 flex flex-space-between">
							<view class="title">
								{{item.newsType}}
							</view>
							<view class="time">
								{{item.createDate}}
							</view>
						</view>
						<view class="row2 flex flex-space-between align-center">
							<view style='white-space: pre-wrap;' class="text point1">
								{{item.newsContent}}
							</view>
							<view class="red-point" v-if="item.newsFlag==0"></view>
						</view>
					</view>
					<!-- 	<view class="flex flex-space-between">
					<view class="left">
						<view>系统消息</view>
						<u-badge :isDot="true" bgColor='red' :absolute='true' :offset='badgeOffset'></u-badge>
					</view>
					<view class="">
						今天 21:51
					</view>
				</view>
				<view class="flex flex-space-between">
					您的驾驶证即将到期，请尽快到“我的-身份认证”中更新，逾期将影响运费支付。
				</view> -->
					<u-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true'
						:showCancelButton='showCancelButton' confirmColor='#2772FB' @confirm="confirmClick"
						@close="cancelClick" @cancel="cancelClick"></u-modal>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	var that
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				confirmText: '确定',
				showCancelButton: true,
				isShowAlert: false,
				alertTitle: '',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				bgColor: '#317AFE',
				value: 100,
				news: [], // 数据列表
				badgeOffset: [0, -5],
				mescroll: null
			}
		},
		// async onLoad() {
		// 	that = this
		// 	// #ifdef APP-PLUS
		// 	let _status = await that.$request.baseRequest('get', '/driverInfo/firstAuthentication', {
		// 		driverPhone: this.userInfo.phone,
		// 	}).then(res => {
		// 		return res.data.authenticationStatus
		// 	})
		// 	// if (_status == '已禁用') {
		// 	// 	this.isShowAlert = true
		// 	// 	this.alertTitle == '账号审核中'
		// 	// 	this.confirmText = '退出APP'
		// 	// 	this.showCancelButton = false
		// 	// } else {
		// 	// 	console.log(1231233212332312312213)
		// 	// }
		// 	// #endif

		// },
		onShow() {
			uni.setTabBarItem({
				index: 0,
				text: '货源',
				iconPath: 'static/images/common/huoyuan@2x(1).png',
				selectedIconPath: 'static/images/common/huoyuan@2x.png'
			})
			uni.setTabBarItem({
				index: 2,
				text: '订单',
				iconPath: 'static/images/common/dingdan@2x(1).png',
				selectedIconPath: 'static/images/common/dingdan@2x.png'
			})
			this.newsNumber()
			this.upCallback({
				size: 10,
				num: 1
			})
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		methods: {
			newsNumber() {
				let that = this
				that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
					reCommonId: this.userInfo.id,
				}).then(res3 => {
					if (res3.data || res3.data == 0) {
						let name = 'myTip';
						let value = res3.data
						if (value == 0) {
							uni.removeTabBarBadge({
								index: 3
							})
						}
						that.$store.commit('$uStore', {
							name,
							value
						});
						if (value != 0 && value) {
							uni.setTabBarBadge({
								index: 3,
								text: value + ""
							})
						}
						that.$forceUpdate()
					}
				})
			},
			confirmClick() {
				// #ifdef APP-PLUS
				if (this.alertTitle == '账号审核中') {
					if (uni.getSystemInfoSync().platform == 'ios') {
						plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
					} else if (uni.getSystemInfoSync().platform == 'android') {
						plus.runtime.quit();
					}
					return
				}
				// #endif
			},
			rightClick() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('post', '/newsInfo/api/editAllNewsInfo', {
						reCommonId: this.userInfo.id,
					}).then(res => {
						this.mescroll.resetUpScroll()
						uni.hideLoading()
						uni.removeTabBarBadge({
							index: 2
						})
						this.newsNumber() //消息气泡

					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
					});
			},
			read(val) {
				uni.$u.route("/pages/news/newsSee?_obj=" + JSON.stringify(val))
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('post', '/newsInfo/api/editNewsInfo', {
						id: val.id,
					}).then(res => {
						this.mescroll.resetUpScroll()
						this.look()
						uni.hideLoading()
						this.newsNumber() //查询消息气泡
					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
					});
			},
			look() {
				let that = this
				that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
					reCommonId: this.userInfo.id,
				}).then(res3 => {

					if (res3.data || res3.data == 0) {
						let name = 'myTip';
						let value = res3.data
						if (value == 0) {
							uni.removeTabBarBadge({
								index: 3
							})
						}
						that.$store.commit('$uStore', {
							name,
							value
						});
						if (value != 0 && value) {
							uni.setTabBarBadge({
								index: 3,
								text: value + ""
							})
						}
					}
				})
			},
			back() {
				uni.navigateBack({

				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback() {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
				// 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )     
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log(page)
				// 此处可以继续请求其他接口
				if (page.num == 1) {
					this.news = []
					// 请求其他接口...
				}

				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.isInitxx){
				// 	apiGetxx().then(res=>{
				// 		this.isInitxx = true
				// 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// 	}).catch(()=>{
				// 		this.mescroll.endErr()
				// 	})
				// 	return // 此处return,先获取xx
				// }

				//联网加载数据
				this.$request.baseRequest('get', '/newsInfo/selectNewsInfo', {
						reCommonId: this.userInfo.id,
						pageSize: page.size,
						currentPage: page.num,
					}).then(res => {
						if (page.num == 1) {
							this.news = []
						}
						this.news = this.news.concat(res.data.records); //追加新数据
						this.$forceUpdate()
						this.mescroll.endBySize(res.data.records.length, res.data.total);
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-navbar__content__right__text {
		font-size: 26rpx;
		color: #FFFFFF;
	}

	/deep/.point1 {
		text-overflow: ellipsis;
		overflow: hidden;
		/* white-space: nowrap; */
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		margin-top: 20rpx;
	}

	.top-bgc {
		position: absolute;
		width: 100%;
		height: 519rpx;
		// background: linear-gradient(180deg, #317AFE 0%, #F8F9FC 100%);

	}

	.content {
		// position: relative;
		// top: 0;
		background: #FFFFFF;
		margin: 20rpx;
		width: calc(100% - 40rpx);
		// padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		padding-top: 30rpx;
	}

	.info-item {
		padding: 20rpx 30rpx 30rpx 30rpx;

		.img {
			width: 80rpx;
			height: 80rpx;
			margin-top: 20rpx;
		}

		.left {
			margin-right: 20rpx;
		}

		.right {
			width: 100%;
			border-bottom: 1px solid #E6E6E6;
			padding-bottom: 20rpx;

			.row1 {
				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 600;
				}

				.time {
					font-size: 32rpx;
					color: #999999;
				}

			}

			.row2 {
				.text {
					font-size: 28rpx;
					color: #999999;
					width: 500rpx;
				}

				.red-point {
					width: 10rpx;
					height: 10rpx;
					background: #EE2F51;
					border-radius: 6rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>