ydd_front/mer_uniapp/pages/discover/discover_recommend/index.vue

<template>
	<view class="discover_recommend">
		<scroll-view v-if="noteRecommendList.length>0" scroll-y="true" :show-scrollbar="false" class="scroll-view" :style="'height:'+swiperHeight+'px'"
			id="recommendList" @scrolltolower="onTouchmoveRecommend" @scroll="followScroll">
			<discover-details v-if="noteRecommendList.length>0" @getIsMore="getIsMore" @getComment="getComment"
				type="list" :noteRecommendList="noteRecommendList"></discover-details>
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false && noteDetails'></text>{{loadTitle}}
			</view>
		</scroll-view>

		<view class="empty-boxs" v-if="isShow">
			<emptyPage title="内容不存在,可能被删除了噢~" mTop="31%" :imgSrc="urlDomain+'crmebimage/presets/noguanzhu.png'"></emptyPage>
			<view class="btn" url="/pages/discover_index/index" @click="back">返回首页</view>
		</view>

		<!-- 评论 -->
		<uni-popup type="bottom" ref="comment">
			<view
				:style="'width: '+ windowWidth +'px; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
			<discoverComment v-if="showComment" @getReplyNum="getReplyNum" :noteId="noteDetails.id"
				:noteDetails="noteDetails" @close="close">
			</discoverComment>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import emptyPage from '@/components/emptyPage.vue'
	import discoverDetails from '@/components/discoverDetails/index.vue'
	import discoverComment from '@/components/discoverComment/index.vue'
	import {
		noteRecommendApi,
		noteDetailApi
	} from '@/api/discover.js';
	export default {
		components: {
			discoverDetails,
			discoverComment,
			emptyPage
		},
		data() {
			return {
        urlDomain: this.$Cache.get("imgHost"),
				windowWidth: 0, //获取屏幕宽度🌟💗
				swiperHeight: 0,
				noteRecommendList: [], // 发现内容推荐列表
				loaded: false,
				loading: false,
				loadTitle: '加载更多',
				where: {
					page: 1,
					limit: 10,
					noteId: '' //内容id
				},
				noteDetails: {}, //内容详情
				isShow: false, //内容是否被删掉
				showComment: false, //评论弹窗
				windowHeight: 0,
				isWidth: 0
			}
		},
		onLoad: function(options) {
			this.windowWidth = uni.getSystemInfoSync().screenWidth; //获取屏幕宽度
			this.where.noteId = options.noteId ? options.noteId : '';
			this.getNoteRecommend(); // 推荐
			this.getNoteDetail(options.noteId);
		},
		created() {
			var that = this;
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 6;
					that.windowHeight = e.windowHeight;
					that.swiperHeight = that.windowHeight
					that.$set(that, 'swiperHeight', that.windowHeight);
				}
			});

		},
		onReachBottom() {
			this.getNoteRecommend(); // 推荐
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function(res) {
			let data = res.target.dataset;
			return {
				title: data.title || '',
				imageUrl: data.cover || '',
				path: 'pages/discover/discover_details/index?noteId=' + data.id + '&sd=' + data.uid,
			}
		},
		// #endif
		methods: {
			/**
			 * 列表滑动中用到的方法
			 */
			followScroll() {
				uni.$emit('scroll');
			},
			onTouchmoveRecommend(e) {
				this.getNoteRecommend();
			},
			close() {
				uni.showTabBar();
				this.showComment = false;
				this.$refs.comment.close();
			},
			getReplyNum(n) {
				this.noteDetails.replyNum = n;
			},
			// 点击评论
			getComment(item) {
			    this.showComment = false;
				this.noteDetails = item;
				uni.hideTabBar();
				this.$refs.comment.open('bottom');
				this.showComment = true;
				
			},
			//返回首页
			back() {
				uni.switchTab({
					url: '/pages/discover_index/index'
				})
				this.$util.backPageRefresh();
			},
			getIsMore(i) {
				this.noteRecommendList[i].isMore = true;
			},
			//此页面，最上面展示当前内容的详情，底下为推荐的内容列表
			// 内容详情
			getNoteDetail(noteId) {
				this.loading = true;
				noteDetailApi(noteId).then(res => {
					this.noteRecommendList.unshift(res.data)
					this.noteDetails = res.data
					this.loading = false;
				}).catch(err => {
					this.isShow = true;
					uni.showToast({
						title: err,
						icon: 'none'
					})
					this.loading = false;
				});
			},
			// 内容发现推荐列表
			getNoteRecommend: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				that.where.title = encodeURIComponent(this.searchValue);
				noteRecommendApi(that.where).then(res => {
					that.$set(that.where, 'page', that.where.page + 1);
					this.noteRecommendList = this.noteRecommendList.concat(res.data.list || []);
					that.loadend = that.where.page > res.data.totalPage;
					that.loading = false;
					that.loadTitle = that.loadend ? '已全部加载' : '加载更多';
					this.noteRecommendList.map(item => {
						item.isMore = false;
					})
				}).catch(err => {
					that.loading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		width: 440rpx;
		text-align: center;
		padding: 15rpx 0;
		@include main_color(theme);
		@include coupons_border_color(theme);
		border-radius: 40rpx;
		margin: 44rpx auto 0;
		font-size: 32rpx;
	}

	.discover_recommend {
		background-color: #fff;
		/deep/.no-border {
			bottom: 40rpx;
		}
	}
</style>