榆钱落尽槿花稀 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

362 lines
9.6 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- 支付宝小程序使用_tGetRect()获取组件的根元素尺寸所以在外面套一个"壳" -->
<view>
<view class="tn-index-list-class tn-index-list">
<slot></slot>
<!-- 侧边栏 -->
<view
v-if="showSidebar"
class="tn-index-list__sidebar"
@touchstart.stop.prevent="onTouchMove"
@touchmove.stop.prevent="onTouchMove"
@touchend.stop.prevent="onTouchStop"
@touchcancel.stop.prevent="onTouchStop"
>
<view
v-for="(item, index) in indexList"
:key="index"
class="tn-index-list__sidebar__item"
:style="{
zIndex: zIndex + 1,
color: activeAnchorIndex === index ? activeColor : ''
}"
>
{{ item }}
</view>
</view>
<!-- 选中弹出框 -->
<view
v-if="touchMove && indexList[touchMoveIndex]"
class="tn-index-list__alert"
:style="{
zIndex: selectAlertZIndex
}"
>
<text>{{ indexList[touchMoveIndex] }}</text>
</view>
</view>
</view>
</template>
<script>
// 生成 A-Z的字母列表
let indexList = function() {
let indexList = []
let charCodeOfA = 'A'.charCodeAt(0)
for (var i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i))
}
return indexList
}
export default {
name: 'tn-index-list',
props: {
// 索引列表
indexList: {
type: Array,
default() {
return indexList()
}
},
// 是否自动吸顶
sticky: {
type: Boolean,
default: true
},
// 自动吸顶时距离顶部的距离单位px
stickyTop: {
type: Number,
default: 0
},
// 自定义顶栏的高度单位px
customBarHeight: {
type: Number,
default: 0
},
// 当前滚动的高度
// 由于自定义组件无法获取滚动高度,所以依赖传入
scrollTop: {
type: Number,
default: 0
},
// 选中索引时的颜色
activeColor: {
type: String,
default: '#01BEFF'
},
// 吸顶时的z-index
zIndex: {
type: Number,
default: 0
}
},
computed: {
// 选中索引列表弹出提示框的z-index
selectAlertZIndex() {
return this.$t.zIndex.toast
},
// 吸顶的偏移高度
stickyOffsetTop() {
// #ifdef H5
return this.stickyTop !== '' ? this.stickyTop : 44
// #endif
// #ifndef H5
return this.stickyTop !== '' ? this.stickyTop : 0
// #endif
}
},
data() {
return {
// 当前激活的列表锚点的序号
activeAnchorIndex: 0,
// 显示侧边索引栏
showSidebar: true,
// 标记是否开始触摸移动
touchMove: false,
// 当前触摸移动到对应索引的序号
touchMoveIndex: 0,
// 滚动到对应锚点的序号
scrollToAnchorIndex: 0,
// 侧边栏的信息
sidebar: {
height: 0,
top: 0
},
// 内容区域高度
height: 0,
// 内容区域top
top: 0
}
},
watch: {
scrollTop() {
this.updateData()
}
},
created() {
// 只能在created生命周期定义childrens如果在data定义会因为循环引用而报错
this.childrens = []
},
methods: {
// 更新数据
updateData() {
this.timer && clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.showSidebar = !!this.childrens.length
this.getRect().then(() => {
this.onScroll()
})
}, 0)
},
// 获取对应的信息
getRect() {
return Promise.all([
this.getAnchorRect(),
this.getListRect(),
this.getSidebarRect()
])
},
// 获取列表内容子元素信息
getAnchorRect() {
return Promise.all(this.childrens.map((child, index) => {
child._tGetRect('.tn-index-anchor__wrap').then((rect) => {
Object.assign(child, {
height: rect.height,
top: rect.top - this.customBarHeight
})
})
}))
},
// 获取列表信息
getListRect() {
return this._tGetRect('.tn-index-list').then(rect => {
Object.assign(this, {
height: rect.height,
top: rect.top + this.scrollTop
})
})
},
// 获取侧边滚动栏信息
getSidebarRect() {
return this._tGetRect('.tn-index-list__sidebar').then(rect => {
this.sidebar = {
height: rect.height,
top: rect.top
}
})
},
// 滚动事件
onScroll() {
const {
childrens = []
} = this
if (!childrens.length) {
return
}
const {
sticky,
stickyOffsetTop,
zIndex,
scrollTop,
activeColor
} = this
const active = this.getActiveAnchorIndex()
this.activeAnchorIndex = active
if (sticky) {
let isActiveAnchorSticky = false
if (active !== -1) {
isActiveAnchorSticky = childrens[active].top <= 0
}
childrens.forEach((item, index) => {
if (index === active) {
let wrapperStyle = ''
let anchorStyle = {
color: `${activeColor}`
}
if (isActiveAnchorSticky) {
wrapperStyle = {
height: `${childrens[index].height}px`
}
anchorStyle = {
position: 'fixed',
top: `${stickyOffsetTop}px`,
zIndex: `${zIndex ? zIndex : this.$t.zIndex.indexListSticky}`,
color: `${activeColor}`
}
}
item.active = true
item.wrapperStyle = wrapperStyle
item.anchorStyle = anchorStyle
} else if (index === active - 1) {
const currentAnchor = childrens[index]
const currentOffsetTop = currentAnchor.top
const targetOffsetTop = index === childrens.length - 1 ? this.top : childrens[index + 1].top
const parentOffsetHeight = targetOffsetTop - currentOffsetTop
const translateY = parentOffsetHeight - currentAnchor.height
const anchorStyle = {
position: 'relative',
transform: `translate3d(0, ${translateY}px, 0)`,
zIndex: `${zIndex ? zIndex : this.$t.zIndex.indexListSticky}`,
color: `${activeColor}`
}
item.active = false
item.anchorStyle = anchorStyle
} else {
item.active = false
item.wrapperStyle = ''
item.anchorStyle = ''
}
})
}
},
// 触摸移动
onTouchMove(event) {
this.touchMove = true
const sidebarLength = this.childrens.length
const touch = event.touches[0]
const itemHeight = this.sidebar.height / sidebarLength
let clientY = touch.clientY
let index = Math.floor((clientY - this.sidebar.top) / itemHeight)
if (index < 0) {
index = 0
} else if (index > sidebarLength - 1) {
index = sidebarLength - 1
}
this.touchMoveIndex = index
this.scrollToAnchor(index)
},
// 触摸停止
onTouchStop() {
this.touchMove = false
this.scrollToAnchorIndex = null
},
// 获取当前的锚点序号
getActiveAnchorIndex() {
const {
childrens,
sticky
} = this
for (let i = this.childrens.length - 1; i >= 0; i--) {
const preAnchorHeight = i > 0 ? childrens[i - 1].height : 0
const reachTop = sticky ? preAnchorHeight : 0
if (reachTop >= childrens[i].top) {
return i
}
}
return -1
},
// 滚动到对应的锚点
scrollToAnchor(index) {
if (this.scrollToAnchorIndex === index) {
return
}
this.scrollToAnchorIndex = index
const anchor = this.childrens.find(item => item.index === this.indexList[index])
if (anchor) {
const scrollTop = anchor.top + this.scrollTop
this.$emit('select', {
index: anchor.index,
scrollTop: scrollTop
})
uni.pageScrollTo({
duration:0,
scrollTop: scrollTop
})
}
}
}
}
</script>
<style lang="scss" scoped>
.tn-index-list {
position: relative;
&__sidebar {
display: flex;
flex-direction: column;
position: fixed;
top: 50%;
right: 0;
text-align: center;
transform: translateY(-50%);
user-select: none;
z-index: 99;
&__item {
font-weight: 500;
padding: 8rpx 18rpx;
font-size: 22rpx;
line-height: 1;
}
}
&__alert {
display: flex;
flex-direction: row;
position: fixed;
width: 120rpx;
height: 120rpx;
top: 50%;
right: 90rpx;
align-items: center;
justify-content: center;
margin-top: -60rpx;
border-radius: 24rpx;
font-size: 50rpx;
color: #FFFFFF;
background-color: $tn-font-sub-color;
padding: 0;
z-index: 9999999;
text {
line-height: 50rpx;
}
}
}
</style>