fangliaoxiaochengxv/subPages/helpList/index.vue

<template>
	<view class="app-page">
		<view class="good-list">
			<template v-for="(item,index) in mList">

				<view class="good-item" @click="toDetails(item.code)">
					<u--image width='120rpx' height='120rpx' radius="10rpx" mode="widthFix" :src="item.cover"
						:fade="true" duration="450" customStyle="margin-top:32rpx;margin-bottom:32rpx;" />
					<view class="good-item-content">
						<view class="good-name-box">
							<!-- <image mode="heightFix" :src="`${$getImgBaseUrl()}tiktok-log.png`"></image> -->
							<text>{{item.name}}</text>
						</view>
						<text class="good-desc">{{item.remark}}</text>
						<view class="good-bottom">
							<text class="good-time">{{item.create_at}}</text>
							<view class="good-view-box">
								<image :src="`${$getImgBaseUrl()}ic-view.png`" mode="heightFix"></image>
								<text>{{item.num_read}}</text>
							</view>
						</view>
					</view>
				</view>

				<u-line :color="index !== mList.length - 1 ? '#E9E9E9' : '#00000000'" length="calc(100%)"
					customStyle="margin-bottom:4rpx;"></u-line>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getNews,
	} from "@/common/api/common.js";
	export default {
		data() {
			return {
				page: 1,
				mList: []
			}
		},
		computed: {
			searchData() {
				return {
					limit: 20,
					page: this.page,
					mark: '帮助中心'
				}
			}
		},
		onLoad(options) {},
		onReady() {
			uni.startPullDownRefresh({

			})
		},
		onPullDownRefresh() {
			this.page = 1;
			uni.stopPullDownRefresh()
			this.mList = []
			this.getNews();
		},

		onReachBottom() {
			this.page++;
			this.getNews()
		},
		methods: {
			toDetails(code) {
				uni.navigateTo({
					url: '/subPages/helpDetails/index?code=' + code
				})
			},
			getNews() {
				uni.showLoading({

				})
				const data = this.searchData;
				getNews(data)
					.then((res) => {
						uni.hideLoading();
						console.log("getNews==>", res.data)
						if (res.data) {
							if (this.page === 1) {
								this.mList = res.data.list;
							} else {
								this.mList = this.mList.concat(res.data.list);
							}
						} else {
							if (this.page != 1) {
								this.page;
							} else {
								this.mList = []
							}
						}
					})
					.catch(() => {
						if (this.page != 1) {
							this.page--;
						}
						uni.hideLoading();
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.good-list {
		background: white;
		display: flex;
		flex-basis: 0;
		flex-direction: column;
		width: 100%;
		align-items: center;
	}



	.good-item {
		width: calc(100% - 40rpx);
		display: flex;
		flex-direction: row;
	}

	.good-item-content {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.good-name-box {
		display: flex;
		margin-top: 28rpx;
		flex-direction: row;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			display: block;
		}

		text {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #1D161F;
			// margin-left: 10rpx;

			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
	}

	.good-desc {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2C2C2C;
		margin-top: 8rpx;
	}

	.good-bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
		justify-content: space-between;

		.good-time {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #B7B7B7;
		}

		.good-view-box {

			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				height: 16rpx;
				width: 22rpx;
				display: block;
			}

			text {
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #B7B7B7;
				margin-left: 6rpx;
			}
		}
	}
</style>