Commit a25494e0a5b77ffefc1e121a152947e2f081997c

Authored by wangfan
1 parent 8a693174

c端预定

... ... @@ -27,7 +27,8 @@
"pages/book/smsbatch/update",
"pages/book/smsbatch/detail",
"pages/book/smsbatch/list",
"pages/book/smsbatch/result"
"pages/book/smsbatch/result",
"pages/reserve/search"
],
"subpackages": [
{
... ...
... ... @@ -29,6 +29,8 @@ Page({
multiArray: [['不确定'].concat(renNum()), ['全部菜系'].concat(DA.caixi)],
multiIndex: [6, 0],
scrollIntoView:'',
suggestion:{},
hasSuggestion:false,
},
transverseViewHeight:170,//横向滚动高度
//qqmapsdk:null,
... ... @@ -73,6 +75,7 @@ Page({
*/
onShow: function () {
//this.getPos();
if(this.data.hasSuggestion) return;
let sys=getApp().system;
this.setData({
[`map.height`]: sys.windowHeight-this.transverseViewHeight,
... ... @@ -365,4 +368,14 @@ Page({
multiIndex:util.val(e)
})
},
setSuggestion(suggestion){
let map=this.data.map;
map.latitude=suggestion.latitude
map.longitude=suggestion.longitude
this.setData({
suggestion:suggestion,
hasSuggestion:true,
map:map,
})
},
})
\ No newline at end of file
... ...
... ... @@ -14,10 +14,12 @@
enable-rotate
show-compass
style="width: 100%; height: {{map.height}}px;"></map>
<cover-view class="searchAddr flex-ll" style="top: {{searchAddrTop}}rpx;">
<cover-image class="icon" src="http://qn.colorcun.com/custom/lite-online/image/search.png"></cover-image>
<cover-view>请输入位置</cover-view>
</cover-view>
<formids url="/pages/reserve/search">
<cover-view class="searchAddr flex-ll" style="top: {{searchAddrTop}}rpx;">
<cover-image class="icon" src="http://qn.colorcun.com/custom/lite-online/image/search.png"></cover-image>
<cover-view class="title">{{hasSuggestion?suggestion.title:'请输入位置'}}</cover-view>
</cover-view>
</formids>
</view>
<view class="transverse-view">
<cover-view class="transverse-view-top"></cover-view>
... ...
... ... @@ -104,4 +104,9 @@
width: 42rpx;
height: 40rpx;
margin: 0 20rpx;
}
.searchAddr .title{
line-height: 60rpx;
height: 60rpx;
overflow: hidden;
}
\ No newline at end of file
... ...
// pages/reserve/search.js
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ' // 必填
});
import util from '../../utils/util';
const {regeneratorRuntime} = global
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
//在Page({})中使用下列代码
//数据回填方法
backfill: function (e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.data.suggestion.length;i++){
if(i == id){
console.log(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
});
wx.navigateBack();
}
}
},
//触发关键词输入提示事件
getsuggest: function(e) {
var _this = this;
//调用关键词提示接口
qqmapsdk.getSuggestion({
//获取输入框值并设置keyword参数
keyword: e.detail.value, //用户输入的关键词,可设置固定值,如keyword:'KFC'
//region:'北京', //设置城市名,限制关键词所示的地域范围,非必填参数
success: function(res) {//搜索成功后的回调
console.log(res);
var sug = [];
for (var i = 0; i < res.data.length; i++) {
sug.push({ // 获取返回结果,放到sug数组中
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
});
}
_this.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
suggestion: sug
});
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
});
}
})
\ No newline at end of file
... ...
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText":"一键订",
"usingComponents": {
"formids":"/components/formids/formids",
"nav":"/components/nav/nav"
}
}
\ No newline at end of file
... ...
<!--pages/reserve/search.wxml-->
<nav>请输入位置</nav>
<view class="pages">
<view class="searchAddr flex-ll" style="top: {{searchAddrTop}}rpx;">
<image class="icon" src="http://qn.colorcun.com/custom/lite-online/image/search.png"></image>
<input style="width: 100%;" placeholder="请输入位置" bindinput="getsuggest" value="{{backfill}}"/>
</view>
<view class="res-view">
<!--绑定回填事件-->
<view class="res-item" wx:for="{{suggestion}}" wx:key="index"
bindtap="backfill" id="{{index}}">
<!--根据需求渲染相应数据-->
<!--渲染地址title-->
<view class="label">{{item.title}}</view>
<!--渲染详细地址-->
<view class="address">{{item.addr}}</view>
</view>
</view>
</view>
... ...
/* pages/reserve/search.wxss */
.pages{
width: 90%;
margin: 5% auto;
color:#353535;
}
.searchAddr {
position: fixed;
top:140rpx;
width: 90%;
height: 60rpx;
background-color: #fefefe;
border-radius: 30rpx;
line-height: 60rpx;
color:#999999;
line-height: 60rpx;
font-size: 28rpx;
border: 2rpx solid #cccccc;
}
.searchAddr .icon{
width: 42rpx;
height: 40rpx;
margin: 0 20rpx;
}
.res-view{
margin-top: 100rpx;
}
.res-item{
width: 100%;
border-bottom: 2rpx solid #cccccc;
padding: 20rpx 0;
}
.res-item .label{
font-size: 30rpx;
}
.res-item .address{
font-size: 24rpx;
color:#4C4E4F;
}
\ No newline at end of file
... ...
... ... @@ -31,7 +31,7 @@
"list": []
},
"miniprogram": {
"current": 6,
"current": 38,
"list": [
{
"id": 0,
... ... @@ -321,6 +321,13 @@
"shareName": "8DEbIRpK4pa9mH_QY2vU4ZUKYPuI97WoQ4BQoFej-Q8@cr4dev",
"shareKey": "PZhnqMlY2TnRuHhATyGeSamVmBQUDXXr_WtjRSddeeFK17UAiOP-HNOdhxiEN7PFub5S1DjAeUl0IXOdW-VDqg~~"
}
},
{
"id": -1,
"name": "pages/reserve/search 在线订座",
"pathName": "pages/reserve/search",
"query": "",
"scene": null
}
]
}
... ...
/**
* 微信小程序JavaScriptSDK
*
* @version 1.0
* @date 2017-01-10
* @author jaysonzhou@tencent.com
*/
var ERROR_CONF = {
KEY_ERR: 311,
KEY_ERR_MSG: 'key格式错误',
PARAM_ERR: 310,
PARAM_ERR_MSG: '请求参数信息有误',
SYSTEM_ERR: 600,
SYSTEM_ERR_MSG: '系统错误',
WX_ERR_CODE: 1000,
WX_OK_CODE: 200
};
var BASE_URL = 'https://apis.map.qq.com/ws/';
var URL_SEARCH = BASE_URL + 'place/v1/search';
var URL_SUGGESTION = BASE_URL + 'place/v1/suggestion';
var URL_GET_GEOCODER = BASE_URL + 'geocoder/v1/';
var URL_CITY_LIST = BASE_URL + 'district/v1/list';
var URL_AREA_LIST = BASE_URL + 'district/v1/getchildren';
var URL_DISTANCE = BASE_URL + 'distance/v1/';
var Utils = {
/**
* 得到终点query字符串
* @param {Array|String} 检索数据
*/
location2query(data) {
if (typeof data == 'string') {
return data;
}
var query = '';
for (var i = 0; i < data.length; i++) {
var d = data[i];
if (!!query) {
query += ';';
}
if (d.location) {
query = query + d.location.lat + ',' + d.location.lng;
}
if (d.latitude && d.longitude) {
query = query + d.latitude + ',' + d.longitude;
}
}
return query;
},
/**
* 使用微信接口进行定位
*/
getWXLocation(success, fail, complete) {
wx.getLocation({
type: 'gcj02',
success: success,
fail: fail,
complete: complete
});
},
/**
* 获取location参数
*/
getLocationParam(location) {
if (typeof location == 'string') {
var locationArr = location.split(',');
if (locationArr.length === 2) {
location = {
latitude: location.split(',')[0],
longitude: location.split(',')[1]
};
} else {
location = {};
}
}
return location;
},
/**
* 回调函数默认处理
*/
polyfillParam(param) {
param.success = param.success || function () { };
param.fail = param.fail || function () { };
param.complete = param.complete || function () { };
},
/**
* 验证param对应的key值是否为空
*
* @param {Object} param 接口参数
* @param {String} key 对应参数的key
*/
checkParamKeyEmpty(param, key) {
if (!param[key]) {
var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + key +'参数格式有误');
param.fail(errconf);
param.complete(errconf);
return true;
}
return false;
},
/**
* 验证参数中是否存在检索词keyword
*
* @param {Object} param 接口参数
*/
checkKeyword(param){
return !this.checkParamKeyEmpty(param, 'keyword');
},
/**
* 验证location值
*
* @param {Object} param 接口参数
*/
checkLocation(param) {
var location = this.getLocationParam(param.location);
if (!location || !location.latitude || !location.longitude) {
var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + ' location参数格式有误')
param.fail(errconf);
param.complete(errconf);
return false;
}
return true;
},
/**
* 构造错误数据结构
* @param {Number} errCode 错误码
* @param {Number} errMsg 错误描述
*/
buildErrorConfig(errCode, errMsg) {
return {
status: errCode,
message: errMsg
};
},
/**
* 构造微信请求参数,公共属性处理
*
* @param {Object} param 接口参数
* @param {Object} param 配置项
*/
buildWxRequestConfig(param, options) {
var that = this;
options.header = { "content-type": "application/json" };
options.method = 'GET';
options.success = function (res) {
var data = res.data;
if (data.status === 0) {
param.success(data);
} else {
param.fail(data);
}
};
options.fail = function (res) {
res.statusCode = ERROR_CONF.WX_ERR_CODE;
param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, result.errMsg));
};
options.complete = function (res) {
var statusCode = +res.statusCode;
switch(statusCode) {
case ERROR_CONF.WX_ERR_CODE: {
param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
break;
}
case ERROR_CONF.WX_OK_CODE: {
var data = res.data;
if (data.status === 0) {
param.complete(data);
} else {
param.complete(that.buildErrorConfig(data.status, data.message));
}
break;
}
default:{
param.complete(that.buildErrorConfig(ERROR_CONF.SYSTEM_ERR, ERROR_CONF.SYSTEM_ERR_MSG));
}
}
}
return options;
},
/**
* 处理用户参数是否传入坐标进行不同的处理
*/
locationProcess(param, locationsuccess, locationfail, locationcomplete) {
var that = this;
locationfail = locationfail || function (res) {
res.statusCode = ERROR_CONF.WX_ERR_CODE;
param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
};
locationcomplete = locationcomplete || function (res) {
if (res.statusCode == ERROR_CONF.WX_ERR_CODE) {
param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
}
};
if (!param.location) {
that.getWXLocation(locationsuccess, locationfail, locationcomplete);
} else if (that.checkLocation(param)) {
var location = Utils.getLocationParam(param.location);
locationsuccess(location);
}
}
}
class QQMapWX {
/**
* 构造函数
*
* @param {Object} options 接口参数,key 为必选参数
*/
constructor(options) {
if (!options.key) {
throw Error('key值不能为空');
}
this.key = options.key;
}
/**
* POI周边检索
*
* @param {Object} options 接口参数对象
*
* 参数对象结构可以参考
* @see http://lbs.qq.com/webservice_v1/guide-search.html
*/
search(options) {
var that = this;
options = options || {};
Utils.polyfillParam(options);
if (!Utils.checkKeyword(options)) {
return;
}
var requestParam = {
keyword: options.keyword,
orderby: options.orderby || '_distance',
page_size: options.page_size || 10,
page_index: options.page_index || 1,
output: 'json',
key: that.key
};
if (options.address_format) {
requestParam.address_format = options.address_format;
}
if (options.filter) {
requestParam.filter = options.filter;
}
var distance = options.distance || "1000";
var auto_extend = options.auto_extend || 1;
var locationsuccess = function (result) {
requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend +")";
wx.request(Utils.buildWxRequestConfig(options, {
url: URL_SEARCH,
data: requestParam
}));
}
Utils.locationProcess(options, locationsuccess);
}
/**
* sug模糊检索
*
* @param {Object} options 接口参数对象
*
* 参数对象结构可以参考
* http://lbs.qq.com/webservice_v1/guide-suggestion.html
*/
getSuggestion(options) {
var that = this;
options = options || {};
Utils.polyfillParam(options);
if (!Utils.checkKeyword(options)) {
return;
}
var requestParam = {
keyword: options.keyword,
region: options.region || '全国',
region_fix: options.region_fix || 0,
policy: options.policy || 0,
output: 'json',
key: that.key
};
wx.request(Utils.buildWxRequestConfig(options, {
url: URL_SUGGESTION,
data: requestParam
}));
}
/**
* 逆地址解析
*
* @param {Object} options 接口参数对象
*
* 请求参数结构可以参考
* http://lbs.qq.com/webservice_v1/guide-gcoder.html
*/
reverseGeocoder(options) {
var that = this;
options = options || {};
Utils.polyfillParam(options);
var requestParam = {
coord_type: options.coord_type || 5,
get_poi: options.get_poi || 0,
output: 'json',
key: that.key
};
if (options.poi_options) {
requestParam.poi_options = options.poi_options
}
var locationsuccess = function (result) {
requestParam.location = result.latitude + ',' + result.longitude;
wx.request(Utils.buildWxRequestConfig(options, {
url: URL_GET_GEOCODER,
data: requestParam
}));
};
Utils.locationProcess(options, locationsuccess);
}
/**
* 地址解析
*
* @param {Object} options 接口参数对象
*
* 请求参数结构可以参考
* http://lbs.qq.com/webservice_v1/guide-geocoder.html
*/
geocoder(options) {
var that = this;
options = options || {};
Utils.polyfillParam(options);
if (Utils.checkParamKeyEmpty(options, 'address')) {
return;
}
var requestParam = {
address: options.address,
output: 'json',
key: that.key
};
wx.request(Utils.buildWxRequestConfig(options, {
url: URL_GET_GEOCODER,
data: requestParam
}));
}
/**
* 获取城市列表
*
* @param {Object} options 接口参数对象
*
* 请求参数结构可以参考
* http://lbs.qq.com/webservice_v1/guide-region.html
*/
getCityList(options) {
var that = this;
options = options || {};
Utils.polyfillParam(options);
var requestParam = {
output: 'json',
key: that.key
};
wx.request(Utils.buildWxRequestConfig(options, {
url: URL_CITY_LIST,
data: requestParam
}));
}
/**
* 获取对应城市ID的区县列表
*
* @param {Object} options 接口参数对象
*
* 请求参数结构可以参考
* http://lbs.qq.com/webservice_v1/guide-region.html
*/
getDistrictByCityId(options) {
var that = this;
options = options || {};
Utils.polyfillParam(options);
if (Utils.checkParamKeyEmpty(options, 'id')) {
return;
}
var requestParam = {
id: options.id || '',
output: 'json',
key: that.key
};
wx.request(Utils.buildWxRequestConfig(options, {
url: URL_AREA_LIST,
data: requestParam
}));
}
/**
* 用于单起点到多终点的路线距离(非直线距离)计算:
* 支持两种距离计算方式:步行和驾车。
* 起点到终点最大限制直线距离10公里。
*
* @param {Object} options 接口参数对象
*
* 请求参数结构可以参考
* http://lbs.qq.com/webservice_v1/guide-distance.html
*/
calculateDistance(options) {
var that = this;
options = options || {};
Utils.polyfillParam(options);
if (Utils.checkParamKeyEmpty(options, 'to')) {
return;
}
var requestParam = {
mode: options.mode || 'walking',
to: Utils.location2query(options.to),
output: 'json',
key: that.key
};
var locationsuccess = function (result) {
requestParam.from = result.latitude + ',' + result.longitude;
wx.request(Utils.buildWxRequestConfig(options, {
url: URL_DISTANCE,
data: requestParam
}));
}
if (options.from) {
options.location = options.from;
}
Utils.locationProcess(options, locationsuccess);
}
}
module.exports = QQMapWX;
\ No newline at end of file
... ...