zhywpt-sp/subpackage/orders/moreHighMsg/moreHighMsg.vue

<template>
	<div class="content">
		<div class="item" v-for="(item,index) in state.highMsgData" :key='index' @click="link(item)">
			<div class="left-content">
				<div class="description">{{item.title}}</div>
				<div class="mark">{{item.copywriting}}</div>
			</div>
			<image :src="fileURL + item.speedUrl"></image>
		</div>
		<view style="text-align: center;margin: 20rpx;" v-if="state.flags">我是有底线的</view>
	</div>
</template>

<script setup lang="ts">
	import {fileURL} from "@/datas/fileURL.js";
	import {onPageScroll,onLoad,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	import {queryHighMsg} from "@/utils/network/api.js";
	import {reactive} from "vue";
	import {stringToJson} from "@/utils/network/encryption.js";
	import {request} from "@/utils/network/request.js";
	import {navTo} from "@/utils/utils";
	import {getCodeName} from "@/datas/queryKey.js";
	const state = reactive({
		highMsgData:[],
		flags:false,
		page:1,
	})
	onLoad(() => {
		highMsg(); //高速快讯
	})
	// 下拉刷新
	onPullDownRefresh(()=>{
		state.page=1
		state.highMsgData=[]
		state.flags=false
		console.log('refresh');
		setTimeout(()=>{
			highMsg()
			uni.stopPullDownRefresh()
		}, 500);
	})
	// 触底加载
	onReachBottom(()=>{
		if(state.highMsgData.length<state.page*8) return state.flags = true
		console.log("触底了")
		state.page++
		highMsg()
	})
	
	// 高速快讯查询接口
	const highMsg =()=>{
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				pageNo:state.page,
				pageSize:8
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};
		
		//调用方式
		request(queryHighMsg, options).then((res) => {
				console.log("高速快讯查询接口",stringToJson(res.bizContent).data);
				state.highMsgData=[...stringToJson(res.bizContent).data,...state.highMsgData]
				console.log("state.highMsgData",state.highMsgData)
				// state.highMsgData=stringToJson(res.bizContent).data
			})
			.catch((err) => {
			});
	}
	const link=(item)=>{
		console.log("item",item)
		navTo(`item.hyperLink`)
	}
</script>

<style scoped>
	.content{
		background-color: #eef7f7;
		overflow: hidden;
		min-height: 100vh;
	}
	.item{
		width: 95%;
		margin:0 auto;
		margin-top: 30rpx;
		background-color: white;
		display: flex;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
		border-radius: 14rpx;
		font-size: 30rpx;
	}
	.item>image{
		width: 100rpx;
	    height: 100rpx;
		border-radius: 10rpx;
	}
	.mark{
		font-size: 22rpx;
		display: inline-block;
		text-align: center;
		background: #bae0f1;
		border-radius: 6rpx;
		color: #0a8f8a;
		padding: 4rpx 8rpx;
		margin-top: 16rpx;
	}
	.left-content{
		width: 70%;
	}
	.description{
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;				
	}
</style>