<template> <div class="prompt-time"> <div class="title">请设置您希望接收上课提醒的时间</div> <div class="tishi-timer"> <img :src="tishiTimer" alt=""> </div> <div class="time-setting" ref="timeSetting" @click="dateShowClick"> <div class="time-setting-text"> 当前设定的时间 </div> <div class="time-setting-ti"> <span>{{ currentTime }}</span> <img :src="youjiantou" alt=""> </div> </div> <div class="preservation" @click="preservationClick">保存</div> <van-popup v-model="dateShow" position="bottom"> <van-datetime-picker :min-hour="minHour" :max-hour="maxHour" @confirm="dateConfirm" @cancel="dateConfirmNo" v-model="currentTime" type="time"/> </van-popup> </div> </template> <script> import { postNotifySettingApi, getNotifyApi } from "../../service/api"; import { DatetimePicker, Popup, Toast } from 'vant'; import tishiTimer from '../../assets/evaluate/tishi_timer.png' import youjiantou from '../../assets/evaluate/youjiantou.png' export default { name: "promptTime", data() { return { currentTime: '07:00', minHour: 7, maxHour: 22, dateVal: '', dateShow: false, selectedValue: '', tishiTimer: tishiTimer, // 图 youjiantou: youjiantou // 图 } }, components: { [DatetimePicker.name]: DatetimePicker, [Popup.name]: Popup, }, watch: { dateShow(val) { if(!val) { this.contentFn() } } }, methods: { dateShowClick() { this.dateShow = true; this.$nextTick(() => { document.querySelectorAll('.van-picker__confirm')[0].innerText = '完成' document.querySelectorAll('.van-picker-column')[1].style.display = 'none'; let oLi = document.querySelectorAll('.van-picker-column')[0].querySelectorAll('li'); for (var i = 0; i < oLi.length; i++) { oLi[i].innerText = oLi[i].innerText + ':00' } }) }, dateConfirm(val) { this.currentTime = val == 'aN:aN' ? '00:00' : val this.contentFn() }, dateConfirmNo() { this.contentFn() }, contentFn() { this.dateShow = false; this.$refs.timeSetting.style.borderBottom = '1px solid #E2E2E2' let oLi = document.querySelectorAll('.van-picker-column')[0].querySelectorAll('li'); for (var i = 0; i < oLi.length; i++) { oLi[i].innerText = oLi[i].innerText.split(':')[0] } }, preservationClick() { let pushAtData = { time: this.currentTime, periods_id: this.$route.query.periods_id } postNotifySettingApi(pushAtData).then(res => { Toast("时间设定完成"); this.$router.go(-1); }) } }, mounted() { getNotifyApi(this.$route.query.periods_id).then(res => { console.log(res, 8787878) if(res.time) this.currentTime = res.time.split(':')[0] + ':' + res.time.split(':')[1] }) } } </script> <style lang="less"> @import "../../util/public"; .van-picker { border-radius: 30 * @toVw 30 * @toVw 0 0; } .van-picker__toolbar::after { content: ''; border: none; } .van-picker__confirm { color: #333333; font-size: 15 * @toVw; margin: 0; padding-right: 30 * @toVw; } .van-picker__frame, .van-picker__loading .van-loading { height: 54px!important; } .van-picker__cancel { color: #333333; font-size: 15 * @toVw; margin: 0; padding-left: 30 * @toVw; } .van-picker-column__item { color: #666666; font-size: 17 * @toVw; } .van-picker-column__item--selected { color: #40A9FF; font-size: 21 * @toVw; } .prompt-time { width: 100%; height: 100%; background: #ffffff; padding: 0 27 * @toVw; box-sizing: border-box; .title { padding-top: 30 * @toVw; padding-bottom: 24 * @toVw; font-size: 17 * @toVw; font-weight: 500; letter-spacing: 1px; color: #000000; } .tishi-timer { width: 322 * @toVw; height: 245 * @toVw; img { width: 100%; height: 100%; } } .time-setting { width: 100%; overflow: hidden; padding-top: 38 * @toVw; padding-bottom: 11 * @toVw; border-bottom: 1px solid #E2E2E2; .time-setting-text { float: left; font-size: 14 * @toVw; } .time-setting-ti { float: right; span { font-size: 15 * @toVw; padding-right: 10 * @toVw; vertical-align: middle; } img { width: 10 * @toVw; height: 14 * @toVw; vertical-align: middle; } } } .preservation { width: 330 * @toVw; height: 50 * @toVw; line-height: 50 * @toVw; background: #40A9FF; margin-top: 60 * @toVw; border-radius: 28 * @toVw; text-align: center; font-size: 17 * @toVw; font-weight: 500; color: #ffffff; } } </style>