slideshow.vue 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <view>
  3. <view v-if="list.length">
  4. <swiper :style="{
  5. width: tovw(width),
  6. height: tovw(height),
  7. }" :autoplay="autoplay" :interval="interval" circular>
  8. <swiper-item class="swiper-item" v-for="(item, index) in list" :key="item.list">
  9. <u--image @click="onClick(index)" :src="item.cover" :width="tovw(width)" :height="tovw(height)"
  10. mode="aspectFill" :lazy-load="true">
  11. <template v-slot:loading>
  12. <u-loading-icon color="red"></u-loading-icon>
  13. </template>
  14. </u--image>
  15. </swiper-item>
  16. </swiper>
  17. </view>
  18. <view style="height: 10px;" v-else-if="empty" />
  19. </view>
  20. </template>
  21. <script>
  22. import { viewImage } from "../utils/settleFiles";
  23. export default {
  24. name: 'slideshow',
  25. props: {
  26. autoplay: {
  27. type: Boolean,
  28. default: true
  29. },
  30. interval: {
  31. type: [Number, String],
  32. default: 5000
  33. },
  34. empty: {
  35. type: Boolean,
  36. default: false
  37. }
  38. },
  39. data() {
  40. return {
  41. width: 375,
  42. height: 500,
  43. list: [],
  44. }
  45. },
  46. methods: {
  47. getBanners(locations, systemclient = 'marketingtool') {
  48. return new Promise((resolve, reject) => {
  49. this.$Http.basic({
  50. "id": "20240426154302",
  51. "content": {
  52. systemclient,
  53. locations
  54. }
  55. }).then(res => {
  56. console.log("获取广告位" + locations, res)
  57. resolve(res.msg)
  58. if (this.cutoff(res.msg)) return;
  59. try {
  60. let list = res.data[locations[0]];
  61. if (list.length) {
  62. if (list[0].dimensional) {
  63. let dimensional = list[0].dimensional.split("*")
  64. this.width = dimensional[0] - 0;
  65. this.height = dimensional[1] - 0;
  66. };
  67. this.list = list.map(v => {
  68. v.cover = this.getSpecifiedImage(v.attinfos[0], 'compressed')
  69. return v
  70. })
  71. }
  72. } catch (error) {
  73. }
  74. })
  75. })
  76. },
  77. onClick(index) {
  78. let item = this.list[index];
  79. console.log("点击广告图", index, item)
  80. if (item.hyperlink) {
  81. uni.navigateTo({
  82. url: item.hyperlink,
  83. fail: (fail) => {
  84. console.log("跳转失败原因", fail)
  85. viewImage(item.attinfos[0].url)
  86. },
  87. })
  88. } else {
  89. viewImage(item.attinfos[0].url)
  90. }
  91. }
  92. },
  93. }
  94. </script>
  95. <style lang="scss" scoped></style>