index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <view class="content">
  3. <image src="../../static/img/sharebase.png" mode="" class="sharebg" ></image>
  4. <view class="code-warpper">
  5. <view class="code-content">
  6. <tki-qrcode
  7. :cid="cid"
  8. ref="qrcode"
  9. :val="val"
  10. :size="size"
  11. :unit="unit"
  12. :background="background"
  13. :foreground="foreground"
  14. :pdground="pdground"
  15. :iconSize="iconSize"
  16. :lv="lv"
  17. :onval="onval"
  18. :loadMake="loadMake"
  19. :usingComponents="usingComponents"
  20. @result="qrR"
  21. />
  22. </view>
  23. <view class="code">
  24. 邀请码:{{userInfo.uid}}
  25. </view>
  26. </view>
  27. <view class="btm">
  28. <!-- 向商家出示二维码 -->
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import { orderDetail } from '@/api/order.js';
  34. import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
  35. import { mapState, mapMutations } from 'vuex';
  36. export default {
  37. comments:{
  38. tkiQrcode
  39. },
  40. data() {
  41. return {
  42. id:'',
  43. // code: '10250035810',
  44. cid: 'tki-qrcode-canvas', //canvasId,页面存在多个二维码组件时需设置不同的ID
  45. size: 300, //生成的二维码大小
  46. unit: 'upx', //大小单位尺寸
  47. show: true,//默认使用组件中的image标签显示二维码
  48. val: '', //要生成的内容
  49. background: '#ffffff', //二维码背景色
  50. foreground: '#333333', //二维码前景色
  51. pdground: '#333333', //二维码角标色
  52. icon: '', //二维码图标URL(必须是本地图片,网络图需要先下载至本地)
  53. iconSize: 40, //二维码图标大小
  54. lv: 3, //容错级别
  55. onval: true, //监听val值变化自动重新生成二维码
  56. loadMake: true, //组件初始化完成后自动生成二维码,val需要有值
  57. usingComponents: false, //是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
  58. showLoading: false, //是否显示loading
  59. loadingText: '二维码生成中', //loading文字
  60. src: '', // 二维码生成后的图片地址或base64
  61. ratio: 1, //页面比例用于计算
  62. ctxSrc: '', //要显示的图片
  63. loading: true,//是否载入图片中
  64. canHeight: '',//画布高度
  65. canWeidth: ''//画布宽度
  66. }
  67. },
  68. computed: {
  69. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
  70. ...mapState(['baseURL'])
  71. },
  72. onShow() {
  73. console.log(this.userInfo)
  74. // 判断是否已经登录
  75. if (this.hasLogin) {
  76. // this.loadBaseData();
  77. // this.getSpreadCount()
  78. console.log(this.userInfo)
  79. // console.log(this.userInfo)
  80. }
  81. },
  82. onLoad(opt) {
  83. this.val = this.baseURL + '/index/#/pages/index/index??spread=' + this.userInfo.uid
  84. },
  85. methods: {
  86. // 生成二维码后返回base64
  87. qrR(res) {
  88. this.src = res;
  89. },
  90. }
  91. }
  92. </script>
  93. <style lang="scss" scoped>
  94. .content {
  95. position: relative;
  96. background-color: #ff341a;
  97. height: 100vh;
  98. min-height: 100%;
  99. }
  100. page {
  101. height: 100vh;
  102. min-height: 100%;
  103. background-color: #ff341a;
  104. }
  105. .user-logo {
  106. height: 300rpx;
  107. display: flex;
  108. flex-direction: column;
  109. justify-content: center;
  110. align-items: center;
  111. image {
  112. width: 102rpx;
  113. height: 102rpx;
  114. border-radius: 50%;
  115. }
  116. .user-name {
  117. padding-top: 25rpx;
  118. font-size: 34rpx;
  119. font-family: SourceHanSansCN;
  120. font-weight: 400;
  121. color: #2B2B2B;
  122. }
  123. }
  124. .code-warpper {
  125. width: 515rpx;
  126. height: 515rpx;
  127. margin: 0 auto;
  128. // border: 3rpx solid #901B21;
  129. padding-top: 46rpx;
  130. position: absolute;
  131. top:600rpx;
  132. left: 0;
  133. right: 0;
  134. margin: auto;
  135. .code-content {
  136. width: 300rpx;
  137. height: 300rpx;
  138. // background-color: red;
  139. margin: 0 auto;
  140. }
  141. .code {
  142. padding-top: 31rpx;
  143. font-size: 36rpx;
  144. font-family: PingFang SC;
  145. font-weight: bold;
  146. color: #333333;
  147. text-align: center;
  148. }
  149. }
  150. .btm {
  151. padding-top: 45rpx;
  152. font-size: 30rpx;
  153. font-family: PingFang SC;
  154. font-weight: bold;
  155. color: #333333;
  156. text-align: center;
  157. }
  158. .sharebg {
  159. width: 750rpx;
  160. height: 1206rpx;
  161. position: absolute;
  162. top: 0;
  163. }
  164. </style>