yicangzongtai_app_240321/pages/index/home.vue

<template>
	<view class="main">
		<view class="top-box" :class="showTopSearch?'':'hide'">
			<view :style="`height:${statusBarHeight}px`"></view>
			<!-- <view class="title">松河生活平台</view> -->
			<view class="input-box">
				<view class="status-bar" :style="`height:${statusBarHeight}px`"></view>
				<input @click="searchClick" placeholder="请输入搜索关键字" placeholder-class="input-placeholder" />
				<text class="iconfont2" @click="goToMsg()">
					&#xe67c;
				</text>
			</view>
			<view class="seat"></view>
		</view>
		
		<swiper class="swiper" circular indicator-dots autoplay>
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<image @click="imgLink(item.model_type, item.model_id, item.url, item.shop_id)" class="banner"
					src="./banner.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<uni-notice-bar v-if="homeNotice" :speed="50" class="notice-box" show-icon background-color="#E8FEEA"
			color="#0B6C39" scrollable :text="homeNotice" />
		<view class="class-box">
			<view class="box" v-for="(item,index) in classList" :key="index"
				@click="goPage(item.url,item.method,item.needLogin)">
				<image class="icon" :class="index==1?'icon-2':''" mode="heightFix" :src="item.imgPath"></image>
				<view class="text">{{item.text}}</view>
			</view>
		</view>
		<view class="class-box2">
			<view @click="goPage('/pages/welfareBuy/index','navigateTo',false)" class="p1"
				style="background-image: url('/static/home/class2-icon1.png');">
				<view class="title">公益福利购</view>
				<view class="tip">公益商品申领</view>
			</view>
			<view class="p2-box">
				<view @click="goPage('/pages/entrepreneurshipZone/index','navigateTo',false)" class="p2"
					style="background-image: url('/static/home/class2-icon2.png');">
					<view class="title">创业专区</view>
				</view>
				<view @click="goPage('/pages/index/lidaPage','switchTab',false)" class="p2"
					style="background-image: url('/static/home/class2-icon3.png');">
					<view class="title">公益商品</view>
				</view>
			</view>
		</view>
		<donation-news :listData="listData"></donation-news>
		<u-loadmore :status="loadStatus" />
		<!-- 升级弹窗 -->
	</view>
</template>

