slideshow.vue 2.7 KB

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