yunshengtai-uniapp/pages/home/index.vue

<template>
	<view class="productSort">
		<!-- 顶部主页 -->
		<skeleton v-if="showSkeleton" ref="<strong>skeleton</strong>" loading="chiaroscuro" selector="skeleton"
			bgcolor="#FFF"></skeleton>
		<view class="pageTitle-box" :class="isFixed ? 'showPageTitle' : ''"
			:style="{'padding-top':navTopHeight + 'px',height:navHeight*2+ 'px'}">
			<view class="top-logo acea-row row-center"
				:style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'">禪易生态云
			</view>
		</view>
		<view class="main-box skeleton-rect">
			<view class="back-bg">
				<image src="https://download.cyjyyjy.com/life-bg.png" mode=""></image>
			</view>
			<view class="details-btn skeleton-rect" @click="tolearnMore">了解详情</view>
		</view>
		<!-- 云快讯 -->
		<view class="yun-box skeleton-rect">
			<view class="acea-row row-between-wrapper skeleton-rect">
				<image src="../../static/images/yun.png" class="headline-yun"></image>
				<view class="more-r skeleton-rect" @click="toAritcleList">
					<text>查看更多</text>
					<image src="../../static/images/home/arrow-r.png"></image>
				</view>
			</view>
			<view class="rotaion skeleton-rect">
				<vSwiper :articleList="articleList"></vSwiper>
			</view>
		</view>
		<!-- 最新活动 -->
		<view class="act-box skeleton-rect">
			<view class="headline acea-row row-between-wrapper">
				<image src="../../static/images/new-act.png" mode="" skeleton-rect class="headline-img"></image>
				<view class="more-r skeleton-rect" @click="toNewActivity">
					<text>查看更多</text>
					<image src="../../static/images/home/arrow-r.png"></image>
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="slide-left  skeleton-rect" v-for="(item,index) in activity" :key="index"
					@tap="toActiveDetail" :data-id="item.id">
					<view class="act-title">{{item.name}}</view>
					<view class="resource-list acea-row-nowrap">
						<image :src="item.images" class="act-img" mode="aspectFill"></image>
						<view class="act-con acea-row row-middle">
							<view class="act-time acea-row row-middle line1">
								<image src="../../static/images/act-time.png" mode=""></image>
								<view>{{item.activityStartTime.split(' ')[0]}}至{{item.activityEndTime.split(' ')[0]}}
								</view>
							</view>
							<view class="act-adress acea-row line1">
								<image src="../../static/images/act-address.png" mode=""></image>
								<view class="title-line line2">{{item.address}}</view>
							</view>
							<view class="acea-row row-between-wrapper act-price">
								<text class="act-i">进行中</text>
								<text class="act-p">￥{{item.price}}</text>
							</view>
						</view>
					</view>
					<view class="act-bottom acea-row row-middle row-between">
						<!-- <view class="acea-row row-middle act-num">
							<image src="../../static/images/cart.png"></image>
							<image src="../../static/images/cart.png"></image>
							<image src="../../static/images/cart.png"></image>
							<text>15人报名</text>
						</view> -->
						<view class="enter-btn">去报名</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 推荐供需 -->
		<view class="rec-box">
			<image src="../../static/images/rec-headline.png" mode="" class="headline-img" skeleton-rect></image>
			<view class="rec-switch">
				<view class="rec-title acea-row">
					<view class="rec-l " @click="tabClick(1)">
						<image src="../../static/images/rec-bg.png" class="rec-bg" v-show="active == 2"></image>
						<view class="rec-t acea-row row-center-wrapper">
							<image src="../../static/images/rec-icon1.png" mode=""></image>
							<view>需求</view>
						</view>
					</view>
					<view class="rec-r " @click="tabClick(2)">
						<image src="../../static/images/rec-bg.png" class="rec-bg" v-show="active == 1"></image>
						<view class="rec-t acea-row row-center-wrapper">
							<image src="../../static/images/rec-icon2.png" mode=""></image>
							<view>资源</view>
						</view>
					</view>
				</view>
				<view class="rec-switch-a">
					<view class="list-box" v-if="active == 1">
						<view class="rec-list acea-row row-column-between" v-for="(item,index) in demandList"
							:key="index" @click="toNeedDetail(item.id)">
							<view class="acea-row row-middle">
								<image src="../../static/images/rec-icon1.png" mode="aspectFill"></image>
								<view class="rec-name line1">{{item.title}}</view>
								<!-- <view class="rec-address">武汉</view> -->
								<view class="rec-end acea-row row-right">{{item.resourceEndTime}}截止报名</view>
							</view>
							<view class="rec-message line1">{{item.detailedDescription}}</view>
						</view>
					</view>
					<view class="list-box" v-if="active == 2">
						<view class="rec-list acea-row row-column-between" v-for="(item,index) in resourcesList"
							:key="index" @click="toResourcesDetail(item.id)">
							<view class="acea-row row-middle">
								<image src="../../static/images/rec-icon2.png" mode=""></image>
								<view class="rec-name line1">{{item.title}}</view>
								<!-- <view class="rec-address">{{item.cname}}</view> -->
								<view class="rec-end acea-row row-right">{{item.resourceEndTime}}截止报名</view>
							</view>
							<view class="rec-message line1">{{item.detailedDescription}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 为您推荐 -->
		<view class="warter-box">
			<image src="../../static/images/rec-headline.png" mode="" class="headline-img" skeleton-rect></image>
			<u-waterfall v-model="productDtos" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="warter" v-for="(item, index) in leftList" :key="index" @tap="toGoodsDetail(item.id)">
						<image class="warter-img" :src="item.image" :index="index" mode="widthFix"></image>
						<view class="goodsinfo-box">
							<view class="title line2"> {{item.storeName}} </view>
							<view class="price-box acea-row row-between-wrapper">
								<text class="price">￥{{item.price}}</text>
								<text class="old-price">￥{{item.price}}</text>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="warter" v-for="(item, index) in rightList" :key="index" @tap="toGoodsDetail(item.id)">
						<image class="warter-img" :src="item.image" :index="index" mode="widthFix"></image>
						<view class="goodsinfo-box">
							<view class="title line2"> {{item.storeName}} </view>
							<view class="price-box acea-row row-between-wrapper">
								<text class="price">￥{{item.price}}</text>
								<text class="old-price">￥{{item.otPrice}}</text>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
		</view>
		<!-- <tabbar :current="currentTabIndex" @click="tabBarClick"></tabbar> -->
	</view>
</template>
<script>
	import {
		getIndexData
	} from "@/api/home";
	import {
		trim
	} from "@/utils";
	import {
		mapGetters
	} from 'vuex'
	import tabbar from "../../tabbarComponent/tabbar";
	import vSwiper from '@/components/vSwiper.vue'
	import skeleton from '@/components/quick-skeleton/quick-skeleton'
	const app = getApp();
	export default {
		components: {
			tabbar,
			vSwiper,
			skeleton
		},
		name: "GoodsClass",
		computed: mapGetters(['userInfo']),
		props: {},
		data: function() {
			return {
				category: [],
				navActive: 0,
				search: "",
				lock: false,
				menuHeight: app.globalData.menuHeight,
				navHeight: app.globalData.navHeight,
				menuTop: app.globalData.menuTop,
				navTopHeight: app.globalData.navTopHeight,
				currentTabIndex: 0,
				flowList: [],
				isFixed: false,
				loadStatus: 'loadmore',
				page: 1,
				limit: 10,
				isLoad: true, //是否还有更多
				active: 1,
				show: false,
				articleList: [], //快讯列表
				activity: [], //活动列表
				demandList: [], //需求列表
				resourcesList: [], //资源列表
				productDtos: [], //推荐列表

				showSkeleton: true
			};
		},
		onShareAppMessage() {
			return {
				title: '禅易云生态',
				path: '/pages/home/index',
				success(res) {
					uni.showToast({
						title: '分享成功',
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none',
					})
				},
			}
		},
		onReady: function() {
			const that = this;

			// that.$refs.skeleton.attachedAction();

			that.$refs.skeleton.readyAction();
		},
		onLoad() {
			// uni.hideTabBar()
		},
		mounted: function() {
			this.getIndexData()
		},
		onReachBottom() {
			if (this.isLoad) {
				this.page = this.page + 1
			}
		},
		onPullDownRefresh() {
			// wx.showNavigationBarLoading();
			// this.isLoad= true
			// this.page= 1
			// this.getActivity();
			// this.clear().then(()=>{
			// 	this.getProducts();
			// })
		},
		onPageScroll(e) {
			if (e.scrollTop > 60) {
				this.isFixed = true;
			} else {
				this.isFixed = false;
			};
		},
		methods: {
			getIndexData() {
				uni.showLoading({
					title: '正在加载...'
				})
				uni.showNavigationBarLoading();
				getIndexData().then(res => {
					this.articleList = res.data.articleList.reverse()
					this.activity = res.data.recommendActivity.content
					this.demandList = res.data.demandList
					this.resourcesList = res.data.resourcesDtos
					this.productDtos = res.data.productDtos

					this.showSkeleton = false
					uni.hideLoading()
					uni.hideNavigationBarLoading();
				})
			},
			tolearnMore() {
				this.$yrouter.push("/pages/life/learnMore/index")
			},
			toAritcleList() {
				this.$yrouter.push("/pages/life/articleList/index")
			},
			toNewActivity() {
				this.$yrouter.push("/pages/home/activityCenter/index")
			},
			tabBarClick(index) {
				this.currentTabIndex = index
			},
			toActiveDetail(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/activity/detail/index?id=' + id
				});
			},
			tabClick(i) {
				this.active = i
			},
			toNeedDetail(id) {
				this.$yrouter.push({
					path: '/pages/demandHall/needsDetail/index',
					query: {
						id: id
					}
				})
			},
			toResourcesDetail(id) {
				this.$yrouter.push({
					path: '/pages/demandHall/resourcesDetail/index',
					query: {
						id: id
					}
				})
			},
			toGoodsDetail(id) {
				this.$yrouter.push({
					path: "/pages/shop/GoodsCon/index",
					query: {
						id: id
					}
				});
			},
			getProducts() {
				this.loadStatus = 'loading';
				getProducts({
					page: this.page,
					limit: this.limit
				}).then((res) => {
					if (this.page > 1) {
						this.flowList = this.flowList.concat(res.data)
					} else {
						this.flowList = res.data
					}
					if (this.limit <= res.data.length) { //分页数等于返回值的length说明还有
						this.isLoad = true
					} else {
						console.log('没有了')
						this.isLoad = false
						this.loadStatus = 'nomore';
					}
					wx.hideNavigationBarLoading()
					uni.stopPullDownRefresh()
				})
			},
			submitForm: function() {
				var val = trim(this.search);
				if (val) {
					this.$yrouter.push({
						path: "/pages/shop/GoodsList/index",
						query: {
							s: val
						}
					});
					setTimeout(() => (this.search = ""), 500);
				}
			},
			asideTap(index) {
				this.navActive = index;
			},
			alertMessage(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			},
		},
		beforeDestroy: function() {
			// document.removeEventListener("scroll", this.onScroll, false);
		}
	};
