c端预定

wangfan
1 parent 0b5ecca0
Showing 4 changed files with 145 additions and 72 deletions
pages/reserve/detail.js
pages/reserve/detail.json
pages/reserve/detail.wxml
pages/reserve/detail.wxss
--- a/pages/reserve/detail.js
View file @352af14
+++ b/pages/reserve/detail.js
View file @352af14
 // pages/reserve/detail.js
 Page({
-    /**
-     * 页面的初始数据
-     */
-    data: {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad: function (options) {
-        console.log('onLoad',options)
-    },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady: function () {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow: function () {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面隐藏
-     */
-    onHide: function () {
-
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    seller:{
+      id:1,
+      seller_name:'陕西风味面馆',
+      banner:[
+        'http://qn.colorcun.com/custom/lite-online/image/def-banner.png'
+      ],
+      baos:[
+        'http://qn.colorcun.com/custom/lite-online/image/def-banner.png',
+        'http://qn.colorcun.com/custom/lite-online/image/def-banner.png',
+        'http://qn.colorcun.com/custom/lite-online/image/def-banner.png'
+      ]
     },
-
-    /**
-     * 生命周期函数--监听页面卸载
-     */
-    onUnload: function () {
-
-    },
-
-    /**
-     * 页面相关事件处理函数--监听用户下拉动作
-     */
-    onPullDownRefresh: function () {
-
-    },
-
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom: function () {
-
-    },
-
-    /**
-     * 用户点击右上角分享
-     */
-    onShareAppMessage: function () {
-
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    console.log('onLoad', options)
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  reserve(){
+    if(false){//只有一个电话
+      wx.makePhoneCall({
+        phoneNumber:this.data.seller.phone
+      })
+    }else{
+      this.selectComponent('#as').show();
     }
+  },
+  reservePhone(e){
+    wx.makePhoneCall({
+      phoneNumber:e.detail.value
+    })
+  },
+  follow(e){
+    console.log('收藏',e)
+  },
 })
--- a/pages/reserve/detail.json
View file @352af14
+++ b/pages/reserve/detail.json
View file @352af14
@@ -5,6 +5,7 @@
   "usingComponents": {
     "formids":"/components/formids/formids",
     "stat":"/components/stat/stat",
+    "as":"/components/actionSheet/index",
     "nav":"/components/nav/nav"
   }
 }
--- a/pages/reserve/detail.wxml
View file @352af14
+++ b/pages/reserve/detail.wxml
View file @352af14
@@ -4,11 +4,11 @@
     <swiper
             indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
             interval="2000" duration="500"
-            previous-margin="{{20}}px" next-margin="{{20}}px"
+            previous-margin="{{0}}px" next-margin="{{0}}px"
             current="{{current}}" bindchange="bindtransition">
-        <block wx:for="{{sellers}}" wx:key="sellers.key">
-            <swiper-item bindtap="gotoDetail" data-sid="{{item.id}}">
-                <image src="" class="image" mode="aspectFill"></image>
+        <block wx:for="{{seller.banner}}" wx:key="sellers.key">
+            <swiper-item>
+                <image src="{{item}}" class="image" mode="aspectFill"></image>
             </swiper-item>
         </block>
     </swiper>
@@ -16,7 +16,7 @@
 <view class="pages">
     <view class="seller">
         <view class="base flex-vc">
-            <view class="name">陕西风味面馆</view>
+            <view class="name">{{seller.seller_name}}</view>
             <view class="ping flex-cc">
                 <view class="item flex-lr fen">
                     <stat stat="2"></stat>
@@ -33,7 +33,7 @@
         </view>
         <view class="addr">
             <view class="addr-text flex-ll">
-                <image src=""></image>
+                <image src="http://qn.colorcun.com/custom/lite-online/image/%E5%AE%9A%E4%BD%8D.png"></image>
                 <view>高新区唐延南路35号旺座现代城D座二层</view>
             </view>
             <view class="addr-long">距您当前位置100m</view>
@@ -46,18 +46,21 @@
             <view class="name">包间环境</view>
         </view>
         <scroll-view
-                scroll-y
-                style="height: 200px;"
+                scroll-x
+                class="baos"
                 bindscrolltoupper="upper"
                 bindscrolltolower="lower"
                 bindscroll="scroll"
                 scroll-into-view="{{toView}}"
                 scroll-top="{{scrollTop}}"
         >
-            <view id="green" class="scroll-view-item bc_green"></view>
-            <view id="red" class="scroll-view-item bc_red"></view>
-            <view id="yellow" class="scroll-view-item bc_yellow"></view>
-            <view id="blue" class="scroll-view-item bc_blue"></view>
+
+            <block wx:for="{{seller.baos}}" wx:key="sellers.key">
+                <view class="image">
+                <image src="{{item}}" mode="aspectFill"></image>
+                </view>
+            </block>
+
         </scroll-view>
     </view>
     <view class="block">
@@ -89,6 +92,7 @@
         </formids>
         <formids class="follow flex-vc" bindclick="follow">
             <image src="http://qn.colorcun.com/custom/lite-online/image/%E6%94%B6%E8%97%8F.png"></image>
+            <image src="http://qn.colorcun.com/custom/lite-online/image/%E5%B7%B2%E6%94%B6%E8%97%8F.png"></image>
             <view class="text">收藏</view>
         </formids>
     </view>
@@ -98,3 +102,4 @@
         </formids>
     </view>
 </view>
+<as id="as" items="{{['1','2']}}" bindclick="reservePhone">拨打电话预定</as>
--- a/pages/reserve/detail.wxss
View file @352af14
+++ b/pages/reserve/detail.wxss
View file @352af14
@@ -10,6 +10,9 @@
   width: 100%;
   height: 400rpx;
 }
+.seller-banner swiper,.seller-banner swiper-item{
+  height: 100%;
+}
 .seller-banner .image{
   width: 100%;
   height: 100%;
@@ -53,6 +56,23 @@
 }
 .base .peitao{
   margin-top: 10rpx;
+  width: 100%;
+}
+.peitao .icon{
+  margin-right: 20rpx;
+  background-size: 28rpx 26rpx;
+  background-repeat: no-repeat;
+  text-indent: 38rpx;
+  line-height: 26rpx;
+}
+.peitao .icon.bao{
+  background-image: url("http://qn.colorcun.com/custom/lite-online/image/%E5%8C%85%E9%97%B4.png");
+}
+.peitao .icon.ka{
+  background-image: url("http://qn.colorcun.com/custom/lite-online/image/%E5%8D%A1%E5%BA%A7.png");
+}
+.peitao .icon.car{
+  background-image: url("http://qn.colorcun.com/custom/lite-online/image/%E5%81%9C%E8%BD%A6.png");
 }
@@ -90,6 +110,7 @@
 .block .header{
   height: 44rpx;
   line-height: 44rpx;
+  margin-bottom: 60rpx;
 }
 .block .line{
   height: 44rpx;
@@ -147,4 +168,22 @@
   height: 42rpx;
   font-size: 30rpx;
   color:#ffffff;
+}
+
+.baos{
+  height: 282rpx;
+  width: 100%;
+  white-space: nowrap;
+}
+.baos .image{
+  width: 400rpx;
+  border-radius: 10rpx;
+  margin-right: 20rpx;
+  display: inline-block;
+  overflow: hidden;
+  height: 100%;
+}
+.baos .image image{
+  width: 100%;
+  height: 100%;
 }