首頁組件

2024-04-15 16:15:09 +08:00
parent 289b808bf6
commit 091552233c
36 changed files with 3452 additions and 295 deletions
--- a/components/qiyue-category/qiyue-category.vue
+++ b/components/qiyue-category/qiyue-category.vue
@@ -0,0 +1,209 @@
+<template>
+	<view class="nav">
+		<view class="nav-left">
+			<scroll-view scroll-y>
+				<view class="nav-left-item" v-for="(item, index) in categoryList"
+					@click="categoryClickMain(item, index)" :key="index"
+					:style="index == categoryActive ? 'color:' + activeTextColor + ';background-color:' + activeBackgroundColor : ''">
+					{{ item[label] }}
+				</view>
+			</scroll-view>
+		</view>
+		<view class="nav-right" v-if="!subCategoryList.length == 0">
+			<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="loadMore"
+				scroll-with-animation>
+				<view class="nav-right-item" v-for="(item, index2) in subCategoryList" :key="index2"
+					@click="categoryClickSub(item)">
+					<view>{{ item[label] }}</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'category',
+		data() {
+			return {
+				h: null,
+				namelang: '',
+				keyword: '请输入相关行业',
+				height: 0,
+				scrollTop: 0,
+				scrollHeight: 0,
+				categoryActive: 0,
+				activeStyle: {
+					color: this.activeTextColor,
+					backgroundColor: this.activeBackgroundColor
+				}
+			};
+		},
+		props: {
+			//主分类激活索引
+			merchant: {
+				type: Number,
+				default: 1
+			},
+			defaultActive: {
+				type: Number,
+				default: 0
+			},
+			//主分类List
+			categoryList: {
+				type: Array,
+				default: () => {
+					return null;
+				}
+			},
+			//侧边分类List
+			subCategoryList: {
+				type: Array,
+				default: () => {
+					return null;
+				}
+			},
+			activeTextColor: {
+				type: String,
+				default: '#FF981E'
+			},
+			activeBackgroundColor: {
+				type: String,
+				default: '#fff'
+			},
+			label: {
+				type: String,
+				default: 'name'
+			},
+			imgSrc: {
+				type: String,
+				default: 'logo'
+			},
+			//主分类点击事件
+			categoryMainClick: {},
+			//子分类点击事件
+			categorySubClick: {}
+		},
+		methods: {
+			async computed_h() {
+				//获取div宽度
+				let content_Icon = await uni.utils.info_distance('Box_top');
+				let content_top_box = await uni.utils.info_distance('Box_text');
+				let system_info = await uni.getSystemInfo();
+				var h_ = system_info.windowHeight + 'px';
+				this.h = {
+					height: h_
+				};
+			},
+			scroll(e) {
+				this.scrollHeight = e.detail.scrollHeight;
+			},
+			categoryClickMain(category, index) {
+				this.namelang = category.name
+				this.$emit('categoryMainClick', {
+					'category': category,
+					'index': index
+				});
+				this.categoryActive = index;
+				this.scrollTop = -this.scrollHeight * index;
+			},
+			loadMore(e) {
+				console.log(e)
+				this.$emit('loadMores');
+			},
+			categoryClickSub(category) {
+				this.$emit('categorySubClick', category);
+			},
+			searchkeyword() {
+				this.$emit('searchkeyword', this.keyword)
+			},
+		},
+		mounted() {
+			this.categoryActive = this.defaultActive;
+			this.computed_h();
+			// uni.getSystemInfo({
+			// 	success: res => {
+			// 		console.log(res);
+			// 		this.height = res.windowHeight;
+			// 	}
+			// });
+		},
+		watch: {
+			subCategoryList(newValue, oldValue) {}
+		}
+	};
+</script>
+
+<style scoped>
+	.Box_top {
+		padding: 32rpx 28rpx;
+	}
+
+	.Box_text {
+		background: #f1f0f5;
+		padding: 10rpx 28rpx;
+		font-size: 28rpx;
+		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+		font-weight: 400;
+		color: #999999;
+	}
+
+	.Box_texttext {
+		margin-left: 16rpx;
+		font-size: 28rpx;
+		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	.nav {
+		display: flex;
+		width: 100%;
+	}
+
+	.nav-left {
+		max-height: 600rpx;
+		width: 30%;
+		overflow: auto;
+	}
+
+	.nav-left-item {
+		padding: 10rpx 0;
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.nav-right {
+		width: 70%;
+		max-height: 600rpx;
+		overflow: auto;
+	}
+
+	.nav-right-item {
+		width: 100%;
+		border-left: solid 1px #e0e0e0;
+		/* height: 100px; */
+		text-align: left;
+		padding: 24rpx 32rpx;
+		font-size: 13px;
+	}
+
+	.nav-right-item image {
+		width: 50px;
+		height: 50px;
+	}
+
+	.active {
+		color: #f24544;
+	}
+
+	.padding {
+		height: var(--status-bar-height);
+		width: 100%;
+		top: 0;
+		position: fixed;
+		background-color: #f24544;
+	}
+</style>