jufubao-base 1.0.197-beta1 → 1.0.197-beta11

package/src/components/JfbBaseHeaderElephant/JfbBaseHeaderElephant.vue

@@ -15,20 +15,41 @@
     <!-- #endif -->
     <view class="jfb-base-header-elephant__body">
       <view class="box_wrap">
-        <view class="box_cont">
+        <view class="box_cont" :style="[boxContStyle]">
           <view class="box_l">
-            <view class="box_logo"></view>
-            <view class="box_site_name"></view>
+            <view class="box_logo">
+              <image v-if="showLogoType==='self' && selfLogo" :src="selfLogo" mode="heightFix" />
+              <image v-if="showLogoType==='default'" :src="site_logo" mode="heightFix" />
+            </view>
+            <view v-if="showSiteName==='Y'"
+              class="box_site_name"
+              :style="[siteNameFont]"
+            >{{ site_name }}</view>
           </view>
-          <view class="box_r">
-            <xd-font-icon icon="iconfenlei1"></xd-font-icon>
+          <view v-if="showCategory === 'Y'" class="box_r" @click="isExtendCate=!isExtendCate">
+            <xd-font-icon :icon=" categoryIcon || 'iconfenlei1'" :color="siteNameFont.color"></xd-font-icon>
           </view>
         </view>
-        <view class="cate_pop">
-          <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, i) in cateList" :key="i"
+              :style="[cateItemBoxStyle]"
+              @click="handleClick(item)"
+            >
+              <view class="cate_img" :style=[cateIconStyle]>
+                <image :src="item.image_url" mode="aspectFill" />
+              </view>
+              <view class="cate_name">{{item.content_name}}</view>
+            </view>
+          </view>
         </view>
 
       </view>
+      <view v-if="isExtendCate && showCategory==='Y'" class="_modal"
+        @click="isExtendCate=false"
+        @touchmove.stop.prevent="moveHandle"
+      ></view>
     </view>
   </view>
 </template>
