订座-登录页接口对接

htmldev/dashboard/src/api/request.js

@@ -1,10 +1,7 @@
-import Vue from 'vue'
 import axios from 'axios'
 import router from '../router'
+import { getCookieValue } from '../utils'
 
-const getCookieValue = (name) => {
-  return Object.prototype.toString.call(Vue.cookie.get(name)) === '[object Null]' ? '' : Vue.cookie.get(name)
-}
 const request = axios.create({
   withCredentials: true,
   baseURL: process.env.API_DOMAIN,

htmldev/dashboard/src/main.js

@@ -5,7 +5,7 @@ import store from './store'
 import cloneDeep from 'lodash/cloneDeep'
 import VueCookie from 'vue-cookie'
 import refreshTitle from './utils/refreshTitle'
-
+import './utils/filter'
 // 全站配置
 window.SITE_CONFIG = {}
 Vue.prototype.$refreshTitle = refreshTitle

htmldev/dashboard/src/utils/filter.js

@@ -0,0 +1,11 @@
+import * as utils from './index'
+
+import Vue from 'vue'
+
+Object.keys(utils).forEach(key => {
+  Vue.filter(key, utils[key])
+})
+
+Object.keys(utils).forEach(key => {
+  Vue.prototype[key] = utils[key]
+})

htmldev/dashboard/src/utils/index.js

@@ -15,3 +15,31 @@ export function clearLoginInfo () {
 export function clearStore () {
   store.commit('resetStore')
 }
+
+export function fen2Yuan (num) {
+  return isNaN(num) ? '' : (num * 0.01).toFixed(2)
+}
+
+export function yuan2Fen (num) {
+  if (isNaN(num)) {
+    return ''
+  }
+  const amount = num.toString()
+  const index = amount.indexOf('.')
+  const arr = amount.split('.')
+  let result = arr[0] * 100
+  if (index > -1) {
+    result += arr[1].split('').reduce((total, cur, index) => {
+      if (index === 0) {
+        return total + cur * 10
+      } else {
+        return total + cur * 1
+      }
+    }, 0)
+  }
+  return result
+}
+
+export function getCookieValue (name) {
+  return Object.prototype.toString.call(Vue.cookie.get(name)) === '[object Null]' ? '' : Vue.cookie.get(name)
+}

htmldev/dashboard/src/views/place/list/api/index.js

@@ -0,0 +1,31 @@
+import request from '@/api/request'
+
+/**
+ * 获取酒吧列表
+ */
+export const apiBarList = () => request({
+  method: 'GET',
+  url: '/api/v1/bar/list'
+})
+
+/**
+ * 订座列表接口
+ * @param id 酒吧ID
+ */
+export const apiPlaceList = (id) => request({
+  method: 'GET',
+  url: '/api/v1/bar/place/list',
+  params: {
+    id
+  }
+})
+
+/**
+ * 创建订座
+ * @param postData 表单提交
+ */
+export const apiPlacePreOrder = (postData) => request({
+  method: 'POST',
+  url: '/api/v1/user/preorder/create',
+  data: postData
+})

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

@@ -5,13 +5,14 @@
       <div class="store-name">
         <p>
           <img src="./image/icon_music@2x.png" alt="">
-          <span>星桥店</span>
+          <span>{{ objCurrentBarInfo.bar_name }}</span>
         </p>
       </div>
       <div class="open-time">
         <p>
           <img src="./image/icon_time@2x.png" alt="">
-          <span>11:00-01:00开放预订</span>
+          <span>{{ objCurrentBarInfo.bar_place_reserve_start_time }}-{{ objCurrentBarInfo.bar_place_reserve_end_time
+            }}开放预订</span>
         </p>
       </div>
     </div>
@@ -29,28 +30,29 @@
         :key="index">
         <template #title>
           <p class="week">{{ item.week }}</p>
-          <p class="date">{{ item.date }}</p>
+          <p class="date">{{ item.time }}</p>
         </template>
         <div class="place-list"
-             v-for="i in 10"
-             :key="i"
-             @click="showPopup = true">
+             v-for="(place, idx) in item.list"
+             :key="idx"
+             @click="handleShowPopup(place, item.week)">
           <div class="left">
-            <p class="name">12人卡座（舞台中间）</p>
-            <p class="des">卡座台费2800元</p>
+            <p class="name">{{ place.place_name }}</p>
+            <p class="des">{{ place.place_desc }}</p>
           </div>
-          <div class="right" v-if="false">
-            <p class="price">¥ 1000</p>
+          <div class="right"
+               v-if="place.place_num - place.place_pre_num > 0">
+            <p class="price">¥ {{ place.place_price }}</p>
             <p class="btn-wrap">
               <span class="btn">立即预订</span>
               <van-icon name="arrow" size="12px"/>
             </p>
           </div>
           <!--座位被定完-->
-          <div class="sell-out">
+          <div class="sell-out" v-else>
             <img src="./image/sell_out@2x.png" alt="">
             <div>
-              <p class="price disabled">¥ 1000</p>
+              <p class="price disabled">¥ {{ place.place_price }}</p>
               <p class="sell-des">已订满</p>
             </div>
           </div>
@@ -69,44 +71,49 @@
           size="28"/>
         <div class="af-popup-header">
           <div class="date-wrap">
-            <p class="date">04月27日（今日）</p>
+            <p class="date">{{ objCurrentPlaceInfo.place_time ? objCurrentPlaceInfo.place_time.replace(/-/g, '/') : ''
+              }}({{ objCurrentPlaceInfo.week }})</p>
             <p class="title">AF HOUSE 音乐空间</p>
           </div>
-          <p class="outlet-name">星桥店</p>
-          <p class="place-name">12人卡座（舞台中间）</p>
+          <p class="outlet-name">{{ objCurrentPlaceInfo.place_name }}</p>
+          <p class="place-name">{{ objCurrentPlaceInfo.place_desc }}</p>
         </div>
         <div class="af-popup-body">
           <p class="tip">
             <span>最晚到店时间</span>
-            <span>（最晚为您保留15分钟，可提前入场）</span>
+            <span>（最晚为您保留{{ objCurrentPlaceInfo.place_max_time }}分钟，可提前入场）</span>
           </p>
           <div class="width-335">
-            <p class="time">21:15</p>
+            <p class="time">{{ objCurrentPlaceInfo.place_latest_time }}</p>
             <p class="people-label">到店人数</p>
             <div class="people-options">
           <span
-            v-for="i in 12"
+            v-for="i in objCurrentPlaceInfo.place_user_max"
             :key="i">{{ i }}人</span>
             </div>
             <van-field
               class="af-van-cell"
-              v-model="tel"
-              type="tel"
+              v-model="order_user_phone"
+              type="order_user_phone"
+              readonly
               label="联系方式"/>
             <div class="name-wrap">
               <van-field
                 class="af-van-cell"
-                v-model="name"
+                v-model.trim="order_user_name"
                 label="您的称呼"/>
               <p class="gender">
                 <span
+                  :class="{'active': order_user_sex === item}"
                   v-for="(item, index) in ['先生', '女士']"
-                  :key="index">{{ item }}</span>
+                  :key="index"
+                  @click="order_user_sex = item">{{ item }}</span>
               </p>
             </div>
             <p class="explain">可抵扣到店消费，支付后需等待商家确认</p>
             <p class="explain">预定不成功自动退款，</p>
             <p class="explain">
+              <!--TODO 时间不足-->
               <span
                 style="color: #D32323;"
                 v-for="(str, index) in '预定到店时间已不足8小时'"
@@ -164,7 +171,9 @@
 </template>
 
 <script>
-import { Tabs, Tab, Icon, Popup, Field } from 'vant'
+import { Tabs, Tab, Icon, Popup, Field, Toast } from 'vant'
+import { apiBarList, apiPlaceList, apiPlacePreOrder } from './api'
+import { getCookieValue } from '../../../utils'
 
 export default {
   name: 'index',
@@ -177,55 +186,101 @@ export default {
   },
   data () {
     return {
-      placeList: [
-        {
-          id: 1,
-          week: '今日',
-          date: '04/27'
-        },
-        {
-          id: 2,
-          week: '周三',
-          date: '04/28'
-        },
-        {
-          id: 3,
-          week: '周四',
-          date: '04/29'
-        },
-        {
-          id: 4,
-          week: '周五',
-          date: '04/30'
-        },
-        {
-          id: 2,
-          week: '周三',
-          date: '04/28'
-        },
-        {
-          id: 3,
-          week: '周四',
-          date: '04/29'
-        },
-        {
-          id: 4,
-          week: '周五',
-          date: '04/30'
-        }
-      ],
+      BarList: [], // 门店列表
+      objCurrentBarInfo: {}, // 当前门店信息
+      placeList: [],
+      objCurrentPlaceInfo: {}, // 当前座位信息
       active: 0,
       listData: [],
       showPopup: false,
-      tel: '13429176706',
-      name: ''
+      bar_id: '',
+      order_user_phone: '', // 订单联系号码
+      order_user_name: '', // 订单联系人姓名
+      order_user_sex: '先生', // 订单联系人性别
+      order_user_num: '', // 用户数量
+      order_pay_type: '' // 支付方式(1微信2支付宝)
+    }
+  },
+  computed: {
+    phone () {
+      return this.$store.getters['common/phone'] || getCookieValue('afhousephone')
+    },
+    token () {
+      return this.$store.getters['common/token'] || getCookieValue('afhousetoken')
     }
   },
+  created () {
+    this.fetchBarList()
+  },
   async mounted () {
     await this.$nextTick()
+    this.order_user_phone = this.phone
   },
   methods: {
-    handleChange () {}
+    handleChange () {},
+    // 获取门店列表
+    async fetchBarList () {
+      try {
+        const { data, status, msg } = await apiBarList()
+        if (status) {
+          this.BarList = data
+          if (this.BarList.length) {
+            // 暂时只有一家门店
+            const { id } = this.BarList[0]
+            this.bar_id = id
+            this.fetchPlaceList()
+          } else {
+            Toast('门店不存在')
+          }
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {
+
+      }
+    },
+    // 获取订座列表
+    async fetchPlaceList () {
+      try {
+        const { data, status, msg } = await apiPlaceList(this.bar_id)
+        if (status) {
+          const { bar, place } = data
+          this.objCurrentBarInfo = bar
+          this.placeList = place
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {}
+    },
+    handleShowPopup (place, week) {
+      // TODO 座位被定完了
+      if (!(this.phone && this.token)) {
+        this.$router.push({ name: 'login' })
+        return
+      }
+      this.objCurrentPlaceInfo = {
+        ...place,
+        week
+      }
+      this.showPopup = true
+    },
+    async onSubmit () {
+      const { id } = this.objCurrentPlaceInfo
+      const postData = {
+        bar_id: this.bar_id, // 酒吧ID
+        place_id: id, // 座位ID
+        order_user_phone: this.order_user_phone,
+        order_user_name: this.order_user_name,
+        order_user_sex: this.order_user_sex,
+        order_user_num: this.order_user_num,
+        order_pay_type: ''
+      }
+
+      try {
+        const { data } = await apiPlacePreOrder(postData)
+        console.log(data)
+      } catch (err) {}
+    }
   }
 }
 </script>

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

@@ -71,6 +71,7 @@
     img {
       width: 14px;
       height: 14px;
+      margin-right: 3px;
     }
 
     span {
@@ -144,6 +145,20 @@
   padding: 22px 20px;
   border-bottom: 1px solid #EBEBEB;
 
+  .left {
+    width: 60%;
+  }
+
+  .right {
+    width: 40%;
+    text-align: right;
+  }
+
+  .sell-out {
+    width: 40%;
+    text-align: right;
+  }
+
   .name {
     font-size: 18px;
     font-family: PingFangSC-Semibold, PingFang SC;
@@ -154,11 +169,13 @@
   }
 
   .des {
+    max-width: 100%;
     margin-top: 6px;
     font-size: 12px;
     color: #736F6F;
     line-height: 17px;
     letter-spacing: 1px;
+    word-break: break-all;
   }
 
   .price {
@@ -436,12 +453,14 @@
       font-size: 12px;
       color: #1F1E1E;
       line-height: 17px;
+      overflow: hidden;
 
       &:nth-of-type(2) {
         margin-left: 12px;
       }
 
       &.active {
+        color: #fff;
         background: linear-gradient(90deg, #000000 0%, #525050 100%);
         box-shadow: 0 2px 4px 0 rgba(210, 199, 199, 0.31);
       }