jufubao-base 1.0.169-beta1 → 1.0.169-beta10

package/src/components/JfbBaseTfkSearch/JfbBaseTfkSearch.vue

@@ -14,72 +14,256 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-tfk-search__body">
-      <view>测试插件( {{containerId}} )</view>
+      <view class="x-line"></view>
+      <view :class="{hidden: keyword}">
+        <xd-search-history ref="searchHistory"
+          :saveKey="containerId+'_search_history'"
+          :saveLength="10"
+          @onClick="handleToSearch"></xd-search-history>
+      </view>
+      <view v-if="keyword">
+        <view class="menu_wrap" :style="menuWrapBoxStyle">
+          <view class="menu_list" :style="menuBoxStyle">
+            <view class="menu_item"
+              v-for="(item, i) in showMenuList" :key="item.value"
+              @click="handleSwitchMenu(item)"
+            >
+              <view class="menu_inner"
+                :style="[
+                  menuItemBoxStyle,
+                  item.value === tabId ? menuItemActiveStyle : menuItemStyle,
+                  {
+                    marginRight: i === showMenuList.length - 1 ? '0' : menuItemMargin + 'rpx',
+                  }
+                ]"
+              >{{ item.label }}</view>
+            </view>
+          </view>
+        </view>
+        <view v-if="!isPreview" style="height: 100rpx;"></view>
+
+        <view class="tfk-search" :style="{padding: outSpacing + 'rpx'}">
+          <all-list v-if="!tabId"
+            :keyword="keyword"
+            @on-parent-vm="handleParentVm"
+            @on-list="handleList"
+            @on-switch="handleSwitchMenu"
+          ></all-list>
+          <custom-list
+            v-else
+            :tab-id="tabId"
+            :keyword="keyword"
+            ref="customList"
+            @on-parent-vm="handleParentVm"
+            @on-list="handleList"
+          ></custom-list>
+        </view>
+      </view>
+
     </view>
   </view>
 </template>
 
 <script>
