xmhjc-applet/pages/market/commodity.vue

<template>
    <view>
        <view class="searchBox" style="margin-top: 10rpx;">
            <view class="search" style="margin-top: 10rpx;background: #F6F6F6;width: 630rpx;">
                <u-search bgColor='#F6F6F6' placeholder="请输入关键词" 
                :showAction='false' @custom="searchList"  v-model="searchword"></u-search>
                <view @click="searchList" class="searchBtn">搜索</view>
			</view>
            <!-- <view class="search">
                <u-search placeholder="请输入关键词" @custom="searchList" v-model="searchword"></u-search>
            </view> -->
            <view @click="changeMode">
                <u--image width="48rpx" height="48rpx" :src="Modeimg" ></u--image>
            </view>
        </view>
        <view style="font-size: 32rpx;" class="flex flexfend">
            <view @click="checkType('1')" :class="ischeck=='1'?'check':''">
                综合
            </view>
            <view class="flex" style="align-items: center;" @click="checkType('2')" :class="ischeck=='2'?'check':''">
                价格 <view>
                        <u-icon name="arrow-up-fill" :color="checkup?'#46A6FF':'#ccc'" size="8"></u-icon>
                        <u-icon name="arrow-down-fill" :color="!checkup?'#46A6FF':'#ccc'" size="8"></u-icon>
                    </view>
            </view>
            <view @click="checkType('3')" :class="ischeck=='3'?'check':''">
                销量
            </view>
            <view @click="openTabs()" class="selectTypebox">
                {{selectType}}<u--image style="margin-top: 10rpx;" width="40rpx" height="40rpx" src="/static/market/btn_screening.png" ></u--image>
            </view>
        </view>
        <u-popup :closeable='true' :round="10" :show="showTabs" @close="close" @open="open">
            <view class="popupView">
                <view class="scrollview">
                    <!-- <tabsColumn :tabsItem="tabsItem" :tabsList="tabsList" :openType="current"></tabsColumn> -->
                    <view class="btnList" >
                        <view @click="changeType(index)" 
                        :class="item.plain ?'btnview': 'checkbtnview'" 
                        v-for="(item,index) in tabsList" :key="index">
                            {{ item.name }}
                        </view>
                    </view>
                
                </view>
            </view>
        </u-popup>
        <rowList v-if="showRow" :listdata="newsList" ></rowList>
        <columnList v-else :listdata="newsList" ></columnList>
        
        <view class="loadmore" @click="loadmore()" >
            {{jiazaitext}}
        </view>
    </view>
</template>
<script>
import rowList from '@/pages/market/base/rowList.vue' //左右布局
import columnList from '@/pages/market/base/columnList.vue'  //竖排列表
import tabsColumn from '@/pages/home/base/tabs-column.vue'

