uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
今日给大家分享一款基于uniapp封装的每日签到页面模板组件，主打就是简单容易上手，巨好用。支持各家小程序应用平台，也支持vue2、vue3开发。
直接通过插件市场，引入到uni_modules目录即可。同时也支持自定义为系统组件使用。
代码语言：javascript复制<template>
<view>
<gb-qiandao :days="days" :play_number="play_number" :search_number="search_number" :full_ad="full_ad"
:taskList="taskList" :completeDay="completeDay" :dayList="dayList" :rule="rule" :taskStatus="taskStatus"
@receiveMoney="receiveMoney" @listTab="listTab"></gb-qiandao>
</view>
</template>
<script>
export default {
data() {
return {
// 签到天数
days: 0,
// 签到任务第一个
play_number: 0,
// 签到任务第二个
search_number: 0,
// 签到任务第三个
full_ad: 0,
// 已完成天数
completeDay: 0,
// 签到状态 0.代表未签到 1.代表已签到
taskStatus: 0.,
// 签到规则
rule: '这里是签到规则，你可以任意编辑',
// 签到任务奖励数组
dayList: [1, 1, 2, 3, 5, 6, 7],
// 签到任务
taskList: [{
title: '试玩游戏',
img: '../../static/yx.png',
number: 1,
dec: '完成游戏赚相关游戏'
},
{
title: '试玩应用',
img: '../../static/zl.png',
number: 1,
dec: '完成应用赚相关任务'
},
{
title: '观看广告',
img: '../../static/kgg.png',
number: 10,
dec: '观看广告赚相关广告'
}
]
}
},
onLoad() {
this.getData()
},
methods: {
// 获取用户签到得相关信息，自己写接口获取即可
getData() {
},
// 签到并领取奖励
receiveMoney() {
uni.showToast({
title: "签到成功并获得奖励",
icon: 'none',
position: 'bottom'
})
},
// 签到任务完成
listTab(i) {
if (i == 0) {
uni.showToast({
title: "跳转第一个任务",
icon: 'none',
position: 'bottom'
})
}
if (i == 1) {
uni.showToast({
title: "跳转第二个任务",
icon: 'none',
position: 'bottom'
})
}
if (i == 2) {
uni.showToast({
title: "跳转第三个任务",
icon: 'none',
position: 'bottom'
})
}
}
}
}
</script>
<style>
</style>
