scroller

www/vue/src/components/home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <div>
+    <scroller>
       <swiper></swiper>
       <div class='home-img-1'>
         <img :src='homeImg1' alt="">
@@ -18,7 +18,7 @@
         </div>
       </div>
       <homeList></homeList>
-    </div>
+    </scroller>
     <navigation></navigation>
   </div>
 </template>

www/vue/src/components/placeOrder.vue

@@ -1,60 +1,81 @@
 <template>
   <div class="place-order">
-    <!--selectTime-->
-    <div>{{startDate}}</div>
-    <h3></h3>
-    <h3></h3>
-    <h3></h3>
-    <h3></h3>
-    <h3>placeOrder</h3>
-    <img :src="productBox.pics[0].url" alt="">
-    <!--extra-->
-    <div class="extra">
-      <div v-if="extraB" v-for="(itemExtra,index) in productBox.extra">
-        <div class="extra-text" v-bind:class="{active: index == isActive}" v-on:click="btnAction(index, $event)">
-          {{itemExtra.type}}
+    <scroller>
+      <img :src="productBox.pics[0].url" alt="">
+      <!--extra-->
+      <div class="extra">
+        <div v-if="extraB" v-for="(itemExtra,index) in productBox.extra">
+          <div class="extra-text" v-bind:class="{active: index == isActive}" v-on:click="btnAction(index, $event)">
+            {{itemExtra.type}}
+          </div>
         </div>
       </div>
-    </div>
-    <!--时间选择-->
-    <!--<group :title="value + ''">-->
-      <!--<datetime-range :title="('选择')"  end-date="2017-02-02" @on-change="onChange"></datetime-range>-->
-    <!--</group>-->
-    <!--选择数量-->
-    <group>
-      <x-number title="选择数量" v-model="xNumberValue" :value="0" :min="0" @on-change="change" fillable></x-number>
-    </group>
-    <!--选择时间-->
-    <group>
-      <datetime v-model="value5" :placeholder="('请选择')" :max-year=2017 format="YYYY-MM-DD HH:00" @on-change="change" :title="('服务时间')" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消" :start-date='startDate' :end-date='endDate' :min-hour=9 :max-hour=18></datetime>
-    </group>
-
+      <!--选择数量-->
+      <group>
+        <x-number title="选择数量" v-model="xNumberValue" :value="0" :min="0" @on-change="change" fillable></x-number>
+      </group>
+      <!--选择时间-->
+      <group>
+        <datetime v-model="bookingTime" :placeholder="(bookingTime)" :max-year=2017 format="YYYY-MM-DD HH:00"
+                  @on-change="change"
+                  :title="('服务时间')" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点"
+                  minute-row="{value}分" confirm-text="完成" cancel-text="取消" :start-date='startDate' :end-date='endDate'
+                  :min-hour=9 :max-hour=18></datetime>
+      </group>
+      <!--选择地址-->
+      <group>
+        <!--<cell class="address" title="选择地址" value="暂无服务地址" link="/order"></cell>-->
+        <cell class="address" title="选择地址" value="暂无服务地址" isLink></cell>
+      </group>
+      <!--优惠券-->
+      <group>
+        <!--<cell class="address" title="选择地址" value="暂无服务地址" link="/order"></cell>-->
+        <cell class="address" title="优惠券" value="暂无优惠券" isLink></cell>
+      </group>
+      <!--备注-->
+      <group>
+        <x-textarea class="remarks" :placeholder="('可填写附加内容')" inline-desc="备注："
+                    v-model="remarks" :show-counter="true" :rows="1"
+                    autosize></x-textarea>
+      </group>
+      <div style="width: 100%;padding-bottom: 15%;"></div>
+    </scroller>
     <!--下单-->
     <div class="btn">
+      <!--费用总计-->
+      <div class="order-amount">
+        <span>费用总计：</span>
+        <span>90</span>
+      </div>
+      <!--确认预约-->
       <div class="btn-order" v-on:click="btnOrder">立即下单</div>
     </div>
+    <!--展示报错信息-->
+    <alert v-model="showAlert" :title="(alertTitle)"> {{ (alertContent) }}</alert>
   </div>
 </template>
 
 <script>
   import config from '../config/config'
   import selectTime from '../config/selectTime'
