使用Vue Cli4.3.1脚手架实现vue移动端开发中的设定闹铃向用户提示时分的分析

- 日理万妓 2023-02-21 12:26 3阅读 0赞

## 实现思路,先获取到当前时间以及需要设定的时间,然后计算出来总分钟数,然后将其除以60取整后得到的就是小时,模60得到的就是除了小时外的剩余的不足60的分钟数 ##

## 请注意:此篇文档只是实现了设定好闹铃后向用户提示还有多长时间的功能,并没有实现设定好之后到时间向用户提醒 ##

<template>
      <div class="box">
        <header class="header">
          <van-nav-bar
            title="定时提醒"
            left-arrow
            @click-left="$router.go(-1)"
          />
        </header>
        
        <div class="content">
          
          <div class="contentTop">
            
            <van-swipe-cell  v-for="(item,index) in ReminderTime" :key="index" right-width=".40rem">
              <van-cell :border="false" title="提醒时间" :value=item />
              <template #right>
                
                <van-button square type="danger" text="删除" @click="del(index)" />
              </template>
            </van-swipe-cell>
          </div>
          
          <div class="contentBottom" @click="SelectTimeFn">
            +添加提醒
          </div>
          
          <van-popup v-model="SelectTime" position="bottom">
            <van-datetime-picker
              v-model="currentTime"
              type="time"
              title="选择时间"
              :min-hour="0"
              :max-hour="23"
              @confirm="confirm"
              @cancel='cancel'
            />
            
            
          </van-popup>
        </div>
      </div>
    </template>
    
    <script>
    // 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
    import Vue from 'vue'
    import { NavBar, Popup, DatetimePicker, SwipeCell, Cell, Button, Toast } from 'vant'
    Vue.use(NavBar)
    Vue.use(Popup)
    Vue.use(DatetimePicker)
    Vue.use(SwipeCell)
    Vue.use(Cell)
    Vue.use(Button)
    Vue.use(Toast)
    export default {
      // 设置data初始值
      data () {
        return {
          currentTime: '12:00',
          SelectTime: false, // 是否弹出选择时间的弹出层
          ReminderTime: [] // 设定的时间,通过触发事件,添加闹铃
        }
      },
      // 注册组件
      components: {},
      // 生命周期钩子函数
      mounted () {},
      // 计算属性
      methods: {
        // 点击添加提醒,弹出时间选择
        SelectTimeFn () {
          this.SelectTime = true
        },
        // 时间选择中点击确认按钮触发的事件
        // vlue即为选择的时间
        confirm (value) {
          // console.log('确认')
          console.log(value)
          this.ReminderTime.push(value)
          this.SelectTime = false
          const SetUpH = value.substring(0, 2) * 1 // 设定时
          const SetUpM = value.substring(3, 5) * 1 // 设定分
          const CurrentH = new Date().getHours() // 当前时
          const CurrentM = new Date().getMinutes() // 当前分
          // const time = `${H}:${M}` // 时 + 分
          // console.log('当前时间', time)
          // console.log(value === time) // 判断当前时间与设定时间是否相等
          // 设置成功后自动计算时间,然后向用户提示一个还有多长时间的提示
    
          // 实现思路,先获取到当前时间以及需要设定的时间,然后计算出来总分钟数,然后将其除以60取整后得到的就是小时,模60得到的就是除了小时外的剩余的不足60的分钟数
          // 一、当设定小时大于当前小时,则为今天就会提醒的闹钟
          /**
           * 则有从当前时间到设定时间的
           *    距离被提醒总分钟数 = (设定小时 - 当前小时) * 60 + 设定分钟 - 当前分钟
           *    则有距离被提醒的小时数 = parseInt(总分总数 / 60) ===> 除以每小时60然后取整
           *    则有距离被提醒的除小时以外的分钟数 = 总分钟数 % 60 ===> 总分钟数取模每分钟60即为剩余分钟数
           * 然后可以根据 parseInt(总分钟数 / 60) 相除值以及 总分钟数 % 60 取模的值 继续细化分
           *    取整等于0: 只须向用户提示分钟
           *    取整大于0且取模不等于0: 须向用户提示小时 + 分钟
           *    取整大于0取模等于0: 只需向用户提示小时
           */
          // 二、当设定小时小于当前小时,则为明天才会提醒的闹钟
          /**
           * 则有从当前时间到设定时间的
           *    距离被提醒的总分钟数 = 今天剩余总分钟数 = (24 - 当前小时) * 60 - 当前分钟数 + 明天的总分钟数 = 设定小时 * 60 + 设定分钟
           *    则有距离被提醒小时数 = parseInt(总分钟数 / 60) ===> 除以每小时60然后取整
           *    则有距离被提醒的除小时以外的分钟数 = 总分钟数 % 60 ===> 总分钟数取模每分钟60即为剩余分钟数
           * 然后可以根据 总分钟数 / 60 所得到的值来继续细分
           *    大于1 小于1 等于1
           */
          // 三、当设定小时等于当前小时,则为一小时以内或者是第二天才会提醒的闹钟
          /**
           * 则直接根据分钟数来判断
           *    当设定分钟大于当前分钟 = 设定分钟 - 当前分钟 ===> 直接向用户提示剩余分钟数
           *    当设定分钟等于当前分钟 = 24小时 ===> 直接小时数
           *    当设定分钟小于当前分钟 总分钟数 = 今天剩余总分钟数 = (24 - 当前小时) * 60 - 当前分钟数 + 明天的总分钟数 = 设定小时 * 60 + 设定分钟 ===> 需向用户提示小时 + 分钟
           */
          if (SetUpH > CurrentH) { // 设定大于现在则为今天
            // 距离被提醒总分钟数 = (设定小时 - 当前小时) * 60 + 设定分钟 - 当前分钟
            const time = (SetUpH - CurrentH) * 60 + SetUpM - CurrentM
            const timeH = parseInt(time / 60)
            const timeM = time % 60
            if (parseInt(time / 60) === 0) { // 取整等于0,只须向用户提示分钟
              Toast(`闹铃将在${timeM}分钟后提醒`)
            } else if (parseInt(time / 60) > 0 && time % 60 !== 0) { // 取整大于0且取模不等于0: 须向用户提示小时 + 分钟
              Toast(`闹铃将在${timeH}小时${timeM}分钟后提醒`)
            } else if (parseInt(time / 60) > 0 && time % 60 === 0) { // 取整大于0取模等于0: 只需向用户提示小时
              Toast(`闹铃将在${timeH}小时后提醒`)
            }
          } else if (SetUpH < CurrentH) { // 设定小于现在则为明天
            // 距离被提醒的总分钟数 = 今天剩余总分钟数 = (24 - 当前小时) * 60 - 当前分钟数 + 明天的总分钟数 = 设定小时 * 60 + 设定分钟
            const time = (24 - CurrentH) * 60 - CurrentM + SetUpH * 60 + SetUpM
            const timeH = parseInt(time / 60)
            const timeM = time % 60
            if (parseInt(time / 60) === 0) { // 取整等于0,只须向用户提示分钟
              Toast(`闹铃将在${timeM}分钟后提醒`)
            } else if (parseInt(time / 60) > 0 && time % 60 !== 0) { // 取整大于0且取模不等于0: 须向用户提示小时 + 分钟
              Toast(`闹铃将在${timeH}小时${timeM}分钟后提醒`)
            } else if (parseInt(time / 60) > 0 && time % 60 === 0) { // 取整大于0取模等于0: 只需向用户提示小时
              Toast(`闹铃将在${timeH}小时后提醒`)
            }
          } else { // 相等的时候为当前时间则判断是否比现在的分钟数大或者下,原理一样
            if (SetUpM > CurrentM) { // 当设定分钟大于当前分钟 = 设定分钟 - 当前分钟,直接向用户提示剩余分钟数
              const timeM = SetUpM - CurrentM
              Toast(`闹铃将在${timeM}分钟后提醒`)
            } else if (SetUpM < CurrentM) { // 当设定分钟小于当前分钟 总分钟数 = 今天剩余总分钟数 = (24 - 当前小时) * 60 - 当前分钟数 + 明天的总分钟数 = 设定小时 * 60 + 设定分钟 ===> 需向用户提示小时 + 分钟
              const time = (24 - CurrentH) * 60 - CurrentM + SetUpH * 60 + SetUpM
              const timeH = parseInt(time / 60)
              const timeM = time % 60
              Toast(`闹铃将在${timeH}小时${timeM}分钟后提醒`)
            } else { // 当设定分钟等于当前分钟 = 24小时 ===> 直接小时数
              Toast('闹铃将在24小时后提醒')
            }
            // if (SetUpM * 1 > M * 1) {
            //   const time = SetUpM * 1 - M * 1
            //   Toast(`闹铃将在${time}分钟后提醒`)
            // } else if (SetUpM * 1 < M * 1) {
            //   const time = 24 - H * 1 + SetUpH * 1 - 1
            //   const timeM = 60 - (M * 1 - SetUpM * 1)
            //   Toast(`闹铃将在${time}小时${timeM}分钟后提醒`)
            // } else { // 如果相等的话直接提示用户24小时后才会响
            //   Toast('闹铃将在24小时后提醒')
            // }
          }
        },
        // 时间选择中点击取消按钮触发的事件
        cancel () {
          this.SelectTime = false
          console.log('取消')
        },
        // 删除闹铃事件
        del (index) {
          console.log(index)
          // 获取到当前下标,然后删除当前下标位的数据,当后期右后端数据的时候就根据id值来删除后端数据库中数据,然后重更新执行请求数据的函数再重新渲染即可
          this.ReminderTime.splice(index, 1)
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    // 样式
      @import "@/lib/reset.scss";
      // 头部导航
      /deep/ .van-nav-bar {
        @include rect(100%, .70rem);
        @include background-color(#FDD949);
        font-size: .18rem;
        line-height: .70rem;
        // 左侧内容
        /deep/ .van-nav-bar__left {
          // 左侧小箭头
          /deep/ .van-icon {
            font-size: .18rem;
            color: black;
          }
        }
      }
      // 内容
      .content {
        // 布局为flex弹性盒子
        @include flexbox();
        // 主轴布局
        @include justify-content(space-between);
        // 主轴方式垂直
        @include flex-direction(column);
        background-color: #dad4d4;
        // 主内容区域
        .contentTop {
          // 定义宽高
          @include rect(100%, auto);
          // 溢出显示滚动条
          @include overflow(auto);
          // 将主轴上除了最下边的添加时间的按钮得空间外所有得空间都分配给他
          flex: 1;
          // // 每个时间列表
          // .ReminderTime{
          //   // 定义宽高
          //   @include rect(100%, .49rem);
          //   @include border-radius(.06rem);
          //   // 布局为flex弹性盒子
          //   @include flexbox();
          //   // 主轴布局
          //   @include justify-content(space-between);
          //   padding: 0 .15rem;
          //   background-color: #eeeeee;
          //   line-height: .49rem;
          // }
          // 显示提醒时间的区域
          /deep/ .van-cell {
            padding: .20rem .15rem;
            @include border-radius(.06rem);
          }
          // 删除按钮
          /deep/ .van-button {
            width: .40rem;
            height: .68rem;
          }
          // 左滑删除按钮
          .van-swipe-cell__right {
            width: 2.0rem;
          }
        }
        // 添加定时
        .contentBottom {
          // 定义宽高
          @include rect(100%, .49rem);
          line-height: .49rem;
          text-align: center;
          background-color: #eeeeee;
        }
      }
    </style>