jufubao-movie 1.0.38-beta1 → 1.0.38

package/src/components/JfbMovieTfkFilmRecommend/JfbMovieTfkFilmRecommend.vue

@@ -14,278 +14,30 @@
     </view>
     <!-- #endif -->
     <view class="jfb-movie-tfk-film-recommend__body">
-      <view class="x-line"></view>
-      <view
-        class="tfk-recommend"
-        v-if="showTypeListData.length > 0"
-        :style="{
-          padding: outSpacing + 'rpx',
-          backgroundImage:bgImageComp
-        }">
-        <view
-          class="tfk-recommend__tab"
-          :style="{
-            marginBottom:outSpacing + 'rpx',
-            padding:titleMarginComp,
-            backgroundColor:titleBgColor,
-            borderRadius:titleRradius+'rpx',
-            border:titleBorder,
-            boxShadow: titleShadow
-          }"
-        >
-          <view
-            class="tfk-recommend__tab-left"
-            v-if="titleStyle === 'line'"
-            :class="{line:titleStyle === 'line'}"
-          >
-            <view
-              @click="handleTab(item.value)"
-              :class="{active: type === item.value}"
-              v-for="(item,index) in showTypeListData"
-              :key="index"
-            >{{item.label}}<text v-if="type === item.value" :style="{backgroundColor:mainColor}"></text></view>
-          </view>
-          <view
-            class="tfk-recommend__tab-left"
-            v-if="titleStyle === 'button'"
-            :class="{button:titleStyle === 'button'}"
-          >
-            <view
-              @click="handleTab(item.value)"
-              :class="{active: type === item.value}"
-              v-for="(item,index) in showTypeListData"
-              :key="index"
-              :style="{
-                backgroundColor: type === item.value? titleTextActBgColor: titleTextBgColor,
-                color: type === item.value ? titleTextActColor: titleTextColor,
-                borderRadius:titleTextRradius+'rpx'
-              }"
-            >{{item.label}}</view>
-          </view>
-          <view class="tfk-recommend__tab-right">
-            <view :style="{color:totalColor}"><template v-if="showTotal === 'Y' && total">共 {{total}} 部</template></view>
-            <view
-              v-if="showMoreBtn === 'Y'"
-              :class="{noBg:!isTitleMoreBg}"
-              @click="handleMore()"
-              :style="{
-                color: moreTextColor,
-                backgroundColor: moreBgColor,
-                borderRadius:moreRradius+'rpx'
-              }"
-            >
-              <text>查看全部</text>
-              <view v-if="!isTitleMoreBg" style="margin-left: 10rpx">
-                <xd-font-icon icon="iconxiangyou_xian" :color="moreTextColor" size="24"></xd-font-icon>
-              </view>
-            </view>
-          </view>
-        </view>
-        <view
-          class="tfk-recommend__content"
-          :style="{
-            padding:contPaddingComp,
-            backgroundColor:contBgColor,
-            borderRadius: contRradius + 'rpx',
-            border:contBorder,
-            boxShadow:contShadow,
-          }"
-        >
-          <view class="skeleton-wrap" v-if="dataList === null">
-            <view class="tfk-scroll-item" v-for="item in 4" :key="item">
-              <view class="tfk-scroll-item-image skeleton-item"></view>
-              <view class="tfk-scroll-item-title skeleton-item"></view>
-              <view class="tfk-scroll-item-btn skeleton-item"></view>
-            </view>
-          </view>
-          <scroll-view class="tfk-scroll" scroll-x enable-flex v-else>
-            <view
-              class="tfk-scroll-item"
-              v-for="item in dataList"
-              :key="item.id"
-              @click="toFilmInfo(item.id)"
-            >
-              <view class="tfk-scroll-item-image" :style="{borderRadius:contItemRradius + 'rpx'}">
-                <image :src="item.poster" :alt="item.show_name" mode="scaleToFill"></image>
-              </view>
-              <view class="tfk-scroll-item-title">{{item.show_name}}</view>
-              <view class="tfk-scroll-item-btn">
-                <template v-if="type === 'hot'">
-                  <xd-button
-                    v-if="item.show_button === '1'"
-                    type="primary"
-                    style="display:block;"
-                    size="mini"
-                    @click.stop="toBuyChooseCinema(item.id)">购票</xd-button>
-                  <xd-button
-                    v-else-if="item.show_button === '2'"
-                    type="subPrimary"
-                    style="display:block;"
-                    size="mini"
-                    @click.stop="toBuyChooseCinema(item.id)">预售</xd-button>
-                </template>
-                <template v-else>
-                  <xd-button
-                    v-if="item.show_button === '3'"
-                    type="success"
-                    style="display:block;"
-                    size="mini"
-                    @click.stop="toFilmInfo(item.id)"
-                  >想看</xd-button>
-                  <xd-button
-                    v-else-if="item.show_button === '2'"
-                    type="subPrimary"
-                    style="display:block;"
-                    size="mini"
-                    @click.stop="toBuyChooseCinema(item.id)">预售</xd-button>
-                </template>
-                </view>
-            </view>
-          </scroll-view>
-        </view>
-      </view>
-      <template v-else>
-        <view
-          class="noConfig"
-          v-if="isPreview"
-          :style="{backgroundColor:backgroundColor, color:warningColor}"
-        >热映影片,即将上映未配置，此模块在线上不显</view>
-      </template>
+      <view>测试插件( {{containerId}} )</view>
     </view>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import XdButton from "@/components/XdButton/XdButton.vue";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbMovieTfkFilmRecommendMixin from "./JfbMovieTfkFilmRecommendMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
