|
|
<template> <view> <view class="head"> <!-- <button class="sign-in-btn">最新</button> --> <!-- tabs --> <view class="filter-item" v-for="(value, key) in filter" :key="key" @click="switchFilter(key)"> <text style="white-space: nowrap">{{ value.selected || value.name }}</text> <text class="lf-iconfont icon-iconfront-" :class="{'tab-active': show_filter && filter_key == key}"></text> </view> <!-- 普通列表文字选择 --> <view class="filter-modal" v-if="show_filter && filter_key != 'search'" @click="show_filter = false"> <view class="filter-content"> <view v-for="(item, index) in filter[filter_key].data" :key="index" @click="activeItem(item.text)">{{ item.text }}</view> </view> </view> <!-- 多条件搜索 --> <view class="filter-modal" v-else-if="show_filter && filter_key == 'search'" @click="show_filter = false"> <view class="filter-many" @click.stop> <view class="filter-main"> <view v-for="(value, key) in filter[filter_key]" :key="key" v-if="key != 'name'"> <block v-if="key == 'search_value'"> <view class="filter-title">会员编号搜索</view> <input class="input-search" :focus="on_focus" placeholder="请输入会员编号" :value="value" @blur="inputBlur(key, $event)" /> </block> <block v-else> <view class="filter-title">{{ value.name }}</view> <view class="lf-flex-wrap"> <view class="filter-capsule" :class="{'filter-active': item.text == value.selected}" v-for="(item, index) in value.data" :key="index" @click="switchCondition(key, item.text)" >{{ item.text }}</view> </view> </block> </view> </view> <view class="filter-foot"> <button class="filter-btn" @click="reset">重置条件</button> <button class="filter-btn solid-btn" @click="comfirm">确定</button> </view> </view> </view> </view> <!-- head end --> <view style="height: 104rpx;"></view> <lf-user-list></lf-user-list> <!-- 加载 --> <view class="loading-more"> <text>没有更多数据啦~</text> </view> <!-- 回到顶部 --> <u-back-top :scrollTop="pageScrollTop"></u-back-top> </view></template>
<script> import lfUserList from '@/components/lf-userList/lf-userList.vue' // var filterObj = require('./filter.json');
export default { components: { lfUserList }, data(){ return { show_filter: false, filter: {}, filter_key: '', name: '最新', on_focus: false, filterObj: {} } }, onLoad(options){ console.log(this.filter) this.name = options.name || this.name; if(this.name == '搜索') { this.show_filter = true; this.filter_key = 'search'; this.on_focus = true; } this.getMemberParams(); }, methods: { // 获取查询参数
getMemberParams(){ this.$http(this.API.API_MEMBERS_PARAMS).then(res => { console.log(res, "---------"); this.filterObj = res.data; this.filter = this.productionObj(); }) }, // 引入数据，并序列化，避免数据引用
productionObj(){ return JSON.parse( JSON.stringify(this.filterObj) ); }, // 切换显示隐藏筛选
switchFilter(key){ if(this.filter_key != key){ this.show_filter = true; }else{ this.show_filter = !this.show_filter; } this.filter_key = key; }, // 选中筛选条件
activeItem(value){ this.filter[this.filter_key].selected = value; // TODO 接口请求
}, // 切换筛选条件
switchCondition(key, value){ this.filter[this.filter_key][key].selected = value; }, // 输入框失去焦点事件
inputBlur(key, event){ this.filter[this.filter_key][key] = event.detail.value; }, // 重置筛选条件
reset(){ this.filter = this.productionObj(); this.show_filter = false; }, // 确定筛选
comfirm(){ this.$msg('筛选成功！'); this.show_filter = false; console.log(this.filter); } } }</script>
<style lang="scss" scoped="scoped"> .head{ width: 750rpx; height: 102rpx; border-bottom: 1rpx solid #e5e5e5; position: fixed; background-color: #FFFFFF; z-index: 9; display: flex; justify-content: space-between; align-items: center; padding: 0 32rpx; box-sizing: border-box; .sign-in-btn{ margin: 0; width: 140rpx; height: 62rpx; background-color: #FCF7FA; border: 1rpx solid #E21196; border-radius: 10rpx; font-size: 28rpx; color: #E21196; line-height: 60rpx; } .filter-item{ width: 114rpx; height: 62rpx; // line-height: 62rpx;
// text-align: right;
display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; font-size: 28rpx; color: #222222; .tab-active{ display: inline-block; transform: rotate(180deg); color: #E21196 !important; } } .filter-modal{ position: absolute; z-index: 7; background-color: rgba(0,0,0,0.5); top: 103rpx; right: 0; bottom: 0; left: 0; width: 100vw; height: calc(100vh - 103rpx); .filter-content{ position: absolute; width: 100%; height: 300rpx; background-color: #FFFFFF; left: 0; z-index: 14; overflow-y: scroll; padding: 0 0 32rpx 32rpx; display: flex; flex-direction: column; justify-content: space-evenly; view{ height: 60rpx; // border-bottom: 1rpx solid #e5e5e5;
padding: 20rpx 0; line-height: 60rpx; } } .filter-many{ position: absolute; width: 100%; height: 806rpx; background-color: #FFFFFF; left: 0; z-index: 14; .filter-main{ height: 675rpx; overflow-y: scroll; box-sizing: border-box; padding: 32rpx; .filter-title{ font-size: 28rpx; color: #222222; font-weight: bold; margin-bottom: 20rpx; } .filter-capsule{ width: 163rpx; height: 62rpx; border-radius: 31rpx; border: 1rpx solid #999999; font-size: 20rpx; color: #999999; text-align: center; line-height: 62rpx; margin-right: 12rpx; &:nth-child(4n){ margin-right: 0rpx; } &:nth-child(n+5){ margin-top: 12rpx; } } .filter-active{ border-color: #E21196; color: #E21196; } .input-search{ width: 686rpx; height: 62rpx; background-color: #FFFFFF; border-radius: 10rpx; border: 1rpx solid #DDDDDD; box-sizing: border-box; padding: 0 15rpx; font-size: 28rpx; margin-bottom: 50rpx; } } .filter-main>view:nth-child(n+3){ margin-top: 40rpx; } .filter-foot{ height: 130rpx; border-top: 1rpx solid #e5e5e5; padding: 32rpx; display: flex; justify-content: space-between; align-items: center; .filter-btn{ width: 332rpx; height: 90rpx; border-radius: 10rpx; border: 1rpx solid #555555; background-color: #FFFFFF; line-height: 88rpx; font-size: 32rpx; color: #555555; margin: 0; } .solid-btn{ background-color: #E21196; color: #FFFFFF; border: none; } } } } }</style>
|
