popularize-front/pages_my/travelList.vue

<template>
	<view class="travelList">
        <view class="head-box"></view>
		<Navbar title="旅行列表" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
        <view class="content contentPosition_">
            <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="timeStr" 
                        type="1" 
                        :label="dropItem('timeStr').label" 
                        :value="dropItem('timeStr').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>
            <view class="info cardStyle_" v-for="(item, index) in cardListData" :key="index" @click="toDetail(item)">
                <view class="left">
                    <image :src="item.image" alt="">
                </view>
                <view class="right">
                    <view class="detailed">
                        <view class="title">{{item.title}}</view>
                        <view class="date">{{item.startTime}}</view>
                        <view class="address">{{item.address}}</view>
                    </view>
                    <view class="data">
                        <text>¥{{item.price}}</text>
                        <text>{{item.num}}/{{item.sum}}</text>
                        <text class="btn" v-if="item.state == 0">报名中</text>
						<text class="btn-2" v-if="item.state == 1">已结束</text>
                    </view>
                </view>
            </view>
        </view>
		
		<uv-calendars ref="calendars" 
		@close="closeCalendars"
		@confirm="confirmCalendars" />
	</view>
</template>

<script>
    import Navbar from '@/pages/components/Navbar.vue'
    import { globalMixin } from '../pages/mixins/globalMixin';
	export default{
        onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
        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 {
                params:{
					pageNo:1,
					pageSize:10
				},
                totalPage: '',
                cardListData: [],
                // 表示value等于这些值，就属于默认值
				defaultValue: ['all'],
				// 筛选结果
				result: [],
				// { name: 'state', label: '最新发布', value: 'new' }
				activeName: 'state',
				state: {
					label: '全部',
					value: 'all',
					activeIndex: 0,
					color: '#999',
					activeColor: '#FF4546',
					child: [{
						label: '全部',
						value: 'all'
					}, {
						label: '报名中',
						value: '0'
					}, {
						label: '已结束',
						value: '1'
					}]
				},
				timeStr: {
					label: '时间',
					value: 'all',
					activeIndex: 0,
					color: '#999',
					activeColor: '#FF4546',
					child: []
				},
				isC : false,
			}
		},
        onReachBottom() {
            if(this.params.pageNo >= this.totalPage) return
			this.params.pageNo ++
			this.travelPageList()
        },
        onLoad() {
            this.travelPageList()
        },
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.cardListData = []
			this.travelPageList()
		},
		methods: {
            travelPageList() {
				
				let params = {
					...this.params
				}
				
				this.result.forEach(n => {
					params[n.name] = n.value
				})
				
                this.$api('travelPageList',params, res=> {
					uni.stopPullDownRefresh()
                    if(res.code == 200) {
						this.totalPage = res.result.pages
						this.cardListData = [...this.cardListData,...res.result.records]
					}
                })
            },
            toDetail({ id }) {
				uni.navigateTo({
					url:`/pages_order/lvyou-detail?travelId=${id}`
				})
			},
            change(e) {
				console.log('弹窗打开状态：',e);
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = 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;
					}
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			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.travelPageList()
			},
			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">
/deep/.uv-sticky__content{
    .uv-drop-down {
        justify-content: normal;
        border: 0;
        background: transparent;
    }
}
.travelList {
    // margin-bottom: 500rpx;
    
    .content {
		margin-top: 40rpx;
        .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;
                    }
					.btn-2 {
                        background: #333;
					    color: #999;
					    padding: 10rpx 40rpx;
					    border-radius: 30rpx 0px 0px 30rpx;
					}
                }
            }
        }
    }
}

</style>