jufubao-base 1.0.174-beta1 → 1.0.174-beta10

package/src/components/JfbBaseTfkSearch/AllList.vue

@@ -1,78 +1,81 @@
 <template>
   <view class="search_all_list" >
-    <view class="module_item" v-for="parent in list" :key="parent.setting_id"
-      :style="moduleItemStyle"
-    >
-      <view class="module_title" :style="moduleItemTitleStyle">{{ parent.name }}</view>
-      <view v-if="parent.type !== 'product'" class="module_cont">
-        <view v-for="(item, i) in parent.items" :key="item.key"
-          class="module_cont_inner"
-          :style="moduleItemContStyle"
-        >
-          <content-cinema v-if="parent.type === 'cinema'"
-            style="width: 100%; height: 100%"
-            :keyword="keyword"
-            :item="item"
-            :out-spacing="listItemStyle.outSpacing"
-            :color="{SEAT:listItemStyle.mainColor,CODE:listItemStyle.subMainColor,SELL:listItemStyle.successColor}"
-            :border-radius="listItemStyle.imgRradius"
-            :brand-color="listItemStyle.brandColor"
-            @on-schedule="handleFilmDetail"
-            @on-cashier-detail="handleCashierDetail"
-            @on-code-detail="handleCodeDetail"
-          ></content-cinema>
-          <content-film v-if="parent.type === 'film'"
-            type="hot"
-            style="width: 100%; height: 100%"
-            :keyword="keyword"
-            :item="item"
-            :out-spacing="listItemStyle.outSpacing"
-            :color="listItemStyle.mainColor"
-            :border-radius="listItemStyle.imgRradius"
-            :brand-color="listItemStyle.brandColor"
-            @on-film-detail="handleFilmDetail"
-            @on-buy="handleBuy"
-          ></content-film>
-          <content-shop v-if="parent.type === 'shop'"
-            style="width: 100%; height: 100%"
-            :keyword="keyword"
-            :item="item"
-            :out-spacing="listItemStyle.outSpacing"
-            :color="listItemStyle.mainColor"
-            :border-radius="listItemStyle.imgRradius"
-            :brand-color="listItemStyle.brandColor"
-            :is-echange="'Y' || listItemStyle.isShowExchange"
-            @on-shop-jhd="handleShopJhd"
-            @on-shop-detail="handleShopDetail"
-          ></content-shop>
+    <template v-if="!loadingList">
+      <view class="module_item" v-for="(parent, pi) in list" :key="parent.setting_id"
+        :style="moduleItemStyle"
+      >
+        <view class="module_title" :style="moduleItemTitleStyle">{{ parent.name }}</view>
+        <view v-if="parent.type !== 'product'" class="module_cont">
+          <view v-for="(item, i) in parent.items" :key="item.key"
+            class="module_cont_inner"
+            :style="[moduleItemContStyle]"
+          >
+            <content-cinema v-if="parent.type === 'cinema'"
+              style="width: 100%; height: 100%"
+              :keyword="keyword"
+              :item="item"
+              :out-spacing="listItemStyle.outSpacing"
+              :color="{SEAT:listItemStyle.mainColor,CODE:listItemStyle.subMainColor,SELL:listItemStyle.successColor}"
+              :border-radius="listItemStyle.imgRradius"
+              :brand-color="listItemStyle.brandColor"
+              @on-schedule="data => handleSchedule(data, parent)"
+              @on-cashier-detail="data => handleCashierDetail(data, parent)"
+              @on-code-detail="data => handleCodeDetail(data, parent)"
+            ></content-cinema>
+            <content-film v-if="parent.type === 'film'"
+              type="hot"
+              style="width: 100%; height: 100%"
+              :keyword="keyword"
+              :item="item"
+              :out-spacing="listItemStyle.outSpacing"
+              :color="listItemStyle.mainColor"
+              :border-radius="listItemStyle.imgRradius"
+              :brand-color="listItemStyle.brandColor"
+              @on-film-detail="data => handleFilmDetail(data, parent)"
+              @on-buy="data => handleBuy(data, parent)"
+            ></content-film>
+            <content-shop v-if="parent.type === 'shop'"
+              style="width: 100%; height: 100%"
+              :keyword="keyword"
+              :item="item"
+              :out-spacing="listItemStyle.outSpacing"
+              :color="listItemStyle.mainColor"
+              :border-radius="listItemStyle.imgRradius"
+              :brand-color="listItemStyle.brandColor"
+              :is-echange="productConfig.isShowExchange"
+              @on-shop-jhd="data => handleShopJhd(data, parent)"
+              @on-shop-detail="data => handleShopDetail(data, parent)"
+            ></content-shop>
+          </view>
         </view>
