jufubao-base 1.0.197-beta4 → 1.0.197-beta7

package/src/components/JfbBaseFooter/JfbBaseFooter.vue

@@ -16,16 +16,19 @@
       <view class="jfb-base-footer__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-footer__body" :style="{height:height + 'rpx'}">
-      <xd-footer-bar
-        v-if="list !== null"
-        :height="height"
-        :tabbar="list"
-        :view="view"
-        :styles="styles"
-        :key="footerBarKey"
-        :base-url="baseUrl"
-      ></xd-footer-bar>
+    <view class="jfb-base-footer__body">
+      <view :style="[bodyStyle]">
+        <xd-footer-bar
+          style="height:100%"
+          v-if="list !== null"
+          :height="height"
+          :tabbar="list"
+          :view="view"
+          :styles="styles"
+          :key="footerBarKey"
+          :base-url="baseUrl"
+        ></xd-footer-bar>
+      </view>
     </view>
   </view>
 </template>
@@ -42,6 +45,7 @@
     getContainerPropsValue,
     getComponentAttr
   } from "@/utils/xd.base";
+  import getServiceUrl from "@/common/getServiceUrl";
 
   export default {
     name: "JfbBaseFooter",
@@ -50,6 +54,21 @@
       XdFooterBar
     },
     mixins: [componentsMixins,extsMixins,JfbBaseFooterMixin],
