dialog-page.uvue

<template>
  <view class="uni-padding-wrap">
    <button class="uni-common-mt" id="go-next-page" @click="goNextPage">
      go next page
    </button>
    <button class="uni-common-mt" id="open-dialog1" @click="openDialog1">
      open dialog 1
    </button>
    <button class="uni-common-mt" id="open-dialog1-wrong-path" @click="openDialog1WrongPath">
      open dialog page 1 with wrong path
    </button>
    <button class="uni-common-mt" id="go-next-page-open-dialog1" @click="goNextPageOpenDialog1">
      go next page & open dialog1
    </button>
    <button class="uni-common-mt" id="open-dialog1" @click="openDialog3">
      open dialog 3 test page style
    </button>
    <text class="uni-common-mt choose-open-animation-type-title">choose open dialogPage animationType</text>
    <radio-group class="choose-open-animation-type-radio-group" @change="handleOpenAnimationType">
      <radio class="ml-10 uni-common-mt" v-for="item in openAnimationTypeList" :key="item" :value="item"
        :checked="openAnimationType == item">{{ item }}
      </radio>
    </radio-group>
  </view>
</template>

<script lang="uts">
  import {
    state,
    setLifeCycleNum
  } from '@/store/index.uts'

  type OpenAnimationType =
    'auto' |
    'none' |
    'slide-in-right' |
    'slide-in-left' |
    'slide-in-top' |
    'slide-in-bottom' |
    'fade-in' |
    'zoom-out' |
    'zoom-fade-out'

  export default {
    data() {
      return {
        jest_click_x: -1,
        jest_click_y: -1,
        openAnimationType: 'none' as OpenAnimationType,
        openAnimationTypeList: [
          'auto',
          'none',
          'slide-in-right',
          'slide-in-left',
          'slide-in-top',
          'slide-in-bottom',
          'fade-in',
          'zoom-out',
          'zoom-fade-out'
        ]
      }
    },
    onLoad() {
      console.log('dialogPage parent onLoad')
    },
    onShow() {
      console.log('dialogPage parent onShow')
      setLifeCycleNum(state.lifeCycleNum + 10)
    },
    onReady() {
      console.log('dialogPage parent onReady')
    },
    onHide() {
      console.log('dialogPage parent onHide')
      setLifeCycleNum(state.lifeCycleNum - 10)
    },
    onUnload() {
      console.log('dialogPage parent onUnload')
    },
    methods: {
      goNextPage() {
        uni.navigateTo({
          url: '/pages/API/dialog-page/next-page'
        })
      },
      openDialog1() {
        uni.openDialogPage({
          url: '/pages/API/dialog-page/dialog-1?name=dialog1',
          animationType: this.openAnimationType,
          success(res) {
            console.log('openDialogPage1 success', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          },
          fail(err) {
            console.log('openDialogPage1 fail', err)
            setLifeCycleNum(state.lifeCycleNum - 4)
          },
          complete(res) {
            console.log('openDialogPage1 complete', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          }
        })
      },
      openDialog2() {
        uni.openDialogPage({
          url: '/pages/API/dialog-page/dialog-2',
          animationType: this.openAnimationType,
          disableEscBack: true,
          success(res) {
            console.log('openDialog2 success', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          },
          fail(err) {
            console.log('openDialog2 fail', err)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum - 4)
          },
          complete(res) {
            console.log('openDialog2 complete', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          }
        })
      },
      openDialog1WrongPath() {
        uni.openDialogPage({
          url: '/pages/API/dialog-page/dialog-11?name=dialog1',
          success(res) {
            console.log('openDialogPage1 success', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          },
          fail(err) {
            console.log('openDialogPage1 fail', err)
            setLifeCycleNum(state.lifeCycleNum - 4)
          },
          complete(res) {
            console.log('openDialogPage1 complete', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          }
        })
      },
      goNextPageOpenDialog1() {
        uni.navigateTo({
          url: '/pages/API/dialog-page/next-page',
          success() {
            setTimeout(() => {
              uni.openDialogPage({
                url: '/pages/API/dialog-page/dialog-1?name=dialog1',
                animationType: this.openAnimationType,
                success(res) {
                  console.log('openDialogPage1 success', res)
                  // 自动化测试
                  setLifeCycleNum(state.lifeCycleNum + 1)
                },
                fail(err) {
                  console.log('openDialogPage1 fail', err)
                  // 自动化测试
                  setLifeCycleNum(state.lifeCycleNum - 4)
                },
                complete(res) {
                  console.log('openDialogPage1 complete', res)
                  // 自动化测试
                  setLifeCycleNum(state.lifeCycleNum + 1)
                }
              })
            }, 1000)
          }
        })
      },
      closeDialog() {
        uni.closeDialogPage({
          success(res) {
            console.log('closeDialog success', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          },
          fail(err) {
            console.log('closeDialog fail', err)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum - 4)
          },
          complete(res) {
            console.log('closeDialog complete', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          }
        })
      },
      closeSpecifiedDialog(index : number) {
        const dialogPages = this.$page.getDialogPages()
        uni.closeDialogPage({
          dialogPage: dialogPages[index],
          success(res) {
            console.log('closeSomeOneDialog success', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          },
          fail(err) {
            console.log('closeSomeOneDialog fail', err)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum - 4)
          },
          complete(res) {
            console.log('closeSomeOneDialog complete', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          }
        })
      },
      setLifeCycleNum(value : number) {
        setLifeCycleNum(value)
      },
      getLifeCycleNum() : number {
        return state.lifeCycleNum
      },
      jest_OpenDialog1() {
        uni.openDialogPage({
          url: '/pages/API/dialog-page/dialog-1?name=dialog1'
        })
      },
      jest_CloseDialog1() {
        uni.closeDialogPage({})
      },
      jest_getTapPoint() {
        const systemInfo = uni.getSystemInfoSync()
        let ratio = 1
        if (systemInfo.platform == 'android') {
          ratio = systemInfo.devicePixelRatio
        }
        this.jest_click_x = systemInfo.screenWidth / 2 * ratio
        this.jest_click_y = systemInfo.statusBarHeight * ratio + 10
      },
      openDialog2ForTest() {
        uni.openDialogPage({
          url: '/pages/API/dialog-page/dialog-2'
        });
      },
      closeDialog2ForTest() {
        uni.closeDialogPage({});
      },
      setPageStyleForTest(style : UTSJSONObject) {
        const pages = this.$page.getDialogPages();
        if (pages.length > 0) pages[pages.length - 1].setPageStyle(style);
      },
      openDialog3() {
        uni.openDialogPage({ url: '/pages/API/dialog-page/dialog-3', animationType: this.openAnimationType })
      },
      handleOpenAnimationType(e : RadioGroupChangeEvent) {
        this.openAnimationType = e.detail.value as OpenAnimationType
      },
      // 自动化测试
      getDialogPage() : UniPage | null {
        const dialogPages = this.$page.getDialogPages()
        return dialogPages.length > 0 ? dialogPages[0] : null
      },
      // 自动化测试
      dialogPageCheckGetDialogPages() : boolean {
        const dialogPage = this.getDialogPage()!
        const dialogPages = dialogPage.getDialogPages()
        const res = dialogPages.length == 0
        return res
      },
      // 自动化测试
      dialogPageGetPageStyle() : UTSJSONObject {
        const dialogPage = this.getDialogPage()!
        return dialogPage.getPageStyle()
      },
      // 自动化测试
      dialogPageSetPageStyle() {
        const dialogPage = this.getDialogPage()!
        dialogPage.setPageStyle({
          backgroundColorContent: 'red'
        })
      },
      // 自动化测试
      dialogPageCheckGetElementById() : boolean {
        const dialogPage = this.getDialogPage()!
        const element = dialogPage.getElementById('dialog1-go-next-page')
        let res = element != null
        // #ifndef APP-ANDROID
        if (res) {
          const elPage = element!.getPage()
          console.log('elPage', elPage)
          res = elPage === dialogPage
        }
        // #endif
        return res
      },
      // 自动化测试
      dialogCheckGetAndroidView() : boolean {
        const dialogPage = this.getDialogPage()!
        const androidView = dialogPage.getAndroidView()
        const res = androidView != null
        return res
      },
      // 自动化测试
      dialogCheckGetIOSView() : boolean {
        const dialogPage = this.getDialogPage()!
        const IOSView = dialogPage.getIOSView()
        const res = IOSView != null
        return res
      },
      // 自动化测试
      dialogCheckGetHTMLElement() : boolean {
        const dialogPage = this.getDialogPage()!
        const HTMLView = dialogPage.getHTMLElement()
        const res = HTMLView != null
        return res
      },
    }
  }
</script>

<style>
  .ml-10 {
    margin-left: 10px;
  }

  .choose-open-animation-type-title {
    font-weight: bold;
  }

  .choose-open-animation-type-radio-group {
    flex-direction: row;
    flex-wrap: wrap;
  }
</style>