jufubao-base 1.0.238-beta1 → 1.0.238-beta68

package/src/mixins/pageEvent.js

@@ -0,0 +1,330 @@
+'use strict';
+import {JfbEvent} from "@/utils/xd.event";
+import {mapActions, mapMutations, mapState} from 'vuex';
+import storage from "@/common/storage";
+import {getCacheTime} from "@/common/common";
+import {isThirdLogin} from "@/utils/xd.base";
+import {Base64} from "js-base64";
+
+/**
+ * @description 绑定生命周期 + 操作事件类方法
+ */
+export default {
+  computed:{
+    ...mapState(['shareInfo'])
+  },
+  data(){
+    return {
+      isFirst: true, //是否为首次访问
+      currentPagesIsShow: false, //当前页面是否为显示状态
+      layoutInfo: null, //框架信息
+      options: null, //参数信息
+      scrollDetail: 0,
+
+      //窗口高度
+      windowHeight:0,
+      //相同城市临是存储第三方定位信息
+      sameCityChangeLocationKey: 'xd_same_city_change_three_map',
+      //保存上一次定位信息
+      locationStorageKey: "xd_three_map",
+
+      scrolltimer: null
+    }
+  },
+  created() {
+    this.$xdRoot.$emit('setLayoutPageBg', null);
+  },
+  onLoad(options) {
+    this.options = options;
+    this.isOnLoad = true;
+
+    // #ifdef MP-WEIXIN
+    this.init(options);
+    this.$xdLog.getARMS().pageShow(this.options);
+    wx.onAppRoute(this.handleRouter)
+    // #endif
+
+    // #ifdef H5
+    if(this.isCheckAuth) this.setBusinessCodeSave(options, this.pageAttr);
+    this.$xdLog.setProject(`App.onLoad`, 'App.pages.onLoad.done');
+    this.onInitLoad();
+    if(isThirdLogin().isICB){
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          this.handleIcbHeader();
+        }, 500)
+      })
+    }
+    // #endif
+
+  },
+  onPageScroll(e) {
+    //预览模式不处理
+    if(this.$configProject.isPreview  || this.currentPagesIsShow === false) return;
+
+    if(this.scrolltimer) {
+      clearTimeout(this.scrolltimer);
+      this.scrolltimer = null;
+    }
+    this.scrolltimer = setTimeout(()=>{
+      console.warn(`event.onPageScroll.onJfbScroll:${e.scrollTop}`);
+    },500)
+    new JfbEvent('onJfbScroll', {
+      vm: this,
+      data: {e, options: this.options},
+    });
+    this.scrollDetail = e.scrollTop;
+  },
+  onReachBottom(e) {
+    //预览模式不处理
+    if(this.$configProject.isPreview || this.currentPagesIsShow === false) return;
+    console.warn('event.onReachBottom.onJfbReachBottom');
+    new JfbEvent('onJfbReachBottom', {
+      vm: this,
+      data: {e, options: this.options},
+    })
+  },
+  // #ifdef H5
+  onBackPress(e) {
+    this.onJfbSystemBack(e)
+  },
+  // #endif
+  // #ifdef MP-WEIXIN
+  onShareAppMessage(message){
+    const promise = new Promise(resolve => {
+      console.warn(`shareInfo=>${JSON.stringify(this.shareInfo)}`);
+      let shareInfo = this.$xdUniHelper.cloneDeep(this.shareInfo);
+      if(this.$xdUniHelper.isEmpty(shareInfo)) {
+        const curPath = Base64.encodeURI(this.$xdUniHelper.parseURL().source);
+        shareInfo = {
+          path: `/pages/loading/loading?callback_local=${curPath}`
+        }
+      }
+      setTimeout(()=>{
+        resolve(shareInfo)
+      })
+    })
+
+    return{
+      promise
+    };
+  },
+  // #endif
+  onShow() {
+    this.currentPagesIsShow = true;
+    if (!this.isFirst) {
+      console.log('exec.onShow', new Date().getTime() - this.time, 'ms');
+      console.warn('event.onShow.onJfbShow');
+
+      //设置页面headers参数
+      this.setPagesHeader(this.$xdUniHelper.cloneDeep(this.pageHeadersInfo));
+
+      //设置业务线与公共参数
+      const bussCode = this.setBusinessCodeSave(this.$xdUniHelper.parseURL().params, this.pageAttr);
+      this.setCommonPagesParams(this.pageAttr, bussCode)
+      new JfbEvent('onJfbShow', {
+        vm: this,
+        data: this.options,
+      });
+
+
+      // #ifdef MP-WEIXIN
+      this.$xdLog.getARMS().pageShow(this.options);
+      wx.onAppRoute(this.handleRouter)
+      // #endif
+
+    }
+    if (this.isFirst) {
+      this.isFirst = false;
+    }
+    this.setPageTitle();
+
+  },
+  onHide() {
+    this.setShareInfo({});
+    this.currentPagesIsShow = false;
+    new JfbEvent('onJfbHide', {
+      vm: this,
+      data: this.options,
+    });
+    this.updateLocation();
+    // #ifdef MP-WEIXIN
+    this.$xdLog.getARMS().pageHide(this.options);
+    wx.offAppRoute(this.handleRouter)
+    // #endif
+    this.setHasPopStatus({popId: null, action: 'close'});
+  },
+  onUnload() {
+    this.setShareInfo({});
+    console.warn('event.onUnload.onJfbUnload');
+    this.currentPagesIsShow = false;
+    new JfbEvent('onJfbUnload', {
+      vm: this,
+      data: this.options,
+    });
+    this.updateLocation();
+    this.setHasPopStatus({popId: null, action: 'close'});
+  },
+  destroyed() {
+    this.updateLocation();
+    this.setShareInfo({});
+    this.setHasPopStatus({popId: null, action: 'close'});
+  },
+  methods: {
+    ...mapMutations(['setLocationInfo', 'setShareInfo']),
+    ...mapActions(['setHasPopStatus']),
+
+    // #ifdef MP-WEIXIN
+    handleRouter(router){
+      if(router.openType === 'navigateBack') {
+        if(this.currentPagesIsShow === false) {
+          this.onJfbSystemBack(router);
+          wx.offAppRoute(this.handleRouter);
+        }
+      }
+      else {
+        //debugger
+      }
+    },
+    // #endif
+
+    handleIcbHeader(){
+      let btn = document.getElementsByClassName('uni-page-head-btn').item(0);
+      let fat = document.getElementsByClassName('uni-page-head-ft').item(0);
+      //非系统导航模式不处理
+      if(!btn) return;
+      const styles = window.getComputedStyle(btn, null);
+      const color = styles.getPropertyValue('color');
+      const display = styles.getPropertyValue('display');
+      if(display === 'block') {
+        fat.innerHTML = '关闭';
+        fat.style.fontSize = '14px';
+        fat.style.color = color;
+        fat.style.marginTop = '-4px';
+        fat.style.marginLeft = '10px'
+      }
+      const handle = ()=>{
+        if(display === 'block') {
+          window.ICBC_SDK.back();
+        }
+      }
+      fat.removeEventListener('click',handle);
+      fat.addEventListener('click',handle, false)
+    },
+
+    /**
+     * @description 页面卸载，隐藏时候触发更新经纬度状态
+     */
+    updateLocation(){
+      let location = storage.get(this.sameCityChangeLocationKey)
+      storage.remove(this.sameCityChangeLocationKey);
+      if(location) {
+        let time = getCacheTime(this);
+        storage.set(this.locationStorageKey,location, time);
+        this.setLocationInfo(location)
+      }
+    },
+    onInitLoad(){
+      let {isCheckAuth, isOnLoad, layoutInfo} = this;
+      if(
+        isCheckAuth
+        && layoutInfo !== null
+        && isOnLoad
+      ) {
+        let nowTime = new Date().getTime();
+        this.$xdLog.setProject('App.init.userTime', {
+          userTime: `${nowTime - this.time}ms`,
+          userStartTime: this.time,
+          endTime: nowTime,
+        });
+
+        new JfbEvent('onJfbLoad', {
+          vm: this,
+          data: this.options,
+        });
+
+        this.$xdRoot.$emit('setLayoutPageBg', null);
+
+        let currentPath = '';
+        // #ifdef MP-WEIXIN
+        currentPath = this.$xdUniHelper.getCurrentPages().path;
+        // #endif
+        // #ifdef H5
+        currentPath = location.href;
+        // #endif
+        //5s上报
+        if ((nowTime - this.time) > 10000) {
+          this.$xdLog.setARMSCustomError('slow.link', `Slow.Link--${nowTime - this.time}ms--${currentPath}`)
+        }
+      }
+
+    },
+
+    getCurrentPagesIsShow(){
+      return this.currentPagesIsShow
+    },
+    /**
+     * @description 框架完成事件
+     * @param layout {object} 框架对象
+     * @return {Object}
+     */
+    handleDone(layout) {
+      this.$xdLog.setProject(`App.layout`, 'App.pages.layout.done',layout);
+      this.layoutInfo = layout;
+      this.onInitLoad();
+
+      // #ifdef H5
+      if (this.$configProject.viewType === 'preview') {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.setIframeHeigth();
+          }, 50)
+        });
+      }
+      // #endif
+    },
+
+    /**
+     * @description 框架节点发生变化事件
+     * @param layout {object} 框架对象
+     * @return {Object}
+     */
+    handleChange(layout) {
+      this.layoutInfo = layout;
+    },
+
+    /**
+     * 业务组件之间通信事件
+     */
+    onCustomEvent(action, data) {
+      if (this.currentPagesIsShow) {
+        console.warn('event.onCustomEvent.onJfbCustomEvent');
+        new JfbEvent('onJfbCustomEvent', {
+          vm: this,
+          data: {action, data, options: this.options},
+        })
+      }
+    },
+
+    onJfbSystemBack(system){
+      console.warn('event.onSystemBack.onJfbBack');
+      new JfbEvent('onJfbSystemBack', {
+        vm: this,
+        data: system
+      })
+    },
+
+    /**
+     * @description 绑定自定义导航时候返回事件方法
+     */
+    back() {
+      console.warn('event.back.onJfbBack');
+      new JfbEvent('onJfbBack', {
+        vm: this,
+        data: this.options
+      })
+    },
+  }
+}
+
+

