jufubao-base 1.0.169-beta9 → 1.0.170

package/src/components/JfbBaseTfkSearch/CustomList.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="custom-list">
+  <view class="custom-list" v-if="parentStatus">
     <view v-if="dataList === null">
       <view :class="{productBoxCell2: type_other === 2 }">
         <view
@@ -8,22 +8,22 @@
           :class="{productItemCell2: type_other === 2 }"
           :key="item"
           :style="{
-            marginBottom:$parentVm.outSpacing + 'rpx',
+            marginBottom:listItemStyle.outSpacing + 'rpx',
             padding:contMarginComp,
-            borderRadius:$parentVm.contRradius+ 'rpx',
+            borderRadius:listItemStyle.contRradius+ 'rpx',
             boxShadow:'0 0 10rpx rgba(0,0,0,0.1)',
             width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
           }"
         >
           <skeleton-product
             :cell="type_other"
-            v-if="$parentVm.productConfig !== null && type_code === 'product'"
-            :product-config="$parentVm.productConfig"
-            :out-spacing="$parentVm.outSpacing"
+            v-if="productConfig !== null && type_code === 'product'"
+            :product-config="productConfig"
+            :out-spacing="listItemStyle.outSpacing"
             :height="outItemProduct"
           ></skeleton-product>
-          <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-shop v-if="type_code === 'shop'" :out-spacing="listItemStyle.outSpacing"></skeleton-shop>
+          <skeleton-film v-if="type_code === 'film'" :out-spacing="listItemStyle.outSpacing"></skeleton-film>
           <skeleton-cinema v-if="type_code === 'cinema'"></skeleton-cinema>
         </view>
       </view>
@@ -32,28 +32,29 @@
       <template v-if="type_other !== 2">
         <view
           v-for="item in dataList"
-          :key="item.id"
+          :key="item.cuid"
           :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
-        }">
+            marginBottom:listItemStyle.outSpacing + 'rpx',
+            padding:contMarginComp,
+            borderRadius:listItemStyle.contRradius+ 'rpx',
+            border: listItemStyle.contBorder,
+            boxShadow:listItemStyle.contShadow,
+            width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
+            height: heightRpx,
+            backgroundColor: listItemStyle.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)}"
+            :out-spacing="listItemStyle.outSpacing"
+            :color="listItemStyle.mainColor"
+            :border-radius="listItemStyle.imgRradius"
+            @on-film-detail="handleFilmDetail"
+            @on-buy="handleBuy"
           ></content-film>
           <content-cinema
             v-if="type_code === 'cinema'"
@@ -61,36 +62,37 @@
             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)}"
+            :out-spacing="listItemStyle.outSpacing"
+            :color="{SEAT:listItemStyle.mainColor,CODE:listItemStyle.subMainColor,SELL:listItemStyle.successColor}"
+            :border-radius="listItemStyle.imgRradius"
+            @on-schedule="handleSchedule"
+            @on-cashier-detail="handleCashierDetail"
+            @on-code-detail="handleCodeDetail"
           ></content-cinema>
           <content-shop
             v-if="type_code === 'shop'"
             style="width: 100%; height: 100%"
             :keyword="keyword"
-            :out-spacing="$parentVm.outSpacing"
+            :out-spacing="listItemStyle.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)}"
+            :color="listItemStyle.mainColor"
+            :border-radius="listItemStyle.imgRradius"
+            :is-echange="'Y' || listItemStyle.isShowExchange"
+            @on-shop-jhd="handleShopJhd"
+            @on-shop-detail="handleShopDetail"
           ></content-shop>
           <content-product
-            v-if="$parentVm.productConfig !== null && type_code === 'product'"
+            v-if="productConfig !== null && type_code === 'product'"
             style="width: 100%; height: 100%"
-            :product-config="$parentVm.productConfig"
-            :out-spacing="$parentVm.outSpacing"
+            :keyword="keyword"
+            :product-config="productConfig"
+            :out-spacing="listItemStyle.outSpacing"
             :item="item"
