uniapp 条件筛选

v3 版本

<template><view class="store flex "><view class="store_view"><view class="store_view_search flex jsb ac"><!-- <view class="store_view_search_select">全部</view> --><view class="store_view_search_inp flex ac"><input type="text" placeholder="请输入搜索商品" v-model="Data.search_t" @confirm="confirm" /></view></view><view class="screening flex jsb ac"><view class="screening_li flex jc ac" @click="choose_filter(1,'weigh')"><view class="screening_li_t" :class="Data.filter_index==1?'screening_li_tc':''">综合</view><!-- <view class="screening_li_img"><up-icon name="arrow-down" color="#333" size="12" @confirm="confirm"></up-icon></view> --></view><view class="screening_li flex jc ac" @click="choose_filter(2,'sales')"><view class="screening_li_t" :class="Data.filter_index==2?'screening_li_tc':''">销量</view><!-- asc=正序  最小的在前面，最大的在后面    desc=倒序  最大的在前面，最小的在最后 --><view class="screening_li_img"><!-- -fill --><up-icon name="arrow-up-fill" color="#8E97FE " size="8"v-if="Data.filter_index==2&&Data.filter_type=='asc'"></up-icon><up-icon name="arrow-up-fill" color="#333 " size="8" v-else></up-icon><up-icon name="arrow-down-fill" color="#8E97FE" size="8"v-if="Data.filter_index==2&&Data.filter_type=='desc'"></up-icon><up-icon name="arrow-down-fill" color="#333" size="8" v-else></up-icon></view></view><view class="screening_li  flex jc ac" @click="choose_filter(3,'price')"><view class="screening_li_t" :class="Data.filter_index==3?'screening_li_tc':''">价格</view><view class="screening_li_img"><up-icon name="arrow-up-fill" color="#8E97FE " size="8"v-if="Data.filter_index==3&&Data.filter_type=='asc'"></up-icon><up-icon name="arrow-up-fill" color="#333 " size="8" v-else></up-icon><up-icon name="arrow-down-fill" color="#8E97FE" size="8"v-if="Data.filter_index==3&&Data.filter_type=='desc'"></up-icon><up-icon name="arrow-down-fill" color="#333" size="8" v-else></up-icon></view></view><view class="screening_li  flex jc ac" @click="choose_filter(5,'createtime')"><view class="screening_li_t" :class="Data.filter_index==5?'screening_li_tc':''">新上架</view><!-- <view class="screening_li_img"><up-icon name="arrow-up-fill" color="#8E97FE " size="8"v-if="Data.filter_index==3&&Data.filter_type=='asc'"></up-icon><up-icon name="arrow-up-fill" color="#333 " size="8" v-else></up-icon><up-icon name="arrow-down-fill" color="#8E97FE" size="8"v-if="Data.filter_index==3&&Data.filter_type=='desc'"></up-icon><up-icon name="arrow-down-fill" color="#333" size="8" v-else></up-icon></view> --></view><!-- <view class="screening_li flex jc ac" @click="choose_filter(4,'')"><view class="screening_li_t" :class="Data.filter_index==4?'screening_li_tc':''">筛选</view><view class="screening_li_img flex jc ac"><image class="limg" :src="Data.imgurl + 'sxc.png'" mode="" v-if="Data.filter_index==4"></image><image class="limg" :src="Data.imgurl + 'sx.png'" mode="" v-else></image></view></view> --></view></view><scroll-view scroll-y="true" class="scrollview flex " @scrolltolower="onReachBottoms"><view class="scrollview_list" v-if="Data.list.length&&!Data.list_loading_show"><goodsItem :list="Data.list" :type="19"></goodsItem></view><Loading :type="'adaptive'" :show="Data.list_loading_show"></Loading><view v-if="Data.list.length==0&&!Data.list_loading_show"><nodata></nodata></view></scroll-view><Loading :show="Data.loading_show"></Loading></view>
</template><script setup>import Loading from "@/components/loading/loading.vue"import tabbar from "@/components/tabbar/tabbar.vue"import goodsItem from "@/components/goodsItem/goodsItem.vue"import nodata from "@/components/nodata/nodata.vue"import tools from "@/tools/index.js"import config from "@/tools/config.js"import customizeHead from "@/components/customizeHead/customizeHead.vue"import {reactive,computed} from 'vue';import {onLoad,onPageScroll,onPullDownRefresh,onShow,onReachBottom,onUnload,onHide,onShareAppMessage} from '@dcloudio/uni-app';const wxinfo = computed(() => tools.$public.public.wxCapsuleInfo())// 数据const Data = reactive({imgurl: config.serverimg,loading_show: true,list_loading_show: false,id: '',list: [],search_t: '',filter_index: 1, //筛选选中第几个filter_type: 'asc',filter_sort: 'weigh',})setTimeout(() => {Data.loading_show = false;}, 500)const Page = reactive({page: 1,limit: 10,last_page: 0})function onReachBottoms() {console.log('到底了')if (Page.last_page > Page.page) {Page.page++;getlist(1);} else {tools.$public.public.showToast('没有更多了~')}}onLoad((opt) => {// if (Data.search_t) {// 	getlist()// }})onShow(() => {// tools.$store('user').setuToExamine()})async function getlist(type) {let {code,msg,data} = await tools.$api.indexs.searchProduct({page: Page.page,search: Data.search_t,sort: Data.filter_sort,order: Data.filter_type,filter: {},op: {},type: 'goods'})if (code == 1) {if (type) {if (data.data && data.data.length) {Data.list.push(...data.data)}} else {Data.list = data.data;}Page.last_page = data.last_page;console.log(data, '商品列表')}setTimeout(() => {Data.list_loading_show = false;}, 500)}function choose_filter(index, sort) {// if(){// }Data.filter_sort = sort;if (Data.filter_index == index) {filter_type_choose()} else {Data.filter_index = index;Data.filter_type = ''filter_type_choose()}// if (Data.filter_index == 2 && Data.filter_type != 'asc' && Data.filter_type != 'desc')}function filter_type_choose() {if (Data.filter_index == 2) {if (Data.filter_index == 2 && Data.filter_type == 'asc') {Data.filter_type = 'desc'} else if (Data.filter_index == 2 && Data.filter_type == 'desc') {Data.filter_type = 'asc'} else {Data.filter_type = 'asc'}} else if (Data.filter_index == 3) {if (Data.filter_index == 3 && Data.filter_type == 'asc') {Data.filter_type = 'desc'} else if (Data.filter_index == 3 && Data.filter_type == 'desc') {Data.filter_type = 'asc'} else {Data.filter_type = 'asc'}} else if (Data.filter_index == 5) {Data.filter_type = 'desc'}if (statePage()) {getlist()}}function statePage() {Data.list = [];Page.page = 1;Page.limit = 10;Page.last_page = 0;Data.list_loading_show = true;return true;}function confirm(e) {if (e.detail.value) {Data.search_t = e.detail.value;if (statePage()) {getlist()}} else {Data.list = [];Page.page = 1;Page.limit = 10;Page.last_page = 0;}// console.log(e, '搜压缩')}const go = (page) => {tools.$public.public.navigateTo(page)}const islogin = () => {if (!uni.getStorageSync('token')) {// tools.$public.public.goLogin()return false} else {return true;}}
</script>
<style>page {background: #fff;}
</style>
<style lang="scss" scoped>.screening_li_tc {// font-size: 32rpx !important;color: #8E97FE !important;margin-right: 5rpx !important;line-height: 1;}.store {height: 100vh;position: relative;flex-direction: column;// justify-content: space-between;.backimg {width: 100%;height: 590rpx;position: fixed;top: 0;left: 0;z-index: -1;}.store_view {width: 100%;margin-top: 12rpx;// position: fixed;.store_view_search {// width: 690rpx;margin: auto;padding: 24rpx 20rpx;box-sizing: border-box;.store_view_search_select {font-weight: bold;font-size: 24rpx;color: #333333;}.store_view_search_inp {// width: 508rpx;width: 100%;height: 56rpx;background: rgba(239, 239, 239, 0.6);border-radius: 110rpx 110rpx 110rpx 110rpx;padding: 0 30rpx;box-sizing: border-box;font-weight: 400;font-size: 24rpx;color: #AAAAAA;input {width: 100%;}}}.screening {// width: 100%;width: 690rpx;margin: auto;padding: 24rpx 20rpx;box-sizing: border-box;.screening_li {// width: 33.3%;}.screening_li_t {font-size: 32rpx;color: #777777;margin-right: 5rpx;}.screening_li_img {}}}.store_view_plank {width: 100%;height: 96px;}.scrollview {overflow: hidden;flex-grow: 1 flex;padding-top: 24rpx;box-sizing: border-box;.scrollview_list {width: 690rpx;margin: auto;}}}
</style>