jufubao-movie 1.0.39-beta4 → 1.0.39-beta6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-movie",
-  "version": "1.0.39-beta4",
+  "version": "1.0.39-beta6",
   "private": false,
   "description": "聚福宝在线选座业务组件插件包",
   "main": "index.js",

package/src/components/JfbMovieLineLineSeat/Mock.js

@@ -3055,6 +3055,7 @@ module.exports = {
     film_id: "200",
     cinema_id: "7",
     cinema_name: "聚福宝测试影院聚福宝测试影院聚福宝测试影院聚福宝测试影院",
+    "cinema_address":"燕高路西侧实验小学南侧",
     film_name: "碧血锦衣卫",
     show_date: "2024-04-08(周一) 14:20",
     show_version: "英语 2D",

package/src/components/JfbMovieLineLineSeat/XdOnlineSeatMove.vue

@@ -1191,7 +1191,12 @@
 
 </script>
 <style lang="less">
-
+  .preloadIcon {
+    position: fixed;
+    top: -9999px;
+    left: -9999px;
+    z-index: 0;
+  }
   .xd-online-seat {
     height: 100%;
     box-sizing: border-box;

package/src/components/JfbMovieTfkFilmList/ContentItem.vue

@@ -4,51 +4,57 @@
       class="image"
       :style="{marginRight: outSpacing + 'rpx',borderRadius:borderRadius+'rpx'}"
     >
-      <image :src="item['poster']" :alt="item['show_name']" @error="handleError(item)"></image>
+      <image v-if="errorStatus" :src="errorImage" :alt="item['show_name']" ></image>
+      <image v-if="!errorStatus" :src="item['poster']" :alt="item['show_name']" @error="handleError()" ></image>
     </view>
     <view class="middle">
-      <view class="name">{{item['show_name']}}</view>
-      <view class="other">类型：{{item['type']}}</view>
-      <view class="other">导演：{{item['director']}}</view>
-      <view class="other">主演：{{item['leading_role']}}</view>
-    </view>
-    <view class="right">
-      <view class="score">
-        <template v-if="item['remark']">
-          <text>评分：</text><text :style="{color:color}">{{item['remark']}}</text>
-        </template>
+      <view class="top">
+        <view class="name">{{item['show_name']}}</view>
+        <view class="score">
+          <template v-if="item['remark']">
+            <text>评分：</text><text :style="{color:color}">{{item['remark']}}</text>
+          </template>
+        </view>
       </view>
-      <view class="btn">
-        <template v-if="type === 'hot'">
-          <xd-button
-            v-if="item['show_button'] === '1'"
-            type="primary"
-            style="display:block;"
-            size="small"
-            @click.stop="handleBuy(item)">购票</xd-button>
-          <xd-button
-            v-else-if="item['show_button'] === '2'"
-            type="subPrimary"
-            style="display:block;"
-            size="small"
-            @click="handleBuy(item)">预售</xd-button>
-        </template>
-        <template v-if="type === 'rightnow'">
-          <xd-button
-            v-if="item['show_button'] === '3'"
-            type="success"
-            style="display:block;"
-            size="small"
-            @click.stop="handleDetail(item)"
-          >想看</xd-button>
-          <xd-button
-            v-else-if="item['show_button'] === '2'"
-            type="subPrimary"
-            style="display:block;"
-            size="small"
-            @click.stop="handleBuy(item)">预售</xd-button>
-        </template>
+      <view class="bottom">
+        <view>
+          <view class="other">类型：{{item['type']}}</view>
+          <view class="other">导演：{{item['director']}}</view>
+          <view class="other">主演：{{item['leading_role']}}</view>
+        </view>
+        <view class="btn">
+          <template v-if="type === 'hot'">
+            <xd-button
+              v-if="item['show_button'] === '1'"
+              type="primary"
+              style="display:block;"
+              size="small"
+              @click.stop="handleBuy(item)">购票</xd-button>
+            <xd-button
+              v-else-if="item['show_button'] === '2'"
+              type="subPrimary"
+              style="display:block;"
+              size="small"
+              @click="handleBuy(item)">预售</xd-button>
+          </template>
+          <template v-if="type === 'rightnow'">
+            <xd-button
+              v-if="item['show_button'] === '3'"
+              type="success"
+              style="display:block;"
+              size="small"
+              @click.stop="handleDetail(item)"
+            >想看</xd-button>
+            <xd-button
+              v-else-if="item['show_button'] === '2'"
+              type="subPrimary"
+              style="display:block;"
+              size="small"
+              @click.stop="handleBuy(item)">预售</xd-button>
+          </template>
+        </view>
       </view>
+
     </view>
   </view>
 </template>
@@ -80,12 +86,18 @@
       }
 
     },
