榆钱落尽槿花稀 448712ece5 feat: 添加积分申请系统基础功能与UI组件
本次提交主要包含以下内容:

1. 新增积分申请系统核心功能:
   - 添加登录页面及API接口
   - 实现积分申请记录查看功能
   - 集成微信小程序分享功能
   - 添加请求管理工具类

2. 引入Tuniao UI组件库:
   - 添加时间线、折叠面板、表格等UI组件
   - 集成头像组、单选框组等交互组件
   - 配置全局样式和主题颜色

3. 基础架构搭建:
   - 配置项目manifest和pages.json路由
   - 添加状态管理store
   - 实现自定义导航栏适配
   - 添加工具函数(加解密、数字处理等)

4. 静态资源:
   - 添加项目logo和背景图片
   - 配置uni.scss全局样式变量

本次提交为系统基础功能搭建,后续将进一步完善积分申请流程和审批功能。
2025-05-27 16:40:02 +08:00

178 lines
4.4 KiB
Vue

<template>
<view class="tn-scroll-list-class tn-scroll-list">
<scroll-view
class="tn-scroll-list__scroll-view"
scroll-x
:upper-threshold="0"
:lower-threshold="0"
@scroll="scrollHandler"
@scrolltoupper="scrollToUpperHandler"
@scrolltolower="scrollToLowerHandler"
>
<view class="tn-scroll-list__scroll-view__content">
<slot></slot>
</view>
</scroll-view>
<!-- 指示器-->
<view
v-if="indicator"
class="tn-scroll-list__indicator"
:style="[indicatorStyle]"
>
<view class="tn-scroll-list__indicator__line" :style="[lineStyle]">
<view class="tn-scroll-list__indicator__line__bar" :style="[barStyle]"></view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'tn-scroll-list',
props: {
// 是否显示指示器
indicator: {
type: Boolean,
default: true
},
// 指示器整体宽度
indicatorWidth: {
type: [String, Number],
default: 50
},
// 指示器滑块的宽度
indicatorBarWidth: {
type: [String, Number],
default: 20
},
// 指示器颜色
indicatorColor: {
type: String,
default: '#E6E6E6'
},
// 指示器激活时颜色
indicatorActiveColor: {
type: String,
default: '#01BEFF'
},
// 自定义指示器样式
indicatorStyle: {
type: Object,
default() {
return {}
}
}
},
computed: {
// 指示器滑块样式
barStyle() {
let style = {}
// 获取滑动距离的比值
// 滑块当前移动距离与总需滑动距离(指示器的总宽度减去滑块宽度)的比值 = scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比
const scrollLeft = this.scrollInfo.scrollLeft,
scrollWidth = this.scrollInfo.scrollWidth,
barAllMoveWidth = uni.upx2px(this.indicatorWidth) - uni.upx2px(this.indicatorBarWidth);
const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
style.transform = `translateX(${x}px)`
// 设置滑块的宽度和背景颜色
style.width = `${this.indicatorBarWidth}rpx`
style.backgroundColor = this.indicatorActiveColor
return style
},
// 指示器整体样式
lineStyle() {
let style = {}
style.width = `${this.indicatorWidth}rpx`
style.backgroundColor = this.indicatorColor
return style
}
},
data() {
return {
// 滑动时滑块信息
scrollInfo: {
scrollLeft: 0,
scrollWidth: 0
},
// 滑动区域的宽度
scrollWidth: 0
}
},
mounted() {
this.$nextTick(() => {
this.init()
})
},
methods: {
// 初始化
init() {
this.getComponentWidth()
},
// 处理滚动事件
scrollHandler(event) {
this.scrollInfo = event.detail
},
// 滚动到最左边触发事件
scrollToUpperHandler() {
this.$emit('left')
this.scrollInfo.scrollLeft = 0
},
// 滚动到最右边触发事件
scrollToLowerHandler() {
this.$emit('right')
// this.scrollInfo.scrollLeft = uni.upx2px(this.indicatorWidth) - uni.upx2px(this.indicatorBarWidth)
},
// 获取组件的宽度
getComponentWidth() {
this._tGetRect('.tn-scroll-list').then(res => {
if (!res) {
setTimeout(() => {
this.getComponentWidth()
}, 10)
return
}
this.scrollWidth = res.width
})
}
}
}
</script>
<style lang="scss" scoped>
.tn-scroll-list {
padding-bottom: 20rpx;
&__scroll-view {
display: flex;
flex-direction: row;
&__content {
display: flex;
flex-direction: row;
}
}
&__indicator {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 30rpx;
&__line {
width: 120rpx;
height: 8rpx;
border-radius: 200rpx;
overflow: hidden;
&__bar {
width: 40rpx;
height: 8rpx;
border-radius: 200rpx;
}
}
}
}
</style>