xt / xcx-book · Commits

Go to a project

Commit 923f92ee11a053289de10140886e41c2c4c986fb

Authored by wangfan
1 parent ab39e390
build: skipped

cvlist

Inline Side-by-side
Showing 8 changed files with 302 additions and 38 deletions
// components/reserve/caixi.js
import util from '../../../utils/util';
import App from '../../../utils/api';
const {regeneratorRuntime} = global
Component({
/**
* 组件的属性列表
*/
properties: {
markers:{
multiArray:{
type:Array,
value:[],
value:[]
},
multiIndex: {
type:Array,
value:[]
},
tags: {
type:Array,
value:[]
},
},
... ... @@ -15,9 +25,29 @@ Component({
* 组件的初始数据
*/
data: {
hidden:false
hidden:true,
statusBarHeight: 20,
titleBarHeight:44,
markers:[],
hasMore:true,
},
attached(){
//导航栏自适应
let systemInfo = wx.getSystemInfoSync();
let reg = /ios/i;
let pt = 20;//导航状态栏上内边距
let h = 44;//导航状态栏高度
if(reg.test(systemInfo.system)){
pt = systemInfo.statusBarHeight;
}else{
pt = systemInfo.statusBarHeight;
h = 48;
}
this.setData({
statusBarHeight: pt,
titleBarHeight:h,
})
},
/**
* 组件的方法列表
*/
... ... @@ -27,14 +57,55 @@ Component({
hidden:true,
})
},
active(e){
this.triggerEvent('active',util.attr(e,'index'));
this.hide();
},
show(){
this.setData({
hidden:false,
})
},
getList(mapParam){
this.offset=1 //page
this.size=20 //page size
//计算视窗中心
let map=JSON.parse(mapParam.map);
let lat=map.northeast.latitude-(map.northeast.latitude-map.southwest.latitude)/2;
let lng=map.northeast.longitude-(map.northeast.longitude-map.southwest.longitude)/2;
this.param={
lat:lat,
lng:lng,
lat_extend:mapParam.lat,
lng_extend:mapParam.lng,
offset:this.offset,
size:this.size,
distance:50,
};
if(mapParam.tags){
this.param.tags=mapParam.tags
}
if(mapParam.cuisine){
this.param.cuisine=mapParam.cuisine
}
App.Customer.SellerLists(this.param).then(res=>{
this.setData({
hasMore:res.data.length==this.size,
markers:res.data,
})
this.triggerEvent('event',{type:'getListEnd',total:res.data.length})
})
},
getListMore(){
this.param.offset+=1;
App.Customer.SellerLists(this.param).then(res=>{
this.setData({
hasMore:res.data.length==this.size,
markers:this.data.markers.concat(res.data),
})
})
},
caixiShow(){
this.triggerEvent('event',{type:'caixiShow'})
},
tagsChange(e){
this.triggerEvent('event',{type:'tagsChange',e:e})
},
}
})
... ...
<!--components/reserve/caixi.wxml-->
<cover-view class="mask" catchtap="hide" hidden="{{hidden}}">
<cover-view class="list" catchtap="">
<cover-view class="mask" hidden="{{hidden}}">
<cover-view class="header flex-lr" style="height: {{titleBarHeight}}px;padding-top: {{statusBarHeight}}px;" catchtap="hide">
<cover-view class="searchList flex-ll">
<cover-image class="icon" src="http://qn.colorcun.com/reserve/images/hasMap.png"></cover-image>
<cover-view class="title">地图</cover-view>
</cover-view>
<cover-view class="title" style="line-height: {{titleBarHeight}}px;height:{{titleBarHeight}}px;">一键订</cover-view>
<cover-view class="icon"></cover-view>
</cover-view>
<cover-view class="transverse-search flex-ll">
<cover-view
bindtap="caixiShow"
class="tags {{multiIndex[0]>0?'active':''}}"
>
<cover-view class="picker flex-lr">
<cover-view class="input">
<block wx:if="{{multiIndex[0]==0}}">菜系</block>
<block wx:else="">{{multiArray[0][multiIndex[0]]}}</block>
</cover-view>
<cover-view class="more"></cover-view>
</cover-view>
</cover-view>
<block wx:for="{{tags}}" wx:key="tags.key">
<cover-view class="tags {{item.active?'active':''}}"
bindtap="tagsChange"
data-id="{{item.id}}">{{item.name}}</cover-view>
</block>
</cover-view>
<cover-view class="list" catchtap="" style="top:{{statusBarHeight+titleBarHeight+30}}px;">
<cover-view class="seller" id="seller-{{item.id}}" wx:for="{{markers}}" wx:key="markers.key">
<sb-tr seller="{{item.seller}}" hasActivityTags="{{true}}"></sb-tr>
<sb-tr seller="{{item}}" hasActivityTags="{{true}}"></sb-tr>
</cover-view>
<cover-view class="seller flex-vc" style="font-size: 28rpx;color:#999;" bindtap="{{hasMore?'getListMore':''}}">
{{hasMore?'点击加载更多商家':'没有更多商家了'}}
</cover-view>
</cover-view>
</cover-view>
... ...
... ... @@ -5,12 +5,89 @@
position: fixed;
bottom: 0;
width: 95%;
border-radius: 10rpx 10rpx 0 0;
padding: 40rpx 0 60rpx 5%;
padding: 40rpx 0 40rpx 5%;
color: #353535;
height: 80%;
overflow-y:scroll;
}
.seller{
margin-bottom: 40rpx;
}
.header{
background-color: #fefefe;
width: 100%;
}
.header .title{
font-size: 34rpx;
}
.header .icon{
min-width: 100rpx;
width: 100rpx;
}
.searchList{
margin-left: 26rpx;
width: 100rpx;
height: 60rpx;
background-color: #fefefe;
border-radius: 30rpx;
line-height: 60rpx;
color:#C28C56;
}
.searchList .icon{
min-width: 24rpx;
width: 24rpx;
height: 24rpx;
margin: 0 8rpx 0 14rpx;
}
.searchList .title{
line-height: 60rpx;
height: 60rpx;
overflow: hidden;
width: 100%;
text-align: left;
font-size: 20rpx;
}
.transverse-search{
background-color: #fefefe;
height: 60rpx;
width: 100%;
margin: 0 auto;
font-size: 24rpx;
padding-left: 40rpx;
}
.transverse-search .tags{
height: 50rpx;
line-height: 50rpx;
background-color: #F0F0F9;
border-radius: 4rpx;
margin-right: 30rpx;
padding: 0 16rpx;
}
.transverse-search .tags:last-child{
margin-right: 0;
}
.transverse-search .tags.active{
background-color: #F4DAB9;
color:#8B5318;
font-weight: 900;
}
.picker{
height: 50rpx;
line-height: 50rpx;
}
.picker .input{
height: 50rpx;
line-height: 50rpx;
margin-right: 10rpx;
}
.picker .more{
background-image: url("http://qn.colorcun.com/reserve/images/%E8%8F%9C%E7%B3%BB.png");
width: 12rpx;
height: 16rpx;
min-width:12rpx;
}
.tags.active .picker .more{
background-image: url("http://qn.colorcun.com/reserve/images/%E8%8F%9C%E7%B3%BB%E9%80%89%E4%B8%AD.png");
}
\ No newline at end of file
... ...
... ... @@ -11,7 +11,7 @@
<cover-view wx:if="{{hasSlogan && seller.slogan}}" class="slogan">“{{seller.slogan}}”</cover-view>
<cover-view class="text flex-ll">
<cover-view class="text-item" wx:if="{{seller.cate[0].name}}">{{seller.cate[0].name}}</cover-view>
<cover-view class="text-item" wx:if="{{seller.distance}}">距当前位置{{seller.distance}}</cover-view>
<cover-view class="text-item" wx:if="{{seller.distance}}">距当前位置{{se.distance}}</cover-view>
</cover-view>
<cover-view wx:if="{{hasStat}}" class="stat">
<stat stat="{{seller.score}}"></stat>
... ...
... ... @@ -6,7 +6,7 @@ import DA from './data';
import reddot from '../../utils/reddot';
const {regeneratorRuntime} = global
const mapScale=15//18;
const transverseViewHeight=202;
const transverseViewHeight=232;
const renNum=function(){
let arr=[]
for(let i=1;i<=30;i++){
... ... @@ -46,7 +46,8 @@ Page({
{id:1,name:'环境好'},
{id:2,name:'菜品有特色'},
{id:3,name:'超大包间'},
]
],
listMoreCount:0,
},
hasClickMoveToLocation:false,//点击回到我的位置
hasSellerConcat:hasSellerConcat,
... ... @@ -413,6 +414,7 @@ Page({
if(tags.length>0){
param.tags=tags;
}
this.selectComponent('#list').getList(param);
let now_sid=[];
App.Customer.SellerList(param).then(res => {
this.mapData.region.southwest.latitude='';
... ... @@ -649,6 +651,7 @@ Page({
}
})
}
if(mks.length<1) return mks;
//if(this.data.hasSuggestion){
let map = this.data.map;
mks.push({
... ... @@ -702,4 +705,20 @@ Page({
caixiShow(){
this.selectComponent('#caixi').show();
},
listEvent(e){
let d=e.detail
console.log('listEvent',e);
if(d.type=="getListEnd"){
this.setData({
listMoreCount:d.total
});
}else if(d.type=='caixiShow'){
this.caixiShow();
}else if(d.type=='tagsChange'){
this.tagsChange(d.e);
}
},
listShow(){
this.selectComponent('#list').show();
},
})
\ No newline at end of file
... ...
... ... @@ -17,8 +17,12 @@
style="width: 100%; height: {{map.height}}px;"></map>
<formids url="/pages/reserve/search" style="position: fixed;">
<cover-view
class="flex-vc"
class="flex-ll"
style="position:fixed;top:{{statusBarHeight}}px;left:0;height: {{titleBarHeight}}px; line-height: {{titleBarHeight}}px;">
<cover-view class="searchList flex-ll" catchtap="listShow">
<cover-image class="icon" src="http://qn.colorcun.com/reserve/images/hasList.png"></cover-image>
<cover-view class="title">列表</cover-view>
</cover-view>
<cover-view class="searchAddr flex-ll">
<cover-image class="icon" src="http://qn.colorcun.com/custom/lite-online/image/search26.png"></cover-image>
<cover-view class="title">{{hasSuggestion?suggestion.title:'搜索地点或商圈'}}</cover-view>
... ... @@ -27,6 +31,10 @@
</formids>
</view>
<view class="transverse-view">
<view class="flex-vc transverse-view-top" bindtap="listShow">
<view class="line"></view>
<view class="text">{{markers.length>0?'查看其它':'已扩大范围为你找到'}}{{listMoreCount}}家餐厅</view>
</view>
<view class="transverse-search flex-ll">
<view
bindtap="caixiShow"
... ... @@ -59,13 +67,24 @@
</view>
</swiper-item>
</block>
<swiper-item bindtap="gotoDetail2">
<view class="seller seller-last" id="seller-last">
<view class="empty">
<view class="info">
<view class="info-msg Semibold">缩放地图发现更多餐厅</view>
<view class="info-txt">往任意方向拖动地图，可搜索不同范围</view>
</view>
<view class="icon"></view>
</view>
</view>
</swiper-item>
</swiper>
<view class="empty-txt flex-vc">
<view class="seller" wx:if="{{hasGetSellersEnd}}">
<view class="empty">
<view class="empty" bindtap="listShow">
<view class="info">
<view class="info-msg Semibold">拖动地图发现更多商户</view>
<view class="info-txt">往任意方向拖动地图，可搜索不同范围</view>
<view class="info-msg Semibold">已扩大范围为你找到餐厅，去查看</view>
<view class="info-txt">当前范围没有找到符合条件的餐厅</view>
</view>
<view class="icon"></view>
</view>
... ... @@ -82,7 +101,8 @@
<cover-view class="tab-patch"></cover-view>
<ds wx:if="{{hasSetActivity}}" map="{{map}}" id="ds"></ds>
<a2l bindshow="a2lshow" bindhide="a2lshow"></a2l>
<list id="list" bindevent="listEvent"
multiArray="{{multiArray}}" multiIndex="{{multiIndex}}" tags="{{tags}}"></list>
<caixi multiArray="{{multiArray}}" multiIndex="{{multiIndex}}"
bindactive="caixiActive" id="caixi"
></caixi>
<list id="list" markers="{{markers}}"></list>
bindactive="caixiActive" id="caixi"
></caixi>
\ No newline at end of file
... ...
... ... @@ -16,7 +16,7 @@
}
.moveToLocation{
position: fixed;
bottom: 454rpx;
bottom: 504rpx;
left: 20rpx;
width: 62rpx;
height: 62rpx;
... ... @@ -28,20 +28,12 @@
.transverse-view{
position: relative;
height: 404rpx;
height: 464rpx;
width: 100%;
background-color: #fefefe;
overflow: hidden;
}
.transverse-view-top{
border-radius: 20rpx 20rpx 0rpx 0rpx;
background-color: #fefefe;
position: absolute;
top:-20rpx;
left: 0;
width: 100%;
height: 0rpx;
}
.transverse-search{
background-color: #fefefe;
height: 60rpx;
... ... @@ -73,6 +65,9 @@
position: relative;
margin: 20rpx auto 0;
}
.transverse-list .seller-last .empty{
width: 100%;
}
.seller .empty .info{
height: 124rpx;
font-size: 28rpx;
... ... @@ -91,6 +86,15 @@
height: 40rpx;
}
.seller .empty .icon{
background-image: url("http://qn.colorcun.com/reserve/images/hasClick.png");
background-size: 100% 100%;
width: 54rpx;
height: 56rpx;
position: absolute;
top:82rpx;
right:40rpx;
}
.seller-last .empty .icon{
background-image: url("http://qn.colorcun.com/reserve/images/%E7%A7%BB%E5%8A%A8%E5%9C%B0%E5%9B%BE.png");
background-size: 100% 100%;
width: 116rpx;
... ... @@ -120,8 +124,8 @@
}
.searchAddr {
margin-left: 38rpx;
width: 450rpx;
margin-left: 30rpx;
width: 380rpx;
height: 60rpx;
background-color: #fefefe;
border-radius: 30rpx;
... ... @@ -142,6 +146,29 @@
width: 100%;
text-align: left;
}
.searchList{
margin-left: 26rpx;
width: 100rpx;
height: 60rpx;
background-color: #fefefe;
border-radius: 30rpx;
line-height: 60rpx;
color:#C28C56;
font-size: 20rpx;
}
.searchList .icon{
min-width: 24rpx;
width: 24rpx;
height: 18rpx;
margin: 0 8rpx 0 14rpx;
}
.searchList .title{
line-height: 60rpx;
height: 60rpx;
overflow: hidden;
width: 100%;
text-align: left;
}
.empty-txt{
height: 300rpx;
line-height: 300rpx;
... ... @@ -163,4 +190,21 @@
background:linear-gradient(to bottom ,#F4DAB9,#E9BE94);
color:#8B5318;
font-weight: 900;
}
.transverse-view-top{
height: 60rpx;
}
.transverse-view-top .line{
height: 6rpx;
width: 70rpx;
margin-top: 14rpx;
background-color: #E0E0E0;
}
.transverse-view-top .text{
height: 34rpx;
line-height: 34rpx;
font-size: 24rpx;
color: #999999;
margin-top: 4rpx;
}
\ No newline at end of file
... ...
... ... @@ -56,9 +56,12 @@ export default {
silence: false,
},
//商家列表
//地图页-商家
'App.Customer.SellerList': null,
//地图页-商家-列表
'App.Customer.SellerLists':null,
//桌位列表
'App.Tables.GetTableListsBySellerId': {
cachetime: 60,
... ...