实现左边固定 右边可以上下左右滚动的效果

<template>
  <div class="container" style="overflow: hidden">
    <div class="header" :style="{ zIndex: headerZIndex }">
      <!-- 日期 -->
      <BookDate class="title" :current.sync="current" />

      <!-- 场地信息 -->
      <BookVenueInfo
        :fieldType="fieldType"
        :venueName="venueName"
        :isShowDropdown="venueDropdownVisible"
        :sportId="sportId"
        @prompt="onPromptPopupShow"
        @venue="onVenueDropdownShow"
      />
    </div>

    <!-- 状态列表 -->
    <div class="content__container">
      <BookStatus />
    </div>

    <!--场地格子页-->
    <div class="booklist">
      <Booklist @getopata="getopendata" :toCell="toCell" />
    </div>

    <div class="footer cube-safe-area-pb" :style="{ zIndex: footerZIndex }">
      <BookConfirm
        :isShowDetail="detailPopupVisible"
        @detail="onDetailPopupShow"
        :toChild="detaildata"
        @_tomoney="tomoney"
      />
    </div>

    <!-- 定场须知弹窗 -->
    <BookPromptPopup :visible.sync="promptPopupVisible" />

    <!-- 定场详情弹窗 -->
    <BookDetailActionSheetPopup
      ref="bookDetailActionSheetPopup"
      :visible.sync="detailPopupVisible"
      :zIndex="popupZIndex"
      :toChildMsg="detaildata"
      :nametitle="venueName"
      :currenTime="current"
    />

    <!-- 场地信息下拉弹窗 -->
    <BookVenueDropdown
      :visible.sync="venueDropdownVisible"
      :zIndex="popupZIndex"
      :sportId="sportId"
      @confirm="onVenueDropdownConfirm"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref, Watch } from 'vue-property-decorator';
import moment from 'moment';
import BookPromptPopup from './components/BookPromptPopup.vue';
import BookDetailActionSheetPopup from './components/BookDetailActionSheetPopup.vue';
import BookConfirm from './components/BookConfirm.vue';
import BookVenueInfo from './components/BookVenueInfo.vue';
import BookDate from './components/BookDate.vue';
import BookVenueDropdown from './components/BookVenueDropdown.vue';
import BookStatus from './components/BookStatus.vue';
import Booklist from './components/BookList.vue';
// import any = jasmine.any;

/** 弹窗不再提示标志符 */
const BOOK_PROMPT_VISIBLE_LOCAL_STORAGE_SIGN = 'bookPromptVisible';

@Component({
  components: {
    BookPromptPopup,
    BookDetailActionSheetPopup,
    BookConfirm,
    BookVenueInfo,
    BookDate,
    BookVenueDropdown,
    BookStatus,
    Booklist,
  },
})
export default class VenueBook extends Vue {
  toCell = {};

  /** 场地预定详情组件 */
  @Ref() readonly bookDetailActionSheetPopup!: BookDetailActionSheetPopup;

  /** 定场须知弹窗显隐性 */
  promptPopupVisible = false;
  /** 详情弹窗显隐性 */
  detailPopupVisible = false;
  /** 下拉弹窗显隐性 */
  venueDropdownVisible = false;
  /** 弹窗z-index属性值 */
  popupZIndex = 10;
  /** 头部区域z-index */
  headerZIndex: number | 'auto' = 'auto';
  /** 底部按钮区域z-index */
  footerZIndex: number | 'auto' = 'auto';
  /** 日期选择天数 */
  current = moment().format('YYYY-MM-DD');
  /** 场地类型(半（'1'）/全（'2'，默认）场) */
  fieldType = '2';
  /** 场馆id(string类型) */
  venueId = '1';
  /** 场馆名 */
  venueName = '';
  /** 运动项目id */
  sportId = '';
  detaildata = {
    total: 0,
    totalnum: '0',
    fieldInfo: [],
  };
  booklistdata = {};

  // 传入格子页参数初始化参数
  // 监听传入格子的列表
  @Watch('current', { deep: true })
  wachtcurrent(val: string) {
    this.toCell = {
      startTime: val,
      fieldType: this.fieldType,
      venueId: this.venueId,
      sportsId: this.sportId,
    };
  }

  @Watch('fieldType', { deep: true })
  wachtfieldType(val: string) {
    this.toCell = {
      startTime: this.current,
      fieldType: val,
      venueId: this.venueId,
      sportsId: this.sportId,
    };
  }

  @Watch('venueId', { deep: true })
  wachtvenueId(val: string) {
    this.toCell = {
      startTime: this.current,
      fieldType: this.fieldType,
      venueId: val,
      sportsId: this.sportId,
    };
  }

