预约时间网点静态

htmldev/loan/src/views/apply/index.vue

@@ -79,22 +79,21 @@
         title="所在城市"
         :columns="columns"
         @cancel="showPicker = false"
-        @confirm="onConfirm"
-      />
+        @confirm="onConfirm"/>
     </van-popup>
   </div>
 </template>
 
 <script>
   import Flow from './components/flow'
-  import { popup, picker, Toast } from 'vant'
+  import { Popup, Picker, Toast } from 'vant'
 
   export default {
     name: 'apply',
     components: {
       Flow,
-      'van-popup': popup,
-      'van-picker': picker
+      'van-popup': Popup,
+      'van-picker': Picker
     },
     data () {
       return {

htmldev/loan/src/views/bespeak/index.vue

@@ -1,13 +1,142 @@
 <template>
-  <div></div>
+  <div class="wrapper">
+    <h2>预约现场办理时间</h2>
+    <p class="subtitle">预约后，请准时到指定营业网点办理贷款</p>
+    <ul>
+      <li @click="showPicker = true">
+        <img src="./image/date@2x.png">
+        <p>{{ bespeakTime ? bespeakTime : '请选择时间' }}</p>
+      </li>
+      <li>
+        <img src="./image/position@2x.png">
+        <p>请选择办理网点</p>
+      </li>
+    </ul>
+    <button class="submit" @click="funSubmit">提交</button>
+    <van-popup v-model="showPicker" round position="bottom">
+      <van-datetime-picker
+        v-model="currentDate"
+        type="datetime"
+        title="年-月-日 小时:分钟"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :filter="filter"
+        @cancel="showPicker = false"
+        @confirm="onConfirm"/>
+    </van-popup>
+  </div>
 </template>
 
 <script>
+  import { Popup, DatetimePicker, Toast } from 'vant'
+
   export default {
-    name: 'bespeak'
+    name: 'bespeak',
+    components: {
+      'van-popup': Popup,
+      'van-datetime-picker': DatetimePicker
+    },
+    data () {
+      return {
+        bespeakTime: '',
+        showPicker: false,
+        minDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
+        maxDate: new Date(new Date().getFullYear() + 3, 12, 31),
+        currentDate: new Date()
+      }
+    },
+    methods: {
+      filter (type, options) {
+        if (type === 'minute') {
+          return options.filter((option) => option % 10 === 0)
+        }
+        return options
+      },
+      onConfirm (value) {
+        const date = new Date(value)
+        if (Math.round(date.getTime() / 1000) < Math.round(new Date().getTime() / 1000) + 6600) {
+          Toast('预约时间不能小于2小时')
+          return
+        }
+        this.showPicker = false
+        this.bespeakTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours().toString().padStart(2, '0') + ':' + date.getSeconds().toString().padStart(2, '0')
+        // this.$set(this.postData, 'province', value[0])
+        // this.$set(this.postData, 'city', value[1])
+      },
+      funSubmit () {}
+    }
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    padding-top: 24px;
+    background: #fff;
+  }
+
+  h2 {
+    width: 327px;
+    line-height: 33px;
+    font-size: 24px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .subtitle {
+    width: 327px;
+    margin-top: 4px;
+    line-height: 22px;
+    font-size: 16px;
+    color: #333;
+  }
+
+  ul {
+    li {
+      display: flex;
+      align-items: center;
+      width: 327px;
+      height: 50px;
+      padding: 0 9px;
+      margin-top: 24px;
+      background: #FAFAFA;
+      border-radius: 4px;
+      border: 1px solid #E8E8E8;
+
+      &:nth-of-type(1) {
+        margin-top: 40px;
+      }
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
 
+    p {
+      margin-top: 4px;
+      margin-left: 3px;
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+    }
+  }
+
+  .submit {
+    width: 327px;
+    height: 45px;
+    margin-top: 41px;
+    border-radius: 4px;
+    line-height: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
+    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  }
 </style>