315 lines
6.6 KiB
Vue
315 lines
6.6 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="top_s">
|
|
<view class="search_">
|
|
<u-icon name="arrow-left" size="24" @click="goback()"></u-icon>
|
|
<view class="newsearch">
|
|
<view @click="toQf()" style="margin-left: 10px;" ><u-icon name="camera" color="#32714F" size="28"></u-icon></view>
|
|
<view class="newsearch_g">|</view>
|
|
<input type="text" v-model="keyword" placeholder="Please enter" />
|
|
<view class="anniu" @click="getSound">search</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="box_" v-if="cityList.length>1">
|
|
<view class="h_top">
|
|
<view class="icon_">
|
|
<image src="../../static/imgs/huohuo.png" style="width: 16px; height: 16px; "></image>
|
|
</view>
|
|
<view class="sm_">City</view>
|
|
<view class="size_"></view>
|
|
</view>
|
|
<view class="h_" v-for="(item,index) in cityList" :key="index" @click="goclick(item)">
|
|
<view class="icon_"><u-icon name="map" size="14"></u-icon></view>
|
|
<view class="title_">{{item.cnName}}-{{item.name}}</view>
|
|
<view class="size_">→</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="box_" >
|
|
<view class="h_top">
|
|
<view class="icon_"><u-icon name="clock" size="14"></u-icon></view>
|
|
<view class="sm_">History</view>
|
|
<view class="size_" @click="removeRecord()" >Clear</view>
|
|
</view>
|
|
<view class="h_" v-for="(item,index) in hisList" :key="index" @click="newclick(item)">
|
|
<view class="icon_"><u-icon name="map" size="14"></u-icon></view>
|
|
<view class="title_">{{item.cnName}}-{{item.searchName}}</view>
|
|
<view class="size_">→</view>
|
|
</view>
|
|
<view class="h_" v-if="hisList.length<1" >
|
|
<view style="font-size: 14px;color: #939393;">You have no search history yet~</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword: '',
|
|
type:'',
|
|
hisList: [],
|
|
cityList: [],
|
|
startPoint: [],
|
|
endPoint: [],
|
|
city:"",
|
|
lon: '116.897442',
|
|
lat: '36.67937',
|
|
actionStyle:{
|
|
width: '50px'
|
|
}
|
|
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if(option.type){
|
|
this.type = option.type
|
|
console.log(this.type);
|
|
}
|
|
this.watchData()
|
|
},
|
|
onShow() {
|
|
this.getmyhis();
|
|
},
|
|
methods: {
|
|
watchData() {
|
|
let that = this
|
|
uni.$once('updateOcrText', function(res) {
|
|
that.keyword = res
|
|
that.getSound()
|
|
})
|
|
},
|
|
toQf(){
|
|
uni.chooseImage({
|
|
count: 1, //默认9
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
success: function (res) {
|
|
uni.navigateTo({
|
|
url: '/components/bt-cropper/index?image='+res.tempFilePaths[0]
|
|
})
|
|
}
|
|
});
|
|
},
|
|
removeRecord(){
|
|
request({
|
|
url: 'system/records/removeRecord',
|
|
method: 'delete',
|
|
}).then(res=>{
|
|
console.log(res);
|
|
uni.showToast({
|
|
title:"cleared!",
|
|
icon:'none'
|
|
})
|
|
this.getmyhis()
|
|
})
|
|
},
|
|
goback() {
|
|
uni.navigateBack()
|
|
},
|
|
newclick(item){
|
|
let tempData = {
|
|
lal:item.location,
|
|
location:item.location,
|
|
searchName:item.name,
|
|
name:item.name,
|
|
cnName:item.cnName
|
|
}
|
|
request({
|
|
url: 'system/records/addRecordsInfo',
|
|
method: 'post',
|
|
data:tempData
|
|
})
|
|
let res ={type:this.type,data:item}
|
|
uni.$emit('updatePosition',res)
|
|
uni.navigateBack()
|
|
},
|
|
goclick(item) {
|
|
let tempData = {
|
|
lal:item.location,
|
|
location:item.location,
|
|
searchName:item.name,
|
|
name:item.name,
|
|
cnName:item.cnName
|
|
}
|
|
let res ={type:this.type,data:tempData}
|
|
request({
|
|
url: 'system/records/addRecordsInfo',
|
|
method: 'post',
|
|
data:tempData
|
|
})
|
|
uni.$emit('updatePosition',res)
|
|
uni.navigateBack()
|
|
|
|
},
|
|
getSound() {
|
|
|
|
let that = this
|
|
uni.getLocation({
|
|
// 谷歌使用wgs84 其他使用gcj02
|
|
type: 'gcj02', // 使用国测局坐标系
|
|
geocode: true,
|
|
success: function(res) {
|
|
uni.showLoading({
|
|
title: 'Loading...'
|
|
});
|
|
request({
|
|
url: 'system/records/roundSearch?searchName=' + that.keyword +
|
|
"&longitude=" + res.longitude + "&latitude=" + res.latitude,
|
|
method: 'get',
|
|
}).then(res => {
|
|
console.log('1119', res);
|
|
const data = res.data
|
|
if (data&&data.length > 1) {
|
|
that.cityList = data
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: "Sorry, we couldn't find anything related to it in the search!",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
}).finally(()=>{
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
fail: function(err) {
|
|
uni.showToast({
|
|
title: 'Failed to get location',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
});
|
|
},
|
|
|
|
async getmyhis() {
|
|
this.hisList = []
|
|
let res = await request({
|
|
url: 'system/records/listByOne?orderBy=desc?pageNum=1?pagesize=10',
|
|
method: 'get',
|
|
})
|
|
if (res.code == 200) {
|
|
console.log("res", res)
|
|
for (var i = 0; i < res.rows.length; i++) {
|
|
this.hisList.push(res.rows[i])
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.search_ {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 0px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.newsearch_g{
|
|
color: #939393; line-height: 22px; margin-bottom: 4px;margin-right: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
.newsearch{
|
|
width: 100%;
|
|
border: 2px solid #32714F;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 5px 2px;
|
|
input{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.anniu{
|
|
background: #32714F;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 8rpx 10rpx;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.content {
|
|
background: #F8F8F8;
|
|
height: 100vh;
|
|
}
|
|
|
|
.h_top {
|
|
background: #F7F8FA;
|
|
border-radius: 6px 6px 0px 0px;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sm_ {
|
|
font-weight: 500;
|
|
font-size: 10px;
|
|
color: #333333;
|
|
width: 80%;
|
|
}
|
|
|
|
.top_s {
|
|
width: 100%;
|
|
height: 114px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
|
|
border-radius: 0px 0px 0px 0px;
|
|
box-sizing: border-box;
|
|
padding-top: 44px;
|
|
}
|
|
|
|
.box_ {
|
|
width: 95%;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
|
|
margin: 15px auto;
|
|
border-radius: 6px 6px 6px 6px;
|
|
|
|
}
|
|
|
|
.h_ {
|
|
width: 100%;
|
|
border-bottom: 1px solid #F2F2F2;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon_ {
|
|
width: 8%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title_ {
|
|
width: 80%;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
color: #333333;
|
|
}
|
|
|
|
.size_ {
|
|
width: 10%;
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
color: #999999;
|
|
text-align: right;
|
|
}
|
|
</style>
|