  @Watch('sportId', { deep: true })
  wachtsportId(val: string) {
    this.toCell = {
      startTime: this.current,
      fieldType: this.fieldType,
      venueId: this.venueId,
      sportsId: val,
    };
  }

  // 传入详情弹框的内容
  @Watch('booklistdata', { deep: true })
  onbooklistChanged() {
    const data = this.booklistdata;
    (this.detaildata as any) = data;
    // console.log(this.detaildata);
  }

  @Watch('venueDropdownVisible')
  onVenueDropdownVisibleChanged(val: boolean) {
    if (!val) {
      setTimeout(() => {
        this.headerZIndex = 'auto';
      }, 400);
    } else {
      this.headerZIndex = this.popupZIndex + 1;
    }
  }

  @Watch('detailPopupVisible')
  onDetailPopupVisibleChanged(val: boolean) {
    if (!val) {
      setTimeout(() => {
        this.footerZIndex = 'auto';
      }, 400);
    } else {
      this.footerZIndex = this.popupZIndex + 1;
    }
  }
  get cardId() {
    return this.$store.state.memberCard.cardId;
  }
  /** 获取用户id */
  get userId() {
    return this.$store.state.user.userInfo.userId;
  }
  async activated() {
    /** 获取运动项目 */
    const { sportId = '1' } = this.$route.query;
    this.sportId = (sportId as string) || '1';

    await this.$store.dispatch('memberCard/updateCardId');

    /** 当未选中不再提示时每次进入页面都弹出占场须知弹窗 */
    localStorage.getItem(BOOK_PROMPT_VISIBLE_LOCAL_STORAGE_SIGN) !== '1' &&
      this.onPromptPopupShow();
  }

  /** 展示定场须知弹窗 */
  onPromptPopupShow() {
    this.promptPopupVisible = true;
  }

  //获取传来的值用于弹框显示
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  getopendata(val: any) {
    // console.log(val);
    this.booklistdata = val;
  }

  /** 展示详情弹窗 */
  onDetailPopupShow() {
    this.detailPopupVisible = !this.detailPopupVisible;
    this.bookDetailActionSheetPopup.refresh();
  }

  /** 场地下拉弹窗展示 */
  onVenueDropdownShow() {
    this.venueDropdownVisible = !this.venueDropdownVisible;
  }

  /** 场地下拉框，确定按钮 */
  onVenueDropdownConfirm(options: {
    fieldType: string;
    venueId: string;
    venueName: string;
  }) {
    const { fieldType, venueId, venueName } = options;
    this.fieldType = fieldType;
    this.venueId = venueId;
    this.venueName = venueName;
  }

  // 去订单支付
  tomoney() {
    // alert('1111');
    console.log(this.booklistdata);
    const requestData = {
      bookDate: this.current, //可以不传
      cardId: this.cardId, //可以不传
      fieldInfo: (this.booklistdata as any).senddata,
      fieldType: this.fieldType,
      // moneyMember: '300',
      moneyTotal: (this.booklistdata as any).total,
      orderTimeType: (this.booklistdata as any).orderTimeType,
      orderType: '12',
      // phone: '',//可以不传
      priceType: '2',
      sportId: this.sportId,
      userId: this.userId,
      status: '5',
      // userId: '',//可以不传
      // userName: '',//可以不传
      venueId: this.venueId,
    };

    this.$utils.repeatCreateOrderRequest({
      apiFunction: this.$service.toReserve,
      requestData,
      success: (res: {
        code: string;
        msg: string;
        data: Record<string, any>;
      }) => {
        try {
          console.log(res);
          const { code, msg, data: { orderNo = '' } = {} } = res;
          if (code === '0' && orderNo) {
            this.$createToast({
              time: 1000,
              txt: msg,
            }).show();
            this.$router.push({
              path: `/cashier/${orderNo}`,
            });
          } else {
            this.$createToast({
              time: 1000,
              txt: msg,
            }).show();
            throw new Error(msg);
          }
        } catch (error) {
          // this._fail(error);
        }
      },
      // fail: this._fail,
      complete: () => {
        // loading.hide();
      },
    });
  }
}
</script>

<style lang="stylus" scoped>
.container
  position relative
  width 100vw
  height 100vh
  background #F5F5F7
  .header
    position absolute
    top 0
    right 0
    left 0
  .content__container
    padding-top 90px
  // 空出header部分高度
  .footer
    position absolute
    right 0
    bottom 0
    left 0
    height 56px
    background #fff
</style>