hwnc/pagesB/pages/activitylist/activitylist.vue

<template>
	<view :class="[AppTheme]" class="all_box">
		<!-- #ifdef APP-PLUS -->
		<u-sticky offset-top="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offset-top="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="navbar">
					<u-tabs :current='tabscurrent' :list="titlelist" @click="tabsChange" :activeStyle="{
		        color: primary,
		        transform: 'scale(1.05)'
		    }" :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1)'
		    }" lineWidth="40" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :lineColor="primary">
					</u-tabs>
				</view>
			</u-sticky>
			<swiper :current='swipercurrent' @change='swiperchange' class="swiper-box">
				<swiper-item class="swiper_item" v-for="(item, index) in titlelist" :key="index">
					<view class="list-scroll-content" @scrolltolower='scrolltolower' scroll-y>
						<view @click="godetile(item2.id,item2.status)" class="activity_item"
							v-for="(item2, index2) in couponlist" :key="index2">
							<view class="coupon_item_title">
								<u-icon name="chrome-circle-fill" :color="primary" size="42"></u-icon>
								<text>{{ item2.activity_title }}</text>
							</view>
							<view class="activity_item_top"
								:style="{ backgroundImage: 'url(' + item2.activity_img + ')' }">
								<view v-if="item2.isend==0" style=" opacity:0.6;width: 100%;height: 420rpx;display: flex;justify-content: center;align-items: center; background-color: black;">
									<image style="width: 220rpx;height: 220rpx;"  :src="settingFile.root_img+'/static/app/end.png?t=152425'"></image>
								</view>
								<view class="activity_time">{{ retushorttime(item2.end_time) }}</view>
								<view class="registration_deadline" v-if="item2.status === 0">
									<u-empty text="报名截止" icon-color="#fff" color="#fff" mode="favor" icon-size="85">
									</u-empty>
								</view>
							</view>
							<view class="activity_item_bottom">
								<view class="expiration_reminder">{{ item2.activity_title }}</view>
								<view class="activity_price">门票：
									<view class="activity_price_p1 text-primary">
										{{ item2.child_fares }}~{{ item2.adult_fares }}
									</view>
									元
								</view>
								<view class="activity_id">{{ retushorttime(item2.start_time) }} ~
									{{ retushorttime(item2.end_time) }}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<admyself :opshow="true"></admyself>
			<view style="height: 20rpx;"></view>
			<!-- 分享 -->
			<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
	</view>