-      </view>
-      <view v-else class="module_cont product_wrap">
-        <view v-for="(item, i) in parent.items" :key="item.key"
-          class="module_cont_inner"
-          :style="[moduleItemContStyle, {
-            width: getProductCell(parent.tab) == 2 ? `calc(50% - ${listItemStyle.outSpacing/2}rpx)`: '100%',
-          }]"
-        >
-          <content-product v-if="parent.type === 'product'"
-            style="width: 100%; height: 100%"
-            :keyword="keyword"
-            :item="item"
-            :height="outItemProduct"
-            :product-config="productConfig"
-            :out-spacing="listItemStyle.outSpacing"
-            :color="listItemStyle.mainColor"
-            :brand-color="listItemStyle.brandColor"
-            :border-radius="listItemStyle.imgRradius"
-            :cell="getProductCell(parent.tab)"
-            @on-product-detail="handleProductDetail"
-          ></content-product>
+        <view v-else class="module_cont product_wrap">
+          <view v-for="(item, i) in parent.items" :key="item.key"
+            class="module_cont_inner"
+            :style="[moduleItemContStyle, {
+              width: getProductCell(parent.tab) == 2 ? `calc(50% - ${listItemStyle.outSpacing/2}rpx)`: '100%',
+            }]"
+          >
+            <content-product v-if="parent.type === 'product'"
+              style="width: 100%; height: 100%"
+              :keyword="keyword"
+              :item="item"
+              :height="outItemProduct"
+              :product-config="productConfig"
+              :out-spacing="listItemStyle.outSpacing"
+              :color="listItemStyle.mainColor"
+              :brand-color="listItemStyle.brandColor"
+              :border-radius="listItemStyle.imgRradius"
+              :cell="getProductCell(parent.tab)"
+              @on-product-detail="data => handleProductDetail(data, parent)"
+            ></content-product>
+          </view>
+        </view>
+        <view class="module_more">
+          <view class="more_inner" :style="moduleMoreStyle" @click="switchMenu(pi)">查看全部</view>
         </view>
       </view>
-      <view class="module_more">
-        <view class="more_inner" :style="moduleMoreStyle" @click="switchMenu(parent)">查看全部</view>
-      </view>
-    </view>
+      <xd-no-data v-if="list && list.length ===0" height="60vh" icon-type="search">商品正在上架中</xd-no-data>
+    </template>
   </view>
 </template>
 
@@ -82,13 +85,15 @@
   import ContentShop from "./ContentShop.vue"
   import ContentProduct from "./ContentProduct.vue"
   import {mapState} from "vuex";
