get-current-pages.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <page-head title="getCurrentPages"></page-head>
    <view class="uni-padding-wrap">
      <button @click="_getCurrentPages">getCurrentPages</button>
      <view v-if="pages.length" style="padding: 15px 0px">
        <text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text>
        <template v-for="(page, index) in pages" :key="page.route">
          <text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
        </template>
      </view>
    </view>

    <page-head title="currentPageStyle"></page-head>
    <view class="page-style-item" v-for="(value, key) in currentPageStyle" :key="key">
      <view class="item-text">
        <text class="item-text-key">{{key}}:</text>
        <text class="item-text-value">{{value}}</text>
      </view>
      <view class="set-value" v-if="typeof value == 'boolean'">
        <switch :checked="getStyleValue(key).getBoolean('oldValue')"
          @change="switchChange(key, $event as UniSwitchChangeEvent)">
        </switch>
      </view>
      <view class="set-value" v-if="typeof value == 'number'">
        <slider :value="getStyleValue(key).getNumber('oldValue')" :show-value="true"
          @change="sliderChange(key, $event as UniSliderChangeEvent)" />
      </view>
      <view class="set-value" v-else-if="typeof value == 'string'">
        <radio-group class="radio-set-value" @change="radioChange(key, $event as RadioGroupChangeEvent)">
          <radio :value="getStyleValue(key).getString('oldValue')">{{getStyleValue(key).getString('oldValue')}}</radio>
          <text class="split-h"></text>
          <radio :value="getStyleValue(key).getString('newValue')">{{getStyleValue(key).getString('newValue')}}</radio>
        </radio-group>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  import { PageStyleItem, PageStyleMap } from './page-style.uts';

  class Page {
    constructor(public route : string) {
    }
  }

  export default {
    data() {
      return {
        checked: false,
        pages: [] as Page[],
        PageStyleMap: PageStyleMap as Map<string, PageStyleItem>,
        currentPageStyle: {} as UTSJSONObject,
        currentPageStyleIsUTSJSONObject: true,
        // TODO
        enablePullDownRefreshStatus: true
      }
    },
    computed: {
      pageStyleText() : string {
        return JSON.stringify(this.currentPageStyle)
      }
    },
    onLoad() {
      this.getPageStyle();
    },
    onPullDownRefresh() {
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 2000)
    },
    methods: {
      startPullDownRefresh() {
        uni.startPullDownRefresh()
      },
      _getCurrentPages: function () {
        this.pages.length = 0
        const pages = getCurrentPages()
        this.pages.push(new Page(pages[0].route))
        if (this.pages[0].route.includes('/tabBar/')) {
          this.checked = true
        }
        for (let i = 1; i < pages.length; i++) {
          this.pages.push(new Page(pages[i].route))
          if (pages[i].route.includes('/tabBar/')) {
            this.checked = false
          }
        }
      },
      /// get-set-page-style
      radioChange(key : string, e : RadioGroupChangeEvent) {
        this.setStyleValue(key, e.detail.value);
      },
      sliderChange(key : string, e : UniSliderChangeEvent) {
        this.setStyleValue(key, e.detail.value);
      },
      switchChange(key : string, e : UniSwitchChangeEvent) {
        this.setStyleValue(key, e.detail.value);
      },
      setStyleValue(key : string, value : any) {
        const style = {}
        style[key] = value
        this.setPageStyle(style)
        this.getPageStyle()
      },
      getStyleValue(key : string) : UTSJSONObject {
        if (PageStyleMap.has(key))
          return PageStyleMap.get(key)!.value;
        else
          return {}
      },
      getPageStyle() : UTSJSONObject {
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        this.currentPageStyle = currentPage.$getPageStyle()
        this.currentPageStyleIsUTSJSONObject = this.currentPageStyle instanceof UTSJSONObject
        return this.currentPageStyle;
      },
      setPageStyle(style : UTSJSONObject) {
        console.log('setPageStyle:', style);
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        currentPage.$setPageStyle(style);
      },
      // getPageStyle() {
      //   const pages = getCurrentPages();
      //   const currentPage = pages[pages.length - 1];
      //   this.currentPageStyle = currentPage.$getPageStyle();
      //   this.currentPageStyleIsUTSJSONObject = this.currentPageStyle instanceof UTSJSONObject
      // },
      // setPageStyle(enable : boolean) {
      //   // 目前仅支持 enablePullDownRefresh
      //   const pages = getCurrentPages();
      //   const currentPage = pages[pages.length - 1];
      //   currentPage.$setPageStyle({
      //     enablePullDownRefresh: enable
      //   });
      //   this.enablePullDownRefreshStatus = enable
      // },
      // getCurrentPage(): Page {
      //   const pages = getCurrentPages();
      //   const currentPage = pages[pages.length - 1];
      //   return currentPage;
      // }
    },
  }
</script>

<style>
  .page {
    flex: 1;
    padding: 10px;
  }

  .page-style {
    margin-top: 15px;
  }

  .page-style-item {
    padding: 10px;
    margin-top: 10px;
    background-color: #ffffff;
    border-radius: 5px;
  }

  .item-text {
    flex-direction: row;
  }

  .item-text-key {
    font-weight: bold;
  }

  .item-text-value {
    margin-left: 32px;
  }

  .set-value {
    margin-top: 10px;
  }

  .radio-set-value {
    flex-direction: row;
  }

  .split-h {
    width: 15px;
  }
</style>