+    computed:{
+      bodyStyle(){
+        let background = 'url(none)';
+        if(this.backgroundImage && this.backgroundImage.url) {
+          background = `url(${getServiceUrl(this.backgroundImage.url)})`;
+        }
+        return {
+          height: this.height + 'rpx',
+          backgroundImage: background,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'top center',
+        }
+      }
+    },
     data() {
       return {
         height: 0,
@@ -58,6 +77,7 @@
         numObj: {},
         footerBarKey: 'footerBarKey', //刷新
         baseUrl: '',
+        backgroundImage: '',
       }
     },
     watch: {
@@ -73,21 +93,23 @@
     created() {
       this.view = this.$configProject.isPreview;
 
-      //生产模式 + 非预览模式
-      if (this.$configProject.UNI_PLATFORM === 'h5'
-        && this.$configProject.NODE_ENV === 'production'
-      ){
+      //非预览模式
+      //#ifdef H5
+      if (!this.$configProject.isPreview){
         this.baseUrl = this.projectAttr['deploy_dir']
       }
+      //#endif
 
       //设置高度
       if(this.$configProject.isPreview) {
-        this.height = getComponentAttr(this.componentAttr, 'height') - 4;
+        this.height = getComponentAttr(this.componentAttr, 'height');
       }
       else {
         this.height = getComponentAttr(this.componentAttr, 'height');
       }
 
+      this.height =  Number(this.height);
+
       this.init(this.container);
       //监听重试消息数量
       this.$xdRoot.$on('restFooterNumber', this.handle)
@@ -159,6 +181,13 @@
         this.footerBarKey = this.$xdUniHelper.randomChar(20);
       },
 
+      getImage(list=[],index,key){
+        if(!list[index]) return '';
+        if(list[index] && !list[index][key]) return  '';
+        let item = list[index][key];
+        return getServiceUrl(item.url, 'size1');
+      },
+
       /**
        * @description 监听事件变化
        * @param value {object} 业务组件对象自己
@@ -166,8 +195,11 @@
       init(value) {
         //设置底部菜单
         let bar = getContainerPropsValue(value, 'content.footer-setting', []);
+        let imageIcons = getContainerPropsValue(value, 'content.footerSettingImage', []);
+        this.backgroundImage = getContainerPropsValue(value, 'content.backgroundImage', '');
         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)=>{
@@ -177,6 +209,8 @@
               path: item.path.value,
               size: item.size,
               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'),
             }
           }),
         };
@@ -190,6 +224,7 @@
   @import "./JfbBaseFooterLess.less";
 
   .jfb-base-footer {
+
     &__body{
       box-sizing: border-box;
     }

package/src/components/JfbBaseHeader/Attr.js

@@ -200,6 +200,14 @@ export default {
         classNmae: 'input80',
         groupKey:'style',
       },
+      {
+        label: "底部边框设置:",
+        ele: "xd-border",
+        valueKey: "bottomBorder",
+        value: data['bottomBorder'] || {},
+        className: 'input80',
+        groupKey: 'style',
+      },
       {
         ele: 'title',
         label: '定位功能样式设置',
@@ -266,7 +274,7 @@ export default {
         value: data['inputBackgroundColor'] || '',
         groupKey:'style',
         placeholder: '请选择背景颜色',
-        classNmae: 'input80',
+        className: 'input80',
       },
       {
         label: '输入框文字颜色:',
@@ -275,64 +283,22 @@ export default {
         groupKey:'style',
         value: data['inputTextColor'] || '',
         placeholder: '请选择输入框文字颜色',
-        classNmae: 'input80',
-      },
-      {
-        ele: 'title',
-        label: '投影设置',
-        size: 'small',
-        groupKey:'style',
-      },
-      {
-        label: '是否有投影:',
-        ele: 'xd-radio',
-        valueKey: 'is_shadow',
-        value: data['is_shadow'] || 'N',
-        placeholder: '请选择是否投影',
-        groupKey:'style',
-        multiple: false,
         className: 'input80',
-        list: [
-          {label: '是', value: 'Y'},
-          {label: '否', value: 'N'},
-        ]
-      },
-      data['is_shadow'] === 'Y' && {
-        label: '投影颜色:',
-        ele: 'xd-color',
-        valueKey: 'is_shadow_bg',
-        value: data['is_shadow_bg'] || '',
-        groupKey:'style',
-        placeholder: '请选择投影颜色',
-        classNmae: 'input80',
       },
-      data['is_shadow'] === 'Y' && {
-        label: '投影范围:',
-        ele: 'xd-site-select-list',
-        groupKey:'style',
-        valueKey: 'is_shadow_w',
-        value: data['is_shadow_w'] || '10',
-        placeholder: '请选择投影范围',
-        multiple: false,
+      {
+        label: "输入框边框设置:",
+        ele: "xd-border",
+        valueKey: "inputBorder",
+        value: data['inputBorder'] || {},
         className: 'input80',
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({
-            setting_id: 'edtix_style_radius',
-            key: Date.now()
-          })
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-            });
-        },
+        groupKey: 'style',
       },
       {
         ele: 'title',
         label: '边框设置',
         size: 'small',
         groupKey:'style',
+        hidden: true,
       },
       {
         label: '是否有边框:',
@@ -346,7 +312,8 @@ export default {
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
-        ]
+        ],
+        hidden: true,
       },
       data['is_border'] === 'Y' && {
         label: '边框颜色:',
@@ -356,6 +323,7 @@ export default {
         value: data['is_border_c'] || '',
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
+        hidden: true,
       },
       data['is_border'] === 'Y' && {
         label: '边框大小:',
@@ -366,6 +334,7 @@ export default {
         value: data['is_border_w'] || '',
         placeholder: '请输入边框颜色',
         className: 'input80',
+        hidden: true,
       },
       {
         label: '搜索页面链接:',

package/src/components/JfbBaseHeader/JfbBaseHeader.vue

@@ -18,8 +18,7 @@
         class="header_wrap"
         :style="{
           background: backgroundColor,
-          boxShadow,
-          borderBottom:boxBorder
+          borderBottom: bottomBorder
         }"
       >
         <view class="header_wrap-back" @click="onJfbBack" v-if="showBack==='Y'">
@@ -47,10 +46,11 @@
           :style="{
             background:inputBackgroundColor,
             color:inputTextColor,
-            borderRadius: searchBoxRadius + 'rpx'
+            borderRadius: searchBoxRadius + 'rpx',
+            border: inputBorder
           }"
         >
-          <view v-if="loaded && showLocation==='Y' && searchBoxPosition==='in'" class="header-city-in">
+          <view v-if="loaded && showLocation==='Y' && searchBoxPosition==='in'" class="header-city-in" @click.stop>
             <xd-city-show-api
               @done="handleCityDone"
               @onChange="handleCityChange"
@@ -74,12 +74,12 @@
           <xd-font-icon v-if="searchIconPosition==='right'" :icon="icon" :color="iconColor" size="32"/>
           <view v-if="showSearchBtn==='Y' && searchBtnPosition==='in'" 
             :style="[searchBtnStyle]"
-            style="padding: 4rpx 32rpx;"
-            @click="doSearch"
+            style="padding: 4rpx 32rpx;font-size: 28rpx;"
+            @click.stop="doSearch"
           >{{searchBtnText || '搜索'}}</view>
         </view>
         <view v-if="showSearchBtn==='Y' && searchBtnPosition==='out'"
-          style="margin-left: 4px;padding: 8rpx 32rpx;"
+          style="margin-left: 4px;padding: 8rpx 32rpx;font-size: 28rpx;"
           :style="[searchBtnStyle]"
           @click="doSearch"
         >{{searchBtnText || '搜索'}}</view>
@@ -108,15 +108,6 @@
     mixins: [componentsMixins,extsMixins,JfbBaseHeaderMixin],
     computed:{
       ...mapState(['siteInfo']),
-
-      boxShadow() {
-        if (this.is_shadow === 'Y') return `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
-        else return '0 0 0 rgba(0,0,0,0)';
-      },
-      boxBorder() {
-        if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
-        else return '0';
-      },
       searchBtnStyle(){
         return {
           background: this.searchBtnBgColor,
@@ -131,6 +122,7 @@
         saveKey: 'xd_user_current_access_city', //用户选中城市存储key
         loaded: false,
         keyword: "",
+        isPreview: false,
 
         //面板
         showLocation: "",
@@ -157,12 +149,6 @@
         icon: '',
         iconColor: '',
 
-        //投影
-        is_shadow: 'Y',
-        is_shadow_bg: 0,
-        is_shadow_w: 0,
-
-
         //边框
         is_border: 'Y',
         is_border_w: 0,
@@ -182,6 +168,8 @@
         searchBtnTextColor: "",
         searchBtnRadius: 0,
         searchBoxRadius: 30,
+        bottomBorder: "",
+        inputBorder: "",
       }
     },
     watch: {
@@ -192,6 +180,7 @@
     },
     created() {
       this.init(this.container);
+      this.isPreview = this.$configProject['isPreview'];
     },
     methods: {
       ...mapMutations(['setShowSwitchCity', 'setCityInfo']),
@@ -223,10 +212,6 @@
         this.locationIcon = getContainerPropsValue(container, "content.locationIcon", "icondizhitubiao")
         this.locationBackgroundColor = getContainerPropsValue(container, "content.locationBackgroundColor", "")
 
-        this.is_shadow = getContainerPropsValue(container, 'content.is_shadow', 'N');
-        this.is_shadow_bg = getContainerPropsValue(container, 'content.is_shadow_bg', '#fff');
-        this.is_shadow_w = getContainerPropsValue(container, 'content.is_shadow_w', '10');
-
         this.is_border = getContainerPropsValue(container, 'content.is_border', 'N');
         this.is_border_c = getContainerPropsValue(container, 'content.is_border_c', '#fff');
         this.is_border_w = getContainerPropsValue(container, 'content.is_border_w', '2');
@@ -240,6 +225,13 @@
         this.searchBtnTextColor = getContainerPropsValue(container, 'content.searchBtnTextColor', "");
         this.searchBtnRadius = getContainerPropsValue(container, 'content.searchBtnRadius', 0);
         this.searchBoxRadius = getContainerPropsValue(container, 'content.searchBoxRadius', 30);
+        let bottomBorder = getContainerPropsValue(container, 'content.bottomBorder', "Y");
+        this.bottomBorder = this.getBorderCompatibleOldStyle(bottomBorder, {
+          type: this.is_border,
+          width: this.is_border_w,
+          color: this.is_border_c
+        })
+        this.inputBorder = this.getXdBorder({}, getContainerPropsValue(container, 'content.inputBorder', {}))
 
         let name , logo, platform_logo;
         if (this.projectAttr['site_name']) name = this.projectAttr['site_name'];
@@ -249,8 +241,9 @@
         this.logo = platform_logo || logo || '//dummyimage.com/100x100';
         this.partnerName  = name || '聚福宝福利';
 
-
-
+        if(this.isPreview){
+          document.querySelector('.xd-Layout__top').style.zIndex = 149099;
+        }
       },
       handleInput(e){
         this.keyword = e.detail.value;
@@ -403,9 +396,11 @@
             padding-left: 20rpx;
           }
           .search_placeholder{
+            flex: 1;
             width: 100%;
             text-align: left;
             font-size: unit(28, rpx);
+            padding-left: 20rpx;
           }
         }
       }

package/src/components/JfbBaseHeaderElephant/Attr.js

@@ -397,6 +397,14 @@ export default {
         groupKey:'content',
         hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
       },
+      {
+        label: '单个导航字体颜色:',
+        ele: "xd-color",
+        valueKey: "navFontColor",
+        value: data.navFontColor,
+        groupKey:'content',
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
       {
         label: "导航横向间距:",
         ele: "el-input",

package/src/components/JfbBaseHeaderElephant/JfbBaseHeaderElephant.vue

@@ -27,13 +27,13 @@
             >{{ site_name }}</view>
           </view>
           <view v-if="showCategory === 'Y'" class="box_r" @click="isExtendCate=!isExtendCate">
-            <xd-font-icon :icon=" categoryIcon || 'iconfenlei1'"></xd-font-icon>
+            <xd-font-icon :icon=" categoryIcon || 'iconfenlei1'" :color="siteNameFont.color"></xd-font-icon>
           </view>
         </view>
         <view v-if="isExtendCate && showCategory==='Y'" class="cate_pop" :style="[catePopBoxStyle]">
           <view class="cate_list" :style="[cateListBoxStyle]">
             <view class="cate_item"
-              v-for="item in cateList" :key="item"
+              v-for="(item, i) in cateList" :key="i"
               :style="[cateItemBoxStyle]"
               @click="handleClick(item)"
             >
@@ -46,6 +46,10 @@
         </view>
 
       </view>
+      <view v-if="isExtendCate && showCategory==='Y'" class="_modal"
+        @click="isExtendCate=false"
+        @touchmove.stop.prevent="moveHandle"
+      ></view>
     </view>
   </view>
 </template>
@@ -70,6 +74,7 @@
       return {
         useNumber: 24,
         cateList: [],
+        previewCateList: [],
         site_logo: "",
         site_name: "",
         isPreview: false,
@@ -89,6 +94,7 @@
         iconWidth: "",
         iconHeight: "",
         navBgColor: "",
+        navFontColor: "",
         navColumnGap: "",
         navRowGap: "",
         navExpand: "",
@@ -117,7 +123,8 @@
       },
       cateItemBoxStyle(){
         return {
-          backgroundColor: this.navBgColor
+          backgroundColor: this.navBgColor,
+          color: this.navFontColor
         }
       },
       cateIconStyle(){
@@ -165,7 +172,7 @@
             page_size: this.useNumber //可以不传
           },
         }).then(res => {
-          
+          this.previewCateList = res.list;
           if(res.list.length === 0 && this.isPreview) {
             res.list = this.getTestData();
           }
@@ -190,6 +197,7 @@
         this.iconWidth = getContainerPropsValue(container, 'content.iconWidth', 100);
         this.iconHeight = getContainerPropsValue(container, 'content.iconHeight', 100);
         this.navBgColor = getContainerPropsValue(container, 'content.navBgColor', '');
+        this.navFontColor = getContainerPropsValue(container, 'content.navFontColor', '');
         this.navColumnGap = getContainerPropsValue(container, 'content.navColumnGap', 10);
         this.navRowGap = getContainerPropsValue(container, 'content.navRowGap', 10);
         this.navExpand = getContainerPropsValue(container, 'content.navExpand', '');
@@ -205,10 +213,19 @@
 
         this.useNumber = this.navRow * this.navColumn;
         if(this.isPreview){
-          if(!this.cateList.length) this.handleOne(this.getTestData());
+          let testData = this.getTestData();
+          testData.unshift(...this.previewCateList);
+          //从数组testData中取useNumber个数据
+          this.handleOne(testData.slice(0, this.useNumber));
           this.isExtendCate = this.navExpand === 'Y' ? true : false;
+          if(this.isExtendCate){
+            document.querySelector('.xd-Layout__top').style.zIndex = 149099;
+          }else{
+            document.querySelector('.xd-Layout__top').style.zIndex = 1490;
+          }
         }
       },
+      moveHandle(){},
       handleClick(item) {
         if(!item.redirect_data) {
           console.warn(`未配置链接地址: ${item.redirect_data}`);
@@ -378,8 +395,19 @@
 
   .jfb-base-header-elephant {
     &__body{
+      overflow: initial !important;
+      ._modal{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vh;
+        height: 100vh;
+        background: rgba(0, 0, 0, .5);
+        z-index: 999;
+      }
       .box_wrap{
         position: relative;
+        z-index: 1000;
         .cate_pop{
           top: 100%;
           left: 0;

package/src/components/JfbBaseNotice/Attr.js

@@ -275,6 +275,32 @@ export default {
           { label: '否', value: 'N' },
         ]
       },
+      {
+        label: "按钮长度:",
+        ele: "el-input",
+        valueKey: "btnConfirmWidth",
+        value: data['btnConfirmWidth'] || '',
+        placeholder: '请输入按钮长度',
+        className: 'input60',
+        groupKey: "content",
+      },
+      {
+        label: "按钮背景颜色:",
+        ele: "xd-color",
+        valueKey: "btnConfirmBgColor",
+        groupKey:'content',
+        value: data['btnConfirmBgColor'] || '',
+        placeholder: '请选择按钮背景颜色',
+        groupKey: "content",
+      },
+      {
+        label: "按钮文字颜色:",
+        ele: "xd-color",
+        valueKey: "btnConfirmTextColor",
+        groupKey:'content',
+        value: data['btnConfirmTextColor'] || '',
+        placeholder: '请选择按钮文字颜色',
+      },
       {
         ele: 'title',
         label: '静态显示',

package/src/components/JfbBaseNotice/JfbBaseNotice.vue

@@ -220,7 +220,11 @@
         backgroundColor: '',
         is_hide_dailog:'N',
 
-        isMp:false
+        isMp:false,
+
+        btnConfirmWidth: "",
+        btnConfirmBgColor: "",
+        btnConfirmTextColor: "",
       }
     },
     watch: {
@@ -330,11 +334,16 @@
         this.scrollMargin =  getContainerPropsValue(container, 'content.scrollMargin', {});
         this.radius = getContainerPropsValue(container, 'content.radius', 0);
         this.fontSize = Number(getContainerPropsValue(container, 'content.fontSize', '20'));
+        this.btnConfirmWidth = getContainerPropsValue(container, 'content.btnConfirmWidth', '');
+        this.btnConfirmBgColor = getContainerPropsValue(container, 'content.btnConfirmBgColor', '');
+        this.btnConfirmTextColor = getContainerPropsValue(container, 'content.btnConfirmTextColor', '');
         if (this.fontSize === 20) this.titleFontSize = 28;
         if (this.fontSize === 26) this.titleFontSize = 36;
         if (this.fontSize === 36) this.titleFontSize = 44;
         this.isTitle = getContainerPropsValue(container, 'content.isTitle', false);
 
+        console.log("this.btnConfirmTextColor", this.btnConfirmTextColor);
+
         if(this.style === '2') {
           this.num = getContainerPropsValue(container, 'content.num', 1);
           //#ifdef H5
@@ -358,6 +367,9 @@
           isHtml: true,
           zIndex: 2000,
           cancel: false,
+          btnConfirmWidth: this.btnConfirmWidth,
+          btnConfirmBgColor: this.btnConfirmBgColor,
+          btnConfirmTextColor: this.btnConfirmTextColor,
         });
       },