8月29，发票弹窗

src/xt_pages/fapiao/settleDetail.vue

@@ -11,6 +11,9 @@
           margin-bottom: 10px;
         ">
         <div>
+          <el-button size="small" type="primary"
+                     @click="login">登录
+          </el-button>
           <el-button size="small" type="primary"
                      @click="query">查询
           </el-button>
@@ -180,7 +183,53 @@
       </el-pagination>
     </div>
 
-
+    <el-dialog
+      title="登录"
+      :visible.sync="login_dialogVisible"
+      width="40%"
+    >
+      <div>
+        <el-form :rules="rules" :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
+          <el-form-item label="税局账号">
+            <el-input v-model="formLabelAlign.name"></el-input>
+          </el-form-item>
+          <el-form-item label="税局密码">
+            <el-input v-model="formLabelAlign.region"></el-input>
+          </el-form-item>
+          <el-form-item label="手机号码">
+            <el-input v-model="formLabelAlign.type"></el-input>
+          </el-form-item>
+          <el-form-item label="短信验证码" prop="verify">
+            <div style="display: inline-block;width: 50%;">
+              <el-input v-model="formLabelAlign.verify"></el-input>
+            </div>
+            <div style="display: inline-block;">
+              <el-button :disabled="countdown > 0" @click="verify_click">{{countdown > 0?countdown:'获取短信验证码'}}</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="login_dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="login_dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 二维码 -->
+    <el-dialog
+      title="提示"
+      :visible.sync="qr_dialogVisible"
+      width="30%"
+      center
+    >
+      <div style="margin: auto;width: 120px;">
+        <div class="qrcode" ref="qrCodeUrl"></div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="qr_dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="qr_dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -203,7 +252,7 @@ import {
 } from '../../api/fapiao'
 
 import { getDialysisRecordInitData } from '@/api/dialysis_record'
-
+import QRCode from 'qrcodejs2'
 const moment = require('moment')
 export default {
   name: 'OutpatientChargesSummary',
@@ -266,6 +315,21 @@ export default {
       settlementVisible: false,
       settlementObj: {},
       accounts_click_vi:false,
+
+      login_dialogVisible:false,
+      qr_dialogVisible:false,
+      formLabelAlign: {
+        name: '',
+        region: '',
+        type: '',
+        verify:'',
+      },
+      rules:{
+        verify:[{ required: true, message: '请输入活动名称', trigger: 'blur' },]
+      },
+      time:null,
+      countdown: 0,
+
     }
   },
 
@@ -278,7 +342,32 @@ export default {
   },
 
   methods: {
+    login(){
+      this.login_dialogVisible = true
+    },
+    verify_click(){
+      this.countdown = 60
+      this.time = setInterval(() => {
+        if (this.countdown > 0) {
+          this.countdown--
+        } else {
+          clearInterval(this.time)
+        }
+      }, 1000)
+    },
     auth(){
+        this.qr_dialogVisible =true
+        this.$nextTick(() =>{
+          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+            text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
+            width: 120,
+            height: 120,
+            
+            colorDark: '#000000',
+            colorLight: '#ffffff',
+            correctLevel: QRCode.CorrectLevel.H
+          })
+        })
 
     },
     query(){
@@ -578,6 +667,15 @@ export default {
 
 
     }
+  },
+  watch:{
+    countdown(news,old){
+      if(this.countdown ==0){
+        clearInterval(this.time)
+      }
+      
+    }
+
   }
 }
 </script>