novelQuick/src/pages/tools/yunDongJiBu/index.ux

<import name="center-modal" src="../../../components/center-modal"></import>
<import name="add-desktop" src="/src/components/addDesktop"></import>

<template>
  <div class="wrapper" style="position: relative;">
    <add-desktop></add-desktop>
     <image class="w h-350" style="width: 100%;" src="https://ytnovels.oss-cn-shanghai.aliyuncs.com/appStatic/images/source/yundongjibu.jpg"></image>
     <div class="num">
         <text class="curNum" id="popup" @click="setNum">{{  curNum  }}</text>
          <text class="totalNum">/100000步</text>
     </div>
     <center-modal
      show="{{showModal}}"
      title="设置步数"
      @close="closeModal"
      if="{{showModal}}"
    >
      <div class="popup_box">
          <input
            type="text"
            id="search-input"
            class="search-input"
            placeholder="请输入书名或作者"
            value="{{curNum}}"
            onchange="change"
          />
          <!-- <div class="flex">
            <div class="btn btn_cancel">
              <text>取消</text> 
            </div>
            <div class="btn btn_sure" @click="closePopup">
              <text>确定</text> 
            </div>
          </div> -->
        </div>
    </center-modal>
  </div>
</template>

<script>
import health from '@service.health'
export default {
  private: {
    title: '欢迎体验快应用开发',
    curNum:0,
    inputNum:1000,
    showPopup:false,
    showModal: false,
    support:false,
  },

  onInit() {
    var that = this
    health.hasStepsOfDay({
      success: function(data) {
        if(!data.support){ 
          $utils.showToast(`当前设备获取不到步数`)
        }else{
          that.support = true
          health.getTodaySteps({
            success: function(data) {
              that.curNum = data.steps
              // $utils.showToast(`获取成功${data.steps}步数`)
            },
            fail: function(data, code) {
              if(code == '1001'){
                $utils.showToast(`还不支持获取步数`)
              }else if (code == '201'){
                $utils.showToast(`用户拒绝授权`)
              }else if (code == '207'){
                $utils.showToast(`用户拒绝并勾选不再询问复选框`)
              }
              console.log(`handling fail, code = ${code}, errorMsg=${data}`)
            }
          })
        }
      },
      fail: function(data, code) {
        console.log(`handling fail!, code = ${code}`)
      }
    })
  },
  // 设置步数
  setNum(){
    if(!this.support){
      this.showModal = true
    }
  },
    closeModal() {
      this.showModal = false
    },
  change(e){
    console.log('e',e)
    this.curNum = e.text
  },
   // 打开Popup
    openPopup() {
      this.showPopup = true;
      console.log('弹窗已打开');
    },
    
    // 关闭Popup
    closePopup() {
      this.showPopup = false;
      console.log('弹窗已关闭');
    },
    
    // Popup状态变化回调
    popupStateChange(e) {
      console.log('弹窗状态变化:', e.state);
      if (e.state === 'hide') {
        // 确保状态同步
        this.showPopup = false;
      }
    }
}
</script>

<style lang="less">
.wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title {
  text-align: center;
  color: #212121;
}
.num{
  position: absolute;
  top: 490px;
  left: 300px;
  flex-direction: column;
  .curNum{
    font-size: 50px;
    color: #000;
    font-weight: bold;
  }
  .totalNum{
    font-size: 26px;
    color: #999;
  }
}
.popup_box{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .search-input{
    border: 1px solid #000000;
    padding: 20px;
    width: 550px;
  }
  .btn{
    width: 150px;
    height: 40px;
    border: 1px solid #000000;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
  }
  .btn_sure{
    color: #ffffff;
    background: linear-gradient(90deg, #03fedf, #2ed9fb);
  }
}
</style>