hs_hzl_uniapp_ml/pageA/club/index.vue

<template>
	<view>
		<view v-if="noticeStatus">
			<u-notice-bar :text="noticeText"></u-notice-bar>
		</view>
		<u-sticky>
			<view>
				<!-- @click="oneTypeClick(item,index)" -->
				<scroll-view class="scroll-view_H_MY" :scroll-x="true" @scroll="scroll">
					<view :class="index=== oneTypeActive ? 'scroll-view-item_H_MY-active':''"
						v-for="(item,index) in ['活动']" class="scroll-view-item_H_MY">
						{{item}}
					</view>
				</scroll-view>
			</view>
		</u-sticky>
		<view style="display: flex;flex-flow: row wrap;">
			<view style="width: 20%; text-align: center;background-color: #f0f0f0;">
				<scroll-view scroll-y scroll-with-animation :scrollTop="scrollLeftTop"
					:style="[{height: containerHeight + 'px'}]">
					<view :class="index === twoTypeActive ? 'giftTypeItem-active':''" @click="twoTypeClick(item,index)"
						v-for="(item,index) in clubsData" class="giftTypeItem">
						{{item.projectName}}
					</view>
				</scroll-view>
			</view>
			<view style="width: 80%;background-color: #ffffff;text-align:center;">
				<scroll-view scroll-y scroll-with-animation :scrollTop="scrollLeftTop" :lower-threshold="110"
					@scrolltolower="refreshGift" :style="[{height: containerHeight + 'px'}]">
					<view class="foodBody">
						<view style="width: 48%;">
							<view v-if="index %2 === 0" class="goodsItem" v-for="(item, index) in list" :key="index">
								<view @click="toMorePage(item)">
									<img class="cuisineImg" width="100%" height="100%" :src=" baseURL+item.eventImgUrl"
										mode="widthFix" radius="5"></img>
									<view class="goodsName">{{item.eventPlace}}</view>
									<view style="text-align: left;">
										<view>
											<uni-row>
												<uni-col span="4">
													<view style="font-size: 18rpx;">
														地点
													</view>
												</uni-col>
												<uni-col span="20">
													<view style="font-size: 20rpx;">
														{{item.eventPlaceSite}}
													</view>
												</uni-col>
											</uni-row>
										</view>
										<view style="font-size: 20rpx;">
											开始：{{item.eventStartTime}}
										</view>
										<view style="font-size: 20rpx;">
											结束：{{item.eventEndTime}}
										</view>
									</view>
									<view class="goodsPrice">
										<u-row>
											<u-col span="6">
												<view
													:style="{'font-size': '12px','color': item.alreadyHave === 0 ? 'rgb(10, 185, 156)':'rgb(0, 0, 0)'}">
													{{'已报：'+item.alreadyHave}}
												</view>
											</u-col>
											<u-col span="6" textAlign="right">
												<view style="font-size: 12px;color: rgb(0, 0, 0)">
													{{'剩余：'+(item.limitNum - item.alreadyHave)}}
												</view>
											</u-col>
										</u-row>
									</view>

								</view>
								<view class="gwxx">
								</view>
								<view class="gwxx">
									<!-- <view style="display: flex;flex-wrap: wrap-reverse;padding: 0 10rpx;"> -->
									<view style="text-align: center;">
										<view class="yyButton" style="border: 1rpx solid rgb(10, 185, 156);
													color: rgb(10, 185, 156);font-size: 22rpx; padding: 5rpx 15rpx;
													 border-radius: 10rpx;" @click="addGoods(item)">
											预约
										</view>
									</view>
								</view>
							</view>
						</view>
						<view style="width: 48%;">
							<view v-if="index %2 !== 0" class="goodsItem" v-for="(item, index) in list" :key="index">
								<view @click="toMorePage(item)">
									<img class="cuisineImg" width="100%" height="100%" :src=" baseURL+item.eventImgUrl"
										mode="widthFix" radius="5"></img>
									<view class="goodsName">{{item.eventPlace}}</view>
									<view style="text-align: left;">
										<view>
											<uni-row>
												<uni-col span="4">
													<view style="font-size: 18rpx;">
														地点
													</view>
												</uni-col>
												<uni-col span="20">
													<view style="font-size: 20rpx;">
														{{item.eventPlaceSite}}
													</view>
												</uni-col>
											</uni-row>
										</view>
										<view style="font-size: 18rpx;">
											开始：{{item.eventStartTime}}
										</view>
										<view style="font-size: 18rpx;">
											结束：{{item.eventEndTime}}
										</view>
									</view>
									<view class="goodsPrice">
										<u-row>
											<u-col span="6">
												<view
													:style="{'font-size': '12px','color': item.alreadyHave === 0 ? 'rgb(10, 185, 156)':'rgb(0, 0, 0)'}">
													{{'已报：'+item.alreadyHave}}
												</view>
											</u-col>
											<u-col span="6" textAlign="right">
												<view style="font-size: 12px;color: rgb(0, 0, 0)">
													{{'剩余：'+(item.limitNum - item.alreadyHave)}}
												</view>
											</u-col>
										</u-row>
									</view>
								</view>
								<view class="gwxx">
								</view>
								<view class="gwxx">
									<view style="text-align: center;">
										<view class="yyButton" style="border: 1rpx solid rgb(10, 185, 156);
													color: rgb(10, 185, 156);font-size: 22rpx; padding: 5rpx 15rpx;
													 border-radius: 10rpx;" @click="addGoods(item)">
											预约
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</scroll-view>
			</view>
		</view>
		<view class="content">
			<!-- @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd" -->
			<view :style="{'transform':'translate3d('+0+'px,'+-180+'px,0)'}" class="touch">
				<view @click="confirm1">
					<view style="margin-left: 25rpx;">
						<uni-row>
							预约
						</uni-row>
						<uni-row>
							记录
						</uni-row>
					</view>
				</view>
			</view>
		</view>
		<!-- <wp-tabbar pagePath="/pages/integral/index" :type="type"></wp-tabbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				containerHeight: 0,
				stickyOffsetTop: 20,
				scrollLeftTop: 0,
				height: 0,
				option: {
					page: 1,
					size: 10,
					auto: true
				},
				noticeText: '',
				page: 1,
				oneTypeActive: 0,
				twoTypeActive: 0,
				list: [],
				clubsData: [],
				total: 0,
				from: {
					consumerType: uni.getStorageSync("userInfo").userType,
					jgid: uni.getStorageSync("orgInfo").organizationCode,
					organizationCode: uni.getStorageSync("orgInfo").organizationCode
				},
				gwcType: 0,
				scrollTop: 0,
				gwcNum: 0,
				xMove: 0,
				yMove: -80,
				baseURL: this.$BASE_URL,
				loading: false,
				oName: uni.getStorageSync("orgInfo").organizationName,
				maxNum: 0,
				timeStop: 0,
				goodsList: [],
				gwcGoodsList: [],
				menuData: {},
				status: 'loadmore',
				//上滑列表锁 避免多次上滑导致出错
				loadingLock: 0,
				noticeStatus: false
			}
		},
		mounted() {
			uni.removeStorageSync('shopData')
			this.getClubs()
			this.getNoticeStatus()
			this.getNotice()
			let that = this
			uni.getSystemInfo({
				success: res => {
					console.log(res)
					const height = that.height
					const windowHeight = res.windowHeight // 可使用窗口高度
					if (windowHeight) {
						// 限制containerHeight的值，避免传入的height值过大而出现滚动条

						that.containerHeight = windowHeight
					}
				}
			})
		},
		onShow() {
			this.getClubs()
		},
		onPullDownRefresh() {},
		onReachBottom() {},
		methods: {
			// 上滑
			refreshGift() {
				if (this.total === this.list.length) {
					this.status = 'nomore'
					return
				}
				if (this.loadingLock === 0) {
					++this.option.page
					this.taskList(this.option)
				}
			},
			twoTypeClick(type, index) {
				this.list = []
				this.twoTypeActive = index
				this.option.page = 1
				this.option.size = 10
				this.option.associationsInfoId = type.id
				this.taskList(this.option)
			},
			toMorePage(item) {
				uni.setStorageSync("eventId", item.id)
				uni.setStorageSync("isUpload", 0)
				uni.navigateTo({
					url: "more"
				})
			},
			async getClubs() {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/clubs',
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.clubsData = res.data;
					this.twoTypeActive = 0
					this.option.page = 1
					this.option.size = 10
					this.option.associationsInfoId = this.clubsData[0].id
					this.taskList(this.option)
				}
			},
			async getNoticeStatus() {
				this.$getConfigData('club_notice_open').then(res => {
					if (res.code === 200) {
						this.noticeStatus = res.msg !== "false"
						if (this.noticeStatus) {
							this.containerHeight -= 75
						} else {
							this.containerHeight -= 40
						}
					}
				})
			},
			async addGoods(data) {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/eventOrder?eventId=' + data.id,
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					uni.showModal({
						showCancel: false,
						content: '预约成功'
					})
					this.taskList(this.option)
				} else {
					this.$showModal(res.msg)
				}
			},

			async getNotice() {
				this.$getConfigData('club_notice').then(res => {
					this.noticeText = res.msg
				})
			},
			async taskList(paging) {
				this.loadingLock = 1
				this.status = 'loading'
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/events?pageNum=' + paging.page + '&pageSize=' + paging.size +
						"&associationsInfoId=" + paging.associationsInfoId,
					method: 'get',
					isNotErrorMsg: true,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					if (paging.page === 1) {
						this.total = res.total
						this.list = res.rows
					} else if (paging.page > 1) {
						for (var i = 0; i < res.rows.length; i++) {
							this.list.push(res.rows[i])
						}
					}
					this.loadingLock = 0
					if (this.total === this.list.length) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				}
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			confirm1(e) {
				uni.setStorageSync('orderType', 1)
				uni.navigateTo({
					url: 'appoint'
				})
			},
			// 刷新刷剧
			refresh() {
				this.taskList(this.option)
			},
			scrolltolower(e) {},
			load(paging) {
				this.taskList(paging)
			},
			loadSuccess(list) {
				this.list = list
			}
		}
	}
