talent_map/uniapp/pages/policy/search.vue

<template>

    <view>
        <!-- 头部背景和搜索 -->
        <view>
            <image :src="appConfig.mobile_top_bg" class="top-image" id="top-image" mode="widthFix" @load="topImageLoad">
            </image>
        </view>
        <!-- 搜索 -->
        <router-link to="/pages/search/search" style="position: absolute; width: 100%; padding: 0 98rpx;height: 70rpx;"
            :style="{top: searchTop + 'rpx'}">
            <u-search wrap-bg-color="transparent" bg-color="#ffffff" :disabled="false" :height="62" shape="square"
                :show-action="false"></u-search>
        </router-link>
        <!-- 筛选 -->
        <view class="flex row-right bg-white p-l-30 p-r-30 p-b-20 p-t-20" @click="show = true">
            <u-icon name="list-dot" size="28"></u-icon>
            <view class="m-l-10">筛选</view>
        </view>

        <!-- 筛选弹出 -->
        <u-popup v-model="show" mode="right" width="80%" :closeable="true">
            <view class="p-20">
                <view v-for="(item, index) in categoryList">
                    <view>{{ item.description }}</view>
                    <!-- 标签 -->
                    <view class="flex flex-wrap">
                        <view class="tag-item" :class="{ 'tat-active': item.activeIndex == null }"
                            @tap="changeTag(null, index)">
                            全部
                        </view>
                        <view class="tag-item" :class="{ 'tat-active': item.activeIndex == tagIndex }"
                            v-for="(tag, tagIndex) in item.data" :key="tagIndex" @tap="changeTag(tagIndex, index)">
                            {{ tag.name }}
                        </view>
                    </view>
                </view>
                <view class="confrim-btn flex w-full row-center">
                    <button class="btn reset lg" @click="resetForm">重置</button>
                    <button class="white btn lg" @click="refresh">确定</button>
                </view>
            </view>
        </u-popup>

        <!-- 政策列表 -->
        <view id="main">
            <mescroll-uni ref="mescrollRef" :top="top" @init="mescrollInit" @down="downCallback" @up="upCallback"
                :down="downOption" :up="upOption" style="left: 100px;">
                <view class="p-24">
                    <view class="item" v-for="(item, index) in policyList" :key="index" @tap="goDetail(item)">
                        <view class="font-size-28">{{item.title}}</view>
                        <!-- <view class="flex m-t-20">
                        <view class="flex-1">阅读次数: 1072次</view>
                        <view class="flex-1">状态: 有效</view>
                    </view>
                    <view class="flex m-t-10">
                        <view class="flex-1">支持方式: 其他</view>
                        <view class="flex-1">支持产业: 所有产业</view>
                    </view>
                    <view class="flex m-t-10">
                        <view class="flex-1">发文单位: 科技部火炬中心</view>
                    </view> -->
                        <view class="u-border-bottom m-t-20"></view>
                        <view class="flex row-between p-t-20">
                            <view class="flex primary">
                                <u-icon name="star-fill" size="28"></u-icon>
                                <view class="m-l-10">{{item.author}}</view>
                            </view>
                            <view>{{timeFormat(item.created_at)}}</view>
                        </view>
                    </view>
                </view>
                <loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
            </mescroll-uni>
        </view>

    </view>

</template>

