jufubao-base 1.0.197-beta3 → 1.0.197-beta5

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'">
@@ -31,7 +30,7 @@
           </view>
           <view v-if="showPartnerName==='Y'" class="name" :style="{color: textColor}">{{partnerName}}</view>
         </view>
-        <view v-if="loaded && showLocation==='Y'" class="header_wrap-city">
+        <view v-if="loaded && showLocation==='Y' && searchBoxPosition==='out'" class="header_wrap-city">
           <xd-city-show-api
             @done="handleCityDone"
             @onChange="handleCityChange"
@@ -46,9 +45,21 @@
           @click="toSearch"
           :style="{
             background:inputBackgroundColor,
-            color:inputTextColor
+            color:inputTextColor,
+            borderRadius: searchBoxRadius + 'rpx'
           }"
         >
+          <view v-if="loaded && showLocation==='Y' && searchBoxPosition==='in'" class="header-city-in">
+            <xd-city-show-api
+              @done="handleCityDone"
+              @onChange="handleCityChange"
+              :color="textColor"
+              :icon="locationIcon"
+              :bgColor="locationBackgroundColor"
+              :key="showLocationKey"
+            ></xd-city-show-api>
+          </view>
+          <xd-font-icon v-if="searchIconPosition==='left'" :icon="icon" :color="iconColor" size="32"/>
           <input
             v-if="useSearch==='Y'"
             :placeholder="placeholder"
@@ -59,8 +70,18 @@
             :placeholder-style="'color:' + inputTextColor"
           />
           <view v-else class="search_placeholder">{{placeholder}}</view>
-          <xd-font-icon :icon="icon" :color="iconColor" size="32"/>
+          <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"
+          >{{searchBtnText || '搜索'}}</view>
         </view>
+        <view v-if="showSearchBtn==='Y' && searchBtnPosition==='out'"
+          style="margin-left: 4px;padding: 8rpx 32rpx;"
+          :style="[searchBtnStyle]"
+          @click="doSearch"
+        >{{searchBtnText || '搜索'}}</view>
       </view>
     </view>
   </view>
@@ -86,14 +107,12 @@
     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,
+          color: this.searchBtnTextColor,
+          borderRadius: this.searchBtnRadius + 'rpx'
+        }
       }
     },
     data() {
@@ -102,6 +121,7 @@
         saveKey: 'xd_user_current_access_city', //用户选中城市存储key
         loaded: false,
         keyword: "",
+        isPreview: false,
 
         //面板
         showLocation: "",
@@ -128,12 +148,6 @@
         icon: '',
         iconColor: '',
 
-        //投影
-        is_shadow: 'Y',
-        is_shadow_bg: 0,
-        is_shadow_w: 0,
-
-
         //边框
         is_border: 'Y',
         is_border_w: 0,
@@ -141,9 +155,19 @@
 
         //定位ICON
         locationIcon: "",
-        locationBackgroundColor: ""
+        locationBackgroundColor: "",
 
         //
+        searchBoxPosition: "out",
+        searchIconPosition: "right",
+        showSearchBtn: "",
+        searchBtnPosition: "out",
+        searchBtnText: "",
+        searchBtnBgColor: "",
+        searchBtnTextColor: "",
+        searchBtnRadius: 0,
+        searchBoxRadius: 30,
+        bottomBorder: "",
       }
     },
     watch: {
@@ -154,6 +178,7 @@
     },
     created() {
       this.init(this.container);
+      this.isPreview = this.$configProject['isPreview'];
     },
     methods: {
       ...mapMutations(['setShowSwitchCity', 'setCityInfo']),
@@ -185,15 +210,25 @@
         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');
 
-
+        this.searchBoxPosition = getContainerPropsValue(container, 'content.searchBoxPosition', "out");
+        this.searchIconPosition = getContainerPropsValue(container, 'content.searchIconPosition', "right");
+        this.showSearchBtn = getContainerPropsValue(container, 'content.showSearchBtn', "");
+        this.searchBtnPosition = getContainerPropsValue(container, 'content.searchBtnPosition', "out");
+        this.searchBtnText = getContainerPropsValue(container, 'content.searchBtnText', "");
+        this.searchBtnBgColor = getContainerPropsValue(container, 'content.searchBtnBgColor', "");
+        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
+        })
 
         let name , logo, platform_logo;
         if (this.projectAttr['site_name']) name = this.projectAttr['site_name'];
@@ -203,16 +238,28 @@
         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;
+        //如果有搜索按钮，则不自动执行搜索
+        if(this.showSearchBtn === 'Y') return;
         if(this.timer) clearTimeout(this.timer);
         this.timer = setTimeout(() => {
           jfbRootFnExec(this, 'onCustomEvent')("baseHeader@search", e.detail.value);
         }, 300)
       },
+      doSearch(){
+        if(this.useSearch === "N"){
+          this.$xdUniHelper.navigateTo({
+            url: this.searchPagePath
+          })
+        }else{
+          jfbRootFnExec(this, 'onCustomEvent')("baseHeader@search", this.keyword);
+        }
+      },
       toSearch(){
         if(this.useSearch === 'N'){
           this.$xdUniHelper.navigateTo({
@@ -317,19 +364,40 @@
         .search_wrap{
           margin-left: unit(20, rpx);
           flex: 1;
-          padding: 12rpx 20rpx;
+          padding: 0rpx 20rpx;
+          height: 64rpx;
           border-radius: unit(50, rpx);
           display: flex;
           align-items: center;
+          .header-city-in{
+            position: relative;
+            padding-right: 28rpx;
+            margin-right: 20rpx;
+            &::before{
+              content: " ";
+              position: absolute;
+              width: 2rpx;
+              height: 100%;
+              background-color: #CCCCCC;
+              right: -0rpx;
+              top: 0rpx;
+            }
+            ::v-deep .xd-city{
+              padding: 0;
+            }
+          }
           .search_input{
             flex: 1;
-            text-align: center;
+            text-align: left;
             font-size: unit(28,rpx);
+            padding-left: 20rpx;
           }
           .search_placeholder{
+            flex: 1;
             width: 100%;
-            text-align: center;
+            text-align: left;
             font-size: unit(28, rpx);
+            padding-left: 20rpx;
           }
         }
       }

package/src/components/JfbBaseHeaderElephant/Api.js

@@ -0,0 +1,22 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Header
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getListPosterContent', //自定义方法名字（必选）
+    title: '获取内容',
+    path: '/cms/v1/ad-content',
+    isRule: false,
+    params: {
+      scene: ['使用场景', 'String', '选填'],
+      container_id: ['插件ID', 'String', '必填'],
+      page_id: ['页面ID', 'String', '必填'],
+      page_size: ['记录条数', 'Number', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];