-  import { Group, DatetimeRange, TransferDom, Datetime, XNumber } from 'vux'
+  import {Group, DatetimeRange, TransferDom, Datetime, XNumber, Cell, CellBox, XTextarea, Alert} from 'vux'
   import {mapState, mapActions} from 'vuex'
   export default {
     name: 'placeOrder',
     data () {
       return {
-        productBox: config.productInfo,
-        extraB: config.productInfo.extra,
-        isActive: -1,
-        show: false,
-        value5: '',
-        assets: 'https://static.vux.li/demos/v2/static/img/01.06186f7.jpg',
-        value: ['2017-06-24', '03', '05'],
-        startDate: selectTime.startDate,
-        endDate: selectTime.endDate,
-        xNumberValue: 0
+        productBox: config.productInfo, // 当前服务内容
+        extraB: config.productInfo.extra, // 当前服务类型
+        isActive: -1, // extra样式切换
+        bookingTime: selectTime.startDate + ' 9:00', // 服务时间
+        value: ['2017-06-24', '03', '05'], // 设定日期格式
+        startDate: selectTime.startDate, // 限定最小日期
+        endDate: selectTime.endDate, // 限定最大日期
+        xNumberValue: 0, // 选择数量
+        remarks: '', // 备注
+        showAlert: false, // 是否显示弹出框
+        alertTitle: '', // 弹窗标题
+        alertContent: '' // 弹窗内容
       }
     },
     // 指令
@@ -63,13 +84,10 @@
     },
     // 组成组件
     components: {
-      Group,
-      DatetimeRange,
-      TransferDom,
-      Datetime,
-      XNumber
+      Group, DatetimeRange, TransferDom, Datetime, XNumber, Cell, CellBox, XTextarea, Alert
     },
     beforeCreate () {
+      console.log(localStorage.removeItem('extra'))
     },
     computed: {
       ...mapState({
@@ -82,21 +100,31 @@
         'PAYCHANGE'
       ]),
       change (val) {
-        console.log(val)
         config.order.time = val
       },
       btnOrder: function (cb) {
-        config.order.id = config.productInfo.id
-        console.log(config.order.id)
-        console.log(config.order.time)
-        console.log(config.order)
+        console.log(this.bookingTime)
+        console.log(config.productInfo.extra.length)
+        if (localStorage.getItem('extra') === null && config.productInfo.extra.length !== 0) {
+//          config.order.extra = ''
+          this.alertTitle = '抱歉'
+          this.alertContent = '你还没有选择服务类型'
+          this.showAlert = true
+        }
+//        config.order.userId = config.userId
+//        config.order.memo = this.remarks
+//        config.order.id = config.productInfo.id
+//        config.order.products = JSON.stringify([{
+//          product_id: config.productInfo.id, // 产品ID
+//          count: this.xNumberValue // 产品数量
+//        }])
+
+//        console.log(config.order)
+
+        // products
 //        config.formData = new FormData()
 //        const balance = 0
 //        let productParamJson = ''
-//        productParamJson = JSON.stringify([{
-//          product_id: config.productInfo.id, // 产品ID
-//          count: '1' // 产品数量
-//        }])
 //        //  let coupons = qs.stringify({0: '5836a1979f5160a7048b5a51'})
 //        //  let coupons = JSON.stringify({0: ''})
 //        let extraJson = ''
@@ -130,9 +158,11 @@
 //          extra: extraJson
 //        }
 //        config.orderInfo = tmp
-//        this.PAYCHANGE()
       },
       btnAction: function (index) {
+        localStorage.setItem('extra', index)
+//        console.log(config.productInfo.extra[index])
+        config.order.extra = JSON.stringify(config.productInfo.extra[index])
         this.isActive = index
       }
     }
@@ -140,7 +170,10 @@
 </script>
 
 <style lang="less" scoped>
-  @import '~vux/src/styles/close';
+  /*订单背景色*/
+  .place-order {
+  }
+
   /*类目*/
   .extra {
     display: flex;
@@ -168,49 +201,52 @@
     background: #000;
   }
 
+  /*选择地址*/
+  .address {
+    text-align: left;
+  }
+
+  /*填写备注*/
+  .remarks {
+    textarea {
+      background-color: #f5f5f5;
+    }
+  }
+
   /*下单样式*/
   .btn {
     position: fixed;
     right: 0;
     bottom: 0;
-    left: 0%;
-
-  }
-
-  .btn .btn-order {
-    padding: 3%;
-    width: 85%;
-    margin: 0 auto;
-    background-color: #927603;
-    border: 1px solid #a78b03;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    color: #ffffff;
-    font-size: 15px;
+    left: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    background-color: #ffffff;
+    height: 2.5rem;
+    .order-amount {
+      padding-left: 15px;
+      float: left;
+      width: 50%;
+      font-size: 16px;
+      text-align: left;
+      line-height: 2.5rem;
+      span:nth-child(2) {
+        color: red;
+      }
+    }
+    .btn-order {
+      padding: 3%;
+      width: 30%;
+      float: right;
+      margin: 0 auto;
+      background-color: #927603;
+      border: 1px solid #a78b03;
+      color: #ffffff;
+      font-size: 18px;
+    }
   }
 
   img {
     display: block;
     width: 100%;
   }
-
-  .dialog-demo {
-    .weui-dialog {
-      border-radius: 8px;
-      padding-bottom: 8px;
-    }
-    .dialog-title {
-      line-height: 30px;
-      color: #666;
-    }
-    .img-box {
-      height: 350px;
-      overflow: hidden;
-    }
-    .vux-close {
-      margin-top: 8px;
-      margin-bottom: 8px;
-    }
-  }
 </style>

www/vue/src/components/product.vue

@@ -51,12 +51,12 @@
         this.isActive = index
       },
       success (src, ele) {
-        console.log('success load', src)
+//        console.log('success load', src)
         const span = ele.parentNode.querySelector('span')
         ele.parentNode.removeChild(span)
       },
       error (src, ele, msg) {
-        console.log('error load', msg, src)
+//        console.log('error load', msg, src)
         const span = ele.parentNode.querySelector('span')
         span.innerText = 'load error'
       }

www/vue/src/main.js

@@ -8,6 +8,7 @@ import VueAxios from 'vue-axios'
 import VueRouter from 'vue-router'
 import store from './store/'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
+import VueScroller from 'vue-scroller'
 // vux
 // import { AlertPlugin, ToastPlugin } from 'vux'
 // Vue.use(AlertPlugin)
@@ -17,6 +18,7 @@ Vue.use(VueAxios, axios)
 Vue.config.productionTip = false
 Vue.use(VueRouter)
 Vue.use(VueAwesomeSwiper)
+Vue.use(VueScroller)
 const router = new VueRouter({
   mode: 'history',
   routes