xmhjc-applet/supplierPages/pages/supplier/supplyMarket.vue

<!-- 供应市场 -->
<template>
    <view style="background: #f6f6f6;height: 100vh;">
        <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 @click="changeMode">
                <u--image width="48rpx" height="48rpx" :src="Modeimg" ></u--image>
            </view> -->
        </view>
        <view class="margintb tabwiew" >
            <view>
                <u-tabs keyName='subIdName' @click="changeMode" :list="list1"></u-tabs>
            </view>
            <view style="font-size: 32rpx;width: 100%;" 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 class="flex" style="align-items: center;" @click="checkType('3')" :class="ischeck=='3'?'check':''">
                    数量<view>
                            <u-icon name="arrow-up-fill" :color="checkup2?'#46A6FF':'#ccc'" size="8"></u-icon>
                            <u-icon name="arrow-down-fill" :color="!checkup2?'#46A6FF':'#ccc'" size="8"></u-icon>
                        </view>
                </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>
        </view>
        <u-popup :closeable='true' :round="10" :show="showTabs" @close="close" @open="open">
            <view class="popupView">
                <view class="scrollview">
                    <view class="popupTitle">品类</view>
                    <view class="btnList" >
                        <view @click="changeType(index)" 
                        :class="item.plain ?'btnview': 'checkbtnview'" 
                        v-for="(item,index) in tabsList" :key="index">
                            {{ item.dictValue }}
                        </view>
                    </view>
                    <view class="popupTitle">价格区间</view>
                    <view class="popupInput">
                        <u--input
                            type="number"
                            placeholder="最低价"
                            v-model="minNum"
                            maxlength="10"
                        ></u--input>
                        -
                        <u--input
                            type="number"
                            placeholder="最高价"
                            v-model="maxNum"
                            maxlength="10"
                        ></u--input>
                    </view>
                    <view class="popupTitle">数量区间</view>
                    <view class="popupInput">
                        <u--input
                            type="number"
                            placeholder="1"
                            v-model="minPrice"
                            maxlength="10"
                        ></u--input>
                        -
                        <u--input
                            type="number"
                            placeholder="9999"
                            v-model="maxPrice"
                            maxlength="10"
                        ></u--input>
                    </view>
                    
                </view>
                <view class="btnbox" style="left: 24rpx;">
                    <view @click="resetpopup" class="btn">
                        重置
                    </view>
                    <view @click="popupsubmit()" class="btn2">
                        确定
                    </view>
                </view>
            </view>
        </u-popup>
        <view v-if="tabCurrent == '0'">
            <!-- 供应商列表 -->
            <marketItem :listdata="vendorList" :showType="0"></marketItem>
        </view>
        <view v-if="tabCurrent == '1'">
            <!-- 商品列表 -->
            <marketItem :listdata="supplierList" :showType="1"></marketItem>
        </view>
        
        <view class="loadmore" @click="loadmore()">
            {{jiazaitext}}
        </view>
    </view>
</template>
<script>
import marketItem from './base/marketItem.vue'

import {vendorListOfDeclare,supplierListOfProduct,getCategoryList} from '@/http/api/common.js'
export default {
components: {
    marketItem
},
data() {
    return {
        current:'commodity',
        tabCurrent:'0',
        checkup:true,
        checkup2:true,
        showTabs:false,
        loadingType:false,
        ischeck:'1',
        searchword:'',
        minNum:'',
        maxNum:'',
        maxPrice:'',
        minPrice:'',
        selectType:'筛选',
        Modeimg:'/static/market/btn_chanpxx.png',
        vendorList:[],//供应商列表
        supplierList:[],//产品列表
        tabsList:[],
        tabsItem:[],
        pageNum:1,
        jiazaitext:'加载更多',
        categoryId:'',
        list1:[
        {
            subIdName: '供应商',
            key:'0'
        },
        {
            subIdName: '商品',
            key:'1'
        }
    ],
    }
},
async onLoad() {
    
    // 获取商品分类
    await this.getcategoriesList()
},
async onShow(){
    //每次切换页签初始化请求页签
    this.pageNum = 1
    this.vendorList = []
    this.supplierList = []
    //获取商品列表
    await this.getProductPage()
},
onReachBottom() {
    this.loadmore()
},
methods: {
    resetpopup(){
        this.changeType(0)
        this.minNum=''
        this.maxNum=''
        this.maxPrice='' 
        this.minPrice=''
    },
    async popupsubmit(){
        this.pageNum = 1
        this.vendorList = []
        this.supplierList = []
        
        await this.getProductPage()
        this.showTabs = false
    },
    async getProductPage(categoryId=''){
        if (this.loadingType) {
            //加载中禁止重复加载
            return
        }
        this.loadingType=true
        let data = {
            priceSort:'ace', //价格排序 ace 小到大；desc 大到小
            numSort:'ace', //数量排序 ace 小到大；desc 大到小

            minNum:this.minNum, //最小价格
            maxNum:this.maxNum, //最大价格

            maxPrice:this.maxPrice, 
            minPrice:this.minPrice, 

            name:this.searchword, //标题，副标题搜索
            pageSize:10,
            pageNum:this.pageNum,
            category:this.categoryId //类目id
        }

        if (this.ischeck == '1') {
            //综合
            data.priceSort = 'ace'
            data.numSort = 'ace'
        }else if (this.ischeck == '2') {
            //价格
            data.priceSort = this.checkup ? 'ace' : 'desc'
        } else {
            //数量
            data.numSort = this.checkup2 ? 'ace' : 'desc'
        }


        if (this.tabCurrent == '0') {
            //供应商
            await this.getvendorList(data)
        }else{
            //商品
            await this.getsupplierList(data)
        }

       
    },
    async getvendorList(data){
        //供应商
        let res =  await vendorListOfDeclare(data)
        if (res.data.code == 200) {
            let newrows = res.data.data?.rows || []

            this.vendorList.push(...newrows)
            
            if(this.vendorList.length!=res.data.data.total){
                this.jiazaitext="加载更多"
            }else{
                this.jiazaitext="已经到底"
            }
        }
        this.loadingType=false
    },
    async getsupplierList(data){
        //商品
        let res =  await supplierListOfProduct(data)
        if (res.data.code == 200) {
            let newrows = res.data.data?.rows || []

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

        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 getCategoryList()
        if (res.data.code == 200) {

            let list = res.data.data.map(v=>{
                return {
                    ...v,
                    plain:true
                }
            })
            let a = {
                dictValue:'全部',
                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.vendorList = []
        this.supplierList = []
        this.categoryId = this.tabsList[index]?.dictKey || ''
            // this.getProductPage()

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

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

        this.getProductPage()

    },
    async changeMode(item){
        console.log(item.key);
        this.tabCurrent = item.key;

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

        await this.getProductPage()
    },
    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;
}
.margintb{
    margin: 16rpx 0;
}
.tabwiew{
    background-color: white;
    width: 100vw;
    height: 150rpx;
    display: flex;
    font-size: 32rpx;
    flex-direction: column;
    align-items: center;
}
.btnbox{
    display: flex;
    position: fixed;
    bottom: 20rpx;
}
.btn{
    width: 340rpx;
    height: 80rpx;
    background: #ffffff;
    border: 1rpx solid #dddddd;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #46A6FF;
    line-height: 80rpx;
    text-align: center;
}
.btn2{
    width: 340rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
    margin-left: 10rpx;
}
.popupTitle{
    font-size: 32rpx;
    font-weight: 700;
    text-align: left;
    color: #000000;
    margin-left: 24rpx;
}
.popupInput{
    width: 90%;
    margin: 24rpx auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}
</style>