</template>
<script>
	import mallApi from '@/api/mall/index.js';
	import untiljs from '@/common/until.js';
	export default {
		data() {
			return {
				status: 'loadmore',
				tabscurrent: 0,
				swipercurrent: 0,
				p: 1,
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				titlelist: [{
					id: 0,
					name: '全部'
				}, ],
				ubseclist: [{
						name: '综合排序'
					},
					{
						name: '销量优先'
					},
					{
						name: '距离优先'
					},
					{
						name: '人气优先'
					},
					{
						name: '收藏最多'
					}
				],
				couponlist: [],
				sharedata: null,
			};
		},
		onLoad(options) {
			let that = this
			that.$bindid.getbindid(options, that.$store);
			that.vueinit();
			that.$init_config(2, function(res) {
				if (that.$config) {
					that.sharedata = that.$config.sharedata
				}
			})
		},
		onShareAppMessage(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		onShareTimeline(res) {
			let that = this
			return {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			}
		},
		onPullDownRefresh() {
			this.vueinit();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onReachBottom() {
			console.log("上拉加载")
			this.p++
			let that = this
			let data = {
				cid: that.tabscurrent,
				p: that.p
			}
			that.status = 'loading'
			mallApi.getofinlist(data).then(res => {
				if (res.status == 1) {
					res.data.forEach(ele => {
						that.couponlist.push(ele)
					})
					if (that.couponlist.length == 10) {
						that.status = 'loadmore'
					} else {
						that.status = 'nomore'
					}
				} else {
					that.status = 'nomore'
					that.p--
				}
			});
		},
		methods: {
			scrolltolower() { //上拉加载
				// console.log("上拉加载")
				// this.p++
				// let that = this
				// let data = {
				// 	cid: that.tabscurrent,
				// 	p: that.p
				// }
				// that.status = 'loading'
				// mallApi.getofinlist(data).then(res => {
				// 	if (res.status == 1) {
				// 		console.log(res, "resres");
				// 		res.data.forEach(ele => {
				// 			that.couponlist.push(ele)
				// 		})
				// 		if (that.couponlist.length == 10) {
				// 			that.status = 'loadmore'
				// 		} else {
				// 			that.status = 'nomore'
				// 		}
				// 	} else {
				// 		that.status = 'nomore'
				// 		that.p--
				// 	}
				// });
			},
			//跳转
			godetile(id, status) {
				if (status === 0) {
					uni.showToast({
						title: "活动已结束",
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: "/pagesB/pages/activitydetails/activitydetails?id=" + id
					})
				}
			},
			//返回指定格式时间
			retushorttime(time) {
				let date = new Date(time);
				return untiljs.formatDate(date, 'yyyy.MM.dd');
			},
			vueinit() {
				let that = this;
				mallApi.getofflineindex().then(res => {
					if (res.status == 1) {
						that.titlelist = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
				mallApi.getofinlist().then(res => {
					if (res.status == 1) {
						this.couponlist = []
						res.data.forEach(ele => {
							that.couponlist.push(ele)
						})
						if (that.couponlist.length == 10) {
							that.status = 'loadmore'
						} else {
							that.status = 'nomore'
						}
					} else {
						that.couponlist = res.data;
						that.status = 'nomore'
					}
				});
			},
			getcouponlist(id, p) {
				mallApi.getofinlist({
					cid: id,
					p: p
				}).then(res => {
					if (res.status == 1) {
						this.couponlist = res.data;
					} else {
						this.couponlist = res.data;
					}
				});
			},
			// tabs通知swiper切换并更改数据
			tabsChange(item) {
				console.log(item, 'item')
				this.tabscurrent = item.index
				this.swipercurrent = item.index
				this.couponlist = []
				this.getcouponlist(item.id, 1)
			},

			swiperchange(e) {
				this.swipercurrent = e.detail.current
				this.tabscurrent = e.detail.current
				this.couponlist = []
				this.getcouponlist(e.detail.current, 1)
			}
		}
	};
</script>
<style lang="scss" scoped>
	.all_box {
		.navbar {
			background-color: #ffffff;
			z-index: 10;
		}

		.swiper-box {
			min-height: calc(100vh - 88rpx);

			.swiper_item {

				.list-scroll-content {
					height: 101%;
					overflow-y: auto;

					.activity_item {
						margin: 20rpx;
						z-index: 10;
						box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
						border-radius: 10rpx;
						padding: 15rpx;
						background-color: #ffffff;

						.coupon_item_title {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 30rpx;
							color: #000;
							padding: 15rpx 0;

							u-icon {
								margin-right: 15rpx;
							}
						}

						.activity_item_top {
							position: relative;
							background-size: cover;
							width: 100%;
							height: 420rpx;
							border-radius: 7.5rpx;

							.registration_deadline {
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.55);
								border-radius: 7.5rpx;
								z-index: 8;
							}

							.activity_time {
								position: absolute;
								right: 0;
								top: 25rpx;
								background-color: rgba(0, 0, 0, 0.4);
								z-index: 7;
								padding: 10rpx 25rpx;
								color: #ffffff;
								border-radius: 15rpx 0 0 15rpx;
								font-size: 26rpx;
								letter-spacing: 2.5rpx;
							}
						}

						.activity_item_bottom {
							width: 100%;
							background-color: #ffffff;
							border-radius: 0 0 15rpx 15rpx;
							padding: 20rpx 0;

							.expiration_reminder {
								color: #333;
								font-size: 30rpx;
							}

							.activity_price {
								font-size: 24rpx;
								color: #999;
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin: 20rpx 0;

								.activity_price_p1 {
									font-size: 26rpx;
									font-weight: 700;
								}
							}

							.activity_id {
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}

			}

		}

	}
</style>