+    data(){
+      return {
+        errorImage: 'https://img.jufubao.cn/common/error_movie.png?v20',
+        errorStatus: false,
+      }
+    },
     created() {
 
     },
     methods:{
-      handleError(item){
-        item['poster'] = 'https://img.jufubao.cn/common/error_movie.png?v20'
+      handleError(){
+        this.errorStatus = true;
       },
       handleDetail(item){
         console.log('handleDetail.item',item,item.id);
@@ -118,50 +130,89 @@
   }
   .middle {
     flex: 1;
-    & .name {
-      font-size: 36rpx;
-      font-weight: 600;
+
+    & .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
       margin-bottom: 20rpx;
-      .uni-max-cut(2, 90);
-      line-height: 45rpx;
-    }
 
-    & .other {
-      font-size: 25rpx;
-      color: #999;
-      .uni-max-cut(1,36);
-      line-height: 36rpx;
-      margin-bottom: 10rpx;
-      &:last-child {
-        margin-bottom: 0!important;
+      & > view:first-child{
+        flex: 1;
+        font-size: 36rpx;
+        font-weight: 600;
+        .uni-max-cut(2, 90);
+        line-height: 45rpx;
+      }
+      & >view:nth-child(2) {
+        flex-shrink: 0;
+        height: 45rpx;
+        line-height: 45rpx;
+        margin-left: 20rpx;
+        text-align: right;
+        & > text:nth-child(1) {
+          font-size: 20rpx;
+        }
+        & > text:nth-child(2) {
+          font-size: 28rpx;
+        }
       }
     }
-  }
 
-  .right {
-    flex-shrink: 0;
-    display: flex;
-    align-content: space-between;
-    align-items: flex-end;
-    justify-content: flex-end;
-    flex-flow: wrap;
-    box-sizing: border-box;
-    width: 160rpx;
-    height: 200rpx;
+    & .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
-    & .score {
-      height: 40rpx;
-      width:100%;
-      text-align: right;
-      & > text:nth-child(1) {
-        font-size: 20rpx;
-      }
-      & > text:nth-child(2) {
-        font-size: 28rpx;
+      & > view:first-child {
+        flex: 1;
+        & > view {
+          font-size: 25rpx;
+          color: #999;
+          .uni-max-cut(1,36);
+          line-height: 36rpx;
+          margin-bottom: 10rpx;
+          &:last-child {
+            margin-bottom: 0!important;
+          }
+        }
       }
 
+      & .btn {
+        width: 140rpx;
+        flex-shrink: 0;
+        margin-left: 20rpx;
+      }
     }
+    //& .name {
+    //  font-size: 36rpx;
+    //  font-weight: 600;
+    //  margin-bottom: 20rpx;
+    //  .uni-max-cut(2, 90);
+    //  line-height: 45rpx;
+    //}
+    //
+    //& .other {
 
+    //}
   }
+
+  //.right {
+  //  flex-shrink: 0;
+  //  display: flex;
+  //  align-content: space-between;
+  //  align-items: flex-end;
+  //  justify-content: flex-end;
+  //  flex-flow: wrap;
+  //  box-sizing: border-box;
+  //  width: 160rpx;
+  //  height: 200rpx;
+  //
+  //  & .score {
+
+  //
+  //  }
+  //
+  //}
 }
 </style>

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -471,7 +471,6 @@
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']) this.init(value)
       },
-
       posterNum(){
         if (this.$configProject['isPreview']){
           this.onJfbLoad();
@@ -716,8 +715,6 @@
           }
         }
 
-
-
         jfbRootExec(fName, {
           vm: this,
           data:params
@@ -727,9 +724,12 @@
 
           //影片列表处理
           if(this.type === 'rightnow' || this.type==='hot'){
-            //this.dataList = (this.dataList||[]).concat(res['list']);
-            this.virtualList.pushVirtualData(res['list']);
-            this.pageToken = res.next_page_token;
+            //预览模式
+            if(this.isPreview) this.dataList = (this.dataList||[]).concat(res['list']);
+            else {
+              this.virtualList.pushVirtualData(res['list']);
+              this.pageToken = res.next_page_token;
+            }
             return;
           }
 
@@ -739,7 +739,6 @@
             this.cinemaOrgDataList = res['list'];
             this.cinemaAreaList = [{area_code:'all', area_name:'全城'}].concat(res['area_list']);
 
-
             //小于数量页面显示记录
             if(res['list'].length <= this.pageSize) {
               this.dataList = res['list'];
@@ -748,8 +747,14 @@
               return
             }
 
-            //正常处理
-            this.getCinemaOrgData();
+            if(this.isPreview) {
+              this.dataList = (this.dataList||[]).concat(res['list'].slice(0, 20));
+            }
+            else {
+              //正常处理
+              this.getCinemaOrgData();
+            }
+
           }
 
         }).catch(e=>{
@@ -870,9 +875,7 @@
       },
 
       onJfbScroll(options){
-        if(this.type === 'hot' || this.type === 'rightnow'){
-          this.virtualList.onScrollEvent(options.e.scrollTop);
-        }
+        this.virtualList.onScrollEvent(options.e.scrollTop);
       },
 
       setShowTypeList(){
@@ -895,7 +898,7 @@
       },
 
       onJfbReachBottom(options) {
-        if(!this.pageToken) return false;
+        if(!this.pageToken || this.dataList === null) return false;
         this.getList();
       },
 

package/src/components/JfbMovieTfkFilmRecommend/Attr.js

@@ -261,21 +261,49 @@ export default {
         groupKey:'style',
       },
       {
-        label: '数量文字颜色:',
+        label: '总数量文字颜色:',
         ele: 'xd-color',
         valueKey: 'totalColor',
         value: data['totalColor'] || '',
         groupKey:'style',
-        placeholder: '请输入背景颜色',
+        placeholder: '请输入总数量文字颜色',
+        classNmae: 'input60',
+      },
+
+
+      {
+        ele: 'title',
+        label: '标题显示样式：<span style="color:red">“下划线样式”</span> 设置',
+        size: 'small',
+        groupKey:'style',
+      },
+      {
+        label: '标题文字颜色:',
+        ele: 'xd-color',
+        valueKey: 'titleLineTextColor',
+        value: data['titleLineTextColor'] || '',
+        groupKey:'style',
+        placeholder: '请输入标题文字颜色',
+        classNmae: 'input60',
+      },
+      {
+        label: '标题选中文字颜色:',
+        ele: 'xd-color',
+        valueKey: 'titleLineActTextColor',
+        value: data['titleLineActTextColor'] || '',
+        groupKey:'style',
+        placeholder: '请输入选中文字颜色',
         classNmae: 'input60',
       },
 
       {
         ele: 'title',
-        label: '标题切换标签设置<span style="color:red">按钮样式</span>生效',
+        label: '标题显示样式：<span style="color:red">“按钮样式”</span> 设置',
         size: 'small',
         groupKey:'style',
       },
+
+
       {
         label: '标题背景颜色:',
         ele: 'xd-color',

package/src/components/JfbMovieTfkFilmRecommend/JfbMovieTfkFilmRecommend.vue

@@ -20,7 +20,8 @@
         v-if="showTypeListData.length > 0"
         :style="{
           padding: outSpacing + 'rpx',
-          backgroundImage:bgImageComp
+          backgroundImage:bgImageComp,
+          backgroundColor: bgColor
         }">
         <view
           class="tfk-recommend__tab"
@@ -43,6 +44,7 @@
               :class="{active: type === item.value}"
               v-for="(item,index) in showTypeListData"
               :key="index"
+              :style="{color: (type === item.value? titleLineActTextColor: titleLineTextColor)}"
             >{{item.label}}<text v-if="type === item.value" :style="{backgroundColor:mainColor}"></text></view>
           </view>
           <view
@@ -58,7 +60,8 @@
               :style="{
                 backgroundColor: type === item.value? titleTextActBgColor: titleTextBgColor,
                 color: type === item.value ? titleTextActColor: titleTextColor,
-                borderRadius:titleTextRradius+'rpx'
+                borderRadius:titleTextRradius+'rpx',
+                marginRight:outSpacing + 'rpx',
               }"
             >{{item.label}}</view>
           </view>
@@ -88,7 +91,7 @@
             backgroundColor:contBgColor,
             borderRadius: contRradius + 'rpx',
             border:contBorder,
-            boxShadow:contShadow,
+            boxShadow:contShadow
           }"
         >
           <view class="skeleton-wrap" v-if="dataList === null">
