uskyq/assets/js/commonVue.js

import footerCom from '/assets/js/component/footerCom.js'
import feedFix from '/assets/js/component/feedFix.js'
import dialogCom from '/assets/js/component/dialogCom.js'
import loadingCom from '/assets/js/component/loadingCom.js'
import headerCom from '/assets/js/component/headerCom.js'

const App = {

  components: {
    footerCom,
    feedFix,
    dialogCom,
    loadingCom,
    headerCom
  },
  data() {
    return {
      title: 'Hello Vue',
      count: 0,
      articalArray: [], //详情数组

      mobileListBoolean:false,
      //公共
      id: null,
      columnList: [],
      requestParams: { //内容接口请求参数
        categoryid: 0, //栏目id
        pageNum: 1,
        pageSize: 9,
        order: 'sortindex',
        articleid: 0, //访问量统计
        id: 0, //内容详情id
      },
      dup: '',
      currentPath: '',
      articalArray: [], //详情数组
      articalArrayRelated: [], //相关推荐
      columnTypes: [], //栏目类型
      colL: 0,
      modelType: 1,
      columnImage: '', //栏目图片
      footerBoolean: false, //底部延时加载（解决页面闪烁）
      contentBoolean: false, //中间延时加载（优化banner图片加载慢的问题）

      // 公共弹框
      centerDialogVisible: false,
      dialogDataArray: [],
      ruleForm: {
        platName: '智慧安防',
        consultName: '',
        consultPhone: '',
        mail: '',
        company: '',
        consultContent: "",
      },
      rules: {
        platName: [{
          required: true,
          message: '请选择类型',
          trigger: 'change'
        }, ],
        consultName: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }, ],
        consultPhone: [{
          required: true,
          message: '请输入正确的电话号码',
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          trigger: 'change'
        }],
        mail: [{
          required: false,
          type: "email",
          message: "请输入正确的邮箱地址",
          trigger: 'blur'
        }],
      },

      //首页
      homeList: [],
      status: false,

      // 新闻
      goPage: 1,
      totalPageNum: 1,
      totalPageSzie: 1,
      loading: true,
      categoryid: 0,
    }
  },

  computed: {
  },
  created: function () {
    this.dup = this.getQuery('dup')
    this.requestParams.categoryid = this.getQuery('categoryid') ? this.getQuery('categoryid') : ''
    this.requestParams.id = this.getQuery('id') ? this.getQuery('id') : ''
    this.requestParams.articleid = this.getQuery('id') ? this.getQuery('id') : ''
  },
  mounted: function () {
    this.getColumnData()

    if (window.location.hash) {

        // 方法一
        setTimeout(()=>{
          var aa=window.location.hash.replace("#", "")
          document.getElementById(aa).scrollIntoView({
            behavior: 'smooth' // 可选，平滑滚动效果
          });
        },100)

        //方法二
        setTimeout(()=>{
          this.goAnchor(window.location.hash)
        },100)
    }
  },
  methods: {
    goAnchor (selector) {
      let anchor=this.$refs.myElement
      console.log(anchor.offsetTop)
      console.log(document.documentElement.scrollTop)
      document.documentElement.scrollTop = anchor.offsetTop; // chrome
      console.log(document.documentElement.scrollTop)
    },


    goMobileIconClick(){
      this.mobileListBoolean=!this.mobileListBoolean
    },
    handleOpen(){

    },
    handleClose(){

    },

    //获取栏目数据
    getColumnData() {
      var _this = this;
      if (!localStorage.getItem('storeColumnList') || (window.location.pathname == '/' && !this.dup) || window.location.pathname == '/index.html') {
        $.ajax({
          type: 'get',
          dataType: 'json',
          url: window.FQDN2 + 'siteCategory/siteCategoryList',
        }).done(function (res) {
          _this.lazyFunc()
          _this.columnList = res.data;
          let expires = Date.now() + 1000 * 60 * 30; //半小时过期时间
          localStorage.setItem('storeColumnList', JSON.stringify({
            data: _this.columnList,
            expires
          }));
          _this.loading = false
          _this.handleColumnData()
        })
      } else {
        this.loading = false;
        this.handleColumnData()
      }
      setTimeout(function () {
        _this.contentBoolean = true
      }, 900)
      setTimeout(function () {
        _this.footerBoolean = true
      }, 1000)
    },


    handleColumnData() {
      if (window.location.pathname == '/' && !this.dup) { //if 首页模板
        this.currentPath = '/template1/'
      } else if (window.location.pathname == '/' && this.dup) { //if 首页复用模板
        this.currentPath = '/template1/?dup=' + this.dup
      } else if (window.location.href.indexOf("dup") > 0) { // if 非首页模板
        this.currentPath = `${window.location.pathname}?dup=` + this.getQuery('dup')
      } else { //非首页复用模板
        this.currentPath = window.location.pathname;
      }
      this.columnList = JSON.parse(localStorage.getItem('storeColumnList')).data;
      // 读取并检查是否过期
      if (JSON.parse(localStorage.getItem('storeColumnList')).expires < Date.now()) {
        localStorage.removeItem('storeColumnList');
      } 

      var _this = this;
      for (let i = 0; i < _this.columnList.length; i++) {
        // 获取反馈弹框类型数据
        if (_this.columnList[i].categoryStyle == '2' && _this.columnList[i].sname == '') {
          _this.dialogDataArray = (_this.columnList[i].children)
          _this.ruleForm.platName = _this.dialogDataArray[0].categoryName;
        }

        //栏目处理  

        //进入首页
        if (_this.columnList[i].categoryStyle == '1' && (window.location.pathname == '/' || window.location.pathname == '' || window.location.pathname == '/index.html')) {
          if ('/?dup=' + _this.columnList[i].sname == `${window.location.pathname}?dup=` + this.getQuery('dup')) {
            console.log('首页复用模板')
            getSeoCommon()
            var objData = _this.columnList.filter(obj => obj.categoryStyle == 1 ? '/?dup=' + obj.sname == `${window.location.pathname}?dup=` + _this.getQuery('dup') : '');
            _this.requestParams.categoryid = objData[0].id
            _this.getArticalData(_this.requestParams)
            _this.columnImage = _this.columnList[i].imagePath;
            getBannerCommon()
          }
          if (window.location.href.indexOf("dup") == -1 && !_this.columnList[i].sname) {
            console.log('首页模板')
            getSeoCommon()
            this.requestParams.categoryid = this.columnList[0].id
            _this.getArticalData(_this.requestParams)
            _this.columnImage = _this.columnList[0].imagePath;
            getBannerCommon()
          }
        }

        //进入其他栏目页
        if (('/template' + _this.columnList[i].categoryStyle + '/' == window.location.pathname) || (_this.columnList[i].categoryStyle == window.location.pathname.replace('index.html', ''))) {
          if (window.location.href.indexOf("dup") && ('/template' + _this.columnList[i].categoryStyle + '/?dup=' + _this.columnList[i].sname == `${window.location.pathname}?dup=` + this.getQuery('dup'))) {
            if (_this.columnList[i].children.length > 0) {
              _this.columnTypes = _this.columnList[i].children
              _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('categoryid') : _this.columnTypes[0].id;
              _this.getArticalData(_this.requestParams)
              _this.columnImage = _this.columnList[i].imagePath;
            } else {
              var objData = _this.columnList.filter(obj => '/template' + obj.categoryStyle + '/?dup=' + obj.sname == `${window.location.pathname}?dup=` + _this.getQuery('dup'));
              _this.requestParams.categoryid = objData[0].id
              _this.getArticalData(_this.requestParams)
              _this.columnImage = _this.columnList[i].imagePath;
            }
            getSeoCommon()
            getBannerCommon()
          }
          if (window.location.href.indexOf("dup") == -1 && !_this.columnList[i].sname && ('/template' + _this.columnList[i].categoryStyle + '/' == window.location.pathname)) {
            if (_this.columnList[i].children.length > 0) {
              _this.columnTypes = _this.columnList[i].children
              _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('categoryid') : _this.columnTypes[0].id;
              _this.getArticalData(_this.requestParams)
              _this.columnImage = _this.columnList[i].imagePath;
            } else {
              var objData = _this.columnList.filter(obj => '/template' + obj.categoryStyle + '/' == window.location.pathname.replace('index.html', ''));
              _this.requestParams.categoryid = objData[0].id
              _this.getArticalData(_this.requestParams)
              _this.columnImage = _this.columnList[i].imagePath;
            }
           getSeoCommon()
           getBannerCommon()
          }
        } else {
          // 进入详情页
          if ('/template' + _this.columnList[i].categoryStyle + '/read.html' == window.location.pathname) {
            getDetailCommon()
          }

          function getDetailCommon() {
            //获取内容详情
            _this.getArticalData(_this.requestParams)
            //获取详情相关数据
            setTimeout(() => {
              _this.requestParams.id = ''
              _this.requestParams.articleid = ''
              _this.getArticalData(_this.requestParams, 1)
            }, 100)

            //产品详情时栏目高亮
            if (window.location.href.indexOf("dup") && ('/template' + _this.columnList[i].categoryStyle + '/read.html' + '?dup=' + _this.columnList[i].sname == `${window.location.pathname}?dup=` + _this.getQuery('dup'))) {
              _this.currentPath = `/template${ _this.columnList[i].categoryStyle}/?dup=` + _this.getQuery('dup')
              _this.columnImage = _this.columnList[i].imagePath; //栏目图片获取
              getSeoCommon()
              getBannerCommon()
            }

            if (window.location.href.indexOf("dup") == -1 && !_this.columnList[i].sname && ('/template' + _this.columnList[i].categoryStyle + '/read.html' == window.location.pathname)) {
              _this.currentPath = `/template${ _this.columnList[i].categoryStyle}/`
              _this.columnImage = _this.columnList[i].imagePath; //栏目图片获取
              getSeoCommon()
              getBannerCommon()
            }
          }
        }

        function getBannerCommon(){
          _this.modelType = _this.columnList[i].modelType; //栏目图片获取
          setTimeout(() => {
            if (_this.modelType == 2) {
              document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
              if(!document.getElementById("videoPlay").getAttribute('poster')){
                document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/poster.jpg');
              }
            }
          }, 100)
        }

        function getSeoCommon() {
          $('title').text(_this.columnList[i].categoryName);
          $('meta[name="description"]').attr('content', _this.columnList[i].metadescription);
          $('meta[name="keywords"]').attr('content', _this.columnList[i].metakeywords);
        }
      }
    },

    //获取内容
    getArticalData(requestParams, type) {
      var _this = this
      if (window.location.pathname == '/template4/') {
        _this.requestParams.order = ''
      }

      $.ajax({
        type: 'GET',
        dataType: 'json',
        url: window.FQDN2 + 'siteArticle/siteArticleList',
        data: requestParams
      }).done(function (res) {
        _this.lazyFunc()
        var aa
        var bb

        if (type == 1) {
          bb = res.data.records
        } else {
          aa = res.data.records;
          _this.articalArray = aa;
        }
        if (bb) {
          _this.articalArrayRelated = bb.filter(obj => obj.title != _this.articalArray[0].title);
        }
        _this.totalPageSzie = res.data.total
        _this.totalPageNum = Math.ceil(res.data.total / res.data.size);
      }).fail(function (err) {});
    },

    //类型点击
    facilityClick(e, item) {
      this.requestParams.categoryid = item.id
      this.requestParams.pageNum = 1
      this.getArticalData(this.requestParams)
    },

    //  分页
    oneInnerBox: function (param) {
      var aa = this.getQuery('dup')
      if (this.getQuery('dup')) {
        window.location = "./read.html?dup=" + aa + "&categoryid=" + param.categoryid + "&id=" + param.id + "&isUrlId=1";
      } else {
        window.location = "./read.html?categoryid=" + param.categoryid + "&id=" + param.id + "&isUrlId=1";
      }
    },
    enterPage: function (res) {
      if (this.goPage >= 1 && this.goPage <= this.totalPageNum) {
        this.requestParams.pageNum = this.goPage
        this.getArticalData(this.requestParams)
      } else {
        this.goPage = 1
        alert('输入页数有误！')
      }
    },
    currentChange: function (res) {
      this.requestParams.pageNum = res
      this.getArticalData(this.requestParams)
    },

    // 首页箭头下拉
    goDown:function (){
      let scrollElement = this.$refs.scrollElement;
      scrollElement.scrollIntoView({ behavior: 'smooth' })
    },

    //申请试用
    goApply: function () {
      this.centerDialogVisible = true
    },

    lazyFunc: function () {
      setTimeout(function () {
        // 1 获取全部图片的DOM节点
        // 注意：querySelectorAll 值为伪数组利用扩展运算符转为真数组
        const images = $('.lazyContainer img')
        // 2 监听页面滚动事件
        window.addEventListener('scroll', lazyLoad)
        // 3 定义页面滚动的处理函数
        function lazyLoad() {
          for (let i = 0; i < images.length; i++) {
            // isVisible是否该图片位于可视区域 返回true 或false
            if (isVisible(images[i])) {
              // 将元素的自定义属性 data-src 赋值给元素的 src 属性 
              // dataset.src 此为元素的自定义属性 data-src
              if (images[i].dataset.src) {
                images[i].src = images[i].dataset.src // 等价于：img.setAttribute('src', img.getAttribute('data-src'))
              }
              // 防止重复被遍历 加载完之后 删除元素不再加载
              images.splice(i, 1)
              i--
            }
          }
        }
        lazyLoad()
        // 4 可视区域判断函数
        function isVisible(img) {
          // 判断是否在可视区域
          const imgRect = img.getBoundingClientRect() // getBoundingClientRect 获取图片的动态信息
          return imgRect.bottom > 0 && imgRect.top < window.innerHeight && imgRect.right > 0 && imgRect.left < window.innerWidth
        }
      }, 100)
    },

    //弹框显示隐藏（子组件向父组件传值）
    handleChildEvent: function (value) {
      this.centerDialogVisible = value; // 处理从子组件接收到的数据
    },

    // 排序
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      }
    },

    // 获取路由参数
    getQuery(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return decodeURI(r[2]);
      return null;
    },

    //获得年月日时分秒  //传入日期//例：2020-10-27T14:36:23
    timeFormatSeconds(time) {
      var d = time ? new Date(time) : new Date();
      var year = d.getFullYear();
      var month = d.getMonth() + 1;
      var day = d.getDate();
      var hours = d.getHours();
      var min = d.getMinutes();
      var seconds = d.getSeconds();

      if (month < 10) month = '0' + month;
      if (day < 10) day = '0' + day;
      if (hours < 0) hours = '0' + hours;
      if (min < 10) min = '0' + min;
      if (seconds < 10) seconds = '0' + seconds;

      return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds);
    }
  }
}
Vue.createApp(App).use(ElementPlus).mount("#app");