guide.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view class="pages">
  3. <view class="hold-status-bar">
  4. <!-- 占据了状态栏位置 -->
  5. </view>
  6. <view class="guide-img">
  7. <swiper class="swiper"
  8. :indicator-dots="swiper.indicatorDots"
  9. :indicator-color="swiper.indicatorColor"
  10. :indicator-active-color="swiper.indicatorActiveColor"
  11. :autoplay="swiper.autoplay"
  12. :interval="swiper.interval" :duration="swiper.duration">
  13. <swiper-item>
  14. <view class="adv-item"><image :src="$getimg +'guide01.png'" class="pic" mode="widthFix"></image></view>
  15. </swiper-item>
  16. <swiper-item>
  17. <view class="adv-item" @click="goIndex"><image :src="$getimg +'guide02.png'" class="pic" mode="widthFix"></image></view>
  18. </swiper-item>
  19. </swiper>
  20. <!-- <div id="universal-preloader">
  21. <div class="preloader">
  22. <span class="preloader-time"><i id="preloader-time-num">{{preloaderTime}}</i>秒后关闭</span>
  23. </div>
  24. </div> -->
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. export default {
  30. data() {
  31. return {
  32. preloaderTime:5,
  33. $getimg:this.$getimg,
  34. swiper: {
  35. indicatorDots: true,
  36. autoplay: true,
  37. interval: 9000,
  38. duration: 500,
  39. indicatorColor:"rgba(171, 234, 213, 1)",
  40. indicatorActiveColor:"rgba(54, 206, 149, 1)",
  41. },
  42. }
  43. },
  44. onShow() {
  45. // console.log('config',this.$getimg);
  46. },
  47. onLoad() {
  48. // console.log(this.config.version);
  49. },
  50. onReady() {
  51. // 从本地缓存中同步获取指定 key 对应的内容,用于判断是否是第一次打开应用
  52. const launch = uni.getStorageSync('launchFlag');
  53. console.log('launch',launch);
  54. const version = uni.getStorageSync('version');
  55. if(!version){
  56. uni.setStorage({
  57. key: 'version',
  58. data: this.config.version
  59. });
  60. }
  61. if (launch&&version==this.config.version) {
  62. // 如果已经有,直接去首页
  63. this.goIndex();
  64. } else {
  65. // 没有值,跳到引导页,并存储,下次打开就不会进去引导页
  66. // uni.setStorage({
  67. // key: 'launchFlag',
  68. // data: true
  69. // });
  70. // this.lxfEndtime();
  71. }
  72. },
  73. methods: {
  74. goIndex(){
  75. uni.setStorage({
  76. key: 'version',
  77. data: this.config.version
  78. });
  79. uni.setStorage({
  80. key: 'launchFlag',
  81. data: true
  82. });
  83. uni.redirectTo({
  84. url: '/pages/login/loginType',
  85. fail(err) {
  86. // console.log(err)
  87. }
  88. });
  89. },
  90. lxfEndtime(){
  91. let that = this;
  92. let $i;
  93. if(that.preloaderTime!=0){
  94. that.preloaderTime--;
  95. $i=setTimeout(function(){that.lxfEndtime()},1000);
  96. }else{
  97. clearTimeout($i);
  98. this.goIndex();
  99. }
  100. }
  101. }
  102. }
  103. </script>
  104. <style scoped>
  105. .guide-img{position: fixed;left: 0;right: 0;top: 0;bottom: 0;display: block;}
  106. .swiper{height: 100%;}
  107. .adv-item{height: 100%;}
  108. .guide-img .pic{width: 100%;/* max-height: 100%; */}
  109. #universal-preloader{position:fixed;top:0px;left:0px;width:100%;height:100%;opacity:1;background:rgba(0,0,0,0.1) !important;filter:Alpha(opacity=100);background:#000;z-index:1020;}
  110. #universal-preloader>.preloader{position: relative;width: 100%;height: 100%;}
  111. .universal-preloader-preloader{width: 100%;min-height: 100%;}
  112. .preloader-time{position: absolute;right: 24px;top: 24px;font-size: 24rpx;display: inline-block;background: #fff;padding: 3px 8px;border-radius: 10px;}
  113. #preloader-time-num{font-style: normal;margin-right: 5rpx;color: #57992c;}
  114. </style>