<style lang="scss"> .container{ height: 100%; background:#F6F6F6; &>map{ flex-shrink: 0; height:348rpx; width:100%; margin-bottom:-9rpx; } &>.u-tabs{ flex-shrink: 0; background:#fff; box-shadow: 0 6rpx 12rpx 2rpx rgba(0,0,0,0.1); &/deep/ .u-tabs__wrapper__nav__item__text{ font-size:28rpx; } } swiper{ flex-grow: 1; height:1rpx; } } </style> <template> <view class="container flex"> <map id="amap"/> <u-tabs :list="tabs" :current="tabIndex" activeStyle="color:#10C176;" lineColor="#10C176" lineWidth="50" :scrollable="false" @change="plantId='';tabIndex=$event.index"/> <swiper :current="tabIndex" @change="tabIndex=$event.detail.current"> <swiper-item> <plant-plan :plotId="plotId" @trigger="plantId=$event" @farm="farm_plantId=$event"/> </swiper-item> <swiper-item> <farmRecord :plantId="farm_plantId" :plotId="plotId" ref="farmRecord"/> </swiper-item> <swiper-item> <recovery :plotId="plotId" :plantId="plantId" ref="recovery" @trigger="recoveryId=$event"/> </swiper-item> <swiper-item> <transactions :recoveryId="recoveryId" :plotId="plotId" ref="transactions"/> </swiper-item> </swiper> </view> </template> <script> import plantPlan from './plantPlan.vue' import farmRecord from './farmRecord.vue' import recovery from './recovery.vue' import transactions from './transactions.vue' import request from '@/common/request.js' import {computeArea} from '@/common/utils' export default { components:{plantPlan,farmRecord,recovery,transactions}, data(){ return{ tabIndex:0, tabs:[ {name:"种植计划"}, {name:"农事操作"}, {name:"采收记录"}, {name:"交易记录"}, ], plotId:"", plantId:"", farm_plantId:"", recoveryId:"", plotName:"", maps:null, } }, watch:{ plantId(n){ this.$nextTick(()=>{ this.$refs.recovery.reSearch() }) if(n)this.tabIndex=2; }, farm_plantId(n){ this.$nextTick(()=>{ this.$refs.farmRecord.reSearch() }) if(n)this.tabIndex=1; }, recoveryId(n){ this.$nextTick(()=>{ this.$refs.transactions.reSearch() }) if(n)this.tabIndex=3 }, tabIndex(n,o){ if(n!=2)this.plantId=""; if(n!=1)this.farm_plantId=""; if(n!=3)this.recoveryId=""; } }, onLoad(options){ this.plotId=options.id }, async onReady(){ /* #ifdef APP-PLUS */ var amap=uni.createMapContext("amap",this) var points=await this.getDetail() this.maps=amap.$getAppMap() this.maps.setMapType(plus.maps.MapType.MAPTYPE_SATELLITE) if(points.length>0){ var bound=computeArea(points) this.maps.centerAndZoom(new plus.maps.Point(bound.center.longitude, bound.center.latitude),10) var polygon=new plus.maps.Polygon( points.map(v=>new plus.maps.Point(v.longitude, v.latitude)) ) polygon.setLineWidth(2) polygon.setStrokeColor("#10C176") polygon.setFillColor("#10C176") polygon.setFillOpacity(0.3) this.maps.addOverlay(polygon) //地名标签 var marker=new plus.maps.Marker(new plus.maps.Point(bound.center.longitude, bound.center.latitude)); marker.setLabel(this.plotName) this.maps.addOverlay(marker) }else{ this.maps.getUserLocation((state,point)=>{ if(state==0){ this.maps.centerAndZoom(new plus.maps.Point(point.longitude, point.latitude),10) }else{ this.maps.centerAndZoom(new plus.maps.Point(102.712251,25.040609),10) } }) } /* #endif */ }, methods:{ async getDetail(){ var res=await request('/api/plantPlot/queryById',{ params:{id:this.plotId} }) if(res.statu){ this.plotName=res.data.plotName return (res.data.longitude||'').split(";").map(v=>{ var point=v.split(",") if(point.length==2){ return {longitude:point[0],latitude:point[1]} } return null }).filter(v=>v) }else{ uni.showModal({ title:"提示", content:res.msg||"获取地块详情失败!", showCancel:false, }) return[] } }, } } </script>