hookehuyr

feat(PointsCollector): 重构积分收集组件并添加一键收取功能

- 重构积分收集组件布局和样式
- 实现一键收取功能并优化收集动画
- 移除冗余代码并提升性能
- 添加组件高度可配置属性
This diff is collapsed. Click to expand it.
......@@ -2,7 +2,7 @@
* index页面样式
*/
.index {
padding: 20px;
// padding: 20px;
.nut-button {
margin-bottom: 20px;
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-27 15:22:35
* @LastEditTime: 2025-08-27 17:13:11
* @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> -->
<!-- 积分收集组件 -->
<PointsCollector v-if="showCollector" />
<PointsCollector ref="pointsCollectorRef" height="30vh" />
<nut-button type="success" @click="handleCollectAll" style="margin-top: 20rpx;">一键收取</nut-button>
</view>
</template>
......@@ -25,18 +20,15 @@ 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 pointsCollectorRef = ref(null)
/**
* 显示积分收集组件
* 触发积分收集组件的一键收取
*/
const showPointsCollector = () => {
showCollector.value = !showCollector.value
const handleCollectAll = () => {
if (pointsCollectorRef.value) {
pointsCollectorRef.value.collectAll()
}
}
// 生命周期钩子
......