jufubao-base 1.0.169-beta2 → 1.0.169-beta21

package/src/components/JfbBaseTfkSearch/JfbBaseTfkSearch.vue

@@ -14,86 +14,325 @@
     </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: menuHeight}"></view>
+        <view class="tfk-search" :style="{padding: outSpacing + 'rpx'}">
+          <all-list v-if="tabId === 'all'"
+            :keyword="keyword"
+            :list-item-style="listItemStyle"
+            :product-config="productConfig"
+            :all-style="allStyle"
+            @on-parent-vm="handleParentVm"
+            @on-list="handleList"
+            @on-switch="handleSwitchMenu"
+          ></all-list>
+          <custom-list
+            :tab-id="tabId"
+            :keyword="keyword"
+            :list-item-style="listItemStyle"
+            :product-config="productConfig"
+            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 AllList from "./AllList.vue";
+
+  class EmitParent {
+    constructor(options) {
+      this.options = options;
+    }
+  }
+
   export default {
     name: "JfbBaseTfkSearch",
     components: {
-      XdFontIcon
+      CustomList,
+      XdFontIcon,
+      AllList,
+      XdSearchHistory
     },
     mixins: [
-      componentsMixins, extsMixins, JfbBaseTfkSearchMixin
+      componentsMixins, extsMixins, JfbBaseTfkSearchMixin,listMixins
     ],
     data() {
       return {
+        hideMask: true,
+        tabId: 'all', //cinema/film/shop/product
+        keyword: '',
+        options:{},
+        menuList: [],
+        //公共样式
+        outSpacing:20,
+        isPreview: false,
+
+        //面板
+        menuMargin: {},
+        menuPadding: {},
+        menuBgColor: {},
+        menuItemPadding: {},
+        menuTabColor: {},
+        menuBorderWidth: 1,
+        menuItemMargin: 40,
+        searchScope: [],
+        allListBgColor: "",
+        allModulePadding: {},
+        allModuleRadius: 0,
+        allModuleTitleBgColor: {},
+        allModuleTitlePadding: {},
+        allModuleMoreStyle: "",
+        allModuleMargin: 20,
+        allModuleTitleStyle: "",
+        allModuleItemContBorder: {},
+        allModuleItemContMargin: 20,
+        allModuleItemContShadow: {},
+        allModuleItemContPadding: {},
+        allModuleItemContRadius: 16,
+        allModuleItemContBgColor: "#FFFFFF",
+        emitParent:{},
+      }
+    },
+    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',
+        }
 
-        //todo
+        return this.styleObjectToString(styleObj)
+      },
+      menuHeight(){
+        const { menuItemPadding, menuPadding, menuMargin } = this;
+        let height = this.checkValue(menuMargin.top, 20) + this.checkValue(menuMargin.bottom, 20) +
+          this.checkValue(menuPadding.top, 20) + this.checkValue(menuPadding.bottom, 20) +
+          this.checkValue(menuItemPadding.top, 20) + this.checkValue(menuItemPadding.bottom, 20);
+        return (height + 40) + 'rpx';
+      },
+      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)
+      },
+      allStyle(){
+        return {
+          allListBgColor: this.allListBgColor,
+          allModulePadding: this.allModulePadding,
+          allModuleRadius: this.allModuleRadius,
+          allModuleTitleBgColor: this.allModuleTitleBgColor,
+          allModuleTitlePadding: this.allModuleTitlePadding,
+          allModuleMoreStyle: this.allModuleMoreStyle,
+          allModuleMargin: this.allModuleMargin,
+          allModuleTitleStyle: this.allModuleTitleStyle,
+          allModuleItemContBorder: this.allModuleItemContBorder,
+          allModuleItemContMargin: this.allModuleItemContMargin,
+          allModuleItemContShadow: this.allModuleItemContShadow,
+          allModuleItemContPadding: this.allModuleItemContPadding,
+          allModuleItemContRadius: this.allModuleItemContRadius,
+          allModuleItemContBgColor: this.allModuleItemContBgColor
+        }
       }
     },
     watch: {
       container(value, oldValue) {
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']) this.init(value)
+        if (this.$configProject['isPreview']){
+          this.init(value);
+          this.cusInit(value)
+        }
       },
     },
     created() {
+      this.emitParent = new EmitParent({
+        getParent: ()=>{
+          return this;
+        }
+      })
       this.init(this.container);
-
-      //todo
+      this.cusInit(this.container);
     },
