<template> <view class="page"> <u-navbar title="房租到期提醒" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36' height='36'></u-navbar> <view class="card"> <view class="tip"> <view class="txt"> 房租到期提醒 </view> <u-switch v-model="checked" active-color="#8883F0" @change='changefz()'></u-switch> </view> <view class="tip"> <view class="tit"> 开启后,发送通知到微信公众号 </view> </view> <view class="tip" style="margin-top: 62rpx;"> <view class="txt"> 提醒方式 </view> <view class="switch"> <view class="cont" :class="tipindex==1?'act':''" @click="changetip()"> 单次 </view> <view class="cont " :class="tipindex==2?'act':''" @click="changetip()"> 每月 </view> </view> </view> <view class="tip" style="margin-top: 70rpx;"> <view class="txt"> 提醒日期 </view> <view class="txt" @click="show=true"> {{times}} <view class="iconfont icon-xiangyou1" style="color: #C4C4C4;"></view> </view> </view> <u-picker mode="time" v-model="show" :params="params" :default-time="defaultTime" start-year='2024' @confirm='changetime()'></u-picker> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#F7FAFE", }, checked: false, tipindex: 0, show: false, params: { year: true, month: true, day: true, hour: false, minute: false, second: false }, times: '2024-1-26', defaultTime: '', id:'', deviceInfo:{}, noticeWay:'' } }, onReady() { this.onPickerReady() }, onLoad(option) { console.log(option,'pppppppppp'); this.id=option.id this.getDevice(this.id) }, methods: { changetime(e){ // console.log(e,'eee'); this.times = e.year + '-' + e.month + '-' + e.day; let data ={ deviceId:this.id, expireDate: this.times } this.putdevice(data) console.log(this.times,'aaa'); }, changetip(){ if(this.tipindex==1){ this.tipindex=2 }else if(this.tipindex==2){ this.tipindex=1 } let data ={ deviceId:this.id, noticeWay: this.tipindex } this.putdevice(data) }, changefz() { let data ={ deviceId:this.id, enableExpireNotice: this.checked } this.putdevice(data) }, getDevice(id){ this.$u.get("/app/device/"+this.id).then((res) => { // this.$forceUpdate() if (res.code == 200) { this.deviceInfo=res.data this.checked=this.deviceInfo.enableExpireNotice this.tipindex=this.deviceInfo.noticeWay if(this.deviceInfo.expireDate){ this.times=this.deviceInfo.expireDate } console.log(this.times); // this.loadings=true // this.initChart() } }); }, putdevice(data){ this.$u.put('/app/device',data).then((res) => { if (res.code == 200) { setTimeout(()=>{ this.getDevice() },300) uni.showToast({ title: '修改成功', icon: 'none', duration: 2000 }); } }) }, onPickerReady() { // 在onReady生命周期中设置默认时间为当前时间 this.setDefaultTime(); }, setDefaultTime() { // 获取当前时间 const currentTime = new Date(); // 格式化时间,以符合 u-picker 组件的要求 const formattedTime = this.formatTime(currentTime); // 设置默认时间 this.defaultTime = formattedTime; console.log(this.defaultTime, 'defaultTime'); }, formatTime(time) { // 实现一个函数,以符合所需的日期格式(年月日) const year = time.getFullYear(); const month = (time.getMonth() + 1).toString().padStart(2, '0'); const day = time.getDate().toString().padStart(2, '0'); return `${year}-${month}-${day}`; }, } } </script> <style lang="scss"> page { background-color: #F7FAFE; } .page { width: 750rpx; .card { padding: 62rpx 38rpx; margin: 50rpx auto 0; width: 654rpx; height: 390rpx; background: #FFFFFF; border-radius: 30rpx; box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1); .tip { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; .txt { display: flex; flex-wrap: nowrap; align-items: center; font-size: 32rpx; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC; font-weight: 400; color: #000000; } .tit { font-size: 24rpx; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC; font-weight: 400; color: #808080; } .switch { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 0 10rpx; width: 132rpx; height: 48rpx; background: #E5E5E5; border-radius: 15rpx; .cont { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; width: 60rpx; height: 42rpx; font-size: 20rpx; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC; font-weight: 400; color: #383838; } .act { border-radius: 10rpx; width: 60rpx; height: 42rpx; background: #FFFFFF; } } } } } </style>