slideshow.vue 2.7 KB

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