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="order" 
                        type="2" 
                        :label="dropItem('order').label" 
                        :value="dropItem('order').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>
            <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>
	</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: [0, 'all', '0'],
				// 筛选结果
				result: [{ name: 'order', label: '全部', value: 'new' }],
				// { name: 'order', label: '最新发布', value: 'new' }
				activeName: 'order',
				order: {
					label: '全部',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#FF4546',
					child: [{
						label: '综合排序',
						value: 'all'
					}, {
						label: '最新发布',
						value: 'new'
					}, {
						label: '低价优先',
						value: 'money'
					}]
				},
				type: {
					label: '时间',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#FF4546',
					child: [{
						label: '全部',
						value: 'all'
					}, {
						label: 'PDF',
						value: 'pdf'
					}, {
						label: 'WROD',
						value: 'word'
					}, {
						label: 'PPT',
						value: 'ppt'
					}]
				}
			}
		},
        onReachBottom() {
            if(this.params.pageNo >= this.totalPage) return
			this.params.pageNo ++
			this.travelPageList()
        },
        onLoad() {
            this.travelPageList()
        },
		methods: {
            travelPageList() {
                this.$api('travelPageList',this.params, res=> {
                    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.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} 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);
				uni.showModal({
					content: `筛选的值：${JSON.stringify(this.result)}`
				})
			}
		}
	}
</script>
<style scoped lang="scss">
/deep/.uv-sticky__content{
    .uv-drop-down {
        justify-content: normal;
        border: 0;
        background: transparent;
    }
}
.travelList {
    // margin-bottom: 500rpx;
    
    .content {
        .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 {
					    color: $uni-color-primary;
					    padding: 10rpx 40rpx;
					    border-radius: 30rpx 0px 0px 30rpx;
					}
                }
            }
        }
    }
}

</style>