榆钱落尽槿花稀
448712ece5
本次提交主要包含以下内容： 1. 新增积分申请系统核心功能： - 添加登录页面及API接口 - 实现积分申请记录查看功能 - 集成微信小程序分享功能 - 添加请求管理工具类 2. 引入Tuniao UI组件库： - 添加时间线、折叠面板、表格等UI组件 - 集成头像组、单选框组等交互组件 - 配置全局样式和主题颜色 3. 基础架构搭建： - 配置项目manifest和pages.json路由 - 添加状态管理store - 实现自定义导航栏适配 - 添加工具函数(加解密、数字处理等) 4. 静态资源： - 添加项目logo和背景图片 - 配置uni.scss全局样式变量 本次提交为系统基础功能搭建，后续将进一步完善积分申请流程和审批功能。
105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<template>
|
|
<view class="tn-avatar-group-class tn-avatar-group">
|
|
<view v-for="(item, index) in lists" :key="index" class="tn-avatar-group__item" :style="[itemStyle(index)]">
|
|
<tn-avatar
|
|
:src="item.src || ''"
|
|
:text="item.text || ''"
|
|
:icon="item.icon || ''"
|
|
:size="size"
|
|
:shape="shape"
|
|
:imgMode="imgMode"
|
|
:border="true"
|
|
backgroundColor="rgba(255, 255, 255, 0.4)"
|
|
:borderSize="4"
|
|
></tn-avatar>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'tn-avatar-group',
|
|
props: {
|
|
// 头像列表
|
|
lists: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
// 头像类型
|
|
// square 带圆角正方形 circle 圆形
|
|
shape: {
|
|
type: String,
|
|
default: 'circle'
|
|
},
|
|
// 大小
|
|
// sm 小头像 lg 大头像 xl 加大头像
|
|
// 如果为其他则认为是直接设置大小
|
|
size: {
|
|
type: [Number, String],
|
|
default: ''
|
|
},
|
|
// 当设置为显示头像信息时，
|
|
// 图片的裁剪模式
|
|
imgMode: {
|
|
type: String,
|
|
default: 'aspectFill'
|
|
},
|
|
// 头像之间的遮挡比例
|
|
// 0.4 代表 40%
|
|
gap: {
|
|
type: Number,
|
|
default: 0.4
|
|
}
|
|
},
|
|
computed: {
|
|
itemStyle() {
|
|
return (index) => {
|
|
let style = {}
|
|
if (this._checkSizeIsInline()) {
|
|
switch(this.size) {
|
|
case 'sm':
|
|
style.marginLeft = index != 0 ? `${-48 * this.gap}rpx` : ''
|
|
break
|
|
case 'lg':
|
|
style.marginLeft = index != 0 ? `${-96 * this.gap}rpx` : ''
|
|
break
|
|
case 'xl':
|
|
style.marginLeft = index != 0 ? `${-128 * this.gap}rpx` : ''
|
|
break
|
|
}
|
|
} else {
|
|
const size = Number(this.size.replace(/(px|rpx)/g, '')) || 64
|
|
style.marginLeft = index != 0 ? `-${size * this.gap}rpx` : ''
|
|
}
|
|
return style
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
// 检查是否使用内置的大小进行设置
|
|
_checkSizeIsInline() {
|
|
if (/(xs|sm|md|lg|xl|xxl)/.test(this.size)) return true
|
|
else return false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tn-avatar-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&__item {
|
|
position: relative;
|
|
}
|
|
}
|
|
</style>
|