-            :height="outItemProduct"
-            :color="$parentVm.mainColor"
-            :border-radius="$parentVm.imgRradius"
+            :brand-color="listItemStyle.brandColor"
+            :color="listItemStyle.mainColor"
+            :border-radius="listItemStyle.imgRradius"
             :cell="type_other"
-            @on-product-detail="(product)=>{$parentVm.handleProductDetail(product,dataConfig)}"
+            @on-product-detail="handleProductDetail"
           ></content-product>
         </view>
       </template>
@@ -99,34 +101,36 @@
           <view
             v-if="productTowList[listKey] !== null"
             v-for="item in productTowList[listKey]"
-            :key="item.id"
+            :key="item.cuid"
             :style="{
-              marginBottom:$parentVm.outSpacing + 'rpx',
+              marginBottom:listItemStyle.outSpacing + 'rpx',
               padding:contMarginComp,
-              borderRadius:$parentVm.contRradius+ 'rpx',
-              border: $parentVm.contBorder,
-              boxShadow:$parentVm.contShadow,
+              borderRadius:listItemStyle.contRradius+ 'rpx',
+              border: listItemStyle.contBorder,
+              boxShadow:listItemStyle.contShadow,
               width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
               height: heightRpx,
-              backgroundColor: $parentVm.contBgColor
+              backgroundColor: listItemStyle.contBgColor
             }"
           >
             <content-product
-              v-if="$parentVm.productConfig !== null"
+
+              v-if="productConfig !== null"
               style="width: 100%; height: 100%"
-              :product-config="$parentVm.productConfig"
-              :out-spacing="$parentVm.outSpacing"
+              :keyword="keyword"
+              :product-config="productConfig"
+              :out-spacing="listItemStyle.outSpacing"
               :item="item"
               :height="outItemProduct"
-              :color="$parentVm.mainColor"
-              :border-radius="$parentVm.imgRradius"
+              :color="listItemStyle.mainColor"
+              :brand-color="listItemStyle.brandColor"
+              :border-radius="listItemStyle.imgRradius"
               :cell="type_other"
-              @on-product-detail="(product)=>{$parentVm.handleProductDetail(product,dataConfig)}"
+              @on-product-detail="handleProductDetail"
             ></content-product>
           </view>
         </view>
       </view>
-
     </view>
   </view>
 </template>
@@ -159,6 +163,14 @@ export default {
       type:String,
       default:'',
     },
