1. <template>
  2. <section style="height: 100vh;" class="bg">
  3. <div class="cardtype"><i class="pos fa fa-diamond fa-lg" :style="{color: '#FFFFFF'}"></i> {{VipInfo.VipCardTypeName}}</div>
  4. <div class="container">
  5. <!-- 条形码 -->
  6. <div class="barcode">
  7. <barcode :value="barcode" :options="barcode_option" tag="svg"></barcode>
  8. <span class="txt">
  9. <span>{{barcode1}}</span>&nbsp;&nbsp;
  10. <span>{{barcode2}}</span>&nbsp;&nbsp;
  11. <span>{{barcode3}}</span>&nbsp;&nbsp;
  12. <span>{{barcode4}}</span>
  13. </span>
  14. </div>
  15. <!-- 二维码 -->
  16. <qrcode class="qrCode" :url="barcode" :wid="180" :hei="180" :imgwid="40" :imghei="40"></qrcode>
  17. </div>
  18. <div class="claim">
  19. <i class="pos fa fa-info-circle fa-lg" :style="{color: '#FFFFFF'}"></i>
  20. &nbsp;如果付款失败,请点击刷新&nbsp;
  21. <i class="pos fa fa-refresh fa-lg" :style="{color: '#FFFFFF'}"></i>
  22. </div>
  23. </section>
  24. </template>
  25.  
  26. <script>
  27. import qrcode from 'vue_qrcodes'
  28. export default {
  29. components: { qrcode },
  30. data() {
  31. return {
  32. VipInfo: '',
  33. barcode: '888888888888888888',
  34. barcode1: '',
  35. barcode2: '',
  36. barcode3: '',
  37. barcode4: '',
  38. barcode_option: {
  39. // format: 'CODE128',
  40. displayValue: false,
  41. background: 'transparent',
  42. width: '2px',
  43. height: '80px',
  44. fontOptions: 'bold',
  45. fontSize: '32px'
  46. },
  47. icon: ''
  48. }
  49. },
  50. mounted() {
  51. var tmp = window.sessionStorage.getItem('VipInfo')
  52. if (tmp) {
  53. this.VipInfo = JSON.parse(tmp)
  54. }
  55. // this.barcode = this.$route.params.barcode
  56. this.barcode1 = this.barcode.substr(0, 4)
  57. this.barcode2 = this.barcode.substr(4, 4)
  58. this.barcode3 = this.barcode.substr(8, 4)
  59. this.barcode4 = this.barcode.substr(12, 6)
  60. },
  61. methods: {
  62. }
  63. }
  64. </script>
  65.  
  66. <style scoped>
  67. .bg {
  68. width: 100%;
  69. height: 100%;
  70. background: linear-gradient(#47C9EB, #367CF7);
  71. background-size: cover;
  72. position: absolute;
  73. top: 0;
  74. left: 0;
  75. }
  76. .cardtype {
  77. color: white;
  78. font-size: .3rem;
  79. text-align: center;
  80. line-height: .3rem;
  81. margin-top: .5rem;
  82. }
  83. .container {
  84. margin: .5rem .5rem .3rem;
  85. padding-bottom: .6rem;
  86. border-radius: .1rem;
  87. background-color: white;
  88. }
  89. /* 条形码 */
  90. svg {
  91. width: 96%;
  92. position: relative;
  93. display: block;
  94. top: -0.01rem;
  95. margin: 0 auto;
  96. }
  97. .barcode {
  98. position:relative;
  99. top: .5rem;
  100. }
  101. /* 会员码 */
  102. .txt {
  103. display: block;
  104. text-align: center;
  105. width: 100%;
  106. position: absolute;
  107. left: 50%;
  108. transform: translate(-50%);
  109. font-weight: 700;
  110. font-size: .3rem;
  111. }
  112. /* 二维码 */
  113. .qrCode{
  114. position: relative;
  115. margin-top: 1.3rem;
  116. left: calc(50% - 90px);
  117. }
  118. .claim {
  119.  
  120. color: white;
  121. text-align: center;
  122. font-size: .3rem;
  123. }
  124. .fa-info-circle::before, .fa-refresh::before {
  125. font: normal normal normal .4rem/1 FontAwesome!important;
  126. }
  127. </style>

vue条形码+二维码的更多相关文章

  1. DevExpress 使用条形码二维码控件打印

    参考文章: https://www.cnblogs.com/wuhuacong/p/6112976.html 转载请注明出处:撰写人:伍华聪 其实主要是二维码的实现,在使用条形码控件时,又一个属性Sy ...

  2. Opencv+Zbar二维码识别(标准条形码/二维码识别)

    使用Opencv+Zbar组合可以很容易的识别图片中的二维码,特别是标准的二维码,这里标准指的是二维码成像清晰,图片中二维码的空间占比在40%~100%之间,这样标准的图片,Zbar识别起来很容易,不 ...

  3. ZBar 是款桌面电脑用条形码/二维码扫描工具

    ZBar 是款桌面电脑用条形码/二维码扫描工具 windows平台python 2.7环境编译安装zbar   最近一个项目需要识别二维码,找来找去找到了zbar和zxing,中间越过无数坑,总算基本 ...

  4. vue生成条形码/二维码/带logo二维码

    条形码:https://blog.csdn.net/dakache11/article/details/83749410 //安装 cnpm install @xkeshi/vue-barcode / ...

  5. 在DevExpress程序中使用条形码二维码控件,以及进行报表打印处理

    在很多业务系统里面,越来越多涉及到条形码.二维码的应用了,不管在Web界面还是WInform界面都需要处理很多物料相关的操作,甚至很多企业为了减少录入错误操作,为每个设备进行条形码.二维码的标签,直接 ...

  6. Java 条形码 二维码 的生成与解析

    Barcode简介 Barcode是由一组按一定编码规则排列的条,空符号,用以表示一定的字符,数字及符号组成的,一种机器可读的数据表示方式. Barcode的形式多种多样,按照它们的外观分类: Lin ...

  7. 条形码/二维码之开源利器ZXing图文介绍

    全文目录: 基本介绍 二维码(比如:QRCode)的编码和解码演示 条形码(比如:EAN-13)的编码和解码演示 [一]. 基本介绍 : 1-1. ZXing是一个开源Java类库用于解析多种格式的条 ...

  8. Python zxing 库解析(条形码二维码识别)

    各种扫码软件 最近要做个二维码识别的项目,查到二维码识别有好多开源的不开源的软件 http://www.oschina.net/project/tag/238/ Zbar 首先试了一下Zbar,pyt ...

  9. 条形码/二维码之开源利器ZXing图文介绍(转)

    继前面介绍的一个日本开源软件(该软件只能实现QRCode)原文: Java实现二维码QRCode的编码和解码(http://sjsky.iteye.com/blog/1136934 ),今发现又一优秀 ...

随机推荐

  1. 工具类--map 转成xml xml转成map

    public class WxChatReq { /** * Map转换成XML * @param data * @return * @throws Exception */ public stati ...

  2. Spellchecker inspection helps locate typos and misspelling in your code, comments and literals, and fix them in one click

    Pycharm设置 Pycharm总是很多的拼写检查波拉线 Spellchecker inspection helps locate typos and misspelling in your cod ...

  3. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  4. keepAlived主备及双主

    nginx用默认配置即可 1.主备配置 1.主keepAlived配置 vrrp_instance VI_1 { state MASTER #主备区分 interface eth0 virtual_r ...

  5. 2018-8-10-wpf-DoEvents-

    title author date CreateTime categories wpf DoEvents lindexi 2018-08-10 19:16:51 +0800 2018-2-13 17: ...

  6. kindEditor富文本编辑器的工具栏设置

    如何配置kindeditor的工具栏 kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能 ...

  7. scip 练习2.18

    (define (append a b ) (if (null? a )b (cons (car a) (append (cdr a) b)))) (define (reverse l) (appen ...

  8. 数组去重Set也可实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Java用集合实现斗地主发牌

    本文以java双列集合HashMap为核心实现发牌操作:                                思路: 1.准备牌:创建一个Map集合,存储牌的索引和组装好的牌 创建一个lis ...

  10. Keepalived+LVS+nginx搭建nginx高可用集群

    1. 环境准备 1. VMware; 2. 4台CentOs7虚拟主机:192.168.122.248,192.168.122.68, 192.168.122.110, 192.168.122.167 ...