座位预定-创建订单

htmldev/dashboard/src/login/index.vue

@@ -155,6 +155,7 @@ export default {
           message: this.arrErrorList[0],
           forbidClick: true
         })
+        return
       }
       const myToast = Toast.loading({
         message: '提交中...',

htmldev/dashboard/src/utils/platform.js

@@ -11,5 +11,6 @@ export const platform = {
   isChrome: u.indexOf('Chrome') !== -1,
   isBaidu: !!navigator.userAgent.match(/Baidu/i),
   isSafari: /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
-  u: u
+  u: u,
+  isSinaWeiBo: u.toLowerCase().indexOf('weibo') !== -1
 }

htmldev/dashboard/src/views/place/list/index.vue

@@ -40,9 +40,10 @@
             <p class="name">{{ place.place_name }}</p>
             <p class="des">{{ place.place_desc }}</p>
           </div>
+          <!--TODO 座位售完-->
           <div class="right"
                v-if="place.place_num - place.place_pre_num > 0">
-            <p class="price">¥ {{ place.place_price }}</p>
+            <p class="price">¥ {{ place.place_price | fen2Yuan }}</p>
             <p class="btn-wrap">
               <span class="btn">立即预订</span>
               <van-icon name="arrow" size="12px"/>
@@ -68,7 +69,8 @@
         <van-icon
           class="af-van-icon"
           name="clear"
-          size="28"/>
+          size="28"
+          @click="showPopup = false"/>
         <div class="af-popup-header">
           <div class="date-wrap">
             <p class="date">{{ objCurrentPlaceInfo.place_time ? objCurrentPlaceInfo.place_time.replace(/-/g, '/') : ''
@@ -88,8 +90,10 @@
             <p class="people-label">到店人数</p>
             <div class="people-options">
           <span
+            :class="{'active': order_user_num === i}"
             v-for="i in objCurrentPlaceInfo.place_user_max"
-            :key="i">{{ i }}人</span>
+            :key="i"
+            @click="order_user_num = i">{{ i }}人</span>
             </div>
             <van-field
               class="af-van-cell"
@@ -101,6 +105,7 @@
               <van-field
                 class="af-van-cell"
                 v-model.trim="order_user_name"
+                placeholder="请预订人名字"
                 label="您的称呼"/>
               <p class="gender">
                 <span
@@ -122,37 +127,43 @@
                 v-for="(str, index) in '，下单后不可退订，不可转让'"
                 :key="'b' + index">{{ str }}</span>
             </p>
-            <div class="payment-type">
-              <p class="active">
+            <!--支付宝、微信环境不显示-->
+            <div class="payment-type"
+                 v-if="!(platform.isWeixin || platform.isAlipay)">
+              <p :class="{'active': order_pay_type === 2}"
+                 @click="order_pay_type = 2">
                 <img
                   class="icon"
                   src="./image/ic_select@2x.png"
-                  alt="">
+                  alt=""
+                  v-show="order_pay_type === 2">
                 <img
                   class="alipay"
                   src="./image/ic_Alipay_sel@2x.png"
-                  alt="" v-if="true">
+                  alt="" v-show="order_pay_type === 2">
                 <img
                   class="alipay"
                   src="./image/ic_Alipay_nor@2x.png"
-                  alt="" v-else>
+                  alt="" v-show="order_pay_type !== 2">
                 <span>支付宝支付</span>
               </p>
-              <p>
+              <p :class="{'active': order_pay_type === 1}"
+                 @click="order_pay_type = 1">
                 <img
                   class="icon"
                   src="./image/ic_select@2x.png"
-                  alt="">
+                  alt=""
+                  v-show="order_pay_type === 1">
                 <img
                   class="wechat"
                   src="./image/ic_WeChat_sel@2x.png"
                   alt=""
-                  v-if="true">
+                  v-show="order_pay_type === 1">
                 <img
                   class="wechat"
                   src="./image/ic_WeChat_nor@2x.png"
                   alt=""
-                  v-else>
+                  v-show="order_pay_type !== 1">
                 <span>微信支付</span>
               </p>
             </div>
@@ -161,9 +172,14 @@
         <div class="af-popup-footer">
           <p class="count">
             <span>预付：</span>
-            <span>￥1000</span>
+            <span>￥{{ objCurrentPlaceInfo.place_price | fen2Yuan }}</span>
           </p>
-          <p class="btn">确认支付</p>
+          <van-button
+            class="btn"
+            type="danger"
+            :disabled="booLock"
+            @click="onSubmit">确认支付
+          </van-button>
         </div>
       </div>
     </van-popup>
@@ -171,9 +187,10 @@
 </template>
 
 <script>
-import { Tabs, Tab, Icon, Popup, Field, Toast } from 'vant'
+import { Tabs, Tab, Icon, Popup, Field, Toast, Button } from 'vant'
 import { apiBarList, apiPlaceList, apiPlacePreOrder } from './api'
 import { getCookieValue } from '../../../utils'
+import { platform } from '../../../utils/platform'
 
 export default {
   name: 'index',
@@ -182,10 +199,12 @@ export default {
     'van-tab': Tab,
     'van-icon': Icon,
     'van-popup': Popup,
-    'van-field': Field
+    'van-field': Field,
+    'van-button': Button
   },
   data () {
     return {
+      platform: platform,
       BarList: [], // 门店列表
       objCurrentBarInfo: {}, // 当前门店信息
       placeList: [],
@@ -194,11 +213,12 @@ export default {
       listData: [],
       showPopup: false,
       bar_id: '',
+      order_user_num: 1, // 用户数量
       order_user_phone: '', // 订单联系号码
       order_user_name: '', // 订单联系人姓名
       order_user_sex: '先生', // 订单联系人性别
-      order_user_num: '', // 用户数量
-      order_pay_type: '' // 支付方式(1微信2支付宝)
+      order_pay_type: 2, // 支付方式(1微信2支付宝)
+      booLock: false
     }
   },
   computed: {
@@ -210,6 +230,11 @@ export default {
     }
   },
   created () {
+    if (platform.isWeixin) {
+      this.order_pay_type = 1
+    } else if (platform.isAlipay) {
+      this.order_pay_type = 2
+    }
     this.fetchBarList()
   },
   async mounted () {
@@ -273,13 +298,24 @@ export default {
         order_user_name: this.order_user_name,
         order_user_sex: this.order_user_sex,
         order_user_num: this.order_user_num,
-        order_pay_type: ''
+        order_pay_type: this.order_pay_type
       }
-
+      if (!this.order_user_name) {
+        Toast('请预订人名字')
+        return
+      }
+      this.booLock = true
       try {
-        const { data } = await apiPlacePreOrder(postData)
-        console.log(data)
-      } catch (err) {}
+        const { status, msg } = await apiPlacePreOrder(postData)
+        this.booLock = false
+        if (status) {
+          this.$router.push({ name: 'PlaceReserve' })
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {
+        this.booLock = false
+      }
     }
   }
 }

htmldev/dashboard/src/views/place/list/style/index.scss

@@ -386,6 +386,7 @@
     }
 
     &.active {
+      color: #fff;
       background: linear-gradient(90deg, #000000 0%, #525050 100%);
       box-shadow: 0 2px 4px 0 rgba(210, 199, 199, 0.31);
     }