localization-digital-screen/src/views/mixins/index.js

import { FetchInitScreenData } from '@/api/library'
import { mapGetters } from 'vuex'
export const pageCrud = {
  // 组件共用属性
  data() {
    return {
      headerTitle: '数字智慧大屏',
      baseSetting: {},
      currentIndex: 0, // 当前显示的页面索引
      currentPage: null, // 当前显示的页面数据
      pageData: [
        { id: 1, title: 'PageOne', delayed: 20, isShow: false },
        { id: 2, title: 'PageTwo', delayed: 20, isShow: false },
        { id: 3, title: 'PageThree', delayed: 20, isShow: false },
        { id: 4, title: 'PageFour', delayed: 20, isShow: false },
        { id: 5, title: 'PageFive', delayed: 20, isShow: false }
      ],
      wecharQrCodeSrc: null,
      intervalId: null,
      orderIds: [],
      updateTime: '',
      oldUpdateTime: JSON.parse(localStorage.getItem('updateTime')) || '',
      welcomeData: []
    }
  },
  computed: {
    ...mapGetters(['libcode']),
    shouldCacheComponent() {
      if (this.currentPage) {
        switch (this.currentPage.title) {
          case 'PageOne':
            return 'PageOne'
          case 'PageFour':
            return 'PageFour'
          case 'PageFive':
            return 'PageFive'
          default:
            return null
        }
      }
      return null
    },
    currentPageComponent() {
      if (this.currentPage) {
        switch (this.currentPage.title) {
          case 'PageTwo':
            return 'PageTwo'
          case 'PageThree':
            return 'PageThree'
          default:
            return null
        }
      }
      return null
    }
  },
  created() {
    this.getInitSetting()
  },
  activated() {
    // this.getInitSetting()
  },
  beforeDestroy() {
    // this.stopAutoSwitch()
  },
  // 组件挂载时的共用方法
  mounted() {
    // this.useLibcode()
  },
  // 组件共用方法
  methods: {
    useLibcode() {
      console.log('当前馆代码：', this.currentLibcode)
    },
    getInitSetting() {
      // const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
      const doorCodes = this.$route.query.doorCodes
      console.log('doorCodes:', doorCodes)
      FetchInitScreenData({ 'libcode': this.libcode, 'doorCodes': doorCodes || null }).then(res => {
        const result = res.data.settings
        this.baseSetting = res.data.settings
        this.welcomeData = res.data.screenWelcomePromotions
        // this.wecharQrCodeSrc = linkSrc + '/downloadFile' + result.wecharQrCode
        this.wecharQrCodeSrc = result.wechar_qr_code.context
        localStorage.setItem('wecharQrCodeSrc', this.wecharQrCodeSrc)

        this.headerTitle = result.screen_title.context

        const selectorder = result.show_screen.context
        const showDurations = { 1: result.show1.context, 2: result.show2.context, 3: result.show3.context, 4: result.show4.context, 5: result.show5.context }
        this.orderIds = selectorder.split(',').map(id => parseInt(id.trim()))
        this.updateTime = res.data.updateTime

        if (this.updateTime !== this.oldUpdateTime) {
          this.oldUpdateTime = this.updateTime
          localStorage.setItem('updateTime', JSON.stringify(this.oldUpdateTime))
          this.refreshPageWhenChanged()
        } else {
          this.updatePageData(showDurations)
        }
      }).catch(error => {
        console.error('Error', error)
        setTimeout(() => {
          this.reload()
        }, 5000)
      })
    },
    refreshPageWhenChanged() {
      window.location.reload()
    },
    updatePageData(showDurations) {
      const updatedPageData = this.orderIds.map((id) => {
        const pageIndex = this.pageData.findIndex(item => item.id === id)
        if (pageIndex !== -1) {
          return {
            ...this.pageData[pageIndex],
            isShow: true,
            delayed: showDurations[id]
          }
        } else {
          console.log(`ID 为 ${id} 的页面未找到。`)
          return null
        }
      }).filter(item => item !== null)

      this.pageData = updatedPageData
      if (this.pageData.length) { // 确保有页面数据
        this.currentIndex = 0 // 重置索引
        this.currentPage = this.pageData[this.currentIndex]
        this.startPageSwitch() // 启动切换
      }
    },
    startPageSwitch() {
      // 清除可能存在的旧定时器
      this.stopAutoSwitch()

      if (!this.pageData.length) return // 无页面数据则退出

      // 获取当前页面的延迟时间
      const currentDelay = parseInt(this.pageData[this.currentIndex].delayed) * 1000
      console.log(`当前页面[${this.currentIndex}]延迟:`, currentDelay)

      // 使用setTimeout递归调用，每次切换都重新计算延迟
      this.timeoutId = setTimeout(() => {
        // 更新索引（循环切换）
        this.currentIndex = (this.currentIndex + 1) % this.pageData.length
        this.currentPage = this.pageData[this.currentIndex]

        // 检查是否需要刷新页面
        if (this.updateTime !== this.oldUpdateTime) {
          this.oldUpdateTime = this.updateTime
          localStorage.setItem('updateTime', JSON.stringify(this.oldUpdateTime))
          this.refreshPageWhenChanged()
        } else {
          // 继续下一次切换
          this.startPageSwitch()
        }
      }, currentDelay)
    },
    stopAutoSwitch() {
      // 清除定时器（注意变量名从intervalId改为timeoutId）
      if (this.timeoutId) {
        clearTimeout(this.timeoutId)
        this.timeoutId = null
      }
    }
  }
}