初始提交

components/CommonPane/index.vue

@@ -0,0 +1,204 @@
+<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>
+					<u-tabs :list="tabList" :is-scroll="true" v-model="current" @change="tabChange"
+						inactive-color="#666" font-size="28"></u-tabs>
+				</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" :class="item.icon"
+						:style="{ background: item.iconBackground || '#008cff' }"></view>
+					<view class="item-title u-m-t-8">{{item.fullName}}</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() {
+				let url;
+				if (this.type === 'collect') {
+					url = this.tabType === 'menu' ? '/pages/commonPage/morePage/index?type=2' :
+						'/pages/commonPage/morePage/index?type=1'
+				} else {
+					url = this.tabType === 'menu' ? '/pages/apply/menu/index' : '/pages/workFlow/workFlow/index'
+				}
+				this.$emit('openPage', url)
+			},
+			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;
+
+			.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: 25%;
+					padding: 10px;
+					justify-content: center;
+					align-items: center;
+					padding: 30rpx 0;
+
+					.item-icon {
+						width: 50px;
+						height: 50px;
+						text-align: center;
+						line-height: 50px;
+						color: #fff;
+						border-radius: 18px;
+						font-size: 24px;
+						background-color: #f0f2f6;
+
+						&:before {
+							margin-left: 4rpx;
+						}
+					}
+
+					.more {
+						background: #ececec;
+						color: #666;
+						font-size: 1.5625rem;
+					}
+
+					.item-title {
+						width: 92px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						text-align: center;
+						font-size: 24rpx;
+					}
+				}
+			}
+		}
+	}
+</style>