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

<template>
    <view class="bg">
        <!-- 供应申报 -->
        <view class="head">
			<view class="margintb w750" >
                <view v-if="list1.length>0" class="w700">
                    <u-tabs :scrollable="false" :current="tabCurrent" :list="list1" @change="tabsChange"></u-tabs>
                </view>
			</view>
		</view>
        <view style="height: 120rpx;"></view>
        <view v-if="tabCurrent == 0">
            <DeclarationList :listdata="supplierListData" :showType="0"></DeclarationList>
        </view>
        <view v-if="tabCurrent == 1">
            <DeclarationList :listdata="myDeclareSupplierData" :showType="1"></DeclarationList>
        </view>
        
    </view>
</template>
<script>
import DeclarationList from './base/SupplyDeclarationList.vue'
import * as util from '@/pages/util/util.js'
import {supplierList,myDeclareSupplier} from '@/http/api/common.js'
export default {
    components: {
        DeclarationList,
    },
    
data() {
return {
    list1:[
        {
            name:'可申报商品',
            id:'可申报商品',
        },
        {
            name:'申报记录',
            id:'申报记录',
        },
    ],
    tabCurrent:0,
    jiazaitext:'加载更多',
    newsList:[],
    loadingType:false,
    supplierListData:[],
    myDeclareSupplierData:[],
}
},
onReachBottom() {
},
onUnload(){
},
async onLoad() {
    this.getSupplierList()
    this.getmyDeclareSupplier()
},
async onShow(){
    
},
methods: {
    //tab第一级页签选择
    tabsChange(e) {
        console.log('22222',e);
        this.tabCurrent = e.index;
    },
    
    async getSupplierList(){
        let res = await supplierList()
        if (res.data.code == 200) {
            this.supplierListData = res.data.data?.rows || []
        }
    },
    async getmyDeclareSupplier(){
        let res = await myDeclareSupplier({
            pageNum:100
        })
        if (res.data.code == 200) {
            this.myDeclareSupplierData = res.data.data?.rows || []
        }
    },
}
}
</script>

<style>
.bg{
    background-color: #F6F6F6;
    width: 100vw;
    height: 100vh;
}
.head{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    opacity: 1;
    height: 120rpx;
    margin-bottom: 32rpx;

    position: fixed;
    z-index: 1;
}
.u-notice-bar{
    width: 90vw;
    margin: 0 auto;
}
.u-search{
    width: 702rpx;
    margin: 0 auto;
}
.margintb{
    margin: 16rpx 0;
    display: flex;
    align-items: center;
}
.list2{
    display: flex;
    justify-content: flex-start;
    width: 90vw;
    overflow-x: auto;  
    scroll-snap-type: x mandatory;  
    scroll-padding: 50rpx; /* 为滚动容器提供内边距，确保内容不会紧贴边缘 */ 
}


.content{
    width: 100vw;
    background-color: #FFFFFF;
    padding: 30rpx 0 30rpx 0;
}
.box{
    display: flex;
    margin: 20rpx auto;
    justify-content: flex-start;
    width: 90vw;
    height: 160rpx;
}
.box_img{
    width: 224rpx;
    height: 150rpx;
    border-radius: 16rpx;
    background-color: #999999;
}
.box_right{
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.box_title{
    width: 454rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.box_type{
    display: flex;
    justify-content: space-between;

    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
}


.checkbtnview{
    width: 160rpx;
    height: 64rpx;
    background: #DEEEFC;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 400;
    color: #46A6FF;
    line-height: 64rpx;
    text-align: center;
    
    margin-right: 20rpx;
    flex: 0 0 auto;
    scroll-snap-align: start;

}
.btnview{
    width: 160rpx;
    height: 64rpx;
    background: #F1F1F1;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    line-height: 64rpx;
    text-align: center;
    margin-right: 20rpx;
    flex: 0 0 auto;
    scroll-snap-align: start;

}

.btnBox{
    width: 750rpx;
    height: 100rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
}
.btn{
    width: 702rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    opacity: 1;

    font-weight: 500;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
}

</style>