gxd-uni-library-editx 1.0.0

package/src/components/XdOnlineSchedule/XdOnlineSchedule.vue

@@ -0,0 +1,453 @@
+<template>
+  <view class="xd-online" v-if="status">
+    <!--影院信息-->
+    <view class="xd-online__header" id="xd-online__header" :style="{top: top + 'rpx'}">
+      <view class="xd-online__header-left">
+        <view>{{cinemaInfo['address']}}</view>
+        <view>{{cinemaInfo['cinema_name']}}</view>
+      </view>
+      <view class="xd-online__header-right">
+        <xd-font-icon
+          :color="$mainColor"
+          size="70"
+          icon="icondianhua"
+          @click="handleCallPhoneClick(cinemaInfo['phone'])"></xd-font-icon>
+      </view>
+      <view
+        class="xd-online__header-back"
+        v-if="show"
+        @click.stop="back"
+      >
+        <xd-font-icon
+          icon="iconzhiyuanfanhui12"
+          width="50"
+          height="50"
+          size="50"
+        ></xd-font-icon>
+      </view>
+    </view>
+    <!--影院信息-->
+    <!--影片信息-->
+    <view
+      class="xd-online__content"
+      v-if="topHeight !== null"
+      :style="{paddingTop: topHeight + 'px'}"
+    >
+      <view class="xd-online__content-box">
+        <view class="xd-online__content-left">
+          <image :src="filmInfo.poster"></image>
+        </view>
+        <view class="xd-online__content-right">
+          <view class="xd-online__content-right-title">
+            <text>{{filmInfo.show_name}}</text>
+            <text :style="{color: $mainColor}">评分：{{filmInfo.remark}}</text>
+          </view>
+          <view class="xd-online__content-right-desc">
+            <view>
+              <view>语言：</view>
+              <view>{{filmInfo['language']}}</view>
+            </view>
+            <view>
+              <view>类型：</view>
+              <view class="xd-online__content-right-type">
+                <xd-tag height="30" type="primary">{{filmInfo['show_mark']}}</xd-tag>
+              </view>
+            </view>
+            <view>
+              <view>剧情：</view>
+              <view>{{filmInfo['type']}}</view>
+            </view>
+            <view>
+              <view>导演：</view>
+              <view>{{filmInfo['director']}}</view>
+            </view>
+            <view>
+              <view>领衔：</view>
+              <view>{{filmInfo['leading_role']}}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!--影片信息-->
+    <!--影片排期-->
+    <view class="xd-online__paiqi">
+      <view class="xd-online__paiqi-tab">
+        <xd-tab
+          :list="scheduleTabList"
+          :tab-index="scheduleTabListId"
+          @onTab="handleTab"
+        ></xd-tab>
+      </view>
+      <view
+        class="xd-online__paiqi-notice"
+        :style="{
+          background: noticeBg,
+          color: $mainColor
+        }"
+      >{{cinemaInfo['ticket_notice']}}
+      </view>
+      <view class="xd-online__paiqi-list">
+        <view
+          class="xd-online__paiqi-list-item"
+          v-for="(item) in getScheduleItem"
+          :key="item.id"
+        >
+          <view>
+            <view>{{item['show_time_hour']}}</view>
+            <view>{{item['close_time_hour']}}散场</view>
+          </view>
+          <view>
+            <view>{{item['show_version']}}</view>
+            <view>{{item['hall_name']}}</view>
+          </view>
+          <view>
+            <xd-unit :price="item['price']" font-weight="normal" :font-size="24"></xd-unit>
+          </view>
+          <view>
+            <xd-button @click="handleClick(item, cinemaInfo)" size="small" type="primary">购买</xd-button>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!--影片排期-->
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdTag from "@/components/XdTag/XdTag";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdTab from "@/components/XdTab/XdTab";
+
+  /**
+   * XdOnlineSchedule
+   * @description 电影排期插件
+   * @property {Number} top 顶部到内容区域距离（备注可以从XdLayout插件done事件中获取到）
+   * @property {Number|String} filmId 影片ID
+   *
+   * @event {Function} onGetFilm  获取电影列表与排期信息事件
+   * @event {Function} onBuy   去购买事件
+   */
+
+  export default {
+    name: "XdOnlineSchedule",
+    components: {
+      XdTab,
+      XdUnit,
+      XdButton,
+      XdTag,
+      XdFontIcon
+    },
+    props: {
+      top: {
+        type: Number,
+        default: 0
+      },
+      filmId: {
+        type: Number | String,
+        default: 0
+      }
+    },
+    data() {
+      return {
+        status: false, //加载数据完成
+        cinemaInfo: null, //影院信息
+        filmInfo: null, //电影信息
+
+        topHeight: null, //电影顶部高度
+        noticeBg: null,
+
+        scheduleList: [], //排期列表
+        scheduleTabList: [], //排期Tab列表
+        scheduleTabListId: 0,
+
+        show: false,
+      }
+    },
+    computed: {
+      getScheduleItem() {
+        if (this.scheduleList.length === 0) return [];
+        return this.scheduleList[this.scheduleTabListId];
+      }
+    },
+    filters: {
+      getDesc(info) {
+        return `${info['language']} | ${info['type']} | ${info['leading_role']}`
+      }
+    },
+    created() {
+      // #ifdef MP-WEIXIN
+      this.show = false;
+      // #endif
+      // #ifdef H5
+      this.show = true;
+      // #endif
+
+      this.getFilm();
+      this.noticeBg = `rgba(${this.$color(this.$mainColor).array().join(',')},.15)`;
+
+    },
+    methods: {
+      back() {
+        this.$xdUniHelper.navigateBack();
+      },
+
+      handleClick(item, cinemaInfo) {
+        this.$emit('onBuy', item, cinemaInfo);
+      },
+
+      handleTab(item, index) {
+        if (this.scheduleTabListId === index) {
+          return
+        }
+        this.scheduleTabListId = index;
+      },
+
+      getFilm() {
+        this.$emit('onGetFilm', (film) => {
+          this.cinemaInfo = film['cinema_data'];
+          this.filmInfo = this.getFilmInfo(film['film_data']);
+          this.getScheduleList(film['paiqi_data']);
+          console.log('onGetFilm', film, this.filmInfo);
+
+          this.status = true;
+
+          //
+          this.$nextTick(() => {
+            this.$xdUniHelper.getWindowHeight(['#xd-online__header'], this)
+              .then(res => {
+                this.topHeight = res['#xd-online__header'].height + 20 * this.$rpxNum;
+                console.log('getWindowHeight', res, res['#xd-online__header'], this.topHeight);
+              })
+              .catch()
+          })
+        });
+      },
+
+      /**
+       * @description 获取排期数据
+       */
+      getScheduleList(data) {
+        let tab = [];
+        let list = [];
+        data.map((item, index) => {
+          tab.push({label: item['date_name'], value: index, name: item['date_name']});
+          list.push(item['paiqi_data']);
+        });
+        this.scheduleTabList = tab;
+        this.scheduleList = list;
+      },
+
+      getFilmInfo(data) {
+        console.log('getFilmInfo', data);
+        let film = null;
+        data.map((item) => {
+          if (String(this.filmId) === String(item.id) || Number(this.filmId) === Number(item.id)) {
+            film = item;
+          }
+        })
+        return film;
+      },
+
+      /**
+       * @description 打电话
+       * @param num
+       */
+      handleCallPhoneClick(num) {
+        uni.makePhoneCall({
+          phoneNumber: num
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-online {
+    &__header {
+      position: fixed;
+      left: 0;
+      right: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: unit(20, rpx) unit(0, rpx) unit(20, rpx) unit(20, rpx);
+      box-shadow: 0 0 unit(20, rpx) rgba(0, 0, 0, .2);
+      background: #fff;
+      z-index: 200;
+
+      &-right {
+        width: unit(100, rpx);
+        flex-shrink: 0;
+      }
+
+      &-left {
+        flex: 1;
+        width: 0;
+
+        & > view:first-child {
+          color: #333;
+          line-height: unit(46, rpx);
+          padding-bottom: unit(10, rpx);
+          font-size: @xd-font-size-lg;
+        }
+
+        & > view:last-child {
+          color: #999;
+          font-size: @xd-font-size-sm;
+          line-height: unit(40, rpx);
+        }
+      }
+
+      &-back {
+        position: absolute;
+        top: 50%;
+        left: unit(30, rpx);
+        height: unit(60, rpx);
+        width: unit(60, rpx);
+        opacity: .3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: opacity .5s;
+        transform: translateY(-50%);
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    &__content {
+
+      &-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: unit(20, rpx);
+        background: #fff;
+      }
+
+      &-right {
+        flex: 1;
+        width: 0;
+
+        &-title {
+          padding-bottom: unit(10, rpx);
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-end;
+
+          & > text:first-child {
+            font-size: @xd-font-size-lg + 2;
+            padding-right: unit(20, rpx);
+            font-weight: bold;
+          }
+
+          & > text:last-child {
+            font-size: @xd-font-size-sm;
+            padding-bottom: unit(4, rpx);
+          }
+        }
+
+        &-type {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
+        &-desc {
+          font-size: @xd-font-size-base;
+
+          & > view {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            line-height: unit(40, rpx);
+
+            & > view:last-child {
+              flex-shrink: 0;
+            }
+
+            & > view:last-child {
+              flex: 1;
+              width: 0;
+              color: #666;
+            }
+          }
+        }
+      }
+
+
+      &-left {
+        width: unit(200, rpx);
+        height: unit(280, rpx);
+        flex-shrink: 0;
+        margin-right: unit(20, rpx);
+
+        & > image {
+          height: 100%;
+          width: 100%;
+        }
+      }
+
+
+    }
+
+    &__paiqi {
+      margin-top: unit(20, rpx);
+
+      &-tab {
+        background: #fff;
+      }
+
+      &-notice {
+        background: #fff;
+        height: unit(60, rpx);
+        margin-top: unit(20, rpx);
+        padding: 0 unit(20, rpx);
+        line-height: unit(60, rpx);
+        font-size: @xd-font-size-base;
+      }
+
+      &-list {
+        &-item {
+          background: #fff;
+          padding: unit(20, rpx) unit(10, rpx);
+          margin-top: unit(20, rpx);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          & > view {
+            padding: 0 unit(10, rpx);
+          }
+
+          & > view:nth-child(1), & > view:nth-child(3), & > view:nth-child(4) {
+            width: 20%;
+            flex-shrink: 0;
+          }
+
+          & > view:nth-child(1), & > view:nth-child(2) {
+            & > view:last-child {
+              font-size: @xd-font-size-sm;
+              color: #999;
+            }
+
+            & > view:first-child {
+              font-size: @xd-font-size-lg - 2;
+            }
+          }
+
+
+          & > view:nth-child(2) {
+            width: 0;
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+</style>