index.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <view >
  3. <uni-popup ref="inputDialog" class="pop" :mask-click="false" @close="closeAdd">
  4. <view class="popup-content" >
  5. <swiper class="swiper-box" @change="swiperChange">
  6. <swiper-item v-for="(item ,index) in swiperList" :key="index" class="f-straight">
  7. <image class="img-item" :src="item.url" @click="skipLink" mode="widthFix"></image>
  8. <view @click="closeAdd" class="f-horizon-center">
  9. <uni-icons style="display: flex;justify-content: flex-end;" type="closeempty" size="40" color="#fff"/>
  10. </view>
  11. </swiper-item>
  12. </swiper>
  13. </view>
  14. </uni-popup>
  15. </view>
  16. </template>
  17. <script setup>
  18. import { ref, onMounted } from 'vue'
  19. const current = ref(0)
  20. const inputDialog = ref()
  21. const swiperList = [{ url: 'https://minio.menduner.com/dev/menduner/advertisement.jpg', path: '' }]
  22. const currentPage = getCurrentPages()[0].route
  23. const closeAdd = () => {
  24. inputDialog.value.close()
  25. uni.removeStorageSync('firstOpen')
  26. }
  27. const openDialog = () => {
  28. inputDialog.value.open()
  29. }
  30. const skipLink = () => {
  31. closeAdd()
  32. if (!uni.getStorageSync('token') && currentPage !== 'pages/login/index') {
  33. uni.switchTab({
  34. url: '/pages/index/my'
  35. })
  36. }
  37. }
  38. const swiperChange = (e) => {
  39. current.value = e.detail.current
  40. }
  41. onMounted(() => {
  42. if(uni.getStorageSync('firstOpen')) openDialog()
  43. })
  44. </script>
  45. <style scoped lang="scss">
  46. .popup-content {
  47. align-items: center;
  48. justify-content: center;
  49. width: 80vw;
  50. height: 100vh;
  51. }
  52. .img-item{
  53. width: 100%;
  54. height: 60vh;
  55. margin: 0;
  56. border-radius: 20px;
  57. }
  58. .swiper-box{
  59. height: 100vh;
  60. }
  61. .f-straight{
  62. display: flex;
  63. justify-content: center;
  64. flex-direction: column;
  65. }
  66. </style>