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>
