每日签到页面模板组件,简单好用,用了会上瘾的那种

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

今日给大家分享一款基于uniapp封装的每日签到页面模板组件,主打就是简单容易上手,巨好用。支持各家小程序应用平台,也支持vue2、vue3开发。
在这里插入图片描述

直接通过插件市场,引入到uni_modules目录即可。同时也支持自定义为系统组件使用。

<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>
  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现使用Vue签到导出表格到Excel中带有标题,可以按照以下步骤进行操作: 1. 首先,安装并引入两个必要的第三方库,分别是vue-xlsx和file-saver。这两个库可以实现将数据导出到Excel并保存文件。 2. 在Vue组件中,创建一个data对象来存储签到表的数据,包括标题和签到记录。例如: ``` data() { return { title: '签到表', records: [ { name: '张三', signTime: '2021-01-01 08:00:00' }, { name: '李四', signTime: '2021-01-01 09:00:00' }, // 其他签到记录... ] } } ``` 3. 在模板中,使用表格元素和数据绑定来展示签到记录。同时,添加一个按钮用于导出Excel。例如: ``` <table> <thead> <tr> <th>姓名</th> <th>签到时间</th> </tr> </thead> <tbody> <tr v-for="record in records" :key="record.name"> <td>{{ record.name }}</td> <td>{{ record.signTime }}</td> </tr> </tbody> </table> <button @click="exportTable">导出Excel</button> ``` 4. 在Vue组件的methods中,定义导出Excel的方法。这个方法将表格数据转换为Excel文件并进行下载保存。例如: ``` methods: { exportTable() { const data = [ [this.title], ...this.records.map(record => [record.name, record.signTime]) ] const ws = XLSX.utils.aoa_to_sheet(data); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); XLSX.writeFile(wb, "签到表.xlsx"); } } ``` 通过以上步骤,我们可以实现在Vue中导出带有标题的签到表格到Excel文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值