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.imgUrl"></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)
			for (var i = 0; i < state.highMsgData.length; i++) {
				state.highMsgData[i]["copywriting"] = getCodeName('COPYWRITING', state.highMsgData[i]["copywriting"])
			}
			// state.highMsgData=stringToJson(res.bizContent).data
		})
			.catch((err) => {
			});
	}
	const link = (item) => {
		if (item.type == 1) {
			const params = encodeURIComponent(JSON.stringify(item.hyperLink))
			uni.navigateTo({
				url: `/subpackage/personal-center/webview?url=` + params
			})
		} else if (item.type == 2) {
			navTo(item.hyperLink)
		} else if (item.type == 3) {
			uni.navigateTo({
				url: `/subpackage/orders/moreHighMsg/textDetails`
			})
		} else if (item.type == 4) {
			uni.navigateToMiniProgram({
				appId: item.hyperLink,
				path: item.speedUrl,
				success(res) {
					console.log(res);
				},
				complete(res) {
					console.log(res);
				},
				fail(res) {
					console.log(res);
					// 未成功跳转到车主小程序
				},
			});
		}
	}
</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>