taocan

@@ -38,7 +38,8 @@
     "pages/reserve/remark",
     "pages/reserve/remark",
     "pages/reserve/findSeller",
     "pages/reserve/findSeller",
     "pages/customer/cancel",
     "pages/customer/cancel",
-    "pages/customer/welcome"
+    "pages/customer/welcome",
+    "pages/taocan/index"
   ],
   ],
   "subpackages": [
   "subpackages": [
     {
     {

@@ -4,7 +4,7 @@ Component({
    * 组件的属性列表
    * 组件的属性列表
    */
    */
   properties: {
   properties: {
-
+    detail:Object,//套餐
   },
   },
 
 
   /**
   /**

@@ -10,7 +10,7 @@
         </view>
         </view>
         <view class="view flex align-end text-gray">
         <view class="view flex align-end text-gray">
             <view class="text-orange txt-28-h" style="margin-bottom: 4rpx;">¥</view>
             <view class="text-orange txt-28-h" style="margin-bottom: 4rpx;">¥</view>
-            <view class="text-orange txt-40-h margin-right-sm">123</view>
+            <view class="text-orange txt-40-h margin-right-sm text-bold">123</view>
             <view class="huaxian flex align-end">
             <view class="huaxian flex align-end">
                 <view class="txt-20-h" style="margin-bottom: 8rpx;">¥</view>
                 <view class="txt-20-h" style="margin-bottom: 8rpx;">¥</view>
                 <view class="txt-28-h" style="margin-bottom: 4rpx;">123</view>
                 <view class="txt-28-h" style="margin-bottom: 4rpx;">123</view>
@@ -21,5 +21,7 @@
             <view class="view margin-left-xs txt-24-h">8折</view>
             <view class="view margin-left-xs txt-24-h">8折</view>
         </view>
         </view>
     </view>
     </view>
-    <view class="button bg-blue-blue txt-28-h text-bold flex align-center justify-center">抢购</view>
+    <navigator url="/pages/taocan/index?sid={{detail.sid}}&pid={{detail.id}}" hover-class="navigator-hover">
+        <view class="button bg-blue-blue txt-28-h text-bold flex align-center justify-center">抢购</view>
+    </navigator>
 </view>
 </view>

+// pages/taocan/index.js
+import util from '../../utils/util';
+import App from '../../utils/api';
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    current:0,
+    activityId:1,
+    packs:[
+      {id:1,},
+      {id:2,},
+      {id:3,},
+      {id:4,},
+      {id:5,},
+    ],
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   * sid  商家id
+   * pid  套餐id
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  touchTab(e){
+    let obj={
+      activityId:util.attr(e,'id'),
+    }
+    let index=util.attr(e,'index')
+    let length=this.data.packs.length;
+    let current=0
+    if(index>length-3){
+      current=length-3;
+    }else{
+      current=index>0?(index-1):0
+    }
+    obj.current=current
+    this.setData(obj)
+  },
+  swiperChange(e){
+    console.log(e)
+    if(e.detail.source!='touch') return;
+    this.setData({
+      current:e.detail.current
+    })
+  },
+})

+{
+  "usingComponents": {
+    "nav":"/components/nav/nav"
+  }
+}

+<!--pages/taocan/index.wxml-->
+<nav hasHome>套餐详情</nav>
+<view class="view">
+    <swiper
+            display-multiple-items="3"
+            class="view margin-left-lg"
+            bindchange="swiperChange"
+            current="{{current}}"
+            style="height: 80rpx;">
+        <block wx:for="{{packs}}" wx:key="*this">
+            <swiper-item
+                    bindtap="touchTab" data-id="{{item.id}}" data-index="{{index}}"
+                    class="swiper-item {{activityId==item.id?'active':''}} flex align-center">
+                <view class="txt-28-h">招牌六十人餐</view>
+            </swiper-item>
+        </block>
+    </swiper>
+    <view class="view box margin-lr margin-top-lg margin-bottom-sm padding">
+        <view class="view txt-40-h text-bold">招牌花开富贵六十人餐</view>
+        <view class="view flex align-end">
+            <view class="text-orange txt-28-h" style="margin-bottom: 4rpx;">¥</view>
+            <view class="text-orange txt-40-h margin-right-sm text-bold">123</view>
+            <view class="huaxian flex align-end">
+                <view class="txt-20-h" style="margin-bottom: 8rpx;">¥</view>
+                <view class="txt-28-h" style="margin-bottom: 4rpx;">123</view>
+            </view>
+            <view class="view flex text-orange align-end margin-left-sm" >
+                <view class="view tag" style="margin-bottom: 16rpx;"></view>
+                <view class="view margin-left-xs txt-24-h" style="margin-bottom: 10rpx;">8折</view>
+            </view>
+        </view>
+        <view class="view flex align-center txt-28-h margin-bottom" style="margin-top: 10rpx;">
+            <view class="view margin-right">
+                <view class="icon"></view>
+                <view>1111</view>
+            </view>
+            <view class="view margin-right">
+                <view class="icon"></view>
+                <view>1111</view>
+            </view>
+            <view class="view margin-right">
+                <view class="icon"></view>
+                <view>1111</view>
+            </view>
+        </view>
+        <image src="" style="width:100%;" mode="widthFix"></image>
+    </view>
+</view>

+/* pages/taocan/index.wxss */
+@import "../../colorui/main.wxss";
+.swiper-item{
+    position: relative;
+}
+.swiper-item.active:after{
+    position: absolute;
+    bottom: 4rpx;
+    width: 60rpx;
+    height: 6rpx;
+    background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
+    border-radius: 3rpx;
+    content: "";
+    left:calc(50% - 60rpx);
+}
+.swiper-item.active .txt-28-h{
+    font-weight: bold;
+}
+.box{
+    background: #FFFFFF;
+    box-shadow: 0px 0px 30rpx 0px #E5E5E5;
+    border-radius: 20rpx;
+}
+.huaxian{
+    position: relative;
+}
+.huaxian:after{
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 2rpx;
+    background-color: #CCCCCC;
+    left:0rpx;
+    top:20rpx;
+}
+.tag{
+    width: 22rpx;
+    height: 22rpx;
+    background: #FF7A00;
+}

@@ -720,6 +720,12 @@
           "pathName": "pack-book/pages/book/b_index",
           "pathName": "pack-book/pages/book/b_index",
           "query": "seller_id=80&seller_openid=oGefL4qKBWIh5xwyg3LVfkMbDumA&manager_id=763&goPath=roomtype/roomtype",
           "query": "seller_id=80&seller_openid=oGefL4qKBWIh5xwyg3LVfkMbDumA&manager_id=763&goPath=roomtype/roomtype",
           "scene": null
           "scene": null
+        },
+        {
+          "name": "pages/taocan/index",
+          "pathName": "pages/taocan/index",
+          "query": "sid=1&pid=1",
+          "scene": null
         }
         }
       ]
       ]
     }
     }