二维码入场券

src/api/user.js

@@ -70,3 +70,16 @@ export function bindPhoneNumber(params) {
     data: qs.stringify(_bale('addPhoneNumber', params))
   })
 }
+
+/**
+ * 获取门禁二维码值
+ * @param params
+ */
+export function getDoorKey(params) {
+  return request({
+    url:  '/user/getDoorKey',
+    method: 'post',
+    data: qs.stringify(_bale('getDoorKey', params))
+  })
+}
+

src/components/ListEmpty.vue

@@ -24,7 +24,6 @@ export default {
   justify-content: center;
   align-items: center;
   margin-top: 55px;
- 
   .empty-tips {
     color: #999999;
     font-size: 17px;

src/components/QrCodePopup.vue

@@ -11,7 +11,7 @@
           {{title}}
         </div>
         <div class="qrcode-bottom">
-          <img class="qrcode-img" :src="src" alt="">
+          <qrcode :value="src" tag="img" :options="{ width: 145,margin:0 }"></qrcode>
           <div class="qrcode-tips" v-html="tips">
           </div>
         </div>
@@ -21,13 +21,15 @@
 </template>
 
 <script>
+import VueQrcode from '@chenfengyuan/vue-qrcode'
 import { Popup, Toast } from 'vant'
 import * as Validate from '@/utils/validate'
 import { bindPhoneNumber, sendCode } from '@/api/user'
 export default {
   name: 'QrCodePopup',
   components: {
-    'van-popup': Popup
+    'van-popup': Popup,
+    'qrcode': VueQrcode
   },
   props: {
     visible: {
@@ -116,10 +118,6 @@ export default {
       justify-content: center;
       align-items: center;
       padding: 25px 0 41px 0;
-      .qrcode-img {
-        height: 190px;
-        width: 190px;
-      }
       .qrcode-tips {
         font-size: 15px;
         color: #666666;

src/permission.js

@@ -3,6 +3,7 @@ import store from './store'
 import getPageTitle from '@/utils/get-page-title'
 import wechatAuth from './plugins/wechatAuth' // 微信登录插件
 const qs = require('qs')
+
 router.beforeEach((to, from, next) => {
   const loginStatus = Number(store.getters.loginStatus)
   document.title = getPageTitle(to.meta.title)
@@ -30,7 +31,7 @@ router.beforeEach((to, from, next) => {
       wechatAuth.returnFromWechat(to.fullPath)
     } catch (err) {
       store.dispatch('user/setLoginStatus', 0)
-     location.reload()
+      location.reload()
       //  next()
     }
     // 同意授权 to.fullPath 携带code参数，拒绝授权没有code参数
@@ -55,7 +56,6 @@ router.beforeEach((to, from, next) => {
     }
   } else {
     // alert(to.fullPath)
-    
     next()
   }
 })

src/router/index.js

@@ -16,6 +16,7 @@ export const constantRoutes = [
       keepAlive: false
     }
   },
+  
   {
     path: '/coupon',
     name: 'coupon',

src/utils/request.js

@@ -35,7 +35,6 @@ service.interceptors.response.use(
   response => {
     Toast.clear()
     const res = response.data
-
     if (res.status && res.status !== 200) {
       Toast({
         message: res.info

src/views/account/index.vue

@@ -9,8 +9,8 @@
             <div class="user-name">{{ vipInfo.nickName|formatName }}<span class="user-level"></span></div>
             <div class="user-code">代购编号：{{ vipInfo.userCode }}</div>
           </div>
-          <div class="qrcode-warp" @click="showUserQrcode($event)">
-            <qrcode v-if="vipInfo.userPhone!==''"  :value="vipInfo.userPhone" tag="img" :options="{ width: 145,margin:0 }"></qrcode>
+          <div class="qrcode-warp" @click="showUserQrcode()">
+            <qrcode v-if="vipInfo.userPhone!==''" :value="vipInfo.userPhone" tag="img" :options="{ width: 45,margin:0 }"></qrcode>
           </div>
         </div>
         <div class="account-info">
@@ -27,7 +27,7 @@
     </div>
     <div>
       <van-cell-group>
-        <van-cell is-link>
+        <van-cell is-link @click="doorAccessKey">
           <div slot="title" class="account-cell">
             <span class="icon-ticket"></span>
             <span class="custom-text">我的入场券 </span>
@@ -42,9 +42,10 @@
       </van-cell-group>
     </div>
     <!-- 绑定手机 -->
-    <msg-code :visible="codeVisible" @close="()=>{ codeVisible = false }"></msg-code>
+    <msg-code :visible="codeVisible" @close="closeCodePop"></msg-code>
     <!-- 二维码 -->
     <qrcode-popup :visible="qrcodeVisible" :src="qrSrc" :title="qrTitle" :tips="qrTips" @close="()=>{ qrcodeVisible = false }">
+
     </qrcode-popup>
   </div>
 </template>
@@ -53,7 +54,7 @@ import VueQrcode from '@chenfengyuan/vue-qrcode'
 import { Cell, CellGroup } from 'vant'
 import VerificationCode from '@/components/VerificationCode'
 import QrCodePopup from '@/components/QrCodePopup'
-import { getAccountInfo } from '@/api/user'
+import { getAccountInfo, getDoorKey } from '@/api/user'
 export default {
   components: {
     'van-cell-group': CellGroup,
@@ -69,34 +70,58 @@ export default {
       vipInfo: {},
       qrSrc: '',
       qrTitle: '',
-      qrTips: ''
+      qrTips: '',
+      accesskey: null,
+      access: this.$route.query.access
     }
   },
   computed: {
   },
   mounted () {
-
+    // console.log(this.access)
     this.init()
+
   },
   methods: {
     // 获取初始数据
     init () {
-      
       // 获取全部的会员信息
       getAccountInfo().then(res => {
         this.vipInfo = res.data.vipUserInfo
         // 手机号为空的时候绑定
         if (this.vipInfo && this.vipInfo.userPhone === '') {
           this.codeVisible = true
+          // 点击入场券进入的
+        } else if (this.access === '1') {
+          this.doorAccessKey()
         }
       })
     },
+    closeCodePop () {
+      this.codeVisible = false
+      // 点击入场券进入的 绑定完之后弹出入场券
+      if (this.access === '1') {
+        this.doorAccessKey()
+      }
+    },
     // 展示会员二维码
-    showUserQrcode (event) {
-      this.qrSrc = event.target.currentSrc
+    showUserQrcode () {
+      this.qrSrc = this.vipInfo.userPhone
       this.qrTitle = '小蚁货仓会员码'
       this.qrTips = '<p>会员码用于会员储值及支付</p> <p>请勿随意泄漏给</p>'
       this.qrcodeVisible = true
+    },
+
+    // 获取门禁二维码值
+    async doorAccessKey () {
+      this.qrTitle = '小蚁货仓入场券'
+      this.qrTips = '<p>凭入场券二维码入场</p>'
+      if (!this.accesskey) {
+        const { data } = await getDoorKey()
+        this.accesskey = data.doorKey
+      }
+      this.qrSrc = this.accesskey
+      this.qrcodeVisible = true
     }
   }
 }

vue.config.js

@@ -60,7 +60,7 @@ module.exports = {
         //  entry: ['@babel/polyfill', './src/main.js'],
         externals: externals,
         optimization: {
-          minimize: false
+          minimize: false // 换行
         }
       })
     }