jufubao-movie 1.0.36-beta1 → 1.0.36-beta3

package/src/components/JfbMovieTfkFilmRecommend/JfbMovieTfkFilmRecommend.vue

@@ -14,30 +14,295 @@
     </view>
     <!-- #endif -->
     <view class="jfb-movie-tfk-film-recommend__body">
-      <view>测试插件( {{containerId}} )</view>
+      <view class="x-line"></view>
+      <view
+        class="tfk-recommend"
+        v-if="showTypeList.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 showTypeList"
+              :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 showTypeList"
+              :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"
+              :style="{
+
+              }"
+            >
+              <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="toBuyChooseCinema(item.id)">购票</xd-button>
+                  <xd-button
+                    v-else-if="item.show_button === '2'"
+                    type="subPrimary"
+                    style="display:block;"
+                    size="mini"
+                    @click="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="toFilmInfo(item.id)"
+                  >想看</xd-button>
+                  <xd-button
+                    v-else-if="item.show_button === '2'"
+                    type="subPrimary"
+                    style="display:block;"
+                    size="mini"
+                    @click="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>
   </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
+      XdFontIcon,
+      XdButton
     },
     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,
+        isFirstLoadingData: false,
+
+        //基础配置
+        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)';
+      },
 
-        //todo
+      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)';
+      },
+
+      showTypeList(){
+        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(list.length > 0){
+          this.type = list[0].value;
+        }
+        else this.type = '';
+        return list;
+      },
+
+
+      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
       }
     },
     watch: {
@@ -45,55 +310,140 @@
         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.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);
-
-      //todo
     },
     methods: {
-      onJfbLoad(options) {
+      toFilmInfo(film_id){
+        if( this.isPreview) return;
+        this.$xdUniHelper.navigateTo({
+          url: this.fimeDetailPath + `?film_id=${film_id}`
+        })
+      },
+      toBuyChooseCinema(film_id){
+        if( this.isPreview) return;
+        this.$xdUniHelper.navigateTo({
+          url: this.buyPath + `?film_id=${film_id}`
+        })
+      },
 
-        // jfbRootExec('baiduUserLogin', {
+      handleTab(value) {
+        if(value === this.type) return;
+        this.type = value;
+        this.getList();
+      },
 
-        //   vm: this,//   data: {
+      handleMore(){
+        if( this.isPreview) return;
+        this.$xdUniHelper.navigateTo({
+          url: this.fimeListPath
+        })
+      },
+      onJfbLoad(options) {
+        this.options = options;
+      },
 
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+      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({});
+        })
 
-        // }).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.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+        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: ""});
+        this.fimeDetailPath = getContainerPropsValue(container, 'content.fimeDetailPath', {value: ""});
+        this.fimeListPath = getContainerPropsValue(container, 'content.fimeListPath', {value: ""});
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
-      },
-      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)
+        this.getList();
       },
+
       onJfbUpdate(...data) {
-        console.log('event.onJfbUpdate', data)
       },
       onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
+
       },
     }
   }
@@ -105,7 +455,143 @@
 
   .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;
+              .uni-one-cut(40)
+            }
+
+            &-btn {
+              height: 50rpx;
+              width: 100rpx;
+              margin: 16rpx auto 0;
+            }
+
+          }
+        }
+      }
+    }
 
+    .noConfig {
+      line-height: 100rpx;
+      text-align: center;
+      font-size: 26rpx;
     }
   }
 </style>