jufubao-base 1.0.197-beta3 → 1.0.197-beta4

package/src/components/JfbBaseHeader/JfbBaseHeader.vue

@@ -31,7 +31,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 +46,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 +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'" 
+            :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>
@@ -94,6 +116,13 @@
       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() {
@@ -141,9 +170,18 @@
 
         //定位ICON
         locationIcon: "",
-        locationBackgroundColor: ""
+        locationBackgroundColor: "",
 
         //
+        searchBoxPosition: "out",
+        searchIconPosition: "right",
+        showSearchBtn: "",
+        searchBtnPosition: "out",
+        searchBtnText: "",
+        searchBtnBgColor: "",
+        searchBtnTextColor: "",
+        searchBtnRadius: 0,
+        searchBoxRadius: 30,
       }
     },
     watch: {
@@ -193,7 +231,15 @@
         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 name , logo, platform_logo;
         if (this.projectAttr['site_name']) name = this.projectAttr['site_name'];
@@ -208,11 +254,22 @@
       },
       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,18 +374,37 @@
         .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{
             width: 100%;
-            text-align: center;
+            text-align: left;
             font-size: unit(28, rpx);
           }
         }

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,
+  },
+];

package/src/components/JfbBaseHeaderElephant/Attr.js

@@ -0,0 +1,488 @@
+'use strict';
+import ICONS from "@/ICONS.js"
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        label: "logo设置",
+        ele: "xd-radio",
+        valueKey: "showLogoType",
+        value: data.showLogoType,
+        list: [
+          { label: "使用应用logo", value: 'default' },
+          { label: "自定义logo", value: 'self' },
+        ],
+        groupKey: "content"
+      },
+      {
+        label: '上传自定义logo:',
+        ele: 'xd-upload',
+        valueKey: 'selfLogo',
+        groupKey:'content',
+        value: data.selfLogo || {},
+        defaultValue: data.selfLogo || null,
+        slot: true,
+        oneWidth: 100,
+        oneHeight: 100,
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议高度为<span style="color:red">100px</span>,宽度自适应',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one',
+        uploadType: 'aliyun',
+        size: 5,
+        action: 'action',
+        sort: true,
+        maxlen: 100,
+        hidden: data.showLogoType !== 'self'
+      },
+      {
+        label: "是否站点名称:",
+        ele: "xd-radio",
+        valueKey: "showSiteName",
+        value: data.showSiteName || "Y",
+        list: [
+          { label: "展示", value: "Y" },
+          { label: "隐藏", value: "N" },
+        ],
+        groupKey:'content',
+      },
+      {
+        label: '是否分类入口:',
+        ele: 'xd-radio',
+        valueKey: 'showCategory',
+        value: data.showCategory || "Y",
+        list: [
+          { label: "展示", value: "Y" },
+          { label: "隐藏", value: "N" },
+        ],
+        groupKey:'content'
+      },
+      {
+        label: "分类ICON:",
+        ele: "xd-select-list",
+        valueKey: "categoryIcon",
+        value: data.categoryIcon,
+        list: ICONS,
+        groupKey:'content',
+        className: "input80",
+        hidden: data.showCategory !== "Y"
+      },
+      
+      {
+        label: "导航配置",
+        ele: "title",
+        groupKey:'content',
+        size: "small",
+        hidden: data.showCategory !== "Y"
+      },
+      {
+        label: "是否展开导航（预览调试）:",
+        ele: "xd-radio",
+        valueKey: "navExpand",
+        value: data.navExpand || "Y",
+        list: [
+          { label: "展开", value: "Y" },
+          { label: "收起", value: "N" },
+        ],
+        groupKey:'content',
+        hidden: data.showCategory !== "Y"
+      },
+      {
+        label: '导航列表配置:',
+        ele: 'xd-site-poster',
+        valueKey: 'poster',
+        className: 'input80',
+        value: data.poster || {},
+        groupKey:'content',
+        setting: {
+          count: 1,
+          scene: {label: '广告', value: 'normal'}
+        },
+        handleCustom({action, data}) {
+          //设置场景参数
+          if(data) {
+            data.params = Object.assign({}, {scene: 'normal'}, data.params || {})
+          }
+
+          //获取显示内容
+          if (action === 'screenList') {
+            XdBus.getParentApi('getOptionsSettingList')({setting_id: 'editx_base_ad_split_screen'})
+              .then(res => {
+                data.cb(res['list'])
+              })
+              .catch(error => {
+                console.error(error);
+              });
+            return
+          }
+
+          //获取返回参数(广告位高度必选项)
+          if (action === 'getPosterInfo') {
+            XdBus.getParentApi('cmsGetPublishEditxContent')(data.params)
+              .then(res => {
+                data.cb({list: res.list, selectId: res.selected})
+              })
+              .catch(error => {
+                console.error(error);
+              });
+            return
+          }
+
+          //使用内容分类
+          if (action === 'cmsPublishEditxContent') {
+            XdBus.getParentApi('cmsPublishEditxContent')(data.params)
+              .then(res => {
+                data.cb(res)
+              })
+              .catch(error => {
+                console.error(error);
+              });
+            return
+          }
+
+          let loading = XdBus.getParentApi('loading')({});
+          //位置列表
+          if (action === 'getListPostion') {
+            XdBus.getParentApi('getListPosterPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //位置创建
+          if (action === 'addPostion') {
+            XdBus.getParentApi('addPosterPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //位置编辑
+          if (action === 'editPostion') {
+            XdBus.getParentApi('updatePosterPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //位置删除
+          if (action === 'deleltePostion') {
+            XdBus.getParentApi('deletePosterPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //获取广告位内容列表
+          if (action === 'getListContent') {
+            XdBus.getParentApi('getListPosterContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //广告内容创建
+          if (action === 'addContent') {
+            XdBus.getParentApi('addPosterContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //广告内容编辑
+          if (action === 'editContent') {
+            XdBus.getParentApi('updatePosterContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //广告内容删除
+          if (action === 'deleteContent') {
+            XdBus.getParentApi('deletePosterContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //获取广告内容跳转地址类型
+          if (action === 'jumpPosterContentType') {
+            XdBus.getParentApi('getOptionsSettingList')({setting_id: "cms_setting"})
+              .then(res => {
+                loading.close();
+                data.cb(res['redirect_type'])
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //发布
+          if (action === 'publish') {
+            console.log('publish', data.params)
+            XdBus.getParentApi('cmsPublishContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //获取站内页面地址
+          if (action === 'router') {
+            loading.close()
+            return XdBus.getParentApi('getPagesTree');
+
+          }
+
+          //通知页面进行刷新
+          if(action === 'update') {
+            XdBus.getParentApi('getXdBusUpdateView')('onUpdateView', {});
+            loading.close()
+          }
+        },
+        rules: [{
+          required: true,
+          validator: (rule, value, callback) => {
+            let message = '请设置广告相关内容';
+            if(!value) {
+              callback(message);
+              return;
+            }
+            if(value.size && !value.size.height){
+              callback(message);
+              return
+            }
+
+            if(value.size && !value.size.width){
+              callback(message);
+              return
+            }
+            callback()
+          },trigger: ['blur', 'change']
+        }],
+      },
+      {
+        label: "导航内容显示列数:",
+        ele: "xd-select-list",
+        valueKey: "navColumn",
+        value: data.navColumn || 4,
+        list: [
+          { label: "3列", value: 3 },
+          { label: "4列", value: 4 },
+          { label: "5列", value: 5 },
+          { label: "6列", value: 6 },
+        ],
+        className: "input80",
+        groupKey:'content',
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: "导航内容显示行数:",
+        ele: "xd-select-list",
+        valueKey: "navRow",
+        value: data.navRow || 2,
+        list: [
+          { label: "1行", value: 1 },
+          { label: "2行", value: 2 },
+          { label: "3行", value: 3 },
+          { label: "4行", value: 4 },
+        ],
+        className: "input80",
+        groupKey:'content',
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: "导航内边距配置:",
+        ele: "xd-margin-padding",
+        valueKey: "navPadding",
+        value: data.navPadding,
+        groupKey:'content',
+        setting: {
+          type: "padding"
+        },
+        inline: false,
+        notice: '设置内填充，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: '导航ICON宽度:',
+        ele: "el-input",
+        valueKey: "iconWidth",
+        value: data.iconWidth || 100,
+        className: "input80",
+        groupKey:'content',
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: "导航ICON高度:",
+        ele: "el-input",
+        valueKey: "iconHeight",
+        value: data.iconHeight || 100,
+        className: "input80",
+        groupKey:'content',
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: "导航ICON外边距:",
+        ele: "xd-margin-padding",
+        valueKey: "iconMargin",
+        value: data.iconMargin,
+        groupKey:'content',
+        setting: {
+          type: "margin"
+        },
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: "单个导航背景色:",
+        ele: "xd-color",
+        valueKey: "navBgColor",
+        value: data.navBgColor,
+        groupKey:'content',
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: "导航横向间距:",
+        ele: "el-input",
+        valueKey: "navColumnGap",
+        value: data.navColumnGap || 10,
+        className: "input80",
+        groupKey:'content',
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: "导航垂直间距:",
+        ele: "el-input",
+        valueKey: "navRowGap",
+        value: data.navRowGap || 10,
+        className: "input80",
+        groupKey:'content',
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: "导航ICON圆角:",
+        ele: 'xd-site-select-list',
+        valueKey: 'navRadius',
+        groupKey:'content',
+        value: data.navRadius || '20',
+        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: "导航ICON阴影:",
+        ele: "xd-shadow",
+        valueKey: "navShadow",
+        value: data.navShadow,
+        groupKey:'content',
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+              data.cb([])
+            });
+        },
+        hidden: data.showCategory !== "Y" || data.navExpand !== "Y"
+      },
+      {
+        label: "背景颜色:",
+        ele: "xd-color",
+        valueKey: "bgColor",
+        value: data.bgColor,
+        groupKey:'style'
+      },
+      {
+        label: "站点名称字体设置:",
+        ele: "xd-font",
+        valueKey: "siteNameFont",
+        value: data.siteNameFont,
+        groupKey:'style',
+        setting: {
+          align: false,
+          lineHeight: false,
+        },
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_font_size'})
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              data.cb([])
+              console.error(error);
+            });
+        },
+        inline: false,
+        hidden: data.showSiteName !== "Y"
+      }
+    ].filter(i=>i)
+  },
+  advanced: [],
+};