import {productPage,categoriesList} from '@/http/api/common.js'
export default {
components: {
    rowList,
    columnList,
    tabsColumn
},
data() {
    return {
        current:'commodity',
        showRow:true,
        checkup:true,
        showTabs:false,
        loadingType:false,
        ischeck:'1',
        searchword:'',
        selectType:'筛选',
        Modeimg:'/static/market/btn_chanpxx.png',
        newsList:[],
        tabsList:[],
        tabsItem:[],
        pageNum:1,
        jiazaitext:'加载更多',
        categoryId:'',
    }
},
async onLoad() {
    
    // 获取商品分类
    await this.getcategoriesList()
},
async onShow(){
    let categoryId = uni.getStorageSync('categoryId')
    let columnIdName = uni.getStorageSync('columnIdName')
    if (categoryId) {
        this.selectType = columnIdName
        this.categoryId = categoryId

        this.tabsList.forEach(item => {
            if (item.id == this.categoryId) {
                item.plain = false
            }else{
                item.plain = true
            }
        });

        //获取商品列表
        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []
        await this.getProductPage()
        uni.setStorageSync('categoryId', '')
        uni.setStorageSync('columnIdName', '')
    }else{
        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []
        //获取商品列表
        await this.getProductPage()
    }
},
onReachBottom() {
    this.loadmore()
},
methods: {
    async getProductPage(categoryId=''){
        if (this.loadingType) {
            //加载中禁止重复加载
            return
        }
        this.loadingType=true
        let data = {
            priceAsc:false, //价格正序排序
            priceDesc:false, //价格倒序排序
            salesVolumeDesc:false, //销量倒序排序
            keyword:this.searchword, //标题，副标题搜索
            pageSize:10,
            pageNum:this.pageNum,
            categoryId:this.categoryId //类目id
        }

        if (this.ischeck == '1') {
            //综合
            data.priceAsc = false
            data.priceDesc = false
            data.salesVolumeDesc = false
        }else if (this.ischeck == '2') {
            //价格
            data.priceAsc = this.checkup
            data.priceDesc = !this.checkup
            data.salesVolumeDesc = false
        } else {
            //销量
            data.priceAsc = false
            data.priceDesc = false
            data.salesVolumeDesc = true
        }
        

        let res =  await productPage(data)
        if (res.data.code == 200) {
            let newrows = res.data.data?.rows || []

            this.newsList.push(...newrows)
            
            if(this.newsList.length!=res.data.data.total){
                this.jiazaitext="加载更多"
            }else{
                this.jiazaitext="已经到底"
            }
        }
        this.loadingType=false
    },
    async searchList(){
        // if (this.searchword == '') {
        //     return
        // }
        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []

        await this.getProductPage()
    },
    //加载更多
    loadmore(){
        console.log('下拉加载',this.jiazaitext);
        if (this.jiazaitext=="加载更多") {
            this.pageNum=this.pageNum+1
            this.jiazaitext="加载中..."
            this.getProductPage()
        }
    },
    async getcategoriesList(){
        //获取商品分类
        let res =  await categoriesList()
        if (res.data.code == 200) {

            let list = res.data.data.map(v=>{
                return {
                    ...v,
                    plain:true
                }
            })
            let a = {
                name:'全部',
                plain:false
            }
            this.tabsList.push(a)
            this.tabsList.push(...list)
        }
    },
    async openTabs(){
        this.showTabs = true
    },
    changeType(index) {
        //选择商品类目
        this.tabsList.forEach(item => {
            item.plain = true
        });

        this.tabsList[index].plain = false
        this.selectType = this.tabsList[index].name
        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []
        this.categoryId = this.tabsList[index].id
        this.getProductPage()

        this.showTabs = false
    },
    checkType(type){
        //选择列表排序类型
        this.ischeck = type
        if (this.ischeck == '2' && this.ischeck == type) {
            this.checkup = !this.checkup
        }

        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []

        this.getProductPage()

    },
    changeMode(){
        this.showRow = !this.showRow
        this.Modeimg = this.showRow ? '/static/market/btn_chanpfl.png' : '/static/market/btn_chanpxx.png'
    },
    open() {
        // console.log('open');
    },
    close() {
        this.showTabs = false
        // console.log('close');
    },
}
}
</script>

<style>
.check{
    color: #46A6FF;
}
.searchBox{
    width: 750rpx;
    height: 126rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;

    display: flex;
    align-items: center;
    justify-content: space-around;

}

.scrollview{
    width: 750rpx;
    height: 850rpx;
    overflow: auto;
}
.loadmore{
    height:200rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    padding-top: 24rpx;
}

.btnList{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.checkbtnview{
    width: 206rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;

    margin: 20rpx;
}
.btnview{
    width: 206rpx;
    height: 80rpx;
    background: #F1F1F1;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 400;
    color: #666;
    line-height: 80rpx;
    text-align: center;

    margin: 20rpx;
}
.selectTypebox{
    display: flex;
    width: 200rpx;
    align-items: flex-end;
    justify-content: space-evenly;
    border-left: 1rpx solid #ccc;
    height: 40rpx;
}
</style>