<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
    import {
        mapGetters,
        mapActions
    } from 'vuex'
    import {
        policyCategory,
        policyList
    } from '@/api/app'
    import {
        pxToRpx
    } from '@/utils/tools'
    import {
        timeFormat
    } from '@/utils/date'
    const app = getApp()
    const homeItem = {
        name: '首页'
    }
    export default {
        mixins: [MescrollMixin, MescrollMoreItemMixin],
        data() {
            return {
                statusBarHeight: 0,
                keyword: '',
                top: 0,
                searchTop: 0,
                show: false,
                activeIndex: 0,
                categoryList: [],
                policyList: [],
                downOption: {
                    // use: false,
                    auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
                },
                upOption: {
                    auto: true, // 不自动加载
                    noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                    empty: {
                        icon: '/static/images/order_null.png',
                        tip: '暂无数据~', // 提示
                        fixed: true,
                        top: '100rpx'
                    }
                },
                showLoading: false
            }
        },
        created() {
            uni.getSystemInfo({
                success: (res) => {
                    this.statusBarHeight = res.statusBarHeight;
                }
            });
        },
        updated: function() {
            this.$nextTick(() => {
                //  仅在整个视图都被重新渲染之后才会运行的代码     
                setTimeout(() => {
                    uni.createSelectorQuery().in(this).select('#main')
                        .boundingClientRect(data => {
                            console.log("得到布局位置信息" + JSON.stringify(data));
                            this.top = pxToRpx(data.top) 
                        }).exec();

                }, 30)
            });
        },
        onLoad() {
            this.getCategoryFun()
        },
        onHide() {},
        onPullDownRefresh() {},
        methods: {
            refresh() {
                this.show = false
                this.mescroll.resetUpScroll()
            },
            //筛选条件
            async getCategoryFun() {
                const {
                    status,
                    data
                } = await policyCategory({});
                if (status == 1) {
                    this.categoryList = data
                    console.log(this.categoryList)
                }
            },
            changeTag(tagIndex, index) {
                this.categoryList[index].activeIndex = tagIndex
                this.$forceUpdate();
            },
            resetForm() {
                this.categoryList = this.categoryList.map((item, index) => {
                    item.activeIndex = null
                    return item
                })
            },
            topImageLoad(e) {
                setTimeout(() => {
                    uni.createSelectorQuery().in(this).select('#top-image').boundingClientRect(data => {
                        console.log("得到布局位置信息" + JSON.stringify(data));
                        this.searchTop = pxToRpx(data.height) - 100
                    }).exec();
                }, 30)
            },
            searchTalents() {
                let {
                    keyword
                } = this;
                if (!keyword) {
                    this.$toast({
                        title: '请输入关键字'
                    })
                    return;
                }
                uni.navigateTo({
                    url: '/pages/talents/talents?keyword=' + this.keyword
                })
            },
            upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let params = {
                    page_size: pageSize,
                    page_no: pageNum
                }
                this.categoryList.forEach((item, index) => {
                	if (item.activeIndex) {
                        params[item.name] = item.data[item.activeIndex].value
                    }
                })
                policyList(params).then(({
                    data,
                    _meta
                }) => {
                    let curPageData = data;
                    let curPageLen = curPageData.length;
                    let hasNext = _meta.pageCount > _meta.currentPage;
                    if (page.num == 1) this.policyList = [];
                    this.policyList = this.policyList.concat(curPageData);
                    this.mescroll.endSuccess(curPageLen, hasNext);
                })
            },
            timeFormat(time) {
                return timeFormat(time)
            },
            goDetail(item){
                // uni.setStorageSync('policyDetail', item);
                uni.navigateTo({
                    url: '/pages/policy/detail?id=' + item.id+ '&title=' + item.title,
                })
            },
        },
        computed: {
            ...mapGetters(['appConfig']),
            positionTop() {
                return this.top
            },
        }
    }
</script>

<style lang="scss">
    page {
        padding: 0;
    }

    .top-image {
        width: 100%;
    }

    .index-header {
        background-color: #E8B175;
        color: #fff;

        .header-text {
            min-height: 100rpx;
            text-align: justify;
        }

        .header-border {
            border-top: 1px dashed #fff;

        }
    }

    .item {
        background: #FFFFFF;
        box-shadow: 0px 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.03);
        border-radius: 12rpx;
        opacity: 1;
        padding: 24rpx 34rpx;
        margin-bottom: 16rpx;
    }

    .tag-item {
        margin: 8rpx;
        padding: 8rpx 28rpx;
        background: #F7F8FA;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        opacity: 1;
    }


    .tat-active {
        color: #FFFFFF;
        background: #FEEFF5;
        color: #DD4250;
        border: 2rpx solid #DD4250;
    }

    .class-list {
        background-color: #fff;
        color: $-color-primary;

        .class-list-item {
            padding: 30rpx;

            .item-img {
                width: 50rpx;
                height: 50rpx;
                // padding: 9rpx;
                // background-color: #E8B175;
                border-radius: 8rpx;

                image {
                    width: 100%;
                }
            }
        }
    }

    .count {
        border-bottom: $-solid-border;
    }

    .confrim-btn {
        position: fixed;
        bottom: 100rpx;

        .btn {
            padding: 0 80rpx;
            height: 84rpx;
            line-height: 84rpx;
            background-color: $-color-primary;
            box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
            border-radius: 18rpx 18rpx 18rpx 18rpx;
        }

        .reset {
            background-color: #F2F2F2;
            color: #858585;
        }
    }
</style>