@@ -192,6 +195,7 @@
         showTypeListData:[],
 
         //基础配置
+        bgColor:'',
         outSpacing:'',
         showMoreBtn: 'Y',
         showTotal:'Y',
@@ -223,6 +227,10 @@
         moreRradius: '40',
         totalColor: '#999',
 
+        //line
+        titleLineTextColor:'',
+        titleLineActTextColor:'',
+
         //内容
         contMargin: {},
         contBgColor:'#fff',
@@ -388,6 +396,7 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
+        this.bgColor = getContainerPropsValue(container, 'content.bgColor', '');
         this.outSpacing =  getContainerPropsValue(container, 'content.outSpacing', '20');
         this.titleMargin = getContainerPropsValue(container, 'content.titleMargin', {});
         this.titleBgColor = getContainerPropsValue(container, 'content.titleBgColor', '#fff');
@@ -409,6 +418,10 @@
         this.showHotName = getContainerPropsValue(container, 'content.showHotName', '');
         this.showRightnowName = getContainerPropsValue(container, 'content.showRightnowName', '');
 
+        //line
+        this.titleLineTextColor = getContainerPropsValue(container, 'content.titleLineTextColor', '#333');
+        this.titleLineActTextColor= getContainerPropsValue(container, 'content.titleLineActTextColor', '#333');
+
         this.isTitleBorder = getContainerPropsValue(container, 'content.isTitleBorder', 'N');
         this.isTitleBorderColor =  getContainerPropsValue(container, 'content.isTitleBorderColor', '#eee');
         this.isTitleShadow =  getContainerPropsValue(container, 'content.isTitleShadow', 'N');
