jufubao-base 1.0.169-beta1 → 1.0.169-beta11

package/src/mixins/componentsMixins.js

@@ -1,6 +1,10 @@
 'use strict';
 
-import {getContainerFnPropsValue, getContainerPropsValue} from "@/utils/xd.base";
+import {getContainerFnPropsValue, getContainerPropsValue,isWechat} from "@/utils/xd.base";
+import {Base64} from 'js-base64';
+import {mapActions,mapState, mapMutations} from "vuex";
+import helper from "@/utils/helper";
+import store from "@/store/index";
 
 export default {
   props: {
@@ -109,11 +113,55 @@ export default {
       subMainColor: '',
       infoColor: '',
       defaultColor: '',
-      dangerColor: ''
+      dangerColor: '',
+      mainGradient: '',
+      subGradient: '',
+
+      //test
+      posterTest:{
+        "content_id": "KpBbUKdj4aBejwe7Fh1ki",
+        "position_id": "QCk3PmoyQmOWRP1SxnYR3",
+        "partner_id": 0,
+        "site_id": "",
+        "content_name": "测试.",
+        "image_url": "//dummyimage.com/200x200",
+        "redirect_type": "EMP",
+        "redirect_type_name": "无链接",
+        "redirect_data": "",
+        "sort": "",
+        "status": "",
+        "start_time": "",
+        "end_time": "",
+        "op_user_id": "",
+        "created_time": 0,
+        "updated_time": 0
+      }
+    }
+  },
+
+  destroyed() {
+    console.warn('componentsMixins.destroyed.my(timeer|timer)');
+    if (this.timeer && typeof this.timeer === "number") {
+      clearTimeout(this.timeer);
+      console.warn('componentsMixins.destroyed.my.timeer');
+    }
+    if (this.timer && typeof this.timer === "number") {
+      clearTimeout(this.timer);
+      console.warn('componentsMixins.destroyed.my.timer');
     }
+
+    //卸载页面
+    if(typeof this.onJfbUnload === "function") {
+      console.warn('componentsMixins.destroyed.exec.onJfbUnload');
+      this.onJfbUnload()
+    }
+
   },
+
   created(){
-    console.warn(`init.components._uid:${this._uid},vnode.name=${this.$vnode.tag}`);
+    let tag = '';
+    if (this.$vnode && this.$vnode.tag) tag = this.$vnode.tag;
+    this.$xdLog.setProject('App.components.start', `App.components.vnode.name.${tag}`);
 
     //设置插件cid
     if (this.cid) {
@@ -122,9 +170,14 @@ export default {
       this.containerId = this.$xdUniHelper.randomChar(20);
     }
 
+    //保存到vuex
+    console.log('setStyleCommon',this)
+    this.setStyleCommon(this.styles);
+
     //初始化风格
     this.initThemesToData();
 
+
     //#ifdef H5
     //监听用户点击状态显示虚框
     XdBus.addEvent('select', ({containerId}) => {
@@ -152,35 +205,120 @@ export default {
 
   //#ifdef H5
   mounted() {
-    if (this.$configProject.isPreview) {
-      let that = this;
-      function handle() {
-        let className = `${that.cssRoot}__body-mask`;
-        if (document.getElementsByClassName(className).length === 0) {
-          let elx = document.getElementsByClassName(`${that.cssRoot}__body`);
+    let that = this;
+    this.autoHideMask();
+    if (this.$configProject.isPreview && this.selfMask !== true ) {
+      this.$nextTick(()=>{
+        function handle() {
+          let elx = that.$el.getElementsByClassName(`${that.cssRoot}__body`);
           if (elx.length === 0) {
             setTimeout(() => {
               handle()
-            }, 100)
+            }, 50)
           } else {
-            const mask = document.createElement("div");
-            mask.className = 'jfb-mask';
-            mask.style.position = 'absolute';
-            mask.style.left = '0px';
-            mask.style.right = '0px';
-            mask.style.top = '0px';
-            mask.style.bottom = '0px';
-            mask.style.zIndex = 9999;
-            elx.item(0).appendChild(mask);
+            let len = elx.length;
+            for (let i = 0; i < len; i++) {
+              if (!elx.item(i).classList.contains('isGPreview')) {
+                elx.item(i).classList.add("isGPreview");
+              }
+            }
           }
         }
-      }
-      handle()
+        handle();
+      });
+    }
+
+    //模式不显示虚线
+    if(this.$configProject.type === 'test'
+      && this.$configProject.NODE_ENV === 'development'
+      && this.$configProject.viewType === 'pack'
+    ){
+      this.isEditx = false;
     }
+
   },
   // #endif
 
+  computed:{
+    ...mapState({
+      pageNamespace: state=> state.pageBusinessCode,
+    })
+  },
+
+  watch:{
+    active(val){
+      if(this.$configProject.isPreview && val) this.autoHideMask();
+    },
+  },
+
   methods:{
+    ...mapActions(['setXNamespace','setStyleCommon']),
+    ...mapMutations(['setCurrentStyle']),
+
+    /**
+     * @description 自动生成调试模式
+     */
+    autoHideMask(){
+      if(this.$configProject.isPreview && this.hideMask === true){
+        this.$nextTick(()=>{
+          let className = this.$el.classList;
+          if(!className.contains('gHideMask')) {
+            className.add("gHideMask")
+          }
+        })
+      }
+    },
+
+    /**
+     * @description 检查是否同域名
+     * @param url
+     * @param dir {String} 部署目录
+     * @returns {*}
+     */
+    //#ifdef H5
+    getSameSiteAndDomain(url, dir) {
+      let regDir = new RegExp(`^/${dir}/\.*$`);
+      let host = window.location.host;
+      let pages = this.$xdUniHelper.parseURL(url);
+
+      //域名相同并且部署目录相同
+      if (host === pages.host && regDir.test(pages.path)) {
+        return pages.relative;
+      }
+      return url;
+    },
+    // #endif
+
+    setNameSpace(options){
+      this.xnamespace = this.xnamespace || this.pageNamespace;
+      if(!this.xnamespace && !this.$configProject.isPreview){
+        this.$xdAlert({content: '未设置业务编码',type:'error'});
+        throw new Error('请配置业务编码')
+      }
+      this.setXNamespace(this.xnamespace)
+    },
+
+    /**
+     * @description 自动计算列数的宽和间距 （父节点需要设置110%）不兼容微信小程序（废弃）
+     * @param index {number} 当前索引值
+     * @param cell {number} 当前索引值
+     * @param jfbSpacing {number}
+     * @returns {{marginRight: string, overflow: string, width: string, marginTop: string}}
+     */
+    itemStyle(index, cell, jfbSpacing ) {
+      if(this.$xdUniHelper.checkVarType(jfbSpacing) === 'string') jfbSpacing = Number(jfbSpacing);
+      let maxW = 100 / cell;
+      let padding = Math.floor(this.$rpxNum * jfbSpacing + this.$rpxNum * (jfbSpacing / cell))
+      return {
+        marginTop: jfbSpacing + 'rpx',
+        marginRight: (index + 1) % cell === 0 ? '0' : jfbSpacing + 'rpx',
+        width: `calc(${maxW}vw - ${padding}px)`,
+        overflow: 'hidden'
+      };
+    },
+
+
+
     /**
      * @description 获取吸顶样式
      * @param options {Object} 样式参数
@@ -192,15 +330,23 @@ export default {
      * @param options.height 距离底部距离（paddingBottom和height选其一即可）
      * @param options.zIndex
      * @param type {String} 吸顶类型 其值：bottom/top
+     * @param fixed {Boolean} 是否吸顶或者占位
      * @return {String}
      */
-    fixedStyle(options = {}, type = 'bottom') {
+    fixedStyle(options = {}, type = 'bottom', fixed = true) {
       let paddingBottom = options.paddingBottom || options.height || 0;
       if (options.paddingBottom) delete options.paddingBottom;
       if (options.height) delete options.height;
       let obj = Object.assign({}, {
         top: 0, left: 0, right: 0, bottom: 0, zIndex: 100,
       }, options);
+      if (!fixed) {
+        let padding = (this.layoutInfo.bottomHeight + this.layoutInfo.footerHeight + paddingBottom) * this.$rpxNum;
+        let sy = `padding-bottom:calc(${padding}px + constant(safe-area-inset-bottom));`;
+        sy = `${style}; padding-bottom:calc(${padding}px + env(safe-area-inset-bottom));`;
+        return sy;
+      }
+
       let style = 'position: fixed';
       style = `${style};left:${obj.left}rpx`;
       style = `${style};right:${obj.right}rpx`;
@@ -217,6 +363,7 @@ export default {
       return style;
     },
 
+
     /**
      * 检查插件是否加载成功
      */
@@ -226,10 +373,15 @@ export default {
      * @description 业务组件风格map到data中
      */
     initThemesToData() {
+      let current = {};
       Object.keys(this.styles).map(key => {
         let k = key.replace('$', '');
-        if (this[k] !== undefined) this[k] = this.styles[key];
+        if (this[k] !== undefined){
+          this[k] = this.styles[key];
+          current[k] = this.styles[key];
+        }
       });
+      this.setCurrentStyle(helper.cloneDeep(current))
     },
 
     /**
@@ -245,6 +397,7 @@ export default {
      * @description 点击删除操作按钮
      */
     delEdit() {
+      if(this.isReferenceTemplate) return;
       XdBus.send('onDelPackage', {
         containerId: this.containerId,
         componentAtrr: this.componentAtrr,
@@ -300,6 +453,176 @@ export default {
       })
       //#endif
     },
+
+    checkValue(value, dValue = 0){
+      if(value === undefined || value === '' || value === null) return dValue;
+      return Number(value || 0);
+    },
+
+    getXdShadow(defaultObj, newObj){
+      if(newObj.type === 'N' || this.$xdUniHelper.isEmpty(newObj)) return `0 0 0 rgba(0,0,0,0)`;
+      let width = defaultObj.width;
+      let color = defaultObj.color;
+      if(newObj.value !== null) {
+        if(newObj.value.width) width = newObj.value.width;
+        if(newObj.value.color) color  = newObj.value.color
+      }
+      return `0 0 ${width}rpx ${color}`;
+    },
+
+    getXdBorder(defaultObj, newObj){
+      if(newObj.type === 'N' || this.$xdUniHelper.isEmpty(newObj)) return `0`
+      let width = defaultObj.width;
+      let color = defaultObj.color;
+      if(newObj.value !== null) {
+        if(newObj.value.width) width = newObj.value.width
+        if(newObj.value.color) color  = newObj.value.color
+      }
+      return `${width}rpx solid ${color}`;
+    },
+
+    getUrlCallback(path){
+      if(this.inCallbackUrlOrg) {
+        if(path.indexOf('?') === -1) path = `${path}?inCallback=${this.inCallbackUrlOrg}`;
+        else  path = `${path}&inCallback=${this.inCallbackUrlOrg}`;
+      }
+      return path
+    },
+
+    baiduTogcj(bd_lng, bd_lat) {//坐标第转换
+      const x_PI = 3.14159265358979324 * 3000.0 / 180.0;
+      const x = bd_lng - 0.0065;
+      const y = bd_lat - 0.006;
+      const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
+      const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
+      const gg_lng = z * Math.cos(theta);
+      const gg_lat = z * Math.sin(theta);
+      return [gg_lng, gg_lat]
+    },
+
+
+    //#ifdef H5
+    webChatEnvOpenLocation({latitude,longitude,name, address}, cb){
+      store.dispatch('getH5WxAuthorize',{jsApiList: ['openLocation', 'getLocation']})
+        .then(({jwxSDK})=>{
+          let zb = this.baiduTogcj(latitude, longitude)
+          jwxSDK.openLocation({
+            latitude: zb[0],
+            longitude:zb[1],
+            name: name || '我的位置',
+            address: address||'',
+            scale: 15,
+            infoUrl: ''
+          });
+        })
+        .catch(err=>{
+          console.error(err)
+          this.$xdAlert({
+            content:'暂时不支持唤起APP导航功能',
+            time:5000,
+          })
+        })
+    },
+    //#endif
+
+    handleOpenLocation({latitude,longitude, name, address}, cb){
+      //latitude = latitude||39.961521814959795;
+      //longitude = longitude || 116.84499635227222
+
+      if(typeof latitude === 'string') latitude = Number(latitude);
+      if(typeof longitude === 'string') longitude = Number(longitude);
+
+      //#ifdef MP-WEIXIN
+      let zb = this.baiduTogcj(latitude, longitude);
+      uni.openLocation({
+        latitude: zb[0],
+        longitude: zb[1],
+        name: name || '我的位置',
+        scale: 15,
+        address: address ||'',
+        success: function () {
+          if(typeof cb === 'function') {
+            cb();
+          }
+          console.log('success');
+        }
+      });
+      //#endif
+      //#ifdef H5
+      if(isWechat()) this.webChatEnvOpenLocation({latitude,longitude, name, address}, cb);
+      else {
+        let params = '';
+        params = `${params}&location=${latitude},${longitude}`;
+        params = `${params}&title=${encodeURIComponent(name)}`;
+        params = `${params}&content=${encodeURIComponent(address)}&output=html&zoom=15`;
+        window.location.href = `http://api.map.baidu.com/marker?${params}`;
+      }
+      //#endif
+    },
+
+    getUrlHasSpStr(pathDir){
+      if(pathDir.indexOf('@site_domain@/') === 0) {
+        return pathDir.replace('@site_domain@/','').split('/')[0]
+      }
+      return ''
+    },
+
+    /**
+     * @description 过滤不可以用
+     * 当前项目未H5时,过滤所有小程序应用
+     * 当前项目未小程序时,过滤所有非当前小程序应用
+     * 站外地址直接返回
+     * 站内地址未选值直接返回
+     * 预览模式全过
+     * @param url {object}
+     */
+    checkUrlIsValid(url){
+      if(!url) return null;
+      try {
+
+      }catch (e){
+        return null;
+      }
+      // let content = list.filter(item=>{
+      //   //预览模式
+      //   if(this.$configProject.isPreview) return true;
+      //
+      //   //非内部应用
+      //   if(item.redirect_type !== 'INN') return true
+      //
+      //   //没有配置链接
+      //   if(!item.redirect_data) return true;
+      //
+      //   //内部应用
+      //   else {
+      //     let redirect_data;
+      //     try {
+      //       redirect_data = JSON.parse(item.redirect_data);
+      //       if(!item['app_type']) item['app_type']= 'h5';
+      //
+      //       //#ifdef H5
+      //       return item['app_type'] !== 'wxmp';
+      //       //#endif
+      //
+      //       //#ifdef MP-WEIXIN
+      //       let actDir = this.$parent.projectAttr.deploy_dir;
+      //       let dir = this.getPathDir(redirect_data.page);
+      //       if(item['app_type'] === 'wxmp'){
+      //         return actDir === dir;
+      //       }
+      //       else if(item['app_type'] === 'h5') return true;
+      //       else return true
+      //       //#endif
+      //     }
+      //     catch (e) {
+      //       return true
+      //     }
+      //   }
+      // });
+      // console.warn(`PostersList:${JSON.stringify(content.map(item=>`${item.app_type}:${item.content_name}:${item.redirect_data}`), null,2)}`)
+      // return content;
+
+    },
   }
 }