<style lang="scss"> .container{ height:100%; background:#f6f6f6; .date-range{ flex-shrink: 0; display: flex; align-items: center; color:#999; picker{ width:50%; background:#fff; margin:0 30rpx; border-radius:10rpx; height:60rpx; line-height: 60rpx; text-align:center; position:relative; color:#333; &:before{ transform: rotate(90deg); position:absolute; right:10rpx; } &.noData{ color:#999; } } } scroll-view{ flex-grow: 1; height:1rpx; .card{ .info{ display:flex; align-items: center; text{ &:first-child{ flex-shrink: 0; background:#10C176; border-radius:4rpx 40rpx 4rpx 40rpx; padding:0 10rpx; box-sizing: border-box; color:#fff; height:40rpx; line-height: 40rpx; min-width:80rpx; text-align: center; font-size:20rpx; margin-right:12rpx; } &:nth-child(3){ margin-left:auto; flex-shrink: 0; color:#10C176; font-size:24rpx; font-weight: bold; } } } .people{ display:flex; align-items: center; justify-content: space-between; margin-top:20rpx; padding-top:20rpx; border-top:2rpx solid rgba(216, 216, 216, 0.3); text{ font-size:24rpx; color:#999; } } } } } </style> <template> <view class="container flex"> <d-search v-model="searchVal.search" :selectVal="searchVal.value" :list="typeList" @select="searchVal.value=$event" @search="clean();search()"/> <view class="date-range"> <picker mode="date" class="plant-youbian" :class="{noData:!searchVal.startTime}" @change="searchVal.startTime=$event.detail.value;clean();search()">{{searchVal.startTime||"请选择开始时间"}}</picker> ~ <picker mode="date" class="plant-youbian" :class="{noData:!searchVal.endTime}" @change="searchVal.endTime=$event.detail.value;clean();search()">{{searchVal.endTime||"请选择结束时间"}}</picker> </view> <scroll-view scroll-y @scrolltolower="search"> <view class="card" v-for="(v,k) in list" :key="k"> <view class="info"> <text>{{v.type}}</text> <text class="over">{{v.inputName}}</text> <text>{{v.inputTotal}}{{v.unit}}</text> </view> <view class="people"> <text>负责人:{{v.principal}}</text> <text>记录时间:{{v.time}}</text> </view> </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:{ search:"", value:"", pageNo:1, pageSize:6, plotId:"", PlantBaseInfoId: this.$store.state.plantBaseInfoId, startTime:"", endTime:"", }, total:0, list:[], typeList:[], } }, onLoad(){ this.init() this.search() }, methods:{ async init(){ var res=await request("/api/plantFarming/listFarmName") if(res.statu){ this.typeList=res.data } }, 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/plantFarming/listFarmByPlotId",{ params: this.searchVal }) if(res.statu){ this.list=this.list.concat(res.data.list) 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>