-    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 === 'all'){
+          data['search_range'] = this.searchScope.map(item => item.value.split("@")[0]).join(',');
+        }
 
-        //   }
+        jfbRootExec("getTfkSearchList", {
+          vm: this,
+          data: data
+        }).then(res => {
+          if(this.tabId === 'all'){
+            if(!this.$configProject['isPreview']){
+              res = this.filtersResData(res);
+              this.menuList = res.tabs;
+            }
+            cb(res.list)
+          }else{
+            if(this.isPreview){
+              return cb(res.list.find(item => item.type === this.tabId.split("@")[1]))
+            }
+            if(res.list.length > 0) {
+              cb(res.list[0])
+            }
+            else cb(null)
+          }
+        }).catch((e)=>{
+          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.allModuleRadius = getContainerPropsValue(container, 'content.allModuleRadius', 0);
+        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.allModuleItemContBorder = getContainerPropsValue(container, 'content.allModuleItemContBorder', {});
+        this.allModuleItemContMargin = getContainerPropsValue(container, 'content.allModuleItemContMargin', 20);
+        this.allModuleItemContShadow = getContainerPropsValue(container, 'content.allModuleItemContShadow', {});
+        this.allModuleItemContPadding = getContainerPropsValue(container, 'content.allModuleItemContPadding', {});
+        this.allModuleItemContRadius = getContainerPropsValue(container, 'content.allModuleItemContRadius', 16);
+        this.allModuleItemContBgColor = getContainerPropsValue(container, 'content.allModuleItemContBgColor', '#FFFFFF');
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+        if(this.$configProject['isPreview']){
+          this.menuList = this.searchScope;
+          this.keyword = "搜索关键字";
+          this.isPreview = true;
+        }
       },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
+      handleSwitchMenu(item){
+        this.tabId = item.value;
       },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
+      handleToSearch(item){
+        this.keyword = item;
       },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
+      onJfbScroll(options) {
+        // console.log('event.onJfbScroll', options)
       },
+
       onJfbBack(options) {
-        console.log('event.onJfbBack', options)
+       this.$xdUniHelper.navigateBack()
       },
-      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 = 'all';
+          this.$refs.searchHistory.addHistory(data);
+        }
       },
     }
   }