-  import getServiceUrl from "@/common/getServiceUrl";
-  const Color = require('color');
-  import {mapState} from "vuex";
-
-
   export default {
     name: "JfbMovieTfkFilmRecommend",
     components: {
-      XdFontIcon,
-      XdButton
+      XdFontIcon
     },
     mixins: [
       componentsMixins, extsMixins, JfbMovieTfkFilmRecommendMixin
     ],
     data() {
       return {
-        options: {},
-        type:'', //hot rightnow
-        typeList:{hot:{label: '热映影片', value: 'hot'},rightnow:{label: '即将上映', value: 'rightnow'}},
-        typeListStatus: false,
-        backgroundColor:'',
-        isPreview: false,
-        pageToken:'1',
-        pageSize: '20',
-        total: null,
-        dataList:null,
-        showTypeListData:[],
-
-        //基础配置
-        outSpacing:'',
-        showMoreBtn: 'Y',
-        showTotal:'Y',
-        showHot: 'Y',
-        showRightnow:'Y',
-        bgImage:'',
-        showHotName:'',
-        showRightnowName: '',
-
-        //标题
-        titleMargin:{},
-        titleBgColor: '#fff',
-        titleRradius: '0',
-        titleStyle:'button',
-        titleTextColor:'#999',
-        titleTextActColor:'#333',
-        titleTextBgColor:'',
-        titleTextActBgColor:'#eee',
-        titleTextRradius: '30',
-
-        isTitleBorder:'N',
-        isTitleBorderColor:'',
-        isTitleShadow:'N',
-        isTitleShadowColor:'#eee',
-        isTitleShadowWidth:'0',
 
-        moreBgColor:'',
-        moreTextColor:'#999',
-        moreRradius: '40',
-        totalColor: '#999',
-
-        //内容
-        contMargin: {},
-        contBgColor:'#fff',
-        contRradius:'0',
-        contItemRradius:'10',
-        isContBorder:'N',
-        isContBorderColor:'',
-        isContShadow:'N',
-        isContShadowColor:'#eee',
-        isContShadowWidth:'0',
-
-        buyPath:'',
-        fimeDetailPath:'',
-        fimeListPath:'',
-      }
-    },
-    computed:{
-      ...mapState({
-        stateCity: state => state.cityLocation.city
-      }),
-
-      bgImageComp(){
-        if(!this.bgImage || !this.bgImage.url) return 'none';
-        return `url(${getServiceUrl(this.bgImage.url)})`;
-      },
-
-      isTitleMoreBg(){
-        return !!this.moreBgColor;
-      },
-
-      titleBorder() {
-        if (this.isTitleBorder === 'Y') return `2rpx solid ${this.isTitleBorderColor}`;
-        else return '0';
-      },
-      titleShadow(){
-        if(this.isTitleShadow === 'Y') return  `0 0 ${this.isTitleShadowWidth}rpx ${this.isTitleShadowColor}`;
-        else return '0 0 0 rgba(0,0,0,0)';
-      },
-
-      contBorder() {
-        if (this.isContBorder === 'Y') return `2rpx solid ${this.isContBorderColor}`;
-        else return '0';
-      },
-      contShadow(){
-        if(this.isContShadow === 'Y') return  `0 0 ${this.isContShadowWidth}rpx ${this.isContShadowColor}`;
-        else return '0 0 0 rgba(0,0,0,0)';
-      },
-
-
-      titleMarginComp(){
-        let str = `${this.checkValue(this.titleMargin.top, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.titleMargin.right, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.titleMargin.bottom, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.titleMargin.left, 20)}rpx`;
-        return str
-      },
-
-      contPaddingComp(){
-        let str = `${this.checkValue(this.contMargin.top, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.contMargin.right, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.contMargin.bottom, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.contMargin.left, 20)}rpx`;
-        return str
+        //todo
       }
     },
     watch: {
@@ -293,171 +45,56 @@
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']) this.init(value)
       },
-      stateCity(n, o){
-        if(n && JSON.stringify(n) !== JSON.stringify(o)){
-          this.dataList = null;
-          this.getList();
-        }
-      },
-      showTypeList(){
-        this.typeListStatus = true;
-        this.getList();
-      },
     },
     created() {
-      this.isPreview = this.$configProject.isPreview;
-      this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
-      this.init(this.container, true);
+      this.init(this.container);
+
+      //todo
     },
     methods: {
-      toFilmInfo(film_id){
-        console.warn(`toFilmInfo(影片详情).${film_id}`)
-        if(!this.fimeDetailPath) {
-          console.error('未配置链接');
-          return;
-        }
-        if( this.isPreview) return;
-        this.$xdUniHelper.navigateTo({
-          url: this.fimeDetailPath + `?film_id=${film_id}`
-        })
-      },
-      toBuyChooseCinema(film_id){
-        console.warn(`toBuyChooseCinema(选择影院).${film_id}`)
-        if(!this.buyPath) {
-          console.error('未配置链接');
-          return;
-        }
-        if(this.isPreview) return;
-        this.$xdUniHelper.navigateTo({
-          url: this.buyPath + `?film_id=${film_id}`
-        })
-      },
+      onJfbLoad(options) {
 
-      handleTab(value) {
-        if(value === this.type) return;
-        this.type = value;
-        this.getList();
-      },
+        // jfbRootExec('baiduUserLogin', {
 
-      handleMore(){
-        console.warn('handleMore')
-        if(!this.fimeListPath) {
-          console.error('未配置链接');
-          return;
-        }
-        if( this.isPreview) return;
-        this.$xdUniHelper.navigateTo({
-          url: this.fimeListPath
-        })
-      },
-      onJfbLoad(options) {
-        this.options = options;
-      },
+        //   vm: this,//   data: {
 
-      getList(){
-        let fName = 'getTFKRecFilmHotList';
-        if(this.type === 'rightnow') fName = 'getTFKRecFilmRightnowList';
-        if(this.isFirstLoadingData) this.$xdShowLoading({});
-        if(!this.isFirstLoadingData){
-          this.isFirstLoadingData = true;
-        }
-        jfbRootExec(fName, {
-          vm: this,
-          data: {
-            city_code: this.stateCity.city_code,
-            type: this.type,
-            page_token: this.pageToken,
-            page_size: this.pageSize
-          }
-        }).then(res => {
-          this.total = res['total_size']
-          this.dataList = res['list'] || [];
-          if(this.isFirstLoadingData) this.$xdHideLoading({});
-        }).catch(e=>{
-          console.error(e);
-          this.$xdHideLoading({});
-        })
+        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
 
-      },
+        //   }
 
+        // }).then().catch()
+      },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.outSpacing =  getContainerPropsValue(container, 'content.outSpacing', '20');
-        this.titleMargin = getContainerPropsValue(container, 'content.titleMargin', {});
-        this.titleBgColor = getContainerPropsValue(container, 'content.titleBgColor', '#fff');
-        this.titleRradius = getContainerPropsValue(container, 'content.titleRradius', '0');
-        this.titleStyle = getContainerPropsValue(container, 'content.titleStyle', 'button');
-        this.showMoreBtn = getContainerPropsValue(container, 'content.showMoreBtn', 'Y');
-        this.showTotal = getContainerPropsValue(container, 'content.showTotal', 'Y');
-        this.showHot = getContainerPropsValue(container, 'content.showHot', 'Y');
-        this.showRightnow = getContainerPropsValue(container, 'content.showRightnow', 'Y');
-        this.moreBgColor = getContainerPropsValue(container, 'content.moreBgColor', '');
-        this.moreTextColor = getContainerPropsValue(container, 'content.moreTextColor', '#999');
-        this.moreRradius = getContainerPropsValue(container, 'content.moreRradius', '40');
-        this.titleTextColor = getContainerPropsValue(container, 'content.titleTextColor', '#999');
-        this.titleTextActColor = getContainerPropsValue(container, 'content.titleTextActColor', '#333');
-        this.titleTextBgColor = getContainerPropsValue(container, 'content.titleTextBgColor', '');
-        this.titleTextActBgColor = getContainerPropsValue(container, 'content.titleTextActBgColor', '#eee');
-        this.titleTextRradius = getContainerPropsValue(container, 'content.titleTextRradius', '40');
-        this.bgImage = getContainerPropsValue(container, 'content.bgImage', '');
-        this.showHotName = getContainerPropsValue(container, 'content.showHotName', '');
-        this.showRightnowName = getContainerPropsValue(container, 'content.showRightnowName', '');
 
-        this.isTitleBorder = getContainerPropsValue(container, 'content.isTitleBorder', 'N');
-        this.isTitleBorderColor =  getContainerPropsValue(container, 'content.isTitleBorderColor', '#eee');
-        this.isTitleShadow =  getContainerPropsValue(container, 'content.isTitleShadow', 'N');
-        this.isTitleShadowWidth = getContainerPropsValue(container, 'content.isTitleShadowWidth', '10');
-        this.isTitleShadowColor =  getContainerPropsValue(container, 'content.isTitleShadowColor', '#eee');
-
-        this.totalColor = getContainerPropsValue(container, 'content.totalColor', '#999');
-        this.pageSize = getContainerPropsValue(container, 'content.pageSize', '#999');
-
-
-        //内容
-        this.contBgColor = getContainerPropsValue(container, 'content.contBgColor', '#fff');
-        this.contRradius =  getContainerPropsValue(container, 'content.contRradius', '10');
-        this.contMargin = getContainerPropsValue(container, 'content.contMargin', {});
-        this.contItemRradius =  getContainerPropsValue(container, 'content.contItemRradius', '10');
-        this.isContBorder = getContainerPropsValue(container, 'content.isContBorder', 'N');
-        this.isContBorderColor =  getContainerPropsValue(container, 'content.isContBorderColor', '#eee');
-        this.isContShadow =  getContainerPropsValue(container, 'content.isContShadow', 'N');
-        this.isContShadowWidth = getContainerPropsValue(container, 'content.isContShadowWidth', '10');
-        this.isContShadowColor =  getContainerPropsValue(container, 'content.isContShadowColor', '#eee');
-
-        //链接
-        this.buyPath = getContainerPropsValue(container, 'content.buyPath', {value: ""}).value;
-        this.fimeDetailPath = getContainerPropsValue(container, 'content.fimeDetailPath', {value: ""}).value;
-        this.fimeListPath = getContainerPropsValue(container, 'content.fimeListPath', {value: ""}).value;
-
-        //设置标签
-        this.setShowTypeList();
+        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
 
+        //this.height = getContainerPropsValue(container, 'content.height', 10);
       },
