|
|
<template> <view> <view class="tabs"> <u-tabs :list="tab_list" :is-scroll="true" :current="current" bg-color="#f6f6f6" active-color="#11D189" @change="tabsChange"></u-tabs> </view> <swiper :style="{height: 'calc('+ windowHeight +'px - 110rpx)', width: '750rpx'}" :current="current" @change="swiperChange"> <swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex"> <scroll-view class="lf-w-100 lf-h-100 lf-p-l-32 lf-p-r-32 lf-border-box" :scroll-y="true" :refresher-enabled="true" refresher-background="#f6f6f6" @scrolltolower="scrolltolower" :refresher-triggered="tabItem.isRefresher" @refresherrefresh="onRefresherrefresh"> <view class="card" v-for="(item, index) in tabItem.list" :key="item.id" @click="$url('/pages/purchase/detail?p_sn='+ item.p_sn)"> <view class="lf-row-between item" v-if="item.supplier.supplier_name"> <view class="lf-color-gray">供应商</view> <view class="lf-color-black">{{ item.supplier.supplier_name }}</view> </view> <view class="lf-row-between item" v-if="item.batch_sn"> <view class="lf-color-gray">批次号</view> <view class="lf-color-black">{{item.batch_sn}}</view> </view> <view class="lf-row-between item" v-if="item.p_sn"> <view class="lf-color-gray">订单号</view> <view class="lf-color-black">{{item.p_sn}}</view> </view> <view class="lf-row-between item" v-if="item.send_time"> <view class="lf-color-gray">发单时间</view> <view class="lf-color-black">{{ item.send_time }}</view> </view> <view class="lf-row-between item" v-if="item.deadline"> <view class="lf-color-gray">收货时间</view> <view class="lf-color-black">{{ item.deadline }}</view> </view> <view class="lf-row-between item" v-if="item.receive_time"> <view class="lf-color-gray">送达时间</view> <view class="lf-color-black">{{ item.receive_time }}</view> </view> <view class="lf-row-between item" v-if="item.cate_number"> <view class="lf-color-gray">商品种类</view> <view class="lf-color-black">{{item.cate_number}}类</view> </view> <view class="lf-row-between item" v-if="item.state"> <view class="lf-color-gray">订单状态</view> <view :class="stateClass(item.state)">{{ item.state }}</view> </view> </view> <view class="loading-more"> <text v-if="tabItem.list.length" :class="{'loading-more-text': tabItem.loading_class}">{{ tabItem.loading_text }}</text> <lf-nocontent v-else class="lf-m-t-50"></lf-nocontent> </view> </scroll-view> </swiper-item> </swiper> </view></template>
<script> export default { data(){ let _public = { loading_class: true, loading_text: '正在加载中...', page: 1, isPage: true, isRefresher: false }; return { current: 0, tab_list: [{ name: '全部', list: [], ..._public },{ name: '未发单', list: [], ..._public },{ name: '待接单', list: [], ..._public },{ name: '备货中', list: [], ..._public },{ name: '已发货', list: [], ..._public },{ name: '已入库', list: [], ..._public }], page_size: 10, windowHeight: 0 } }, computed: { stateClass(){ return function(val){ let class_name = { '待发单': 'quoted-price', '待审核': 'quoted-price', '待接单': 'quoted-price', '备货中': 'wait', '已发货': 'wait', '已收货': 'passed', '已入库': 'passed', '已退单': 'refuse', '已撤销': 'refuse' } return class_name[val]; } } }, onLoad(){ this.windowHeight = uni.getSystemInfoSync().windowHeight; this.getData(); }, methods: { // 获取数据
getData(options){ let item = this.tab_list[this.current]; // let tabType = 0
// if(this.current == 2) {
// tabType = 3
// }else if(this.current == 3){
// tabType = 4
// }else if(this.current == 4){
// tabType = 5
// }else if(this.current == 5){
// tabType = 7
// }else {
// tabType = this.current
// }
this.$http(this.API.API_CANTEEN_PURCHASEORDERLIST, { page: item.page, page_size: this.page_size, state: this.current || '' }).then(res => { console.log("getData", res); let list = res.data.list || {}; let isPage = this.$isRight(list.next_page_url); item.isPage = isPage; if(!isPage){ item.loading_class = false; item.loading_text = '已加载全部数据~'; } if(options && options.refresh){ item.isRefresher = false; } if(item.page == 1){ item.list = list.data; }else{ item.list.push(...list.data); } }).catch(err => { if(options && options.refresh){ item.isRefresher = false; } }) }, // 切换tabs
tabsChange(current){ this.current = current; if(this.tab_list[this.current].list.length <= 0){ this.getData(); } }, // 切换swiper
swiperChange(event){ this.current = event.detail.current; if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
if(this.tab_list[this.current].list.length <= 0){ this.getData(); } }, // 页面滚动到底部，触发分页
scrolltolower(){ let item = this.tab_list[this.current]; if(item.isPage){ item.page++; this.getData(); } }, // 下拉刷新
onRefresherrefresh(){ this.$u.throttle(() => { let item = this.tab_list[this.current]; item.isRefresher = true; item.page = 1; item.isPage = true; item.loading_class = true; item.loading_text = '正在加载中...'; item.list = []; this.getData({refresh: true}); }, 200); } } }</script>
<style> page{ background-color: #f6f6f6; }</style><style lang="scss" scoped="scoped"> .card{ width: 100%; height: max-content; background-color: #FFFFFF; border-radius: 20rpx; padding: 0 20rpx; box-sizing: border-box; margin-bottom: 30rpx; .item{ padding: 20rpx 0; box-sizing: border-box; width: 100%; border-bottom: 1rpx solid #E5E5E5; font-size: 28rpx; &:last-child{ border-bottom: none; } } // 已报价，等待审核
.quoted-price{ color: #777777; } // 等待报价
.wait{ color: #1833F2; } // 已通过审核
.passed{ color: #0BCE5F; } // 报价被拒绝
.refuse{ color: #FF0000; } }</style>
|
