xt / xcx-book · Commits

Go to a project

Commit 46a18485037c6fe8413e00bc4d7422b6566079ae

Authored by wangfan
1 parent 676ec83e
build: skipped

cvlist

Inline Side-by-side
Showing 10 changed files with 409 additions and 1 deletions
// components/reserve/caixi.js
import util from '../../../utils/util';
Component({
/**
* 组件的属性列表
*/
properties: {
markers:{
type:Array,
value:[],
},
},
/**
* 组件的初始数据
*/
data: {
hidden:false
},
/**
* 组件的方法列表
*/
methods: {
hide(){
this.setData({
hidden:true,
})
},
active(e){
this.triggerEvent('active',util.attr(e,'index'));
this.hide();
},
show(){
this.setData({
hidden:false,
})
},
}
})
... ...
{
"component": true,
"usingComponents": {
"sb-tr":"./seller-box"
}
}
\ No newline at end of file
... ...
<!--components/reserve/caixi.wxml-->
<cover-view class="mask" catchtap="hide" hidden="{{hidden}}">
<cover-view class="list" catchtap="">
<cover-view class="seller" id="seller-{{item.id}}" wx:for="{{markers}}" wx:key="markers.key">
<sb-tr seller="{{item.seller}}" hasActivityTags="{{true}}"></sb-tr>
</cover-view>
</cover-view>
</cover-view>
... ...
/* components/reserve/caixi.wxss */
@import "../../../app.wxss";
.list{
background-color: #fefefe;
position: fixed;
bottom: 0;
width: 100%;
border-radius: 10rpx 10rpx 0 0;
padding: 40rpx 0 60rpx 5%;
color: #353535;
height: 80%;
overflow-y:scroll;
}
.seller{
margin-bottom: 40rpx;
}
\ 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)
}
})
},
}
})
... ...
{
"component": true,
"usingComponents": {
"formids":"/components/formids/formids",
"stat":"/components/stat/stat"
}
}
\ No newline at end of file
... ...
<!--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://qn.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}}">距当前位置{{seller.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://qn.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: 90%;
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);
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);
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://qn.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
... ...
... ... @@ -9,6 +9,7 @@
"sb-tr":"/components/reserve/seller-box-transverse/seller-box",
"a2l":"/components/tips/add-to-lite",
"ds":"/components/tips/discount",
"caixi":"/components/reserve/caixi"
"caixi":"/components/reserve/caixi",
"list":"/components/reserve/seller-box-transverse-cview/list"
}
}
\ No newline at end of file
... ...
... ... @@ -85,3 +85,4 @@
<caixi multiArray="{{multiArray}}" multiIndex="{{multiIndex}}"
bindactive="caixiActive" id="caixi"
></caixi>
<list id="list" markers="{{markers}}"></list>
... ...