zoukankan      html  css  js  c++  java
  • 日历签到

    组件链接:  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>
    

      

  • 相关阅读:
    管理索引表:深入研究B树索引重建,合并,删除(理论篇3)
    关于ASP.NET中Membership进行权限管理不足的解决办法
    将VS2005中的.CS文件在网页中显示的方法
    在页面中直接设计TreeView的节点而不使用Web.Sitemap文件在运行时出错
    (转)动态管理ASP.NET DataGrid数据列
    在页面中直接设计TreeView的节点而不使用Web.Sitemap文件在运行时出错
    将VS2005中的.CS文件在网页中显示的方法
    三天没有更新我的BLOG
    三天没有更新我的BLOG
    (转)动态管理ASP.NET DataGrid数据列
  • 原文地址:https://www.cnblogs.com/daifuchao/p/12793189.html
Copyright © 2011-2022 走看看