210 lines
4.2 KiB
Vue
210 lines
4.2 KiB
Vue
<template>
|
|
<view class="card">
|
|
<view class="card-content">
|
|
<view class="card-tabs u-flex">
|
|
<view class="u-flex card-left">
|
|
<view class="card-title">{{title}}</view>
|
|
</view>
|
|
<view @click="openPage" class="morebtn">更多<u-icon name="arrow-right" class="u-p-r-10"
|
|
color="#666"></u-icon></view>
|
|
</view>
|
|
<view class="card-item">
|
|
<!-- 遍历渲染业务图标 -->
|
|
<view class="item u-flex-col" v-for="(item,index) in cardData" :key="index" @click="clickItem(item)">
|
|
<view class="item-icon" :style="{ background: item.iconBackground || '#008cff' }">
|
|
<!-- 使用 iconify-icon 渲染 ep 系列图标 -->
|
|
<iconify-icon
|
|
:icon="item.icon"
|
|
color="#ffffff"
|
|
width="24"
|
|
height="24"
|
|
></iconify-icon>
|
|
</view>
|
|
<view class="item-title u-m-t-8">{{item.name}}</view>
|
|
</view>
|
|
<view v-if="showAdd" class="item u-flex-col u-col-center" @click="add">
|
|
<text class="u-font-40 item-icon more">+</text>
|
|
<text class="u-m-t-8 item-title">添加</text>
|
|
</view>
|
|
</view>
|
|
<JnpfEmpty v-if="!cardData.length && type != 'collect' "></JnpfEmpty>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "我的收藏"
|
|
},
|
|
menuList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
flowList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
showAdd: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "collect"
|
|
},
|
|
flowEnabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tabList: [{
|
|
name: '应用功能',
|
|
type: 'menu'
|
|
}],
|
|
current: 0,
|
|
cardData: [],
|
|
userInfo: {}
|
|
}
|
|
},
|
|
computed: {
|
|
tabType() {
|
|
return this.tabList[this.current].type
|
|
}
|
|
},
|
|
watch: {
|
|
menuList: {
|
|
handler(val) {
|
|
if (this.current != 0) this.cardData = this.flowList
|
|
},
|
|
immediate: true
|
|
},
|
|
flowList: {
|
|
handler(val) {
|
|
if (this.current == 0) this.cardData = this.menuList
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
created() {
|
|
this.userInfo = uni.getStorageSync('userInfo') || {}
|
|
this.handleTabList()
|
|
},
|
|
methods: {
|
|
handleTabList() {
|
|
if (this.flowEnabled) {
|
|
this.tabList.push({
|
|
name: '发起审批',
|
|
type: 'flow'
|
|
})
|
|
}
|
|
},
|
|
tabChange(index) {
|
|
this.current = index;
|
|
if (this.tabType === 'menu') this.cardData = this.menuList
|
|
if (this.tabType === 'flow') this.cardData = this.flowList
|
|
},
|
|
clickItem(item) {
|
|
this.$emit('launch', {
|
|
...item,
|
|
tabType: this.tabType
|
|
})
|
|
},
|
|
openPage() {
|
|
this.$emit('openPage', '/pages/apply/menu/index')
|
|
},
|
|
add() {
|
|
let url = this.tabType === 'menu' ? '/pages/apply/allAppApply/index' :
|
|
'/pages/workFlow/allAppWorkFlow/index'
|
|
this.$emit('addApp', url)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.card {
|
|
margin-top: 20rpx;
|
|
|
|
&-title {
|
|
padding: 0 20rpx;
|
|
color: #303133;
|
|
font-size: 36rpx;
|
|
margin-bottom: 10rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
padding-top: 15rpx;
|
|
|
|
.card-tabs {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
|
|
.card-left {}
|
|
|
|
.morebtn {
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.card-item {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
|
|
.item {
|
|
width: 33.33%;
|
|
padding: 10px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
|
|
.item-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
/* 关键：改为 flex 布局，让图标居中 */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
border-radius: 18px;
|
|
font-size: 24px;
|
|
background-color: #f0f2f6;
|
|
/* 移除原有伪类样式，避免干扰 */
|
|
&:before {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.more {
|
|
background: #ececec;
|
|
color: #666;
|
|
font-size: 1.5625rem;
|
|
/* 保持添加按钮的居中 */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.item-title {
|
|
width: 92px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |