单设备代驾搜索记录保存

trip/chooseAddress/index.vue

@@ -3,24 +3,25 @@
 		<view class="search-box">
 			<view class="input-box">
 				<view class="city">
-					{{city}}
+					{{ city }}
 				</view>
-				<input class="address-input" focus :placeholder="type == 'start'?'您从哪里上车':'您想去哪里'" type="text" v-model="address" />
+				<input class="address-input" focus :placeholder="type == 'start' ? '您从哪里上车' : '您想去哪里'" type="text"
+					v-model="address" />
 			</view>
 		</view>
-		
+
 		<view class="search-content">
-			<view class="item" v-for="(item,index) in list" :key="index" @click="chooseAddress(item)">
+			<view class="item" v-for="(item, index) in list" :key="index" @click="chooseAddress(item)">
 				<view class="info">
 					<view class="address">
-						{{item.title}}
+						{{ item.title }}
 					</view>
 					<view class="desc">
-						{{item.address}}
+						{{ item.address }}
 					</view>
 				</view>
 				<view class="distance">
-					{{item._distance | filterDistance}}
+					{{ item._distance | filterDistance }}
 				</view>
 			</view>
 		</view>
@@ -28,78 +29,103 @@
 </template>
 
 <script>
-	import {debounce} from '@/utils/tool.js'
-	// 腾讯地图
-	var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
-	var qqmapsdk = new QQMapWX({
-		key: 'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'})
-	export default {
-		data() {
-			return {
-				longitude: 0,
-				latitude: 0,
-				city: '定位中',
-				address:'',
-				type:'',
-				list:[]
+import { debounce } from '@/utils/tool.js'
+// 腾讯地图
+var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
+var qqmapsdk = new QQMapWX({
+	key: 'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'
+})
+export default {
+	data() {
+		return {
+			longitude: 0,
+			latitude: 0,
+			city: '定位中',
+			address: '',
+			type: '',
+			list: []
+		}
+	},
+	watch: {
+		address: debounce(function (keyword) {
+			let that = this
+			qqmapsdk.getSuggestion({
+				keyword,
+				region_fix: 1,
+				policy: 1,
+				location: `${that.latitude},${that.longitude}`,
+				success(res) {
+					console.log(res);
+					that.list = res.data
+				}
+			})
+		})
+	},
+	methods: {
+		setStorage(item){
+			const history = this.getStorage()
+			const index = history.findIndex(v => v.title === item.title)
+			if(index !== -1){
+				history.splice(index, 1)
 			}
-		},
-		watch: {
-			address:debounce(function(keyword) {
-				let that = this
-				qqmapsdk.getSuggestion({
-					keyword,
-					region_fix:1,
-					policy:1,
-					location: `${that.latitude},${that.longitude}`,
-					success(res){
-						console.log(res);
-						that.list = res.data
-					}
-				})
+			history.unshift({
+				_distance: item._distance,
+				title: item.title,
+				address: item.address,
+				location: item.location
 			})
+			uni.setStorageSync('addrHistory', JSON.stringify(history))
 		},
-		methods: {
-			chooseAddress(item) {
-				uni.navigateTo({
-					url:`../index/index?type=${this.type}`,
-					  success: function(res) {
-					    // 通过eventChannel向被打开页面传送数据
-					    res.eventChannel.emit('address', { 
-							latitude:item.location.lat,
-							longitude:item.location.lng,
-							address:item.title
-						})
-					  }
-				})
-			}
+		getStorage(){
+			return JSON.parse(uni.getStorageSync('addrHistory') || '[]')
 		},
-		filters: {
-			filterDistance: function(val) {
-				return (val/1000).toFixed(1)+'km'
+		chooseAddress(item) {
+			try {
+				console.log(item)
+				this.setStorage(item)
+			} catch (error) {
+				console.log(error)
 			}
-		},
-		onLoad(val) {
-			this.type = val.type
-		},
-		created() {
-			this.city = uni.getStorageSync('city')
-			let that = this
-			uni.getLocation({
-				type: 'gcj02',
-				success(res) {
-					that.longitude = res.longitude
-					that.latitude = res.latitude
-					
+			uni.navigateTo({
+				url: `../index/index?type=${this.type}`,
+				success: function (res) {
+					// 通过eventChannel向被打开页面传送数据
+					res.eventChannel.emit('address', {
+						latitude: item.location.lat,
+						longitude: item.location.lng,
+						address: item.title
+					})
 				}
 			})
 		}
+	},
+	filters: {
+		filterDistance: function (val) {
+			return (val / 1000).toFixed(1) + 'km'
+		}
+	},
+	onLoad(val) {
+		this.type = val.type
+	},
+	created() {
+		this.city = uni.getStorageSync('city')
+		let that = this
+		uni.getLocation({
+			type: 'gcj02',
+			success(res) {
+				that.longitude = res.longitude
+				that.latitude = res.latitude
+
+			}
+		})
+		this.list = this.getStorage()
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-.chooseAddress{
-	.search-box{
+.chooseAddress {
+	.search-box {
 		position: fixed;
 		top: 0%;
 		left: 0%;
@@ -107,7 +133,8 @@
 		height: 72rpx;
 		padding: 20rpx 32rpx;
 		background: #fff;
-		.input-box{
+
+		.input-box {
 			height: 72rpx;
 			padding: 16rpx 0;
 			box-sizing: border-box;
@@ -115,40 +142,48 @@
 			background: #F9F9F9;
 			display: flex;
 			font-size: 28rpx;
-			.city{
+
+			.city {
 				flex: 0 0 154rpx;
 				text-align: center;
 				color: #222222;
-				border-right: 2rpx solid #F0F0F0;;
+				border-right: 2rpx solid #F0F0F0;
+				;
 			}
-			.address-input{
+
+			.address-input {
 				flex: 1;
 				color: #AAAAAA;
 				padding-left: 20rpx;
 			}
 		}
 	}
-	.search-content{
+
+	.search-content {
 		padding-top: 112rpx;
-		.item{
+
+		.item {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			padding: 36rpx 32rpx;
 			border-bottom: 1rpx solid #F0F0F0;
-			.info{
-				.address{
+
+			.info {
+				.address {
 					font-weight: bold;
 					color: #222222;
 					font-size: 28rpx;
 				}
-				.desc{
-					font-size: 24rpx;	
+
+				.desc {
+					font-size: 24rpx;
 					color: #AAAAAA;
 					margin-top: 14rpx;
 				}
 			}
-			.distance{
+
+			.distance {
 				font-size: 28rpx;
 				color: #AAAAAA;
 			}