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
  1 +// components/reserve/caixi.js
  2 +import util from '../../../utils/util';
  3 +Component({
  4 + /**
  5 + * 组件的属性列表
  6 + */
  7 + properties: {
  8 + markers:{
  9 + type:Array,
  10 + value:[],
  11 + },
  12 + },
  13 +
  14 + /**
  15 + * 组件的初始数据
  16 + */
  17 + data: {
  18 + hidden:false
  19 + },
  20 +
  21 + /**
  22 + * 组件的方法列表
  23 + */
  24 + methods: {
  25 + hide(){
  26 + this.setData({
  27 + hidden:true,
  28 + })
  29 + },
  30 + active(e){
  31 + this.triggerEvent('active',util.attr(e,'index'));
  32 + this.hide();
  33 + },
  34 + show(){
  35 + this.setData({
  36 + hidden:false,
  37 + })
  38 + },
  39 + }
  40 +})
  1 +{
  2 + "component": true,
  3 + "usingComponents": {
  4 + "sb-tr":"./seller-box"
  5 + }
  6 +}
  1 +<!--components/reserve/caixi.wxml-->
  2 +<cover-view class="mask" catchtap="hide" hidden="{{hidden}}">
  3 + <cover-view class="list" catchtap="">
  4 + <cover-view class="seller" id="seller-{{item.id}}" wx:for="{{markers}}" wx:key="markers.key">
  5 + <sb-tr seller="{{item.seller}}" hasActivityTags="{{true}}"></sb-tr>
  6 + </cover-view>
  7 + </cover-view>
  8 +</cover-view>
  1 +/* components/reserve/caixi.wxss */
  2 +@import "../../../app.wxss";
  3 +.list{
  4 + background-color: #fefefe;
  5 + position: fixed;
  6 + bottom: 0;
  7 + width: 100%;
  8 + border-radius: 10rpx 10rpx 0 0;
  9 + padding: 40rpx 0 60rpx 5%;
  10 + color: #353535;
  11 + height: 80%;
  12 + overflow-y:scroll;
  13 +}
  14 +.seller{
  15 + margin-bottom: 40rpx;
  16 +}
  1 +// components/reserve/seller-box/seller-box.js
  2 +import util from '../../../utils/util';
  3 +import App from '../../../utils/api';
  4 +const {regeneratorRuntime} = global
  5 +Component({
  6 + /**
  7 + * 组件的属性列表
  8 + */
  9 + properties: {
  10 + seller: {
  11 + type: Object,
  12 + value: {},
  13 + },
  14 + hasStat: {
  15 + type: Boolean,
  16 + value: false,
  17 + },
  18 + hasAverage: {
  19 + type: Boolean,
  20 + value: true,
  21 + },
  22 + hasActivity: {//滚动优惠
  23 + type: Boolean,
  24 + value: false,
  25 + },
  26 + hasActivityTags: {//优惠标签
  27 + type: Boolean,
  28 + value: false,
  29 + },
  30 + hasSlogan: {
  31 + type: Boolean,
  32 + value: true,
  33 + },
  34 + sellerStyle: {//特殊样式
  35 + type: String,
  36 + value: '',
  37 + }
  38 + },
  39 +
  40 + /**
  41 + * 组件的初始数据
  42 + */
  43 + data: {},
  44 + attached(){
  45 + this.init()
  46 + },
  47 + /**
  48 + * 组件的方法列表
  49 + */
  50 + methods: {
  51 + init(){
  52 + let seller = this.data.seller
  53 + if(seller && seller.distance){
  54 + seller.distance = parseInt(seller.distance);
  55 + if (seller.distance > 1000) {
  56 + seller.distance = (seller.distance / 1000).toFixed(2) + '公里'
  57 + } else {
  58 + seller.distance += '米';
  59 + }
  60 + }
  61 + this.setData({
  62 + se: seller,
  63 + })
  64 + },
  65 + tapButton(e){
  66 + let type = util.attr(e, 'type');
  67 + if (type == 'oncall') {
  68 + let seller_tel = this.data.seller.seller_tel;
  69 + if (seller_tel.length < 1) {
  70 + seller_tel = [this.data.seller.phone]
  71 + }
  72 + if (seller_tel.length == 1) {
  73 + wx.makePhoneCall({
  74 + phoneNumber: seller_tel[0].replace(/[^\d]/g, '')
  75 + })
  76 + } else {
  77 + //wx.hideTabBar();
  78 + wx.showActionSheet({
  79 + itemList: seller_tel,
  80 + complete: () => {
  81 + //wx.showTabBar();
  82 + },
  83 + success: (res) => {
  84 + let phone = seller_tel[res.tapIndex]
  85 + wx.makePhoneCall({
  86 + phoneNumber: phone.replace(/[^\d]/g, '')
  87 + })
  88 + }
  89 + });
  90 + }
  91 +
  92 + } else {
  93 + util.toast('请打电话预定', 'none');
  94 + }
  95 + },
  96 + lookLocation: function () {
  97 + wx.openLocation({
  98 + latitude: Number(this.data.seller.lat),
  99 + longitude: Number(this.data.seller.long),
  100 + scale: 17,
  101 + address: this.data.seller.map_address,
  102 + success: function (res) {
  103 + console.log(res)
  104 + }
  105 + })
  106 + },
  107 + }
  108 +})
  1 +{
  2 + "component": true,
  3 + "usingComponents": {
  4 + "formids":"/components/formids/formids",
  5 + "stat":"/components/stat/stat"
  6 + }
  7 +}
  1 +<!--components/showModal/showModal.wxml-->
  2 +<cover-view class="seller flex-ll {{sellerStyle}}" >
  3 + <cover-view class="image">
  4 + <cover-image mode="aspectFill"
  5 + 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>
  6 + <view class="room_num" wx:if="{{seller.room_num>0}}">{{seller.room_num}}个包间</view>
  7 + </cover-view>
  8 + <cover-view class="info flex-tb">
  9 + <cover-view>
  10 + <cover-view class="name Semibold">{{seller.sellername}}</cover-view>
  11 + <cover-view wx:if="{{hasSlogan && seller.slogan}}" class="slogan">“{{seller.slogan}}”</cover-view>
  12 + <cover-view class="text flex-ll">
  13 + <cover-view class="text-item" wx:if="{{seller.cate[0].name}}">{{seller.cate[0].name}}</cover-view>
  14 + <cover-view class="text-item" wx:if="{{seller.distance}}">距当前位置{{seller.distance}}</cover-view>
  15 + </cover-view>
  16 + <cover-view wx:if="{{hasStat}}" class="stat">
  17 + <stat stat="{{seller.score}}"></stat>
  18 + </cover-view>
  19 + <cover-view wx:if="{{hasActivity && seller.activity.length>0}}" class="activity-swiper">
  20 + <cover-view class="flex-ll">
  21 + <cover-view class="icon-hui"></cover-view>
  22 + <block wx:for="{{seller.activity}}" wx:key="seller.activity.key" >
  23 + <cover-view class="activity-item">
  24 + {{item.title}}
  25 + </cover-view>
  26 + </block>
  27 + </cover-view>
  28 + <cover-view class="activity-mask"></cover-view>
  29 + </cover-view>
  30 + <cover-view wx:if="{{hasActivityTags && seller.activity.length>0}}" class="activity flex-ll">
  31 + <cover-view wx:for="{{seller.activity}}" class="activity-item" wx:key="seller.activity.key" wx:if="{{index<3}}">{{['','满减','满赠','折扣','代金券','会员价'][item.type]}}</cover-view>
  32 + </cover-view>
  33 + </cover-view>
  34 + <cover-view class="price flex-lr">
  35 + <cover-view class="number Semibold">
  36 + <block wx:if="{{seller.average>0 && hasAverage}}">¥{{seller.average}}元/人</block>
  37 + </cover-view>
  38 + <cover-view class="phone flex-ll" id="reserve-button" catchtap="tapButton" data-type="oncall">
  39 + <cover-image src="http://qn.colorcun.com/custom/lite-online/image/phone.png"></cover-image>
  40 + <cover-view class="reserve-text">预订</cover-view>
  41 + </cover-view>
  42 + </cover-view>
  43 + </cover-view>
  44 +</cover-view>
  1 +/* components/reserve/seller-box/seller-box.wxss */
  2 +@import "../../../app.wxss";
  3 +.seller{
  4 + height: 300rpx;
  5 + overflow: hidden;
  6 + color: #353535;
  7 + width: 90%;
  8 + border: 2rpx solid #E0E0E0;
  9 + border-radius: 6rpx;
  10 + box-shadow: 0 4rpx 8rpx 0 #E0E0E0;
  11 +}
  12 +.seller.noborder{
  13 + border-width: 0;
  14 + box-shadow: none;
  15 +}
  16 +.seller cover-image{
  17 + width: 100%;
  18 + height: 100%;
  19 +}
  20 +.seller .image{
  21 + width: 200rpx;
  22 + height: 300rpx;
  23 + background-color: #4C4E4F;
  24 + min-width: 200rpx;
  25 + position: relative;
  26 +}
  27 +.seller .image .room_num{
  28 + height: 34rpx;
  29 + width: 120rpx;
  30 + line-height: 34rpx;
  31 + color: #fefefe;
  32 + background-color: rgba(248, 137, 68, 0.86);
  33 + border-radius: 18rpx;
  34 + text-align: center;
  35 + position: absolute;
  36 + top:10rpx;
  37 + left: 40rpx;
  38 + font-size: 24rpx;
  39 +}
  40 +.seller .info{
  41 + padding: 10rpx 3% 20rpx;
  42 + height: 270rpx;
  43 + width: 94%;
  44 + overflow: hidden;
  45 +}
  46 +.seller .name{
  47 + font-size: 32rpx;
  48 + height: 44rpx;
  49 + line-height: 44rpx;
  50 + overflow: hidden;
  51 + white-space:nowrap;
  52 +}
  53 +.seller .slogan{
  54 + font-size: 26rpx;
  55 + height: 36rpx;
  56 + line-height: 36rpx;
  57 + margin-top: 10rpx;
  58 + white-space:nowrap;
  59 + overflow: hidden;
  60 +}
  61 +.seller .text{
  62 + font-size: 28rpx;
  63 + color: #999999;
  64 + height: 40rpx;
  65 + line-height: 40rpx;
  66 + margin-top: 10rpx;
  67 + overflow: hidden;
  68 + white-space:nowrap;
  69 +}
  70 +.seller .text .text-item{
  71 + text-indent: 10rpx;
  72 + border-left: 2rpx solid #999999;
  73 + padding-right: 10rpx;
  74 + height: 30rpx;
  75 + line-height: 30rpx;
  76 + overflow: hidden;
  77 + white-space:nowrap;
  78 +}
  79 +.seller .text .text-item:first-child{
  80 + border-left-width: 0;
  81 + text-indent: 0;
  82 +}
  83 +.seller .text .text-item:last-child{
  84 + padding-right: 0;
  85 +}
  86 +.seller .price{
  87 + font-size: 30rpx;
  88 + color: #F05522;
  89 + height: 50rpx;
  90 + line-height: 50rpx;
  91 + width: 100%;
  92 +}
  93 +.seller .phone{
  94 + width: 140rpx;
  95 + height: 50rpx;
  96 + background:linear-gradient(to bottom, #838383, #4C4C4C);
  97 + border-radius: 26rpx;
  98 + font-size: 26rpx;
  99 + color: #F0CEA1;
  100 + line-height: 50rpx;
  101 +}
  102 +.seller .phone cover-image{
  103 + width: 28rpx;
  104 + height: 26rpx;
  105 + margin-right: 8rpx;
  106 + margin-left: 24rpx;
  107 +}
  108 +
  109 +.stat{
  110 + font-size: 24rpx;
  111 + color:#999999;
  112 + height: 24rpx;
  113 + line-height: 24rpx;
  114 +}
  115 +.activity{
  116 + color: #F05522;
  117 + margin-top: 10rpx;
  118 +}
  119 +.activity .activity-item{
  120 + font-size: 24rpx;
  121 + height: 36rpx;
  122 + padding: 0 10rpx 0;
  123 + line-height: 36rpx;
  124 + overflow: hidden;
  125 + max-height: 36rpx;
  126 + border-radius: 6rpx;
  127 + margin-left: 10rpx;
  128 + text-align: center;
  129 + overflow: hidden;
  130 + white-space:nowrap;
  131 + background: linear-gradient(to right, #F98E47, #F05522);
  132 + text-shadow:0 2rpx 6rpx #C51B41;
  133 + color:#F8E6C4;
  134 +}
  135 +.activity .activity-item:first-child{
  136 + margin-left: 0;
  137 +}
  138 +
  139 +.activity-swiper{
  140 + font-size: 28rpx;
  141 + color: #F05025;
  142 + margin-top: 20rpx;
  143 + height: 32rpx;
  144 + overflow: hidden;
  145 + position: relative;
  146 +}
  147 +.activity-mask{
  148 + position: absolute;
  149 + top:0;
  150 + left: 0;
  151 + width: 100%;
  152 + height: 32rpx;
  153 +}
  154 +.activity-swiper swiper{
  155 + width: 100%;
  156 + height: 32rpx;
  157 +}
  158 +.activity-swiper .activity-item{
  159 + text-indent: 10rpx;
  160 + height: 32rpx;
  161 + width: 100%;
  162 + line-height: 32rpx;
  163 + overflow: hidden;
  164 + max-height: 32rpx;
  165 + overflow: hidden;
  166 + white-space:nowrap;
  167 +}
  168 +.activity-swiper .icon-hui{
  169 + background-image: url("http://qn.colorcun.com/reserve/images/%E6%83%A0.png");
  170 + background-size: 100% 100%;
  171 + height: 32rpx;
  172 + width: 32rpx;
  173 + min-width: 32rpx;
  174 +}
  175 +.reserve-text{
  176 + text-shadow:0 2rpx 6rpx #505050;
  177 +}
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 "sb-tr":"/components/reserve/seller-box-transverse/seller-box", 9 "sb-tr":"/components/reserve/seller-box-transverse/seller-box",
10 "a2l":"/components/tips/add-to-lite", 10 "a2l":"/components/tips/add-to-lite",
11 "ds":"/components/tips/discount", 11 "ds":"/components/tips/discount",
12 - "caixi":"/components/reserve/caixi" 12 + "caixi":"/components/reserve/caixi",
  13 + "list":"/components/reserve/seller-box-transverse-cview/list"
13 } 14 }
14 } 15 }
@@ -85,3 +85,4 @@ @@ -85,3 +85,4 @@
85 <caixi multiArray="{{multiArray}}" multiIndex="{{multiIndex}}" 85 <caixi multiArray="{{multiArray}}" multiIndex="{{multiIndex}}"
86 bindactive="caixiActive" id="caixi" 86 bindactive="caixiActive" id="caixi"
87 ></caixi> 87 ></caixi>
  88 +<list id="list" markers="{{markers}}"></list>