<template> <view class="container"> <VNavigationBar style="position: relative;z-index: 99;" backgroundColor="#fff" title-color="#000" title="申请单处理"></VNavigationBar> <view class="body"> <view class="tabList"> <view v-for="(item, index) in tabList" :key="index" :class="{actived: item.id === activeKey}" class="tabItem" @click.stop="changeTabFun(item.id)"> {{ item.title }} <view v-if="activeKey === item.id" class="activeLine"></view> </view> </view> <view class="orderList"> <scroll-view scroll-y="true" style="height: 100%" class="itemContent" @scrolltolower="onReachBottomCus" refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered"> <order-card v-for="(item, index) in orderList" :titleText="(0==activeKey || 1==activeKey)?'配件申请单':(2==activeKey)?'领料单':'退料单'" :key="index" :order="item" @childEvent="viewDetail" ></order-card> <view style="text-align: center" v-if="orderList.length==0"> <image class="" src="@/static/images/nothing.png" ></image> </view> </scroll-view> </view> </view> </view> </template> <script> import VNavigationBar from '@/components/VNavigationBar.vue' import tabBarVue from '@/components/tabBar/tabBar.vue' import OrderCard from "@/components/applyCard.vue"; import request from '@/utils/request'; import {getUserInfo} from '@/utils/auth'; export default { components: { OrderCard, tabBarVue, VNavigationBar }, data() { return { activeKey: 0, pageNo: 1, pageSize: 10, total: 0, //下来刷新状态 isTriggered:false, tabList: [ { id: 0, title: '已提交' }, { id: 1, title: '未通过' }, { id: 2, title: '待领料' }, { id: 3, title: '待退料' }, ], orderList: [ // { // carNo: "川E795C0", // createTime: '2024-10-20 12:00', // ticketsStatus: '05', // remark: '大厦预订奴化时间内丢进爱上牛津阿斯顿你' // }, // { // carNo: "川E795C1", // createTime: '2024-10-20 12:00', // ticketsStatus: '02', // remark: '大厦预订奴化时间内丢进爱上牛津阿斯顿你' // }, // { // carNo: "川E795C2", // createTime: '2024-10-20 12:00', // ticketsStatus: '01', // remark: '大厦预订奴化时间内丢进爱上牛津阿斯顿你' // } ], userInfo:null, }; }, onLoad(){ this.userInfo = getUserInfo() console.log(this.userInfo) }, onShow(){ this.onRefresherrefresh() }, methods:{ changeTabFun(id) { this.activeKey = id this.onRefresherrefresh() }, /** * 上滑加载数据 */ onReachBottomCus() { //判断 如果页码*页容量大于等于总条数,提示该页数据加载完毕 if (this.pageNo * this.pageSize >= this.total) { uni.$u.toast('没有更多数据了') return } //页码+1,调用获取数据的方法获取第二页数据 this.pageNo++ //此处调用自己获取数据列表的方法 this.getOrderList() }, /** * 下拉刷新数据 */ onRefresherrefresh(){ this.isTriggered = true this.pageNo = 1 this.total = 0 this.orderList = [] this.getOrderList() }, /** * 查看申请单详情 */ viewDetail(item){ if(0==this.activeKey || 1==this.activeKey){ //配件申请单详情 uni.navigateTo({ url: '/pages-repair/applyList/todoDetail?viewType=apply&id='+item.id }) }else if(2==this.activeKey){ //领料单详情 uni.navigateTo({ url: '/pages-repair/applyList/todoDetail?viewType=receive&canOperate=true&id='+item.id }) }else { //退料单详情 uni.navigateTo({ url: '/pages-repair/applyList/todoDetail?viewType=back&canOperate=true&id='+item.id }) } }, /** * 查数据 */ getOrderList(){ let url="" let params = { pageNo:this.pageNo, pageSize:this.pageSize } if(0==this.activeKey){ //已提交的配件申请单 url = "/admin-api/repair/tw/page" params.type="01" }else if(1==this.activeKey){ //未通过的配件申请单 url = "/admin-api/repair/tw/page" params.type="01" params.status="05" }else if(2==this.activeKey){ //待确认的领料单 url = "/admin-api/repair/so/page" params.soType = "02" params.userId = this.userInfo.id params.soStatus = "04" }else if(3==this.activeKey){ //待确认的退料单 url = "/admin-api/repair/so/page" params.soType = "04" params.userId = this.userInfo.id params.soStatus = "07" } request({ url: url, method: 'get', params:params }).then((res) => { if (res.code == 200) { if(res.data.records.length > 0){ if (this.pageNo != 1) { this.orderList = this.orderList.concat(res.data.records) } else { this.orderList = res.data.records } } //将获取的总条数赋值 this.total = res.data.total this.isTriggered = false } }) } } } </script> <style lang="less"> .container { height: 100%; background: #F3F5F7; display: flex; flex-direction: column; color: #333333; .body { flex: 1; height: 0; padding: 24rpx 32rpx; overflow: auto; } .tabList { background: #FFFFFF; border-radius: 12rpx 12rpx 12rpx 12rpx; display: flex; align-items: center; padding: 0 40rpx; .tabItem { padding: 30rpx; flex: 1; //z-index: 9999999; text-align: center; position: relative; font-size: 28rpx; &.actived { color: #0174F6; } .activeLine { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 96rpx; height: 6rpx; background: #0174F6; border-radius: 4rpx 4rpx 0rpx 0rpx; } } } .orderList { //padding: 30rpx 0; padding-top: 10rpx; height: calc(100% - 90rpx); display: flex; flex-direction: column; row-gap: 20rpx; .stateImg { } } } </style>