@@ -51,9 +72,81 @@
     ],
     data() {
       return {
-        useNumber: 4,
-        info: [],
+        useNumber: 24,
+        cateList: [],
+        previewCateList: [],
+        site_logo: "",
+        site_name: "",
+        isPreview: false,
+        isExtendCate: false,
         //todo
+        
+        showLogoType: "default",
+        selfLogo: "",
+        showSiteName: "",
+        showCategory: "",
+        categoryIcon: "",
+        bgColor: "",
+        siteNameFont: {},
+        navColumn: "",
+        navRow: "",
+        navPadding: "",
+        iconWidth: "",
+        iconHeight: "",
+        navBgColor: "",
+        navFontColor: "",
+        navColumnGap: "",
+        navRowGap: "",
+        navExpand: "",
+        iconMargin: "",
+        navRadius: "",
+        navShadow: "",
+        navCount: "",
+      }
+    },
+    computed: {
+      boxContStyle(){
+        return {
+          backgroundColor: this.bgColor,
+        }
+      },
+      cateListBoxStyle(){
+        let padding = `${this.checkValue(this.navPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.navPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.navPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.navPadding.left, 20)}rpx`;
+        return {
+          gridTemplateColumns: `repeat(${this.navColumn}, 1fr)`,
+          columnGap: `${this.navColumnGap}rpx`,
+          rowGap: `${this.navRowGap}rpx`,
+          padding: padding
+        }
+      },
+      cateItemBoxStyle(){
+        return {
+          backgroundColor: this.navBgColor,
+          color: this.navFontColor
+        }
+      },
+      cateIconStyle(){
+        let margin = `${this.checkValue(this.iconMargin.top, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.iconMargin.right, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.iconMargin.bottom, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.iconMargin.left, 0)}rpx`;
+        return {
+          width: `${this.checkValue(this.iconWidth, 100)}rpx`,
+          height: `${this.checkValue(this.iconHeight, 100)}rpx`,
+          margin: margin,
+          borderRadius: this.navRadius + 'rpx',
+          boxShadow: this.navShadow
+        }
+      },
+      catePopBoxStyle(){
+        let position = 'absolute';
+        if(this.isPreview) position = 'relative';
+        return {
+          position: position,
+        }
       }
     },
     watch: {
@@ -64,7 +157,9 @@
     },
     created() {
       this.init(this.container);
-
+      this.site_logo = getServiceUrl(this.projectAttr["site_logo"], "size3");
+      this.site_name = this.projectAttr["site_name"];
+      this.isPreview = this.$configProject['isPreview'];
       //todo
     },
     methods: {
@@ -78,6 +173,7 @@
             page_size: this.useNumber //可以不传
           },
         }).then(res => {
+          this.previewCateList = res.list;
           if(res.list.length === 0 && this.isPreview) {
             res.list = this.getTestData();
           }
@@ -89,7 +185,106 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
+        this.showLogoType = getContainerPropsValue(container, 'content.showLogoType', 'default');
+        this.selfLogo = getServiceUrl(getContainerPropsValue(container, 'content.selfLogo', {url: ""}).url);
+        this.showSiteName = getContainerPropsValue(container, 'content.showSiteName', 'Y');
+        this.showCategory = getContainerPropsValue(container, 'content.showCategory', 'Y');
+        this.categoryIcon = getContainerPropsValue(container, 'content.categoryIcon', '');
+        this.bgColor = getContainerPropsValue(container, 'content.bgColor', '');
+        this.siteNameFont = getContainerPropsValue(container, 'content.siteNameFont', {});
+        this.navColumn = getContainerPropsValue(container, 'content.navColumn', 4);
+        this.navPadding = getContainerPropsValue(container, 'content.navPadding', {});
+        this.navRow = getContainerPropsValue(container, 'content.navRow', 2);
+        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', '');
+        this.iconMargin = getContainerPropsValue(container, 'content.iconMargin', {});
+        this.navRadius = getContainerPropsValue(container, 'content.navRadius', 0);
+        this.navCount = getContainerPropsValue(container, 'content.navCount', 0);
+        let navShadow = getContainerPropsValue(container, 'content.navShadow', '');
+        if(navShadow.type === "Y" && navShadow.value){
+          this.navShadow = `0 0 ${navShadow.value.width}rpx ${navShadow.value.color}`;
+        }else{
+          this.navShadow = 'none';
+        }
+        console.log("navShadow", this.navShadow);
+
+        this.useNumber = this.navCount || this.navRow * this.navColumn;
+        if(this.isPreview){
+          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}`);
+          console.error(`未配置链接地址: ${item.redirect_data}`);
+          return
+        }
+
+        //内部链接跳转地址
+        if (item.redirect_type === 'INN') {
+          try {
+            let url = JSON.parse(item.redirect_data);
+            let params = '';
+            if(url.page) {
+              if (item['redirect_params']) params = `?${item['redirect_params']}`;
+              this.$xdUniHelper.navigateTo({url: url.page + params})
+            }
+            else {
+              console.error(`应用链接配置错误: ${url.page}`)
+            }
+          } catch (e) {
+            console.error(`应用链接配置错误: ${item.redirect_data}`)
+          }
+        }
 
+        //外部链接
+        if (item.redirect_type === 'URL') {
+          let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
+          let spReg = /(-apiuri\/v)/;
+          //#ifdef MP-WEIXIN
+          try {
+            let url = JSON.parse(item.redirect_data);
+            if (reg.test(url.url) || spReg.test(url.url)) {
+              console.warn(`广告跳转外站: ${url.url}`)
+              this.$xdUniHelper.navigateTo(url);
+            } else {
+              console.error(`广告跳转外站配置错误: ${url.url}`)
+            }
+          } catch (e) {
+            console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
+          }
+          //#endif
+          //#ifdef H5
+          try {
+            let url = JSON.parse(item.redirect_data);
+            console.warn(`广告跳转外站: ${url.url}`);
+            this.$xdUniHelper.redirectTo(url, false)
+          } catch (e) {
+            console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
+          }
+          //#endif
+
+        }
+
+        //无跳转地址
+        if(item.redirect_type === 'EMP') {
+          console.warn(`无跳转地址`);
+        }
       },
       handleImage(list){
         list = this.filterItem(list);
@@ -103,12 +298,12 @@
         })
 			},
       handleOne(list){
-        this.info = this.handleImage(list);
+        this.cateList = this.handleImage(list);
 
         //轮播图记录为0条处理
-        if( this.info.length === 0)  return
+        if( this.cateList.length === 0)  return
         let current = this.current || 0;
-        this.currentImage = this.info[current]['image_background_url']
+        this.currentImage = this.cateList[current]['image_background_url']
 			},
       getTestData(){
         let temp = [];
@@ -116,7 +311,7 @@
           let item = this.$xdUniHelper.cloneDeep(this['posterTest']);
           item.content_id = i;
           item.content_name = item.content_name + i;
-          item.image_url = `//dummyimage.com/${this.width}x${this.height}`;
+          item.image_url = `//dummyimage.com/${this.iconWidth}x${this.iconHeight}`;
           temp.push(item)
 				}
         return temp
@@ -178,6 +373,7 @@
       },
       onJfbShow(options) {
         console.log('event.onJfbShow', options)
+        this.onJfbLoad(options);
       },
       onJfbHide(options) {
         console.log('event.onJfbHide', options)
@@ -201,7 +397,68 @@
 
   .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;
+          width: 100%;
+          z-index: 11;
+          background: #FFFFFF;
+        }
+      }
+      .box_cont{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20rpx;
+        .box_l{
+          display: flex;
+          align-items: center;
+        }
+        .box_logo{
+          //width: 72rpx;
+          height: 72rpx;
+          image{
+            // width: 100%;
+            height: 100%;
+          }
+        }
+        .box_site_name{
+          margin-left: 20rpx;
+        }
+      }
+      .cate_list{
+        display: grid;
+        justify-items: center;
+        .cate_item{
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          .cate_img{
+            width: 100rpx;
+            height: 100rpx;
+            overflow: hidden;
+            image{
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
     }
   }
 </style>

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,
         });
       },