jufubao-base 1.0.169-beta6 → 1.0.169-beta7

package/src/components/JfbBaseTfkSearch/CustomList.vue

@@ -11,9 +11,7 @@
             marginBottom:$parentVm.outSpacing + 'rpx',
             padding:contMarginComp,
             borderRadius:$parentVm.contRradius+ 'rpx',
-            border:$parentVm.contBorder,
-            boxShadow:$parentVm.contShadow,
-            backgroundColor:$parentVm.contBgColor,
+            boxShadow:'0 0 10rpx rgba(0,0,0,0.1)',
             width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
           }"
         >
@@ -23,13 +21,111 @@
             :product-config="$parentVm.productConfig"
             :out-spacing="$parentVm.outSpacing"
           ></skeleton-product>
-          <skeleton-shop v-if="type_code === 'show'" :out-spacing="$parentVm.outSpacing"></skeleton-shop>
+          <skeleton-shop v-if="type_code === 'shop'" :out-spacing="$parentVm.outSpacing"></skeleton-shop>
           <skeleton-film v-if="type_code === 'film'" :out-spacing="$parentVm.outSpacing"></skeleton-film>
           <skeleton-cinema v-if="type_code === 'cinema'"></skeleton-cinema>
         </view>
       </view>
     </view>
-    <view class="custom-list-data" v-else></view>
+    <view class="custom-list-data" v-else>
+      <template v-if="type_other !== 2">
+        <view
+          v-for="item in dataList"
+          :key="item.id"
+          :style="{
+          marginBottom:$parentVm.outSpacing + 'rpx',
+          padding:contMarginComp,
+          borderRadius:$parentVm.contRradius+ 'rpx',
+          border: $parentVm.contBorder,
+          boxShadow:$parentVm.contShadow,
+          width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
+          height: heightRpx,
+          backgroundColor: $parentVm.contBgColor
+        }">
+          <content-film
+            type="hot"
+            v-if="type_code === 'film'"
+            style="width: 100%; height: 100%"
+            :keyword="keyword"
+            :item="item"
+            :out-spacing="$parentVm.outSpacing"
+            :color="$parentVm.mainColor"
+            :border-radius="$parentVm.imgRradius"
+            @on-film-detail="(film_id)=>{$parentVm.handleFilmDetail(film_id, dataConfig)}"
+            @on-buy="(film_id)=>{$parentVm.handleBuy(film_id, dataConfig)}"
+          ></content-film>
+          <content-cinema
+            v-if="type_code === 'cinema'"
+            style="width: 100%;height: 100%"
+            type="list"
+            :keyword="keyword"
+            :item="item"
+            :out-spacing="$parentVm.outSpacing"
+            :color="{SEAT:$parentVm.mainColor,CODE:$parentVm.subMainColor,SELL:$parentVm.successColor}"
+            :border-radius="$parentVm.imgRradius"
+            @on-schedule="(cinema)=>{$parentVm.handleSchedule(cinema,dataConfig)}"
+            @on-cashier-detail="(cinema)=>{$parentVm.handleCashierDetail(cinema,dataConfig)}"
+            @on-code-detail="(cinema)=>{$parentVm.handleCodeDetail(cinema,dataConfig)}"
+          ></content-cinema>
+          <content-shop
+            v-if="type_code === 'shop'"
+            style="width: 100%; height: 100%"
+            :keyword="keyword"
+            :out-spacing="$parentVm.outSpacing"
+            :item="item"
+            :color="$parentVm.mainColor"
+            :border-radius="$parentVm.imgRradius"
+            :is-echange="'Y' || $parentVm.isShowExchange"
+            @on-shop-jhd="(shop)=>{$parentVm.handleShopJhd(shop,dataConfig)}"
+            @on-shop-detail="(shop)=>{$parentVm.handleShopDetail(shop,dataConfig)}"
+          ></content-shop>
+          <content-product
+            v-if="$parentVm.productConfig !== null && type_code === 'product'"
+            style="width: 100%; height: 100%"
+            :product-config="$parentVm.productConfig"
+            :out-spacing="$parentVm.outSpacing"
+            :item="item"
+            :color="$parentVm.mainColor"
+            :border-radius="$parentVm.imgRradius"
+            :cell="type_other"
+            @on-product-detail="(product)=>{$parentVm.handleProductDetail(product,dataConfig)}"
+          ></content-product>
+        </view>
+      </template>
+      <view v-else class="productBox2">
+        <view v-for="(value, listKey) in productTowList" :key="listKey">
+          <view
+            v-if="productTowList[listKey] !== null"
+            v-for="item in productTowList[listKey]"
+            :key="item.id"
+            :style="{
+              marginBottom:$parentVm.outSpacing + 'rpx',
+              padding:contMarginComp,
+              borderRadius:$parentVm.contRradius+ 'rpx',
+              border: $parentVm.contBorder,
+              boxShadow:$parentVm.contShadow,
+              width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
+              height: heightRpx,
+              backgroundColor: $parentVm.contBgColor
+            }"
+          >
+            <content-product
+              v-if="$parentVm.productConfig !== null"
+              style="width: 100%; height: 100%"
+              :product-config="$parentVm.productConfig"
+              :out-spacing="$parentVm.outSpacing"
+              :item="item"
+              :height="outItemProduct"
+              :color="$parentVm.mainColor"
+              :border-radius="$parentVm.imgRradius"
+              :cell="type_other"
+              @on-product-detail="(product)=>{$parentVm.handleProductDetail(product,dataConfig)}"
+            ></content-product>
+          </view>
+        </view>
+      </view>
+
+    </view>
   </view>
 </template>
 