</script>
<style lang="less" scoped>
	.productSort {
		background: #EEEEEE !important;
		position: relative;
	}

	.pageTitle-box {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		transition: all .5s;
	}

	.showPageTitle {
		background: #fff;
		color: #000000 !important;
		opacity: 1;

		.top-logo {
			color: #000;
		}
	}

	.page-top-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: #fff;
		padding: 0 30rpx 20rpx;
		box-shadow: 0px -6px 20px rgba(0, 0, 0, 0.11);

		.top-box {
			.top-box-l {
				font-size: 32rpx;
				color: #000;
				font-weight: 500;

				image {
					width: 26rpx;
					height: 30rpx;
					display: block;
					margin-right: 10rpx;
				}
			}

			.cart-btn-box {
				width: 50rpx;
				height: 50rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.index {
			height: 96rpx;

			.header {
				height: 68rpx;
				position: static;
				padding: 0;
				margin-top: 34rpx;

				.search {
					background-color: #EEEEEE;
					border-radius: 8rpx;
				}
			}
		}
	}

	.main-box {
		width: 100%;
		height: 522rpx;
		position: relative;
	}

	.back-bg image {
		width: 100%;
		height: 522rpx;
	}

	.logo-title image {
		margin-left: 20rpx;
		width: 80rpx;
		height: 50rpx;
	}

	.top-logo {
		position: absolute;
		width: 100%;
		color: #fff;
		font-weight: 600;
		font-size: 32rpx;
		transition: all .5s cubic-bezier(.25, .5, .5, .9);
	}

	.details-btn {
		width: 196rpx;
		height: 52rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 26px;
		position: absolute;
		bottom: 100rpx;
		left: 50%;
		margin-left: -98rpx;
		text-align: center;
		line-height: 50rpx;
		color: #fff;
		font-size: 32rpx;
	}

	// 云快讯
	.yun-box {
		margin: 8rpx 40rpx 28rpx 40rpx;
	}

	.headline-yun {
		width: 112rpx;
		height: 52rpx;
	}

	.more-r {
		font-size: 24rpx;
		color: #8B8B8B;
	}

	.more-r image {
		width: 12rpx;
		height: 18rpx;
		margin-left: 8rpx;
	}

	.rotaion {
		width: 670rpx;
		margin-top: 24rpx;
	}

	// 最新活动
	.act-box {
		width: 100%;
		height: 400rpx;
		padding-left: 40rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.slide-left {
		width: 584rpx;
		height: 344rpx;
		display: inline-block;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 20rpx 32rpx 0 20rpx;
		margin-right: 32rpx;
	}

	.act-title {
		font-size: 28rpx;
		color: #191919;
	}

	.resource-list {
		width: 100%;
		height: 190rpx;
		margin: 18rpx 0 14rpx 0;
	}

	.act-img {
		width: 162rpx;
		height: 190rpx;
		margin-right: 28rpx;
		border-radius: 12rpx;
	}

	.act-con {
		width: 338rpx;
		height: 190rpx;
	}

	.act-adress view,
	.act-time view {
		width: 300rpx;
		font-size: 24rpx;
		color: #191919;
	}

	.act-time image {
		width: 18rpx;
		height: 22rpx;
		margin-right: 16rpx;
	}

	.act-adress image {
		width: 19rpx;
		height: 23rpx;
		margin: 7rpx 14rpx 0 0;
	}

	.title-line {
		width: 308rpx;
		height: 68rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #191919;
		white-space: pre-wrap;
	}

	.act-price {
		width: 335rpx;
		font-weight: 600;

		.act-i {
			font-size: 24rpx;
			color: #FF5A0E;
		}

		.act-p {
			font-size: 32rpx;
			color: #2A2B2B;
		}
	}

	.act-bottom {
		position: relative;
		width: 562rpx;
		height: 62rpx;
		border-top: 1rpx solid #ECECEC;
	}

	.act-num image {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.act-num {
		min-width: 154rpx;
	}

	.act-num text {
		font-size: 20rpx;
		color: #191919;
		margin-left: 8rpx;
	}

	.enter-btn {
		width: 138rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: linear-gradient(39deg, #FF5A0D 0%, #FFAC85 100%);
		border-radius: 26rpx;
		color: #fff;
		position: absolute;
		right: 38rpx;
		font-size: 24rpx;
	}


	// 推荐供需
	.rec-box {
		width: 670rpx;
		height: 493rpx;
		margin: 32rpx auto 8rpx auto;
		position: relative;

	}

	.rec-switch {
		width: 670srpx;
		height: 423rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		overflow: hidden;
	}

	.rec-bg {
		width: 706rpx;
		height: 423rpx;
	}

	.rec-title {
		width: 100%;
		height: 80rpx;
		position: relative;

	}

	.rev-bg {
		width: 376rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
	}

	.rev-bg2 {
		width: 376rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
		background-image: url(../../static/images/rec-bg.png);
	}

	.rec-l,
	.rec-r {
		width: 50%;
		z-index: 2;
		position: relative;
	}

	.rec-l .rec-bg,
	.rec-r .rec-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.rec-r .rec-bg {
		transform: rotateY(180deg);
	}

	.rec-t {
		width: 100%;
		height: 100%;
		line-height: 37rpx;
		position: absolute;
		z-index: 3;
	}

	.rec-l image {
		width: 37rpx;
		height: 37rpx;
		margin-right: 8rpx;
	}

	.rec-r image {
		width: 42rpx;
		height: 43rpx;
		margin-right: 8rpx;
	}

	.rec-switch-a {
		width: 100%;
		height: 330rpx;
	}

	.list-box {
		width: 100%;
		height: 330rpx;
	}

	.rec-list {
		position: relative;
		height: 165rpx;
		padding: 30rpx 30rpx 15rpx 30rpx;
	}

	.rec-list image {
		width: 64rpx;
		height: 64rpx;
	}

	.rec-name {
		width: 130rpx;
		font-size: 28rpx;
		color: #1D1D1D;
		margin-left: 16rpx;
	}

	.rec-address {
		width: 80rpx;
		height: 34rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #FFFFFF;
		background: #FF5100;
		border-radius: 16px;
		text-align: center;
	}

	.rec-end {
		font-size: 24rpx;
		color: #707070;
		margin-left: auto;
	}

	.rec-message {
		width: 582rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #1D1D1D;
	}



	// .category-tab-box{
	// 	border: 1rpx solid black;
	// 	width: 100%;
	// 	height: 108rpx;
	// 	line-height: 108rpx;
	// 	padding-left: 30rpx;
	// 	// margin-bottom: 30rpx;
	// 	// padding-top: 190rpx;
	// 	.scroll-view_H{
	// 		white-space: nowrap;
	// 		width: 100%;
	// 		.category-item{
	// 			display: inline-block;
	// 			font-size: 28rpx;
	// 			line-height: 40rpx;
	// 			color: #999;
	// 			margin-right: 40rpx;
	// 			&.category-item-active{
	// 				color: #FF6D31;
	// 				font-size: 32rpx;
	// 				font-weight: 500;
	// 				position: relative;
	// 				&::after{
	// 					content: '';
	// 					width: 70rpx;
	// 					height: 8rpx;
	// 					border-radius: 6rpx;
	// 					display: block;
	// 					position: absolute;
	// 					bottom: -24rpx;
	// 					left: 0;
	// 					background: #FF7942;
	// 				}
	// 			}
	// 		}
	// 	}
	// }
	.headline{
		padding-right: 40rpx;
	}
	.headline-img{
		width: 148rpx;
		height: 52rpx;
	}

	.warter-box {
		width: 100%;
		padding: 24rpx 0 190rpx 24rpx;

		.u-waterfall {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.u-column {

				.warter {
					width: 336rpx !important;
					border-radius: 10rpx;
					background-color: #ffffff;
					position: relative;
					overflow: hidden;
					box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.06);
					margin-bottom: 20rpx;

					image {
						width: 100%;
						display: block;
					}

					.goodsinfo-box {
						width: 100%;
						padding: 12rpx 16rpx;

						.title {
							font-size: 28rpx;
							font-weight: 500;
							color: #1D1D1D;
							width: 100%;
							height: 80rpx;
						}

						.price {
							font-size: 28rpx;
							font-weight: bold;
							line-height: 40rpx;
							color: #FF7942;
						}

						.old-price {
							font-size: 20rpx;
							line-height: 28rpx;
							color: #BFBFBF;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}

	.banner-img-box {
		width: 100%;
		padding: 220rpx 40rpx 32rpx;

		.img-box-l {
			width: 324rpx;
			height: 400rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.img-box-r {
			width: 324rpx;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// align-items: ;

			image {
				width: 324rpx;
				height: 190rpx;
			}
		}
	}

	.goods-list-box {
		width: 100%;
		padding: 0 30rpx;

		.goods-list-item {
			width: 100%;

			.goods-type-box {
				image {
					width: 94rpx;
					height: 94rpx;
				}

				.t-word {
					font-size: 36rpx;
					color: #222;
					font-weight: 600;
				}
			}

			.goods-list {
				width: 100%;

				.goods-item {
					width: 335rpx;
					background: #fff;
					margin-right: 10rpx;
					margin-bottom: 30rpx;
					border-radius: 10rpx;
					overflow: hidden;
					box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.06);

					image {
						width: 100%;
						height: 278rpx;
					}
				}

				.goods-item:nth-child(2n) {
					margin-right: 0;
				}

				.goods-desc-box {
					width: 100%;
					padding: 16rpx;
					font-size: 24rpx;

					.goods-name {
						line-height: 34rpx;
					}

					.price {
						font-size: 28rpx;
						color: #E5270F;
						line-height: 40rpx;
						margin-bottom: 26rpx;
					}
				}
			}
		}
	}
</style>