<style lang="scss"> .container{ height: 100%; background:#f6f6f6; &>.btns{ flex-shrink: 0; margin:0 30rpx 30rpx; display:flex; border-radius: 30rpx; button{ width:50%; color:#999; &:first-child{ border-radius: 30rpx 0 0 30rpx; } &:nth-child(2){ border-radius:0 30rpx 30rpx 0; } &.active{ background:#10C176; color:#fff; } } } scroll-view{ flex-grow: 1; height:1rpx; .card{ margin-top:0; &>.head{ display:flex; align-items: center; border-bottom: 2rpx solid #D8D8D8; padding-bottom:20rpx; margin-bottom:20rpx; text{ &:first-child{ flex-shrink: 0; color:#10C176; margin-right:20rpx; } &:nth-child(2){ flex-grow: 1; color:#10C176; } &:nth-child(3){ flex-shrink: 0; color:#FBB65C; margin-left:10rpx; } } } &>.plant-youbian{ display:flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; text{ flex-grow: 1; font-weight: bold; display:flex; align-items: center; &.nz{ &:after{ content:"("attr(data-unit)")"; font-size:20rpx; color:#999; margin-left:6rpx; } } } } &>.company{ margin-top:12rpx; display: flex; align-items: center; justify-content: space-between; text{ &:first-child{ font-size:24rpx; color:#999; } &:nth-child(2){ color:#10C176; } } } &>.info{ display:flex; align-items: center; text{ &:first-child{ min-width:80rpx; height:40rpx; line-height: 40rpx; text-align: center; background: #10C176; border-radius: 0 20rpx 0 20rpx; color:#fff; margin-right:10rpx; } &:nth-child(3){ margin-left:10rpx; color:#FBB65C; font-size:24rpx; } &:nth-child(4){ color:#10C176; margin-left:auto; } } } &>.date,&>.warehouse{ font-size:24rpx; color:#333; margin-top:10rpx; } } } } </style> <template> <view class="container flex"> <d-search v-model="searchVal.search" @search="clean();search()"/> <view class="btns shadow bg-white"> <button class="cu-btn bg-white" :class="{active:searchVal.type=='1'}" @click="trigger('1')">农资</button> <button class="cu-btn bg-white" :class="{active:searchVal.type=='2'}" @click="trigger('2')">农产品</button> </view> <scroll-view scroll-y > <view class="card" v-for="(v,k) in list" :key="k" @click="toDetail(v)"> <template v-if="searchVal.type=='1'"> <view class="head"> <text class="plant-rili"/> <text class="over">批次号:{{v.inOutBatchNo}}</text> <text>{{v.inOutType}}</text> </view> <view class="plant-youbian"> <text class="nz" :data-unit="v.specDescribe">{{v.substanceName}}</text> </view> <view class="company"> <text>{{v.supplier}}</text> <text>{{v.number}}{{v.packgeUnit}}(共{{v.equivalentAmount}}{{v.unit}})</text> </view> <view class="date"> 操作时间:{{v.createTime}} </view> </template> <template v-else> <view class="head"> <text class="plant-rili"/> <text>批次号:{{v.inOutBatchNo}}</text> <text>{{v.inOutType}}</text> </view> <view class="info"> <text>{{v.goodsType}}</text> <text>{{v.substanceName}}</text><text>({{v.goodsDetailType}})</text> <text>{{v.number}}{{v.unit}}</text> </view> <view class="warehouse"> 所在仓库:{{v.warehouseName}} </view> <view class="date"> 操作时间:{{v.createTime}} </view> </template> </view> <u-empty v-if="list.length<=0" text="为查询到相关信息" width="70%" icon="/static/noData.png"/> </scroll-view> </view> </template> <script> import request from '@/common/request.js' export default { data(){ return{ searchVal:{ baseId: this.$store.state.plantBaseInfoId, pageNo:1, pageSize:6, type:"1"//1 农资,2 农产品 }, list:[], total:0, } }, onLoad(options){ this.search() }, methods:{ trigger(e){ if(this.searchVal.type!=e){ this.searchVal.type=e; this.clean(); this.search() } }, clean(){ this.list=[] this.total=0 this.searchVal.pageNo=1 }, async search(){ if(this.total==0 || this.list.length<this.total){ var res=await request("/api/Inventory/queryOutInRecord",{ method:"post", body: this.searchVal }) if(res.statu){ this.list=this.list.concat(res.data.records) this.total=res.data.total this.searchVal.pageNo++ if(this.list.length==this.total)uni.showToast({title:"加载完成!",icon:"none"}) }else{ uni.showModal({ title:"提示", content:res.msg||"获取出入库记录失败!", showCancel:false, }) } } }, toDetail(e){ uni.navigateTo({ url:"/pages/stock/goods_detail", success(res){ res.eventChannel.emit("detail",e) } }) }, }, onReachBottom(){ this.search() }, } </script>