NN2022060801/addons/otcapp/pages/article/help.vue

<template>
	<view class="main">
		<view class="articles">
			<view class="list-box" v-if="dataList.length<=0">
				<view class="no-data">
					<image class="icon" src="/static/icons/no-data.png" mode=""></image>
					<view class="text">
						-- {{lang.no_data}} --
					</view>
				</view>
			</view>
			<view class="list-box" v-else>
				<view class="lists" v-for="(v,k) in dataList" :key="k">
					<view class="list-item" @click="gotoPage('/pages/article/info?id='+v.id)">
						<view class="name">
							<text class="text">{{k+1}}.{{v.title}}</text>
							<image class="icon right" src="/static/icons/right.png" mode=""></image>
						</view>
						<view class="info">
							<view class="text">{{v.message}}
							</view>
						</view>
					</view>
				</view>

				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</view>

		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<tabbars :currentIndex="1"></tabbars>
	</view>
</template>

<script>
	import tabbars from "@/components/tabbar.vue"
	export default {
		components: {
			tabbars
		},
		data() {
			return {
				loadMore: false,
				loadStatus: 'loadmore',
				loaded: false,
				params: {
					page: 1,
					pageSize: 15,
				},
				dataList: [],
			}
		},
		onLoad() {
			this.getData()
			uni.setNavigationBarTitle({
				title: this.lang.help_title
			})
		},
		onReachBottom() {
			if (!this.loaded) {
				this.params.page++;
				this.loadMore = true
				this.getData();
			}
		},
		methods: {
			// 获取数据
			getData() {
				let _this = this;
				_this.loadStatus = 'loading'
				let params = JSON.parse(JSON.stringify(this.params));
				this.$request.sendToken('/api/article/help', params, 'POST').then(res => {
					_this.loadStatus = 'loadmore'
					if (res.success == true) {
						if (_this.loadMore == true && res.data.list.length > 0) {
							let len = res.data.list.length
							for (let i = 0; i <= len; i++) {
								if (typeof(res.data.list[i]) != 'undefined') {
									_this.dataList.push(res.data.list[i])
								}
							}
							_this.loadMore = false

						} else if (res.data.list.length > 0) {
							_this.dataList = res.data.list ? res.data.list : [];
						}

						if (this.params.page != 1 && res.data.list.length <= 0) {
							_this.loaded = true
							_this.loadStatus = 'nomore'
						}
						if (this.params.page == 1 && res.data.list.length <= 0) {
							_this.loaded = true
							_this.loadStatus = 'nodata'
						}

					} else {
						this.$u.toast(res.msg);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.articles {
		padding-bottom: 198rpx;
		padding-top: 38rpx;
	}

	.lists {
		color: #999;
		margin: 20rpx 40rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		// background-color: #36373F;
		background: linear-gradient(275deg, rgba(45, 45, 53, 0.1) 0%, #505058 100%);

		.u-row {
			overflow: hidden;
		}

		.list-item {
			.name {
				width: 100%;

				vertical-align: middle;
				display: block;

				.icon {
					vertical-align: middle;
					width: 46rpx;
					height: 46rpx;
				}

				.text {
					vertical-align: middle;
					margin-left: 10rpx;
				}

				.right {
					float: right;
				}
			}

			.info {
				.text {
					margin-left: 38rpx;
					max-width: 80%;
				}
			}
		}
	}


	.no-data {
		text-align: center;
		margin-top: 40%;
		color: #6e6c6b;

		.icon {
			width: 120rpx;
			height: 120rpx;
			margin: 0 auto;
		}
	}
</style>