<script>
	//TODO 消息列表有2中购买类型【去购买，去领取】，都是跳转商品详情。
	export default {
		data() {
			return {
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				bannerList: [],
				classList: [{
					imgPath: '/static/home/class-icon1.png',
					text: '做公益',
					url: '/pages/publicWelfare/index',
					method: 'navigateTo',
					needLogin: false
				}, {
					imgPath: '/static/home/class-icon2.png',
					text: '去学习',
					url: '/pages/learningClassroom/index',
					method: 'navigateTo',
					needLogin: true
				}, {
					imgPath: '/static/home/class-icon3.png',
					text: '爱心购',
					url: '/pages/index/lidaPage',
					method: 'switchTab',
					needLogin: false
				}, {
					imgPath: '/static/home/class-icon4.png',
					text: '爱心任务',
					url: '/pages/signCenter/index',
					method: 'navigateTo',
					needLogin: true
				}],
				showTopSearch: true,
				pageParams: {
					page: 1,
					limit: 10
				},
				listData: [],
				loadStatus: 'loadmore', //loading / nomore
				totalPage: 1,
				homeNotice: ''
			}
		},
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > uni.upx2px(49 + 30)) {
				this.showTopSearch = false;
			} else {
				this.showTopSearch = true;
			}
		},
		onLoad() {
			let that = this;
			// #ifdef APP-PLUS
			// iosApp第一次安装APP时会询问"是否允许访问网络"
			if (plus.os.name == 'iOS') {
				// 首先获取一次网络状态
				uni.getNetworkType({
					success: function(res) {
						if (res.networkType != 'none') {
							that.initData();
						}
					}
				});
				// 监听网络变化
				uni.onNetworkStatusChange(function(res) {
					if (res.isConnected) {
						that.initData();
					}
				});
			} else {
				that.initData();
				this.getAppInfo()
			}
			// #endif

			// #ifdef H5
			that.initData();
			// #endif
		},
		onPullDownRefresh() {
			this.initData();
			uni.stopPullDownRefresh();
		},
		methods: {
			initData() {
				this.getBanner();
				this.getHomeNotice();
				this.getList(true);
			},
			// 获取更新信息
			getAppInfo() {
				this.$http.get('/app/config/info').then(res => {
					if (res && res.code == 200) {
						this.appInfo = res.data || {};
						// #ifdef APP-PLUS
						plus.runtime.getProperty(plus.runtime.appid, (info) => {
							this.versionCode = info.versionCode;
							if (this.appInfo.number > info.versionCode) {
								uni.navigateTo({
									url: "/components/appUpdatePop"
								})
							}
						})
						// #endif
					}
				})
			},
			getBanner() {

				this.bannerList = [{
						cover: './banner.png',
						model_type: '',
						model_id: '',
						url: './banner.png',
						shop_id: ''
					},
					{
						cover: './banner.png',
						model_type: '',
						model_id: '',
						url: '',
						shop_id: ''
					},
					{
						cover: './banner.png',
						model_type: '',
						model_id: '',
						url: '',
						shop_id: ''
					}
				]
				// this.$http.get('/ad/ad/getByCode/home-banner',{})
				// .then(res=>{
				// 	if (res.code == 200) {
				// 		this.bannerList = res.list;
				// 	}
				// })
			},
			/**轮播图跳转 */
			imgLink(type, id, url, shopid) {
				if (type == "goods") {
					uni.navigateTo({
						url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid,
					});
				} else if (type == "service") {
					// uni.navigateTo({
					// 	url: "/pages/product/goods/serviceGood?id=" + id
					// });
				} else if (type == "point_goods") {
					// uni.navigateTo({
					// 	url: "/pages/product/goods/IntegralGood?id=" + id
					// });
				} else if (type == "url") {
					if (/^http/.test(url)) {
						uni.navigateTo({
							url: "/pages/index/webView?linkUrl=" + url,
						});
					} else {
						uni.navigateTo({
							url
						});
					}
				}
			},
			goToMsg() {
				let token = uni.getStorageSync("apiToken")
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				} else {
					uni.navigateTo({
						url: "/pages/research/setup/myMsg"
					})
				}
			},
			goPage(url, method, needLogin) {
				let token = uni.getStorageSync("apiToken")
				if (!token && needLogin) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return;
				}
				uni[method]({
					url
				})
			},
			searchClick() {
				uni.navigateTo({
					url: "/pages/research/homepage/search",
				});
			},
			getList(isRefresh, needLoading = false) {
				let that = this;
				// if (!isRefresh && this.loadStatus == 'nomore') {
				// 	return false;
				// }
				//无限滚动
				if (!isRefresh && this.totalPage == this.pageParams.page) {
					this.pageParams.page = 0;
				}
				this.pageParams.page = isRefresh ? 1 : this.pageParams.page + 1;
				this.listData = isRefresh ? [] : this.listData;
				if (needLoading) {
					uni.showLoading({
						title: '努力加载中...',
						mask: true
					});
				}
				this.loadStatus = 'loading';
				this.$http.get('/donation/msg/page', this.pageParams)
					.then(res => {
						if (res.code == 200) {
							let listData = that.listData;
							listData.push(...res.page.list);
							//that.loadStatus = that.listData.length >= res.page.totalCount?'nomore':'loadmore';
							//无限滚动
							that.totalPage = res.page.totalPage;
							that.loadStatus = 'loadmore';
							// 加载第一页，如果是空的，就停止无限滚动
							if (that.pageParams.page == 1 && res.page.list.length == 0) {
								that.loadStatus = 'nomore';
							}
							that.listData = listData;
						}
					})
					.finally(() => {
						if (needLoading) {
							uni.hideLoading();
						}
					})
			},
			// 公告
			getHomeNotice() {
				let that = this;
				this.$http.get('/notice/newest', {})
					.then(res => {
						if (res.code == 200 && res.data) {
							that.homeNotice = res.data.detail;
						}
					})
			}
		},
		onReachBottom() {
			if (this.loadStatus != 'nomore') {
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #fdfdfd;
		padding-bottom: 30rpx;

		.top-box {
			width: 100%;
			padding: 49rpx 0 0 0;
			background: linear-gradient(180deg, #2bba26 0%, #047753 100%);

			&.hide {
				padding: 0;

				.title {
					display: none;
				}

				.input-box {
					position: fixed;
					top: 0;
					left: 0;
					background: linear-gradient(180deg, #2bba26 0%, #047753 100%);

					.status-bar {
						display: block;
					}
				}

				.seat {
					display: block;
				}
			}

			.seat {
				display: none;
				height: 130rpx;
			}

			.title {
				margin: 0 auto;
				height: 45rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #ffffff;
				line-height: 28rpx;
				text-align: center;
			}

			.input-box {
				position: sticky;
				top: 0;
				z-index: 100;
				width: 100%;
				padding: 30rpx;

				input {
					box-sizing: border-box;
					display: inline-block;
					vertical-align: middle;
					width: 620rpx;
					height: 70rpx;
					background: rgba(2, 81, 43, 0.3);
					border-radius: 36px;
					padding-left: 80rpx;
					color: white;
					background-image: url('/static/home/search-icon.png');
					background-size: 30rpx 30rpx;
					background-position: 30rpx 50%;
					background-repeat: no-repeat;
				}

				text {
					margin-left: 20rpx;
					display: inline-block;
					vertical-align: middle;
					font-size: 28rpx;
					font-weight: 400;
					text-align: right;
					color: #ffffff;
					line-height: 24rpx;

					&.iconfont2 {
						font-size: 50rpx;
					}
				}

				.status-bar {
					display: none;
				}
			}

			.input-placeholder {
				color: #7BAA89;
				opacity: 0.74;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #7baa89;
				line-height: 70rpx;
			}
		}

		.swiper {
			height: 370rpx;
			width: 100%;

			.banner {
				height: 100%;
				width: 100%;
				background-color: #f2f2f2;
			}

			::v-deep .uni-swiper-dot {
				background-color: white;
				opacity: 0.3;
				height: 10rpx;
				width: 50rpx;
				border-radius: 5rpx;
			}

			::v-deep .uni-swiper-dot-active {
				opacity: 1;
			}
		}

		.notice-box {
			height: 92rpx;
			font-size: 28rpx;
			margin-bottom: 0;

			::v-deep .uni-noticebar-icon {
				width: 40rpx;
				background-image: url('/static/home/noticebar-icon.png');
				background-size: cover;
				color: transparent !important;
			}
		}

		.class-box {
			padding: 22rpx 30rpx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f2f2f2;

			.box {
				text-align: center;

				.icon {
					height: 71rpx;

					&-2 {
						transform: scale(1.1);
					}
				}

				.text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
					color: #1a1a1a;
					line-height: 30rpx;
					margin-top: 16rpx;
				}
			}
		}

		.class-box2 {
			width: 100%;
			height: 334rpx;
			padding: 0 30rpx;
			margin: 45rpx auto;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;

			.p1 {
				border-radius: 20rpx;
				background-size: cover;
				height: 100%;
				width: 50%;
				margin-right: 24rpx;
				flex: 1;
				text-align: center;

				.title {
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #ffffff;
					line-height: 24rpx;
					margin-top: 220rpx;
				}

				.tip {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #ffffff;
					line-height: 24rpx;
					margin-top: 20rpx;
				}
			}

			.p2-box {
				height: 100%;
				width: 50%;
				display: flex;
				flex-wrap: wrap;
				flex: 1;
			}

			.p2 {
				border-radius: 20rpx;
				background-size: cover;
				height: calc(50% - 12rpx);
				width: 100%;
				display: flex;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #ffffff;
					line-height: 24rpx;
					margin-left: 175rpx;
				}

				&:nth-child(1) {
					margin-bottom: 24rpx;
				}
			}
		}

		.advert {
			width: 690rpx;
			margin: 0 30rpx;
			padding-bottom: 16rpx;
		}
	}
</style>