@@ -39,14 +135,22 @@ import SkeletonFilm from "./SkeletonFilm.vue";
 import SkeletonCinema from "./SkeletonCinema.vue";
 import SkeletonShop from "./SkeletonShop.vue";
 import SkeletonProduct from "./SkeletonProduct.vue";
+import ContentFilm from "./ContentFilm.vue";
+import ContentCinema from "./ContentCinema.vue";
+import ContentShop from "./ContentShop.vue";
+import ContentProduct from "./ContentProduct.vue";
 
 export default {
   name: "CustomList",
   components: {
+    ContentProduct,
     SkeletonProduct,
     SkeletonCinema,
     SkeletonFilm,
-    SkeletonShop
+    SkeletonShop,
+    ContentFilm,
+    ContentCinema,
+    ContentShop,
   },
   props:{
     keyword:{
@@ -75,18 +179,16 @@ export default {
       if(this.keyword) params['keyword'] = this.keyword;
 
       //设置城市
-      if(this.is_open_city ==='Y' && this.stateCity && this.stateCity.city_code) {
+      if(this.stateCity && this.stateCity.city_code) {
         params['city_code'] = this.stateCity.city_code;
       }
 
       //设置经纬度
-      if(this.type_code === 'shop' || this.type_code === 'cinema') {
-        if(this.stateLocation &&
-          (this.stateLocation.latitude && this.stateLocation.longitude)
-        ){
-          params['latitude'] = this.stateLocation.latitude;
-          params['longitude'] = this.stateLocation.longitude;
-        }
+      if(this.stateLocation &&
+        (this.stateLocation.latitude && this.stateLocation.longitude)
+      ){
+        params['latitude'] = this.stateLocation.latitude;
+        params['longitude'] = this.stateLocation.longitude;
       }
 
       return params
@@ -104,12 +206,19 @@ export default {
       num = num - this.$parentVm.checkValue(this.$parentVm.contMargin.right, 20) - this.$parentVm.checkValue(this.$parentVm.contMargin.left, 20);
       return num - this.$parentVm.contBorderWidth * 2
     },
+    heightRpx(){
+      let h = 'auto'
+      if(this.type_code === 'film') h = '240rpx'
+      if(this.type_code === 'cinema') h = 'auto';
+      if(this.type_code === 'shop') h = '200rpx';
+      return h;
+    }
   },
   data(){
     return {
       $parentVm:null,
       parentStatus: false,
-      skeletonCount: 10,
+      skeletonCount: 6,
 
       page_token:'1',
       page_size: 20,
@@ -124,7 +233,14 @@ export default {
       //列表数据
       dataList: null,
       timer:null,
-      config: {},
+      dataConfig: null,
+
+
+      //商品两列功能
+      productTowList:{
+        left:null,
+        right:null,
+      },
     }
   },
 
@@ -157,6 +273,7 @@ export default {
   },
 
   methods:{
+
     parseTab(){
       let tabs = this.tabId.split('@');
       this.type_code = tabs[1];
@@ -164,14 +281,24 @@ export default {
       this.is_open_city = tabs[2];
       if(this.type_code === 'product'){
         this.type_other = Number(tabs[3]);
-        if(this.type_other === 2) this.skeletonCount = 20
+        if(this.type_other === 2) this.skeletonCount = 12
+        else this.skeletonCount = 6
+      }
+      else {
+        this.skeletonCount = 6;
+        this.type_other = null
       }
-      else this.type_other = null
     },
 
     handleClear(){
+      this.is_open_city = 'N';
+      this.dataConfig = null;
       this.page_token = '1';
       this.dataList = null;
+      this.productTowList = {
+        left:null,
+        right:null,
+      }
     },
 
     getParentMV(){
@@ -198,6 +325,32 @@ export default {
       this.$emit('on-list', {
         params:this.getParams,
         cb:(res)=>{
+          this.dataConfig = res;
+
+          //整理为统一ID
+          res.items = res.items.map((item,index)=>{
+            if(!item.id){
+              item.id = item.product_id || item.resource_shop_id || item.cinema_id
+            }
+            //item.list_title = `${index} - ${ item.list_title}`
+            return item;
+          })
+
+          //商品模式并且为两列功能
+          if(this.type_code === 'product' && this.type_other === 2){
+            let right = [], left=[];
+            res.items.map((item,index) =>{
+              item.testiIndex = index
+              if(index%2===0) left.push(item);
+              else right.push(item);
+            })
+            this.productTowList = {
+              left:(this.productTowList.left ||[]).concat(left),
+              right:(this.productTowList.right ||[]).concat(right)
+            };
+          }
+          this.dataList = (this.dataList||[]).concat(res.items);
+          this.page_token = res.next_page_token
           this.$xdHideLoading();
         }
       })
@@ -218,4 +371,12 @@ export default {
   .productItemCell2 {
 
   }
+
+  .productBox2 {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-flow: wrap;
+  }
+
 </style>

package/src/components/JfbBaseTfkSearch/JfbBaseTfkSearch.vue

@@ -15,9 +15,32 @@
     <!-- #endif -->
     <view class="jfb-base-tfk-search__body">
       <view class="x-line"></view>
+      <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 class="tfk-search" :style="{padding: outSpacing + 'rpx'}">
-        <view>测试插件( {{containerId}} )</view>
+        <all-list v-if="!tabId"
+          @on-parent-vm="handleParentVm"
+          @on-list="handleList"
+        ></all-list>
         <custom-list
+          v-else
           :tab-id="tabId"
           :keyword="keyword"
           ref="customList"
@@ -39,12 +62,14 @@
   import listMixins from "./listMixins";
   import CustomList from "./CustomList.vue";
   import search from './search';
+  import AllList from "./AllList.vue";
 
   export default {
     name: "JfbBaseTfkSearch",
     components: {
       CustomList,
-      XdFontIcon
+      XdFontIcon,
+      AllList
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkSearchMixin,listMixins
@@ -52,15 +77,79 @@
     data() {
       return {
         hideMask: true,
-        tabId: '1@product@Y@1',
+        tabId: '10@cinema@Y@1', //cinema/film/shop/product
         keyword: '',
         options:{},
-
-
+        menuList: [],
         //公共样式
         outSpacing:20,
+
+        //面板
+        menuMargin: {},
+        menuPadding: {},
+        menuBgColor: {},
+        menuItemPadding: {},
+        menuTabColor: {},
+        menuBorderWidth: 1,
+        menuItemMargin: 40,
+        searchScope: [],
       }
     },
+    computed: {
+      showMenuList(){
+        return [{label: "全部", value: ""}, ...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`;
+        return this.styleObjectToString({
+          padding: padding,
+        })
+      },
+      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;
@@ -82,23 +171,26 @@
        * @param cb {Function}
        */
       handleList({params, cb}){
-        let time = this.$xdUniHelper.random(8,20) * 100;
-        setTimeout(()=>{
-          cb(search)
-        }, time)
+        let data = {...params};
+        if(this.tabId === ''){
+          data['search_range'] = this.menuList.map(item => item.value).join(',');
+        }
+
+        jfbRootExec("getTfkSearchList", {
+          vm: this,
+          data: data
+        }).then(res => {
+          if(this.tabId === ''){
+            cb(res.list)
+          }else{
+            cb(res.list[0])
+          }
+        })
       },
 
       onJfbLoad(options) {
         this.options = options;
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
 
-        //   }
-
-        // }).then().catch()
       },
       /**
        * @description 监听事件变化
@@ -106,10 +198,24 @@
        */
       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', []);
+
+        if(this.$configProject['isPreview']){
+          this.menuList = this.searchScope;
+        }
+      },
+      handleSwitchMenu(item){
+        this.tabId = item.value;
       },
-
       onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+        // console.log('event.onJfbScroll', options)
       },
 
       onJfbShow(options) {
@@ -137,7 +243,13 @@
 
   .jfb-base-tfk-search {
     &__body{
-
+      .menu_wrap{
+        box-sizing: border-box;
+      }
+      .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

@@ -17,7 +17,7 @@ export default {
 
 <style scoped lang="less">
 .skeleton-wrap-item {
-  height: 220rpx;
+  height: 200rpx;
   display: block;
 
   & > .title {
@@ -32,7 +32,6 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-top: 30rpx;
 
     & > .local {
       .skeleton-item(120rpx, 30rpx);