@@ -105,7 +344,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,244 @@
-'use strict';
+"use strict";
 
 module.exports = {
-  
-  getTfkByIdFilmSquate:{},
-  
-  updateTfkFilmPaiqiDate:{},
-  
-  removeTfkFilmAddress:{},
-  
-  addTfkFilmcart:{},
-  
-}
+  getTfkSearchList: {
+    list: [
+      {
+        tab: "1@product@Y@2",
+        type: "product",
+        name: "蛋糕",
+        detail_redirect_data:
+          '{"dir":"market","host":"sandbox-website-05.jufubao.cn","path":"\\/main\\/mall\\/detail","appType":"h5","site_id":"17928cc37788be02","site_url":"https:\\/\\/sandbox-website-05.jufubao.cn\\/market\\/main\\/mall\\/detail","frontPath":"\\/market\\/main\\/mall\\/detail","fixed_business_code":""}',
+        detail1_redirect_data: "",
+        more_redirect_data: "",
+        sort: 3,
+        setting_id: 1,
+        next_page_token: 'a:2:{i:0;d:704.99896;i:1;s:8:"60030078";}',
+        items: [
+          {
+            brand_id: 100003,
+            brand_name: "品牌jls0519",
+            list_title: "3",
+            market_price: 2000,
+            market_tags: ['flashsale','hot','new', 'rec'],
+            product_id: 60030143,
+            product_name: "仅快递实物商品（北京廊坊支持配送）",
+            product_type: "good",
+            promo_price: 0,
+            sale_num: 8,
+            sale_price: 3000,
+            status: "ok",
+            thumb: "/uploads/20231215/b2ce0235129aa592044f96343f25c338.jpeg",
+          },
+          {
+            brand_id: 30000,
+            brand_name: "其他",
+            list_title: "清代戏剧文化史论/北京大学明清研究丛书",
+            market_price: 2600,
+            market_tags: ['flashsale','hot','new', 'rec'],
+            product_id: 60029756,
+            product_name: "清代戏剧文化史论/北京大学明清研究丛书",
+            product_type: "good",
+            promo_price: 0,
+            sale_num: 0,
+            sale_price: 2195,
+            status: "ok",
+            thumb:
+              "https://img1.winxuancdn.com/1305/10251305_9.jpg?1530683968642"
+          },
+          {
+            brand_id: 30000,
+            brand_name: "其他",
+            list_title: "亚洲的崛起(傅骊元文集)/北京大学经济学院教授文库",
+            market_price: 5000,
+            market_tags: [],
+            product_id: 60030080,
+            product_name: "亚洲的崛起(傅骊元文集)/北京大学经济学院教授文库",
+            product_type: "good",
+            promo_price: 0,
+            sale_num: 0,
+            sale_price: 4219,
+            status: "ok",
+            thumb:
+              "https://img2.winxuancdn.com/9564/10309564_9.jpg?1530754178039"
+          },
+          {
+            brand_id: 30000,
+            brand_name: "其他",
+            list_title:
+              "保险.社会保障与经济改革(孙祁祥文集)/北京大学经济学院教授文库",
+            market_price: 5200,
+            market_tags: [],
+            product_id: 60030078,
+            product_name:
+              "保险.社会保障与经济改革(孙祁祥文集)/北京大学经济学院教授文库",
+            product_type: "good",
+            promo_price: 0,
+            sale_num: 0,
+            sale_price: 4388,
+            status: "ok",
+            thumb:
+              "https://img3.winxuancdn.com/9416/10309416_9.jpg?1530754178039"
+          }
+        ]
+      },
+      {
+        tab: "5@shop@N@1",
+        type: "shop",
+        name: "门店",
+        detail_redirect_data:
+          '{"dir":"market","host":"sandbox-website-05.jufubao.cn","path":"\\/main\\/cake\\/storedetail","appType":"h5","site_id":"17928cc37788be02","site_url":"https:\\/\\/sandbox-website-05.jufubao.cn\\/market\\/main\\/cake\\/storedetail","frontPath":"\\/market\\/main\\/cake\\/storedetail","fixed_business_code":""}',
+        detail1_redirect_data:
+          '{"dir":"market","host":"sandbox-website-05.jufubao.cn","path":"\\/main\\/cashier\\/index","appType":"h5","site_id":"17928cc37788be02","site_url":"https:\\/\\/sandbox-website-05.jufubao.cn\\/market\\/main\\/cashier\\/index","frontPath":"\\/market\\/main\\/cashier\\/index","fixed_business_code":""}',
+        more_redirect_data: "",
+        sort: 4,
+        setting_id: 5,
+        next_page_token: "a:2:{i:0;d:20670.991802209974;i:1;d:0;}",
+        items: [
+          {
+            brand_id: 20003,
+            brand_name: "幸福西饼",
+            brand_type: "MA",
+            business_status: "1",
+            consume_mode: ["STOD", "CODE", "SELL", "SELF"],
+            consume_mode_name: "",
+            distance: "21km",
+            is_support_jhd: true,
+            address: "河北廊坊市三河市燕郊镇河北廊坊燕郊润旭",
+            province_name: "",
+            city_name: "",
+            area_name: "",
+            street_name: "",
+            phone: "18843854566",
+            resource_shop_id:
+              "eyJyZXNvdXJjZV9zaG9wX2lkIjozMTg1NDY4LCJzaG9wX2lkIjo1MjY0OH0",
+            resource_shop_name: "福司令渠道门店",
+            shop_icon:
+              "https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20220629/dda58a5983eeae3cfdea8bccc7cea714.jpg",
+            shop_id: 52648,
+            shop_tags: [],
+            stars: 0,
+            time_slot_name: "08:00-21:00",
+            params: {
+              version: 2
+            }
+          },
+          {
+            brand_id: 20004,
+            brand_name: "幸福西饼",
+            brand_type: "MA",
+            business_status: "1",
+            consume_mode: ["STOD", "CODE", "SELL", "SELF"],
+            consume_mode_name: "",
+            distance: "21km",
+            is_support_jhd: false,
+            address: "河北廊坊市三河市燕郊镇河北廊坊燕郊润旭",
+            province_name: "",
+            city_name: "",
+            area_name: "",
+            street_name: "",
+            phone: "18843854566",
+            resource_shop_id:
+              "eyJyZXNvdXJjZV9zaG9wX2lkIjozMTg1NDY4LCJzaG9wX2lkqewqweH0",
+            resource_shop_name: "福司令渠道门店",
+            shop_icon:
+              "https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20220629/dda58a5983eeae3cfdea8bccc7cea714.jpg",
+            shop_id: 526428,
+            shop_tags: [],
+            stars: 0,
+            time_slot_name: "08:00-21:00",
+            params: {
+              version: 2
+            }
+          }
+        ]
+      },
+      {
+        tab: "10@cinema@Y@1",
+        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: 1,
+        setting_id: 10,
+        next_page_token: 1,
+        items: [
+          {
+            address: "河北省廊坊市三河市燕郊经济技术开发区汉王路34号",
+            brand_id: 16,
+            brand_name: "万达院线jls",
+            cinema_id: 8000121,
+            cinema_name: "电影门店jls-20231204（新建）北京",
+            cinema_type: ["SELL", "CODE"],
+            cinema_type_name: ["线下核销", "电子码"],
+            distance: "21.9km",
+            is_open: "Y",
+            shop_icon:
+              "https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20221018/5c1f49a47055a452ac6c5a3efd9d5174.jpg"
+          },
+          {
+            address: "燕高路西侧实验小学南侧",
+            brand_id: 16,
+            brand_name: "万达院线jls",
+            cinema_id: 7,
+            cinema_name:
+              "聚福宝测试影院聚福宝测试影院聚福宝测试影院聚福宝测试影院",
+            cinema_type: ["SEAT", "SELL"],
+            cinema_type_name: ["在线选座", "线下核销"],
+            distance: "20.8km",
+            is_open: "Y",
+            shop_icon:
+              "https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20221018/5c1f49a47055a452ac6c5a3efd9d5174.jpg"
+          }
+        ]
+      },
+      {
+        tab: "11@film@Y@1",
+        type: "film",
+        name: "影片",
+        detail_redirect_data:
+          '{"dir":"market","host":"sandbox-website-05.jufubao.cn","path":"\\/main\\/movie\\/choose","appType":"h5","site_id":"17928cc37788be02","site_url":"https:\\/\\/sandbox-website-05.jufubao.cn\\/market\\/main\\/movie\\/choose","frontPath":"\\/market\\/main\\/movie\\/choose","fixed_business_code":""}',
+        detail1_redirect_data:
+          '{"dir":"market","host":"sandbox-website-05.jufubao.cn","path":"\\/main\\/movie\\/detail","appType":"h5","site_id":"17928cc37788be02","site_url":"https:\\/\\/sandbox-website-05.jufubao.cn\\/market\\/main\\/movie\\/detail","frontPath":"\\/market\\/main\\/movie\\/detail","fixed_business_code":""}',
+        more_redirect_data: "",
+        sort: 2,
+        setting_id: 11,
+        next_page_token: 1,
+        items: [
+          {
+            film_id: 130,
+            director: "",
+            is_can_buy: false,
+            language: "汉语普通话",
+            leading_role:
+              "费翔,李雪健,黄渤,于适,陈牧驰,娜然,此沙,武亚凡,夏雨,袁泉,王洛勇,侯雯元,黄曦彦,李昀锐,杨玏,陈坤",
+            open_time: 1689782400,
+            poster:
+              "https://gw.alicdn.com/tfscom/i1/O1CN01w8TjZl1xzSq3CothJ_!!6000000006514-0-alipicbeacon.jpg_320x320.jpg",
+            remark: "9.1分",
+            show_name: "封神第一部",
+            type: "剧情,奇幻"
+          },
+          {
+            film_id: 131,
+            director: "",
+            is_can_buy: false,
+            language: "汉语普通话",
+            leading_role:
+              "费翔,李雪健,黄渤,于适,陈牧驰,娜然,此沙,武亚凡,夏雨,袁泉,王洛勇,侯雯元,黄曦彦,李昀锐,杨玏,陈坤",
+            open_time: 1689782400,
+            poster:
+              "https://gw.alicdn.com/tfscom/i1/O1CN01w8TjZl1xzSq3CothJ_!!6000000006514-0-alipicbeacon.jpg_320x320.jpg",
+            remark: "9.1分",
+            show_name: "封神第二部",
+            type: "剧情,奇幻"
+          }
+        ]
+      }
+    ],
+    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>
+