Commit 2f6664287030703fd448663f8068a8bad80c1cd2

Authored by vking
1 parent 09675647

search

// components/2.0/filter/location.js
import DA from '../../../pages/reserve/data';
import DA from '../../../pages/reserve/data'
import util from '../../../utils/util'
import QQMapWX from '../../../utils/qqmap-wx-jssdk.js'
const qqmapsdk = new QQMapWX({
key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ'
});
const CACHE_LOCALTION_KEY='CACHE_LOCALTION_KEY'
Component({
/**
* 组件的属性列表
*/
properties: {
code:String,
},
/**
* 组件的初始数据
*/
data: {
address:'',
activeCity:{},
hasShow:false,
},
attached(){
this.init()
this.position={}
this.selectComponent('#getpos').getPos();
},
/**
* 组件的方法列表
*/
methods: {
async init(){
this.position={}
this.isAddr=false
this.citys=await DA.getCitys()
this.setData({
citys: this.citys
})
this.selectComponent('#getpos').getPos();
},
rePos(e){
this.isAddr=util.attr(e,'isAddr')
this.selectComponent('#getpos').getPos();
},
hide(){
this.setData({
hasShow:false,
})
},
show(){
this.setData({
hasShow:true,
})
},
event(data){
this.triggerEvent('event',data)
util.cache('CACHE_LOCALTION_KEY',data)
},
checkedCity(e){
let activeCity=this.citys[util.attr(e,'index')]
this.setData({
citys: await DA.getCitys()
activeCity:activeCity,
})
this.event({city:activeCity,address:this.position.address,isAddr:false})
},
onpos(e) {
let res = e.detail;
console.log('onpos.res', res);
this.position.latitude = res.latitude;
this.position.longitude = res.longitude;
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success:(res)=>{
if(res.status!=0) return;
console.log('qqmapsdk.reverseGeocoder',res.result)
this.position.address_component= res.result.address_component
this.position.address=res.result.address
let activeCity={}
if(!this.data.code){
this.citys.some(ci=>{
if(ci.name==this.position.address_component.city){
activeCity=ci
return true
}
})
}else{
this.citys.some(ci=>{
if(ci.code==this.data.code){
activeCity=ci
return true
}
})
}
this.setData({
activeCity:activeCity,
address:this.position.address
})
this.event({city:activeCity,address:this.position.address,isAddr:this.isAddr})
if(this.isAddr){//点击地址
this.hide()
}
},
})
},
}
})
... ...
<!--components/2.0/filter/location.wxml-->
<view class="view cu-modal bottom-modal {{!hasShow?'show':''}}" bindtap="hide">
<view class="view cu-modal bottom-modal {{hasShow?'show':''}}" bindtap="hide">
<view class="cu-dialog confirm bg-white " catchtap="catchtap" style="border-radius: 40rpx 40rpx 0px 0px;">
<view class="padding-lg">
<view class="view txt-32-h">
... ... @@ -7,29 +7,31 @@
</view>
<view class="flex margin-tb-lg">
<view class="flex-treble text-bold txt-34-h flex justify-start">我的位置</view>
<view class="flex justify-end align-center">
<view class="flex justify-end align-center" bindtap="rePos">
<image src="http://nosqn.colorcun.com/search/s%20%289%29.png" style="width: 28rpx;height: 28rpx;"></image>
<view class="margin-left-sm text-blue txt-26-h">重新定位</view>
</view>
</view>
<view wx:if="{{true}}" class="flex justify-start align-start">
<view wx:if="{{address}}" class="flex justify-start align-start" bindtap="rePos" data-is-addr="{{true}}">
<image src="http://nosqn.colorcun.com/search/s%20%2810%29.png"
style="width: 26rpx;height: 30rpx;margin-top: 6rpx;"></image>
<view class="text-30 margin-left-sm flex-treble text-left">的说法是电风扇东风风神懂法守法水电费水电费水电费水电费水电费水电费水电费</view>
<view class="text-30 margin-left-sm flex-treble text-left">{{address}}</view>
</view>
<view wx:else="" class="text-30 flex-treble text-center">未获取到位置</view>
<view class="view margin-bottom-xl margin-top-lg grid col-4 city-view">
<view class="view flex justify-center city-city" wx:for="{{citys}}" wx:key="citys">
<view class="view city">{{item.name}}</view>
<view class="view margin-top-lg grid col-4 city-view">
<view class="view flex justify-center city-city"
bindtap="checkedCity" data-index="{{index}}"
wx:for="{{citys}}" wx:key="citys">
<view class="view city {{activeCity.code==item.code?'active':''}}">{{item.name}}</view>
</view>
</view>
<view class="flex justify-center margin-bottom-lg margin-top">
<button class="view cu-btn margin-right-xl round bg-ghostWhite" wx:if="{{opt.cancelText}}"
bindtap="tapButton" data-type="cancel"
style="color:{{opt.cancelColor}};">{{opt.cancelText}}</button>
<button class="view cu-btn round bg-blue"
bindtap="tapButton" data-type="confirm"
style="color:{{opt.confirmColor}};">{{opt.confirmText}}</button>
<view class="txt-24-h text-gray margin-bottom-lg ">更多城市敬请期待…</view>
<view class="flex justify-center padding-top-lg">
<button class="view cu-btn round bg-ghostWhite txt-34-h"
style="width: 100%;color:#666666; height: 80rpx;"
bindtap="hide">
取消
</button>
</view>
</view>
</view>
... ...
... ... @@ -14,10 +14,6 @@
line-height: 84rpx;
margin-bottom: 40rpx;
}
.city-view .city-city:nth-child(4n+0){
background-color: #1AAD19;
justify-items: flex-end;
}
.city.active{
color: #42A5FF;
background: #E6F3FF;
... ...
... ... @@ -5,7 +5,7 @@ Page({
* 页面的初始数据
*/
data: {
location:'获取中...'
},
/**
... ... @@ -78,7 +78,14 @@ Page({
//setTimeout(()=>{this.getList();},0)
this.selectComponent('#search-how').hide();
},
dispalyLocation(){
this.selectComponent('#location').show();
},
locationEvent(e){
console.log('locationEvent',e.detail)
this.city=e.detail.city
this.setData({
location:e.detail.isAddr?e.detail.address:e.detail.city.name
})
}
})
\ No newline at end of file
... ...
... ... @@ -6,7 +6,10 @@
</view>
<view class="view search margin-lr padding-top-0 padding-lr-lg padding-bottom-lg">
<view class="view solid-bottom flex justify-around align-center" style="height: 110rpx;">
<view class="view flex-treble text-bold text-xl text-cut margin-right-lg">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</view>
<view bindtap="dispalyLocation"
class="view flex-treble text-bold text-xl text-cut margin-right-lg">
{{location}}
</view>
<view class="view flex flex-direction align-center justify-center">
<view class="view posicon"></view>
<view class="view text-blue txt-24-h" style="margin-top: 4rpx;">我的位置</view>
... ...
// pages/reserve/search.js\
const map_key='SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ'
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key:map_key // 必填
});
import util from '../../utils/util';
import App from '../../utils/api';
import PubSub from '../../utils/PubSub'
Page({
/**
* 页面的初始数据
*/
data: {
history:[],
suggestion:[],
hasSellerMore:false,
keyword:'',
sellerSplit:-1,
navHeight:100,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.selectComponent('#getpos').getPos();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
PubSub.emit('custom-tab-bar')
this.getHistory();
this.setData({
navHeight:this.selectComponent('#nav').getHeight()
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
getHistory(){
App.Customer.GetHistorySearch().then(res=>{
let mks=[]
res.data.forEach(h=>{
mks.push({ // 获取返回结果,放到mks数组中
title: h.name,
id: h.sid,
addr: '',
city: '',
district: 0,
latitude: h.latitude,
longitude: h.longitude,
type:h.type==1?-1:h.type,
})
})
this.setData({
history:mks
})
})
},
//在Page({})中使用下列代码
//数据回填方法
backfill: function (e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.data.suggestion.length; i++) {
if (i == id) {
console.log('backfill,this.data.suggestion[i]:',this.data.suggestion[i])
// let pages = getCurrentPages();
// let p = pages[pages.length - 2];
// p.setSuggestion(this.data.suggestion[i])
//util.cache('suggestion',this.data.suggestion[i]);
this.setData({
backfill: this.data.suggestion[i].title
});
this.setSuggestion({fun:'setSuggestion',suggestion:this.data.suggestion[i]})
wx.navigateBack();
break;
}
}
},
inputVal:'',
//触发关键词输入提示事件
getsuggest: function (e) {
//调用关键词提示接口
this.inputVal=e.detail.value;
if(this.inputVal.length<1){
return this.setData({
suggestion: [],
keyword:''
})
}
let prarms={
keyword:this.inputVal,
region:this.location.city||'',
region_fix:0,
page_size:20,
page_index:1,
key:map_key,
}
if(this.location.latitude){
prarms.location=this.location.latitude+','+this.location.longitude
}
App.Customer.KeywordTips(prarms).then(res=>{
if(this.inputVal.length<1){
return this.setData({
suggestion: []
})
}
var sug = [],hasSellerMore=false,sellerSplit=-1
try{
res.data=res.data.data
if(res.data instanceof Array){
for (var i = 0; i < res.data.length; i++) {
if(i==2 && res.data[i].type==-1){
hasSellerMore=true
continue;
}
if((i==1 || i==2) && res.data[i-1].type==-1 && res.data[i].type!=-1){
sellerSplit=i-1
}
let item=res.data[i]
item.latitude=item.location.lat
item.longitude=item.location.lng
item.addr=item.address
item.titles=item.title.match(new RegExp('(.*)('+this.inputVal+')(.*)'))
sug.push(item);
}
}
}catch(e){}
this.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
suggestion: sug,
hasSellerMore:hasSellerMore,
keyword:this.inputVal,
sellerSplit:sellerSplit,
});
})
},
nearby_search: function () {
App.Customer.SearchMap({
boundary:'region('+this.location.city+',1)',
//boundary:'nearby('+this.location.latitude+','+this.location.longitude+',1000,1)',
location:this.location.latitude+','+this.location.longitude,
keyword:this.inputVal,
page_size:20,
page_index:1,
orderby:'_distance',
key:map_key,
}).then(res=>{
var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 获取返回结果,放到mks数组中
title: res.data[i].title,
id: res.data[i].id,
addr: res.data[i].address,
city: res.data[i].city,
district: res.data[i].district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
type:res.data[i].type,
category:res.data[i].category,
})
}
this.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
suggestion:mks,
});
})
},
location:'',
onpos(e){
console.log(e);
this.location=e.detail
this.GetRecommendSellerLists()
this.getCity()
},
getCity(){
qqmapsdk.reverseGeocoder({
location:this.location,
success:(res)=>{
this.location['city']='';
if(res.status==0){
this.location['city']=res.result.ad_info.city
}
},
})
},
gotoList(){
wx.navigateTo({
url:util.http_build_query({
lat:this.location.latitude,
lng:this.location.longitude,
keyword:this.inputVal,
multiIndex:0,
},'./indexList')
})
},
searchItemClick(e){
//console.log('searchItemClick',e)
let item=e.detail.data
if(e.detail.act=='detail'){
if(item.type==-1){
wx.navigateTo({
url:util.http_build_query({
id:item.id,
},'./detail')
})
}else{
//let pages = getCurrentPages();
//let p = pages[pages.length - 2];
//p.setSuggestion(item)
this.setSuggestion({fun:'setSuggestion',suggestion:item})
this.setData({
backfill: item.title
});
wx.navigateBack();
}
}else{
wx.navigateTo({
url:util.http_build_query({
id:item.id,
activeTab:'reserve',
},'./detail')
})
}
},
historyEmpty(){
App.Customer.DelHistorySearch().then(()=>{
App.Customer.GetHistorySearch({},'clear')
this.setData({
history:[]
})
})
},
clearKeyword(){
this.setData({
keyword:'',
suggestion:[],
})
},
GetRecommendSellerLists(){
if(!this.location.latitude) return;
let param={}
param={
lat:this.location.latitude,
lng:this.location.longitude
}
App.Customer.GetRecommendSellerLists(param).then(res=>{
this.setData({
rsl:res.data
})
})
},
hasGoto:false,
bindtransition(e){
console.log(e)
if('change'==e.type){
this.hasGoto=false
}
if('animationfinish'==e.type){
if(this.hasGoto && (e.detail.current+1)==this.data.rsl.length){
wx.switchTab({
url: '/pages/reserve/index'
})
return;
}else{
this.hasGoto=true
}
}
},
gotoSellerDetail(e){
let url='/pages/reserve/detail?id='+e.currentTarget.id
wx.navigateTo({
url:url,
})
},
sbtrEvent(e){
console.log(e);
if(e.detail.act=='oncall'){
this.selectComponent('#as').show(e.detail.seller);
}
},
setSuggestion(data){//只通知前页变更数据
/*
let pages = getCurrentPages();
let p = pages[pages.length - 2];
if(p.route=='pages/reserve/index'){
PubSub.emit('searchParam',data)
}else{
PubSub.emit('searchParamList',data)
}
*/
let suggestion=data.suggestion
wx.navigateTo({
url:util.http_build_query({
hasSuggestion:1,
keyword:suggestion.title,
lat:suggestion.latitude,
lng:suggestion.longitude,
centre_pos:`${suggestion.latitude},${suggestion.longitude}`,
multiIndex:0,
},'/pages/reserve/indexList')
})
},
})
\ No newline at end of file
... ...
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText":"周到安排",
"usingComponents": {
"formids":"/components/formids/formids",
"getpos":"/components/userinfo/getpos",
"nav":"/components/nav/nav",
"search-item":"/components/reserve/search/item",
"as-phone":"/components/actionSheet/phone",
"sb-tr":"/components/reserve/seller-box-transverse/seller-box"
}
}
\ No newline at end of file
... ...
<!--pages/reserve/search.wxml-->
<nav id="nav">搜索</nav>
<view class="searchAddrView" style="height: {{navHeight+40}}px;">
<view class="searchAddr flex-ll" style="margin-top: {{navHeight+5}}px;">
<image class="icon" src="http://nosqn.colorcun.com/custom/lite-online/image/search26.png"></image>
<input style="width: 100%;" placeholder="输入餐厅名或地名,快速订包间"
type="text" confirm-type="done"
focus
bindinput="getsuggest" value="{{keyword}}"/>
<image class="icon icon-del" wx:if="{{keyword.length>0}}"
catchtap="clearKeyword"
src="http://nosqn.colorcun.com/reserve/images/del.png"></image>
</view>
</view>
<view class="pages">
<view class="res-view">
<!--绑定回填事件-->
<block wx:for="{{suggestion}}" wx:key="index"
bindtap="backfill" id="{{index}}">
<search-item item="{{item}}" keyword="{{keyword}}" bindclick="searchItemClick"></search-item>
<view wx:if="{{index==1 && hasSellerMore}}" class="see-more" bindtap="gotoList"></view>
<view wx:if="{{index==sellerSplit && sellerSplit>-1}}" class="see-split"></view>
</block>
<view class="see-more bottom" wx:if="{{suggestion.length>0}}"></view>
</view>
</view>
<view class="history" wx:if="{{suggestion.length<1}}">
<view wx:if="{{keyword.length>0}}">
<view class="flex-vc empty">
<block wx:if="{{!hasFirstShow}}">
<image src="http://nosqn.colorcun.com/custom/lite-online/image/follow-empty.png"></image>
<view class="empty-t1">抱歉,没有找到符合的内容</view>
<view class="empty-t2">试试搜搜别的</view>
</block>
</view>
<view class="rsl-block" wx:if="{{rsl.length>0}}">
<view class="line-push">为你推荐</view>
<view class="transverse-list">
<swiper
indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
interval="2000" duration="500"
previous-margin="{{15}}px" next-margin="{{15}}px" style="height: 350rpx;"
current="{{current}}" bindchange="bindtransition" bindanimationfinish="bindtransition">
<block wx:for="{{rsl}}" wx:key="rsl.key">
<swiper-item bindtap="gotoSellerDetail" id="{{item.id}}">
<view class="seller" id="seller-{{item.id}}">
<sb-tr seller="{{item}}"
hasInSwiper bindevent="sbtrEvent"
hasActivityTags="{{false}}"
hasActivityShort="{{true}}"
hasBrand="true" hasActivityTese="true"
hasSlogan="{{false}}"></sb-tr>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
<view class="pages" wx:elif="{{history.length>0}}">
<view class="flex-lr">
<view class="history-title">最近搜索</view>
<view class="history-empty" bindtap="historyEmpty"></view>
</view>
<view class="history-list">
<block wx:for="{{history}}" wx:key="history.key">
<search-item item="{{item}}" hasHistory bindclick="searchItemClick"></search-item>
</block>
</view>
</view>
</view>
<getpos bindpos="onpos" id="getpos" hasAllowFail></getpos>
<as-phone id="as"></as-phone>
\ No newline at end of file
... ...
/* pages/reserve/search.wxss */
.pages{
width: 90%;
margin: 5% auto;
color:#353535;
}
.searchAddrView{
position: fixed;
top:0rpx;
width: 100%;
height: 240rpx;
background-color: #ffffff;
z-index: 9;
}
.searchAddr {
width: 90%;
height: 60rpx;
background-color: #F5F5F5;
border-radius: 30rpx;
line-height: 60rpx;
color:#999999;
line-height: 60rpx;
font-size: 28rpx;
margin:0 auto;
}
.searchAddr .icon{
min-width: 26rpx;
width:26rpx;
height: 26rpx;
margin: 0 20rpx;
}
.searchAddr .icon-del{
min-width: 28rpx;
width: 28rpx;
height: 28rpx;
}
.res-view{
margin-top: 120rpx;
}
.search-but{
min-width: 140rpx;
color:#000000;
border-left: 2rpx solid #cccccc;
text-align: center;
height: 32rpx;
line-height: 32rpx;
}
.history{
margin-top: 140rpx;
}
.history .history-title{
font-size: 28rpx;
color:#353535;
height: 40rpx;
line-height: 40rpx;
font-weight:600;
margin-bottom: 20rpx;
}
.see-more{
width: 100%;
height: 34rpx;
position: relative;
margin-bottom: 40rpx;
margin-top: 40rpx;
}
.see-more:before{
content: "";
width: 100%;
height: 2rpx;
background-color: #F5F5F5;
position: absolute;
left: 0;
top:17rpx;
}
.see-more:after{
content: "查看更多";
width:136rpx;
height:34rpx;
font-size:24rpx;
color:rgba(153,153,153,1);
line-height:34rpx;
background-color: #fefefe;
position: absolute;
display: block;
left:calc(50% - 68rpx);
top:0;
text-align: center;
}
.see-more.bottom:after{
width:200rpx;
content: "我是有底线的";
left:calc(50% - 100rpx);
}
.see-more.bottom{
padding-bottom: 40rpx;
}
.see-split{
width: 100%;
height: 20rpx;
}
.history-empty{
width: 28rpx;
height: 28rpx;
background-image: url("http://nosqn.colorcun.com/reserve/images/empty.png");
background-size: 100% 100%;
}
.empty{margin-top: 150rpx; color: #353535}
.empty image{
width: 191px;
height: 158px;
}
.empty .empty-t1{
font-size: 28rpx;
margin-top: 60rpx;
height:40px;
line-height:40px;
}
.empty .empty-t2{
font-size: 28rpx;
margin-top: 20rpx;
height:40px;
line-height:40px;
}
.line-push{
background-image: url("http://nosqn.colorcun.com/reserve/images/line-push.png");
width: 328rpx;
height: 42rpx;
background-size: 100% 24rpx;
margin: 0 auto;
font-size:30rpx;
color: #C0A369;
line-height: 24rpx;
background-repeat: no-repeat;
text-align: center;
margin-bottom: 60rpx;
}
.rsl-block{
position: fixed;
bottom: 0rpx;
width: 100%;
}
.transverse-list{
background-color: #fefefe;
width: 100%;
}
.transverse-list .seller{
width: 98%;
margin: 0 auto;
}
\ No newline at end of file
... ...