@@ -493,6 +506,10 @@
             }
             &.button > view {
               padding: 0 30rpx;
+              &:last-child {
+                margin-right: 0!important;
+              }
+
             }
 
             & > view {

package/src/lib/VirtualList.js

@@ -1,12 +1,13 @@
 'use strict';
 //原点对象
 let __orgUpdateTop = null;
+let idx = 0;
 
 export default class VirtualList {
   virtualType='fixed';
   virtualBufferHeight= 300;
   virtualFixedItemHeight; //固定模式高度设置
-  virtualVue; //当前组件vm实例
+  //virtualVue; //当前组件vm实例(小程序不可用)
   virtualTotalData=[]; //数组长度
   virtualHeightObj = {}; //高度序列index: {max:xx,min:xx}
   $el= null; //开始点元素
@@ -22,7 +23,9 @@ export default class VirtualList {
   top=0;
   bottom=0;
   virtualCallback=  ()=>{};
-  status= false
+  status= false;
+  options = null;
+
 
   /**
    * @description 初始化或者重置对象
@@ -35,59 +38,63 @@ export default class VirtualList {
    * @param params.otherHeight {number} 其他高度(rpx)
    * @param params.callback {Function} 回调方法
    */
-  constructor($vm,$el, params ) {
-    this.virtualVue = $vm;
-    this.virtualBufferHeight = 480 *  this.virtualVue.$rpxNum;
+  constructor($vm ,$el, params ) {
+    this.options = params;
+    this.virtualBufferHeight = 480 *  $vm.$rpxNum;
     if(params.type && ['auto','fixed'].includes(params.type)) this.virtualType = params.type;
-    if(params.bufferHeight) this.virtualBufferHeight = params.bufferHeight * this.virtualVue.$rpxNum;
-    if(params.otherHeight) this.otherHeight = params.otherHeight * this.virtualVue.$rpxNum;
+    if(params.bufferHeight) this.virtualBufferHeight = params.bufferHeight * $vm.$rpxNum;
+    if(params.otherHeight) this.otherHeight = params.otherHeight * $vm.$rpxNum;
     if(this.virtualType === 'fixed'){
       if(params.fixedHeight === undefined) throw new Error(`FixedHeight is require, got is ${params.fixedHeight}`);
-      else this.virtualFixedItemHeight = params.fixedHeight * this.virtualVue.$rpxNum;
+      else this.virtualFixedItemHeight = params.fixedHeight * $vm.$rpxNum;
     }
     this.virtualTotalData = [];
-    this.virtualVue.virtualViewData = null;
     this.$el = $el;
-    this.virtualVue.$nextTick(()=>{
+    $vm.$nextTick(()=>{
       this.checkOffsetTop();
     });
     this.screenHeight = uni.getSystemInfoSync().safeArea.height;
     if(typeof params.callback !== 'function') {
       throw new Error(`FixedHeight is require, got is ${params.fixedHeight}`);
     }else this.virtualCallback = params.callback;
-
   }
 
+  /**
+   * @description 获取原点的偏移量
+   */
   checkOffsetTop(){
-    if(__orgUpdateTop) {
-      this.orgUpdateTop = __orgUpdateTop;
-      this.status = true;
-      return;
-    }
+
     //相对了10次不在检查
-    if(this.eqMaxTimer >= 3) {
+    if(this.eqMaxTimer >= 5) {
       this.status = true;
-      __orgUpdateTop = this.orgUpdateTop;
       return
     }
-    if(this.virtualVue.$refs[this.$el]) {
-      let offsetTop =  this.virtualVue.$refs[this.$el].$el.getBoundingClientRect().top;
+
+    this.options.getDom(this.$el).then(res=>{
+      let offsetTop =  res.top
       if(this.offsetTop === offsetTop) {
         this.eqMaxTimer++;
       }
       else this.offsetTop = offsetTop;
       this.orgUpdateTop = offsetTop + this.otherHeight;
       if(this.virtualType === 'fixed') this.computedMinAndMaxFixed();
-    }
-    setTimeout(()=>{
-      this.checkOffsetTop();
-    }, 200)
+      setTimeout(()=>{
+        this.checkOffsetTop();
+      }, 100)
+    }).catch(res=>{
+      setTimeout(()=>{
+        this.checkOffsetTop();
+      }, 100)
+    })
   }
 
   cloneDeep(data){
     return JSON.parse(JSON.stringify(data));
   }
 
+  /**
+   * @description 固定高度模式初始化列表记录范围
+   */
   computedMinAndMaxFixed(){
     let itemHeight = this.virtualFixedItemHeight;
     this.virtualTotalData.map((item,index)=>{
@@ -107,32 +114,62 @@ export default class VirtualList {
     });
   }
 
+  /**
+   * @description 新增数据时候调用此方法（对外）
+   * @param data {Array} 列表数据
+   * @param height {Array} 高度数组
+   */
   pushVirtualData(data, height){
-    //清空响应对象
-    this.virtualVue.virtualViewData = null;
-    if(this.virtualTotalData.length > 0) this.isFirst = false;
-
-    //非固定模式
-    if(this.virtualType === 'auto') {
-      if(!height) throw new Error(`height is require, got is ${height}`);
-      this.virtualHeightObj = Object.assign({},this.virtualHeightObj, this.cloneDeep(height));
-    }
+    if(this.status) {
+      // data = data.map((item,index)=>{
+      //   return {
+      //     ...item,
+      //     show_name: `【${idx} - ${index}】${item.show_name}`,
+      //   }
+      // });
+      idx++;
+      //清空响应对象
+      if(this.virtualTotalData.length > 0) this.isFirst = false;
+
+      //非固定模式
+      if(this.virtualType === 'auto') {
+        if(!height) throw new Error(`height is require, got is ${height}`);
+        this.virtualHeightObj = Object.assign({},this.virtualHeightObj, this.cloneDeep(height));
+      }
+
+      //固定模式
+      if(this.virtualType === 'fixed') {
+        this.virtualTotalData = this.virtualTotalData.concat(this.cloneDeep(data));
+        this.computedMinAndMaxFixed();
+        if(this.isFirst) this.onScrollEvent(0);
+      }
 
-    //固定模式
-    if(this.virtualType === 'fixed') {
-      this.virtualTotalData = this.virtualTotalData.concat(this.cloneDeep(data));
-      this.computedMinAndMaxFixed();
-      if(this.isFirst) this.onScrollEvent(0);
+      this.isFirst = false
+    }
+    else {
+      setTimeout(()=>{
+        this.pushVirtualData(data, height)
+      },100)
     }
 
-    this.isFirst = false
   }
 
   /**
-   * @description 滚动事件
+   * @description 滚动事件（对外）
    * @param scrollTop
    */
   onScrollEvent(scrollTop) {
+    //console.log('onScrollEvent',scrollTop)
+    if(!this.status || this.virtualTotalData.length === 0) {
+      /**@type Function **/
+      this.virtualCallback({
+        paddingTop:0,
+        paddingBottom: 0,
+        data: []
+      });
+      return;
+    }
+
     //非固定计算索引
     let time = new Date().getTime();
     //计算开始索引
@@ -170,14 +207,41 @@ export default class VirtualList {
 
     this.top = this.virtualHeightObj[this.startIndex].min - this.orgUpdateTop.toString() + 'px'
     this.bottom = this.virtualHeightObj[this.virtualTotalData.length-1].max - this.virtualHeightObj[this.endIndex-1].max.toString() + 'px'
-    console.log('onScrollEvent.index',this.endIndex - this.startIndex, this.startIndex,this.endIndex, this.top, this.bottom)
+    console.log('onScrollEvent.index',this.endIndex - this.startIndex, this.startIndex,this.endIndex, this.top, this.bottom);
+
 
     /**@type Function **/
     this.virtualCallback({
-      paddingTop:this.top,
+      paddingTop: this.top,
       paddingBottom: this.bottom,
-      data:this.cloneDeep(this.virtualTotalData).slice(this.startIndex, this.endIndex + 1)}
-    );
+      data: this.cloneDeep(this.virtualTotalData).slice(this.startIndex, this.endIndex + 1)
+    });
+  }
+
+  /**
+   * @description 切换Tab调用此方法（对外）
+   * @param virtualType {string} 类型
+   * @param $vm {Vue} vue实例 (在自动高度模式必选)
+   * @param ref 元素对象 (在自动高度模式必选)
+   */
+  onChangeTab($vm , ref , virtualType = 'fixed'){
+    this.virtualTotalData = [];
+    this.isFirst = true;
+
+    //改变顶部偏移量元素
+    if(virtualType && virtualType !== this.virtualType) {
+      if(!$vm)  throw new Error(`$vm is require, got is ${$vm.$xdUniHelper.checkVarType($vm)},value is ${$vm}`);
+      if(!ref)  throw new Error(`ref is require, got is ${$vm.$xdUniHelper.checkVarType(ref)}, value is ${ref}`);
+      this.virtualType = virtualType;
+      if(type === 'auto' && $vm && ref) {
+        this.$el = ref;
+        this.status = false;
+        this.eqMaxTimer = 3;
+        $vm.$nextTick(()=>{
+          this.checkOffsetTop();
+        });
+      }
+    }
   }
 }