recommendCode.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view :style="getHeight">
  3. <!-- 公共组件-每个页面必须引入 -->
  4. <public-module></public-module>
  5. <view class="content d-flex flex-column a-center j-center">
  6. <image src="/static/image/addStaff/face_sao.png" mode="widthFix" lazy-load style="width: 500upx;"></image>
  7. <image :src="recommendImg" mode="widthFix" lazy-load style="width: 450upx;"></image>
  8. <view>新成员只需要扫描您的二维码,即可马上注册加入啦!</view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. import {
  14. mapState
  15. } from "vuex"
  16. import QR from "@/common/wxqrcode.js"
  17. export default {
  18. data() {
  19. return {
  20. recommendImg: ""
  21. }
  22. },
  23. computed: {
  24. ...mapState(['userInfo']),
  25. getHeight() {
  26. let height = uni.getSystemInfoSync().windowHeight;
  27. return `height: ${height}px;`;
  28. }
  29. },
  30. onLoad() {
  31. var id = this.userInfo.sysUser.id;
  32. this.recommendImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/register/register?id=" + id, {
  33. size: parseInt(200) //二维码大小
  34. })
  35. },
  36. methods: {
  37. }
  38. }
  39. </script>
  40. <style>
  41. .content {
  42. position: absolute;
  43. top: 50%;
  44. left: 50%;
  45. transform: translate(-50%, -60%);
  46. }
  47. .content>image {
  48. margin-top: 30upx;
  49. margin-bottom: 30upx;
  50. }
  51. .content>view {
  52. width: 400upx;
  53. color: red;
  54. text-align: center;
  55. }
  56. </style>