yunDongJiBu.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view class="content p-rel" :style="{ paddingTop: statusBarHeight + 'px' }">
  3. <view class="p-rel w">
  4. <image class="w" style="height: 2800rpx;" src="/static/image/source/yundongjibu.jpg"></image>
  5. <view class="p-abs zindex-1 text-52 text-b w"
  6. @click="editNum()"
  7. :style="{
  8. top:`${ 480 }rpx`,
  9. left:'35vw',
  10. }"
  11. >{{ num }}</view>
  12. <view class="p-abs zindex-1 text-24 text-aaa text-500"
  13. :style="{
  14. top:`${ 550 }rpx`,
  15. left:'35vw',
  16. }">/{{ totalNum }}步</view>
  17. </view>
  18. <up-popup :show="popup" mode="center" :closeOnClickOverlay="true"
  19. @close="close" closeable :round="20">
  20. <view class="h-300 bg-white pd-30 radio-20">
  21. <view class="text-center text-30">设置步数</view>
  22. <up-input class="border mgt-30 pdy-30 pdx-20 text-28"
  23. type="number" maxlength="6" v-model="inputNum" placeholder="请输入运动步数" />
  24. <view class="btn_s mgt-30" @click="confirm">提交</view>
  25. </view>
  26. </up-popup>
  27. </view>
  28. </template>
  29. <script setup>
  30. import { ref, onMounted } from "vue";
  31. import { onShow } from "@dcloudio/uni-app";
  32. var statusBarHeight = uni.getStorageSync('statusBarHeight')
  33. const popup = ref(false)
  34. const num = ref(1000)
  35. const totalNum = ref(100000)
  36. const inputNum = ref(null)
  37. // 修改步数
  38. const editNum = ()=>{
  39. popup.value = true
  40. inputNum.value = num.value
  41. }
  42. const confirm = ()=>{
  43. if(num.value < 0){
  44. uni.showToast({
  45. title:'请正确输入步数',
  46. icon:'none'
  47. })
  48. return
  49. }
  50. num.value = inputNum.value
  51. close()
  52. uni.showToast({
  53. title:'修改成功',
  54. icon:'none'
  55. })
  56. }
  57. const close = ()=>{
  58. popup.value = false
  59. }
  60. // #ifdef MP-WEIXIN
  61. wx.getWeRunData({
  62. success (res) {
  63. // 拿 encryptedData 到开发者后台解密开放数据
  64. const encryptedData = res.encryptedData
  65. // 或拿 cloudID 通过云调用直接获取开放数据
  66. const cloudID = res.cloudID
  67. console.log('encryptedData',encryptedData)
  68. console.log('cloudID',cloudID)
  69. }
  70. })
  71. // #endif
  72. </script>
  73. <style lang="scss" scoped>
  74. </style>