high-mini/pages/user/news/news.vue

<template>
	<view>
		<!-- 顶部类型 -->
		<scroll-view scroll-x='true' class="srollview width100" :style="{top:headerTop}" scroll-with-animation>
			<view class="conent" :class="[newstypeid == item.codeValue ? 'activeconent' : 'frontconent']"
				v-for="(item,index) in newsTyplist" :key="index" @click="changeValue(item.codeValue)">
				{{item.codeName}}
			</view>
		</scroll-view>
		<view class="mart10 height70"></view>
		<!-- 内容 -->

		<view v-if="newsList == ''" class="mart60 fotct font14 fcor666">
			<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
		</view>
		<view class="newscont width90 border-8r backcorfff mart20" v-for="(item,index) in newsList" :key="index">
			<view class="alijusstart mart10 margle10" v-if="item.type == 1">
				<image src="../../../static/img/user/notive.png" mode="widthFix" class="icon30"></image>
				<text class="font18 margle" style="color: #0B1D83;">服务通知</text>
			</view>
			<view class="alijusstart mart10 margle10" v-if="item.type == 2">
				<image src="../../../static/img/user/order.png" mode="widthFix" class="icon30"></image>
				<text class="font18 margle" style="color: #0B1D83;">交易信息</text>
			</view>
			<view class="alijusstart mart10 margle10" v-if="item.type == 3">
				<image src="../../../static/img/user/kefu.png" mode="widthFix" class="icon30"></image>
				<text class="font18 margle" style="color: #0B1D83;">客服消息</text>
			</view>
			<view class="width90 line1 mart10"></view>
			<!-- 服务通知 -->
			<view class="width90 mart20" v-if="item.type == 1">
				<view class="font18 fcor333">{{item.title}}</view>
				<image mode="widthFix" class="width100 mart10" :src="imageUrl+item.image"></image>
			</view>

			<!-- 交易信息 -->
			<view class="width90 mart20" v-if="item.type == 2">
				<view class="font18 fcor333">{{item.title}}</view>
				<view class="mart10 border-r backcor9">
					<view class="font20 colore95 fontwig6 paddtop10 fotct">¥{{item.content | msgFormat('price')}}</view>
					<view class="width94 mart10 alijusstart font14">
						<view class="fontwig6 fcor333 width30">交易对象</view>
						<view class="width70 fcor666 fotrt">{{item.content | msgFormat('objectName') }}</view>
					</view>

					<view class="width94 mart15 alijusstart font14">
						<view class="fontwig6 fcor333 width30">交易时间</view>
						<view class="width70 fcor666 fotrt">{{item.content | msgFormat('time') }}</view>
					</view>
					<view class="font16 fcor666 alijus mart10 fotct paddbotm20">查看详情<image
							src="../../../static/img/jt.png" mode="widthFix" class="icon15 margle"></image>
					</view>
				</view>
			</view>

			<!-- 客服消息 -->
			<view class="width90 mart20" v-if="item.type == 3">
				<view class="font18 fcor333">{{item.title}}</view>
				<view class="mart10 border-r backcor9">
					<view class="width92 fcor333 fontwig6 paddtop15">
						{{item.content}}
					</view>

					<view class="font16 fcor666 alijus mart10 fotct paddbotm20">查看详情<image
							src="../../../static/img/jt.png" mode="widthFix" class="icon15 margle"></image>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getMsgByList,
		getDictionaryByCodeType
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				imageUrl: app.globalData.imgUrl,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'noorder.png',
				newsTyplist: [], //消息类型
				newsList: [], // 信内容
				newstypeid: 1, //类型id
				headerTop: '0px',
				pageNum: 1,
				pageSize: 10,
				isNoMoreData: false,
			}
		},
		filters: {
			//过滤器 用于格式化时间
			msgFormat: function(value, value1) {
				let a = JSON.parse(value);
				return a[value1];
			}
		},
		onLoad() {
			// #ifdef H5
			this.headerTop = '44px';
			// #endif
		},
		onShow() {
			this.getDictionaryByCodeType();
		},
		onReachBottom() {
			this.getMsgByList();
		},
		methods: {
			//查询类型
			getDictionaryByCodeType() {
				let datas = {
					codeType: 'MSG_TYPE'
				}
				getDictionaryByCodeType(datas).then(res => {
					if (res.return_code == '000000') {
						this.newsTyplist = res.return_data;
						this.newstypeid = res.return_data[0].codeValue;
						this.getMsgByList(res.return_data[0].codeValue);
					}
				})
			},
			//切换
			changeValue(item) {
				this.pageNum = 1;
				this.newsList = [];
				this.isNoMoreData = false;
				this.getMsgByList(item);
			},
			//查询列表
			getMsgByList(item) {
				this.newstypeid = item;
				if (this.isNoMoreData) {
					uni.hideLoading()
					return false;
				}
				let pagenum = this.pageNum;
				let datas = {
					companyId: app.globalData.companyId,
					type: item,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				getMsgByList(datas).then(res => {
					if (res.return_code == '000000' && res.return_data.list != '') {
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						if (res.return_data.total == (this.pageNum * this.pageSize)) {
							this.isNoMoreData = true;
						}
						this.newsList = this.newsList.concat(res.return_data.list);
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
					} else {
						this.newsList = [];
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.srollview {
		position: fixed;
		height: 70px;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		white-space: nowrap;

		.conent {
			height: 24px;
			line-height: 24px;
			margin-top: 15px;
			padding-left: 10px;
			font-size: 11px;
			padding-right: 10px;
			margin-left: 15px;
			display: inline-flex;
			flex-direction: column;
			text-align: center;
			position: relative;
		}
	}

	.frontconent {
		background-color: #eeeeee;
		color: #333333;
	}

	.activeconent {
		background-color: #e8eff4;
		color: #009DFF;
	}

	.newscont {
		padding-top: 10px;
		padding-bottom: 10px;
	}
</style>