jufubao-forms 1.0.0-beta1

package/src/mixins/pageUitls.js

@@ -0,0 +1,738 @@
+'use strict';
+
+import { mapState, mapActions} from 'vuex';
+import {JfbEvent} from "@/utils/xd.event";
+import {Base64} from 'js-base64'
+import {parsePath}  from "@/utils/linkUrl";
+
+import {
+  AttrToTargetValues,
+  getContainerPropsValue,
+  baseCloneDeep,
+} from "@/utils/xd.base";
+import getServiceUrl from "@/common/getServiceUrl";
+import {isGiftPreview} from "@/common/CheckGiftIsPreview";
+
+export default {
+  computed: {
+    ...mapState(['siteInfo', 'jfbAuthorize', 'webThemes', 'xnamespace', 'brandInfo']),
+  },
+  watch: {
+    webThemes: {
+      immediate: true,
+      handler(value) {
+        if (value) this.themesList = value
+      },
+    }
+  },
+  data(){
+    return {
+      themesList: {}, //保存所有业务组件使用风格列表
+      titleDefaultCount: 0, //设置标题时候计数器，最大查找uni-page-head__title样式名称次数
+      pageHeadersInfo:null, //页面headers信息
+    }
+  },
+  methods: {
+    ...mapActions(['loginCardMock','setPagesBusinessCode','setPagesParams']),
+
+    getPropsParse(data){
+      if(typeof data === 'string') {
+        if(data === '') return {};
+        try{
+          return JSON.parse(data);
+        }
+        catch (e){
+          return  {}
+        }
+      }
+      return {}
+    },
+
+    transformToData(containers){
+      return containers.map(item=>{
+        let props = item.component.props;
+        const style = this.getPropsParse(props.style);
+        const content = this.getPropsParse(props.content);
+        const advanced = this.getPropsParse(props.advanced);
+        const refContent = this.getPropsParse(props['ref_content']);
+        const propsContent = Object.assign({},style,advanced,content,refContent);
+        item.component.props['content'] = JSON.stringify(propsContent);
+        return item;
+      })
+    },
+
+    /**
+     * @description Container数据转化
+     * @param containers {Array} 使用业务插件数据
+     * @return {Object}
+     */
+    getContainerGroup(containers) {
+      //转换数据格式
+      containers = this.transformToData(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 = 'body';
+        let height = 0;
+        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'];
+          }
+        });
+        switch (fixed) {
+          case 'top':
+            temp.tops.push(item);
+            if (!item.hidden) temp.topHeight += height;
+            break;
+          case 'bottom':
+            temp.bottoms.push(item);
+            if (!item.hidden) temp.bottomHeight += height;
+            break;
+          case 'footer':
+            temp.footers.push(item);
+            if (!item.hidden) temp.footerHeight += height;
+            break;
+          default:
+            temp.bodys.push(item);
+        }
+      });
+      this.refs = refs;
+      return temp;
+    },
+
+    setPageTitle(){
+      // #ifdef MP-WEIXIN
+      uni.setNavigationBarTitle({
+        title: this.pageAttr.title
+      });
+
+      // #endif
+
+      // #ifdef H5
+      if (this.$configProject.type === 'food') {
+        let xd = getApp().globalData.$xd;
+        if (xd && xd.brandInfo && xd.brandInfo.name) {
+          document.title = xd.brandInfo.name;
+          this.setH5Title(this.pageAttr.title);
+        }
+      }
+      else {
+        if (this.projectAttr['site_name'] || this.projectAttr['seo_title']) {
+          document.title = this.projectAttr['seo_title'] || this.projectAttr['site_name'];
+        }
+        this.setH5Title(this.pageAttr.title);
+      }
+      // #endif
+    },
+
+    getMockCard(){
+      let pagae = this.$xdUniHelper.parseURL();
+      let card = pagae.params['x-test'];
+      if (card) {
+        let reg = /^(card_)[a-zA-Z0-9\-_]{8,}$/;
+        if (reg.test(card)) {
+          return card.split('_')[1];
+        }
+      }
+      return ''
+    },
+
+    getSpPath(dir , path ){
+      let reg = /@site_domain@/;
+      if(!reg.test(path)) return `/${dir}${path}`;
+      else return  path.replace(reg, '');
+    },
+
+    /**
+     * @description 只处理H5端（小程序端无法控制链接参数）
+     * @return {boolean}
+     */
+    checkMockCard(){
+      let login_entry =  this.projectAttr.login_entry || this.$configProject.login_entry;
+      let card_entry = this.projectAttr.card_entry || this.$configProject.card_entry;
+      // #ifdef H5
+      let pages = this.$xdUniHelper.parseURL();
+      let userLogin = this.getSpPath(this.projectAttr.deploy_dir, login_entry);
+      let cardLogin = this.getSpPath(this.projectAttr.deploy_dir, card_entry);
+
+      //登陆页面和卡登陆页面不启用
+      if(pages.path === userLogin || pages.path === cardLogin) {
+        return false
+      }
+
+      let card = pages.params['x-test'];
+      if(card) {
+        let reg = /^(card_)[a-zA-Z0-9\-_]+$/;
+        if(reg.test(card)) return true
+      }
+      // #endif
+      return false;
+    },
+
+    setBusinessCodeSave(options, pages){
+      let business_code = '';
+      let getType = ''
+
+      //地址栏中参数传递
+      if (!business_code && options['xnamespace']){
+        getType = '地址栏中参数传递业务线'
+        business_code = options['xnamespace'];
+      }
+
+      //页面中获取参数
+      if (!business_code && pages['is_business_code']){
+        business_code = pages['is_business_code'];
+        getType = '页面pages.json文件中获取业务线'
+      }
+
+      //文件目录中获取
+      //todo
+      //getType = '页面JSON文件中获取业务线'
+
+      //项目文件中获取
+      if(!business_code && (this.brandInfo && this.brandInfo.business_code)){
+        getType = '项目应用project.json文件中获取业务线'
+        business_code = this.brandInfo.business_code;
+      }
+
+      //地址栏中获取特定参数
+      if(!business_code && options['x-common']) {
+        let decodeParams = Base64.decode(options['x-common']);
+        try {
+          let params = JSON.parse(decodeParams);
+          if (params.business_code){
+            business_code = params.business_code;
+            getType = '地址栏中获取全局特殊参数（x-common）中获取业务线'
+          }
+        } catch (e) {
+
+        }
+      }
+
+      this.setPagesBusinessCode(business_code);
+      console.warn(`获取业务线方式：${getType}`)
+      return business_code;
+    },
+
+    /**
+     * @description 检查地址是否为登陆页面
+     * @param type
+     * @returns {boolean}
+     */
+    checkPathIsLoginAndOrCard(type = 'card'){
+      //包含: /$dir/xxx/xxx/xxx或者/pages/index/index
+      let pages = this.$xdUniHelper.parseURL();
+      let login_entry =  this.projectAttr.login_entry || this.$configProject.login_entry;
+      let card_entry = this.projectAttr.card_entry || this.$configProject.card_entry;
+
+      // #ifdef H5
+      let userLogin = this.getSpPath(this.projectAttr.deploy_dir, login_entry);
+      let cardLogin = this.getSpPath(this.projectAttr.deploy_dir,card_entry);
+      if (type === 'card')  return pages.path === cardLogin;
+      if (type === 'login')  return pages.path === userLogin;
+      // #endif
+      // #ifdef MP-WEIXIN
+      let loginObj = parsePath(login_entry);
+      let cardObj = parsePath(card_entry);
+      if (type === 'card')  return cardObj.isSameApp && pages.path === cardObj.url;
+      if (type === 'login')  return loginObj.isSameApp && pages.path === loginObj.url;
+      // #endif
+
+    },
+
+    /**
+     * @description 当用户登陆当前卡不支持当前业务线时候
+     */
+    toCardIndex(){
+      let page = this.$xdUniHelper.parseURL();
+      let {inCallback} = page.params;
+      if(inCallback) {
+        try{
+          inCallback = Base64.decode(inCallback);
+          let regIndex = /^.*(toIndex)$/;
+          if(regIndex.test(inCallback)) {
+            this.$xdUniHelper.redirectTo({url: this.$settings.index}, false, true)
+          }
+        }catch (e) {
+
+        }
+      }
+
+    },
+
+    setContainersLogs(containers){
+      if(containers && containers.length > 0) {
+        let log = containers.map(item=>{
+          return item.component['component_name']
+        });
+        this.$xdLog.setProject('App.containers', log.join('_'));
+      }
+      else this.$xdLog.setProject('App.containers', 'no.containers');
+    },
+
+    getUID(token){
+      let arr = token.split('.');
+      try {
+        let uid = JSON.parse(Base64.decode(arr[1]));
+        return uid['csrf_user_id'];
+      }catch (e) {
+        return null;
+      }
+    },
+
+    /**
+     * @description 设置页面公共参数
+     * @param pages
+     * @param bussCode
+     */
+    setCommonPagesParams(pages, bussCode){
+      let isPagesUseBussCode = false;
+      if(pages.features &&  this.$xdUniHelper.checkVarType(pages.features) === 'array') {
+        pages.features.map(item=>{
+          if(item === 'business_limit') isPagesUseBussCode = true;
+        })
+      }
+
+      let folderCustomLoginEntry = '';
+      this.setPagesParams({
+        pagesParams: {
+          xnamespace:bussCode,
+          custom_login_entry: pages['is_login_entry'] || folderCustomLoginEntry || '',
+          isPagesUseBussCode: isPagesUseBussCode,
+        }
+      });
+    },
+
+    init(options){
+      this.settings = this.$settings;
+      this.site_id = this.brandInfo.site_id;
+      this.projectAttr = this.brandInfo;
+
+      //第一次上班日志
+      this.$xdLog.setProject('App.pages.init', 'pages.init');
+
+      //预览模式设置页面ID
+      if (this.$configProject.isPreview === true) {
+        let {page_id} = this.$xdUniHelper.parseURL().params;
+        if (!page_id) throw new Error('请设置页面ID');
+        this.pageAttr['page_id'] = page_id;
+      }
+
+
+      //当用户登陆当前卡不支持当前业务线时候（选择去换业务线）
+      this.toCardIndex();
+
+      //获取用户信息
+      this.getPageAttr(this.page_id)
+        .then(async (res) => {
+
+          //configs.template_type
+          // 模板类型 1=克隆 2=软链 3=原创模板
+          if(res.configs['template_type']) {
+            this.isReferenceTemplate = res.configs['template_type'] === 2
+          }
+
+          //设置页面信息
+          this.pageAttr = {...this.pageAttr, ...this.parsePageConfig(res)};
+          if (this.pageAttr['config']) this.pageAttr['configs'] = this.pageAttr['config'];
+
+          //预览模式设置topBar属性
+          if (this.$configProject.isPreview) {
+            this.setPreviewSetPageConfig(this.pageAttr.is_bar_custom === 'custom');
+          } else this.setPageConfig(this.pageAttr);
+
+          //计算页面插件信息
+          this.setContainersLogs(res['containers'])
+          this.containers = this.getContainerGroup(res['containers']);
+
+          //检查是否为成功页面
+          this.isSpecialPages = this.checkSpecialPages(res['containers']);
+
+          //保存页面headers变量
+          if (res['headers']) {
+            this.setPagesHeader(res['headers']);
+            this.pageHeadersInfo = this.$xdUniHelper.cloneDeep(res['headers'])
+          }
+          else{
+            this.setPagesHeader({});
+            this.pageHeadersInfo = {};
+          }
+
+          //保存页面权限
+          if (res['permission']) this.setPagesPermission(res['permission']);
+          else this.setPagesPermission({can_card: false, can_sign: false});
+          this.loadStatus = true;
+
+          //设置业务线
+          const bussCode = this.setBusinessCodeSave(this.$xdUniHelper.parseURL().params, this.pageAttr);
+
+          //保存页面参数和地址参数
+          this.setCommonPagesParams(this.pageAttr, bussCode)
+          this.$xdLog.setProject('App.user.card.start', 'pages.check.userAndCard.start');
+
+          //礼包预览使用免登陆模式(H5模式)
+          // #ifdef H5
+          if(isGiftPreview()){
+            this.handleDoneLoad()
+            return;
+          }
+          // #endif
+
+          //检查用户是否登录
+          if (!await this.checkLoginAndCardLogin(res.permission['can_sign'])) {
+            return;
+          }
+
+          //登陆测试卡
+          if(this.checkMockCard()) {
+            if(this.getMockCard()){
+              let mock = await this.loginCardMock({card_number: this.getMockCard()});
+              if (!mock.status) {
+                this.$xdAlert({
+                  content: (mock.message && mock.message.data && mock.message.data.message) ?
+                    mock.message.data.message:
+                    '当前登陆的卡券或服务不可用，请重试！',
+                  width: '60vw',
+                  time: 3000
+                })
+                return
+              }
+            }
+            else{
+              this.$xdAlert({
+                content: '请输入正确券号，请重试！',
+                width: '60vw',
+                time: 3000
+              })
+              return
+            }
+          }
+
+          //正常卡登陆
+          else{
+            //检查用户卡是否登录
+            if (!await this.checkLoginAndCardLogin(res.permission['can_card'], 'card')) {
+              return;
+            }
+          }
+
+          this.$xdLog.setProject('App.user.card.done', 'pages.check.userAndCard.done');
+          if(this.jfbAuthorize.getToken('user') !== null) {
+            this.$xdLog.setConfig(this.getUID(this.jfbAuthorize.getToken('user')))
+          }
+
+          this.handleDoneLoad()
+
+        })
+        .catch(err=>{
+          console.error(err)
+          this.$xdLog.catch(err)
+        });
+    },
+
+    handleDoneLoad(){
+
+      //用户状态已经检查完成
+      this.isCheckAuth = true;
+
+
+      //设置标题
+      this.setPageTitle();
+      this.isCheckAuth = true;
+
+      //执行onload事件
+      this.$xdLog.setProject(`App.getPages`, 'App.getPages.done');
+      this.onInitLoad();
+    },
+
+    checkSpecialPages(containers=[]){
+      let flag = false;
+      let packArrays = ['JfbBaseSuccess'];
+      if(containers instanceof Array) {
+        containers.map(item=>{
+          if(packArrays.includes(item.component['component_name'])) {
+            flag = true;
+          }
+        })
+      }
+      return flag
+    },
+
+    /**
+     * @description 获取页面信息
+     * @returns {{pageAttr: *, projectAttr: *, pagePackConfig: *}}
+     */
+    getPageAllInfo(){
+      return {
+        pageAttr: this.pageAttr,
+        projectAttr: this.projectAttr,
+        pagePackConfig: this.pagePackConfig
+      }
+    },
+
+    /**
+     * @description 预览模式设置页面属性
+     * @param type {Object} 导航模式 （false|true）false=>系统 true => 自定义
+     */
+    setPreviewSetPageConfig(type) {
+      if (type) {
+        this.pageAttr['showBar'] = this.pageAttr['is_bar'] || false;
+        this.pageAttr['backgroundImage'] = this.pageAttr.configs['background_image'] || 'none';
+        this.pageAttr['showBack'] = this.pageAttr['is_back'] || false;
+        this.pageAttr['isUseBgImage'] = !(this.pageAttr['is_use_bar_show_bg'] || false);
+      } else {
+        this.pageAttr['showBar'] = true;
+        this.pageAttr['backgroundImage'] = this.pageAttr.configs['background_image'] || 'none';
+        this.pageAttr.isUseBgImage = false;
+        this.pageAttr.showBack = false;
+      }
+      this.pageAttr['navigationStyleIsCustom'] = type;
+
+      //导航颜色
+      if(!type) this.pageAttr['barColor'] = this.pageAttr['is_bar_default_tc'] || this.$configProject.extras['top_bar_text_color'] || 'black';
+      else this.pageAttr['barColor'] = this.pageAttr['is_bar_custom_tc'] || this.$configProject.extras['top_bar_text_color'] || 'black';
+      this.pageAttr['background'] = this.pageAttr.configs['background_color'] || this.$configProject.extras.bgc || 'none';
+      this.pageAttr['barBgColor'] = '';
+
+
+      //h5使用渐变色
+      let templateBgcGradient = '';
+      let pageBgcGradient = '';
+
+
+      //#ifdef H5
+      if(type) {
+        if (this.$configProject.extras['bgc_gradient']) {
+          templateBgcGradient = this.$configProject.extras['bgc_gradient']
+        }
+        if (this.pageAttr['is_bar_bgc_gradient']) {
+          pageBgcGradient = this.pageAttr['is_bar_bgc_gradient']
+        }
+      }
+      //#endif
+
+      this.pageAttr['barBackground'] = templateBgcGradient || pageBgcGradient ||
+        this.pageAttr.is_bar_bgc || this.$configProject.extras.top_bar_color
+        || '#f8f8f8';
+
+    },
+
+    /**
+     * @description 解析页面configs数据
+     * @param res {Object} 页面数据
+     */
+    parsePageConfig(res) {
+      if (res.configs.background_image) res.configs.background_image = getServiceUrl(res.configs.background_image);
+      if (res.configs.parameters &&
+        this.$xdUniHelper.checkVarType(res.configs.parameters) === 'array'
+      ) {
+        res.configs.parameters = AttrToTargetValues(res.configs['parameters']);
+        res.configs.parameters.map(item => {
+          res[item['key']] = item.value
+        })
+      } else res.configs.parameters = {};
+      return res;
+    },
+
+    /**
+     * @description 设置标题
+     */
+
+    setH5Title(title) {
+      if (this.titleDefaultCount > 20) return;
+      let titleElx = document.getElementsByClassName('uni-page-head__title').item(0);
+      if (titleElx) {
+        titleElx.innerHTML = title;
+      } else setTimeout(() => {
+        this.titleDefaultCount++;
+        this.setH5Title(title);
+      }, 50);
+    },
+
+    /**
+     * @description 获取站点信息
+     */
+    getSiteAttr() {
+      return this.siteInfo;
+    },
+
+    /**
+     * @description 检查是否登陆
+     * @param permission {Boolean} 是否检查登陆
+     * @param type {String} 检查类型 login=用户登陆 card=>正常用户卡登陆 card_mock=>自动卡登陆
+     * @param isAutoJump {Boolean} 是否启动自动跳转到登陆或者卡登陆页面
+     */
+    checkLoginAndCardLogin(permission, type = 'login', isAutoJump = true) {
+      return new Promise((resolve) => {
+
+        //检查用户是否已经登录
+        if (type === 'login') {
+          if (permission) {
+
+            //status=true 免登或者已登陆 status=false 未登陆
+            this.jfbAuthorize.checkUserLogin(permission, this, isAutoJump)
+              .then(status => {
+                resolve(status)
+              })
+              .catch(status => {
+                console.error(status)
+                resolve(false)
+              });
+          }
+
+          //用户免登陆
+          else resolve(true)
+        }
+
+        //检查用户是否已经登录消费卡
+        if (type === 'card') {
+          if (permission) {
+
+            //已登陆卡
+            if (this.jfbAuthorize.checkCardLogin(permission, this, isAutoJump)) {
+              resolve(true)
+            }
+
+            //未登陆卡
+            else resolve(false)
+          }
+
+          //免登陆卡
+          else resolve(true)
+        }
+
+        //自动卡登陆
+        if (type === 'card_mock') {
+          if (this.jfbAuthorize.checkCardLogin(permission, this, false)) {
+            resolve(true)
+          }
+
+          //未登陆卡
+          else resolve(false)
+        }
+
+      })
+    },
+
+
+    /**
+     * @description 获取业务插件风格配置
+     * @param appid {String} 业务插件所在插件应用id
+     */
+    getStyles(appid) {
+      function getGradient(data){
+        try{
+          let {list,deg} = JSON.parse(data);
+          if (list.length === 0) return '';
+          if (list.length === 1) return list[0].color;
+          let color = list.map(item => {
+            return `${item.color} ${item.percentage}%`;
+          });
+          return `linear-gradient(${deg}deg,${color.join(',')})`;
+        }
+        catch (e) {
+          return ''
+        }
+      }
+
+      let theme = {};
+      (this.themesList[appid] || this.$webSetting.defaultTheme).map(item => {
+        if(item['key'] === '$mainGradient' || item['key'] === '$subGradient' ) {
+          theme[item['key']] = getGradient(item.value)
+        }else{
+          theme[item['key']] = item.value;
+        }
+      });
+
+      //设置默认值
+      if (!theme['$mainGradient']) theme['$mainGradient'] = theme['$mainColor'];
+      if (!theme['$subGradient']) theme['$subGradient'] = theme['$subMainColor'] || theme['$mainColor'];
+
+      return theme;
+    },
+
+    /**
+     * @description
+     * @param page {Object} 页面对象
+     */
+    setPageConfig(page = {}) {
+      const handle = (data, key) => {
+        if (this.$xdUniHelper.isEmpty(data)) return null;
+        let temp = {};
+        data.map(item => {
+          temp[item['key']] = item['value'];
+        });
+
+        if (temp[key] !== undefined) return temp[key];
+        else return null;
+      };
+
+      let pageTemp = {};
+      const configs = page['configs'];
+      let parameters = {};
+      if (configs['parameters']) parameters = configs['parameters'];
+
+      //页面名称
+      if (page['title']) pageTemp['title'] = page['title'];
+
+      //是否显示返回按钮
+      if (handle(parameters, "is_back") !== null) pageTemp['showBack'] = handle(parameters, "is_back");
+
+      //背景是否仅仅顶部导航显示
+      if (handle(parameters, "is_use_bar_show_bg") !== null) pageTemp['isUseBgImage'] = !handle(parameters, "is_use_bar_show_bg");
+
+      //是否显示顶部导航
+      if (handle(parameters, "is_bar") !== null) pageTemp['showBar'] = handle(parameters, "is_bar");
+
+      //背景图片
+      if (configs['background_image']) {
+        pageTemp['backgroundImage'] = getServiceUrl(configs['background_image']);
+      }
+
+      //背景颜色
+      if (configs['background_color']) pageTemp['background'] = configs['background_color'];
+
+      //非自定义模式直接隐藏自定义topBar
+      if (this.pagePackConfig.navigationStyle === 'default') {
+        pageTemp['showBar'] = false
+      }
+      this.pageAttr = Object.assign({}, this.$xdUniHelper.cloneDeep(this.pageAttr), page, pageTemp);
+
+      //设置自定义导航导航背景色
+      if(this.pageAttr['is_bar_custom'] === 'custom') {
+        let templateBgcGradient = '', pageBgcGradient='';
+
+        //#ifdef H5
+        if (this.$configProject.extras['bgc_gradient']) {
+          templateBgcGradient = this.$configProject.extras['bgc_gradient']
+        }
+        if (this.pageAttr['is_bar_bgc_gradient']) {
+          pageBgcGradient = this.pageAttr['is_bar_bgc_gradient']
+        }
+        //#endif
+        this.pageAttr['barBackground'] = templateBgcGradient || pageBgcGradient
+          ||  this.pageAttr.is_bar_bgc || this.$configProject.extras.top_bar_color
+          || '#f8f8f8';
+        this.pageAttr['barColor'] = this.pageAttr['is_bar_custom_tc'] || this.$configProject.extras['top_bar_text_color'] || 'black';
+      }
+      this.pageAttr['navigationStyleIsCustom'] = this.pageAttr['is_bar_custom'] === 'custom';
+    },
+
+  }
+}
+
+