+  import XdNoData from "@/components/XdNoData/XdNoData"
   export default{
     name: "SearchAllList",
     components: {
       ContentCinema,
       ContentFilm,
       ContentShop,
-      ContentProduct
+      ContentProduct,
+      XdNoData,
     },
     props: {
       keyword:{
@@ -152,19 +157,19 @@
       },
       moduleItemContStyle(){
         const { contBgColor, contShadow, contBorder, contMargin, contRradius, outSpacing } = this.listItemStyle;
-    
+
         let padding = `${this.checkValue(contMargin.top, 20)}rpx`;
         padding = `${padding} ${this.checkValue(contMargin.right, 20)}rpx`;
         padding = `${padding} ${this.checkValue(contMargin.bottom, 20)}rpx`;
         padding = `${padding} ${this.checkValue(contMargin.left, 20)}rpx`;
-        return this.styleObjectToString({
+        return {
           padding: padding,
           border: contBorder,
           borderRadius: contRradius + 'rpx',
           boxShadow: contShadow,
           marginBottom: outSpacing + 'rpx',
           background: contBgColor,
-        })
+        }
       },
       moduleMoreStyle(){
         const { allModuleMoreStyle } = this.allStyle;
@@ -202,11 +207,13 @@
         getParent:null,
         $parentVm:null,
         parentStatus: false,
+        loadingList: true,
 
         list: [],
       }
     },
     created(){
+      this.loadingList = true;
       this.getParentMV();
       this.getList();
     },
@@ -243,6 +250,7 @@
         this.$emit('on-list', {
           params: params,
           cb:(list)=>{
+            this.loadingList = false;
             this.list = (list || []).map(parent => {
               parent.items = parent.items.map(item => {
                 item['key'] = item.product_id || item.resource_shop_id || item.cinema_id || item.film_id;
@@ -254,41 +262,43 @@
           }
         })
       },
-      switchMenu(item){
+      switchMenu(index){
+        let item = this.list[index];
+        // console.log('switchMenu', item, pi);
         this.$emit('on-switch', {...item, value: item.tab});
       },
 
 
       //影片
-      handleFilmDetail(film){
-        this.getParent().handleFilmDetail(film, this.dataConfig)
+      handleFilmDetail(film, dataConfig){
+        this.getParent().handleFilmDetail(film, dataConfig)
       },
-      handleBuy(film){
-        this.getParent().handleBuy(film, this.dataConfig)
+      handleBuy(film, dataConfig){
+        this.getParent().handleBuy(film, dataConfig)
       },
 
       //影院
-      handleSchedule(cinema){
-        this.getParent().handleSchedule(cinema, this.dataConfig)
+      handleSchedule(cinema, dataConfig){
+        this.getParent().handleSchedule(cinema, dataConfig)
       },
-      handleCashierDetail(cinema){
-        this.getParent().handleCashierDetail(cinema, this.dataConfig)
+      handleCashierDetail(cinema, dataConfig){
+        this.getParent().handleCashierDetail(cinema, dataConfig)
       },
-      handleCodeDetail(cinema){
-        this.getParent().handleCodeDetail(cinema, this.dataConfig)
+      handleCodeDetail(cinema, dataConfig){
+        this.getParent().handleCodeDetail(cinema, dataConfig)
       },
 
       //门店
-      handleShopJhd(shop){
-        this.getParent().handleShopJhd(shop, this.dataConfig)
+      handleShopJhd(shop, dataConfig){
+        this.getParent().handleShopJhd(shop, dataConfig)
       },
-      handleShopDetail(shop){
-        this.getParent().handleShopDetail(shop, this.dataConfig)
+      handleShopDetail(shop, dataConfig){
+        this.getParent().handleShopDetail(shop, dataConfig)
       },
 
       //商品
-      handleProductDetail(product){
-        this.getParent().handleProductDetail(product, this.dataConfig)
+      handleProductDetail(product, dataConfig){
+        this.getParent().handleProductDetail(product, dataConfig)
       },
     }
   }

package/src/components/JfbBaseTfkSearch/ContentCinema.vue

@@ -114,6 +114,8 @@
     margin-bottom: 20rpx;
     color: #333;
     font-weight: 500;
+    word-wrap: break-word;
+    word-break: break-all;
   }
   .address {
     font-size: 24rpx;

package/src/components/JfbBaseTfkSearch/ContentFilm.vue

@@ -9,7 +9,7 @@
     </view>
     <view class="middle">
       <view class="top">
-        <view class="name">{{item['show_name']}}</view>
+        <view class="name" v-html="cusName"></view>
         <view class="score">
           <template v-if="item['remark']">
             <text>评分：</text><text :style="{color:color}">{{item['remark']}}</text>
@@ -61,12 +61,17 @@
 
 <script>
   import XdButton from "@/components/XdButton/XdButton.vue";
+  import handleKeyword from "./handleKeyword";
   export default {
     name:'ContentItem',
     components:{
       XdButton
     },
     props:{
+      keyword:{
+        type:String,
+        default:''
+      },
       item:Object,
       outSpacing: {
         type: Number|String,
@@ -86,6 +91,11 @@
       }
 
     },
+    computed:{
+      cusName(){
+        return handleKeyword(this, this.item['show_name'], this.keyword)
+      },
+    },
     data(){
       return {
         errorImage: 'https://img.jufubao.cn/common/error_movie.png?v20',
@@ -100,12 +110,12 @@
         this.errorStatus = true;
       },
       handleDetail(item){
-        console.log('handleDetail.item',item,item.id);
-        this.$emit('on-film-detail',item.id);
+        console.log('handleDetail.item',item,item);
+        this.$emit('on-film-detail',item);
       },
       handleBuy(item){
-        console.log('handleDetail.item',item,item.id);
-        this.$emit('on-buy',item.id);
+        console.log('handleDetail.item',item,item);
+        this.$emit('on-buy',item);
       }
     }
   }
@@ -143,6 +153,8 @@
         font-weight: 600;
         .uni-max-cut(2, 90);
         line-height: 45rpx;
+        word-wrap: break-word;
+        word-break: break-all;
       }
       & >view:nth-child(2) {
         flex-shrink: 0;

package/src/components/JfbBaseTfkSearch/ContentProduct.vue

@@ -10,13 +10,15 @@
         borderRadius: borderRadius + 'rpx',
       }"
     >
-      <image :src="imageUrl" :alt="item['product_name']"></image>
+      <image v-if="errorStatus" :src="errorImage" :alt="item['product_name']" ></image>
+      <image v-if="!errorStatus" :src="imageUrl" :alt="item['product_name']" @error="handleError()"></image>
+      <xd-product-status :status="item['status']"></xd-product-status>
     </view>
     <view class="prodcut-content" :style="{marginTop:cell === 1? 0: (outSpacing + 'rpx') }">
       <view class="prodcut-content-info">
         <view class="name" v-html="cusName" :class="{showOne: isOne}"></view>
         <view class="brand" v-if="productConfig.is_show_brand==='Y'" :style="{color:brandColor}">{{item['brand_name']}}</view>
-        <view class="tags" v-if="productConfig.isShowTag === 'Y'">
+        <view class="tags" :class="{showTwo:!isOne}" v-if="productConfig.isShowTag === 'Y'">
           <view
             v-for="tag in tagsList"
             :key="tag"
@@ -64,13 +66,15 @@
 import handleKeyword from "./handleKeyword";
 import getServiceUrl from "@/common/getServiceUrl";
 import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+import XdProductStatus from "@/components/XdProductStatus/XdProductStatus";
 import XdUnit from "@/components/XdUnit/XdUnit.vue";
 
 export default {
   name: "ContentProduct",
   components:{
     XdFontIcon,
-    XdUnit
+    XdUnit,
+    XdProductStatus
   },
   props:{
     keyword:{
@@ -153,7 +157,9 @@ export default {
   data(){
     return {
       tagObj: null,
-      tagObjColor: null
+      tagObjColor: null,
+      errorStatus: false,
+      errorImage:'https://img0.jufubao.cn/common/empty/product.png?v1=1',
     }
   },
   created() {
@@ -161,10 +167,11 @@ export default {
     this.tagObjColor = this.$colorConfig.productTagsColor;
   },
   methods:{
+    handleError(){
+      this.errorStatus = true;
+    },
     handleDetail(){
-      if(this.item.status === 'ok') {
-        this.$emit('on-product-detail', this.item);
-      }
+      this.$emit('on-product-detail', this.item);
     }
   }
 }
@@ -182,6 +189,7 @@ export default {
 
       .prodcut-image {
         flex-shrink: 0;
+        position: relative;
       }
 
       .prodcut-content {
@@ -200,6 +208,7 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
+        position: relative;
         & > image {
           height: 100%;
           width: 100%;
@@ -217,6 +226,7 @@ export default {
     }
 
     &-content {
+      overflow: hidden;
       &-info {
 
       }
@@ -274,6 +284,13 @@ export default {
         margin-bottom: 10rpx;
         line-height: 40rpx;
         .uni-max-cut(2,80);
+        word-wrap: break-word;
+        word-break: break-all;
+
+        & > text {
+          display: inline-block;
+
+        }
 
         &.showOne {
           .uni-max-cut(1,40);
@@ -295,6 +312,13 @@ export default {
         margin-bottom: 10rpx;
         flex-flow: wrap;
 
+        &.showTwo {
+         & > view{
+           &:nth-child(4),&:nth-child(5),&:nth-child(6){
+             margin-top: 8rpx;
+           }
+         }
+        }
         & > view {
           padding: 0 14rpx;
           height: 32rpx;
@@ -307,11 +331,10 @@ export default {
           &:last-child {
             margin-right: 0;
           }
-          &:nth-child(4),&:nth-child(5),&:nth-child(6){
-            margin-top: 8rpx;
-          }
+
         }
       }
+
     }
   }
 </style>

package/src/components/JfbBaseTfkSearch/ContentShop.vue

@@ -1,7 +1,8 @@
 <template>
   <view  class="content-item" @click="handleDetail(item)">
     <view class="content-item-image" :style="{marginRight:outSpacing+'rpx',borderRadius:borderRadius+'rpx'}">
-      <image :src="imageUrl" :alt="item['resource_shop_name']"></image>
+      <image v-if="errorStatus" :src="errorImage" :alt="item['resource_shop_name']" ></image>
+      <image v-if="!errorStatus" :src="imageUrl+1" :alt="item['resource_shop_name']" @error="handleError()"></image>
     </view>
     <view class="content-item-cont">
       <view class="title">
@@ -77,11 +78,20 @@ export default {
       return `${sy}${this.item.address}`;
     },
   },
+  data(){
+    return {
+      errorStatus: false,
+      errorImage:'https://img0.jufubao.cn/common/empty/shop.png?v1=1',
+    }
+  },
   created() {
     // console.log(this.item)
     // debugger
   },
   methods:{
+    handleError(){
+      this.errorStatus = true;
+    },
     handleJhd(item){
       this.$emit('on-shop-jhd',item);
     },
@@ -128,6 +138,8 @@ export default {
           font-weight: 500;
           .uni-max-cut(2,80);
           line-height: 40rpx;
+          word-wrap: break-word;
+          word-break: break-all;
 
           &.one {
             .uni-max-cut(1,40);

package/src/components/JfbBaseTfkSearch/CustomList.vue

@@ -70,14 +70,14 @@
             @on-code-detail="handleCodeDetail"
           ></content-cinema>
           <content-shop
-            v-if="type_code === 'shop'"
+            v-if="productConfig !== null && type_code === 'shop'"
             style="width: 100%; height: 100%"
             :keyword="keyword"
             :out-spacing="listItemStyle.outSpacing"
             :item="item"
             :color="listItemStyle.mainColor"
             :border-radius="listItemStyle.imgRradius"
-            :is-echange="listItemStyle.isShowExchange"
+            :is-echange="productConfig.isShowExchange"
             @on-shop-jhd="handleShopJhd"
             @on-shop-detail="handleShopDetail"
           ></content-shop>
@@ -94,7 +94,9 @@
             :cell="type_other"
             @on-product-detail="handleProductDetail"
           ></content-product>
+
         </view>
+        <view class="hasNoData" v-if="dataList && dataList.length > 0 && page_token === ''">已经到底没有更多数据了</view>
       </template>
       <view v-else class="productBox2">
         <view v-for="(value, listKey) in productTowList" :key="listKey">
@@ -130,6 +132,7 @@
             ></content-product>
           </view>
         </view>
+        <view class="hasNoData" v-if="dataList && dataList.length > 0 && page_token === ''">已经到底没有更多数据了</view>
       </view>
     </view>
   </view>
@@ -226,7 +229,7 @@ export default {
       let h = 'auto'
       if(this.type_code === 'film') h = '240rpx'
       if(this.type_code === 'cinema') h = 'auto';
-      if(this.type_code === 'shop') h = '200rpx';
+      if(this.type_code === 'shop') h = '220rpx';
       return h;
     }
   },
@@ -239,7 +242,7 @@ export default {
       hasNoData: false,
 
       page_token:'1',
-      page_size: 20,
+      page_size: 10,
 
       //参数
       type_code:'',
@@ -360,8 +363,16 @@ export default {
             return
           }
 
+          // res.items = res.items.map(item=>{
+          //   if(item.market_tags) {
+          //     item.market_tags = ['flashsale','hot','new', 'rec']
+          //   }
+          //   return item
+          // });
+
           //正常数据处理
-          this.dataConfig = res;
+          this.dataConfig = res
+
 
           //整理为统一ID
           res.items = res.items.map((item,index)=>{
@@ -450,4 +461,15 @@ export default {
     flex-flow: wrap;
   }
 
+  .hasNoData {
+    height: 80rpx;
+    line-height: 80rpx;
+    font-size: 24rpx;
+    text-align: center;
+    color: #ccc;
+    background-color: rgba(255, 255, 255, .05);
+    margin: 20rpx 0;
+    width: 100%;
+  }
+
 </style>