用uniapp写一个模拟签到功能的微信小程序页面,签到周期为一周的代码
时间: 2024-06-10 14:03:56 浏览: 164
好的,我可以为您提供一个基本的代码示例,用uniapp编写一个模拟签到功能的微信小程序页面,签到周期为一周:
<template>
<view class="container">
<view class="header">
<text class="title">签到</text>
<image class="avatar" src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png"></image>
</view>
<view class="content">
<view class="status">
<image class="status-icon" :src="isSigned ? 'https://cdn.pixabay.com/photo/2016/03/23/00/35/check-1271423_1280.png' : 'https://cdn.pixabay.com/photo/2016/03/31/21/32/cancel-1294420_1280.png'"></image>
<text class="status-text">{{ isSigned ? '已签到' : '未签到' }}</text>
</view>
<button class="sign-btn" :disabled="isSigned" @tap="onSign">签到</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isSigned: false,
lastSignTime: null,
signCycle: 604800000, // 签到周期为一周,单位为毫秒
};
},
methods: {
onSign() {
this.isSigned = true;
this.lastSignTime = Date.now();
},
},
computed: {
canSign() {
return !this.isSigned || (Date.now() - this.lastSignTime >= this.signCycle);
},
},
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.title {
font-size: 24px;
font-weight: bold;
color: #333;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: 20px;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.status {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.status-icon {
width: 30px;
height: 30px;
margin-right: 10px;
}
.status-text {
font-size: 20px;
color: #333;
}
.sign-btn {
background-color: #1aad19;
color: #fff;
border-radius: 20px;
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
opacity: 1;
}
.sign-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
</style>
此代码仅供参考,可能需要根据实际需求进行修改。
阅读全文