组件链接: https://ext.dcloud.net.cn/plugin?id=258
使用(有坑,要注意)
<template> <view class="content"> <view class="bg"> <view class="continueDay">连续签到:{{getData.continuousCount}}天</view> <view class="allDay"> <view class="allDay1"> 累计签到:{{getData.signCount}}天 </view> <view @click="sign" :class="{'active1':isSignin}" class="signBtn"> {{ isSignin ? '已签到' : '点击签到'}} </view> </view> <image class="bgimg" src="../../static/images/signinBg.png" mode=""></image> <view class="riliLogo"> <image style=" 45upx;height: 60upx;" class="" src="../../static/images/signin_rili.png" mode=""></image> <image style=" 45upx;height: 60upx;" class="" src="../../static/images/signin_rili.png" mode=""></image> </view> </view> <imt-calendar ref='child' :selected="signData"></imt-calendar> </view> </template> <script> import imtCalendar from 'components/imt-calendar/imt-calendar' export default { data() { return { getData:[], isSignin:false, signData:[] } }, onLoad() { var date = new Date(); var mytime=date .toLocaleTimeString(); //获取当前时间 console.log(mytime) this.$util.request({ url: "/mobile/index.php?act=member_sign&op=index", method: 'post', data: {}, }).then((res)=>{ this.getData=res.datas this.isSignin=res.datas.todaySigned this.signData=res.datas.signRecord if(this.isSignin){ this.sign=null } }).then(()=>{ this.$refs.child.childFun() }) }, components: { imtCalendar }, methods:{ getDataFun(){ this.$util.request({ url: "/mobile/index.php?act=member_sign&op=index", method: 'post', data: {}, }).then((res)=>{ this.getData=res.datas this.isSignin=res.datas.todaySigned this.signData=res.datas.signRecord console.log(this.signData) if(this.isSignin){ this.sign=null } }).then(()=>{ this.$refs.child.childFun() }) }, sign(){ this.$util.request({ url: "/mobile/index.php?act=member_sign&op=sign", method: 'post', data: {}, }).then((res)=>{ if(res.error_code == 0){ this.isSignin=true console.log(this.isSignin) this.getDataFun() } }) } } } </script> <style> page{ background: #f2f2f2; } .content{ } .bg{ position: relative; 100%; height: 350upx; } .bg .bgimg{ position: absolute; 100%; height: 350upx; left: 0; top: 0; z-index: 0; } .signBtn{ position: relative; z-index: 2; 182upx; height: 60upx; line-height: 60upx; text-align: center; background-color: #FFFFFF; color: #333; border-radius: 30upx; } .bg .active1{ color:#d92b57; } .continueDay{ font-size: 30upx; color: #FFFFFF; position: relative; z-index: 2; padding-left: 60upx; padding-top: 60upx; } .allDay{ padding: 20upx 60upx; display: flex; justify-content: space-between; } .allDay1{ font-size: 30upx; color: #FFFFFF; position: relative; z-index: 2; } .riliLogo{ position: relative; z-index: 999999999999; padding: 50upx 135upx; display: flex; justify-content: space-between; } </style>