hookehuyr

feat: 添加积分收集组件并更新项目文档

添加 PointsCollector 积分收集组件,包含动画效果和一键收集功能
更新项目文档,补充项目描述和运行说明
# 项目规则
这是一个小程序项目,基于 Taro4 框架,使用 vue 写法编写,组件库使用 NutUI4,图标库使用 @nutui/icons-vue-taro。
# 项目名称
老来赛 Taro小程序项目, 是一个和老人一起使用的记录步数的小程序, 可以分享海报, 并且可以通过步数兑换商品.
## 代码参考
1. 参考代码是react编写, 目录在.resource文件夹里面
## 项目依赖
1. 项目基于 Taro4, 文档参考: https://docs.taro.zone/docs/.
......@@ -7,6 +12,11 @@
3. 项目中使用 NutUI4 组件库.
4. 项目中使用 @nutui/icons-vue-taro 图标库, 如果遇到 lucide-react 引用, 替换成相应的icons-vue-taro图标.
5. CSS部分使用 Tailwindcss.
6. 项目使用css尺寸 rpx
7. 项目技术参考在resource/doc文件夹里面, 有关于API使用和组件使用的说明
## 项目运行测试
╰─ npm run dev:weapp 只测试微信小程序
## 功能清单
| 序号 | 模块 | 功能 | |
......
......@@ -11,6 +11,7 @@ declare module 'vue' {
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutToast: typeof import('@nutui/nutui-taro')['Toast']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PointsCollector: typeof import('./src/components/PointsCollector.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
......
This diff is collapsed. Click to expand it.
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-01 11:13:13
* @LastEditTime: 2025-08-27 15:22:35
* @FilePath: /lls_program/src/pages/index/index.vue
* @Description: 文件描述
-->
<template>
<view class="index">
<nut-button type="primary" @click="onClick">按钮</nut-button>
<nut-button type="success" @click="showPointsCollector" style="margin-left: 20rpx;">积分收集</nut-button>
<nut-toast v-model:visible="show" msg="你成功了" />
<View className="text-[#acc855] text-[100px]">Hello world!</View>
<!-- <View className="text-[#acc855] text-[100px]">Hello world!</View> -->
<!-- 积分收集组件 -->
<PointsCollector v-if="showCollector" />
</view>
</template>
......@@ -18,13 +22,23 @@ import Taro from '@tarojs/taro'
import '@tarojs/taro/html.css'
import { ref, onMounted } from 'vue'
import { useDidShow, useReady } from '@tarojs/taro'
import PointsCollector from '@/components/PointsCollector.vue'
import "./index.less";
const show = ref(false)
const showCollector = ref(false)
const onClick = () => {
show.value = true
}
/**
* 显示积分收集组件
*/
const showPointsCollector = () => {
showCollector.value = !showCollector.value
}
// 生命周期钩子
useDidShow(() => {
console.warn('index onShow')
......