榆钱落尽槿花稀
448712ece5
本次提交主要包含以下内容： 1. 新增积分申请系统核心功能： - 添加登录页面及API接口 - 实现积分申请记录查看功能 - 集成微信小程序分享功能 - 添加请求管理工具类 2. 引入Tuniao UI组件库： - 添加时间线、折叠面板、表格等UI组件 - 集成头像组、单选框组等交互组件 - 配置全局样式和主题颜色 3. 基础架构搭建： - 配置项目manifest和pages.json路由 - 添加状态管理store - 实现自定义导航栏适配 - 添加工具函数(加解密、数字处理等) 4. 静态资源： - 添加项目logo和背景图片 - 配置uni.scss全局样式变量 本次提交为系统基础功能搭建，后续将进一步完善积分申请流程和审批功能。
255 lines
7.2 KiB
Vue
255 lines
7.2 KiB
Vue
<template>
|
||
<view
|
||
v-if="show"
|
||
class="tn-skeleton-class tn-skeleton"
|
||
:class="[backgroundColorClass]"
|
||
:style="[skeletonStyle]"
|
||
@touchmove.stop.prevent
|
||
>
|
||
<view
|
||
v-for="(item, index) in rectNodes"
|
||
:key="$t.uuid()"
|
||
class="tn-skeleton__item tn-skeleton__item--rect"
|
||
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
|
||
:style="[itemStyle('rect', item)]"
|
||
></view>
|
||
<view
|
||
v-for="(item, index) in circleNodes"
|
||
:key="$t.uuid()"
|
||
class="tn-skeleton__item tn-skeleton__item--circle"
|
||
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
|
||
:style="[itemStyle('circle', item)]"
|
||
></view>
|
||
<view
|
||
v-for="(item, index) in filletNodes"
|
||
:key="$t.uuid()"
|
||
class="tn-skeleton__item tn-skeleton__item--fillet"
|
||
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
|
||
:style="[itemStyle('fillet', item)]"
|
||
></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||
export default {
|
||
name: 'tn-skeleton',
|
||
mixins: [ componentsColorMixin ],
|
||
props: {
|
||
// 显示骨架屏
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 需要渲染的元素背景颜色
|
||
elBackgroundColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 开启加载动画
|
||
animation: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 矩形元素自定义样式
|
||
rectCustomStyle: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
},
|
||
// 圆形元素自定义样式
|
||
circleCustomStyle: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
},
|
||
// 圆角元素自定义样式
|
||
filletCustomStyle: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
elBackgroundColorStyle() {
|
||
return this.$t.color.getBackgroundColorStyle(this.elBackgroundColor)
|
||
},
|
||
elBackgroundColorClass() {
|
||
return this.$t.color.getBackgroundColorInternalClass(this.elBackgroundColor)
|
||
},
|
||
// 骨架屏样式
|
||
skeletonStyle() {
|
||
let style = {}
|
||
style.width = this.skeletonWidth + 'px'
|
||
style.height = this.skeletonHeight + 'px'
|
||
if (this.backgroundColorStyle) {
|
||
style.backgroundColor = this.backgroundColorStyle
|
||
}
|
||
style.left = this.left + 'px'
|
||
style.top = this.top + 'px'
|
||
return style
|
||
},
|
||
// 元素样式
|
||
itemStyle() {
|
||
return (type, item) => {
|
||
let style = {}
|
||
style.width = item.width + 'px'
|
||
style.height = item.height + 'px'
|
||
if (this.elBackgroundColorStyle) {
|
||
style.backgroundColor = this.elBackgroundColorStyle
|
||
}
|
||
style.left = (item.left - this.left) + 'px'
|
||
style.top = (item.top - this.top) + 'px'
|
||
if (type === 'rect') {
|
||
Object.assign(style, this.rectCustomStyle)
|
||
} else if (type === 'circle') {
|
||
style.borderRadius = (item.width / 2) + 'px'
|
||
Object.assign(style, this.circleCustomStyle)
|
||
} else if (type === 'fillet') {
|
||
Object.assign(style, this.filletCustomStyle)
|
||
}
|
||
return style
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 骨架屏宽度
|
||
skeletonWidth: 750,
|
||
// 骨架屏高度
|
||
skeletonHeight: 1500,
|
||
// 圆角元素
|
||
filletNodes: [],
|
||
// 圆形元素
|
||
circleNodes: [],
|
||
// 矩形元素
|
||
rectNodes: [],
|
||
// 元素偏移位置
|
||
top: 0,
|
||
left: 0
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
// 获取系统信息
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
this.skeletonWidth = systemInfo.safeArea.width
|
||
this.skeletonHeight = systemInfo.safeArea.height
|
||
this.selectQueryInfo()
|
||
})
|
||
},
|
||
methods: {
|
||
// 查询节点信息
|
||
selectQueryInfo() {
|
||
// 获取整个父容器的宽高作为骨架屏的宽高
|
||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||
let query = null
|
||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||
// #ifdef MP-WEIXIN
|
||
query = uni.createSelectorQuery().in(this.$parent)
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
query = uni.createSelectorQuery()
|
||
// #endif
|
||
query.selectAll('.tn-skeleton').boundingClientRect().exec((res) => {
|
||
console.log(res);
|
||
this.skeletonWidth = res[0][0].width
|
||
this.skeletonHeight = res[0][0].height
|
||
this.top = res[0][0].bottom - res[0][0].height
|
||
this.left = res[0][0].left
|
||
})
|
||
|
||
// 获取元素列表
|
||
this.getRectElements()
|
||
this.getCircleElements()
|
||
this.getFillteElements()
|
||
},
|
||
// 矩形元素列表
|
||
getRectElements() {
|
||
let query = null
|
||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||
// #ifdef MP-WEIXIN
|
||
query = uni.createSelectorQuery().in(this.$parent)
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
query = uni.createSelectorQuery()
|
||
// #endif
|
||
query.selectAll('.tn-skeleton-rect').boundingClientRect().exec((res) => {
|
||
this.rectNodes = res[0]
|
||
})
|
||
},
|
||
// 圆形元素列表
|
||
getCircleElements() {
|
||
let query = null
|
||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||
// #ifdef MP-WEIXIN
|
||
query = uni.createSelectorQuery().in(this.$parent)
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
query = uni.createSelectorQuery()
|
||
// #endif
|
||
query.selectAll('.tn-skeleton-circle').boundingClientRect().exec((res) => {
|
||
this.circleNodes = res[0]
|
||
})
|
||
},
|
||
// 圆角元素列表
|
||
getFillteElements() {
|
||
let query = null
|
||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||
// #ifdef MP-WEIXIN
|
||
query = uni.createSelectorQuery().in(this.$parent)
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
query = uni.createSelectorQuery()
|
||
// #endif
|
||
query.selectAll('.tn-skeleton-fillet').boundingClientRect().exec((res) => {
|
||
this.filletNodes = res[0]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tn-skeleton {
|
||
position: absolute;
|
||
z-index: 9998;
|
||
overflow: hidden;
|
||
background-color: #FFFFFF;
|
||
|
||
&__item {
|
||
position: absolute;
|
||
background-color: #F0F0F0;
|
||
|
||
&--fillet {
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
&--fade {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #E6E6E6;
|
||
animation-duration: 1.5s;
|
||
animation-name: blink;
|
||
animation-timing-function: ease-in-out;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes blink {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.4;
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style>
|