ydd_front/mer_uniapp/pages/confession_wall/wall_details_info/index.vue

<template>
	<view class="flex-col container" :style="{height: winHeight + 'px'}">
		<view class="cart_nav">
			<nav-bar iconColor='#fff' ref="navBarRef" navTitle="表白墙" backgroundColor="#FF6702" :isBackgroundColor="false">
			</nav-bar>
		</view>
		<wall-info :itemInfo="{type: 3}" :onUrl="false"></wall-info>
		<view class='newsList bg--w111-fff flex-col' style="flex: 1;overflow: hidden;">
			<view class="flex-center flex-col noCommodity" v-if="noDataTip">
				<view class='pictrue'>
					<image :src="urlDomain+'crmebimage/presets/noSearch.png'"></image>
				</view>
				<text class="text-ccc">{{noDataTip}}</text>
			</view>
			<scroll-view class="bg--w111-fff pt-10 pb-10 pl-32" scroll-x style="white-space: nowrap; vertical-align: middle;border-top-right-radius: 23rpx;"
			 show-scrollbar="false">
				<view class='flex-y-center'>
					<text class='wall-nav' :class='active==1 ? "wall-nav-on": ""' @click="tabSelect(1)">
						<text>全部回复</text>
					</text>
					<text class='wall-nav' :class='active==2 ? "wall-nav-on": ""' @click="tabSelect(2)">
						<text>只看楼主</text>
					</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y scroll-with-animation @scrolltolower="onScrollBottom" style="flex: 1;">
				<view class="flex-y-center pl-30 pr-30 mt-20 mb-20" v-for="(item, index) in wallData" :key="index">
					<image class="w-30 h-30" style="position: relative;bottom: 30rpx;" :src="`/static/img/ic-wall-type-${item.type}.png`"
					 mode=""></image>
					<view class="flex-1 ml-20">
						<view class="flex-between-center">
							<view class="info-dzi fs-24">Lalala·北京大学</view>
							<view class="flex-center">
								<text class='iconfont icon-dianzan' style="font-size: 24rpx;margin-right: 10rpx;"></text>
								<text class="info-xzi f-s-22">16</text>
							</view>
						</view>
						<view class="info-dzi mt-10 mb-10">评论评论评论评论评论</view>
						<view @tap="openReply"><text class="info-xzi fs-24">05-17 16:20 </text><text class="fw-bold ml-14">回复</text></view>
					</view>
				</view>
				<view class='loadingicon flex-center' :hidden='!loading'>
					<text class='loading iconfont icon-jiazai' style="width: auto;"></text>加载更多
				</view>
				<view class="flex-center no-data-tip" v-if="loadTitle">{{loadTitle}}</view>
			</scroll-view>
		</view>
		<wall-reply ref="replyRef"></wall-reply>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import navBar from '@/components/navBar';
	import {
		getExpressOrderList
	} from '@/api/fastMail.js';
	import wallInfo from '../components/wall_info.vue'
	import wallReply from '../components/wall_reply.vue'
	let app = getApp();
	export default {
		components: {
			navBar,
			wallInfo,
			wallReply
		},
		data() {
			return {
				wallTitleId: 2,
				wallTypeId: 1,
				wallTypeData: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '表白'
					},
					{
						id: 2,
						name: '心愿'
					},
					{
						id: 3,
						name: '吐槽'
					},
					{
						id: 4,
						name: '签到'
					},
				],
				bannerList: [{
						id: 1
					},
					{
						id: 2
					}
				],
				wallHeadline: [{
						title: '温馨提示，请注意保护好自身隐私，面基需要'
					},
					{
						title: '%%%温馨提示，请注意保护好自身隐私，面基需要'
					},
				],
				urlDomain: this.$Cache.get("imgHost"),
				winHeight: 0,
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				autoplay: true,
				active: 1,
				page: 1,
				limit: 10,
				scrollLeft: 0,
				wallData: [{
						id: 1,
						type: 1
					},
					{
						id: 2,
						type: 2
					},
					{
						id: 3,
						type: 1
					},
				],
				loadTitle: '',
				loading: false,
				noDataTip: ''
			};
		},
		onLoad() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});
			// this.getPreExpressApi()
		},
		methods: {
			onWallTitle(index) {
				if (this.wallTitleId == index) return
				this.wallTitleId = index
			},
			onWallType(id) {
				if (this.wallTypeId == id) return
				this.wallTypeId = id
			},
			tabSelect(active) {
				if (this.active == active) return
				this.active = active;
			},
			openReply() {
				this.$refs.replyRef.visible = true; // 调用子组件的方法显示对话框
			},
			getPreExpressApi() {
				this.loading = true
				const params = {
					limit: this.limit,
					page: this.page,
					status: this.active
				}
				getExpressOrderList(params).then(res => {
					let list = res.data.list || [];
					this.wallData = this.$util.SplitArray(list, this.wallData);
					if (this.wallData.length == 0) {
						this.loadTitle = ''
						this.noDataTip = ' 暂无快递信息 ';
					} else {
						this.noDataTip = ''
						this.loadTitle = list.length < this.limit ? "我也是有底线的~" : '';
					}
					this.loading = false
					this.page += 1;
				}).catch(err => {
					this.noDataTip = ' 暂无快递信息 ';
					this.loading = false
					console.log(err)
				});
			},
			onScrollBottom() {
				if (!this.loadTitle) {
					// this.getPreExpressApi()
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		overflow: hidden;
	}

	.wall-nav {
		font-weight: 500;
		font-size: 23rpx;
		color: #999999;
	}

	.wall-nav~.wall-nav {
		margin-left: 38rpx;
	}

	.wall-nav-on {
		font-weight: 600;
		font-size: 27rpx;
		color: #141414;
	}

	.info-xzi {
		font-weight: 400;
		font-size: 19rpx;
		color: #999999;
	}

	.info-dzi {
		font-weight: 500;
		font-size: 23rpx;
		color: #141414;
	}
</style>