feat: policy search json filter

uniapp/pages/policy/search.vue

@@ -1,55 +1,55 @@
 <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>
+	<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>
+		<!-- 筛选弹出 -->
+		<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 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>
@@ -60,280 +60,285 @@
                     <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 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>
+	</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();
+	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
-            },
-        }
-    }
+				}, 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 != 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']),
+			positionTop() {
+				return this.top
+			},
+		}
+	}
 </script>
 
 <style lang="scss">
-    page {
-        padding: 0;
-    }
+	page {
+		padding: 0;
+	}
 
-    .top-image {
-        width: 100%;
-    }
+	.top-image {
+		width: 100%;
+	}
 
-    .index-header {
-        background-color: #E8B175;
-        color: #fff;
+	.index-header {
+		background-color: #E8B175;
+		color: #fff;
 
-        .header-text {
-            min-height: 100rpx;
-            text-align: justify;
-        }
+		.header-text {
+			min-height: 100rpx;
+			text-align: justify;
+		}
 
-        .header-border {
-            border-top: 1px dashed #fff;
+		.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;
-    }
+	.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;
-    }
+	.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;
-    }
+	.tat-active {
+		color: #FFFFFF;
+		background: #FEEFF5;
+		color: #DD4250;
+		border: 2rpx solid #DD4250;
+	}
 
-    .class-list {
-        background-color: #fff;
-        color: $-color-primary;
+	.class-list {
+		background-color: #fff;
+		color: $-color-primary;
 
-        .class-list-item {
-            padding: 30rpx;
+		.class-list-item {
+			padding: 30rpx;
 
-            .item-img {
-                width: 50rpx;
-                height: 50rpx;
-                // padding: 9rpx;
-                // background-color: #E8B175;
-                border-radius: 8rpx;
+			.item-img {
+				width: 50rpx;
+				height: 50rpx;
+				// padding: 9rpx;
+				// background-color: #E8B175;
+				border-radius: 8rpx;
 
-                image {
-                    width: 100%;
-                }
-            }
-        }
-    }
+				image {
+					width: 100%;
+				}
+			}
+		}
+	}
 
-    .count {
-        border-bottom: $-solid-border;
-    }
+	.count {
+		border-bottom: $-solid-border;
+	}
 
-    .confrim-btn {
-        position: fixed;
-        bottom: 100rpx;
+	.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;
-        }
+		.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;
-        }
-    }
+		.reset {
+			background-color: #F2F2F2;
+			color: #858585;
+		}
+	}
 </style>