jufubao-base 1.0.197-beta1 → 1.0.197-beta10

package/src/components/JfbBaseHeader/Attr.js

@@ -46,6 +46,18 @@ export default {
           {label: "不显示", value: "N"}
         ]
       },
+      {
+        label: "定位样式",
+        ele: "xd-radio",
+        valueKey: "searchBoxPosition",
+        value: data.searchBoxPosition || "out",
+        list: [
+          {label: "搜索框外", value: "out"},
+          {label: "搜索框内", value: "in"}
+        ],
+        groupKey:'content',
+        hidden: data.showLocation !== 'Y'
+      },
       {
         label: "是否显示站点信息",
         ele: "xd-radio",
@@ -77,6 +89,108 @@ export default {
         value: data.placeholder || '',
         className: "input80"
       },
+      {
+        label: '搜索框圆角',
+        ele: 'xd-site-select-list',
+        valueKey: 'searchBoxRadius',
+        value: data.searchBoxRadius || 30,
+        groupKey:'content',
+        placeholder: '请选择内容圆角设置',
+        multiple: false,
+        className: 'input80',
+        handleCustom({ action, data }) {
+          XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_radius' })
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+      },
+      {
+        label: "放大镜位置",
+        ele: "xd-radio",
+        valueKey: "searchIconPosition",
+        value: data.searchIconPosition || "right",
+        list: [
+          {label: "靠左", value: "left"},
+          {label: "靠右", value: "right"},
+          {label: "隐藏", value: "hidden"}
+        ],
+        groupKey:'content',
+      },
+      {
+        label: "右侧是否展示搜索",
+        ele: "xd-radio",
+        valueKey: "showSearchBtn",
+        value: data.showSearchBtn,
+        list: [
+          {label: "展示", value: "Y"},
+          {label: "隐藏", value: "N"}
+        ],
+        groupKey:'content',
+      },
+      {
+        label: "搜索位置",
+        ele: "xd-radio",
+        valueKey: "searchBtnPosition",
+        value: data.searchBtnPosition || "out",
+        list: [
+          {label: "搜索框内", value: "in"},
+          {label: "搜索框外", value: "out"}
+        ],
+        groupKey:'content',
+        hidden: data.showSearchBtn !== 'Y'
+      },
+      {
+        label: "右侧搜索按钮文案自定义",
+        ele: "el-input",
+        placeholder: '请输入搜索按钮文案',
+        valueKey: "searchBtnText",
+        groupKey:'content',
+        value: data.searchBtnText || '',
+        className: "input80",
+        hidden: data.showSearchBtn !== 'Y'
+      },
+      {
+        label: "搜索按钮背景颜色",
+        ele: "xd-color",
+        placeholder: '请输入搜索按钮背景颜色',
+        valueKey: "searchBtnBgColor",
+        groupKey:'content',
+        value: data.searchBtnBgColor || '',
+        hidden: data.showSearchBtn !== 'Y'
+      },
+      {
+        label: "搜索按钮文字颜色",
+        ele: "xd-color",
+        placeholder: '请输入搜索按钮文字颜色',
+        valueKey: "searchBtnTextColor",
+        groupKey:'content',
+        value: data.searchBtnTextColor || '',
+        hidden: data.showSearchBtn !== 'Y'
+      },
+      {
+        label: "搜索按钮圆角",
+        ele: 'xd-site-select-list',
+        valueKey: 'searchBtnRadius',
+        value: data.searchBtnRadius || 0,
+        groupKey:'content',
+        placeholder: '请选择内容圆角设置',
+        multiple: false,
+        className: 'input80',
+        handleCustom({ action, data }) {
+          XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_radius' })
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+        hidden: data.showSearchBtn !== 'Y'
+      },
       {
         label: '背景颜色:',
         ele: 'xd-color',
@@ -86,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: '定位功能样式设置',
@@ -152,7 +274,7 @@ export default {
         value: data['inputBackgroundColor'] || '',
         groupKey:'style',
         placeholder: '请选择背景颜色',
-        classNmae: 'input80',
+        className: 'input80',
       },
       {
         label: '输入框文字颜色:',
@@ -161,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: '是否有边框:',
@@ -232,7 +312,8 @@ export default {
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
-        ]
+        ],
+        hidden: true,
       },
       data['is_border'] === 'Y' && {
         label: '边框颜色:',
@@ -242,6 +323,7 @@ export default {
         value: data['is_border_c'] || '',
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
+        hidden: true,
       },
       data['is_border'] === 'Y' && {
         label: '边框大小:',
@@ -252,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'">
@@ -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,22 @@
           @click="toSearch"
           :style="{
             background:inputBackgroundColor,
-            color:inputTextColor
+            color:inputTextColor,
+            borderRadius: searchBoxRadius + 'rpx',
+            border: inputBorder
           }"
         >
+          <view v-if="loaded && showLocation==='Y' && searchBoxPosition==='in'" class="header-city-in" @click.stop>
+            <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 +71,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'"
+            class="search_btn_in"
+            :style="[searchBtnStyle]"
+            @click.stop="doSearch"
+          >{{searchBtnText || '搜索'}}</view>
         </view>
+        <view v-if="showSearchBtn==='Y' && searchBtnPosition==='out'"
+          style="margin-left: 4px;padding: 8rpx 32rpx;font-size: 28rpx;"
+          :style="[searchBtnStyle]"
+          @click="doSearch"
+        >{{searchBtnText || '搜索'}}</view>
       </view>
     </view>
   </view>
@@ -86,14 +108,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 +122,7 @@
         saveKey: 'xd_user_current_access_city', //用户选中城市存储key
         loaded: false,
         keyword: "",
+        isPreview: false,
 
         //面板
         showLocation: "",
@@ -128,12 +149,6 @@
         icon: '',
         iconColor: '',
 
-        //投影
-        is_shadow: 'Y',
-        is_shadow_bg: 0,
-        is_shadow_w: 0,
-
-
         //边框
         is_border: 'Y',
         is_border_w: 0,
@@ -141,9 +156,20 @@
 
         //定位ICON
         locationIcon: "",
-        locationBackgroundColor: ""
+        locationBackgroundColor: "",
 
         //
+        searchBoxPosition: "out",
+        searchIconPosition: "right",
+        showSearchBtn: "",
+        searchBtnPosition: "out",
+        searchBtnText: "",
+        searchBtnBgColor: "",
+        searchBtnTextColor: "",
+        searchBtnRadius: 0,
+        searchBoxRadius: 30,
+        bottomBorder: "",
+        inputBorder: "",
       }
     },
     watch: {
@@ -154,6 +180,7 @@
     },
     created() {
       this.init(this.container);
+      this.isPreview = this.$configProject['isPreview'];
     },
     methods: {
       ...mapMutations(['setShowSwitchCity', 'setCityInfo']),
@@ -185,15 +212,26 @@
         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', 100);
+        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'];
@@ -203,16 +241,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 +367,49 @@
         .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;
+          }
+          .search_btn_in{
+            height: 48rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 4rpx 32rpx;
+            font-size: 28rpx;
+            box-sizing: border-box;
           }
         }
       }