jufubao-movie 1.0.39-beta2 → 1.0.39-beta5

package/package.json

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

package/src/components/JfbMovieLineLineSeat/Attr.js

@@ -4,6 +4,17 @@ export default {
   style: [],
   advanced: [],
   content: [
+    {
+      label: '是否显示影院名称:',
+      ele: 'xd-radio',
+      valueKey: 'isShowTitle',
+      value: 'Y',
+      groupKey:'content',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
     {
       label: '订单确认路径:',
       ele: 'xd-select-pages-path',

package/src/components/JfbMovieLineLineSeat/JfbMovieLineLineSeat.vue

@@ -18,14 +18,23 @@
     <!-- #endif -->
     <view class="jfb-movie-line-line-seat__body">
       <view v-if="loadingList" class="skeleton-wrap">
-        <view class="seat_head">
+        <view class="seat_head" v-if="isShowTitle === 'Y'">
           <view></view>
           <view></view>
         </view>
-        <view class="seat_body">
-          <view class="seat_line" v-for="i in 7" :key="i">
-            <view class="seat_item" v-for="ii in 10" :key="ii"></view>
+        <view class="seat_tips">
+          <view></view>
+          <view></view>
+          <view></view>
+          <view></view>
+          <view></view>
+        </view>
+        <view class="seat_body" :class="{Y:this.isShowTitle ==='Y', 'N': isShowTitle ==='N'}">
+          <view class="seat_line" v-for="i in yItem" :key="i">
+            <view class="seat_item" v-for="ii in xItem" :key="ii"></view>
           </view>
+          <view v-if="isShowTitle === 'Y'" class="line-Y"></view>
+          <view v-else class="line-N"></view>
         </view>
         <view class="seat_notice"></view>
         <view class="seat_foot">
@@ -37,6 +46,7 @@
       <xd-online-seat
         v-if="filmId"
         ref="xdOnlineSeat"
+        :is-show-title="isShowTitle"
         :key="cinemaSeatKey"
         :is-old="false"
         :film-id="filmId"
@@ -69,6 +79,7 @@
     mixins: [componentsMixins,extsMixins,JfbMovieLineLineSeatMixin],
     data() {
       return {
+        hideMask: true,
         scheduleId: '',
         filmId: '',
         cinemaId: '',
@@ -84,8 +95,11 @@
         //面板
         payPath: "", //三方支付路径
         moviePayPath: "", //订单确认路径
+        isShowTitle:'Y',//是否显示影院名称
         timer: null,
         time: 0,
+        xItem: 10,
+        yItem: 7,
       }
     },
     watch: {
@@ -98,6 +112,7 @@
       this.init(this.container);
       let systemInfo = uni.getSystemInfoSync();
       getApp().globalData.$systemInfo = systemInfo;
+
     },
     methods: {
       onJfbLoad(options) {
@@ -152,7 +167,10 @@
        */
       init(container) {
         this.moviePayPath = getContainerPropsValue(container, 'content.movie_pay_path', {value: ""}).value;
-        this.payPath = getContainerPropsValue(container, "content.payPath", {value: "/system/system/pay"}).value;
+        this.payPath = getContainerPropsValue(container, "content.payPath", {value: ""}).value;
+        this.isShowTitle = getContainerPropsValue(container, "content.isShowTitle", 'Y');
+        if(this.isShowTitle === 'Y') this.yItem = 7;
+        else this.yItem = 10;
       },
       handleGetFilm(resolve) {
         // console.log('11111', paiqi.result);
@@ -326,29 +344,75 @@
 
   .jfb-movie-line-line-seat {
     &__body {
+      background-color: #f8f8f8;
       .skeleton-wrap{
         height: 100vh;
+
         .seat_head{
-          box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
-          padding: 20rpx 40rpx;
-          margin-bottom: 20rpx;
+          border-radius: 24rpx;
+          overflow: hidden;
+          margin: 20rpx 20rpx 5rpx;
+          box-shadow: 0 4rpx 40rpx rgba(0, 0, 0, 0.2);
+          position: relative;
+          padding: unit(20, rpx) unit(30, rpx);
+
           & > view:first-child{
-            .skeleton-item(300rpx);
+            .skeleton-item(80%, 36rpx);
+            padding-bottom: 15rpx;
           }
           & > view:last-child{
             .skeleton-item(100%, 30rpx);
             margin-top: 10rpx;
           }
         }
+        .seat_tips {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding-top: 50rpx;
+          & > view {
+            .skeleton-item(80rpx, 40rpx);
+
+            margin-right: 20rpx;
+            & >view:last-child{
+              margin-right: 0;
+            }
+          }
+        }
         .seat_body{
-          .skeleton-item(100%, 700rpx, 0, #FEFEFE);
+          position: relative;
+
+          & .line-N {
+            position: absolute;
+            left:20rpx;
+            top:40rpx;
+            .skeleton-item(25rpx, 580rpx);
+          }
+          & .line-Y {
+            position: absolute;
+            left:20rpx;
+            top:40rpx;
+            .skeleton-item(25rpx, 400rpx);
+          }
+
+          &.Y {
+            .skeleton-item(100%, 500rpx, 0, #FEFEFE);
+          }
+          &.N {
+            .skeleton-item(100%, 700rpx, 0, #FEFEFE);
+          }
+
+
+
           padding: 20rpx 100rpx;
           box-sizing: border-box;
           .seat_line{
             display: flex;
             margin: 20rpx;
             .seat_item{
-              .skeleton-item(50rpx, 50rpx);
+              margin: 0 6rpx;
+              .skeleton-item(40rpx, 40rpx);
+              border-radius: 10rpx;
             }
           }
         }

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/XdOnlineSeat.vue

@@ -1,21 +1,14 @@
 <template>
   <view class="xd-seat" v-if="paiqiStatus">
+    <view class="float"></view>
     <view
       class="xd-seat__title"
-      v-if="filmInfo"
+      v-if="isShowTitle === 'Y' && filmInfo"
       id="xd-seat__title"
       :style="{ borderTopColor: styleMainColor }"
     >
-      <view class="xd-seat__title-name">{{ filmInfo["film_name"] }}</view>
-      <view class="xd-seat__title-address">{{cinemaInfo["cinema_name"] }}</view>
-      <view class="xd-seat__title-back" v-if="show" @click.stop="back">
-        <xd-font-icon
-          icon="iconzhiyuanfanhui12"
-          width="50"
-          height="50"
-          size="50"
-        ></xd-font-icon>
-      </view>
+      <view class="xd-seat__title-name" :style="{marginBottom:cinemaInfo['cinema_address']?'15rpx':0 }">{{ filmInfo["cinema_name"] }}</view>
+      <view class="xd-seat__title-address" v-if="cinemaInfo['cinema_address']">{{cinemaInfo["cinema_address"] }}</view>
     </view>
     <view class="xd-seat__content" v-if="height !== null" :style="getHeight">
       <xd-online-seat-move
@@ -38,9 +31,7 @@
           showIcon
         >
           <view
-            style="
-              padding: 10rpx 0rpx 10rpx 20rpx;
-            "
+            style="padding: 10rpx 0rpx 10rpx 20rpx;"
             v-for="(item, index) in noticeList"
             :key="index"
           >{{ item }}</view>
@@ -225,6 +216,10 @@ export default {
     XdNoticeBar,
   },
   props: {
+    isShowTitle: {
+      type: String,
+      default:'Y'
+    },
     isOld: {
       type: Boolean,
       default: true,
@@ -361,7 +356,7 @@ export default {
     this.show = false;
     // #endif
     // #ifdef H5
-    this.show = true;
+    this.show = false;
     // #endif
 
     this.getFilm();
@@ -477,6 +472,7 @@ export default {
       this.$emit("onGetFilm", (film) => {
         this.cinemaInfo = film["cinema_data"];
         this.filmInfo = this.getFilmInfo(film["film_data"]);
+        debugger
         this.getScheduleList(film["paiqi_data"]);
         console.log("getFilm", film);
         this.paiqiStatus = true;
@@ -491,10 +487,16 @@ export default {
      */
     setContent() {
       this.$nextTick(() => {
+        let elxs = [];
+        if(this.isShowTitle === 'Y') elxs.push('#xd-seat__title');
+        elxs.push('#xd-seat__footer');
         this.$xdUniHelper
-          .getWindowHeight(["#xd-seat__title", "#xd-seat__footer"], this)
+          .getWindowHeight(elxs, this)
           .then((res) => {
-            let top = res["#xd-seat__title"]["height"];
+            let top = 0;
+            if(this.isShowTitle === 'Y') {
+              top = res["#xd-seat__title"]["height"] ;
+            }
             let footer = res["#xd-seat__footer"]["height"];
             console.log("getFilm", top, footer);
             this.height = `calc(100vh - ${
@@ -648,6 +650,10 @@ export default {
 </script>
 
 <style scoped lang="less">
+.float {
+  height: 1px;
+  width: 100%;
+}
 .xd-seat {
   height: 100%;
   overflow-y: hidden;
@@ -702,22 +708,26 @@ export default {
   }
 
   &__title {
-    border-top-width: unit(4, rpx);
-    border-top-style: solid;
-    box-shadow: 0 0 unit(15, rpx) rgba(0, 0, 0, 0.2);
+    border-radius: 24rpx;
+    overflow: hidden;
+    margin: 20rpx 20rpx 5rpx;
+    box-shadow: 0 4rpx 40rpx rgba(0, 0, 0, 0.2);
     position: relative;
-    padding: unit(20, rpx) unit(20, rpx);
+    padding: unit(20, rpx) unit(30, rpx);
     z-index: 100;
 
     &-name {
-      font-size: @xd-font-size-lg;
+      font-size: 36rpx;
       line-height: unit(40, rpx);
-      padding-bottom: unit(10, rpx);
+      .uni-max-cut(1,40);
+      margin-bottom: 10rpx;
     }
 
     &-address {
-      font-size: @xd-font-size-sm;
-      color: #999;
+      font-size: 28rpx;
+      line-height: unit(36, rpx);
+      .uni-max-cut(1,36);
+      color: #A6A6A6;
     }
 
     &-back {
@@ -847,11 +857,11 @@ export default {
       &-input {
         font-size: @xd-font-size-base;
         background: #fff;
-        border-radius: unit(25, rpx);
+        border-radius: unit(30, rpx);
         flex: 1;
         height: unit(50, rpx);
         line-height: unit(50, rpx);
-        padding: unit(20,rpx) unit(25, rpx);
+        padding: unit(10,rpx) unit(25, rpx);
         background: #f8f8f8;
 
         // &:hover {

package/src/components/JfbMovieLineLineSeat/XdOnlineSeatMove.vue

@@ -407,7 +407,6 @@
       :style="{
         top : seatOffsetTop + 'px',
         width: 30 * scale + 'rpx',
-        background: styleMainColor
       }"
     >
       <view
@@ -1192,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;
@@ -1244,21 +1248,21 @@
     }
 
     &__stage {
-      background-image: url(@xd-bg-filmBg);
+      background-image: url('https://img.jufubao.cn/common/stage.png?v1');
       background-size: 100%;
       background-position: top left;
       background-repeat: no-repeat;
-      color: @xd-text-color;
+      color: #999;
       width: unit(533, rpx);
       height: unit(50, rpx);
-      font-size: @xd-font-size-base;
+      font-size: 20rpx;
       text-align: center;
       margin: unit(20, rpx) auto unit(40, rpx);
       box-sizing: border-box;
 
-      *, text {
+      & > text {
         display: inline-block;
-        padding: unit(30, rpx) 0 0;
+        padding: unit(40, rpx) 0 0;
       }
     }
 
@@ -1280,7 +1284,7 @@
       justify-content: center;
       align-content: center;
       height: unit(50, rpx);
-      padding: unit(30, rpx) 0;
+      padding: unit(20, rpx) 0 10rpx;
 
       &-item {
         font-size: @xd-font-size-base;
@@ -1344,7 +1348,7 @@
     &__left-bar {
       position: fixed;
       left: unit(10, rpx);
-      background-color: rgba(0, 0, 0, 0.3);
+      background-color: #ACADAF;
       border-radius: unit(14, rpx);
       overflow: hidden;
       font-size: unit(20, rpx);

package/src/components/JfbMovieTfkFilmList/ContentItem.vue

@@ -4,7 +4,8 @@
       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>
@@ -80,12 +81,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);

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -716,8 +716,6 @@
           }
         }
 
-
-
         jfbRootExec(fName, {
           vm: this,
           data:params
@@ -727,9 +725,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 +740,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 +748,14 @@
               return
             }
 
-            //正常处理
-            this.getCinemaOrgData();
+            if(this.isPreview) {
+              this.dataList = (this.dataList||[]).concat(res['list'].slice(0, 20));
+            }
+            else {
+              //正常处理
+              this.getCinemaOrgData();
+            }
+
           }
 
         }).catch(e=>{
@@ -870,6 +876,7 @@
       },
 
       onJfbScroll(options){
+        if(!this.pageToken || this.dataList === null) return false;
         if(this.type === 'hot' || this.type === 'rightnow'){
           this.virtualList.onScrollEvent(options.e.scrollTop);
         }
@@ -895,7 +902,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">
@@ -179,6 +182,7 @@
     ],
     data() {
       return {
+        hideMask: true,
         options: {},
         type:'', //hot rightnow
         typeList:{hot:{label: '热映影片', value: 'hot'},rightnow:{label: '即将上映', value: 'rightnow'}},
@@ -192,6 +196,7 @@
         showTypeListData:[],
 
         //基础配置
+        bgColor:'',
         outSpacing:'',
         showMoreBtn: 'Y',
         showTotal:'Y',
@@ -223,6 +228,10 @@
         moreRradius: '40',
         totalColor: '#999',
 
+        //line
+        titleLineTextColor:'',
+        titleLineActTextColor:'',
+
         //内容
         contMargin: {},
         contBgColor:'#fff',
@@ -388,6 +397,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 +419,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 +507,10 @@
             }
             &.button > view {
               padding: 0 30rpx;
+              &:last-child {
+                margin-right: 0!important;
+              }
+
             }
 
             & > view {