ydd_front/mer_uniapp/pages/confession_wall/home/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>
		<view class="flex-around-center p-20 bg--w111-fff" style="margin: 4rpx 0;">
			<text class="wall-title" :class="wallTitleId == 1 ? 'wall-title-on' : ''" @tap="onWallTitle(1)">本校</text>
			<text class="wall-title" :class="wallTitleId == 2 ? 'wall-title-on' : ''" @tap="onWallTitle(2)">同城</text>
		</view>
		<view class="flex-y-center mb-10 h-116 bg--w111-fff">
			<view class="flex-1 h-full flex-center" :class="wallTypeId == item.id ? 'type-bg' : ''"
			 v-for="(item, index) in wallTypeData" :key="index" @tap="onWallType(item.id)">
				<view class="flex-col flex-center">
					<image class="type-image mb-10" :src="'/static/img/ic-wall-type-' + item.id + '.png'" mode=""></image>
					<view class="wall-font f-s-24 f-w-500">{{item.name}}</view>
				</view>
			</view>
		</view>
		<image class="w-full h-116" src="/static/img/img1.png" mode=""></image>
		<!-- 提示 -->
		<view class="flex-y-center bg--w111-fff mt-10 mb-10 pl-32">
			<!-- 左侧固定图片 -->
			<text class='iconfont icon-laba ' style="font-size: 24rpx;margin-right: 20rpx;"></text>

			<!-- 右侧文字轮播区域 -->
			<view class="flex-1 h-40 mt-10" style="overflow: hidden;">
				<swiper :indicator-dots="false" :autoplay="autoplay" interval="2500" :duration="500" vertical="true" circular="true">
					<block v-for="(item,index) in wallHeadline" :key='index'>
						<swiper-item catchtouchmove='catchTouchMove'>
							<view class='newsTitle'>
								{{item.title}}
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		<scroll-view class="scroll-view_x" scroll-x style="white-space: nowrap; vertical-align: middle;" show-scrollbar="false">
			<view class='flex-y-center'>
				<text v-for="(item,index) in navList" :key="index" class='wall-nav' :class='active==item.id ? "wall-nav-on": ""'
				 @click="tabSelect(item.id, index)">
					<text>{{item.name}}</text>
				</text>
			</view>
		</scroll-view>
		<view class='newsList tui-skeleton flex-col' style="flex: 1;overflow: hidden;margin: 20rpx;">
			<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 scroll-y scroll-with-animation @scrolltolower="onScrollBottom" style="flex: 1;overflow: hidden;">
				<view class="fast-box" v-for="(item, index) in wallData" :key="index"></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>
	</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 animationType from '@/utils/animationType.js'
	import tuiSkeleton from '@/components/base/tui-skeleton.vue';
	import {
		getAddressList
	} from '@/api/user.js';
	import {
		getExpressOrderList
	} from '@/api/fastMail.js';
	import orderPay from "@/mixins/OrderPay.js";
	import {
		Debounce
	} from '@/utils/validate.js'
	let app = getApp();
	export default {
		mixins: [orderPay],
		components: {
			tuiSkeleton,
			navBar
		},
		data() {
			return {
				wallTitleId: 2,
				wallTypeId: 1,
				wallTypeData: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '表白'
					},
					{
						id: 2,
						name: '心愿'
					},
					{
						id: 3,
						name: '吐槽'
					},
					{
						id: 4,
						name: '签到'
					},
				],
				wallHeadline: [{
						title: '温馨提示，请注意保护好自身隐私，面基需要'
					},
					{
						title: '%%%温馨提示，请注意保护好自身隐私，面基需要'
					},
				],
				urlDomain: this.$Cache.get("imgHost"),
				winHeight: 0,
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				autoplay: true,
				navList: [{
					id: -1,
					name: '默认'
				}, {
					id: 1,
					name: '评论'
				}, {
					id: 2,
					name: '点赞'
				}, {
					id: 3,
					name: '有图'
				}],
				active: -1,
				page: 1,
				limit: 10,
				scrollLeft: 0,
				wallData: [],
				loadTitle: '',
				loading: false,
				noDataTip: '',
				keywords: '',
				addressItem: {}
			};
		},
		onLoad() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});
			this.getPreExpressApi()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let that = this;
			uni.$on('addressItem', function(res) {
				that.$set(that, 'addressItem', res);
			})
		},
		methods: {
			onWallTitle(index) {
				if (this.wallTitleId == index) return
				this.wallTitleId = index
			},
			onWallType(id) {
				if (this.wallTypeId == id) return
				this.wallTypeId = id
			},
			//搜索
			search() {
				this.wallData = []
				this.loadTitle = ''
				this.loading = false
				this.page = 1
				this.getPreExpressApi()
			},
			onTap(val) {
				console.log(val)
			},
			tabSelect(active, e) {
				if (this.active == active) return
				this.page = 1;
				this.loadTitle = '';
				this.wallData = [];
				this.active = active;
				this.getPreExpressApi()
			},
			getPreExpressApi() {
				this.loading = true
				const params = {
					keywords: this.keywords,
					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()
				}
			},
			lookImg(itemIndex, valIndex) {
				const url = this.wallData[itemIndex].orderInfoList[valIndex].image
				uni.previewImage({
					urls: url
				});
			},
			cancelOrder(index, orderNo) {
				console.log(index, orderNo)
			},
			/**
			 * 打开支付组件
			 *
			 */
			goPay: Debounce(function(item) {
				uni.showLoading({
					title: '加载中...'
				});
				let data = {
					payPrice: +item.payPrice,
					orderNo: item.orderNo
				}
				this.getToPayment('', data, 'fast')
			}),
		}
	}
</script>

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

	.wall-title {
		display: inline-block;
		font-weight: 500;
		font-size: 31rpx;
		color: #B2B2B2;
	}

	.wall-title-on {
		font-weight: 600;
		font-size: 35rpx;
		color: #141414;
		border-bottom: 5rpx solid;
		border-bottom-color: linear-gradient(90deg, #FFCA5F 0%, #FF1B95 100%);
	}

	.type-image {
		width: 46rpx;
		height: 46rpx;
	}

	.wall-font {
		color: #141414;
	}

	.newsTitle {
		font-weight: 400;
		font-size: 21rpx;
		color: #646464;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.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;
	}
	
	.type-bg {
		background: #EEF4FF;
	}

	.no-data-tip {
		color: #CCC;
	}

	.image2 {
		width: 42rpx;
		height: 42rpx;
		margin-right: 20rpx;
	}

	.order-no {
		background-color: rgba(255, 103, 2, 0.1);
		padding: 10rpx 20rpx;
		color: $bg-color-primary;
		font-weight: 600;
		font-size: 21rpx;
		margin: 20rpx 0;
		display: inline-block;
	}
	
	.bg_color {
		color: #fff;
		background-color: $bg-color-primary;
	}
</style>