-
-      setShowTypeList(){
-        let list = [];
-        if(this.showHot === 'Y') list.push(this.typeList["hot"]);
-        if(this.showRightnow === 'Y') list.push(this.typeList["rightnow"]);
-        list = this.$xdUniHelper.cloneDeep(list).map(item=>{
-          if(item.value === 'hot') item.label = this.showHotName ||item.label
-          if(item.value === 'rightnow') item.label = this.showRightnowName || item.label;
-          return item
-        });
-
-        //已有选中值不设置默认值
-        if(this.type === '') {
-          if(list.length > 0){
-            this.type = list[0].value;
-          }
-          else this.type = '';
-        }
-        this.showTypeListData = this.$xdUniHelper.cloneDeep(list);
-        this.getList();
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
       },
-
     }
   }
 
@@ -468,144 +105,7 @@
 
   .jfb-movie-tfk-film-recommend {
     &__body{
-      .tfk-recommend {
-        background-size: 100% auto;
-        background-position: top center;
-        background-repeat: no-repeat;
-
-        &__tab {
-          height: 60rpx;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          &-left {
-            height: 100%;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-
-            &.line > view {
-              margin: 0 30rpx;
-            }
-            &.button > view {
-              padding: 0 30rpx;
-            }
-
-            & > view {
-              height: 100%;
-
-              line-height: 60rpx;
-              font-size: 28rpx;
-              position: relative;
-              cursor: pointer;
-
-              & > text {
-                height: 6rpx;
-                position: absolute;
-                left:0;
-                right: 0;
-                bottom: -6rpx;
-              }
-            }
-          }
-
-          &-right {
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-
-            & > view:nth-child(1) {
-              margin-right: 30rpx;
-              color: #999;
-              font-size: 24rpx;
-            }
-
-            & > view:nth-child(2) {
-              cursor: pointer;
-              height: 50rpx;
-              line-height: 50rpx;
-              padding: 0 16rpx;
-              display: flex;
-              justify-content: flex-end;
-              align-items: center;
-              font-size: 24rpx;
-
-              &.noBg {
-                padding: 0;
-              }
-            }
-          }
-        }
-
-        &__content {
-          height: 362rpx;
-          overflow: hidden;
-
-          & .tfk-scroll {
-            height: 362rpx;
-            white-space: nowrap;
-            width: 100%;
-          }
-
-          .skeleton-wrap {
-            height: 100%;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            flex-flow: nowrap;
-            .tfk-scroll-item-btn {
-              .skeleton-item(100rpx);
-              margin: 10rpx auto 0;
-            }
-
-            .tfk-scroll-item-image {
-              .skeleton-item(170rpx, 240rpx);
-            }
-            .tfk-scroll-item-title {
-              .skeleton-item;
-            }
-          }
-
-          .tfk-scroll-item {
-            width: 170rpx;
-            height: 100%;
-            margin-right: 30rpx;
-            flex-shrink: 0;
-            display: inline-block;
-
-            &-image {
-              height: 240rpx;
-              overflow: hidden;
-              & > image {
-                width: 100%;
-                height: 100%;
-              }
-            }
-            &-title {
-              height: 40rpx;
-              margin-top: 16rpx;
-              text-align: center;
-              line-height: 40rpx;
-              font-size: 28rpx;
-              .uni-one-cut(40)
-            }
-
-            &-btn {
-              height: 50rpx;
-              width: 100rpx;
-              margin: 16rpx auto 0;
-            }
-
-          }
-        }
-      }
-    }
 
-    .noConfig {
-      line-height: 100rpx;
-      text-align: center;
-      font-size: 26rpx;
     }
   }
 </style>