<template>
|
<view class="box">
|
<!-- 自定义导航栏 -->
|
<view class="navBarBox">
|
<!-- 状态栏占位 -->
|
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
<!-- 真正的导航栏内容 -->
|
<view style="display: flex; flex-direction: column;">
|
<view class="navBar">
|
<u-icon name="arrow-left" color="black" size="17" style="margin-left: 8px;" @click="goBack" />
|
<view class="barText">我的操作</view>
|
</view>
|
</view>
|
</view>
|
<view class="m-p-15">
|
<view class="card-list">
|
<scroll-view v-if="examList && examList.length>0" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" lower-threshold="150" @scroll="scrollView" style="height:100%">
|
<view class="paper-card" v-for="(item,index) in examList" :key="index">
|
<view class="paper-card-l">
|
<view class="dot"></view>
|
<view class="line"></view>
|
</view>
|
<view class="paper-card-box">
|
<view class="paper-card-r">
|
<view class="paper-card-t"><u-icon name="clock-fill" color="#2979ff" size="18" style="margin-right: 4px"></u-icon>{{item.updateTime}}</view>
|
<view class="paper-card-c">
|
<span style="margin-right: 4px">对</span>
|
<span style="font-weight: bold" v-if="item.hazmatBasic">{{item.hazmatBasic.companyName?item.hazmatBasic.companyName + '的':''}}{{item.hazmatBasic.name}}({{item.hazmatBasic.productSn}})</span>
|
<span style="font-weight: bold" v-if="item.productBasic">{{item.productBasic.companyName?item.productBasic.companyName + '的':''}}{{item.productBasic.name}}({{item.productBasic.productSn}})</span>
|
进行
|
<span :class="item.num>=0?'green':'red'" style="font-weight: bold;margin: 0 4px">{{item.state==0?'入库 ':item.state==1?'取用 ':item.state==2?'归还 ':item.state==3?'标签作废 ':item.state==4?'用尽登记 ':item.state==5?'销售 ':'-- '}}</span>
|
</view>
|
<view v-if="item.hazmatBasic" :class="item.num>=0?'green':'red'" style="font-size: 28rpx">
|
<span v-if="item.num > 0">+</span>{{item.num + item.hazmatBasic.unit}}
|
</view>
|
<view v-if="item.productBasic" :class="item.num>=0?'green':'red'" style="font-size: 28rpx">
|
<span v-if="item.num > 0">+</span>{{item.num + item.productBasic.unit}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
<u-empty v-else text="暂无记录" mode="list"></u-empty>
|
</view>
|
<!-- <view>-->
|
<!-- <u-button @click="loginOut" type="primary" text="退出登录" style="width: 80%" shape="circle"></u-button>-->
|
<!-- </view>-->
|
</view>
|
<!-- <tabBar :currentPagePath="page"></tabBar>-->
|
</view>
|
</template>
|
|
<script>
|
import tabBar from '../tabBarIndex.vue'
|
import {getHazmatFlowByUser, getProductFlowByUser, loginOut} from "../../../api";
|
import {getCleanRecord} from "../../../api/wearhouse";
|
export default {
|
components:{
|
tabBar
|
},
|
data() {
|
return {
|
page: 'pages/tabBar/count/productDetail',
|
statusBarHeight: '',
|
examParams: {
|
pageNum: 1,
|
pageSize: 10,
|
},
|
examList: [],
|
totalPage: 0
|
}
|
|
},
|
onLoad() {
|
console.log('跳转完成')
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
// uni.hideTabBar();
|
this.getList()
|
},
|
methods: {
|
goBack() {
|
const url = uni.getStorageSync("prevPage");
|
if(url){
|
uni.reLaunch({
|
url: url
|
});
|
} else{
|
uni.reLaunch({
|
url: '/pages/tabBar/count/count'
|
})
|
}
|
},
|
getList(){
|
getProductFlowByUser(this.examParams).then(res => {
|
if(res.code == 200) {
|
let list = res.data.list?res.data.list: [];
|
if (res.data.pageNum != 1) {
|
this.examList = this.examList.concat(list)
|
} else {
|
this.examList = res.data.list
|
}
|
this.totalPage = res.data.totalPage
|
}else{
|
uni.$u.toast(res.message)
|
}
|
})
|
},
|
|
upper(e) {
|
// console.log(e)
|
},
|
lower(e) {
|
//并且让页码+1,调用获取数据的方法获取第二页数据
|
this.examParams.pageNum++
|
//此处调用自己获取数据列表的方法
|
if (this.examParams.pageNum > this.totalPage){
|
uni.$u.toast('已加载全部数据')
|
return
|
}
|
this.getList()
|
},
|
scrollView(e) {
|
// console.log(e)
|
},
|
}
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
.box {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
}
|
.fix{
|
position: sticky;
|
top: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
z-index: 1;
|
}
|
.navBarBox .navBar {
|
background-color:#fff;
|
height: 50px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
align-items: center;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
|
}
|
.barText{
|
margin-left: -20px;
|
flex: 1;
|
/* margin-left: 20px; */
|
text-align: center;
|
width: 85%;
|
font-size: 16px;
|
/* text-align: center; */
|
font-weight: 600;
|
}
|
.navBarBox .navBar .logo {
|
width: 82rpx;
|
height: 82rpx;
|
margin-right: 10rpx;
|
}
|
.m-p-15{
|
width: 100%;
|
|
.card-list{
|
width: 100%;
|
height: calc(100vh - 85px);
|
margin: 20px 0 15px;
|
|
.paper-card{
|
width: calc(100% - 30px);
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
|
.paper-card-l{
|
width: 5%;
|
position: relative;
|
.dot{
|
width: 32rpx;
|
height: 32rpx;
|
border-radius: 50%;
|
background: #5fb734;
|
position: absolute;
|
left: 50%;
|
top: 28rpx;
|
transform: translateX(-16rpx);
|
z-index: 9;
|
box-shadow: 0 3px 8px rgba(95,183,52,.4);
|
border: 1px solid #fff;
|
}
|
.line{
|
position: absolute;
|
left: 50%;
|
top: 0;
|
width: 1px;
|
height: 100%;
|
border-left: 1px dashed #ccc;
|
}
|
}
|
&:first-of-type{
|
.paper-card-l{
|
.line{
|
position: absolute;
|
left: 50%;
|
top: 44rpx;
|
width: 1px;
|
height: calc(100% - 44rpx);
|
border-left: 1px dashed #ccc;
|
}
|
}
|
}
|
&:last-of-type{
|
.paper-card-l{
|
.line{
|
position: absolute;
|
left: 50%;
|
top: 0;
|
width: 1px;
|
height: 56rpx;
|
border-left: 1px dashed #ccc;
|
}
|
}
|
}
|
.paper-card-box{
|
width: calc(95% - 15px);
|
padding-bottom: 15px;
|
.paper-card-r{
|
width: 100%;
|
background: #fff;
|
border-radius: 20px;
|
padding: 15px;
|
box-sizing: border-box;
|
box-shadow: 0 3px 8px rgba(150,150,150,.1);
|
.paper-card-t{
|
font-size: 32rpx;
|
font-family: "PingFang SC";
|
font-weight: 800;
|
display: flex;
|
}
|
.paper-card-c{
|
font-size: 28rpx;
|
margin: 10rpx 0;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
.green{
|
margin-bottom: 5px;
|
color: #5fb734;
|
}
|
.red{
|
margin-bottom: 5px;
|
color: #ed6464
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
