<style lang="scss"> .container{ background:#F6F6F6; height:100%; scroll-view{ flex-grow: 1; height:1rpx; border-bottom:1rpx solid transparent; .card.item{ display:flex; margin-top:0; &>.u-transition{ flex-shrink: 0; margin-right:24rpx; } &>.info{ flex-grow: 1; width:1rpx; .title{ display:flex; align-items: center; text{ &:first-child{ flex-grow: 1; font-weight: bold; } &:nth-child(2){ color:#333; } } } .code,.area{ color:#999; font-size:24rpx; margin-top:14rpx; } .data{ margin-top:16rpx; display:flex; align-items: center; text{ &:first-child{ color:#10C176; font-size:32rpx; font-weight: bold; &:after{ content:"亩"; } } &:nth-child(2){ color:#F8CB36; font-size:24rpx; margin-left:16rpx; } } } .btns{ display: flex; justify-content: space-between; align-items: center; border-top:2rpx solid #D8D8D8; margin:20rpx 0 -30rpx 0; text{ color:#999; font-size:24rpx; padding:16rpx 0 30rpx 0; &:before{ color:#10C176; margin-right:8rpx; } } } } } } } </style> <template> <view class="container flex"> <d-navbar style="--bg:#10C176;--c:#fff;" text="地块管理"> <text class="plant-xinjian" slot="right" @click="toInfo"/> </d-navbar> <d-search v-model="searchVal.search" @search="clean();search()"/> <scroll-view scroll-y @scrolltolower="search"> <view class="card item" v-for="(v,k) in list" :key="k" @click="$u.route({url:'pages/massif/detail',params:{id:v.id}})"> <u-image width="220rpx" height="220rpx" radius="16rpx" :src="`${host}/${v.image}`" mode="aspectFill"> <text slot="error" style="font-size:65rpx" class="plant-xiaopangchetupianjiazaishibai"/> </u-image> <view class="info"> <view class="title"><text class="over">{{v.plotName}}</text> <text class="plant-youbian"/></view> <view class="code">编号:{{v.plotNumber}}</view> <view class="area">地块面积:{{v.realityArea}}亩</view> <view class="data"> <text>{{v.usedArea}}</text> <text>(在用面积)</text> </view> <view class="btns" @click.stop=''> <text class="plant-xiugai" @click.stop="reDetail(v.id)">修改</text> <text class="plant-shanchu" @click.stop="del(k)">删除</text> <text class="plant-xinzeng" @click.stop="$u.route({url:'pages/massif/mana/index',params:{id:v.id}})">地块管理</text> </view> </view> </view> <u-empty v-if="list.length==0" text="为查询到相关信息" width="70%" icon="/static/noData.png"/> </scroll-view> </view> </template> <script> import request,{host} from '@/common/request' export default{ data(){ return{ host:host('imgUrl'), searchVal:{ search:"", pageNo:1, pageSize:5, }, list:[], total:0, } }, watch:{ //监听首页切换基地 "$store.state.plantBaseInfoId"(n){ this.clean() this.search() }, }, onLoad(){ this.search() }, methods:{ toInfo(){ uni.navigateTo({ url:"/pages/massif/info", events:{update:()=>{ this.clean();this.search() }} }) }, //修改详情 reDetail(id){ uni.navigateTo({ url:`/pages/massif/info?id=${id}`, events:{update:()=>{ this.clean();this.search() }} }) }, clean(){ this.searchVal.pageNo=1 this.total=0 this.list=[] }, async search(){ if(this.total==0 || this.list.length<this.total){ var res=await request("/api/plantPlot/list",{ params: { ...this.searchVal, companyId:this.$store.getters.userInfo.companyId, plantBaseInfoId:this.$store.state.plantBaseInfoId, } }) 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, }) } } }, async del(index){ if((await uni.showModal({ title:"提示", content:"确定删除?" }))[1].confirm){ var res=await request("/api/plantPlot/deletePlantPlotInfo",{ method:"DELETE", params:{id:this.list[index].id} }) if(res.statu){ if(this.list.length>6){ this.list.splice(index,1) this.total-- }else{ this.clean() this.search() } }else{ uni.showModal({ title:"提示", content:res.msg||"删除失败!", showCancel:false, }) } } }, }, } </script>