package/src/mixins/pageMain.js

@@ -0,0 +1,120 @@
+'use strict';
+import {mapActions, mapState, mapMutations} from 'vuex';
+import {
+  AttrToTargetValues,
+  getContainerPropsValue,
+  baseCloneDeep,
+} from "@/utils/xd.base";
+
+export default {
+  data(){
+    return {
+      time: new Date().getTime(),//与页面加载速度有关
+      isOnLoad: false, //是否执行了onload事件
+      options: null, //页面参数
+      pagesParams:'',//页面Json设置参数
+      site_id: null, //当前网站ID
+      layoutInfo: null, //框架数据
+      indexHeight: 0, //预览模式更新Iframe高度有关
+      projectAttr: {}, //项目属性
+      settings: {}, //编译时刻项目配置对象
+
+      //保存计算当前页面使用业务组件列表
+      containers: {
+        topHeight: 0,
+        bottomHeight: 0,
+        footerHeight: 0,
+        tops: [],
+        bottoms: [],
+        bodys: [],
+        footers: [],
+      },
+    }
+  },
+  created(){
+    this.settings = this.$settings;
+    this.site_id = getApp().globalData.$xd.brandInfo.site_id;
+    this.projectAttr = getApp().globalData.$xd.brandInfo;
+  },
+  methods: {
+    ...mapActions(['getPageAttr']),
+    ...mapMutations(['setPagesHeader', 'setPagesPermission']),
+
+
+    /**
+     * @description 获取Containers生产的位置和高度
+     * @param item
+     * @param isTranform 是否需要转化事件 默认：true
+     * @returns {{fixed: *, height: *}}
+     */
+    getFixedKey(item, isTranform = true) {
+      let fixed = 'body';
+      let height = 0;
+      if (isTranform) item['component']['attrs'] = AttrToTargetValues(item['component']['attrs']);
+      item['component']['attrs'].map(it => {
+        if (it['key'] === 'fixed') {
+          fixed = it['value'];
+        }
+        if (it['key'] === 'height') {
+          height = it['value'];
+        }
+      });
+      return {fixed, height};
+    },
+
+    /**
+     * @description 计算top/bottom/footer各自所站高度
+     * @param fixed
+     * @param height
+     * @param oldItem
+     * @param containers
+     * @returns {*}
+     */
+    switchFixed(fixed, height, oldItem, containers ){
+      switch (fixed) {
+        case 'top':
+          containers.tops.push(oldItem);
+          if (!oldItem.hidden) containers.topHeight += height;
+          break;
+        case 'bottom':
+          containers.bottoms.push(oldItem);
+          if (!oldItem.hidden) containers.bottomHeight += height;
+          break;
+        case 'footer':
+          containers.footers.push(oldItem);
+          if (!oldItem.hidden) containers.footerHeight += height;
+          break;
+        default:
+          containers.bodys.push(oldItem);
+      }
+    },
+
+    /**
+     * @description Container数据转化(废弃)
+     * @param containers {Array} 使用业务插件数据
+     * @return {Object}
+     */
+    getContainerGroup(containers) {
+      let temp = {
+        topHeight: 0,
+        bottomHeight: 0,
+        footerHeight: 0,
+        tops: [],
+        bottoms: [],
+        bodys: [],
+        footers: [],
+      };
+      let refs = [];
+      containers.map(item => {
+        item['refreshKey'] = this.$xdUniHelper.randomChar(20);
+        if (!item.hidden) refs.push(item['container_id']);
+        let {fixed, height} = this.getFixedKey(item);
+        this.switchFixed(fixed, height, item, temp);
+      });
+      this.refs = refs;
+      return temp;
+    },
+  }
+}
+
+