</script>
<style lang="scss" scoped>
	.foodBody {
		padding-top: 10rpx;
		padding-left: 10rpx;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		border-radius: 30rpx;
	}

	.gwxx {
		padding-top: 10rpx;
	}

	.scroll-view_H_MY {
		white-space: nowrap;
		width: 100%;
		letter-spacing: 10rpx;
		// padding: 20rpx;
		background-color: rgb(255, 255, 255);
		// background: linear-gradient(to bottom right, rgb(47, 203, 198), rgb(127, 241, 209));
	}

	.scroll-view-item_H_MY {
		color: #8c8c8c;
		height: 35px;
		width: 33.4%;
		font-size: 30rpx;
		display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
		flex-direction: column;
		align-items: center;
		border-right: 1rpx #f3f3f3 solid;
	}

	.scroll-view-item_H_MY-active {
		// background-color: rgb(153, 241, 224);
		border-bottom: 5rpx rgb(96, 182, 158) solid;
	}

	.giftTypeItem {
		color: #8c8c8c;
		padding: 20rpx 10rpx;
		font-size: 25rpx;
		letter-spacing: 5rpx;
		background-color: #f0f0f0;
		border-bottom: 1rpx #f3f3f3 solid;
	}

	.giftTypeItem-active {
		background-color: #ffffff;
	}

	.isNumNull {
		color: #FF0000;
	}
	
	.addGwc:active {
		color: #ffffff;
	}

	.yyButton:active {
		background-color: #dedede;
	}
	
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.touch {
		position: fixed;
		right: -5rpx;
		bottom: 60rpx;
		width: 105rpx;
		height: 105rpx;
		padding: 5rpx;
		background-color: rgb(10, 185, 156);
		border-top-left-radius: 50%;
		border-bottom-left-radius: 50%;
		color: #fff;
		font-size: 50rpx;
		/* 去除标签点击事件高亮效果 */
		-webkit-tap-highlight-color: transparent;
		/* 使用transform: translate3d 处理性能高 GUP */
	}


	#button_div {
		position: fixed;
		bottom: var(--window-bottom);
	}

	.mybackColor {
		background-color: #8c8c8c;
	}



	.shopHand {
		font-weight: bold;
		font-size: 20px;
		height: 20%;
		padding: 10% 0 10px 10px;
		margin-bottom: 5px;
		//background: linear-gradient(to bottom right, #85c1bf, #f1fef9);
		//background: rgb(55,186,189);
		background: #9ED6CF;
	}

	.cuisineImg {
		border-radius: 10px;
		max-height: 600rpx;
		height: auto;
		width: auto;
		padding: 0rpx 5rpx 2rpx;
	}

	.doFoodConfigView {
		width: 93%;
		margin: 0 auto;
		margin-top: 5px;
		padding: 2% 5px;
		background-color: #ffffff;
		border-radius: 10px;
		border: 1px solid #d3d3d3;
	}


	.gwcNum {
		width: 15px;
		top: 17px;
		left: 21px;
		position: relative;
	}

	/* 商品列表 */
	.goodsContent {
		width: 100%;
		margin: 0 auto;
		flex-direction: column;
		background: #f3f3f3;
		display: flex;
		justify-content: center;
	}

	.goodsItem {
		width: 280rpx;
		background: #FFFFFF;
		// border-radius: 10px;
		padding: 10rpx 0;
		// margin: 5rpx;
		// border: 1px solid #ebebeb;
	}

	.goodsName {
		font-size: 24rpx;
		color: #2e2e2e;
		padding: 10rpx 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goodsPrice {
		color: #ffac29;
		font-size: 24rpx;
		padding: 0 5rpx;
	}


	.addFood {
		margin-left: 20rpx;
		color: #8c8c8c;
	}

	.minus {
		width: 26px;
		height: 26px;
		background-color: #efefef;
		border-width: 1px;
		border-color: #c6c6c6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0;
	}

	.plus {
		width: 20px;
		height: 20px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>