xt / xcx-book · Commits

Go to a project

Commit 81c7ef61054afb9fc15ada10ed101a24ae203407

Authored by Yolanda
1 parent ec911267
build: skipped

短信测试

Inline Side-by-side
Showing 97 changed files with 90 additions and 4534 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 97 of 97+ files are displayed.

{
"permissions": {
"openapi": [
"urlscheme.generate"
]
}
}
\ No newline at end of file
... ...
//云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init();
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
console.log(event,'tttttttt')
switch (event.action) {
case 'getUrlScheme': {
return getUrlScheme(event);
}
}
return 'action not found'
}
async function getUrlScheme(event) {
return cloud.openapi.urlscheme.generate({
jumpWxa: {
path: event.path,
query: event.query,
}
})
}
\ No newline at end of file
... ...
{
"name": "common",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"wx-server-sdk": "~2.4.0"
}
}
\ No newline at end of file
... ...
{
"permissions": {
"openapi": [
"urlscheme.generate"
]
}
}
\ No newline at end of file
... ...
... ... @@ -6,21 +6,21 @@ cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
console.log(event,'tttttttt')
switch (event.action) {
case 'getUrlScheme': {
return getUrlScheme()
return getUrlScheme(event)
}
}
return 'action not found'
}
async function getUrlScheme() {
async function getUrlScheme(event) {
return cloud.openapi.urlscheme.generate({
jumpWxa: {
path: 'weixin://dl/business/?t=GC8I0gF6Bad', // <!-- replace -->
query: '',
path: event.path, // <!-- replace -->
query: event.query,
},
// 如果想不过期则置为 false，并可以存到数据库
isExpire: false,
... ...
{
"permissions": {
"openapi": [
"cloudbase.sendSms"
]
}
}
\ No newline at end of file
... ...
const cloud = require('wx-server-sdk');
console.log('gggggggg')
cloud.init();
exports.main = async (event, context) => {
console.log(event,'ttttt');
try {
const result = await cloud.openapi.cloudbase.sendSms({
env: 'suzi-714ca6',
content: event.content,
path: event.path,
phoneNumberList: event.phoneNumberList,
})
return result
} catch (err) {
return err
}
}
... ...
{
"name": "sms",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"wx-server-sdk": "~2.4.0"
}
}
... ...
painter @ ef9e4373
Subproject commit ef9e437398fb26868088b85a71dfc3076605cfd4
// components/reserve/search/how/hv/date.js
var myBehavior = require('hv_behavior')
const items=(function(){
let today=parseInt(new Date()/1000);
let ds=[]
for(let i=0;i<15;i++){
ds.push(today+86400*i)
}
return ds
})()
Component({
behaviors: [myBehavior],
data:{
items:items,
},
lifetimes: {
created: function () {
// 在组件实例进入页面节点树时执行
this.type='date'
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
/**
* 组件的方法列表
*/
methods: {
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/reserve/search/how/hv/date.wxml-->
<wxs src="../../../../utils/util.wxs" module="util" />
<swiper previous-margin="35rpx" next-margin="45rpx"
class="tabs" current="{{current}}"
display-multiple-items="5">
<swiper-item wx:for="{{items}}" wx:key="items">
<view class="item {{spi==index?'active':''}} flex-vc" bindtap="checked" data-index="{{index}}" data-val="{{item}}" data-type="date">
<view class="name">{{util.unixtoTime(item,'DAY')||util.unixtoTime(item,'周WW')}}</view>
<view class="mmdd">{{util.unixtoTime(item,'MM.DD')}}</view>
</view>
</swiper-item>
</swiper>
// components/reserve/search/how/hv/pnum.js
var myBehavior = require('hv_behavior')
const items=[
{id:1,label:'早餐'},
{id:2,label:'午餐'},
{id:3,label:'晚餐'},
{},
{},
]
Component({
behaviors: [myBehavior],
data:{
items:items,
},
lifetimes: {
created: function () {
// 在组件实例进入页面节点树时执行
this.type='dur'
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
/**
* 组件的方法列表
*/
methods: {
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/reserve/search/how/dur.wxml-->
<swiper previous-margin="35rpx" next-margin="45rpx"
class="tabs"
display-multiple-items="5">
<swiper-item wx:for="{{items}}" wx:key="items">
<view class="item {{spi==index?'active':''}} flex-vc"
bindtap="{{index>2?'':'checked'}}"
data-index="{{index}}"
data-val="{{item.id}}"
data-type="dur">
<view class="name">{{item.label}}</view>
</view>
</swiper-item>
</swiper>
/* components/reserve/search/how/dur.wxss */
@import "hv_behavior.wxss";
// components/reserve/search/how/hv.js
import util from '../../../../utils/util'
module.exports = Behavior({
properties: {
ckdata:{
type:Object,
val:null,
},
},
data: {
spi:-1
},
observers: {
'ckdata': function() {
this.checkedDefEvent()
}
},
methods: {
checked(e,hasCurrent=false){
let index=util.attr(e,'index')
let val=util.attr(e,'val')
let type=util.attr(e,'type')
let obj={
spi:index,
}
if(hasCurrent){
let current=index-2
if(type=='date'){
current=current>10?10:current
}else if(type=='pnum'){
current=current>26?26:current
}
obj.current=current>-1?current:0
}
this.setData(obj)
this.triggerEvent('event',{index,val,type})
},
checkedDefEvent(){
console.log('this.type',this.type)
let type=this.type
let ckdata = {}
if (!this.data.ckdata) {//初始化值
if(type == 'dur') return;
let index, val
if (type == 'pnum') {
index = 3
val = this.data.items[index]
} else if (type == 'date') {
index = 0
val = this.data.items[index]
}
ckdata = {index, val, type}
}else{
ckdata = this.data.ckdata
}
this.checked({currentTarget:{dataset:ckdata}},true)
},
}
})
\ No newline at end of file
/* components/reserve/search/how/hv.wxss */
@import "../../../../app.wxss";
.tabs {
height: 100rpx;
}
.tabs .item{
width:120rpx;
height:100rpx;
line-height: 100rpx;
border-radius:10rpx;
border:2rpx solid #fffff;
font-size:30rpx;
font-weight:600;
color:#353535;
text-align: center;
box-sizing: border-box;
}
.tabs .item.active{
border-radius:10rpx;
background:rgba(255,245,235,1);
border:2px solid rgba(195,165,108,1);
color:rgba(192,163,105,1);
}
\ No newline at end of file
// components/reserve/search/how/index.js
import util from '../../../../utils/util'
Component({
/**
* 组件的属性列表
*/
properties: {
hasPage:{
type:Boolean,
value:false,
},
findSellerData:{
type:Object,
value:{},
}
},
/**
* 组件的初始数据
*/
data: {
hidden:true,
},
created(){
this.params={}
},
attached(){
this.setData({
hidden:!this.data.hasPage
})
},
observers: {
'findSellerData': function(findSellerData) {
console.log('page=>findSellerData',findSellerData)
}
},
/**
* 组件的方法列表
*/
methods: {
paramEvent(e){
console.log('paramEvent',e.detail.type,e.detail)
this.params[e.detail.type]=e.detail
},
submit(){
console.log(this.params)
let paramObj={}
if(this.params['date']){
paramObj.when_date=util.unixtoTime(this.params['date'].val,'YYYY-MM-DD')
}
if(this.params['pnum']){
paramObj.several=this.params['pnum'].val
}
if(this.params['dur'] && this.params['dur'].val>=0){
paramObj.daily=this.params['dur'].val
}
this.triggerEvent('event',{
params:this.params,
paramObj:paramObj,
})
},
show(){
this.setData({
hidden:false
})
},
hide(){
this.setData({
hidden:true
})
},
}
})
<!--components/reserve/search/how/index.wxml-->
<view hidden="{{hidden}}">
<view class="mask" wx:if="{{!hasPage}}" bindtap="hide"></view>
<view class="{{hasPage?'pages':'pages-window'}}">
<view class="title flex-lr">
<view class="title-name">您好，几位，什么时候</view>
<view class="close" bindtap="hide"></view>
</view>
<view>
<pnum bindevent="paramEvent"
ckdata="{{findSellerData.params.pnum}}"></pnum>
<view style="margin: 60rpx 0">
<date bindevent="paramEvent" ckdata="{{findSellerData.params.date}}"></date>
</view>
<dur bindevent="paramEvent" ckdata="{{findSellerData.params.dur}}"></dur>
</view>
<view class="submit" bindtap="submit">查找餐厅</view>
</view>
</view>
/* components/reserve/search/how/index.wxss */
@import "../../../../app.wxss";
.pages{
padding: 20rpx 0;
}
.pages-window{
padding: 58rpx 0;
border-radius:20rpx 20rpx 0 0;
position: fixed;
bottom: 0;
background-color: #fff;
width: 100%;
z-index: 9999;
height: 870rpx;
box-sizing: border-box;
}
.pages .close{
display: none;
}
.title{
height:48rpx;
font-size:34rpx;
font-weight:600;
color:rgba(53,53,53,1);
line-height:48rpx;
padding: 0 40rpx;
width: calc(100% - 80rpx);
margin-bottom: 60rpx;
}
.close{
background-image: url("http://nosqn.colorcun.com/reserve/images/close.png");
background-size: 100% 100%;
width: 32rpx;
height: 32rpx;
}
.submit{
height:80rpx;
background:rgba(192,163,105,1);
border-radius:10rpx;
font-size:32rpx;
font-weight:500;
color:rgba(255,255,255,1);
line-height:80rpx;
text-align: center;
margin: 0 40rpx;
width: calc(100% - 80rpx);
position: fixed;
bottom: 80rpx;
}
\ No newline at end of file
// components/reserve/search/how/hv/pnum.js
var myBehavior = require('hv_behavior')
const items=(function(){
let today=1;
let ds=[]
for(let i=0;i<=30;i++){
ds.push(today+i)
}
return ds
})()
Component({
behaviors: [myBehavior],
data:{
items:items,
current:0,
},
lifetimes: {
created: function () {
// 在组件实例进入页面节点树时执行
this.type='pnum'
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
/**
* 组件的方法列表
*/
methods: {
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/reserve/search/how/hv/pnum.wxml-->
<swiper previous-margin="35rpx" next-margin="45rpx"
class="tabs" current="{{current}}"
display-multiple-items="5">
<swiper-item wx:for="{{items}}" wx:key="items">
<view class="item {{spi==index?'active':''}} flex-vc"
bindtap="checked" data-index="{{index}}"
data-val="{{item}}" data-type="pnum">
<view class="name">{{item>30?'30位以上':item+' 位'}}</view>
</view>
</swiper-item>
</swiper>
// components/reserve/search/item.js
import App from '../../../utils/api';
Component({
/**
* 组件的属性列表
*/
properties: {
item:{
type:Object,
value:{}
},
keyword:{
type:String,
value:"",
},
hasHistory:{
type:Boolean,
value:false,
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
detailGo(){
this.SetHistorySearch();
this.triggerEvent('click',{act:'detail',data:this.data.item})
},
reserveGo(){
this.SetHistorySearch();
this.triggerEvent('click',{act:'reserve',data:this.data.item})
},
SetHistorySearch() {
let item=this.data.item
console.log('SetHistorySearch',item)
let params={
keyword:this.data.keyword,
type:item.type==-1?1:2,
sid:item.id,
name:item.title,
openid:'',
longitude:item.longitude,
latitude:item.latitude,
}
App.Customer.SetHistorySearch(params)
App.Customer.GetHistorySearch({},'clear')
},
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/reserve/search/item.wxml-->
<wxs src="../../../utils/util.wxs" module="util" />
<view class="history flex-lr" bindtap="detailGo" wx:if="{{hasHistory}}">
<view class="icon icon{{item.type}}"></view>
<view class="text">{{item.title}}</view>
</view>
<view class="item item{{item.type}} flex-ll" bindtap="detailGo" wx:else="">
<view class="icon"></view>
<view class="flex-lr item-info">
<view class="info">
<view class="title {{item.activity.length>0?'activity':''}}">
<block wx:if="{{item.titles}}">
<text>{{item.titles[1]}}</text>
<text class="light">{{item.titles[2]}}</text>
<text>{{item.titles[3]}}</text>
</block>
<text wx:else="">{{item.title}}</text>
</view>
<view class="addr flex-ll" wx:if="{{item.type==-1}}">
<view class="txt" wx:if="{{item.category}}">{{item.category}}</view>
<view class="txt" wx:if="{{item.distance!=''}}">{{util.distance(item.distance)}}</view>
</view>
<view class="addr" wx:else="">{{item.addr}}</view>
</view>
<view class="reserve-but" wx:if="{{item.is_online_reserve==1}}" catchtap="reserveGo">包间预订</view>
</view>
</view>
/* components/reserve/search/item.wxss */
@import "../../../app.wxss";
.item{
width: 100%;
box-sizing: border-box;
margin-bottom: 40rpx;
}
.item-1{
margin-bottom: 20rpx;
}
.item .item-info,.item-1 .item-info{
width: calc(100% - 60rpx);
max-width: calc(100% - 60rpx);
box-sizing: border-box;
}
.item .info{
max-width:100%;
}
.item .title{
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
white-space:nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.item .addr{
font-size: 24rpx;
height: 34rpx;
line-height: 34rpx;
margin-top: 4rpx;
white-space:nowrap;
overflow: hidden;
text-overflow:ellipsis;
max-width: 100%;
}
.item .addr .txt{
border-right: 2rpx solid #979797;
margin-right: 10rpx;
padding-right: 10rpx;
height: 24rpx;
line-height: 24rpx;
}
.item .addr .txt:last-child{
border-right-width: 0;
}
.item .icon{
margin-right: 20rpx;
width: 22rpx;
height:26rpx;
background-image: url("http://nosqn.colorcun.com/reserve/images/addr.png");
background-size: 100% 100%;
min-width: 22rpx;
}
.item-1 .info{
width: calc(100% - 140rpx);
max-width: calc(100% - 140rpx);
}
.item-1{
background:rgba(255,255,255,1);
box-shadow:0 0 8rpx 0 rgba(196,196,196,0.5);
border-radius:10rpx;
padding: 20rpx;
}
.item-1 .icon {
background-image: url("http://nosqn.colorcun.com/reserve/images/sea-se.png");
width: 36rpx;
height: 36rpx;
min-width: 36rpx;
}
.reserve-but{
width:120rpx;
height:40rpx;
background:linear-gradient(360deg,rgba(131,131,131,1) 0%,rgba(76,76,76,1) 100%);
border-radius:25rpx;
font-size:24rpx;
font-weight:500;
color:rgba(240,206,161,1);
line-height:40rpx;
text-shadow:0rpx 2rpx 6rpx rgba(80,80,80,1);
text-align: center;
min-width: 120rpx;
margin-left: 20rpx;
}
.history{
line-height: 50rpx;
font-size: 28rpx;
height:50rpx;
background:rgba(245,245,245,1);
border-radius:4px;
float: left;
padding: 0 10rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.history .icon{
background-size: 100% 100%;
margin-right: 10rpx;
width: 20rpx;
height: 24rpx;
min-width: 20rpx;
background-image: url("http://nosqn.colorcun.com/reserve/images/addr.png");
}
.history .icon-1{
width: 24rpx;
height: 18rpx;
min-width: 24rpx;
background-image: url("http://nosqn.colorcun.com/reserve/images/his-se.png");
}
.activity{
position: relative;
}
.activity:after{
content: "";
position:absolute;
height: 32rpx;
width: 32rpx;
margin-left: 10rpx;
min-width: 32rpx;
background-image: url("http://nosqn.colorcun.com/reserve/images/huizi.png");
background-size: 100% 100%;
top:4rpx;
}
.title .light{
color: #C0A369;
}
\ No newline at end of file
<view class="section flex-lr">
<block wx:for="{{sectionlist}}" wx:key="{{index}}">
<view class="flex-vc section-single {{item.isselected ? 'bg-yellow' : ''}}" style="width:{{690/sectionlist.length}}rpx;" data-section="{{item.section}}" data-index="{{index}}" catchtap="{{item.overdate ? '' : 'selectsection'}}">
<view class="{{item.overdate ? 'gray-font' : (item.isselected ? 'blue-font' : '')}} font30r Semibold">{{item.showmark}}</view>
<view class="{{item.overdate ? 'gray-font' : (item.isselected ? 'blue-font' : '')}} font24r" style="line-height:34rpx;">{{item.sectiondur}}</view>
</view>
</block>
</view>
\ No newline at end of file
@import "../../../app.wxss";
.section{
width:100%;
height:90rpx;
border-radius:10rpx;
/*box-shadow: 0 0 8rpx rgba(166,166,166,.5);*/
margin:0 auto;
border: 2rpx solid #CCCCCC;
box-sizing: border-box;
}
.section-single{
height:calc(100% + 4rpx);
border-radius:10rpx;
box-sizing: border-box;
}
.section-single.bg-yellow{
background: #F4FAFF;
border: 2rpx solid #42A5FF;
}
\ No newline at end of file
import App from '../../../utils/api';
import util from '../../../utils/util';
Component({
properties:{
seller:Object,
date:{
type:String,
value:util.unixtoTime(new Date()/1000,'YYYY-MM-DD')
},
section:String,
seletroomlist:{
type:Array,
value:[]
}
},
data:{
},
attached(){
this.room=this.selectComponent('#room');
console.log('xxxxx',this.data.seller);
},
methods:{
selectroom(e){
console.log(e)
let _target=e.detail;
let seletroomlist=this.data.seletroomlist;
if(e.detail.action=='cancel'){
seletroomlist.forEach((v,i)=>{
if(v.id==_target.id){
seletroomlist.splice(i,1)
}
})
}else{
let obj={
id:_target.id,
name:_target.name
}
seletroomlist.push(obj);
}
this.setData({
seletroomlist:this.data.seletroomlist
})
this.triggerEvent('changeroom',{selectroom:this.data.seletroomlist})
},
cancelroom(e){
let _target=e.currentTarget.dataset;
this.data.seletroomlist.splice(_target.index,1);
this.setData({
seletroomlist:this.data.seletroomlist
})
this.room.cancelroom(_target.id);
this.triggerEvent('changeroom',{selectroom:this.data.seletroomlist});
},
}
})
\ No newline at end of file
<view class="select-rooms flex-rs">
<view class="select-rooms-title black-font font-bold font36r flex-ll">已选包间</view>
<block wx:for="{{seletroomlist}}" wx:key="{{index}}">
<view class="select-rooms-item flex-vc" data-index="{{index}}" data-id="{{item.id}}" catchtap="cancelroom">
<view class="font-bold font30r" style="width:100%;block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align:center; color:#42A5FF;">{{item.name}}</view>
<image src="http://nosqn.colorcun.com/detail/x%20%2814%29.png" class="select-rooms-close"></image>
</view>
</block>
</view>
<room bindselectroom="selectroom" seller="{{seller}}" date="{{date}}" section="{{section}}" id="room" seletroomlist="{{seletroomlist}}"></room>
\ No newline at end of file
@import "../../../app.wxss";
.select-rooms{
width:100%;
padding:70rpx 0 4rpx 40rpx;
box-sizing: border-box;
}
.select-rooms-title{
margin-right:30rpx;
height:70rpx;
margin-bottom:20rpx;
}
.select-rooms-item{
width:150rpx;
height:70rpx;
margin-right:20rpx;
background: #F4FAFF;
border: 2rpx solid #42A5FF;
border-radius:10rpx;
position: relative;
margin-bottom:20rpx;
padding:0 12rpx;
box-sizing: border-box;
}
.select-rooms-close{
width:36rpx;
height:36rpx;
background: #C1C0C0;
border-radius:50%;
position: absolute;
right:-18rpx;
top:-18rpx;
}
.close-icon{
width:14rpx;
height:14rpx;
}
\ No newline at end of file
// components/reserve/caixi.js
import util from '../../../utils/util';
import App from '../../../utils/api';
const {regeneratorRuntime} = global
Component({
/**
* 组件的属性列表
*/
properties: {
multiArray:{
type:Array,
value:[]
},
multiIndex: {
type:Array,
value:[]
},
tags: {
type:Array,
value:[]
},
},
/**
* 组件的初始数据
*/
data: {
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,
})
},
/**
* 组件的方法列表
*/
methods: {
hide(){
this.setData({
hidden:true,
})
},
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.centre_pos){
this.param.centre_pos=mapParam.centre_pos
}
if(mapParam.tags){
this.param.tags=mapParam.tags
}
if(mapParam.cuisine){
this.param.cuisine=mapParam.cuisine
}
if(mapParam.when_date){//日期
this.param.when_date=mapParam.when_date
}
if(mapParam.several){//人数
this.param.several=mapParam.several
}
if(mapParam.daily){//时段
this.param.daily=mapParam.daily
}
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;
let markers=this.data.markers;
App.Customer.SellerLists(this.param).then(res=>{
this.setData({
hasMore:res.data.length==this.size,
markers:markers.concat(res.data),
})
})
},
caixiShow(){
this.triggerEvent('event',{type:'caixiShow'})
},
tagsChange(e){
this.triggerEvent('event',{type:'tagsChange',e:e})
},
gotoDetail(e){
wx.navigateTo({
url:'/pages/reserve/detail?id='+util.attr(e,'sid')
})
},
}
})
<!--components/reserve/caixi.wxml-->
<!--
<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://nosqn.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" bindtap="gotoDetail" data-sid="{{item.id}}"
wx:for="{{markers}}" wx:key="markers.key">
<sb-tr seller="{{item}}" hasActivityTags="{{true}}"></sb-tr>
</cover-view>
<cover-view class="seller flex-vc" style="width: 100%; height: 60rpx;" bindtap="{{hasMore?'getListMore':''}}">
<cover-view style="font-size: 28rpx;color:#999; ">{{hasMore?'点击加载更多商家':'没有更多商家了'}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
-->
/* components/reserve/caixi.wxss */
@import "../../../app.wxss";
.list{
background-color: #fefefe;
position: fixed;
bottom: 0;
width: 95%;
padding: 40rpx 0 40rpx 5%;
color: #353535;
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;
box-shadow: 0 4rpx 8rpx 0 #E0E0E0;
border: 2rpx solid #E0E0E0;
}
.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://nosqn.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://nosqn.colorcun.com/reserve/images/%E8%8F%9C%E7%B3%BB%E9%80%89%E4%B8%AD.png");
}
\ No newline at end of file
// components/reserve/seller-box/seller-box.js
import util from '../../../utils/util';
import App from '../../../utils/api';
const {regeneratorRuntime} = global
Component({
/**
* 组件的属性列表
*/
properties: {
seller: {
type: Object,
value: {},
},
hasStat: {
type: Boolean,
value: false,
},
hasAverage: {
type: Boolean,
value: true,
},
hasActivity: {//滚动优惠
type: Boolean,
value: false,
},
hasActivityTags: {//优惠标签
type: Boolean,
value: false,
},
hasSlogan: {
type: Boolean,
value: true,
},
sellerStyle: {//特殊样式
type: String,
value: '',
}
},
/**
* 组件的初始数据
*/
data: {},
attached(){
this.init()
},
/**
* 组件的方法列表
*/
methods: {
init(){
let seller = this.data.seller
if(seller && seller.distance){
seller.distance = parseInt(seller.distance);
if (seller.distance > 1000) {
seller.distance = (seller.distance / 1000).toFixed(2) + '公里'
} else {
seller.distance += '米';
}
}
this.setData({
se: seller,
})
},
tapButton(e){
let type = util.attr(e, 'type');
if (type == 'oncall') {
let seller_tel = this.data.seller.seller_tel;
if (seller_tel.length < 1) {
seller_tel = [this.data.seller.phone]
}
if (seller_tel.length == 1) {
wx.makePhoneCall({
phoneNumber: seller_tel[0].replace(/[^\d]/g, '')
})
} else {
//wx.hideTabBar();
wx.showActionSheet({
itemList: seller_tel,
complete: () => {
//wx.showTabBar();
},
success: (res) => {
let phone = seller_tel[res.tapIndex]
wx.makePhoneCall({
phoneNumber: phone.replace(/[^\d]/g, '')
})
}
});
}
} else {
util.toast('请打电话预订', 'none');
}
},
lookLocation: function () {
wx.openLocation({
latitude: Number(this.data.seller.lat),
longitude: Number(this.data.seller.long),
scale: 17,
address: this.data.seller.map_address,
success: function (res) {
console.log(res)
}
})
},
}
})
<!--components/showModal/showModal.wxml-->
<cover-view class="seller flex-ll {{sellerStyle}}" >
<cover-view class="image">
<cover-image mode="aspectFill"
src="{{seller.seller_image?seller.seller_image+'?imageView2/2/w/320/interlace/0/q/100':'http://nosqn.colorcun.com/custom/lite-online/image/seller-def.png'}}"></cover-image>
<view class="room_num" wx:if="{{seller.room_num>0}}">{{seller.room_num}}个包间</view>
</cover-view>
<cover-view class="info flex-tb">
<cover-view>
<cover-view class="name Semibold">{{seller.sellername}}</cover-view>
<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}}">距当前位置{{se.distance}}</cover-view>
</cover-view>
<cover-view wx:if="{{hasStat}}" class="stat">
<stat stat="{{seller.score}}"></stat>
</cover-view>
<cover-view wx:if="{{hasActivity && seller.activity.length>0}}" class="activity-swiper">
<cover-view class="flex-ll">
<cover-view class="icon-hui"></cover-view>
<block wx:for="{{seller.activity}}" wx:key="seller.activity.key" >
<cover-view class="activity-item">
{{item.title}}
</cover-view>
</block>
</cover-view>
<cover-view class="activity-mask"></cover-view>
</cover-view>
<cover-view wx:if="{{hasActivityTags && seller.activity.length>0}}" class="activity flex-ll">
<cover-view wx:for="{{seller.activity}}" class="activity-item" wx:key="seller.activity.key" wx:if="{{index<3}}">{{['','满减','满赠','折扣','代金券','会员价'][item.type]}}</cover-view>
</cover-view>
</cover-view>
<cover-view class="price flex-lr">
<cover-view class="number Semibold">
<block wx:if="{{seller.average>0 && hasAverage}}">¥{{seller.average}}元/人</block>
</cover-view>
<cover-view class="phone flex-ll" id="reserve-button" catchtap="tapButton" data-type="oncall">
<cover-image src="http://nosqn.colorcun.com/custom/lite-online/image/phone.png"></cover-image>
<cover-view class="reserve-text">预订</cover-view>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
\ No newline at end of file
/* components/reserve/seller-box/seller-box.wxss */
@import "../../../app.wxss";
.seller{
height: 300rpx;
overflow: hidden;
color: #353535;
width: 94%;
border: 2rpx solid #E0E0E0;
border-radius: 6rpx;
box-shadow: 0 4rpx 8rpx 0 #E0E0E0;
}
.seller.noborder{
border-width: 0;
box-shadow: none;
}
.seller cover-image{
width: 100%;
height: 100%;
}
.seller .image{
width: 200rpx;
height: 300rpx;
background-color: #4C4E4F;
min-width: 200rpx;
position: relative;
}
.seller .image .room_num{
height: 34rpx;
width: 120rpx;
line-height: 34rpx;
color: #fefefe;
background-color: rgba(248, 137, 68, 0.86);
border-radius: 18rpx;
text-align: center;
position: absolute;
top:10rpx;
left: 40rpx;
font-size: 24rpx;
}
.seller .info{
padding: 10rpx 3% 20rpx;
height: 270rpx;
width: 94%;
overflow: hidden;
}
.seller .name{
font-size: 32rpx;
height: 44rpx;
line-height: 44rpx;
overflow: hidden;
white-space:nowrap;
}
.seller .slogan{
font-size: 26rpx;
height: 36rpx;
line-height: 36rpx;
margin-top: 10rpx;
white-space:nowrap;
overflow: hidden;
}
.seller .text{
font-size: 28rpx;
color: #999999;
height: 40rpx;
line-height: 40rpx;
margin-top: 10rpx;
overflow: hidden;
white-space:nowrap;
}
.seller .text .text-item{
text-indent: 10rpx;
border-left: 2rpx solid #999999;
padding-right: 10rpx;
height: 30rpx;
line-height: 30rpx;
overflow: hidden;
white-space:nowrap;
}
.seller .text .text-item:first-child{
border-left-width: 0;
text-indent: 0;
}
.seller .text .text-item:last-child{
padding-right: 0;
}
.seller .price{
font-size: 30rpx;
color: #F05522;
height: 50rpx;
line-height: 50rpx;
width: 100%;
}
.seller .phone{
width: 140rpx;
height: 50rpx;
background:linear-gradient(to bottom, #838383, #4C4C4C);
background-color:#636363 ;
border-radius: 26rpx;
font-size: 26rpx;
color: #F0CEA1;
line-height: 50rpx;
}
.seller .phone cover-image{
width: 28rpx;
height: 26rpx;
margin-right: 8rpx;
margin-left: 24rpx;
}
.stat{
font-size: 24rpx;
color:#999999;
height: 24rpx;
line-height: 24rpx;
}
.activity{
color: #F05522;
margin-top: 10rpx;
}
.activity .activity-item{
font-size: 24rpx;
height: 36rpx;
padding: 0 10rpx 0;
line-height: 36rpx;
overflow: hidden;
max-height: 36rpx;
border-radius: 6rpx;
margin-left: 10rpx;
text-align: center;
overflow: hidden;
white-space:nowrap;
background: linear-gradient(to right, #F98E47, #F05522);
background-color: #F37236;
text-shadow:0 2rpx 6rpx #C51B41;
color:#F8E6C4;
}
.activity .activity-item:first-child{
margin-left: 0;
}
.activity-swiper{
font-size: 28rpx;
color: #F05025;
margin-top: 20rpx;
height: 32rpx;
overflow: hidden;
position: relative;
}
.activity-mask{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 32rpx;
}
.activity-swiper swiper{
width: 100%;
height: 32rpx;
}
.activity-swiper .activity-item{
text-indent: 10rpx;
height: 32rpx;
width: 100%;
line-height: 32rpx;
overflow: hidden;
max-height: 32rpx;
overflow: hidden;
white-space:nowrap;
}
.activity-swiper .icon-hui{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E6%83%A0.png");
background-size: 100% 100%;
height: 32rpx;
width: 32rpx;
min-width: 32rpx;
}
.reserve-text{
text-shadow:0 2rpx 6rpx #505050;
}
\ No newline at end of file
// components/reserve/seller-box/seller-box.js
import util from '../../../utils/util';
import App from '../../../utils/api';
const {regeneratorRuntime} = global
Component({
/**
* 组件的属性列表
*/
properties: {
seller: {
type: Object,
value: {},
},
hasStat: {
type: Boolean,
value: false,
},
hasAverage: {
type: Boolean,
value: true,
},
hasActivity: {//滚动优惠
type: Boolean,
value: false,
},
hasActivityTags: {//优惠标签
type: Boolean,
value: false,
},
hasActivityShort: {//店铺名后面的惠字
type: Boolean,
value: false,
},
hasSlogan: {
type: Boolean,
value: true,
},
hasBrand: {//店铺品牌
type: Boolean,
value: false,
},
hasActivityTese: {//店铺特色
type: Boolean,
value: false,
},
sellerStyle: {//特殊样式
type: String,
value: '',
},
hasSuggestion:{//是否有搜索目的地
type: Boolean,
value: false,
},
hasActivityRed:{//红包活动 tags
type: Boolean,
value: false,
},
hasNewActivityList:Boolean,//新的活动商家列表
hasInSwiper:Boolean,//是否在Swiper控件内，不能使用组件电话框，只能通知页面
hasShafa:Boolean,// 沙发按钮
hasPtActiving:Boolean,//是否有平台活动
},
/**
* 组件的初始数据
*/
data: {},
lifetimes: {
attached: function () {
},
moved: function () {
},
detached: function () {
},
},
observers: {
'seller': function () {
this.init()
}
},
/**
* 组件的方法列表
*/
methods: {
init() {
let seller = this.data.seller
seller.label_cstr=''
seller.label_carr=[]
if (seller && seller.label_c && seller.label_c.length > 0) {
let label_cstr = []
seller.label_c.forEach(l => {
label_cstr.push(l.name)
seller.label_carr.push({type:1,name:l.name})
})
seller.label_cstr = label_cstr.join(' | ')
}
if(seller.is_discount>0){
seller.label_carr.unshift({type:0,name:'商家补贴'})
}
if(seller.isopen_md==1 && this.data.hasPtActiving){
seller.label_carr.unshift({type:0,name:'瓜分百万'})
}
if(seller.label_carr.length>3){
seller.label_carr=seller.label_carr.slice(0,3)
}
this.setData({
location:getApp().location,
se: seller,
})
},
tapButton(e) {
//console.log('tapButton',e)
let type = util.attr(e, 'type');
if (type == 'oncall') {
console.log('has_online_reserve',this.data.seller.is_online_reserve,this.data.seller.is_tele)
if(this.data.seller.is_online_reserve==1){
let url=util.http_build_query({id:this.data.seller.id,activeTab:'reserve'},'/pages/reserve/reserve')
if(this.data.seller.findSellerParamObj){
let findSellerParamObj=this.data.seller.findSellerParamObj
findSellerParamObj={
date:findSellerParamObj.when_date,
pnum:findSellerParamObj.several,
}
if(findSellerParamObj.daily>-1){
findSellerParamObj.section=['','morning','noon','night',''][findSellerParamObj.daily]
}
url=util.http_build_query(findSellerParamObj,url)
}
if(this.data.hasShafa){
url=util.http_build_query({
classID:util.attr(e,'cid'),
className:util.attr(e,'cname'),
},url)
}
return wx.navigateTo({
url:url,
})
}
if(this.data.hasInSwiper){
this.triggerEvent('event',{act:type,seller:this.data.seller})
}else{
this.selectComponent('#as').show(this.data.seller);
}
} else {
util.toast('请打电话预订', 'none');
}
},
lookLocation: function () {
wx.openLocation({
latitude: Number(this.data.seller.lat),
longitude: Number(this.data.seller.long),
scale: 17,
address: this.data.seller.map_address,
success: function (res) {
console.log(res)
}
})
},
}
})
// components/reserve/seller-box-transverse/shafa.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/reserve/seller-box-transverse/shafa.wxml-->
<view class="shafa flex-vc">
<view class="shafa-bei"><slot></slot></view>
<view class="shafa-dian"></view>
<view class="shafa-dian2"></view>
<view class="shafa-fushou flex-lr"></view>
<view class="shafa-tui flex-lr"></view>
</view>
/* components/reserve/seller-box-transverse/shafa.wxss */
@import "../../../app.wxss";
.shafa{
position: relative;
height: 66rpx;
}
.shafa-bei{
height:44rpx;
background:rgba(249,142,71,1);
border-radius:16rpx 16rpx 0 0;
font-size:26rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(255,255,255,1);
line-height:44rpx;
text-align: center;
padding: 0 16rpx;
margin: 0 8rpx;
}
.shafa-dian{
height:6rpx;
background:rgba(255,227,87,1);
width: calc(100% - 24rpx);
}
.shafa-dian2{
width: 100%;
height:10rpx;
background:rgba(255,201,170,1);
border-radius:0rpx 0rpx 4rpx 4rpx;
}
.shafa-fushou{
position: absolute;
bottom: 6rpx;
width: 100%;
}
.shafa-fushou:before,.shafa-fushou:after{
display: block;
content: "";
width:16rpx;
height:42rpx;
background:rgba(255,201,170,1);
border-radius:200rpx 200rpx 0rpx 6rpx;
}
.shafa-tui{
position: absolute;
bottom: 0rpx;
width: calc(100% - 16rpx);
}
.shafa-tui:before,.shafa-tui:after{
display: block;
content: "";
width:6rpx;
height:6rpx;
background:rgba(255,209,114,1);
}
\ No newline at end of file
Component({
properties:{
item:Object,
}
})
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
<view class="taocan-card bg-white flex-vc">
<navigator url="/pages/taocan/index?sid={{item.sid}}&pid={{item.id}}" hover-class="navigator-hover" class="flex-ll taocan-main">
<image mode="aspectFill"
src="{{item.main_url?item.main_url+'?imageView2/2/w/320/interlace/0/q/100':'http://nosqn.colorcun.com/reserve/images/3x/%E6%9A%82%E6%97%A0.png'}}" class="taocan-image"></image>
<view class="taocan-info flex-vl">
<view class="black-font font36r font-bold font-more" style="line-height: 50rpx;margin-bottom: 6rpx;width:100%;">{{item.name}}</view>
<view class="gray-deep-font font28r" style="line-height: 40rpx;margin-bottom: 6rpx;">{{item.service}}</view>
<view class="flex-ll" style="align-items: flex-end;">
<view class="text-orange" style="margin-right: 20rpx;">
<text class="font28r">￥</text>
<text class="font40r font-bold" style="line-height: 56rpx;">{{item.sale_price}}</text>
</view>
<view class="text-gray" style="text-decoration:line-through;margin-bottom: 4rpx; ">
<text class="font20r">￥</text>
<text class="font28r" style="line-height: 40rpx;">{{item.market_price}}</text>
</view>
</view>
<view class="view flex text-orange align-end" style="margin-top: 6rpx;" wx:if="{{item.discount>0}}">
<view class="view tag" style="margin-bottom: 6rpx;"></view>
<view class="view margin-left-xs txt-24-h">{{item.discount}}折</view>
</view>
<view class="button txt-28-h text-bold flex align-center justify-center">抢购</view>
</view>
</navigator>
<navigator url="./detail?id={{item.sid}}" hover-class="navigator-hover" class="taocan-seller flex-lr">
<view class="flex-ll">
<image mode="aspectFill" src="{{item.seller_image ? item.seller_image+'?imageView2/2/w/84/interlace/0/q/100' : 'http://nosqn.colorcun.com/reserve/images/3x/%E6%9A%82%E6%97%A0.png'}}" style="width: 84rpx;height: 80rpx;border-radius:6rpx;"></image>
<view class="flex-vl seller-info">
<view class="font-bold font26r black-font font-more" style="line-height: 36rpx;margin-bottom: 6rpx;width:100%;">{{item.sellername}}</view>
<view class="gray-font font24r font-more" style="line-height: 34rpx;width:100%;">{{item.map_address}}</view>
</view>
</view>
<view class="more"></view>
</navigator>
</view>
\ No newline at end of file
@import "../../../app.wxss";
@import "../../../colorui/main.wxss";
.taocan-card{
width:710rpx;
padding: 30rpx;
border-radius:6rpx;
box-sizing: border-box;
box-shadow: 0 0 8rpx 0 #E0E0E0;
overflow: hidden;
}
.taocan-main{
width: 100%;
margin-bottom: 20rpx;
}
.taocan-image{
width: 200rpx;
height: 200rpx;
background-color: #4C4E4F;
min-width: 200rpx;
position: relative;
border-radius: 10rpx;
}
.taocan-info{
width: 450rpx;
height: 200rpx;
padding-left: 30rpx;
box-sizing: border-box;
position: relative;
}
.tag{
width: 22rpx;
height: 22rpx;
background-image: url("http://nosqn.colorcun.com/taocan/1%20%281%29.png");
}
.button{
position: absolute;
right: 0;
bottom: 0;
width: 124rpx;
height: 56rpx;
border-radius: 28rpx;
background: linear-gradient(#F98E47,#F05522);
color: #ffffff;
}
.taocan-seller{
width: 100%;
padding: 20rpx;
box-sizing: border-box;
background:#F8F8F8;
border-radius:10rpx;
}
.seller-info{
width: 496rpx;
padding-left: 20rpx;
box-sizing: border-box;
position: relative;
}
\ No newline at end of file
// components/reserve/seller-box/seller-box.js
import util from '../../../utils/util';
import App from '../../../utils/api';
const {regeneratorRuntime} = global
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
hasShow:false,
seller:{},
},
/**
* 组件的方法列表
*/
methods: {
show(seller){
seller.distance=parseInt(seller.distance);
if(seller.distance>1000){
seller.distance=(seller.distance/1000).toFixed(2)+'公里'
}else{
seller.distance+='米';
}
this.setData({
hasShow:true,
seller:seller,
})
},
hide(){
this.setData({
hasShow:false,
})
this.triggerEvent('event',{type:'hide'});
},
tapButton(e){
let type=util.attr(e,'type');
if(type=='oncall'){
if(!this.data.seller.phone){
return util.toast('商家电话错误','none');
}
wx.makePhoneCall({
phoneNumber:this.data.seller.phone
})
}else{
util.toast('请打电话预订','none');
}
},
lookLocation:function(){
wx.openLocation({
latitude:Number(this.data.seller.lat),
longitude:Number(this.data.seller.long),
scale:17,
address:this.data.seller.map_address,
success:function (res) {
console.log(res)
}
})
},
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/showModal/showModal.wxml-->
<cover-view class="mask flex-vr" hidden="{{!hasShow}}" bindtap="hide">
<cover-view class="showModal">
<cover-view class="header">
{{seller.sellername}}
</cover-view>
<cover-view class="tip flex-lr">
<cover-view class="ping flex-ll">★★★★★
<cover-view style="color: #353535; text-indent: 40rpx">¥50元/人</cover-view>
</cover-view>
<cover-view class="type">潮汕火锅</cover-view>
</cover-view>
<cover-view class="info flex-ll">
<cover-image src="http://nosqn.colorcun.com/custom/lite-yd/image/add-act.png" style="width: 30rpx; height: 30rpx; background-color: #F4A22A"></cover-image>
<cover-view class="type">在线订座买单8折起</cover-view>
</cover-view>
<cover-view class="info flex-ll">
<cover-view src="" style="width: 30rpx; height: 30rpx;"></cover-view>
<cover-view class="type">赠送精美小菜和饮品</cover-view>
</cover-view>
<cover-view class="info flex-ll" style="margin-top: 22rpx;">
<cover-image src="http://nosqn.colorcun.com/custom/lite-yd/image/gps-icon.png" style="width: 26rpx; height: 32rpx;"></cover-image>
<cover-view class="type" catchtap="lookLocation">{{seller.map_address}}</cover-view>
</cover-view>
<cover-view class="body"></cover-view>
</cover-view>
<cover-view class="footer flex-lr">
<cover-view class="flex-lr left">
距离{{seller.distance}}
</cover-view>
<cover-view class="flex-lr right">
<button class="button-none online" plain
bindtap="tapButton" data-type="online"
style="color:{{opt.cancelColor}};">在线预订</button>
<button class="button-none oncall"
bindtap="tapButton" data-type="oncall"
style="color:{{opt.confirmColor}};">电话预订</button>
</cover-view>
</cover-view>
</cover-view>
/* components/reserve/seller-box/seller-box.wxss */
@import "../../../app.wxss";
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
top:0;
left: 0;
}
.showModal{
width: 90%;
background-color: #fff;
padding: 20rpx 5% 0 5%;
/* border-top-left-radius:20rpx;
border-top-right-radius:20rpx;*/
}
.showModal .header{
font-size: 40rpx;
line-height: 60rpx;
height: 60rpx;
}
.showModal .body{
font-size: 30rpx;
margin-bottom: 30rpx;
}
.footer{
border-top: 2rpx solid #ccc;
background-color: #fff;
width: 100%;
}
.footer .button-none{
margin: 30rpx 0;
font-size: 36rpx;
height: 82rpx;
line-height: 82rpx;
border-radius: 4rpx;
padding: 0 34rpx;
}
.footer .button-none.online{
border: 2rpx solid #393939;
color: #353535;
margin-right: 20rpx;
}
.footer .button-none.oncall{
border: 2rpx solid #393939;
background-color: #393939;
color: #FEFEFE;
}
.footer .left{
margin-left: 40rpx;
font-size: 30rpx;
}
.footer .right{
margin-right: 40rpx;
font-size: 36rpx;
}
.tip{
font-size: 30rpx;
height: 42rpx;
line-height: 42rpx;
margin: 8rpx 0 2rpx;
}
.tip .ping{
color: #F4A22A;
}
.info{
font-size: 30rpx;
height: 42rpx;
line-height: 42rpx;
margin-bottom: 6rpx;
}
.info cover-view:last-child{
margin-left: 22rpx;
}
// components/reserve/discount.js
import App from '../../../utils/api'
Component({
/**
* 组件的属性列表
*/
properties: {
cla:String,
hasPTactivity:Boolean,//平台红包开启状态
seller:{
type:Object,
value:{}
}
},
/**
* 组件的初始数据
*/
data: {
display:false,
hiddenAni:'',
mycards:[],
money:0,//最大优惠
red_envelopes_price:0,//获得金额
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () {
App.Customer.SetCardRel({
sid:this.data.seller.id
}).then(res=>{
if(!res.data) return;
this.setData({
red_envelopes_price:res.data.red_envelopes_price,
money:res.data.money,
mycards:res.data.list,
})
if(res.data.red_envelopes_price>0){
setTimeout(()=>{
this.setData({
red_envelopes_price:0,
})
},3000)
}
})
},
moved: function () { },
detached: function () { },
},
/**
* 组件的方法列表
*/
methods: {
hide(){
this.setData({
hiddenAni:'discountHide',
})
this.triggerEvent('hide')
setTimeout(()=>{
this.setData({
display:false,
hiddenAni:'',
})
},250)
},
show(){
this.setData({
display:true,
hiddenAni:'',
})
this.triggerEvent('show')
},
useCard(){
this.hide()
this.triggerEvent('event',{type:'gotoReserve'})
},
},
})
<!--components/reserve/discount.wxml-->
<wxs src="../../../utils/util.wxs" module="util" />
<view class="toast" wx:if="{{red_envelopes_price>0}}">
<view class="toast-view">
<view class="toast-text">店家送您</view>
<view class="toast-text"><text class="yellow">{{red_envelopes_price}}</text>元红包</view>
</view>
</view>
<view class="{{cla?cla:'tips reserve-detail'}}" wx:if="{{money>0 && red_envelopes_price==0 && seller.isopen_md==1}}">
<view class="msg">
{{money}}元
<view class="jiao"></view>
</view>
</view>
<view class="mask" bindtap="hide" wx:if="{{display}}">
<view class="discount {{hiddenAni}}" catchtap="">
<view class="discount-name Medium" bindtap="hide">
优惠
<view class="close"></view>
</view>
<view class="discount-content">
<view class="activity">
<block wx:for="{{seller.activity}}" wx:key="activity">
<view class="flex-lr activity-item"
style="align-items: flex-start">
<view class="activity-left">{{util.activityName(item.type)}}</view>
<view class="activity-right">
{{item.title}}
<view class="activity-right-info" wx:if="{{item.desc}}">注：{{item.desc}}</view>
</view>
</view>
</block>
<view class="flex-lr activity-item" wx:if="{{seller.receive_condition_2}}"
style="align-items: flex-start">
<view class="activity-left">消费返</view>
<view class="activity-right">
在线买单{{seller.receive_condition_str}}红包
<view class="activity-right-info">注：仅可以线上买单时使用</view>
</view>
</view>
<view class="flex-lr activity-item" wx:if="{{seller.isopen_md==1 && hasPTactivity}}"
style="align-items: flex-start">
<view class="activity-left">平台红包</view>
<view class="activity-right">可叠加使用平台红包</view>
</view>
</view>
<block wx:if="{{mycards.length>0}}">
<view class="mycards-txt">已领取的红包</view>
<view class="mycards">
<view class="mycards-item" wx:for="{{mycards}}" wx:key="mycards">
<quan quan="{{item}}">
<view class="button-use" bindtap="useCard">立即使用</view>
</quan>
<view class="quan-tips">仅可在预订包间、在线买单时使用</view>
</view>
</view>
</block>
</view>
</view>
</view>
/* components/reserve/discount.wxss */
@import "../../../app.wxss";
.discount{
position: fixed;
bottom: 0;
background-color: #fefefe;
border-radius: 40rpx 40rpx 0rpx 0rpx;
color: #353535;
width: 100%;
padding: 20rpx 40rpx 40rpx;
animation: discountShow 0.3s;
box-sizing: border-box;
min-height: 648rpx;
}
.discount-content{
max-height: 792rpx;
overflow-y: auto;
overflow-x: visible;
padding-bottom: 10rpx;
}
.discount.discountHide{
animation: discountHide 0.3s;
}
.discount view{
background-size: 100% 100%;
}
.discount-name{
font-size: 32rpx;
height: 84rpx;
line-height: 84rpx;
width: 100%;
position: relative;
text-align: center;
}
.discount-name .close{
background-image: url("http://nosqn.colorcun.com/sellerbaobao/close.png");
width: 28rpx;
height: 29rpx;
position: absolute;
right:0;
top:28rpx;
}
.activity{
margin-top: 40rpx;
}
.activity .txt{
width:60rpx;
height:42rpx;
font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(136,136,136,1);
line-height:42rpx;
}
.activity-item{
margin-top: 20rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(228, 228, 228, 0.5);
border-radius: 10rpx;
box-sizing: border-box;
padding: 24rpx 40rpx;
width: calc(100% - 20rpx);
margin-left: 10rpx;
}
.activity-left{
height:28rpx;
border-radius:4rpx;
border:2rpx solid rgba(248,164,135,1);
font-size:20rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(240,88,36,1);
line-height:28rpx;
padding: 0 6rpx;
/*min-width: 60rpx;*/
white-space:nowrap;
text-align: center;
position: relative;
}
.activity-right{
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight:500;
color:rgba(53,53,53,1);
line-height: 40rpx;
width: calc(100% - 112rpx);
}
.mycards-txt{
height:42rpx;
font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(136,136,136,1);
line-height:42rpx;
margin-top: 50rpx;
}
.mycards{
margin-top: 20rpx;
/*max-height: 430rpx;*/
}
.quan-tips{
height:50rpx;
background:rgba(245,245,245,1);
border-radius:0rpx 0rpx 10rpx 10rpx;
font-size:22rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(136,136,136,1);
line-height:50rpx;
padding-left: 36rpx;
width: 100%;
box-sizing: border-box;
}
.mycards-item{
margin-bottom: 20rpx;
}
.button-use{
width:120rpx;
height:44rpx;
background:linear-gradient(180deg,rgba(231,66,88,1) 0%,rgba(243,53,78,1) 100%);
border-radius:6rpx;
font-size:24rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,227,192,1);
line-height:44rpx;
text-align: center;
}
@keyframes discountShow
{
from {bottom: -876rpx;}
to {bottom: 0rpx;}
}
@keyframes discountHide
{
from {bottom: 0;}
to {bottom: -876rpx;}
}
.toast{
background:rgba(255,82,76,1);
border-radius:10rpx;
box-sizing: border-box;
z-index: 9999;
position: fixed;
top:560rpx;
left:calc(50% - 150rpx);
}
.toast-view{
width:300rpx;
height:220rpx;
position: relative;
box-sizing: border-box;
overflow: hidden;
text-align: center;
padding-top: 92rpx;
}
.toast-view:before{
content: "";
display: block;
width:340rpx;
height:160rpx;
border:6rpx solid rgba(216,18,18,1);
position: absolute;
top:-80rpx;
left: -20rpx;
box-sizing: border-box;
border-radius: 50%;
}
.toast-text{
height:44rpx;
font-size:32rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(255,255,255,1);
line-height:44rpx;
}
.toast-text .yellow{
color:#FFF48D;
}
.tips{
position: fixed;
z-index: 9999;
background:rgba(84,83,84,0.8);
font-size:24rpx;
font-weight:500;
color:rgba(255,255,255,1);
}
.tips .msg{
height: 70rpx;
line-height: 70rpx;
padding: 0 24rpx;
position: relative;
}
.jiao{
width: 26rpx;
height: 10rpx;
background-image: url("http://nosqn.colorcun.com/activity/images/jiao2.png");
background-size: 100% 100%;
position: absolute;
bottom: -10rpx;
left:30rpx;
}
.tips.reserve-detail{
bottom:122rpx;
right:30rpx;
}
.tips.reserve-detail .jiao{
right:80rpx;
left:auto;
}
.tips.reserve-detail .msg{
color: #FEDE68;
}
.tips.reserve-detail .msg:before{
content: "预订买单，立即抵扣";
color:rgba(255,255,255,1);
}
.detail_owner .jiao{
display: none;
}
.detail_owner .msg:after{
content: "红包待用";
text-indent: -4rpx;
display: inline-block;
}
.money-tips{
min-width:184rpx;
height:34rpx;
padding: 0 20rpx;
background:rgba(240,85,34,1);
border-radius:16rpx 16rpx 16rpx 0rpx;
font-size:20rpx;
font-weight:500;
color:rgba(255,255,255,1);
line-height:34rpx;
position: absolute;
top:-28rpx;
right:-16rpx;
}
.checkout-button-money-tips{
min-width:184rpx;
padding: 0 20rpx;
height:34rpx;
background:rgba(240,85,34,1);
border-radius:16rpx 16rpx 16rpx 0rpx;
font-size:20rpx;
font-weight:500;
color:rgba(255,255,255,1);
line-height:34rpx;
position: absolute;
top:-28rpx;
right:40rpx;
}
.seller-reserve{
display: none;
}
.activity-right-info{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
margin-top: 8rpx;
}
\ No newline at end of file
// components/reserve/seller/quan.js
Component({
/**
* 组件的属性列表
*/
properties: {
quan:Object,
cla:String,
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/reserve/seller/quan.wxml-->
<wxs src="../../../utils/util.wxs" module="util" />
<view class="quan flex-lr {{cla}}">
<view class="money Semibold flex-cc money-{{util.toFixed(quan.price,0).length}}" style="align-items: flex-end">
<view class="dot">￥</view>
<view class="number">{{util.toFixed(quan.price,0)}}</view>
</view>
<view class="line"></view>
<view class="type">
<view class="card_title">{{quan.card_title}}</view>
<view class="card-date" wx:if="{{quan.start_time>0}}">
{{util.unixtoTime(quan.start_time,"YYYY.MM.DD")}}-{{util.unixtoTime(quan.end_time,"YYYY.MM.DD")}}
</view>
<view class="card-date" wx:else="">
长期有效
</view>
</view>
<view class="opt">
<slot></slot>
</view>
</view>
/* components/reserve/seller/quan.wxss */
@import "/app.wxss";
.quan{
width:100%;
height:170rpx;
background:rgba(255,239,223,1);
box-sizing: border-box;
padding: 36rpx;
padding-right: 22rpx;
padding-left: 0;
border-radius:10rpx 10rpx 0rpx 0rpx;
border-right: 14rpx solid #fefefe;
position: relative;
}
.quan:after{
background-size: 100% 100%;
background-image: url("http://nosqn.colorcun.com/sellerbaobao/rp2.png");
position: absolute;
top:0;
right:-14rpx;
width: 16rpx;
height: 170rpx;
content: "";
}
.quan .money{
min-width: 186rpx;
width: 186rpx;
overflow: hidden;
}
.quan .money-4,.quan .money-5{
min-width: 226rpx;
width: 226rpx;
overflow: hidden;
}
.quan .type{
width: 80%;
}
.dot{
width:22rpx;
height:50rpx;
font-size:36rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(204,65,17,1);
line-height:50rpx;
margin-bottom: 10rpx;
}
.number{
height:90rpx;
font-size:64rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(204,65,17,1);
line-height:90rpx;
margin-left: 10rpx;
}
.line{
height: 100rpx;
width:2rpx;
margin-right: 38rpx;
background-image: url("http://nosqn.colorcun.com/sellerbaobao/l-o2.png");
background-size: 2rpx 16rpx;
}
.card_title{
height:40rpx;
font-size:28rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(187,113,50,1);
line-height:40rpx;
}
.card-date{
height:32rpx;
font-size:22rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(187,113,50,1);
line-height:32rpx;
margin-top: 10rpx;
}
.quan-pt{
background:rgba(255,227,227,1);
}
.quan-pt:after{
background-image: url("http://nosqn.colorcun.com/sellerbaobao/rs2.png");
}
.quan-pt .dot,.quan-pt .number{
color:rgba(204,17,17,1);
}
.quan-pt .line{
background-image: url("http://nosqn.colorcun.com/sellerbaobao/l-r2.png");
}
.quan-pt .card_title,.quan-pt .card-date{
color:rgba(187,80,50,1);
}
.quan.bg-f5f5f5{
border-right: 14rpx solid #f5f5f5;
}
.quan-disabled{
background:rgba(245,245,245,1);
}
.quan-disabled:after{
background-image: url("http://nosqn.colorcun.com/sellerbaobao/rx2.png");
}
.quan-disabled .dot,.quan-disabled .number{
color:rgba(136,136,136,1);
}
.quan-disabled .line{
background-image: url("http://nosqn.colorcun.com/sellerbaobao/l-g2.png");
}
.quan-disabled .card_title,.quan-disabled .card-date{
color:rgba(136,136,136,1);
}
\ No newline at end of file
// components/reserve/share/share.js
import util from '../../../utils/util';
Component({
/**
* 组件的属性列表
*/
properties: {
seller_id:String,
hasSellerShare:{
type:Boolean,
value:false,
},
seller:{
type:Object,
value:{},
},
},
/**
* 组件的初始数据
*/
data: {
hasShow:false,
product:null,
},
lifetimes: {
attached: function () {
this.formatProduct()
},
moved: function () {
},
detached: function () {
},
},
/**
* 组件的方法列表
*/
methods: {
show(){
this.setData({
hasShow:true,
})
},
hide(){
this.setData({
hasShow:false,
})
},
shareDo(e){
this.hide()
let act=util.attr(e,'act');
if(!act) return;
console.log('shareDo.'+act,e);
wx.navigateTo({
url:util.http_build_query({
id:this.data.seller_id,
act:act,
hasSellerShare:this.data.hasSellerShare
},'/pages/reserve/share')
})
},
formatProduct(){
let seller=this.data.seller
let product= {
item_code:seller.id+"",
title:seller.sellername,
desc:seller.slogan,
category_list:(seller.cate && seller.cate.length>0)?seller.cate:['餐厅','饭店','餐饮','订包间','周到安排'],
image_list:seller.envi_image,
src_mini_program_path:'/pages/reserve/detail?id='+seller.id+'&from=haowu',
brand_info:{
name:seller.sellername,
logo:seller.seller_image,
phone:seller.seller_tel,
},
sku_list:[],
}
this.setData({
product:product,
})
},
}
})
<!--components/reserve/share/share.wxml-->
<view class="share mask" catchtap="hide" wx:if="{{hasShow}}">
<view class="share-view">
<view class="flex-lr" catchtap="catchtap">
<button class="button-none share-item flex-vc" open-type="share" catchtap="shareDo">
<image class="share-img wechat"></image>
<view class="share-name">微信</view>
</button>
<view class="share-item flex-vc" catchtap="shareDo" data-act="quanzi">
<image class="share-img quanzi"></image>
<view class="share-name">朋友圈</view>
</view>
<view class="share-item flex-vc" catchtap="shareDo" data-act="qrcode">
<image class="share-img qrcode"></image>
<view class="share-name">二维码</view>
</view>
<view class="share-item flex-vc">
<share-button type="3" fore-color="#dd6" product="{{product}}" style="height: 100rpx;">
<image class="share-img hwq"></image>
</share-button>
<view class="share-name">好物圈</view>
</view>
</view>
<view class="cancel">取消</view>
</view>
</view>
/* components/reserve/share/share.wxss */
@import "../../../app.wxss";
.share-view{
height: 390rpx;
background: #ffffff;
width: 100%;
padding: 50rpx 50rpx 0rpx;
position: fixed;
bottom: 0;
border-radius: 40rpx 40rpx 0px 0px;
box-sizing: border-box;
}
.share-img{
width: 100rpx;
height: 100rpx;
background-size: 100% 100%;
}
.share-img.wechat{
background-image: url("http://nosqn.colorcun.com/reserve/share/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201906251004331.png");
}
.share-img.quanzi{
background-image: url("http://nosqn.colorcun.com/reserve/share/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190625100433.png");
}
.share-img.qrcode{
background-image: url("http://nosqn.colorcun.com/reserve/share/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201906251004332.png");
}
.share-img.hwq{
background-image: url("http://nosqn.colorcun.com/reserve/images/hwq.png");
}
.share-name{
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
line-height: 40rpx;
margin-top: 20rpx;
}
.share-item{
min-width: 25%;
width: 25%;
}
.cancel{
width: 100%;
height: 80rpx;
background: #F5F5F5;
border-radius: 40rpx;
text-align: center;
line-height: 80rpx;
font-size: 34rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top:60rpx;
}
\ No newline at end of file
import util from '../../../utils/util';
import App from '../../../utils/api';
Component({
properties:{
seller:Object,
//选中日期
date:{
type:String,
value:util.unixtoTime(new Date()/1000,'YYYY-MM-DD'),
}
},
data:{
hidecalendar:true
},
attached(){
this.today=util.unixtoTime(new Date()/1000,'YYYY-MM-DD');
this.setData({
showYearMonth:this.getshowmonth(this.data.date)
})
this.hasNowInToday();
this.getweeklist();
this.getdaylist();
this.getFullDate();
},
ready(){
},
methods:{
//判断是否过了今天时段，并设置date
hasNowInToday(){
let daily=this.data.seller.daily
let maxDur='';
Object.keys(daily).forEach(k=>{
let dur=daily[k].split('-')
if(dur[1]>maxDur){
maxDur=dur[1]
}
})
let nowDur=util.unixtoTime(new Date()/1000,'HH:II')
let nowDate=this.data.date
if(nowDur>maxDur){
nowDate=util.unixtoTime(new Date()/1000+86400,'YYYY-MM-DD')
this.setData({
date:nowDate
})
}
//console.log('hasNowInToday',maxDur)
this.triggerEvent('selectdate',{date:nowDate,action:'defalut'})
},
//获取当前选中日期年月
getshowmonth(selecteddate){
let datearr=selecteddate.split('-');
return{
showyear:Number(datearr[0]),
showmonth:Number(datearr[1]),
}
},
//获得周列表
getweeklist(){
let week=['日','一','二','三','四','五','六'];
let weeklist=[];
for(let i=0;i<week.length;i++){
weeklist.push({
weekfont:week[i],
weeknum:i
})
}
this.setData({
weeklist:weeklist,
})
},
//获取日期列表
getdaylist(){
//选中时间时间戳
let selectedtime=Number(util.timetouUnix(this.data.date+' 00:00:00'));
//选中日期星期几
let selectedweek=new Date(this.data.date).getDay();
console.log('selectedweek',selectedweek)
let daylist=[],current=0;
//用于月历点击的时候判断是否改变周历列表
this.datelist={}
if(this.data.date==this.today){
selectedweek=0;
}
for(let i=0;i<14;i++){
let thistimestamp=selectedtime+(i-selectedweek)*86400;
let thisdate=new Date(thistimestamp*1000);
let thisdayobj={
year:thisdate.getFullYear(),
month:thisdate.getMonth()+1,
day:thisdate.getDate(),
week:thisdate.getDay(),
date:util.unixtoTime(thistimestamp,'YYYY-MM-DD'),
overdate:thistimestamp<=(new Date()/1000)-86400 ? true : false, //日期是否过期
istoday:false,
timestamp:thistimestamp,
}
//是否是今天
if(this.today==thisdayobj.date){
thisdayobj.istoday=true;
thisdayobj.mark='今'
}
if(util.unixtoTime(new Date()/1000+86400,'YYYY-MM-DD')==thisdayobj.date){
thisdayobj.mark='明'
}
thisdayobj.isselected=false
if(this.data.date==thisdayobj.date){
thisdayobj.isselected=true
current=i
}
thisdayobj.isselected=this.data.date==thisdayobj.date ? true : false;
//日期是否选中
daylist.push(thisdayobj);
this.datelist[thisdayobj.date]=Math.floor(i/7)+'-'+(i-Math.floor(i/7)*7)
}
this.setData({
current:this.getCurrentMax(current),
daylist:daylist
})
console.log('getdaylist.daylist',daylist,this.datelist)
},
//获取满房日期
getFullDate(){
let parmdata={
sid:this.data.seller.id,
type:'week',
date:this.data.daylist[0].date
}
App.Customer.GetHouseFullDate(parmdata).then((json)=>{
console.log(json)
if(json.ret==200){
if(json.data && json.data.length>0){
this.markFullHouse(json.data);
}
}
})
},
//标记满房
markFullHouse(fullHouseDate){
let daylist=this.data.daylist;
daylist.forEach((r,i)=>{
fullHouseDate.forEach((r1,n1)=>{
if(r1==r.date){
r.mark='满'
}
})
})
console.log('markFullHouse.daylist',daylist)
this.setData({
daylist:daylist
})
},
//选择日期
selectdate(e){
let _target=e.currentTarget.dataset;
this.changedatestyle(_target.date);
this.triggerEvent('selectdate',{date:_target.date,action:'click'});
this.setData({
date:_target.date,
showYearMonth:this.getshowmonth(_target.date),
current:this.getCurrentMax(_target.index-(_target.date==this.today?0:1)),
})
},
//日历组件---通知事件
tellselectdate(e){
console.log(e)
let _target=e.detail;
this.triggerEvent('selectdate',{date:_target.date,action:'click'});
this.setData({
date:_target.date,
showYearMonth:this.getshowmonth(_target.date),
hidecalendar:true
})
console.log('tellselectdate',_target.date , this.datelist,_target.date in this.datelist)
if(_target.date in this.datelist){
this.changedatestyle(_target.date)
}else{
this.getdaylist();
this.getFullDate();
}
},
//修改日期列表
changedatestyle(selecteddate){
let daylist=this.data.daylist;
let prevsingle,previndex,cursingle,curindex;
daylist.forEach((r,i)=>{
if(r.isselected){
prevsingle=i;
let prevkey='daylist['+prevsingle+'].isselected';
this.setData({
[prevkey]:false,
})
}
if(r.date==selecteddate){
cursingle=i;
}
})
let currentkey='daylist['+cursingle+'].isselected';
this.setData({
[currentkey]:true,
current:this.getCurrentMax(cursingle-(selecteddate==this.today?0:1)),
})
},
clickmore(){
this.setData({
hidecalendar:false
})
},
getCurrentMax(current){
return current>10?10:current;
},
closecalendar(){
this.setData({
hidecalendar:true
})
}
}
})
\ No newline at end of file
<wxs src="../../../utils/util.wxs" module="util" />
<view class="padding-lr-lg padding-top-lg">
<view class="flex justify-between align-center margin-bottom" catchtap="clickmore">
<view class="txt-36-h text-bold">预订日期</view>
<view class="flex align-center txt-24-h">
更多
<view class="more margin-left-xs"></view>
</view>
</view>
</view>
<swiper previous-margin="35rpx" next-margin="45rpx"
class="tabs date" current="{{current}}"
display-multiple-items="4">
<swiper-item wx:for="{{daylist}}" wx:key="daylist">
<view class="item {{item.isselected?'active':''}} flex flex-direction justify-center"
catchtap="{{item.overdate ? '' : 'selectdate'}}"
data-index="{{index}}" data-date="{{item.date}}" data-type="date">
<view class="name">{{util.unixtoTime(item.timestamp,'DAY')||util.unixtoTime(item.timestamp,'周WW')}}</view>
<view class="mmdd">{{util.unixtoTime(item.timestamp,'MM月DD日')}}</view>
</view>
</swiper-item>
</swiper>
<!--
<view class="week-calendar">
<view class="week-calendar-content">
<block wx:for="{{daylist}}" wx:for-item="itemlist" wx:for-index="indexlist" wx:key="{{indexlist}}">
<view class="week-calendar-day-list flex flex-wrap">
<block wx:for="{{itemlist.list}}" wx:key="{{index}}">
<view class="{{item.overdate ? 'gray-font' : 'font-font'}} font30r Semibold week-calendar-day flex-cc {{item.istoday ? 'today' : ''}} {{item.isselected ? 'bg-yellow white-font' : ''}}" data-date="{{item.date}}" catchtap="{{item.overdate ? '' : 'selectdate'}}">{{item.mark ? item.mark : item.day}}</view>
</block>
</view>
</block>
</view>
</view>
-->
<view class="calendar-mask" hidden="{{hidecalendar}}" catchtap="closecalendar"></view>
<view class="calendar-cover" hidden="{{hidecalendar}}">
<online-calendar seller="{{seller}}" date="{{date}}" hidecalendar="{{hidecalendar}}" bindtellselectdate="tellselectdate"></online-calendar>
</view>
\ No newline at end of file
@import "../../../colorui/main.wxss";
.tabs {
height: 100rpx;
}
.tabs .item{
width:120rpx;
height:100rpx;
line-height: 100rpx;
border-radius:10rpx;
border:2rpx solid #fffff;
font-size:28rpx;
font-weight:400;
color:#353535;
text-align: center;
box-sizing: border-box;
}
.tabs .item.active{
background: #F4FAFF;
border-radius: 10rpx;
border: 2rpx solid #42A5FF;
color:#42A5FF;
font-weight: bold;
}
.date .item{
width: 140rpx;
height: 100rpx;
}
.item .name{
height: 36rpx;
font-size: 26rpx;
line-height: 36rpx;
}
.item .mmdd{
height: 40rpx;
font-size: 28rpx;
line-height: 40rpx;
}
.calendar-mask{
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
z-index:10;
background:rgba(21,20,20,.5);
}
.calendar-cover{
position: fixed;
left:0;
right:0;
bottom:0;
background: #FFFFFF;
border-top-left-radius:40rpx;
border-top-right-radius:40rpx;
overflow: hidden;
z-index:11;
}
\ No newline at end of file
import util from '../../../utils/util';
import App from '../../../utils/api';
Component({
properties:{
seller:Object,
//选中日期
date:{
type:String,
value:util.unixtoTime(new Date()/1000,'YYYY-MM-DD'),
}
},
data:{
hidecalendar:true
},
attached(){
this.setData({
showYearMonth:this.getshowmonth(this.data.date)
})
this.hasNowInToday();
this.getweeklist();
this.getdaylist();
this.getFullDate();
},
ready(){
},
methods:{
//判断是否过了今天时段，并设置date
hasNowInToday(){
let daily=this.data.seller.daily
let maxDur='';
Object.keys(daily).forEach(k=>{
let dur=daily[k].split('-')
if(dur[1]>maxDur){
maxDur=dur[1]
}
})
let nowDur=util.unixtoTime(new Date()/1000,'HH:II')
let nowDate=this.data.date
if(nowDur>maxDur){
nowDate=util.unixtoTime(new Date()/1000+86400,'YYYY-MM-DD')
this.setData({
date:nowDate
})
}
//console.log('hasNowInToday',maxDur)
this.triggerEvent('selectdate',{date:nowDate,action:'defalut'})
},
//获取当前选中日期年月
getshowmonth(selecteddate){
let datearr=selecteddate.split('-');
return{
showyear:Number(datearr[0]),
showmonth:Number(datearr[1]),
}
},
//获得周列表
getweeklist(){
let week=['日','一','二','三','四','五','六'];
let weeklist=[];
for(let i=0;i<week.length;i++){
weeklist.push({
weekfont:week[i],
weeknum:i
})
}
this.setData({
weeklist:weeklist,
})
},
//获取日期列表
getdaylist(){
//选中时间时间戳
let selectedtime=Number(util.timetouUnix(this.data.date+' 00:00:00'));
//选中日期星期几
let selectedweek=new Date(this.data.date).getDay();
//今天日期
let today=util.unixtoTime(new Date()/1000,'YYYY-MM-DD');
console.log('selectedweek',selectedweek)
let daylist=[{list:[]},{list:[]}];
//用于月历点击的时候判断是否改变周历列表
this.datelist={};
for(let i=0;i<14;i++){
let thistimestamp=selectedtime+(i-selectedweek)*86400;
let thisdate=new Date(thistimestamp*1000);
let thisdayobj={
year:thisdate.getFullYear(),
month:thisdate.getMonth()+1,
day:thisdate.getDate(),
week:thisdate.getDay(),
date:util.unixtoTime(thistimestamp,'YYYY-MM-DD'),
overdate:thistimestamp<=(new Date()/1000)-86400 ? true : false, //日期是否过期
istoday:false
}
//是否是今天
if(today==thisdayobj.date){
thisdayobj.istoday=true;
thisdayobj.mark='今'
}
if(util.unixtoTime(new Date()/1000+86400,'YYYY-MM-DD')==thisdayobj.date){
thisdayobj.mark='明'
}
thisdayobj.isselected=this.data.date==thisdayobj.date ? true : false;
//日期是否选中
daylist[Math.floor(i/7)].list.push(thisdayobj);
this.datelist[thisdayobj.date]=Math.floor(i/7)+'-'+(i-Math.floor(i/7)*7)
}
this.setData({
daylist:daylist
})
console.log(daylist,this.datelist)
},
//获取满房日期
getFullDate(){
let parmdata={
sid:this.data.seller.id,
type:'week',
date:this.data.daylist[0].list[0].date
}
App.Customer.GetHouseFullDate(parmdata).then((json)=>{
console.log(json)
if(json.ret==200){
if(json.data && json.data.length>0){
this.markFullHouse(json.data);
}
}
})
},
//标记满房
markFullHouse(fullHouseDate){
let daylist=this.data.daylist;
daylist.forEach((v,i)=>{
v.list.forEach((r,n)=>{
fullHouseDate.forEach((r1,n1)=>{
if(r1==r.date){
r.mark='满'
}
})
})
})
this.setData({
daylist:daylist
})
},
//选择日期
selectdate(e){
let _target=e.currentTarget.dataset;
this.changedatestyle(_target.date);
this.triggerEvent('selectdate',{date:_target.date,action:'click'});
this.setData({
date:_target.date,
showYearMonth:this.getshowmonth(_target.date)
})
},
//日历组件---通知事件
tellselectdate(e){
console.log(e)
let _target=e.detail;
this.triggerEvent('selectdate',{date:_target.date,action:'click'});
this.setData({
date:_target.date,
showYearMonth:this.getshowmonth(_target.date),
hidecalendar:true
})
if(_target.date in this.datelist){
this.changedatestyle(_target.date)
}else{
this.getdaylist();
this.getFullDate();
}
},
//修改日期列表
changedatestyle(selecteddate){
let daylist=this.data.daylist;
let prevsingle,previndex,cursingle,curindex;
daylist.forEach((v,i)=>{
v.list.forEach((r,n)=>{
if(r.isselected){
prevsingle=i;
previndex=n;
let prevkey='daylist['+prevsingle+'].list['+previndex+'].isselected';
this.setData({
[prevkey]:false,
})
}
if(r.date==selecteddate){
cursingle=i;
curindex=n;
}
})
})
let currentkey='daylist['+cursingle+'].list['+curindex+'].isselected';
this.setData({
[currentkey]:true
})
},
clickmore(){
this.setData({
hidecalendar:false
})
},
closecalendar(){
this.setData({
hidecalendar:true
})
}
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {
"online-calendar":"../online-calendar/online-calendar"
}
}
\ No newline at end of file
<view class="week-calendar">
<view class="week-calendar-header flex-lr">
<view class="week-calendar-header-title week-calendar-header-item black-font font30r Semibold">{{showYearMonth.showyear}}-{{showYearMonth.showmonth<10 ? '0'+showYearMonth.showmonth : showYearMonth.showmonth}}</view>
<view class="week-calendar-header-more week-calendar-header-item flex-rr" catchtap="clickmore">
<view class="black-font font24r">更多</view>
<image class="click-icon" src="/pages/image/click-icon.png"></image>
</view>
</view>
<view class="week-calendar-week flex-lr">
<block wx:for="{{weeklist}}" wx:key="{{index}}">
<view class="gray-font font30r Semibold" style="line-height:40rpx;">{{item.weekfont}}</view>
</block>
</view>
<view class="week-calendar-content">
<block wx:for="{{daylist}}" wx:for-item="itemlist" wx:for-index="indexlist" wx:key="{{indexlist}}">
<view class="week-calendar-day-list flex-lr">
<block wx:for="{{itemlist.list}}" wx:key="{{index}}">
<view class="{{item.overdate ? 'gray-font' : 'font-font'}} font30r Semibold week-calendar-day flex-cc {{item.istoday ? 'today' : ''}} {{item.isselected ? 'bg-yellow white-font' : ''}}" data-date="{{item.date}}" catchtap="{{item.overdate ? '' : 'selectdate'}}">{{item.mark ? item.mark : item.day}}</view>
</block>
</view>
</block>
</view>
</view>
<view class="calendar-mask" hidden="{{hidecalendar}}" catchtap="closecalendar"></view>
<view class="calendar-cover" hidden="{{hidecalendar}}">
<online-calendar seller="{{seller}}" date="{{date}}" hidecalendar="{{hidecalendar}}" bindtellselectdate="tellselectdate"></online-calendar>
</view>
\ No newline at end of file
@import "../../../app.wxss";
.week-calendar{
width:100%;
height:336rpx;
background:#FFFBF2;
padding:0 40rpx;
box-sizing: border-box;
}
.week-calendar-header, .week-calendar-week{
width:100%;
padding:0 20rpx;
box-sizing: border-box;
}
.week-calendar-header-item{
padding:30rpx 0;
}
.week-calendar-content{
width:100%;
padding-top:16rpx;
}
.week-calendar-day-list{
width:100%;
margin-bottom:26rpx;
}
.week-calendar-day{
width:70rpx;
height:70rpx;
box-sizing: border-box;
border-radius:50%;
}
.week-calendar-day.today{
border:2rpx solid #C0A369;
}
.week-calendar-day.bg-yellow{
background: -webkit-linear-gradient(top, #F2D190, #C0A369); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(-45deg, #F2D190, #C0A369); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(top, #F2D190, #C0A369); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom, #F2D190, #C0A369);
border-width:0;
}
.click-icon{
width:12rpx;
height:20rpx;
padding-left:10rpx;
}
.calendar-mask{
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
z-index:10;
background:rgba(21,20,20,.5);
}
.calendar-cover{
position: fixed;
left:0;
right:0;
bottom:0;
background: #FFFBF2;
border-top-left-radius:20rpx;
border-top-right-radius:20rpx;
overflow: hidden;
z-index:11;
}
\ No newline at end of file
Component({
properties: {
searchlist: Array,
},
methods: {
selectphone: function (e) {
console.log(e)
var target = e.currentTarget.dataset;
this.triggerEvent('selectphone', {
phone: target.phone,
rname: target.rname,
cusdem: target.cusdem,
sex: target.sex
})
}
}
})
\ No newline at end of file
{
"component":true
}
\ No newline at end of file
<view class="search-react">
<view class="angel bg_white"></view>
<scroll-view class="search-list bg_white" scroll-y>
<block wx:for="{{searchlist}}">
<view class="list-single flex-lr black-font font30r" data-cusdem="{{item.cusdem}}" data-phone="{{item.phone}}" data-rname="{{item.rname}}" data-sex="{{item.sex}}" bindtap="selectphone" style="border-top:{{index==0 ? 0 : '1px solid #E0E0E0;'}}">
<view>{{item.phone}}</view>
<view>{{item.rname}}</view>
</view>
</block>
</scroll-view>
</view>
\ No newline at end of file
@import '../../app.wxss';
.search-react{
width:400rpx;
height:541rpx;
position: absolute;
left:0;
top:142rpx;
z-index:10;
}
.angel{
width:30rpx;
height:30rpx;
border-top:1px solid #E0E0E0;
border-left:1px solid #E0E0E0;
transform:rotate(45deg);
margin:0 auto;
position:relative;
z-index:10;
}
.search-list{
width:100%;
max-height:500rpx;
border:1px solid #E0E0E0;
border-radius:16rpx;
position:relative;
top:-16rpx;
box-shadow:0 0 4px rgba(0,0,0,.1);
overflow-y: auto;
}
.list-single{
width:100%;
height:100rpx;
padding:35rpx 30rpx 5rpx;
box-sizing:border-box;
}
\ No newline at end of file
// components/seller-card/seller-card.js
import util from '../../utils/util';
import RS from '../../utils/reserveStatus'
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
seller: Object,
detail: {
type: Object,
value: {},
observer: function () {
//console.log('observer', arguments);
this.init();
}
},
hasMaster: { //预订人+手机
type: Boolean,
value: false
},
hasListShare: { //首页列表的预订人+分享
type: Boolean,
value: false
},
hasShowStatus: { //右上角显示状态
type: Boolean,
value: false
},
hasAddress: { //显示地址，默认显示
type: Boolean,
value: true
},
hasOnlineReserve:{ //是否为在线预订卡片
type: Boolean,
value: false
},
},
/**
* 组件的初始数据
*/
data: {
rdateStr: "",
tableSubInfo: "",
masterMan: "",
},
attached() {
},
detached() {
},
/**
* 组件的方法列表
*/
methods: {
init() {
if (this.data.detail && this.data.detail.ddate) {
let masterMan = (this.data.detail.rname || '');
if (this.data.detail.phone) {
masterMan += ' （' +
this.data.detail.phone
.replace(/([\d]{2}).*([\d]{4})/, function ($0, $1, $2) {
return $1 + '*' + $2
})
+ '）';
}
let tableSubInfo = ''
let tableFirst = '';
if (this.data.detail.tableFirst) {
tableSubInfo = (this.data.detail.tableFirst || '') + ' ' + (this.data.detail.tableSubInfo || '');
tableFirst = this.data.detail.tableFirst
} else if(this.data.detail.tables && this.data.detail.tables.length>0) {
tableFirst = this.data.detail.tables[0].name
tableSubInfo = this.data.detail.tables[0].name;
if (this.data.detail.tables.length > 1) {
tableSubInfo += ' 等' + (this.data.detail.tables.length) + '个'
+ (this.data.detail.tables[0].tid == 2 ? '包间' : '');
tableFirst += '等';
}
}
let obj = {
rdateStr: util.unixtoTime(this.data.detail.ddate, 'MM月DD日 HH:II'),
tableSubInfo: tableSubInfo,
tableFirst: tableFirst,
masterMan: masterMan,
}
if (this.data.hasShowStatus) {
obj.showStatusStr = RS.reserve(this.data.detail).getStatusStr;
}
this.setData(obj)
}
},
lookLocation: function () {
//console.log(this.data.seller.lat,this.data.seller.long,this.data.detail.map_address)
wx.openLocation({
latitude: Number(this.data.seller.lat),
longitude: Number(this.data.seller.long),
scale: 17,
address: this.data.seller.map_address,
success: function (res) {
console.log(res)
}
})
},
tapEvent(){
this.triggerEvent('event',{
act:'gotoDetail',
detail:this.data.detail,
})
},
}
})
{
"component": true,
"usingComponents": {
"formids": "/components/formids/formids"
}
}
\ No newline at end of file
<!--components/seller-card/seller-card.wxml-->
<wxs src="../../utils/util.wxs" module="util" />
<view class="card {{hasOnlineReserve?'online':''}}">
<formids url="{{hasOnlineReserve?'':('/pages/reserve/detail?id='+seller.id)}}" catchtap="">
<view class="seller flex-lr">
<view class="flex-ll" style="max-width: {{hasShowStatus?'80%':'94%'}};">
<view class="avatar" wx:if="{{seller.seller_image}}">
<image src="{{seller.seller_image}}"></image>
</view>
<view class="card-class name Medium">{{seller.sellername}}</view>
</view>
<view wx:if="{{hasShowStatus}}" style="font-size: 30rpx;">
{{showStatusStr}}
</view>
<view class="more" wx:else="">
<image src="http://nosqn.colorcun.com/custom/lite-yd/image/click.png"></image>
</view>
</view>
</formids>
<formids bindclick="tapEvent">
<view class="context flex-lr">
<view class="left info Medium">
<view class="label">时间</view>
<view class="value" wx:if="{{hasOnlineReserve || detail.hasUpdateDate}}">
<text wx:if="{{detail.ddate>0}}">{{util.unixtoTime(detail.ddate||'','MM月DD日')}}　{{util.reserveTimeSpace(detail.ddate_solt||detail.section)}}</text>
</view>
<view class="value" wx:else="">{{detail.rdateStr}}</view>
</view>
<view class="line"></view>
<view class="right info Medium" wx:if="{{(detail.type==1 && (detail.status==4 || detail.status==0)) || hasOnlineReserve || detail.status==0 || detail.status==6}}">
<view class="label">包间</view>
<view class="value">{{util.getRoomName(detail.room_demand)}}</view>
</view>
<view class="right info Medium" wx:else="">
<view class="label">包间{{detail.tables.length>1?(" ("+detail.tables.length+"个)"):""}}</view>
<view class="value">{{tableFirst}}</view>
</view>
</view>
</formids>
<view class="seller address flex-ll" catchtap="lookLocation" wx:if="{{hasAddress}}">
<view class="gps-icon">
<image src="http://nosqn.colorcun.com/custom/lite-yd/image/gps-icon.png"></image>
</view>
<view class="address-txt">
{{seller.map_address}}
</view>
</view>
<view class="seller master flex-lr" wx:if="{{hasMaster}}">
<view class="master-label">
预订人
</view>
<view class="master-man">
{{masterMan}}
</view>
</view>
<view class="seller master flex-lr" wx:if="{{hasListShare}}">
<view class="flex-ll">
<view class="master-label">
预订人
</view>
<view class="master-man" style="margin-left: 20rpx;">{{detail.rname}}</view>
</view>
<view class="master-man">
<slot name="listshare"></slot>
</view>
</view>
<view>
<slot name="opt"></slot>
</view>
</view>
/* components/seller-card/seller-card.wxss */
@import "../../app.wxss";
.card{
border-radius: 10rpx;
box-shadow: 2rpx 2rpx 14rpx 6rpx rgba(231,228,228,.5);
}
.seller{
padding: 36rpx;
height: 50rpx;
line-height: 50rpx;
}
.seller .avatar{
width: 60rpx;
height: 60rpx;
min-width: 60rpx;
border-radius: 50%;
margin-right: 20rpx;
overflow: hidden;
}
.seller .more{
width: 14rpx;
height: 26rpx;
min-width: 14rpx;
}
.seller image{
width: 100%;
height: 100%;
display: inherit;
}
.seller .name{
font-size: 36rpx;
color:#AD7644;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.context{
background-color: #E6EBEE;
width: 100%;
padding: 30rpx 0;
height: 160rpx;
}
.context .left,.context .right{
width: 49%;
min-width: 49%;
}
.context .line{
width: 2rpx;
background-color: #D8D6D6;
height: 160rpx;
color: #353535;
}
.info {
text-indent: 40rpx;
text-align: left;
}
.info .label{
font-size: 26rpx;
height: 36rpx;
line-height: 36rpx;
}
.info .value{
font-size: 36rpx;
height: 50rpx;
line-height: 50rpx;
margin-top: 6rpx;
font-weight: bold;
white-space:nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.address{
font-size: 30rpx;
color: #999999;
line-height: 70rpx;
height: 70rpx;
}
.gps-icon{
width: 28rpx;
height: 34rpx;
min-width: 28rpx;
margin-right: 20rpx;
}
.address-txt{
line-height: 40rpx;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.master{
padding-top: 0;
}
.master-label{
font-size: 20rpx;
background-color: #C8B16D;
line-height: 30rpx;
height: 30rpx;
width: 70rpx;
padding: 5rpx 10rpx;
text-align: center;
color:#FEFEFE;
}
.master-man{
font-size: 26rpx;
}
.opt{
padding-top: 0;
}
.online .seller .name{
color: #353535;
}
.online .context{
background-color: #F5F5F5;
}
.online .context .line{
background-color: #ECEBEB;
}
// components/showModal/showModal.js
import util from '../../utils/util'
const properties={
cancelText:{type:String,value:''},
cancelColor:{type:String,value:'#000'},
confirmText:{type:String,value:'确认'},
confirmColor:{type:String,value:'#393'},
header:{type:String,value:'确认信息'},
body:{type:String,value:'确认信息'},
};
Component({
/**
* 组件的属性列表
*/
properties: properties,
/**
* 组件的初始数据
*/
data: {
hasShow:false,
},
attached(){
let opt={};
Object.keys(properties).forEach((k)=>{
opt[k]=this.data[k]
})
this.setData({
opt:opt
})
},
/**
* 组件的方法列表
*/
methods: {
options(obj){
let opt=this.data.opt;
this.setData({
opt:{
...opt,
...obj
}
})
return this;
},
show(){
console.log(this.data.opt)
this.setData({
hasShow:true,
})
},
tapButton(e){
this.triggerEvent('showModal',{type:util.attr(e,'type')})
this.hide();
},
hide(){
this.setData({
hasShow:false,
})
}
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/showModal/showModal.wxml-->
<view class="mask flex-vc" hidden="{{!hasShow}}">
<view class="showModal">
<view class="header">
{{opt.header}}
</view>
<view class="body">{{opt.body}}</view>
</view>
<view class="footer flex-cc">
<button class="button-none cancel" plain wx:if="{{opt.cancelText}}"
bindtap="tapButton" data-type="cancel"
style="color:{{opt.cancelColor}};">{{opt.cancelText}}</button>
<button class="button-none" plain
bindtap="tapButton" data-type="confirm"
style="color:{{opt.confirmColor}};">{{opt.confirmText}}</button>
</view>
</view>
/* components/showModal/showModal.wxss */
@import "../../app.wxss";
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
top:0;
left: 0;
}
.showModal{
width: 80%;
background-color: #fff;
padding: 20rpx 5% 0 5%;
}
.showModal .header{
font-size: 40rpx;
line-height: 120rpx;
height: 120rpx;
}
.showModal .body{
font-size: 30rpx;
margin-bottom: 30rpx;
}
.footer{
border-top: 2rpx solid #ccc;
background-color: #fff;
width: 90%;
}
.footer .button-none{
line-height: 120rpx;
height: 120rpx;
border-width: 0;
}
.footer .button-none.cancel{
border-right: 2rpx solid #ccc !important;
}
\ No newline at end of file
// components/stat/stat.js
Component({
/**
* 组件的属性列表
*/
properties: {
stat: {
type: String,
value:"4.5",
},
color:{
type:String,
value:'',
},
hasShowText:{
type:Boolean,
value:true,
}
}
,
/**
* 组件的初始数据
*/
data: {
statnum:90.21
},
observers: {
'stat': function (stat) {
console.log('stat...',stat)
stat=parseFloat(stat)
let statnum=0;
statnum=(stat/5)
let px=(parseInt(stat)-1)*0.00070 //(5/(84*84))
statnum=(statnum+px)*100
this.setData({
statnum:statnum,
})
}
},
/**
* 组件的方法列表
*/
methods: {}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/stat/stat.wxml-->
<view class="flex-ll">
<view class="stat">
<view class="bg" style="background-color: {{color}};width: {{statnum}}%"></view>
<image src="http://nosqn.colorcun.com/custom/lite-online/image/%E9%95%82%E7%A9%BA%E6%98%9F%E6%98%9F.png"></image>
</view>
<view class="stat-text" wx:if="{{hasShowText}}">{{stat}} 分</view>
</view>
/* components/stat/stat.wxss */
@import "../../app.wxss";
.stat{
width: 168rpx;
height: 30rpx;
position: relative;
background-color: #E0E0E0;
overflow: hidden;
}
.stat .bg{
position: absolute;
left: 2rpx;
width: 80%;
top:2rpx;
height: 98%;
background-color: #F05522;
z-index: 1;
}
.stat image{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
z-index: 2;
}
.stat-text{
margin-left: 10rpx;
}
// component/zyslider/zyslider.js
var util = require('../../utils/util')
Component({
/**
* 组件的属性列表
*/
properties: {
/** slider 最小值 */
cla:String,//额外样式名称
min: {
type: Number
},
/** slider 最大值 */
max: {
type: Number
},
/** 步进 （没做，有时间再说，项目里没用到撒） */
step: {
type: Number
},
/** 预选选择的小值*/
minValue: {
type: Number
},
/** 预选选择的大值 */
maxValue: {
type: Number
},
/** 滑块颜色 */
blockColor:{
type: String
},
/** 未选择进度条颜色 */
backgroundColor:{
type: String
},
/** 已选择进度条颜色 */
selectedColor:{
type: String
}
},
/**
* 组件的初始数据
*/
data: {
min: 0,
max: 300,
leftValue: 0,
rightValue: 300,
totalLength: 0,
bigLength: 0,
ratio: 0.5,
sliderLength: 30,
containerLeft: 0, //标识整个组件，距离屏幕左边的距离
hideOption: '', //初始状态为显示组件
},
/**
* 组件的方法列表
*/
methods: {
/**
* 设置左边滑块的值
*/
_propertyLeftValueChange: function () {
let minValue = this.data.minValue / this.data.max * this.data.bigLength
let min = this.data.min / this.data.max * this.data.bigLength
this.setData({
leftValue: minValue - min
})
},
/**
* 设置右边滑块的值
*/
_propertyRightValueChange: function () {
let right = this.data.maxValue / this.data.max * this.data.bigLength + this.data.sliderLength
this.setData({
rightValue: right
})
},
/**
* 滑块滑动
* @param e
*/
sliderMove(e){
this.sliderEvent=e
//console.log('sliderMove.changing',this.sliderMoving)
if(this.sliderMoving) return;//移动中
setTimeout(()=>{
let type=util.attr(this.sliderEvent,'type')
let pos=this.sliderEvent.changedTouches[0].pageX
let pagex = pos / this.data.ratio - this.data.containerLeft - this.data.sliderLength / 2
//console.log('changing',this.sliderEvent.changedTouches[0].pageX,pos);
let myEventDetail={}
if(type=='max'){
if (pagex <= (this.data.leftValue + this.data.sliderLength)) {
pagex = (this.data.leftValue + this.data.sliderLength)
} else if (pagex >= (this.data.totalLength - this.data.sliderLength)) {
pagex = (this.data.totalLength - this.data.sliderLength)
}
this.setData({
rightValue: pagex
})
pagex = pagex - this.data.sliderLength
let heighValue = parseInt(pagex / this.data.bigLength * (this.data.max - this.data.min) + this.data.min)
myEventDetail = { type:'max',value: this.setStepValue(heighValue) }
}else{
if (pagex + this.data.sliderLength >= this.data.rightValue) {
pagex = this.data.rightValue - this.data.sliderLength
} else if (pagex <= 0) {
pagex = 0
}
this.setData({
leftValue: pagex
})
let lowValue = parseInt(pagex / this.data.bigLength * parseInt(this.data.max - this.data.min) + this.data.min)
myEventDetail = { type:'min',value: this.setStepValue(lowValue) }
}
//console.log('event',myEventDetail);
this.triggerEvent('event', myEventDetail)
this.sliderMoving=false
},0)
this.sliderMoving=true
},
setStepValue(val) {
let step = this.data.step || 1;
if (step == 1) return val;
let yus=val%step,sha=parseInt(val/step)
if(yus>step/2){
sha+=1;
}
return sha*step;
},
/**
* 隐藏组件
*/
hide: function () {
this.setData({
hideOption: 'hide',
})
},
/**
* 显示组件
*/
show: function () {
this.setData({
hideOption: '',
})
},
/**
* 重置
*/
reset: function () {
this.setData({
rightValue: this.data.totalLength,
leftValue: 0,
})
},
changeVal(min,max) {
this.setData({
minValue: parseInt(min),
maxValue: parseInt(max),
})
this._propertyLeftValueChange()
this._propertyRightValueChange()
this.triggerEvent('event', { type:'once',min:min,max:max})
},
},
ready: function () {
let that = this;
const getSystemInfo = util.wxPromisify(wx.getSystemInfo)
const queryContainer = util.wxPromisify(wx.createSelectorQuery().in(this).select(".container").boundingClientRect)
util.wxPromisify(wx.getSystemInfo)()
.then(res => {
let ratio = res.windowWidth / 750
that.setData({
ratio: ratio,
})
})
.then(() => {
var query = wx.createSelectorQuery().in(this)
query.select(".container").boundingClientRect(function (res) {
that.setData({
totalLength: res.width / that.data.ratio - that.data.sliderLength,
bigLength: res.width / that.data.ratio - that.data.sliderLength * 3,
rightValue: res.width / that.data.ratio - that.data.sliderLength,
containerLeft: res.left / that.data.ratio
})
/**
* 设置初始滑块位置
*/
that._propertyLeftValueChange()
that._propertyRightValueChange()
}).exec()
})
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--component/zyslider.wxml-->
<slot></slot>
<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>
<view class="slider-body left" style="left:{{sliderLength}}rpx; width:{{leftValue}}rpx;background-color:{{backgroundColor}};"></view>
<view class="slider-body body" style="left:{{leftValue}}rpx; width:{{rightValue-leftValue}}rpx;background-color:{{selectedColor}};"></view>
<view class="slider-body right" style="left:{{rightValue}}rpx; width:{{totalLength - rightValue}}rpx;background-color:{{backgroundColor}};"></view>
</view>
/* component/zyslider.wxss */
.container {
/*height: 100%;*/
width: 100%;
position: relative;
}
.slider-body {
height: 6rpx;
background: #D8D8D8;
border-radius: 3rpx;
position: relative;
}
.body {
bottom: 60rpx;
height: 6rpx;
background: #E9BE94;
border-radius: 3rpx;
z-index: 0.3;
}
.left {
bottom: 60rpx;
z-index: 0.1;
}
.right {
z-index: 0.2;
bottom: 64rpx;
}
.slider-item {
width: 60rpx;
height: 60rpx;
background: #FFFFFF;
box-shadow: 0px 4rpx 8rpx 0rpx #E6F3FF;
border: 2rpx solid #E6F3FF;
border-radius: 50%;
z-index: 2;
}
.slider20 .slider-item{
box-shadow: 0px 4prx 8rpx 0rpx #E6F3FF;
border: 2rpx solid #E6F3FF;
}
.min {
position: relative;
top: 40rpx;
/*left: 100rpx;*/
}
.max {
position: relative;
bottom: 22rpx;
/*left: 600rpx;*/
}
.hide{
display: none;
}
\ No newline at end of file
// components/tips/add-to-lite.js
import util from '../../utils/util'
const cache_key='A2L-'
Component({
/**
* 组件的属性列表
*/
properties: {
bgColor:{
type:String,
value:'rgba(0,0,0,0.6)',
},
key:String,
type:{
type:String,
value:'yellow',
},
hitStr:String,
},
/**
* 组件的初始数据
*/
data: {
hidden:true,
statusBarHeightFull:0,
},
attached(){
let cacheKey=cache_key+this.data.key
let ca=util.cache(cacheKey);
if(ca){
this.hide();
}else{
let p=getCurrentPages()
console.log('add-to-lite.attached',p)
if(p.length==1){
this.show();
}
}
},
/**
* 组件的方法列表
*/
methods: {
show(){
this.triggerEvent("show");
//导航栏自适应
if(this.data.type=='black20'){
let systemInfo = wx.getSystemInfoSync();
let reg = /ios/i;
let pt = 20;//导航状态栏上内边距
let h = 44;//导航状态栏高度
if(reg.test(systemInfo.system)){
pt = systemInfo.statusBarHeight;
h = 44;
}else{
pt = systemInfo.statusBarHeight;
h = 48;
}
this.setData({
hidden:false,
statusBarHeightFull:(pt+h-5),
})
}else{
this.setData({
hidden:false,
statusBarHeightFull:0,
})
}
if(!this.timeInterval){
this.timeIntervalNum=0;
this.timeInterval=setInterval(()=>{
this.hasClose();
},1000)
}
},
hasClose(){
if(this.timeIntervalNum>=10){
this.hide();
clearInterval(this.timeInterval);
return;
}
this.timeIntervalNum++;
},
hide(){
this.triggerEvent("hide");
let cacheKey=cache_key+this.data.key
util.cache(cacheKey,cacheKey);
this.setData({
hidden:true,
})
},
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/tips/add-to-lite.wxml-->
<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=='black20'}}">
<view class="flex-ll text title">
点击
<view class="more"></view>
添加到我的小程序
</view>
<view class="text">微信下拉即可快速订包间</view>
</view>
<view class="flex-ll" wx:else="">
<view class="flex-ll text">
点击
<view class="more"></view>
添加到我的小程序，微信下拉即可快速
<view class="Semibold">{{hitStr||'查空房'}}</view>
</view>
</view>
<view class="close"></view>
</view>
</view>
/* components/tips/add-to-lite.wxss */
@import "../../app.wxss";
.tip{
position:relative;
}
.tip .content{
height:88rpx;
line-height: 88rpx;
box-sizing: border-box;
padding: 0 20rpx 0;
}
.tip .text{
line-height:28rpx;
height: 28rpx;
width: 100%;
text-align: left;
}
.tip .more{
width: 32rpx;
height: 10rpx;
background-size: 100% 100%;
margin: 0 10rpx 0;
min-width: 32rpx;
}
.tip .close{
width: 20rpx;
height: 20rpx;
background-size: 100% 100%;
min-width: 20rpx;
}
.tip .jian{
background-size: 100% 100%;
width: 32rpx;
height: 36rpx;
margin-left: 200rpx;
}
.tip.yellow{
width:334rpx;
right: 40rpx;
font-size:20rpx;
font-weight:500;
position: fixed;
z-index: 99;
}
.tip.yellow .content{
height:100rpx;
line-height: 100rpx;
background:rgba(236,217,183,1);
border-radius:10rpx;
color:rgba(121,79,40,1);
}
.tip.yellow .more{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201911181208295.png");
}
.tip.yellow .close{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20191118120829.png");
}
.tip.yellow .jian{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201911181208293.png");
}
.tip.black{
background-color: rgba(245,245,245,1);
height: 95rpx;
padding-top: 6rpx;
}
.tip.black .content{
background-color: #ffffff;
width: 100%;
height: 88rpx;
line-height: 88rpx;
font-size:24rpx;
font-weight:500;
color:rgba(53,53,53,1);
padding-left:50rpx;
padding-right:50rpx;
}
.tip.black .jian{
position: absolute;
top:-14rpx;
right:150rpx;
margin-left: 0;
z-index: 9999;
background-image: url("http://nosqn.colorcun.com/reserve/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201911181208292.png");
}
.tip.black .close{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201911181208291.png");
}
.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
// components/tips/boost.js
const cacheKey='A2L-INDEX'
Component({
/**
* 组件的属性列表
*/
properties: {
},
lifetimes: {
attached: function() {
this.show()
},
},
/**
* 组件的初始数据
*/
data: {
disp:false,
animation:'',
background:[{
url:'http://nosqn.colorcun.com/boots/1.png',
txt:'1.戳选地图上的商家，开始预订',
},{
url:'http://nosqn.colorcun.com/boots/3.png',
txt:'2.搜索商家或位置，开始预订',
}],
},
/**
* 组件的方法列表
*/
methods: {
show(){
wx.getStorage({
key:cacheKey,
fail:()=>{
this.setData({
disp:true,
})
setTimeout(()=>{
this.setData({
animation:'discountShow',
})
},300)
this.triggerEvent('event',{act:'show',txt:'新用户'})
//wx.setStorage({key:cacheKey, data:new Date().toISOString()})
},
success:()=>{
this.triggerEvent('event',{act:'hide',txt:'老用户'})
},
})
},
hide(){
this.setData({
animation:'discountHide',
})
this.triggerEvent('event',{act:'hide',txt:'新用户'})
setTimeout(()=>{
this.setData({
disp:false,
})
},300)
},
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)==2){
this.hide()
return;
}else{
this.hasGoto=true
}
}
},
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/tips/boost.wxml-->
<view class="mask" bindtap="hide" wx:if="{{disp}}" style="z-index: 99999">
<view class="boost {{animation}}" catchtap="catchtap" wx:if="{{animation}}">
<view class="header flex-lr" bindtap="hide">
<view> </view>
<view class="title">操作指引</view>
<view class="close">
<view class="close-max" catchtap="hide"></view>
</view>
</view>
<view class="content">
<swiper indicator-dots
bindchange="bindtransition" bindanimationfinish="bindtransition"
style="height:496rpx;">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item style="text-align: center">
<image src="{{item.url}}" class="swiper-image"></image>
<view class="swiper-txt Medium">{{item.txt}}</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
/* components/tips/boost.wxss */
@import "../../app.wxss";
@keyframes discountShow
{
from {bottom: -738rpx;}
to {bottom: 0rpx;}
}
@keyframes discountHide
{
from {bottom: 0rpx;}
to {bottom: -738rpx;}
}
.boost{
width:100%;
height:738rpx;
background:rgba(255,255,255,1);
border-radius:40rpx 40rpx 0rpx 0rpx;
padding: 40rpx 42rpx 0;
box-sizing: border-box;
position: fixed;
bottom: 0;
}
.boost.discountShow{
animation: discountShow 0.6s;
}
.boost.discountHide{
animation: discountHide 0.6s;
bottom: -738rpx;
}
.title{
height:42rpx;
font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(53,53,53,1);
line-height:42rpx;
}
.close{
width:28rpx;
height:29rpx;
background-size: 100% 100%;
background-image: url("http://nosqn.colorcun.com/sellerbaobao/close.png");
position: relative;
}
.close-max{
width: 120rpx;
height: 120rpx;
position: absolute;
top:-50rpx;
left:-50rpx;
}
.content{
margin-top: 80rpx;
}
.swiper-image{
width:468rpx;
height:290rpx;
}
.swiper-txt{
height:44rpx;
font-size:32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(53,53,53,1);
line-height:44rpx;
margin-top: 60rpx;
}
\ No newline at end of file