+  import XdSearchHistory from "@/components/XdSearchHistory/XdSearchHistory";
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseTfkSearchMixin from "./JfbBaseTfkSearchMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import listMixins from "./listMixins";
+  import CustomList from "./CustomList.vue";
+  import search from './search';
+  import AllList from "./AllList.vue";
+
   export default {
     name: "JfbBaseTfkSearch",
     components: {
-      XdFontIcon
+      CustomList,
+      XdFontIcon,
+      AllList,
+      XdSearchHistory
     },
     mixins: [
-      componentsMixins, extsMixins, JfbBaseTfkSearchMixin
+      componentsMixins, extsMixins, JfbBaseTfkSearchMixin,listMixins
     ],
     data() {
       return {
+        hideMask: true,
+        tabId: '', //cinema/film/shop/product
+        keyword: '',
+        options:{},
+        menuList: [],
+        //公共样式
+        outSpacing:20,
+        isPreview: false,
 
-        //todo
+        //面板
+        menuMargin: {},
+        menuPadding: {},
+        menuBgColor: {},
+        menuItemPadding: {},
+        menuTabColor: {},
+        menuBorderWidth: 1,
+        menuItemMargin: 40,
+        searchScope: [],
+        allListBgColor: "",
+        allModulePadding: {},
+        allModuleTitleBgColor: {},
+        allModuleTitlePadding: {},
+        allModuleMoreStyle: "",
+        allModuleMargin: 20,
+        allModuleTitleStyle: "",
       }
     },
+    computed: {
+      showMenuList(){
+        return [{label: "全部", value: "all"}, ...this.menuList]
+      },
+      menuWrapBoxStyle(){
+        let padding = `${this.checkValue(this.menuMargin.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuMargin.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuMargin.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuMargin.left, 20)}rpx`;
+
+        let style = {padding};
+        if(!this.isPreview){
+          style['position'] = 'fixed';
+          style['top'] = `${this.layoutInfo.top}rpx`;
+        }
+        return this.styleObjectToString(style)
+      },
+      menuBoxStyle(){
+        let padding = `${this.checkValue(this.menuPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.left, 20)}rpx`;
+        return this.styleObjectToString({
+          padding: padding,
+          backgroundColor: this.menuBgColor,
+        })
+      },
+      menuItemBoxStyle(){
+        let padding = `${this.checkValue(this.menuItemPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuItemPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuItemPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuItemPadding.left, 20)}rpx`;
+        return this.styleObjectToString({
+          padding
+        })
+      },
+      menuItemStyle(){
+        let styleObj = {
+          color: this.menuTabColor['color'] || '#333',
+          background: this.menuTabColor['bgColor'] || 'transparent',
+          fontSize: this.menuTabColor['fontSize'] || '30rpx',
+          fontWeight: this.menuTabColor['fontWeight'] || 'normal',
+          borderWidth: this.menuBorderWidth + 'px',
+        }
+
+        return this.styleObjectToString(styleObj)
+      },
+      menuItemActiveStyle(){
+        let defaultTextColor = this.mainColor;
+        let styleActiveObj = {
+          color: this.menuTabColor['actColor'] || defaultTextColor,
+          background: this.menuTabColor['actBgColor'] || 'transparent',
+          fontSize: this.menuTabColor['actFontSize'] || '30rpx',
+          fontWeight: this.menuTabColor['actFontWeight'] || 'normal',
+          borderBottom: `${this.menuBorderWidth}px solid ${this.menuTabColor['actColor'] || defaultTextColor}`
+        }
+        return this.styleObjectToString(styleActiveObj)
+      },
+    },
     watch: {
       container(value, oldValue) {
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']) this.init(value)
+        if (this.$configProject['isPreview']){
+          this.cusInit(value)
+          this.init(value);
+        }
       },
     },
     created() {
+      this.cusInit(this.container);
       this.init(this.container);
-
-      //todo
     },
-    methods: {
-      onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
 
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+    methods: {
+      /**
+       * @description 获取数据列表
+       * @param params
+       * @param cb {Function}
+       */
+      handleList({params, cb}){
+        let data = {...params};
+        if(this.tabId === ''){
+          data['search_range'] = this.searchScope.map(item => item.value.split("@")[0]).join(',');
+        }
 
-        //   }
+        jfbRootExec("getTfkSearchList", {
+          vm: this,
+          data: data
+        }).then(res => {
+          if(this.tabId === ''){
+            if(!this.$configProject['isPreview']){
+              this.menuList = res.tabs;
+            }
+            cb(res.list)
+          }else{
+            if(res.list.length > 0)  cb(res.list[0])
+            else cb(null)
+          }
+        }).catch((e)=>{
+            if(this.tabId === ''){
+              //todo
+            }
+            else  cb(null)
+        })
+      },
 
-        // }).then().catch()
+      onJfbLoad(options) {
+        this.options = options;
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
+        this.outSpacing =  getContainerPropsValue(container, 'content.outSpacing', '20');
+        this.menuMargin = getContainerPropsValue(container, 'content.menuMargin', {});
+        this.menuPadding = getContainerPropsValue(container, 'content.menuPadding', {});
+        this.menuBgColor = getContainerPropsValue(container, 'content.menuBgColor', '');
+        this.menuItemPadding = getContainerPropsValue(container, 'content.menuItemPadding', {});
+        this.menuTabColor = getContainerPropsValue(container, 'content.menuTabColor', {});
+        this.menuBorderWidth = getContainerPropsValue(container, 'content.menuBorderWidth', 1);
+        this.menuItemMargin = getContainerPropsValue(container, 'content.menuItemMargin', 40);
+        this.searchScope = getContainerPropsValue(container, 'content.searchScope', []);
+        this.allListBgColor = getContainerPropsValue(container, 'content.allListBgColor', '');
+        this.allModulePadding = getContainerPropsValue(container, 'content.allModulePadding', {});
+        this.allModuleTitleBgColor = getContainerPropsValue(container, 'content.allModuleTitleBgColor', '');
+        this.allModuleTitlePadding = getContainerPropsValue(container, 'content.allModuleTitlePadding', {});
+        this.allModuleMoreStyle = getContainerPropsValue(container, 'content.allModuleMoreStyle', "");
+        this.allModuleMargin = getContainerPropsValue(container, 'content.allModuleMargin', 20);
+        this.allModuleTitleStyle = getContainerPropsValue(container, 'content.allModuleTitleStyle', "");
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        if(this.$configProject['isPreview']){
+          this.menuList = this.searchScope;
+          this.keyword = "搜索关键字";
+          this.isPreview = true;
+        }
       },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+      handleSwitchMenu(item){
+        this.tabId = item.value;
       },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
+      handleToSearch(item){
+        this.keyword = item;
       },
+      onJfbScroll(options) {
+        // console.log('event.onJfbScroll', options)
+      },
+
       onJfbShow(options) {
         console.log('event.onJfbShow', options)
       },
@@ -92,8 +276,16 @@
       onJfbUpdate(...data) {
         console.log('event.onJfbUpdate', data)
       },
-      onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
+      onJfbCustomEvent({action, data}) {
+        if(action === 'baseHeader@search'){
+          uni.pageScrollTo({
+            scrollTop: 0,
+            duration: 0
+          });
+          this.keyword = data;
+          this.tabId = '';
+          this.$refs.searchHistory.addHistory(data);
+        }
       },
     }
   }
@@ -105,7 +297,19 @@
 
   .jfb-base-tfk-search {
     &__body{
-
+      .hidden{
+        display: none;
+      }
+      .menu_wrap{
+        box-sizing: border-box;
+        width: 100%;
+        left: 0;
+        z-index: 999;
+      }
+      .menu_list{
+        display: flex;
+        box-sizing: border-box;
+      }
     }
   }
 </style>

package/src/components/JfbBaseTfkSearch/Mock.js

@@ -1,13 +1,92 @@
-'use strict';
+"use strict";
 
 module.exports = {
-  
-  getTfkByIdFilmSquate:{},
-  
-  updateTfkFilmPaiqiDate:{},
-  
-  removeTfkFilmAddress:{},
-  
-  addTfkFilmcart:{},
-  
-}
+  getTfkSearchList: {
+    list: [
+      {
+        type: "product",
+        name: "蛋糕",
+        detail_redirect_data:
+          '{"dir":"wtxsaas","host":"sandbox-website-05.jufubao.cn","path":"\\/main\\/order\\/detail","appType":"h5","site_id":"17928cc37788be02","site_url":"https:\\/\\/sandbox-website-05.jufubao.cn\\/wtxsaas\\/main\\/order\\/detail","frontPath":"\\/wtxsaas\\/main\\/order\\/detail","fixed_business_code":""}',
+        detail1_redirect_data: "",
+        more_redirect_data: "",
+        sort: 0,
+        setting_id: 1,
+        next_page_token: 'a:2:{i:0;d:1705.0785;i:1;s:8:"60030143";}',
+        items: [
+          {
+            brand_id: 100003,
+            brand_name: "品牌jls0519",
+            list_title: "3",
+            market_price: 2000,
+            market_tags: [],
+            product_id: 60030143,
+            product_name: "仅快递实物商品（北京廊坊支持配送）",
+            product_type: "good",
+            promo_price: 0,
+            sale_num: 8,
+            sale_price: 3000,
+            status: "ok",
+            thumb: "/uploads/20231215/b2ce0235129aa592044f96343f25c338.jpeg"
+          }
+        ]
+      },
+      {
+        type: "shop",
+        name: "门店",
+        detail_redirect_data: "",
+        detail1_redirect_data: "",
+        more_redirect_data: "",
+        sort: 1,
+        setting_id: 5,
+        next_page_token: "a:1:{i:0;d:4.4;}",
+        items: [
+          {
+            brand_id: 0,
+            brand_name: "",
+            shop_icon:
+              "https://dimg04.uat.qa.nt.ctripcorp.com/images/1lo4a12000007fyeg8D96.gif",
+            distance: 4,
+            business_status: "5",
+            full_address: "北京北京北京市东城区景山前街4号",
+            phone: "",
+            consume_mode: ["TRAVEL"],
+            consume_mode_name: "",
+            shop_id: 1052782,
+            resource_shop_id: 8000302,
+            resource_shop_name: "故宫-测试1-攻略修改",
+            shop_tags: {},
+            stars: 2
+          }
+        ]
+      },
+      {
+        type: "cinema",
+        name: "影院",
+        detail_redirect_data:
+          '{"dir":"apply06","host":"sandbox-website-05.jufubao.cn","path":"\\/main\\/movie\\/suhedule","appType":"h5","site_id":"17928cc37788be02","site_url":"https:\\/\\/sandbox-website-05.jufubao.cn\\/apply06\\/main\\/movie\\/suhedule","frontPath":"\\/apply06\\/main\\/movie\\/suhedule","fixed_business_code":""}',
+        detail1_redirect_data:
+          '{"dir":"apply06","host":"sandbox-website-05.jufubao.cn","path":"\\/main\\/movie\\/cdetailnew","appType":"h5","site_id":"17928cc37788be02","site_url":"https:\\/\\/sandbox-website-05.jufubao.cn\\/apply06\\/main\\/movie\\/cdetailnew","frontPath":"\\/apply06\\/main\\/movie\\/cdetailnew","fixed_business_code":""}',
+        more_redirect_data: "",
+        sort: 3,
+        setting_id: 10,
+        next_page_token: 1,
+        items: [
+          {
+            address: "朝阳区安慧里三区10号 （北辰购物中心对面）",
+            brand_id: 0,
+            brand_name: "",
+            cinema_id: 6771413,
+            cinema_name: "北京剧院",
+            cinema_type: ["SEAT"],
+            cinema_type_name: ["在线选座"],
+            distance: "",
+            is_open: "Y",
+            shop_icon: ""
+          }
+        ]
+      }
+    ],
+    request_id: "f6c04f1d2eb3385b"
+  }
+};

