popularize-front/pages_my/activeList.vue

<template>
	<view class="travelList">
		<view class="head-box"></view>
		<uv-navbar autoBack :title="$t('pages_my.activeList.title')" leftIconColor="#fff" :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
		<view class="content">
			<view class="drop">
				<uv-drop-down ref="dropDown" text-color="#fff" text-size="30rpx" sign="dropDown_1" text-active-color="#fff"
					:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
					:extra-active-icon="{name:'arrow-up-fill',color:'#fff',size:'26rpx'}" :defaultValue="defaultValue"
					:custom-style="{padding: '0 30rpx'}" @click="selectMenu">
					<uv-drop-down-item name="state" type="2" :label="dropItem('state').label" :value="dropItem('state').value">
					</uv-drop-down-item>
					
					<uv-drop-down-item name="cityId" type="2" :label="dropItem('cityId').label" :value="dropItem('cityId').value">
					</uv-drop-down-item>
					
					<uv-drop-down-item name="timeStr" type="1" :label="dropItem('timeStr').label" :value="dropItem('timeStr').value">
					</uv-drop-down-item>
					<!-- <uv-drop-down-item name="type" type="2" :label="dropItem('type').label" :value="dropItem('type').value">
					</uv-drop-down-item> -->
				</uv-drop-down>

				<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
					@clickItem="clickItem" @popupChange="change"></uv-drop-down-popup>
			</view>
			<active-item :cardListData="cardListData"/>
			<uv-load-more :status="status" fontSize="24rpx" dashed line />
			<!-- <view class="info cardStyle_">
				<view class="left">
					<image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031"
						alt="">
				</view>
				<view class="right">
					<view class="detailed">
						<view class="title">夏日去撒野旅游计划～</view>
						<view class="date">2024.10.28 10:00</view>
						<view class="address">成都市东丽湖露营地32号</view>
					</view>
					<view class="data">
						<text>¥233.00</text>
						<text>11/40</text>
						<text class="btn">已开票</text>
					</view>
				</view>
			</view> -->
			
			<uv-calendars ref="calendars" 
			@close="closeCalendars"
			@confirm="confirmCalendars" />
		</view>
	</view>
</template>

<script>
	import Navbar from '@/pages/components/Navbar.vue'
	import activeItem from '@/components/active/active-item.vue'
	// import { globalMixin } from '../pages/mixins/globalMixin';
	export default {
		components:{
			activeItem
		},
		onPageScroll(e) {
			if(e.scrollTop > 50) {
				this.bgColor = '#49070c'
			}else{
				this.bgColor = 'transparent'
			}
			// this.$refs.dropDown.init();
		},
		onReachBottom() {
			if(this.params.pageNo >= this.totalPage) return
			this.params.pageNo ++
			this.getActivityPageList()
		},
		// mixins: [globalMixin],
		//       components:{
		//           Navbar
		// },
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		data() {
			return {
				status:"loading",
				bgColor:'transparent',
				// 表示value等于这些值，就属于默认值
				defaultValue: ['all', 'allAddress'],
				// 筛选结果
				result: [
					{
						label: '报名中',
						value: '0',
						name : 'state',
					}
				],
				// { name: 'order', label: '最新发布', value: 'new' }
				activeName: 'state',
				state: {
					label: this.$t('pages_my.activeList.enrolling'),
					value: '0',
					activeIndex: 0,
					color: '#999',
					activeColor: '#FF4546',
					child: [
						{
							label: this.$t('pages_my.activeList.enrolling'),
							value: '0'
						}, 
						{
							label: this.$t('pages_my.activeList.ended'),
							value: '1'
						},
					]
				},
				timeStr: {
					label: this.$t('pages_my.activeList.time'),
					value: 'all',
					activeIndex: 0,
					color: '#999',
					activeColor: '#FF4546',
					child: [
						{
							label: this.$t('pages_my.activeList.time'),
							value: 'all'
						}
					]
				},
				cityId: {
					label: this.$t('pages_my.activeList.all_area'),
					value: 'allAddress',
					activeIndex: 0,
					color: '#999',
					activeColor: '#FF4546',
					child: [
						{
							label: this.$t('pages_my.activeList.all_area'),
							value: 'allAddress'
						},
					]
				},
				totalPage:0,
				cardListData:[],
				params:{
					state : '',
					pageNo:1,
					pageSize:10
				},
				isC : false,
			}
		},
		onLoad() {
			this.getActivityPageList()
			this.getArea()
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.cardListData = []
			this.getActivityPageList()
		},
		methods: {
			getActivityPageList() {
				
				let params = {
					...this.params
				}
				
				this.result.forEach(n => {
					params[n.name] = n.value
				})
				
				this.$api('activityPageList', params, res=>{
					uni.stopPullDownRefresh()
					if(res.code == 200) {
						this.totalPage = res.result.pages
						this.cardListData = [...this.cardListData,...res.result.records]
						if(this.params.pageNo >= this.totalPage) {
							this.status = "nomore"
						}else {
							this.status = "loadmore"
						}
					}
				})
			},
			getArea(){
				this.$api('getArea', res => {
					if(res.code == 200){
						res.result.forEach(n => {
							this.cityId.child.push({
								label: n.city,
								value: n.id
							})
						})
					}
				})
			},
			change(e) {
				console.log('弹窗打开状态：', e);
			},
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.$refs.calendars.open()
				} else {
					const find = this.result.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value ==
							find.value);
						this[this.activeName].activeIndex = findIndex;
					} else {
						this[this.activeName].activeIndex = 0;
					}
				}
			},
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let {
					label,
					value
				} = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// // 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				
				this.params.pageNo = 1
				this.cardListData = []
				this.getActivityPageList()
			},
			confirmCalendars(e){
				this.isC = true
				this.clickItem({
					name: 'timeStr',
					label: e.fulldate,
					value: e.fulldate
				});
			},
			closeCalendars(){
				if(this.isC) return this.isC = false
				this.clickItem({
					name: 'timeStr',
					label: 'all',
					value: 'all'
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.head-box {
		background: url('@/static/image/nav-bg.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 534rpx;
		position: absolute;
	}
	.content {
		margin-top: 40rpx;
		padding-top: calc(var(--status-bar-height) + 110rpx);
	}
	/deep/.uv-sticky__content {
		.uv-drop-down {
			justify-content: normal;
			border: 0;
			background: transparent;
		}
	}

	.travelList {
		// margin-bottom: 500rpx;

		.content {
			padding-left: 20rpx;
			padding-right: 20rpx;
			.info {
				position: relative;
				margin: 10rpx 32rpx 36rpx;
				;
				padding: 35rpx 0 35rpx 24rpx;
				border-radius: 26rpx;

				.right {
					.data {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.btn {
							background: #381615;
							color: $uni-color-primary;
							padding: 10rpx 40rpx;
							border-radius: 30rpx 0px 0px 30rpx;
						}
					}
				}
			}
		}
	}
</style>