初始提交

components/CommonTabs/index.vue

@@ -0,0 +1,168 @@
+<template>
+	<view class="commonTabs-v">
+		<view class="icon-ym u-tabs-box" v-if="list.length" :class="{'boxShadow':isBoxShadow}">
+			<view class="apply-tabs">
+				<u-tabs :list="list" v-model="tabCurrent" @change="change" :is-scroll="isScroll" :name="prop"
+					:height="height">
+				</u-tabs>
+			</view>
+			<view class="more-icon" :class="icon" @click="iconClick "></view>
+		</view>
+		<u-popup v-model="showPopup" mode="bottom" closeable close-icon-color="#666666">
+			<view class="classifyTitle">
+				全部分类
+			</view>
+			<scroll-view scroll-y="true" :style="{'height':scrollHeight+'rpx'}">
+				<view class="classify-scroll-view u-flex">
+					<view v-for="(item,index) in list" :key="index" @click="classifyItem(index)"
+						class="classify-item u-font-28 u-line-1">
+						{{item.fullName}}
+					</view>
+				</view>
+			</scroll-view>
+		</u-popup>
+	</view>
+</template>
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: () => []
+			},
+			current: {
+				type: Number,
+				default: 0
+			},
+			scrollHeight: {
+				type: String,
+				default: '360'
+			},
+			prop: {
+				type: String,
+				default: 'fullName'
+			},
+			icon: {
+				type: String,
+				default: 'icon-ym icon-ym-app-more'
+			},
+			height: {
+				type: String,
+				default: '84'
+			},
+			type: {
+				type: String,
+				default: 'flow'
+			},
+			isBoxShadow: {
+				type: Boolean,
+				default: false
+			},
+			isScroll: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				tabCurrent: 0,
+				showPopup: false,
+				categoryList: []
+			}
+		},
+		watch: {
+			current: {
+				handler(val) {
+					this.tabCurrent = val
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			classifyItem(index) {
+				this.change(index)
+			},
+			iconClick() {
+				if (this.type != 'flow') return this.$emit('iconClick');
+				this.showPopup = true
+			},
+			change(e) {
+				this.tabCurrent = e;
+				this.showPopup = false;
+				this.$emit('change', e);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.commonTabs-v {
+		.boxShadow {
+			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+		}
+
+		.u-tabs-box {
+			position: relative;
+
+			.apply-tabs {
+				width: 94%;
+
+				.u-tabs {
+					height: 2.75rem;
+				}
+
+			}
+
+			.more-icon {
+				position: absolute;
+				top: 0;
+				right: 0;
+				/* #ifdef MP */
+				height: 85rpx;
+				line-height: 85rpx;
+				/* #endif */
+				/* #ifndef MP */
+				height: 88rpx;
+				line-height: 88rpx;
+				/* #endif */
+				text-align: center;
+
+				padding: 0 16rpx;
+				background-color: #fff;
+				opacity: 0.9;
+				box-shadow: 0px 0px 30rpx 8rpx rgba(243, 243, 243, 0.8);
+			}
+		}
+
+		.classifyTitle {
+			font-family: PingFang SC;
+			height: 110rpx;
+			width: 100%;
+			line-height: 110rpx;
+			padding-left: 20rpx;
+			padding-right: 20rpx;
+			font-size: 32rpx;
+			color: #333333;
+			font-weight: 500;
+		}
+
+		.classify-scroll-view {
+			padding-bottom: 70rpx;
+			padding: 0 20rpx 64rpx;
+			justify-content: flex-start;
+			flex-wrap: wrap;
+
+			.classify-item {
+				width: 22%;
+				text-align: center;
+				margin: 10rpx;
+				background-color: #EEF0F4;
+				border-radius: 8rpx;
+				background: rgba(238, 240, 244, 0.39);
+				color: #666666;
+				line-height: 58rpx;
+				padding: 0 20rpx;
+			}
+		}
+	}
+</style>