榆钱落尽槿花稀
448712ece5
本次提交主要包含以下内容： 1. 新增积分申请系统核心功能： - 添加登录页面及API接口 - 实现积分申请记录查看功能 - 集成微信小程序分享功能 - 添加请求管理工具类 2. 引入Tuniao UI组件库： - 添加时间线、折叠面板、表格等UI组件 - 集成头像组、单选框组等交互组件 - 配置全局样式和主题颜色 3. 基础架构搭建： - 配置项目manifest和pages.json路由 - 添加状态管理store - 实现自定义导航栏适配 - 添加工具函数(加解密、数字处理等) 4. 静态资源： - 添加项目logo和背景图片 - 配置uni.scss全局样式变量 本次提交为系统基础功能搭建，后续将进一步完善积分申请流程和审批功能。
191 lines
4.1 KiB
Vue
191 lines
4.1 KiB
Vue
<template>
|
||
<view v-if="show" class="tn-empty-class tn-empty" :style="[emptyStyle]">
|
||
<view
|
||
v-if="!isImage"
|
||
class="tn-empty__icon"
|
||
:class="[icon ? `tn-icon-${icon}` : `tn-icon-empty-${mode}`]"
|
||
:style="[iconStyle]"
|
||
></view>
|
||
<image
|
||
v-else
|
||
class="tn-empty__image"
|
||
:style="[imageStyle]"
|
||
:src="icon"
|
||
mode="widthFix"
|
||
></image>
|
||
|
||
<view
|
||
class="tn-empty__text"
|
||
:style="[textStyle]"
|
||
>{{ text ? text : icons[mode]}}</view>
|
||
<view v-if="$slots.default || $slots.$default" class="tn-empty__slot">
|
||
<slot/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'tn-empty',
|
||
props: {
|
||
// 显示空白页
|
||
show: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 内置icon的名称
|
||
// 图片路径，建议使用绝对路径
|
||
icon: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 预置图标类型
|
||
mode: {
|
||
type: String,
|
||
default: 'data'
|
||
},
|
||
// 提示文字
|
||
text: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 文字颜色
|
||
textColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 文字大小，单位rpx
|
||
textSize: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 图标颜色
|
||
iconColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 图标大小，单位rpx
|
||
iconSize: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 图片宽度（当图标为图片时生效），单位rpx
|
||
imgWidth: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 图片高度（当图标为图片时生效），单位rpx
|
||
imgHeight: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 自定义组件样式
|
||
customStyle: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
emptyStyle() {
|
||
let style = {}
|
||
Object.assign(style, this.customStyle)
|
||
return style
|
||
},
|
||
iconStyle() {
|
||
let style = {}
|
||
if (this.iconSize) {
|
||
style.fontSize = this.iconSize + 'rpx'
|
||
}
|
||
if (this.iconColor) {
|
||
style.color = this.iconColor
|
||
}
|
||
return style
|
||
},
|
||
imageStyle() {
|
||
let style = {}
|
||
if (this.imgWidth) {
|
||
style.width = this.imgWidth + 'rpx'
|
||
}
|
||
if (this.imgHeight) {
|
||
style.height = this.imgHeight + 'rpx'
|
||
}
|
||
return style
|
||
},
|
||
textStyle() {
|
||
let style = {}
|
||
if (this.textColor) {
|
||
style.color = this.textColor
|
||
}
|
||
if (this.textSize) {
|
||
style.fontSize = this.textSize + 'rpx'
|
||
}
|
||
return style
|
||
},
|
||
// 判断传递的icon是否为图片
|
||
isImage() {
|
||
return this.icon.indexOf('/') >= 0
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
icons: {
|
||
cart: '购物车为空',
|
||
page: '页面不存在',
|
||
search: '搜索结果为空',
|
||
address: '地址为空',
|
||
network: '网络不通',
|
||
order: '订单为空',
|
||
coupon: '优惠券为空',
|
||
favor: '暂无收藏',
|
||
permission: '无权限',
|
||
history: '历史记录为空',
|
||
message: '暂无消息',
|
||
list: '列表为空',
|
||
data: '暂无数据',
|
||
comment: '暂无评论'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tn-empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&__icon {
|
||
margin-top: 14rpx;
|
||
color: #AAAAAA;
|
||
font-size: 90rpx;
|
||
}
|
||
|
||
&__image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
|
||
&__text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 20rpx;
|
||
color: #AAAAAA;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
&__slot {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
</style>
|