get-current-pages.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
    <!-- #endif -->
    <view>
      <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>
        <button class="uni-common-mt" @click="check$page">check $page</button>
        <button class="uni-common-mt" @click="checkGetParentPage">
          check getParentPage
        </button>
        <button class="uni-common-mt" @click="checkGetDialogPages">
          check getDialogPages
        </button>
        <button
          id="check-get-element-by-id-btn"
          class="uni-common-mt"
          @click="checkGetElementById"
        >
          check getElementById
        </button>
        <button class="uni-common-mt" @click="checkGetAndroidView">
          check getAndroidView
        </button>
      </view>

      <page-head title="currentPageStyle"></page-head>
      <template v-for="(item, index) in PageStyleArray">
        <view
          class="page-style-item"
          v-if="currentPageStyle[item.key] != null"
          :key="index"
        >
          <view class="item-text">
            <text class="item-text-key">{{ item.key }}:</text>
            <text class="item-text-value">{{
              currentPageStyle[item.key]
            }}</text>
          </view>
          <view class="set-value" v-if="item.type == 'boolean'">
            <switch
              :checked="currentPageStyle.getBoolean(item.key)"
              @change="switchChange(item.key, $event as UniSwitchChangeEvent)"
            >
            </switch>
          </view>
          <view class="set-value" v-else-if="item.type == 'number'">
            <slider
              :value="currentPageStyle.getNumber(item.key)"
              :show-value="true"
              @change="sliderChange(item.key, $event as UniSliderChangeEvent)"
            />
          </view>
          <view class="set-value" v-else-if="item.type == 'string'">
            <radio-group
              class="radio-set-value"
              @change="radioChange(item.key, $event as RadioGroupChangeEvent)"
            >
              <radio
                class="radio-value"
                v-for="(item2, index2) in item.value"
                :key="index2"
                :value="item2"
                >{{ item2 }}
              </radio>
            </radio-group>
          </view>
        </view>
      </template>
      <button style="margin: 10px" @click="goSetDisablePullDownRefresh">
        go set disable pullDownRefresh
      </button>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

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

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

  export default {
    data() {
      return {
        checked: false,
        pages: [] as Page[],
        PageStyleArray: PageStyleArray as PageStyleItem[],
        currentPageStyle: {} as UTSJSONObject,
        testing: false
      }
    },
    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.pages[0].route == '/') {
          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()
      },
      getPageStyle() : UTSJSONObject {
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        this.currentPageStyle = currentPage.getPageStyle()
        return this.currentPageStyle;
      },
      setPageStyle(style : UTSJSONObject) {
        console.log('setPageStyle:', style);
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        currentPage.setPageStyle(style);
      },
      goSetDisablePullDownRefresh() {
        uni.navigateTo({
          url: '/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh'
        });
      },
      getCurrentPage() : UniPage {
        const pages = getCurrentPages()
        return pages[pages.length - 1]
      },
      check$page() : boolean {
        const page = this.getCurrentPage()
        let res = this.$page === page
        if (this.testing && res) {
          res = page.options.get('test') == '123'
          if (res) {
            // #ifdef WEB
            res = page.route == '/pages/API/get-current-pages/get-current-pages'
            // #endif
            // #ifndef WEB
            res = page.route == 'pages/API/get-current-pages/get-current-pages'
            // #endif
          }
        }
        console.log('check $page', res)
        return res
      },
      checkGetParentPage() : boolean {
        const page = this.getCurrentPage()
        const parentPage = page.getParentPage()
        const res = parentPage == null
        console.log('check getParentPage', res)
        return res
      },
      checkGetDialogPages() : boolean {
        const page = this.getCurrentPage()
        const dialogPages = page.getDialogPages()
        const res = Array.isArray(dialogPages) && dialogPages.length == 0
        console.log('check getDialogPages', res)
        return res
      },
      checkGetElementById() : boolean {
        const page = this.getCurrentPage()
        const element = page.getElementById('check-get-element-by-id-btn')
        let res = element != null
        // #ifndef APP-ANDROID
        if (res) {
          const elPage = element!.getPage()
          console.log('elPage', elPage)
          res = elPage === page
        }
        // #endif
        console.log('check getElementById', res)
        return res
      },
      checkGetAndroidView() : boolean {
        const page = this.getCurrentPage()
        const androidView = page.getAndroidView()
        // #ifdef APP-ANDROID
        const res = androidView != null
        // #endif
        // #ifndef APP-ANDROID
        const res = androidView == null
        // #endif
        console.log('check getAndroidView', res)
        return res
      },
    },
  }
</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: 5px;
}

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

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

.radio-value {
  margin-left: 10px;
}
</style>