sooka_consult_uniapp/pages/highServer/knowledge/knowledge.vue

<template>
	<!-- 知识库列表 -->
	<view class="container">
		<view class="rnwdList">
			<view class="list" @tap="goDetails(item)" v-for="(item, index1) in dataSource" :key="index1">
        <span class="lb">{{ item.popular == '1' ? '热门' : '非热门' }}</span>
        <span class="listTitle">{{ item.titleName }}</span>
        <view class="onePic" v-if="item.imgUrlList !=null && item.imgUrlList.split(',').length == 1">
          <image :src="loadImgSrcLocalhost(itemurl)" v-for="(itemurl, index1) in item.imgUrlList.split(',')" :key="index1">
          </image>、
        </view>

        <view class="twoPic" v-if="item.imgUrlList != null && item.imgUrlList.split(',').length == 2">
          <image :src="loadImgSrcLocalhost(itemurl)" v-for="(itemurl, index1) in item.imgUrlList.split(',')" :key="index1">
          </image>
        </view>

        <view class="threePic" v-if="item.imgUrlList != null && item.imgUrlList.split(',').length == 3">
          <image :src="loadImgSrcLocalhost(itemurl)" v-for="(itemurl, index1) in item.imgUrlList.split(',')" :key="index1">
          </image>
        </view>

				<view class="jlSj">
					<span style="color: #07c160;font-size: 24rpx;">
					   {{ item.createTime }}
					    <!-- <em class="iconfont icon-jifen"></em> -->
					</span>
					<view class="ck">
						<span class="jf">
						    <em class="iconfont icon-jifen"></em>
							{{ item.integral || 0 }}
						</span>
						<span>
							<em class="iconfont icon-shoucang"></em>
							{{ item.watchNum }}
						</span>
					</view>
				</view>
			</view>
			<uni-fab ref="fab" :horizontal="right" :vertical="bottom" @fabClick="fabClick()" />
		</view>

	</view>
</template>

<script>
	import {
		list,
		knowledgePay,
		getDetails
	} from '@/api/knowledge/knowledge.js';
	export default {
		data() {
			return {
				dataSource: [],
				// 数据总量
				total: 0,
				queryParams: {
					// 当前页
					pageNum: 1,
					// 每页数据量
					pageSize: 10,
				},
				loading: false,
				//是否显示弹出层
				open: false,
				//悬浮按钮右对齐
				right: 'right',
				//悬浮按钮下对齐
				bottom: 'bottom',
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getList()
		},
		onReachBottom() {
			let pageNum = this.queryParams.pageNum
			let pageSize = this.queryParams.pageSize
			let total = this.total
			if (pageNum * pageSize >= total) {
				uni.showToast({
					title: '暂无更多数据'
				})
				return
			} else {
				this.queryParams.pageNum += 1;
				this.getList()
			}
		},
		methods: {
			goDetails(item) {
				this.isKnowledgePay(item)
			},
			isKnowledgePay(item) {
				let params = {
					//减少积分人id
					userId: getApp().globalData.userId,
					//增加积分人id
					createId: item.createId,
					integral: item.integral,
					id: item.id,
					relevance: "1",
				}
				knowledgePay(params).then(res => {
					if (res.code == 200) {
						getDetails(item.id).then(res => {
							let data = res.data
              if(data.imgUrlList!=null){
                data.urls = data.imgUrlList.split(',')
              }
							uni.navigateTo({
								url: `/pages/common/articleDetail/articleDetail?data=${this.encodify(data)}`
							});
						})
					} else {
						uni.showToast({
							title: res.msg
						})
					}
				})
			},
			// 分页触发
			change(e) {
				this.getList(e.current);
			},
			// 获取数据
			getList() {
				let params = {
					pageSize: this.queryParams.pageSize,
					pageNum: this.queryParams.pageNum
				}
				list(params).then(res => {
					if (res.code == 200) {
						this.dataSource = [...this.dataSource, ...res.rows]
						this.total = res.total
					}
				})
			},
			//悬浮按钮点击事件
			fabClick() {
				uni.navigateTo({
					url: '../knowledge/knowledgeForm'
				});
			},
		}
	}
</script>

<style>
	@import './knowledge.css';
</style>