<style lang="scss" scoped> .recovery{ height:100%; display:flex; flex-direction: column; &>.dateRange{ flex-shrink: 0; display: flex; align-items: center; margin:30rpx; text{ &.plant-youbian{ display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; background:#fff; height:48rpx; font-size:24rpx; color:#333; border-radius: 8rpx; padding:0 10rpx; min-width:226rpx; box-sizing: border-box; &:before{ transform: rotate(90deg); } &.noDate{ color:#999; } } &:nth-child(2){ color:#999; padding:0 28rpx; } } } scroll-view{ flex-grow: 1; height:1rpx; .card{ margin-top:0; display:flex; .u-transition{ flex-shrink: 0; margin-right:20rpx; } .detail{ flex-grow: 1; width:1rpx; .name{ display: flex; justify-content: space-between; margin-bottom:15rpx; text{ &:first-child{ font-weight: bold; flex-grow: 1; } &:nth-child(2){ flex-shrink: 0; font-weight: bold; font-size:32rpx; &:after{ content:attr(data-unit); font-weight: normal; } } } } .info{ font-size: 24rpx; color:#999; text:nth-child(2){ margin-left:20rpx; } } } } } .u-popup{ flex:0; } } </style> <template> <view class="recovery"> <view class="dateRange"> <text class="plant-youbian" :class="{noDate:!searchVal.startTime}" @click="dateType='startTime';show=true">{{searchVal.startTime||"请选择开始时间"}}</text> <text>~</text> <text class="plant-youbian" :class="{noDate:!searchVal.endTime}" @click="dateType='endTime';show=true">{{searchVal.endTime||"请选择结束时间"}}</text> </view> <scroll-view scroll-y @scrolltolower="search"> <view class="card" v-for="(v,k) in list" :key="k"> <u-image width="90rpx" height="90rpx" radius="6rpx" mode="aspectFill" :src="`${host}/${v.images}`"> <text slot="error" style="font-size:45rpx;" class="plant-xiaopangchetupianjiazaishibai"/> </u-image> <view class="detail"> <view class="name"> <text class="over">{{v.plantName}}</text> <text data-unit="kg">{{v.harvestNum}}</text></view> <view class="info"> <text>负责人:{{v.principal}}</text> <text>采收时间:{{v.harvestTime}}</text> </view> </view> </view> <u-empty v-if="list.length==0" text="为查询到相关信息" width="70%" icon="/static/noData.png"/> </scroll-view> <u-datetime-picker :show="show" mode="date" closeOnClickOverlay @close="show=false" @cancel="show=false" :value="date" @confirm="searchVal[dateType]=new Date($event.value).format('yyyy-MM-dd');clean();search();show=false"/> </view> </template> <script> import request,{host} from '@/common/request' export default { name:"recovery", props:{ plotId:{ type:String, defaylt:"" }, }, data(){ return{ show:false, dateType:"startTime", host:host("imgUrl"), searchVal:{ pageNo:1, pageSize:5, startTime:"", endTime:"", }, list:[], total:0, } }, computed:{ date(){ return this.searchVal[this.dateType] || new Date().format('yyyy-MM-dd') } }, created(){ this.search() }, methods:{ reSearch(plantId){ this.$nextTick(()=>{ this.list=[] this.total=0 this.searchVal.pageNo=1 this.search(plantId) }) }, clean(){ this.list=[] this.total=0 this.searchVal.pageNo=1 }, async search(plantId=''){ if(this.total==0||this.list.length<this.total){ var res=await request("/api/plantHarvest/list",{ params:{ ...this.searchVal, plotId:this.plotId, plantScheduleId: plantId, } }) 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, }) } } }, } } </script>