horzi_rai_wxa/pages-purchaser/purchaserActivity/purchaserActivity.vue

<template>
	<view class="purchaser-activity-container">
		<view class="search-bar">
			<text v-for="item in activityTimeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''" 
			@click="isActivityDate(item.Id)">{{ item.StatusName }}</text>
			<text v-for="item in activityTypeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''" 
			@click="isActivityType(item.Id)">{{ item.StatusName }}</text>
		</view>
		<view class="purchaser-activity-list">
			<purchaserActivityList style="width: 682rpx;" ref="purchaserActivityListRef" :whichDay="whichDay"
			:typeName="typeName">
				<view class="no-data-box">
					<view class="no-data">
						<image src="https://hzstatic.hzinsights.com/cygx/icon/activity-no-data.png" ></image>
						<text>暂无对应活动</text>
					</view>
				</view>
			</purchaserActivityList>
		</view>
		<Loading />
	</view>
</template>

<script>
	import purchaserActivityList from "@/components/activity/purchaserActivityList.vue"
	import { Throttle } from "@/config/util.js";
	import { activity } from "@/config/api";
	
	export default {
		components:{purchaserActivityList},
		data() {
			return {
				activityTimeList: [
				  { Id: 1, IsChoose: false, StatusName: "今日活动" },
				  { Id: 2, IsChoose: false, StatusName: "明日活动" },
				],
				activityTypeList: [
				  { Id: 3, IsChoose: false, StatusName: "公司调研电话会" }
				],
				whichDay:'',
				typeName:''
			}
		},
		methods: {
			// 今日明日的点击事件
			isActivityDate(id) {
			  this.activityTimeList.forEach((item) => {
			    if (item.Id == id) item.IsChoose = !item.IsChoose;
			  });
			  const arr = [];
			  this.activityTimeList.forEach((item) => item.IsChoose && arr.push(item.Id));
			  this.whichDay = arr.join(",");
				this.typeName=""
				this.activityTypeList.map(item =>{
					item.IsChoose=false
				})
				this.$nextTick(()=>{
					this.$refs.purchaserActivityListRef.reloadActivityList();
				})
				
			},
			isActivityType(id){
				this.activityTypeList.forEach((item) => {
				  if (item.Id == id) item.IsChoose = !item.IsChoose;
				});
				const arr = [];
				this.activityTypeList.forEach((item) => item.IsChoose && arr.push(item.Id));
				this.typeName = arr.join(",");
				this.whichDay=""
				this.activityTimeList.map(item =>{
					item.IsChoose=false
				})
				this.$nextTick(()=>{
					this.$refs.purchaserActivityListRef.reloadActivityList();
				})
			},
			loadShare(option){
				// if(!option) return
				this.whichDay = option.whichDay || ""
				let whichDayArr = this.whichDay.split(',')
				this.typeName = option.typeName || ""
				let typeNameArr = this.typeName.split(',')
				this.activityTimeList.map(item =>{
					item.IsChoose=  whichDayArr.includes(item.Id+'') 
				})
				this.activityTypeList.forEach((item) => {
				  item.IsChoose=  typeNameArr.includes(item.Id+'') 
				});
				this.$nextTick(()=>{
					this.$refs.purchaserActivityListRef.reloadActivityList();
				})
			}
		},
		/** 用户点击分享 */
		onShareAppMessage: function (res) {
		  return {
		    title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "近期所有研选活动预告",
		    path: "/pages-purchaser/purchaserActivity/purchaserActivity?whichDay=" + this.whichDay + "&typeName=" + this.typeName,
		  };
		},
		onLoad(option) {
			this.loadShare(option);
		},
		onReachBottom: Throttle(function () {
		  if (this.$refs.purchaserActivityListRef.page_no >= this.$refs.purchaserActivityListRef.pages) return;
		  this.$refs.purchaserActivityListRef.loadActivityMore();
		}),
	}
</script>

<style lang="scss" scoped>
	.purchaser-activity-container{
		background-color: $uni-bg-color;
		min-height: 100vh;
		// height: 100vh;
		.search-bar{
			width: 100vw;
			height: 82rpx;
			display: flex;
			align-items: center;
			padding: 0 34rpx;
			background-color: white;
			position: sticky;
			top: 0;
			text {
			  // width: 136rpx;
				min-width: 136rpx;
				padding: 4rpx 20rpx;
				height: 42rpx;
			  text-align: center;
			  line-height: 34rpx;
			  background-color: #f8f8fa;
			  box-sizing: border-box;
			  border-radius: 44rpx;
				margin-right: 20rpx;
				font-size: 24rpx;
				white-space: nowrap;
			}
			.active {
			  background-color: #376cbb;
			  color: #fff;
			}
		}
		.purchaser-activity-list{
			padding: 20rpx 34rpx 36rpx;
			.no-data-box{
				width: 682rpx;
				// height: 100%;
				border-radius: 16rpx;
				background-color: white;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.no-data{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: calc(100vh - 138rpx);
					image{
						width: 412rpx;
						height: 380rpx;
						margin-bottom: 40rpx;
					}
					text{
						font-size: 24rpx;
						line-height: 34rpx;
						color: #999999;
					}
				}
			}
		}
	}
	
</style>