shanxian-work-app/pages/manage/scanRecord.vue

<template>
	<!-- <text>扫码位置</text> -->
	<view class="scanRecord">
	  <map id="map" :longitude="longitude" :latitude="latitude" scale="14" :markers="markers" v-if="!not"></map>
	  <view class="scan">
	    <view class="scanDate" v-for="(item,index) in scan" :key="index" v-bind:data-idx="index" @click="current">
	      <text >扫码时间：{{item.time}}</text>
	    </view>
	  </view>
	   <view class="noData" v-if="not">
	    <image src="http://resource.weilaibike.com/none.png"></image>
	    <view>暂无相关数据~</view>
	  </view>
	</view>
</template>

<script>
	var app=getApp()
	export default{
		data(){
			return{
				 scan: [],
				    longitude: '',
				    latitude: '',
				    markers: [],
				    not:false,
			}
		},
		onLoad(options) {
			  uni.showLoading({
			      title: '加载中...',
			    })
			    let data = {
			      bike_id: options.id
			    }
			    app.request('bike/sweepCodeLocation', data, 'POST').then(res => {
			      uni.hideLoading();
			      if (res.statusCode == 200) {
			        if (res.data.length == 0) {
			          this.setData({
			            not:true
			          })
			        } else {
			         
			          let arr = res.data;
			          for (var i = 0; i < arr.length; i++) {
			            arr[i].iconPath = 'http://resource.weilaibike.com/common/start-location-mark-old.png';
			            arr[i].width = 30;
			            arr[i].height = 30;
			            arr[i].zIndex = 1111;
			            arr[i].latitude = arr[i].location[1];
			            arr[i].longitude = arr[i].location[0];
			          }
			         
			           this.markers=arr,
			            this.scan=res.data,
			            this.longitude=arr[0].location[0],
			            this.latitude=arr[0].location[1]
			        
			        }
			      }
			    })
		},
		methods:{
			 //获取当前扫码位置
			  current(e) {
			
			    let nowPosition = this.markers
			    let idx = e.currentTarget.dataset.idx;
			    for (var i = 0; i < nowPosition.length; i++) {
			      nowPosition[i].iconPath =
			        "http://resource.weilaibike.com/common/start-location-mark-old.png";
			    }
			    nowPosition[idx].iconPath = "http://resource.weilaibike.com/common/end-location-mark-old.png";
			   
			      this.markers=nowPosition
			   
			  },
			
		}
		
	}
</script>

<style>
	page {
	  background: #eee;
	}
	
	map {
	  width: 100%;
	  height: 45%;
	  position: fixed;
	}
	
	.scan {
	  padding-top: 600rpx;
	}
	.scan .scanDate {
	  background: #fff;
	  width:92%;
	  margin:14rpx auto;
	  height:90rpx;
	  line-height:90rpx;
	  border-radius: 10rpx;
	}
	.scan .scanDate text{
	  margin-left:25rpx;
	  font-size:28rpx;
	  color:#4d4d4d;
	}

</style>