package/src/components/JfbBaseTfkSearch/SkeletonCinema.vue

@@ -0,0 +1,45 @@
+<template>
+  <view class="skeleton-wrap-item">
+    <view class="title skeleton-item"></view>
+    <view class="address skeleton-item"></view>
+    <view class="bottom">
+      <view class="local skeleton-item"></view>
+      <view class="btn skeleton-item"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "SkeletonCinema"
+}
+</script>
+
+<style scoped lang="less">
+.skeleton-wrap-item {
+  height: 200rpx;
+  display: block;
+
+  & > .title {
+    .skeleton-item(100%, 60rpx);
+    margin-bottom: 20rpx;
+  }
+  & > .address {
+    .skeleton-item(100%, 40rpx);
+    margin-bottom: 20rpx;
+  }
+  & > .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & > .local {
+      .skeleton-item(120rpx, 30rpx);
+    }
+    & > .btn {
+      .skeleton-item(150rpx, 60rpx);
+    }
+  }
+}
+</style>
+

package/src/components/JfbBaseTfkSearch/SkeletonFilm.vue

@@ -0,0 +1,109 @@
+<template>
+  <view class="skeleton-wrap-item">
+    <view class="skeleton-wrap-item-image skeleton-item" :style="{marginRight:outSpacing + 'rpx'}"></view>
+    <view class="skeleton-wrap-item-title">
+      <view class="title skeleton-item"></view>
+      <view class="type skeleton-item"></view>
+      <view class="director skeleton-item"></view>
+      <view class="star skeleton-item"></view>
+    </view>
+    <view class="skeleton-wrap-item-btn skeleton-item" :style="{marginLeft:outSpacing + 'rpx'}">
+      <view class="score skeleton-item"></view>
+      <view class="btn skeleton-item"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "SkeletonFilm",
+  props:{
+    outSpacing:{
+      type: Number|String,
+      default:20
+    }
+  }
+}
+</script>
+
+
+
+<style scoped lang="less">
+.skeleton-wrap-item {
+  height: 240rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  //影片列表骨架
+  &-image {
+    .skeleton-item(160rpx, 240rpx);
+    flex-shrink: 0;
+    margin-right: 20rpx;
+  }
+
+  &-title {
+    flex: 1;
+
+    .title {
+      .skeleton-item(100%, 50rpx);
+      margin-bottom: 20rpx;
+    }
+
+    .director,.star,.type  {
+      .skeleton-item(100%, 40rpx);
+      margin-bottom: 10rpx;
+    }
+  }
+
+  &-btn {
+    display: flex;
+    align-content: space-between;
+    align-items: flex-end;
+    justify-content: flex-end;
+    flex-flow: wrap;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 10rpx 0;
+    width: 130rpx;
+    flex-shrink: 0;
+
+    & > .score {
+      .skeleton-item(100rpx, 40rpx);
+    }
+    & > .btn {
+      .skeleton-item(130rpx, 60rpx);
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0!important;
+  }
+
+  //影院列表骨架
+  &.list {
+    display: block;
+  }
+  & > .title {
+    .skeleton-item(100%, 60rpx);
+    margin-bottom: 20rpx;
+  }
+  & > .address {
+    .skeleton-item(100%, 40rpx);
+    margin-bottom: 20rpx;
+  }
+  & > .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 30rpx;
+
+    & > .local {
+      .skeleton-item(120rpx, 30rpx);
+    }
+    & > .btn {
+      .skeleton-item(150rpx, 70rpx);
+    }
+  }
+}
+</style>