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>
     <u-tabbar :list="tabarList"></u-tabbar>
	</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,
		mapMutations
	} 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()
            let type = uni.getStorageSync('TABBAR_TYPE')
            this.setTabarList({
                type: type
            })
		},
		onHide() {},
		onPullDownRefresh() {},
		methods: {
                 ...mapMutations(["setTabarList"]),
			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 != null) {
						if (item.name != 'cengci') {
							params[item.name] = item.data[item.activeIndex].value
						} else {
							params[item.name] = item.data[item.activeIndex].name
						}
					}
				})
				console.log(this.categoryList)
				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', 'tabarList']),
			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>