launch.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <view class="launch-bg" :style="[background]" @tap="launchApp()">
  3. <image class="launch-img" mode="widthFix" :src="appConfig.mobile_start_page"></image>
  4. <view class="img-datu">
  5. <view class="jishi" :style="{ top: (sysInfo.statusBarHeight + 60) + 'px' }">
  6. <text>跳过</text>
  7. <text>{{countDownNum}}秒</text>
  8. </view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. import {
  14. mapGetters
  15. } from 'vuex'
  16. const app = getApp()
  17. const homeItem = {
  18. name: '启动页'
  19. }
  20. export default {
  21. data() {
  22. return {
  23. countDownNum: 5,
  24. timer: null,
  25. }
  26. },
  27. onLoad(options) {
  28. console.log('token' + this.appConfig.token)
  29. this.timer = setInterval(() => {
  30. if (this.countDownNum == 0) {
  31. clearInterval(this.timer)
  32. this.launchApp()
  33. } else {
  34. this.countDownNum = this.countDownNum - 1;
  35. }
  36. }, 1000)
  37. },
  38. onUnload() {},
  39. onShow() {
  40. },
  41. onHide() {},
  42. methods: {
  43. launchApp() {
  44. if (this.timer) {
  45. clearInterval(this.timer)
  46. }
  47. uni.switchTab({
  48. url: '/pages/index/index'
  49. })
  50. },
  51. },
  52. computed: {
  53. ...mapGetters(['sysInfo', 'inviteCode', 'appConfig']),
  54. background() {
  55. const {
  56. mobile_start_bg
  57. } = this.appConfig
  58. return mobile_start_bg ? {
  59. 'background-image': `url(${mobile_start_bg})`,
  60. 'background-size': 'cover'
  61. } : {}
  62. },
  63. }
  64. }
  65. </script>
  66. <style lang="scss">
  67. page {
  68. padding: 0;
  69. height: 100%;
  70. }
  71. .launch-bg {
  72. height: 100%;
  73. }
  74. .launch-img {
  75. width: 100%;
  76. }
  77. .img-datu .jishi {
  78. background-color: rgba(0, 0, 0, 0.4);
  79. position: fixed;
  80. top: 200rpx;
  81. right: 50rpx;
  82. border-radius: 50%;
  83. width: 100rpx;
  84. height: 100rpx;
  85. display: flex;
  86. flex-direction: column;
  87. justify-content: center;
  88. align-items: center;
  89. }
  90. .img-datu .jishi text {
  91. color: #fff;
  92. font-size: 24rpx;
  93. }
  94. </style>