榆钱落尽槿花稀
448712ece5
本次提交主要包含以下内容： 1. 新增积分申请系统核心功能： - 添加登录页面及API接口 - 实现积分申请记录查看功能 - 集成微信小程序分享功能 - 添加请求管理工具类 2. 引入Tuniao UI组件库： - 添加时间线、折叠面板、表格等UI组件 - 集成头像组、单选框组等交互组件 - 配置全局样式和主题颜色 3. 基础架构搭建： - 配置项目manifest和pages.json路由 - 添加状态管理store - 实现自定义导航栏适配 - 添加工具函数(加解密、数字处理等) 4. 静态资源： - 添加项目logo和背景图片 - 配置uni.scss全局样式变量 本次提交为系统基础功能搭建，后续将进一步完善积分申请流程和审批功能。
115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<template>
|
|
<view
|
|
class="tn-grid-item-class tn-grid-item"
|
|
:class="[
|
|
backgroundColorClass
|
|
]"
|
|
:hover-class="hoverClass"
|
|
:hover-stay-time="150"
|
|
:style="{
|
|
backgroundColor: backgroundColorStyle,
|
|
width: gridWidth
|
|
}"
|
|
@tap="click"
|
|
>
|
|
<view
|
|
class="tn-grid-item__box"
|
|
>
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
|
export default {
|
|
mixins: [ componentsColorMixin ],
|
|
name: 'tn-grid-item',
|
|
props: {
|
|
// 序号
|
|
index: {
|
|
type: [Number, String],
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// 父组件数据
|
|
parentData: {
|
|
// 按下去的样式
|
|
hoverClass: '',
|
|
col: 3
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
// 父组件实例
|
|
this.updateParentData()
|
|
this.parent.children.push(this)
|
|
},
|
|
computed: {
|
|
// 计算每个宫格的宽度
|
|
gridWidth() {
|
|
// #ifdef MP-WEIXIN
|
|
return '100%'
|
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
|
return 100 / Number(this.parentData.col) + '%'
|
|
// #endif
|
|
},
|
|
// 点击效果
|
|
hoverClass() {
|
|
return this.parentData.hoverClass !== 'none'
|
|
? this.parentData.hoverClass + ' tn-grid-item--hover'
|
|
: this.parentData.hoverClass
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取父组件参数
|
|
updateParentData() {
|
|
this.getParentData('tn-grid')
|
|
},
|
|
click() {
|
|
this.$emit('click', this.index)
|
|
this.parent && this.parent.click(this.index)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tn-grid-item {
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* #endif */
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
flex-direction: column;
|
|
|
|
/* #ifdef MP */
|
|
// float: left;
|
|
/* #endif */
|
|
|
|
&__box {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* #endif */
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&--hover {
|
|
background: $tn-space-color !important;
|
|
}
|
|
}
|
|
</style>
|