xt / xcx-book · Commits

Go to a project

Commit cc631333a5b100d761a931d929b8c08d02192e63

Authored by vking
1 parent 3b6dffa1
build: skipped

new 2.0

Inline Side-by-side
Showing 27 changed files with 679 additions and 24 deletions
// components/reserve/caixi.js
import util from '../../../utils/util';
Component({
/**
* 组件的属性列表
*/
properties: {
multiArray:{
type:Array,
value:[],
},
multiIndex:{
type:Array,
value:[],
},
},
/**
* 组件的初始数据
*/
data: {
hidden:true
},
/**
* 组件的方法列表
*/
methods: {
hide(){
this.setData({
hidden:true,
})
},
active(e){
this.triggerEvent('active',util.attr(e,'index'));
this.hide();
},
show(){
this.setData({
hidden:false,
})
},
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--components/reserve/caixi.wxml-->
<view class="caixi" catchtap="hide" hidden="{{hidden}}">
<view class="caixi-view">
<view class="item {{index==multiIndex[0]?'active':''}}"
bindtap="active" data-index="{{index}}"
wx:for="{{multiArray[0]}}" wx:key="multiArraykey">
{{item}}
<image class="number" wx:if="{{index>=1 && index<4}}" src="http://nosqn.colorcun.com/reserve/images/cx{{index}}.png"></image>
</view>
</view>
</view>
... ...
/* components/reserve/caixi.wxss */
@import "../../../app.wxss";
.caixi{
background-color: #fefefe;
position: absolute;
width: calc(100% - 80rpx);
border-radius: 0rpx 0rpx 40rpx 40rpx;
padding: 0rpx 40rpx 30rpx;
color: #353535;
margin-top: 20rpx;
}
.caixi-view{
}
.item{
background-color: #F0F0F9;
width: 150rpx;
height: 70rpx;
overflow: hidden;
white-space:nowrap;
border-radius: 4rpx;
line-height: 70rpx;
font-size: 24rpx;
text-align: center;
margin-bottom: 30rpx;
position: relative;
display: inline-block;
margin-right: calc((100% - 600rpx) / 3);
}
.item:nth-child(4n){
margin-right:0;
}
.item.active{
background: #E6F3FF;
color:#42A5FF;
font-weight: 900;
}
.item .number{
width: 30rpx;
height: 26rpx;
position: absolute;
top:0;
left: 0;
}
\ No newline at end of file
... ...
// components/2.0/filter/filter-group.js
import DA from '../../../pages/reserve/data';
Component({
/**
* 组件的属性列表
*/
properties: {
height:Number,
},
/**
* 组件的初始数据
*/
data: {
multiArray: ['全部菜系'],
multiIndex: [0],
tags: [
{id: 1, name: '环境好'},
{id: 2, name: '菜品有特色'},
{id: 3, name: '超大包间'},
],
caixiOpened:false,
filterOpened:false,
},
attached(){
this.init()
this.filterParams= null
},
/**
* 组件的方法列表
*/
methods: {
async init(){
this.setData({
multiArray: [['全部菜系'].concat(await DA.getCates())]
})
},
caixiActive(e) {
console.log('caixiActive', e);
this.setData({
multiIndex: [e.detail]
})
this.hide()
},
caixiShow() {
if(this.data.caixiOpened){
this.selectComponent('#caixi').hide();
this.setData({
caixiOpened:false,
})
}else{
this.selectComponent('#filter').hide();
this.selectComponent('#caixi').show();
this.setData({
caixiOpened:true,
filterOpened:false,
})
}
},
filterShow() {
if(this.data.filterOpened){
this.selectComponent('#filter').hide();
this.setData({
filterOpened:false,
})
}else{
this.selectComponent('#caixi').hide();
this.selectComponent('#filter').show(this.filterParams);
this.setData({
filterOpened:true,
caixiOpened:false,
})
}
},
filterEvent(e) {
console.log('filterEvent', e)
if (e.detail.type == 'clean') {
this.filterParams = null
this.setData({
filterParams: null,
})
} else {
this.filterParams = e.detail.data
this.setData({
filterParams: this.filterParams,
})
}
},
hide(){
this.selectComponent('#caixi').hide();
this.selectComponent('#filter').hide();
this.setData({
filterOpened:false,
caixiOpened:false,
})
},
}
})
... ...
{
"component": true,
"usingComponents": {
"caixi":"./caixi",
"filter":"./filter"
}
}
\ No newline at end of file
... ...
<!--components/2.0/filter/filter-group.wxml-->
<view class="view filter-group-view {{caixiOpened || filterOpened?'mask':''}}"
bindtap="hide"
style="height: {{caixiOpened || filterOpened?height+'px':'auto'}};">
<view catchtap="catchtap"
class="view bg-white flex flex-sub filter-group padding-top padding-left-lg padding-right-lg padding-bottom-sm {{caixiOpened || filterOpened?'filter-group-opened':''}}">
<view class="view cu-tag round {{caixiOpened?'opened text-blue':''}} {{multiIndex[0]>0?'bg-blue light':''}} " bindtap="caixiShow">
<block wx:if="{{multiIndex[0]==0}}">菜系</block>
<block wx:else="">{{multiArray[0][multiIndex[0]]}}</block>
<view class="more view"></view>
</view>
<block wx:for="{{tags}}" wx:key="tags.key">
<view class="view cu-tag round {{item.active?'bg-blue light':''}}"
bindtap="tagsChange"
data-id="{{item.id}}">{{item.name}}</view>
</block>
<view class="view cu-tag round {{filterOpened?'opened text-blue':''}} {{filterParams.consumeStr?'bg-blue light':''}}" bindtap="filterShow">
{{filterParams.consumeStr?filterParams.consumeStr:'筛选'}}
<view class="more view"></view>
</view>
</view>
<view class="opened-block bg-white" catchtap="catchtap">
<caixi multiArray="{{multiArray}}" multiIndex="{{multiIndex}}"
bindactive="caixiActive" id="caixi"
></caixi>
<filter id="filter" bindevent="filterEvent"></filter>
</view>
</view>
... ...
/* components/2.0/filter/filter-group.wxss */
@import "../../../colorui/main.wxss";
.cu-tag+.cu-tag{
margin-left: 20rpx;
}
.more{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2815%29.png");
width: 12rpx;
height: 6rpx;
margin-left: 6rpx;
}
.light .more{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2814%29.png");
}
.opened .more{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2813%29.png");
}
.opened-block{
position: relative;
}
.filter-group-view{
position: relative;
z-index: 10000;
}
.filter-group{
position: relative;
z-index: 10000;
overflow-x: auto;
}
.filter-group:after{
display: block;
content: "";
min-width: 40rpx;
height: 40rpx;
}
.filter-group-opened{}
.mask:before{
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-color: rgba(0,0,0,0.5);
}
\ No newline at end of file
... ...
// components/reserve/search/filter.js
import util from '../../../utils/util'
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
consumeStr:'',
hasDisplay:false,
},
attached(){
this.min=0
this.max=300
},
/**
* 组件的方法列表
*/
methods: {
consumeEvent(e){
console.log('consumeEvent',e)
let data={
hasChange:true,
}
if(e.detail.type=='once'){
this.min=e.detail.min
this.max=e.detail.max
}else{
this[e.detail.type]=e.detail.value
}
let consumeStr=''
if(this.min==0){
if(this.max>this.min){
consumeStr='¥'+this.max+'以下'
}
}else{
if(this.min<300){
consumeStr='¥'+this.min+'-'+this.max
}else{
consumeStr='¥'+this.min+'以上'
}
}
let obj={
consumeStr:consumeStr,
}
if(e.detail.type!='once'){
obj.active=''
}
this.setData(obj)
},
changeVal(e){
let active=util.attr(e,'val')
let val=active.split(',')
this.min=val[0]
this.max=val[1]
this.setData({
active:active,
})
this.selectComponent('#consume').changeVal(this.min,this.max);
},
hide(){
this.setData({
hasDisplay:false,
})
},
show(filterParams=null){
let obj={
hasDisplay:true,
}
if(filterParams){
if(filterParams.active){
obj.active=filterParams.active
}
this.min=filterParams.min
this.max=filterParams.max
obj.consumeStr=filterParams.consumeStr||''
}
this.setData(obj)
if(filterParams){
setTimeout(()=>{
this.selectComponent('#consume').changeVal(this.min,this.max);
},0)
}else{
setTimeout(()=>{
this.selectComponent('#consume').changeVal(0,300);
this.setData({
active:'',
consumeStr:'',
})
},0)
}
},
submit(){
this.triggerEvent('event',{
type:'set',
data:{
consumeStr:this.data.consumeStr||'',
min:this.min,
max:this.max,
active:this.data.active||'',
},
})
this.close()
},
reset(){
this.selectComponent('#consume').changeVal(0,300);
this.setData({
active:'',
consumeStr:'',
})
this.triggerEvent('event',{type:'clean'})
this.close()
},
}
})
... ...
{
"component": true,
"usingComponents": {
"consume":"/components/stat/zyslider"
}
}
\ No newline at end of file
... ...
<!--components/reserve/search/filter.wxml-->
<view class="filter" catchtap="catchtap" wx:if="{{hasDisplay}}">
<view class="part flex-ll">
人均消费
<view class="txt" wx:if="{{consumeStr}}">{{consumeStr}}</view>
</view>
<view class="flex-lr tips">
<view class="content">¥0</view>
<view class="content">¥300以上</view>
</view>
<view class="consume flex-vc">
<consume style="width:99%;" id="consume"
cla="slider20"
minValue="0" maxValue="300" min="0" max="300"
step="10"
blockColor="#fefefe"
backgroundColor="#42A5FF"
selectedColor="#42A5FF"
bindevent="consumeEvent">
</consume>
</view>
<view class="flex-lr split">
<view class="item {{active=='0,100'?'active':''}}" bindtap="changeVal" data-val="0,100">¥100以下</view>
<view class="item {{active=='100,200'?'active':''}}" bindtap="changeVal" data-val="100,200">¥100-200</view>
<view class="item {{active=='200,300'?'active':''}}" bindtap="changeVal" data-val="200,300">¥200-300</view>
<view class="item {{active=='300,300'?'active':''}}" bindtap="changeVal" data-val="300,300">¥300以上</view>
</view>
<view class="flex-lr buttons">
<view class="reset" bindtap="reset">重置</view>
<view class="submit" bindtap="submit">完成</view>
</view>
</view>
... ...
/* components/reserve/search/filter.wxss */
@import "../../../app.wxss";
.filter{
position: absolute;
width: 100%;
background-color: #fefefe;
z-index: 9999;
padding: 20rpx 40rpx 0;
box-sizing: border-box;
border-radius: 0px 0px 40rpx 40rpx;
}
.part{
height: 48rpx;
font-size: 34rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #353535;
line-height: 48rpx;
}
.part .txt{
height: 48rpx;
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #42A5FF;
line-height: 48rpx;
margin-left: 30rpx;
}
.tips{
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
line-height: 40rpx;
margin-top: 40rpx;
}
.tips .content{
width: 130rpx;
text-align: center;
}
.consume{
margin: 0rpx auto;
width: calc(100% - 60rpx);
height: 80rpx;
overflow: hidden;
}
.split{
margin-top: 60rpx;
}
.split .item{
width: calc(calc(100% - 66rpx) / 4);
margin-right: 22rpx;
height: 84rpx;
background: #F0F0F9;
border-radius: 6rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
line-height: 84rpx;
text-align: center;
}
.split .item:last-child{
margin-right: 0;
}
.split .item.active{
background: #E6F3FF;
color: #42A5FF;
}
.buttons{
width: calc(100% + 100rpx);
margin-left: -50rpx;
margin-top: 60rpx;
box-shadow: 0px 0px 8rpx 0px #EEF0F2;
border-radius: 0px 0px 40rpx 40rpx;
padding: 20rpx 50rpx;
box-sizing: border-box;
}
.buttons .reset,.buttons .submit{
width: calc(50% - 25rpx);
height: 80rpx;
background: #F2F2F2;
border-radius: 40rpx;
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #42A5FF;
line-height: 80rpx;
text-align: center;
box-sizing: border-box;
}
.buttons .submit{
margin-left: 50rpx;
background: #42A5FF;
color: #FFFFFF;
}
\ No newline at end of file
... ...
// components/2.0/seller/card.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--components/2.0/seller/card.wxml-->
<text>components/2.0/seller/card.wxml</text>
... ...
/* components/2.0/seller/card.wxss */
\ No newline at end of file
... ...
... ... @@ -6,6 +6,7 @@ Component({
*/
properties: {
/** slider 最小值 */
cla:String,//额外样式名称
min: {
type: Number
},
... ...
<!--component/zyslider.wxml-->
<slot></slot>
<view class="container {{hideOption}}">
<view class="container {{cla}} {{hideOption}}">
<view class="slider-item min" style="left:{{leftValue}}rpx;background-color:{{blockColor}};" catchtouchmove="sliderMove" data-type="min"></view>
<view class="slider-item max" style="left:{{rightValue}}rpx;background-color:{{blockColor}};" catchtouchmove="sliderMove" data-type="max"></view>
... ...
... ... @@ -39,6 +39,10 @@
border-radius: 50%;
z-index: 2;
}
.slider20 .slider-item{
box-shadow: 0px 4prx 8rpx 0px #E6F3FF;
border: 2rpx solid #E6F3FF;
}
.min {
position: relative;
... ...
... ... @@ -32,6 +32,7 @@ Component({
this.hide();
}else{
let p=getCurrentPages()
console.log('add-to-lite.attached',p)
if(p.length==1){
this.show();
}
... ... @@ -45,7 +46,7 @@ Component({
show(){
this.triggerEvent("show");
//导航栏自适应
if(this.data.type=='yellow'){
if(this.data.type=='black20'){
let systemInfo = wx.getSystemInfoSync();
let reg = /ios/i;
let pt = 20;//导航状态栏上内边距
... ...
... ... @@ -2,15 +2,13 @@
<view class="tip {{type}}" style="top:{{statusBarHeightFull}}px;" bindtap="hide" hidden="{{hidden}}">
<view class="jian"></view>
<view class="content flex-lr" bindtap="hide">
<view class="flex-vc" wx:if="{{type=='yellow'}}">
<view class="flex-ll text">
<view class="flex-vc" wx:if="{{type=='black20'}}">
<view class="flex-ll text title">
点击
<view class="more"></view>
添加到我的小程序
</view>
<view class="text flex-ll">微信下拉即可快速
<view class="Semibold">订包间</view>
</view>
<view class="text">微信下拉即可快速订包间</view>
</view>
<view class="flex-ll" wx:else="">
<view class="flex-ll text">
... ...
... ... @@ -89,4 +89,53 @@
}
.tip.black .more{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201911181208294.png");
}
.tip.black20{
width: 436rpx;
right: 20rpx;
font-size:20rpx;
font-weight:500;
position: fixed;
z-index: 99;
}
.tip.black20 .content{
height:114rpx;
line-height: 100rpx;
background:rgba(0,0,0,0.7);
border-radius:20rpx;
color:#FFFFFF;
}
.tip.black20 .more{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%282%29.png");
width: 32rpx;
height: 12rpx;
}
.tip.black20 .close{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%283%29.png");
width: 20rpx;
height: 20rpx;
}
.tip.black20 .jian{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%281%29.png");
width: 72rpx;
height: 54rpx;
margin-left: 230rpx;
}
.tip.black20 .text{
height: 32rpx;
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 32rpx;
}
.tip.black20 .title{
height: 36rpx;
font-size: 26rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 36rpx;
margin-bottom: 6rpx;
}
\ No newline at end of file
... ...
... ... @@ -31,10 +31,6 @@ Component({
*/
methods: {
getPos(fouce=false){
this.selectComponent('#confirm').options({
header: '定位失败',
body: '请开启定位，为您查询附近餐厅。'
}).show();
this._getPos().then(res => {
console.log('wx.getLocation.then', res);
failCount=0;
... ...
// pages/reservr/index.js
import util from '../../utils/util';
import App from '../../utils/api';
import DA from './data';
import PubSub from '../../utils/PubSub'
const {regeneratorRuntime} = global
const mapScale = 15//18;
... ... @@ -10,13 +9,21 @@ const def_longitude = 118.176300;
Page({
data:{
map:{},
height:1000,
},
user:{},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.getSystemInfo({
success:res=>{
console.log('wx.getSystemInfo',res)
this.setData({
height:res.windowHeight-180
})
},
})
},
/**
... ... @@ -31,7 +38,6 @@ Page({
*/
onShow: function () {
PubSub.emit('custom-tab-bar')
},
/**
... ...
... ... @@ -3,16 +3,9 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText":"周到安排",
"usingComponents": {
"formids":"/components/formids/formids",
"nav":"/components/nav/nav",
"getpos":"/components/userinfo/getpos",
"sb-tr":"/components/reserve/seller-box-transverse/seller-box",
"a2l":"/components/tips/add-to-lite",
"boost":"/components/tips/boost",
"caixi":"/components/reserve/caixi",
"activity-enter":"/components/activity/enter",
"as-phone":"/components/actionSheet/phone",
"activity-tips":"/components/tips/discount",
"filter":"/components/reserve/search/filter"
"filter-group":"/components/2.0/filter/filter-group"
}
}
\ No newline at end of file
... ...
... ... @@ -14,13 +14,18 @@
subkey="SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ"
layer-style="2"
style="width: 100%; height: 360rpx;"></map>
<view class="view">
<view class="view content" style="height: {{height}}px;">
<filter-group height="{{height}}"></filter-group>
</view>
<getpos bindpos="onpos" id="getpos"></getpos>
<view bindtap="moveToLocation" class="view moveToLocation flex align-center justify-center">
<image class="moveToLocation-image" src="http://nosqn.colorcun.com/2.0/home%20%2811%29.png"></image>
</view>
<view class="me view flex flex-direction align-center justify-center bg-white round">
<view class="icon view"></view>
<view class="text">我的</view>
</view>
<!--
<view class="toast" wx:if="{{hasGetSellersEnd && listMoreCount<1 && !hasSearchLimit}}">该地区没有可供预订的餐厅哦！努力开通中</view>
... ... @@ -37,4 +42,5 @@
<activity-tips wx:if="{{hasSetActivity}}" map="{{map}}"></activity-tips>
<as-phone id="as"></as-phone>
<filter id="filter" bindevent="filterEvent"></filter>
-->
\ No newline at end of file
-->
<a2l bindshow="a2lshow" bindhide="a2lshow" key="INDEX" type="black20"></a2l>
\ No newline at end of file
... ...
... ... @@ -14,4 +14,31 @@ page{
.moveToLocation-image{
width: 40rpx;
height: 40rpx;
}
.me{
width: 84rpx;
height: 84rpx;
box-shadow: 0px 0px 10rpx 0rpx #E5E5E5;
position: fixed;
left:30rpx;
top:40rpx;
}
.me .icon{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%284%29.png");
width: 32rpx;
height: 32rpx;
}
.me .text{
font-size: 20rpx;
font-weight: 400;
color: #5EB2FF;
line-height: 28rpx;
white-space:nowrap;
}
.content{
width: 100%;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 20rpx 0rpx #E5E5E5;
border-radius: 40rpx 40rpx 0rpx 0rpx;
overflow: hidden;
}
\ No newline at end of file
... ...