+    listItemStyle:{
+      type:Object|null,
+      default:null,
+    },
+    productConfig:{
+      type:Object|null,
+      default:null,
+    },
     tabId:{
       type:String,
       required:true
@@ -196,17 +208,19 @@ export default {
       return params
     },
     contMarginComp(){
-      let str = `${this.$parentVm.checkValue(this.$parentVm.contMargin.top, 20)}rpx`;
-      str = `${str} ${this.$parentVm.checkValue(this.$parentVm.contMargin.right, 20)}rpx`;
-      str = `${str} ${this.$parentVm.checkValue(this.$parentVm.contMargin.bottom, 20)}rpx`;
-      str = `${str} ${this.$parentVm.checkValue(this.$parentVm.contMargin.left, 20)}rpx`;
+      if(this.getParent === null) return 0
+      let str = `${this.getParent().checkValue(this.listItemStyle.contMargin.top, 20)}rpx`;
+      str = `${str} ${this.getParent().checkValue(this.listItemStyle.contMargin.right, 20)}rpx`;
+      str = `${str} ${this.getParent().checkValue(this.listItemStyle.contMargin.bottom, 20)}rpx`;
+      str = `${str} ${this.getParent().checkValue(this.listItemStyle.contMargin.left, 20)}rpx`;
       return str
     },
     outItemProduct(){
+      if(this.getParent === null) return 0
       //获取每列元素最大宽度
-      let num = (750 - 3 * Number(this.$parentVm.outSpacing))/2;
-      num = num - this.$parentVm.checkValue(this.$parentVm.contMargin.right, 20) - this.$parentVm.checkValue(this.$parentVm.contMargin.left, 20);
-      return num - this.$parentVm.contBorderWidth * 2
+      let num = (750 - 3 * Number(this.listItemStyle.outSpacing))/2;
+      num = num - this.getParent().checkValue(this.listItemStyle.contMargin.right, 20) - this.getParent().checkValue(this.listItemStyle.contMargin.left, 20);
+      return num - this.listItemStyle.contBorderWidth * 2
     },
     heightRpx(){
       let h = 'auto'
@@ -218,7 +232,8 @@ export default {
   },
   data(){
     return {
-      $parentVm:null,
+      /**@type Function|null**/
+      getParent:null,
       parentStatus: false,
       skeletonCount: 6,
       hasNoData: false,
@@ -257,7 +272,9 @@ export default {
         this.onCusReloadList();
       },500)
     },
+
     tabId(){
+      this.handleClear();
       this.parseTab()
       this.onCusReloadList();
     },
@@ -280,17 +297,17 @@ export default {
     parseTab(){
       let tabs = this.tabId.split('@');
       this.type_code = tabs[1];
-      this.search_range =  tabs[0]
-      this.is_open_city = tabs[2];
       if(this.type_code === 'product'){
         this.type_other = Number(tabs[3]);
-        if(this.type_other === 2) this.skeletonCount = 12
+        if(this.type_other === 2) this.skeletonCount = 6
         else this.skeletonCount = 6
       }
       else {
         this.skeletonCount = 6;
         this.type_other = null
       }
+      this.search_range =  tabs[0]
+      this.is_open_city = tabs[2];
     },
 
     handleClear(){
@@ -305,14 +322,14 @@ export default {
     },
 
     getParentMV(){
-      this.$emit('on-parent-vm', ($vm)=>{
-        this.$parentVm = $vm;
+      this.$emit('on-parent-vm', (getParent)=>{
+        this.getParent = getParent;
         this.parentStatus = true;
       })
     },
 
     onCusReachBottom(){
-      if(!this.page_token) return false;
+      if(this.dataList === null || !this.page_token) return false;
       this.getList();
     },
 
@@ -322,8 +339,9 @@ export default {
       this.getList();
     },
 
-
     getList(){
+      let time = new Date().getTime();
+
       //无关键字不搜索
       if(this.keyword === '') {
         return;
@@ -332,12 +350,12 @@ export default {
       this.$emit('on-list', {
         params:this.getParams,
         cb:(res)=>{
-
+          console.log(new Date().getTime()-time);
           //无数据处理
           if(res === null){
             this.hasNoData = true;
             this.dataList = [];
-            this.page_token = ''
+            this.page_token = '1'
             this.$xdHideLoading();
             return
           }
@@ -347,10 +365,7 @@ export default {
 
           //整理为统一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}`
+            item.cuid = `${this.$xdUniHelper.randomChar(5)}_${item.product_id || item.resource_shop_id || item.cinema_id || item.film_id}`
             return item;
           })
 
@@ -370,10 +385,47 @@ export default {
           this.dataList = (this.dataList||[]).concat(res.items);
           this.page_token = res.next_page_token
           this.hasNoData = false;
-          this.$xdHideLoading();
+          this.$nextTick(()=>{
+            setTimeout(()=>{
+              this.$xdHideLoading();
+            },300)
+          })
         }
       })
-    }
+    },
+
+    //影片
+    handleFilmDetail(film){
+      this.getParent().handleFilmDetail(film, this.dataConfig)
+    },
+    handleBuy(film){
+      this.getParent().handleBuy(film, this.dataConfig)
+    },
+
+    //影院
+    handleSchedule(cinema){
+      this.getParent().handleSchedule(cinema, this.dataConfig)
+    },
+    handleCashierDetail(cinema){
+      this.getParent().handleCashierDetail(cinema, this.dataConfig)
+    },
+    handleCodeDetail(cinema){
+      this.getParent().handleCodeDetail(cinema, this.dataConfig)
+    },
+
+    //门店
+    handleShopJhd(shop){
+      this.getParent().handleShopJhd(shop, this.dataConfig)
+    },
+    handleShopDetail(shop){
+      this.getParent().handleShopDetail(shop, this.dataConfig)
+    },
+
+    //商品
+    handleProductDetail(product){
+      this.getParent().handleProductDetail(product, this.dataConfig)
+    },
+
   }
 }
 </script>