gxd-uni-library-editx 1.0.0

package/src/components/XdOnlineSeat/XdOnlineSeat.vue

@@ -0,0 +1,796 @@
+<template>
+  <view class="xd-seat" v-if="paiqiStatus">
+    <view class="xd-seat__title" v-if="filmInfo" id="xd-seat__title" :style="{borderTopColor: $mainColor}">
+      <view class="xd-seat__title-name">{{filmInfo['show_name']}}</view>
+      <view class="xd-seat__title-address">{{cinemaInfo['address']}}</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>
+    <view class="xd-seat__content" v-if="height !== null" :style="getHeight">
+      <xd-online-seat-move
+        v-model="userSelectedSeatInfo"
+        v-if="selectedSeatInfo !== null"
+        :list="selectedSeatList"
+        :seat-max-buy-number="4"
+        :hall-name="selectedSeatInfo['hall_name']"
+        @select="handleSelect"
+      ></xd-online-seat-move>
+    </view>
+    <view class="xd-seat__footer" id="xd-seat__footer">
+      <view class="xd-seat__footer-notice">
+        <xd-notice-bar
+          :scrollable="noticeList.length > 1"
+          showIcon
+          background-color="#fff"
+          color="#999"
+        >
+          <view v-for="(item,index) in noticeList" :key="index">{{item}}</view>
+        </xd-notice-bar>
+      </view>
+      <view class="xd-seat__footer-paiqi">
+        <view class="xd-seat__footer-paiqi-tab">
+          <view>
+            <scroll-view
+              scroll-x
+              :scroll-left="scrollLeftTab"
+              class="xd-seat__footer-scroll"
+              :scroll-into-view="scheduleTabinto"
+              scroll-with-animation
+            >
+              <view class="xd-seat__footer-scroll-box tab">
+                <template v-if="scheduleListIsShow">
+                  <view
+                    v-for="(item,index) in scheduleTabList"
+                    :id="`tab-index-${index}`"
+                    :style="{
+                      color: scheduleTabListId === index? $mainColor : '#111'
+                    }"
+                    :key="item.id"
+                    @click="handleChangeSchduleTab(index)"
+                  >
+                    <view>{{item['name']}}</view>
+                  </view>
+                </template>
+                <view v-else class="tab-show">{{getSelectPaiqiShow}}</view>
+              </view>
+            </scroll-view>
+          </view>
+          <view >
+            <xd-button @click="handleChangeSchdulePaiqi" type="primary" radius="10rpx" size="small">{{scheduleListIsShow?'收起场次': '切换场次'}}</xd-button>
+          </view>
+        </view>
+        <view class="xd-seat__footer-paiqi-content" v-if="scheduleListIsShow">
+          <scroll-view
+            scroll-x
+            class="xd-seat__footer-scroll"
+            :scroll-into-view="scheduleListinto"
+          >
+            <view class="xd-seat__footer-scroll-box content">
+              <view
+                v-for="(itemc,indexc) in getScheduleItem"
+                :id="`content-index-${indexc}`"
+                :style="{
+                  borderColor: scheduleListIndex === indexc? $mainColor : '#bbb',
+                  background:scheduleListIndex === indexc ? mainColorToArray: 'rgba(100,100,100,.05)'
+                }"
+                :key="itemc.id"
+                @click="handleChangeSchdule(itemc,indexc)"
+              >
+                <view><text>{{itemc['show_time_hour']}}</text><text>({{itemc['show_version']}})</text></view>
+                <view>{{itemc['hall_name']}}</view>
+                <view>
+                  <xd-unit font-weight="normal" :price="itemc['price']" :font-size="24"></xd-unit>
+                </view>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+      <view class="xd-seat__footer-tick" v-if="getSelectedNames.length > 0">
+        <view
+          :style="{borderColor: $mainColor, color: $mainColor}"
+          v-for="(name, nindex) in getSelectedNames"
+          :key="nindex"
+        >{{name}}</view>
+      </view>
+      <view class="xd-seat__footer-phone">
+        <view>取票手机号：</view>
+        <view>
+          <input
+            class="xd-seat__footer-phone-input"
+            :focus="phoneFouse"
+            @confirm="doneInput"
+            type="text"
+            :adjust-position="true"
+            @input="onInput"
+            placeholder="请输入手机号"
+            v-model="phone"/>
+        </view>
+      </view>
+      <view class="xd-seat__footer-buy">
+        <xd-button @click="handleBuy" type="primary" radius="10rpx">
+          <view class="xd-seat__footer-buy-box">
+            <xd-unit v-if="getPrice > 0" :price="getPrice" :font-size="36" :iocn-size=".45" font-weight="normal" color="#fff"></xd-unit>
+            <view>确认选择</view>
+          </view>
+        </xd-button>
+      </view>
+    </view>
+    <xd-dailog
+      width="60%"
+      :show.sync="showDailog"
+      :radius="15"
+      :cancel="false"
+      :confirm="false"
+      title=""
+      background="#111"
+      @close="handleClose"
+
+    >
+      <view class="xd-seat__notice">
+        <view class="xd-seat__notice-icon">
+          <xd-font-icon icon="iconinfo" size="80" color="rgba(255,255,255,.8)"></xd-font-icon>
+        </view>
+        <view class="xd-seat__notice-image">
+          <view>
+            <xd-font-icon icon="iconduigou" size="45" color="rgba(255,255,255,.8)"></xd-font-icon>
+          </view>
+          <view></view>
+          <view>
+            <xd-font-icon icon="iconduigou" size="45" color="rgba(255,255,255,.8)"></xd-font-icon>
+          </view>
+        </view>
+      </view>
+    </xd-dailog>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
+  import XdOnlineSeatMove from "@/components/XdOnlineSeatMove/XdOnlineSeatMove";
+  import XdDailog from "@/components/XdDailog/XdDailog";
+
+  export default {
+    name: "XdOnlineSeat",
+    components: {
+      XdDailog,
+      XdOnlineSeatMove,
+      XdUnit,
+      XdButton,
+      XdFontIcon,
+      XdNoticeBar
+    },
+    props:{
+      filmId: {
+        type: Number | String,
+        required: true
+      },
+      cinemaId: {
+        type: Number | String,
+        required: true
+      },
+      seatId: {
+        type: Number | String,
+        required: true
+      },
+
+      layoutInfo: {
+        type: Object,
+        default(){
+          return {}
+        }
+      }
+    },
+    data(){
+      return {
+        showDailog: false,
+        timeerDailog: null,
+
+        mainColorToArray: null,
+        paiqiStatus: false, //影院信息与排期信息状态
+        cinemaInfo: null, //影院信息
+        filmInfo: null, //电影信息
+        height: null, //内容区域高度
+        show:false, //是否显示返回
+
+        phone: '', //取票手机号
+        phoneFouse: false,
+
+        scheduleList: [], //排期列表
+        scheduleListIndex: 0, //排期影院选中状态
+        scheduleListinto: 'content-index-0', //scroll-into-view
+        scheduleListIsShow: false,
+        scheduleListSelectedItem: null,
+
+
+        scheduleTabList: [], //排期Tab列表
+        scheduleTabListId: 0, //选中排期日期
+        scheduleTabinto: 'tab-index-0', //scroll-into-view
+        scrollLeftTab: 0,
+
+        //选座相关操作
+        selectedSeatInfo: null, //选中影院信息
+        selectedSeatList: null, ///选中影院座位信息
+        userSelectedSeatInfo: null, //用户选中座位信息
+
+        noticeList:[
+          '观影提示:电影放映期间厅内禁止饮食，感谢配合！',
+        ]
+
+      }
+    },
+    computed: {
+      getScheduleItem() {
+        if (this.scheduleList.length === 0) return [];
+        return this.scheduleList[this.scheduleTabListId];
+      },
+
+      getSelectPaiqiShow(){
+        let item = {};
+        if(this.scheduleList &&
+          this.scheduleList[this.scheduleTabListId] &&
+          this.scheduleList[this.scheduleTabListId][this.scheduleListIndex]
+        )  {
+          item = this.scheduleList[this.scheduleTabListId][this.scheduleListIndex]
+        }
+        let tab = {};
+        if(this.scheduleTabList && this.scheduleTabList[this.scheduleTabListId]) {
+          tab = this.scheduleTabList[this.scheduleTabListId];
+        }
+        //首次设置选中场次
+        if(this.scheduleListSelectedItem === null) {
+          this.scheduleListSelectedItem = item;
+        }
+
+        if(!item['show_time_hour']) {
+          return null;
+        }
+
+        let name = tab['name'];
+        let openTime = item['show_time_hour'] ;
+        let verion = item['show_version'];
+        let hall_name = item['hall_name'];
+        return `${name}/${openTime}/${verion}/${hall_name}`
+      },
+
+      getHeight(){
+        return `height: ${this.height}`;
+      },
+
+      getPrice(){
+        if(this.userSelectedSeatInfo === null) return 0;
+        if(this.userSelectedSeatInfo['seatSelected'].length === 0) return 0;
+        return this.userSelectedSeatInfo['totalPrice'];
+      },
+
+      getSelectedNames(){
+        if (this.userSelectedSeatInfo === null) return [];
+        if (this.userSelectedSeatInfo['seatSelected'].length === 0) return [];
+        return this.$xdUniHelper.getListKeyForValue(this.userSelectedSeatInfo['seatSelected'], 'name');
+      },
+    },
+
+    created(){
+      // #ifdef MP-WEIXIN
+      this.show = false;
+      // #endif
+      // #ifdef H5
+      this.show = true;
+      // #endif
+
+      this.getFilm();
+      this.mainColorToArray = `rgba(${this.$color(this.$mainColor).array().join(',')},.15)`;
+
+    },
+    methods:{
+      handleBuy(){
+        //选中座位有隔座
+        if(this.userSelectedSeatInfo['seatError'].length > 0) {
+          this.openNotice();
+          return;
+        }
+
+        //选中座位为空
+        if(this.userSelectedSeatInfo['seatSelected'].length === 0
+          || this.userSelectedSeatInfo['seatSelectedName'].length === 0
+        ) {
+          this.$xdAlert({
+            content: '请选中座位！',
+            isClose: false,
+            width: '70%',
+          });
+          return;
+        }
+
+        //手机号
+        let reg = /^1[3456789]\d{9}$/;
+        let phone = this.$xdUniHelper.tirm(this.phone);
+        if (!reg.test(phone)) {
+          this.$xdAlert({
+            content: '请您输入正确手机号格式!',
+            isClose: false,
+            width: '70%',
+          });
+          return;
+        }
+
+        this.$emit('onBuy', {
+          select: this.userSelectedSeatInfo,
+          phone: this.phone,
+          paiqi: this.scheduleListSelectedItem,
+        });
+      },
+
+      /**
+       * @description 切换展示/隐藏排期列表
+       */
+      handleChangeSchdulePaiqi(){
+        this.scheduleListIsShow = !this.scheduleListIsShow;
+        this.scrollLeftTab = 0;
+        this.setContent();
+
+      },
+
+      /**
+       * @description  切换场次选座操作
+       * @param item 场次情况
+       * @param index 场次所在索引位置
+       */
+      handleChangeSchdule(item, index){
+        if(this.scheduleListIndex === index) return;
+        this.scheduleListIndex = index;
+        this.scheduleListinto = `content-index-${index}`;
+        this.scheduleListIsShow = false;
+        this.scheduleListSelectedItem = item;
+        this.userSelectedSeatInfo = null;
+        this.getSeat(item);
+        this.setContent();
+
+      },
+
+      /**
+       * @description 切换场次日期
+       * @param  index 场次日期所在索引位置
+       */
+      handleChangeSchduleTab(index){
+        if (this.scheduleTabListId === index) return;
+
+        this.scheduleTabListId = index;
+        this.scheduleTabinto = `tab-index-${index}`;
+
+        //内容设置为第一个
+        this.scheduleListIndex = 99999;
+        this.scheduleListinto = `content-index-99999`;
+
+      },
+
+      /**
+       * @description 获取影厅座位信息
+       * @param item 场次对象信息
+       */
+      getSeat(item){
+        this.$emit('onGetSeatList', item, (seat)=>{
+          console.log('onGetSeatList', seat, item);
+          this.selectedSeatInfo = seat;
+          this.selectedSeatList = seat['seat'];
+          this.phone = seat['phone_number']
+        })
+      },
+
+      /**
+       * @description 获取排期数据
+       */
+      getFilm() {
+        this.$emit('onGetFilm', (film) => {
+          this.cinemaInfo = film['cinema_data'];
+          this.filmInfo = this.getFilmInfo(film['film_data']);
+          this.getScheduleList(film['paiqi_data']);
+          console.log('getFilm', film)
+          this.paiqiStatus = true;
+          this.$nextTick(() => {
+            this.setContent();
+          })
+        });
+      },
+
+      /**
+       * @description 设置排期页面元素高度
+       */
+      setContent(){
+        this.$nextTick(() => {
+          this.$xdUniHelper.getWindowHeight(['#xd-seat__title', '#xd-seat__footer'], this)
+            .then(res => {
+              let top = res['#xd-seat__title']['height'];
+              let footer = res['#xd-seat__footer']['height'];
+              console.log('getFilm', top, footer)
+              this.height = `calc(100vh - ${top + footer + this.layoutInfo['top'] + this.layoutInfo['bottom']}px);`
+            })
+            .catch()
+        })
+      },
+
+      /**
+       * @description 获取排期数据
+       */
+      getScheduleList(data) {
+        let tab = [];
+        let list = [];
+        let selectPaiqi = null;
+        data.map((item, index) => {
+          tab.push({label: item['date_name'], value: index, name: item['date_name']});
+          list.push(item['paiqi_data']);
+          item['paiqi_data'].map((paiqi, idx)=>{
+            if (paiqi.jfb_film_id == this.filmId
+              && paiqi.jfb_cinema_id == this.cinemaId
+              && paiqi.data_id == this.seatId
+            ) {
+              this.scheduleTabListId = index;
+              this.scheduleListIndex = idx;
+              selectPaiqi = paiqi;
+            }
+          });
+        });
+        this.scheduleTabList = tab;
+        this.scheduleList = list;
+        this.scheduleListSelectedItem = selectPaiqi;
+        setTimeout(()=>{
+          this.scheduleListinto  = `content-index-${this.scheduleListIndex}`;
+          this.getSeat(selectPaiqi);
+        }, 100);
+
+        console.log(this.scheduleList,this.scheduleTabList, this.scheduleTabListId, this.scheduleListIndex)
+      },
+
+      /**
+       * 获取当前选中提示
+       */
+      getFilmInfo(data) {
+        let film = null;
+        data.map((item) => {
+          console.log(this.filmId, item.id);
+          if (this.filmId == item.id) {
+            film = item;
+          }
+        })
+        return film;
+      },
+
+      /**
+       * @description 开启是否显示隔座提示
+       */
+      openNotice(){
+        this.showDailog = true;
+        this.timeerDailog = setTimeout(()=>{
+          this.showDailog = false;
+          this.timeerDailog = null;
+        }, 1500)
+      },
+      handleClose(){
+        if(this.timeerDailog) {
+          clearTimeout(this.timeerDailog);
+        }
+      },
+      handleSelect(){
+        this.setContent();
+      },
+
+      back() {
+        this.$xdUniHelper.navigateBack();
+      },
+
+      /**
+       * @description 输入事件完成
+       */
+      doneInput() {
+        uni.hideKeyboard()
+      },
+
+      /**
+       * @description 输入事件
+       * @param e
+       */
+      onInput(e) {
+        this.phone = e.target.value.trim();
+      },
+    },
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-seat {
+    height: 100%;
+    overflow-y:hidden;
+
+    &__notice {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      &-icon {
+
+      }
+
+      &-image {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: unit(20,rpx);
+
+        & > view {
+          width: unit(70,rpx);
+          height: unit(70,rpx);
+          border-radius: unit(20,rpx);
+          border-width: unit(4,rpx);
+          border-color: #efefef;
+          border-style: solid;
+          margin: 0 unit(15,rpx);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex: 1;
+
+          &:nth-child(2) {
+            border-style: dotted;
+          }
+        }
+      }
+    }
+
+    &__content {
+      position: relative;
+      z-index: 99;
+    }
+
+    &__title {
+      border-top-width: unit(4,rpx);
+      border-top-style: solid;
+      box-shadow: 0 0 unit(15,rpx) rgba(0,0,0,.2);
+      position: relative;
+      padding: unit(20, rpx) unit(20,rpx);
+      z-index: 100;
+
+      &-name {
+        font-size: @xd-font-size-lg;
+        line-height: unit(40,rpx);
+        padding-bottom: unit(10,rpx);
+      }
+
+      &-address {
+        font-size: @xd-font-size-sm;
+        color: #999;
+      }
+
+      &-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;
+        }
+      }
+
+    }
+
+    &__footer {
+      border-top: 2px solid #efefef;
+      position: relative;
+      z-index: 101;
+      background: #fff;
+
+      &-paiqi {
+        &-content {
+          height: unit(134,rpx);
+          padding: 0 unit(20,rpx);
+          margin-top: unit(20,rpx);
+        }
+
+        &-tab {
+          height: unit(70, rpx);
+          padding: 0 unit(20, rpx);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid #efefef;
+          line-height: unit(70,rpx);
+
+          & > view:first-child {
+            flex: 1;
+            width: 0;
+            height: 100%;
+          }
+
+          & > view:last-child {
+            flex-shrink: 0;
+            margin-left: unit(20,rpx);
+          }
+        }
+      }
+
+      &-notice {
+        padding: unit(5,rpx) unit(20,rpx);
+        border-bottom: 1px solid #efefef;
+        height: unit(44,rpx);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        /deep/ .uni-noticebar {
+          margin-bottom: 0;
+        }
+      }
+
+      &-buy {
+        padding: unit(20,rpx) unit(20, rpx);
+
+        &-box {
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          & > view {
+            margin-left: unit(30,rpx);
+          }
+        }
+      }
+
+      &-tick {
+        padding: unit(20,rpx) unit(20,rpx) 0;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: @xd-font-size-sm;
+
+        & > view {
+          border-width: 1px;
+          border-style: solid;
+          padding: unit(5,rpx) unit(20,rpx);
+          line-height: unit(36,rpx);
+          border-radius: unit(6,rpx);
+          margin-right: unit(20,rpx);
+          min-width: unit(119,rpx);
+          text-align: center;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+
+      &-phone {
+        padding: unit(20,rpx) unit(20,rpx) 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        & > view:first-child {
+          flex-shrink: 0;
+          font-size: @xd-font-size-base;
+        }
+
+        & > view:last-child {
+          flex: 1;
+          width: 0;
+        }
+        &-input {
+          font-size: @xd-font-size-base;
+          background: #fff;
+          border-radius: unit(25, rpx);
+          flex: 1;
+          height: unit(50, rpx);
+          line-height: unit(50, rpx);
+          padding: 0 unit(25, rpx);
+
+          &:hover {
+            background: #f8f8f8;
+          }
+        }
+      }
+
+      &-scroll {
+        height: 100%;
+
+        &-box.content {
+          display: flex;
+          align-items: center;
+          flex-wrap: nowrap;
+          justify-content: flex-start;
+          height: 100%;
+          box-sizing: border-box;
+
+          &> view {
+            flex-shrink: 0;
+            height: 100%;
+            margin-right: unit(20,rpx);
+            border-width: 1px;
+            border-style: solid;
+            box-sizing: border-box;
+            padding: unit(10,rpx);
+            border-radius: unit(10,rpx);
+
+            & > view:first-child {
+              font-size: @xd-font-size-lg;
+              display: flex;
+              justify-content: flex-start;
+              align-items: flex-end;
+
+              & > text:last-child {
+                margin-left: unit(15,rpx);
+                padding-bottom: unit(4,rpx);
+                font-size: @xd-font-size-sm;
+                color: #666
+              }
+            }
+
+            & > view:nth-child(2) {
+              font-size: @xd-font-size-sm;
+              color: #999;
+            }
+
+            & > view:last-child {
+
+            }
+          }
+        }
+
+        &-box.tab {
+          display: flex;
+          align-items: center;
+          flex-wrap: nowrap;
+          height: 100%;
+          box-sizing: border-box;
+          justify-content: flex-start;
+
+          & .tab-show {
+            font-size: @xd-font-size-base;
+          }
+
+          & > view {
+            flex-shrink: 0;
+            height: 100%;
+            margin-right: unit(25, rpx);
+            border-radius: unit(15, rpx);
+
+            & > view:first-child {
+              font-size: @xd-font-size-base;
+              display: flex;
+              justify-content: flex-start;
+              align-items: flex-end;
+            }
+
+            & > view:nth-child(2) {
+              font-size: @xd-font-size-sm;
+              color: #333;
+            }
+
+            & > view:last-child {
+
+            }
+          }
+        }
+      }
+    }
+  }
+</style>