|
@@ -4,15 +4,18 @@
|
|
|
<view style="height:200rpx"></view>
|
|
|
<view class="ding">
|
|
|
<view class="cu-bar search bg-gray filter-section" style="padding-top:10rpx">
|
|
|
- <view class="search-form round bg-white">
|
|
|
- <select name="" id="" filterable clearable v-model="router_id" style="padding-left:40rpx;background-size: 4.6%;">
|
|
|
+ <view class="search-form round bg-white" style="position:relative;overflow:auto">
|
|
|
+
|
|
|
+ <!-- <select name="" id="" filterable clearable v-model="router_id" style="padding-left:40rpx;background-size: 4.6%;">
|
|
|
<option value="0">请选择线路名称</option>
|
|
|
<option :value=item.route_name v-for="item in routeListData">{{ item.route_name}}</option>
|
|
|
- </select>
|
|
|
- </view>
|
|
|
+ </select> -->
|
|
|
|
|
|
+ <input name="siteName" v-model="formMess.siteName" @click="toggleShow" @focus="focusfns"
|
|
|
+ @input="handleInput()" placeholder="请输入或选择"></input>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="cu-bar search bg-gray filter-section" >
|
|
|
+ <view class="cu-bar search bg-gray filter-section">
|
|
|
<view class="search-form round bg-white">
|
|
|
<text class="cuIcon-search"></text>
|
|
|
<input class="" type="text" placeholder="请输入站点名称" confirm-type="search" v-model="siteName"></input>
|
|
@@ -22,13 +25,22 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="siteItems" v-if="isShow" style="max-height:60vh;overflow:auto;position:absolute;z-index:999; margin: 0 32rpx;
|
|
|
+ width: calc(100% - 64rpx);top:100rpx">
|
|
|
+ <view class=" site-item" v-if="!siteItemData.length">暂无结果</view>
|
|
|
+ <view class="site-item" v-for="(item,index) in siteItemData" @click="changeModel(item,index)" :key="index" style="padding:16rpx 22rpx">
|
|
|
+ {{item.route_name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- 筛选框end -->
|
|
|
|
|
|
<!-- 站点列表start -->
|
|
|
<view class="site-items" style="margin-top:0;height: calc(100vh - 500rpx);">
|
|
|
<view class="cu-list menu-avatar">
|
|
|
- <view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in siteList" :key="index"
|
|
|
- @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
|
|
|
+ <view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
|
|
|
+ v-for="(item,index) in siteList" :key="index" @touchstart="ListTouchStart"
|
|
|
+ @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
|
|
|
<view class="cu-avatar round lg" style="background-image: url(../../static/site-icon.png);"></view>
|
|
|
|
|
|
<view class="content" @tap="goDeviceManage(item)">
|
|
@@ -37,7 +49,8 @@
|
|
|
|
|
|
<view class="nav-right num">
|
|
|
<view class="text-grey text-xs">
|
|
|
- <image @click="mapLocation(item)" src="../../static/nav-icon.png" style="width:25rpx;height:25rpx;margin-right:26rpx"></image>
|
|
|
+ <image @click="mapLocation(item)" src="../../static/nav-icon.png"
|
|
|
+ style="width:25rpx;height:25rpx;margin-right:26rpx"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="move">
|
|
@@ -62,8 +75,7 @@
|
|
|
<script>
|
|
|
|
|
|
</script>
|
|
|
-<script>
|
|
|
-
|
|
|
+<script>
|
|
|
//引入js sdk的封装
|
|
|
import * as jwx from '../../util/jssdk.js'
|
|
|
|
|
@@ -77,9 +89,19 @@
|
|
|
siteName: '',
|
|
|
siteList: [],
|
|
|
siteListRes: 0,
|
|
|
-
|
|
|
- router_id:0,
|
|
|
- routeListData:[]
|
|
|
+
|
|
|
+ router_id: 0,
|
|
|
+ routeListData: [],
|
|
|
+
|
|
|
+
|
|
|
+ route_name: '',
|
|
|
+ isShow: false,
|
|
|
+ formMess: {
|
|
|
+ "siteName": "",
|
|
|
+ },
|
|
|
+
|
|
|
+ siteItemDataOrigin: [],
|
|
|
+ siteItemData: [],
|
|
|
|
|
|
};
|
|
|
},
|
|
@@ -93,7 +115,7 @@
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
-
|
|
|
+
|
|
|
//线路名称下拉数据请求
|
|
|
async getRoutrBox(params = {}) {
|
|
|
const res = await this.$myRequest({
|
|
@@ -101,15 +123,41 @@
|
|
|
showLoading: true,
|
|
|
data: params
|
|
|
})
|
|
|
- this.routeListData = res.data.data;
|
|
|
- console.log(this.routeListData)
|
|
|
+ // this.routeListData = res.data.data;
|
|
|
+ // console.log(this.routeListData)
|
|
|
+
|
|
|
+ this.siteItemData = res.data.data;
|
|
|
+ this.siteItemDataOrigin = res.data.data;
|
|
|
+ this.siteItemData = this.siteItemDataOrigin;
|
|
|
+ },
|
|
|
+ //选中下拉选项,隐藏框,赋值
|
|
|
+ changeModel: function(item, index) {
|
|
|
+ this.isShow = false;
|
|
|
+ this.formMess.siteName = item.route_name;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 输入框点击 显示隐藏下拉框
|
|
|
+ toggleShow: function() {
|
|
|
+ this.isShow = !this.isShow;
|
|
|
+ },
|
|
|
+ //点击下拉筛选
|
|
|
+ handleInput() {
|
|
|
+ //将元素根据搜索内容过滤出来 这里改变了siteItemData
|
|
|
+ this.siteItemData = this.siteItemDataOrigin;
|
|
|
+ this.siteItemData = this.siteItemData.filter(item => item.route_name.indexOf(this.formMess.siteName) > -1);
|
|
|
},
|
|
|
-
|
|
|
+ focusfns: function(e) {
|
|
|
+ //将元素根据搜索内容过滤出来 这里改变了siteItemData
|
|
|
+ this.siteItemData = this.siteItemDataOrigin;
|
|
|
+ this.siteItemData = this.siteItemData.filter(item => item.route_name.indexOf(this.formMess.siteName) >
|
|
|
+ -1);
|
|
|
+ },
|
|
|
+
|
|
|
//筛选
|
|
|
searchSiteList() {
|
|
|
this.getSiteList({
|
|
|
"siteName": this.siteName,
|
|
|
- "route_name":this.router_id
|
|
|
+ "route_name": this.formMess.siteName
|
|
|
})
|
|
|
},
|
|
|
|
|
@@ -138,11 +186,11 @@
|
|
|
},
|
|
|
|
|
|
// 打开导航
|
|
|
- mapLocation(item) {
|
|
|
-
|
|
|
+ mapLocation(item) {
|
|
|
+
|
|
|
//h5 地图导航
|
|
|
// window.location.href = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:'+parseFloat(item.latitude)+','+parseFloat(item.longitude)+''
|
|
|
-
|
|
|
+
|
|
|
//app导航
|
|
|
// uni.openLocation({
|
|
|
// latitude: parseFloat(item.latitude),
|
|
@@ -151,7 +199,7 @@
|
|
|
// // console.log('success');
|
|
|
// }
|
|
|
// });
|
|
|
-
|
|
|
+
|
|
|
// 微信公众号导航
|
|
|
jwx.configWeiXin(jweixin => {
|
|
|
let shareInfo = {
|