座位预定-我的预定列表

htmldev/dashboard/public/index.html

@@ -18,6 +18,7 @@
     Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
+<div id="af-qrcode"></div>
 <!-- built files will be auto injected -->
 </body>
 <script>

htmldev/dashboard/src/App.vue

@@ -36,6 +36,14 @@ export default {
       activeTab: 'PlaceList'
     }
   },
+  watch: {
+    '$route.name': {
+      handler: function (newVal) {
+        this.activeTab = newVal
+      },
+      immediate: true
+    }
+  },
   mounted () {
     const routeName = this.$route.name
     this.activeTab = ['PlaceList', 'PlaceReserve'].findIndex(item => item === routeName) > -1 ? routeName : ''

htmldev/dashboard/src/store/index.js

@@ -2,12 +2,14 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import cloneDeep from 'lodash/cloneDeep'
 import common from './modules/common'
+import placeCheck from './modules/placeCheck'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    common
+    common,
+    placeCheck
   },
   mutations: {
     // 重置vuex本地储存状态

htmldev/dashboard/src/store/modules/placeCheck.js

@@ -0,0 +1,29 @@
+const state = {
+  objPlaceCheck: {
+    order_pre_time: '', // 预定时间
+    place_name: '', // 座位名称
+    bar_name: '', // 酒吧名称
+    order_status: '', // 订单状态(0待支付1已支付2全部退款3部分退款4已取消)
+    order_user_num: '', // 订单人数
+    order_number: '' // 订单编号
+  }
+}
+
+const getters = {
+  objPlaceCheck (state) {
+    return state.objPlaceCheck
+  }
+}
+
+const mutations = {
+  UPDATE_OBJPLACECHECK (state, value) {
+    state.objPlaceCheck = value
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations
+}

htmldev/dashboard/src/utils/validate.js

@@ -19,7 +19,7 @@ export function isMobile (s) {
  * @param {*} s
  */
 export function isSmscode (s) {
-  return /^[0-9]{6}$/.test(s)
+  return /^[0-9]{4,6}$/.test(s)
 }
 
 /**

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

@@ -2,12 +2,12 @@
   <div class="check-container">
     <div class="width-335">
       <p class="status-wrap">
-        <span>04月19日 周一 19:45</span>
-        <span>已支付</span>
+        <span>{{ objPlaceCheck.order_pre_time }}</span>
+        <span>{{ ['待支付', '已支付', '已退款', '部分退款', '已取消'][objPlaceCheck.order_status] }}</span>
       </p>
-      <p class="place-name">10人卡座（舞台左侧）</p>
-      <p class="outlet">AF House音乐现场(西子广场山姆会员店)</p>
-      <p class="count">订位人数：1</p>
+      <p class="place-name">{{ objPlaceCheck.place_name }}</p>
+      <p class="outlet">{{ objPlaceCheck.bar_name }}</p>
+      <p class="count">订位人数：{{ objPlaceCheck.order_user_num }}</p>
     </div>
     <div class="line-wrap">
       <div class="left-circle"></div>
@@ -15,15 +15,65 @@
       <div class="right-circle"></div>
     </div>
     <div class="code">
-      <img src="" alt="">
+      <img :src="codeUrl" alt="">
     </div>
-    <p class="tip">二维码编号:DZ-202104191945-001</p>
+    <p class="tip">二维码编号:{{ objPlaceCheck.order_number }}</p>
   </div>
 </template>
 
 <script>
+import { Dialog } from 'vant'
+import QRCode from 'qrcodejs2'
+import { mapGetters } from 'vuex'
+
 export default {
-  name: 'index'
+  name: 'index',
+  data () {
+    return {
+      codeUrl: ''
+    }
+  },
+  computed: {
+    ...mapGetters({
+      objPlaceCheck: 'placeCheck/objPlaceCheck'
+    })
+  },
+  async mounted () {
+    await this.$nextTick()
+    this.createQRCode()
+  },
+  methods: {
+    createQRCode () {
+      const orderNumber = this.objPlaceCheck.order_number
+      if (!orderNumber) {
+        Dialog.alert({
+          title: '提示',
+          message: '订单编号不存在, 点击：我的订座 - 我的订座二维码，然后重试',
+          messageAlign: 'left'
+        }).then(() => {
+          this.$router.replace({ name: 'PlaceReserve' })
+        })
+        return
+      }
+      if (!this.qrcode) {
+        this.qrcode = new QRCode('af-qrcode', {
+          width: 140,
+          height: 140,
+          text: orderNumber,
+          colorDark: '#000',
+          colorLight: '#fff'
+        })
+      } else {
+        this.qrcode.clear()
+        this.qrcode.makeCode(orderNumber)
+      }
+      this.codeUrl = ''
+      setTimeout(() => {
+        const canvas = document.getElementById('af-qrcode').getElementsByTagName('canvas')[0]
+        this.codeUrl = canvas.toDataURL('image/png', 1)
+      }, 500)
+    }
+  }
 }
 </script>
 

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

@@ -45,7 +45,7 @@
               <van-button
                 class="check-code"
                 type="danger"
-                :url="'/place/check'"
+                @click="funJump(item)"
                 v-if="item.order_status === 1">我的订座二维码
               </van-button>
             </div>
@@ -128,6 +128,12 @@ export default {
       } catch (err) {
         console.log(err)
       }
+    },
+    funJump (item) {
+      this.$store.commit('placeCheck/UPDATE_OBJPLACECHECK', item)
+      this.$nextTick(() => {
+        this.$router.push({ name: 'PlaceCheck' })
+      })
     }
   }
 }