jufubao-base 1.0.290-beta2 → 1.0.290

package/src/components/CusVideo/CusVideo.vue

@@ -0,0 +1,170 @@
+<template>
+  <view class="video-box">
+    <view class="thumb" :class="{noImageUrl: !imageUrl}" v-if="!playStatus">
+      <image :src="imageUrl" v-if="imageUrl" />
+      <view v-if="videoUrl" @click="handlePlay()">
+        <xd-font-icon
+          :icon="iconFont"
+          size="100"
+          color="#fff"
+        ></xd-font-icon>
+      </view>
+    </view>
+    <view
+      class="video"
+      :style="{borderRadius: radius + 'rpx'}"
+      v-else
+    >
+      <video
+        v-if="videoUrl"
+        :src="videoUrl"
+        :autoplay="autoplay === 'Y'"
+        @ended="handleEnd()"
+        @error="handleError"
+      ></video>
+    </view>
+  </view>
+</template>
+
+<script>
+ import getServiceUrl from '@/common/getServiceUrl'
+ import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  export default {
+    name:'CusVideo',
+    components:{
+      XdFontIcon
+    },
+    props:{
+      margin:{
+        type: Object,
+        default(){
+          return {}
+        }
+      },
+      poster:{
+        type:Object,
+        required: true
+      },
+      radius:{
+        type: String|Number,
+        default: 0
+      },
+      video:{
+        type:Object,
+        required: true
+      },
+    },
+    data(){
+      return {
+        isPreview: false,
+
+        //play
+        imageUrl: '',
+        videoUrl: '',
+        playStatus: false,
+        autoplay: 'N',
+      }
+    },
+    computed: {
+      iconFont(){
+        if(this.autoplay === 'N') return 'iconplayright'
+        if(this.autoplay === 'E') return 'iconshibai';
+        if(this.autoplay === 'R') return 'iconplayreplay';
+      },
+    },
+    watch:{
+      poster(){
+        this.init();
+      }
+    },
+    created() {
+      this.isPreview = this.$configProject.isPreview;
+      this.init();
+    },
+    methods:{
+      init(){
+        if(this.poster.size) {
+          this.width = Number(this.poster.size.width);
+          this.height = Number(this.poster.size.height);
+        }
+
+        let {image_url, thumb} = this.video;
+        if(image_url) this.videoUrl = getServiceUrl(image_url);
+        if(thumb) this.imageUrl = getServiceUrl(thumb);
+      },
+      handlePlay(){
+        if(this.autoplay === 'E') return;
+        this.playStatus = !this.playStatus;
+        this.autoplay = "Y";
+      },
+
+      handleEnd(){
+        setTimeout(()=>{
+          this.playStatus = !this.playStatus;
+          this.autoplay = "R";
+        }, 1000)
+      },
+
+      handleError(){
+        this.$xdConfirm({
+          title: '温馨提示',
+          content:'当前视频资源无法播放',
+          cancel: false,
+          confirmText:'我知道了',
+          zIndex:10000,
+          success:()=>{
+            this.playStatus = !this.playStatus;
+            this.autoplay = "R";
+          }
+        })
+
+      }
+    }
+  }
+</script>
+
+
+
+<style scoped lang="less">
+.video-box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  view.noImageUrl {
+    background: rgba(0,0,0,.6);
+  }
+  view.thumb {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    & > view {
+      width: 120rpx;
+      height: 120rpx;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -60rpx;
+      margin-left:-60rpx;
+    }
+
+    & > image {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  view.video {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+
+    & video {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+</style>

package/src/components/JfbBaseFooter/Attr.js

@@ -1,163 +1,18 @@
 'use strict';
-import ICONS from '@/ICONS'
+
+import style from "./cusAttr/style";
+import advanced from "./cusAttr/advanced";
+import content from "./cusAttr/content";
 
 export default {
   style: [],
-  advanced: [],
-  content:(data)=>{
-    let footerSettingImage = [];
-    let footerSetting = [];
-    if(data['footerSettingImage'] && data['footerSettingImage'].length > 0 ) {
-      footerSettingImage = data['footerSettingImage'];
-    }
-    if(data['footer-setting'] && data['footer-setting'].length > 0){
-      footerSetting = data['footer-setting'];
-      footerSetting.map((item,index)=>{
-        if(!footerSettingImage[index]) footerSettingImage[index] = {};
-        footerSettingImage[index] = Object.assign({},JSON.parse(JSON.stringify(item)),footerSettingImage[index])
-      })
-    }
+  content: (data, gValue, gColor, oldData={}) => {
     return [
-      {
-        label: '',
-        ele: 'slot',
-        slot: 'is_reference_title',
-        groupKey: 'advanced',
-      },
-      {
-        label: '背景图设置:',
-        ele: 'xd-upload',
-        valueKey: 'backgroundImage',
-        groupKey:'content',
-        value: data.backgroundImage || {},
-        defaultValue: data.backgroundImage || null,
-        slot: true,
-        oneWidth: 375,
-        oneHeight: 55,
-        elinputClassName: 'input40',
-        tipsformet: '上传文件格式：@imageType@，不超过@size@MB。建议尺寸：<span style="color:red">750*110</span>像素',
-        type: ['jpg', 'png', 'jpeg'],
-        styleType: 'one',
-        uploadType: 'aliyun',
-        size: .5,
-        action: 'action',
-        sort: true,
-        maxlen: 1,
-      },
-      {
-        label: '背景颜色:',
-        ele: 'xd-color',
-        valueKey: 'bgColor',
-        groupKey:'content',
-        value: data['bgColor'] || '',
-        placeholder: '请选择背景颜色',
-        setting: {
-          isAlpha: false
-        },
-        classNmae: 'input80',
-      },
-      {
-        label: '边框颜色:',
-        ele: 'xd-color',
-        valueKey: 'borderColor',
-        groupKey:'content',
-        value: data['borderColor'] || '',
-        placeholder: '请选择边框颜色',
-        setting: {
-          isAlpha: false
-        },
-        classNmae: 'input80',
-      },
-      {
-        label: '菜单文字颜色:',
-        ele: 'xd-color',
-        valueKey: 'color',
-        groupKey:'content',
-        value: data['color'] || '',
-        setting: {
-          isAlpha: false
-        },
-        placeholder: '请选择菜单文字颜色',
-        classNmae: 'input80',
-      },
-      {
-        label: '菜单文字选中颜色:',
-        ele: 'xd-color',
-        valueKey: 'selectedColor',
-        groupKey:'content',
-        setting: {
-          isAlpha: false
-        },
-        value:data['selectedColor'] || '',
-        placeholder: '请选择菜单文字选中颜色',
-        classNmae: 'input80',
-      },
-      footerSetting.length > 0 && {
-        label: '菜单图片配置:',
-        ele: 'xd-footer-setting',
-        valueKey: 'footerSettingImage',
-        groupKey:'content',
-        value: footerSettingImage,
-        setting: {
-          router: XdBus.getParentApi('getPagesTree'),
-          hideAdd: true,
-          showField: {
-            path: false,
-            icon: false,
-            notice: false,
-            image: true,
-            actImage: true
-          }
-        },
-        handleCustom({action,data}){
-          if(action === 'number') {
-            XdBus.getParentApi('getOptionsNoticeNumber')()
-              .then(res => {
-                data.cb(res.list)
-              })
-              .catch();
-          }
-        },
-      },
-
-      {
-        label: '菜单配置:',
-        ele: 'xd-footer-setting',
-        valueKey: 'footer-setting',
-        groupKey:'advanced',
-        value: footerSetting,
-        setting: {
-          router: XdBus.getParentApi('getPagesTree'),
-          icons:ICONS,
-          showField: {
-            path: true,
-            icon: true,
-            notice: true,
-          }
-        },
-        handleCustom({action,data}){
-          console.log(`handleCustom.${action}`, data);
-          if(action === 'number') {
-            XdBus.getParentApi('getOptionsNoticeNumber')()
-              .then(res => {
-                data.cb(res.list)
-              })
-              .catch();
-          }
-        },
-        inline: false,
-        notice: '设置底部菜单的链接地址1、标题(最多<sapn style="color: red">五个汉字</sapn>)、ICON图标（<a href="https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.db775f1f3&manage_type=myprojects&projectId=3378319&keyword=&project_type=&page=" style="color: blue" target="_blank">ICONFONT库</a>）、ICON大小（单位：<sapn style="color: red">像素</sapn>）和是否有消息数量显示（无数量显示可以不填写）',
-        rules: [
-          {required: true, message: '请添加内容', trigger: 'change'},
-        ],
-      },
-      {
-        label: '',
-        ele: 'slot',
-        slot: 'is_reference',
-        groupKey: 'advanced',
-      },
-    ].filter(i=>i);
+      ...content(data, gValue, gColor, oldData),
+      ...style(data, gValue, gColor, oldData),
+      ...advanced(data, gValue, gColor,oldData ),
+    ].filter(i => i)
   },
+  advanced: [],
 };
 

package/src/components/JfbBaseFooter/JfbBaseFooter.vue

@@ -23,7 +23,7 @@
           style="height:100%"
           v-if="list !== null"
           :height="height"
-          :tabbar="list"
+          :tab-bar="list"
           :view="view"
           :styles="styles"
           :key="footerBarKey"
@@ -36,7 +36,7 @@
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import XdFooterBar from "@/components/XdFooterBar/XdFooterBar";
+  import XdFooterBar from "./XdFooterBar";
   import { jfbRootExec, jfbRootFnExec } from "@/utils/xd.event";
   import JfbBaseFooterMixin from "./JfbBaseFooterMixin";
   import componentsMixins from "@/mixins/componentsMixins";
@@ -44,7 +44,8 @@
   import {getNoUrl} from "@/utils/nourl";
   import {
     getContainerPropsValue,
-    getComponentAttr
+    getComponentAttr,
+    gCPVal
   } from "@/utils/xd.base";
   import getServiceUrl from "@/common/getServiceUrl";
 
@@ -65,6 +66,7 @@
           backgroundSize: '100% 100%',
           backgroundRepeat: 'no-repeat',
           backgroundPosition: 'top center',
+          backgroundColor: this.backgroundColor,
           '--border-color': this.borderColor
         }
 
@@ -74,51 +76,49 @@
         return params
       }
     },
+    watch: {
+      container(value,oloValue) {
+        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
+        if (this.$configProject['isPreview']){
+          this.init(value);
+          this.getNumber();
+          this.footerBarKey = this.$xdUniHelper.randomChar(20);
+        }
+      }
+    },
     data() {
       return {
+        closeMask: true,
         height: 0,
         list: null,
         view: false,
         numObj: {},
         footerBarKey: 'footerBarKey', //刷新
         baseUrl: '',
+        footerTpl:'', //模版样式
+
+        //样式
         backgroundImage: '',
-        borderColor: ''
-      }
-    },
-    watch: {
-      container(value,oloValue) {
-        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
-        if (this.$configProject['isPreview']){
-          this.init(value);
-          this.getNumber();
-          this.footerBarKey = this.$xdUniHelper.randomChar(20);
-        }
+        backgroundColor:'#fff',
+        borderColor: '',
       }
     },
     created() {
       this.view = this.$configProject.isPreview;
 
-      //非预览模式
       //#ifdef H5
       if (!this.$configProject.isPreview){
         this.baseUrl = this.projectAttr['deploy_dir']
       }
       //#endif
 
-      //设置高度
-      if(this.$configProject.isPreview) {
-        this.height = getComponentAttr(this.componentAttr, 'height');
-      }
-      else {
-        this.height = getComponentAttr(this.componentAttr, 'height');
-      }
-
-      this.height =  Number(this.height);
+      this.height = Number(getComponentAttr(this.componentAttr, 'height'));
 
       this.init(this.container);
+
       //监听重试消息数量
       this.$xdRoot.$on('restFooterNumber', this.handle)
+
     },
     methods: {
       handle(){
@@ -196,29 +196,83 @@
 
       /**
        * @description 监听事件变化
-       * @param value {object} 业务组件对象自己
+       * @param container {object} 业务组件对象自己
        */
-      init(value) {
+      init(container) {
+        this.footerTpl =  gCPVal(container, 'footerTpl', 'noraml');
+
         //设置底部菜单
-        let bar = getContainerPropsValue(value, 'content.footer-setting', []);
-        let imageIcons = getContainerPropsValue(value, 'content.footerSettingImage', []);
-        this.backgroundImage = getContainerPropsValue(value, 'content.backgroundImage', '');
-        this.borderColor = getContainerPropsValue(value, 'content.borderColor', '#eee');
+        let settingKey = 'footer-setting';
+        if(this.footerTpl === 'itemCenterBig') settingKey = 'footer-setting-center-big'
+        let barList = gCPVal(container, settingKey, []);
+        let imageIcons = gCPVal(container, 'footerSettingImage', []);
+
+        this.backgroundImage = gCPVal(container, 'backgroundImage', '',{sKey:'navStatus',fields:['bgColor','backgroundImage','borderColor']});
+        this.backgroundColor = gCPVal(container, 'bgColor', '#fff',{sKey:'navStatus',fields:['bgColor','backgroundImage','borderColor']});
+        this.borderColor = gCPVal(container, 'bgColor', ['#fff','#eee'],{sKey:'navStatus',fields:['bgColor','backgroundImage','borderColor']});
+        let color = gCPVal(container,'color', '');
+        let selectedColor = gCPVal(container,'selectedColor', '');
+        let isShowTitle = gCPVal(container, 'isShowTitle', 'Y');
+        this.iconStyle = gCPVal(container, 'iconStyle', [
+          {
+            cusColor:{
+              iconColor: '#333',
+              color:'#333'
+            },
+            cusActColor:{
+              color: this.mainColor,
+              iconColor: this.mainColor
+            }
+          },
+            {
+            cusColor:{
+              iconColor: color || '#333',
+              color:color || '#333'
+            },
+            cusActColor:{
+              color: selectedColor || this.mainColor,
+              iconColor: selectedColor || this.mainColor
+            }
+          }
+        ],{sKey:'iconStyleStatus',fields:['iconStyle','color','selectedColor']});
+        let borderColor = gCPVal(container, 'centerColor', this.backgroundColor,{sKey:'iconCenterStatus',fields:['centerWidth','centerColor']});
+        let borderWidth = gCPVal(container, 'centerWidth', 12,{sKey:'iconCenterStatus',fields:['centerWidth','centerColor']});
+
+
         this.list = {
-          bgColor: getContainerPropsValue(value, 'content.bgColor', '#fff'),
-          bodyStyle: this.bodyStyle,
-          selectedColor: getContainerPropsValue(value, 'content.selectedColor', this.mainColor),
-          color: getContainerPropsValue(value, 'content.color', '#333'),
-          list: bar.map((item,index)=>{
-            return {
-              name: item.name.slice(0, 6),
-              icon: item.icon,
-              path: item.path.value,
-              size: item.size,
+          tpl:this.footerTpl,
+          hasName: isShowTitle === 'Y',
+          borderColor,
+          borderWidth,
+          bgColor: this.backgroundColor,
+          color:this.iconStyle.cusColor.color,
+          selectedColor:this.iconStyle.cusActColor.color,
+          iconColor:this.iconStyle.cusColor.iconColor,
+          selectedIconColor:this.iconStyle.cusActColor.iconColor,
+          list: barList.map((item,index)=>{
+            let selfImage = (item.image && item.image.url) ? getServiceUrl(item.image.url,'size3'):'';
+            let selfActImage = (item.actImage && item.actImage.url) ? getServiceUrl(item.actImage.url,'size3'):'';
+            let image = (selfImage || selfActImage) || this.getImage(imageIcons,index,'image') || this.getImage(imageIcons,index,'actImage');
+            let actImage = (selfActImage || selfImage) || this.getImage(imageIcons,index,'actImage') || this.getImage(imageIcons,index,'image');
+            let iconType = 'icon';
+            if(!item['iconType'] && (actImage || image)) iconType = 'image';
+            if(['icon','image'].includes(item['iconType'])) iconType = item['iconType'];
+            let router = {
+              path: (item.path && item.path.value) ? item.path.value :'',
               num: this.numObj[index] ? this.numObj[index]: 0 ,
-              image: this.getImage(imageIcons,index,'image') || this.getImage(imageIcons,index,'actImage'),
-              actImage: this.getImage(imageIcons,index,'actImage') || this.getImage(imageIcons,index,'image'),
             }
+            if(isShowTitle === 'Y') router['name'] = item.name ? item.name.slice(0, 5): '';
+            if(iconType === 'icon') {
+              router['icon'] = item.icon;
+              router['image'] = '';
+              router['actImage'] = '';
+            }
+            if(iconType === 'image') {
+              router['icon'] = '';
+              router['image'] = image;
+              router['actImage'] = actImage;
+            }
+            return router
           }),
         };
       },
@@ -234,12 +288,12 @@
       border-color: var(--border-color);
     }
   }
-  
 
-  .jfb-base-footer {
 
+  .jfb-base-footer {
     &__body{
       box-sizing: border-box;
+      overflow: inherit!important;
     }
   }
 </style>