roamfuding-xcx/page_user/caozuo/wenti.vue

<template>
	<view class="page">
		<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='46' id="navbar">
		</u-navbar>
        <image src="https://api.ccttiot.com/smartmeter/img/static/uC3y8lhMoz9fq8RDUFpl" class="bj" mode=""></image>
		<!-- 搜索框 -->
		<view class="search-container">
			<!-- <view class="search-bar">
				<u-icon name="search" size="32" color="#3D3D3D"></u-icon>
				<input 
					class="search-input" 
					type="text" 
					:placeholder="lang.search.placeholder"
					v-model="searchKeyword"
					@input="onSearchInput"
				/>
			</view> -->
		</view>

		<!-- 标签页导航 -->
		<view class="tab-container">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'recommend' }"
				@click="switchTab('recommend')"
			>
				{{ lang.search.tabs.recommend }}
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'travel' }"
				@click="switchTab('travel')"
			>
				{{ lang.search.tabs.travel }}
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'food' }"
				@click="switchTab('food')"
			>
				{{ lang.search.tabs.food }}
			</view>
		</view>

		<!-- 内容列表 -->
		<view class="content-container">
			<view class="content-list">
				<view 
					class="content-item" 
					v-for="(item, index) in contentList" 
					:key="index"
					@click="onItemClick(item)"
				>
					<view class="item-number">{{ index + 1 }}</view>
					<view class="item-content">
						<view class="item-question">{{ item.title }}</view>
						<view class="item-answer">{{ item.description }}</view>
					</view>
				</view>
				
				<!-- 更多内容 -->
				<!-- <view 
					class="content-item" 
					v-for="(item, index) in moreContentList" 
					:key="index"
					v-show="showMore"
					@click="onItemClick(item)"
				>
					<view class="item-number">{{ contentList.length + index + 1 }}</view>
					<view class="item-content">
						<view class="item-question">{{ item.question }}</view>
						<view class="item-answer">{{ item.answer }}</view>
					</view>
				</view> -->
			</view>
			
			<!-- 展开更多按钮 -->
			<!-- <view class="expand-more" @click="loadMore">
				<text class="expand-text">{{ showMore ? '收起' : lang.search.content.expandMore }}</text>
				<u-icon :name="showMore ? 'arrow-up' : 'arrow-down'" size="24" color="#999"></u-icon>
			</view> -->
		</view>
	</view>
</template>

<script>
	import lang from '@/common/lang/zh-cn.js'
	
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor:" ",
                },
				lang: lang,
				searchKeyword: '',
				activeTab: 'recommend',
				contentList: [],
				moreContentList: [],
				showMore: false,
				type:3
			}
		},
		onLoad() {
            this.getlist()
		},
		methods: {
			// 获取所有的问题
			getlist(){
				this.$u.get(`/app/article/list?type=${this.type}&pageNum=1&pageSize=999`).then(res =>{
					if(res.code == 200){
					    this.contentList = res.rows
					}
				})
			},
			
			onSearchInput(e) {
				this.searchKeyword = e.detail.value
				// 这里可以添加搜索逻辑
			},
			switchTab(tab) {
				console.log(tab);
				this.activeTab = tab
				if(tab == 'recommend'){
					this.type = 3
					 this.getlist()
				}else if(tab == 'travel'){
					this.type = 4
					 this.getlist()
				}else if(tab == 'food'){
					this.type = 5
					 this.getlist()
				}
				// 这里可以添加切换标签页的逻辑
			},
			// 点击查看详情
			onItemClick(item) {
				console.log('点击了:', item)
				uni.navigateTo({
					url:'/page_user/caozuo/wentixq?id=' + item.id
				})
			},
			loadMore() {
				// 切换展开/收起状态
				this.showMore = !this.showMore
				
				// 添加一些用户反馈
				uni.showToast({
					title: this.showMore ? '已展开更多内容' : '已收起内容',
					icon: 'none',
					duration: 1500
				})
			}
		}
	}
</script>

<style lang="scss">
	.bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.page {
		min-height: 100vh;
	}
	
	// 搜索框样式
	.search-container {
		padding: 20rpx 30rpx;
		background: transparent;
		margin-top: 180rpx;
	}
	
	.search-bar {
		display: flex;
		align-items: center;
		width: 698rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		padding-left: 32rpx;
	}
	
	.search-input {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #333;
		background: transparent;
		border: none;
		outline: none;
		
		&::placeholder {
			color: #999;
		}
	}
	
	// 标签页样式
	.tab-container {
		display: flex;
		background: transparent;
		margin: 0 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #999;
		background: #f0f8f8;
		border-radius: 20rpx 20rpx 0 0;
		transition: all 0.3s ease;
		
		&.active {
			background: #ffffff;
			color: #333;
			font-weight: 600;
		}
	}
	
	// 内容区域样式
	.content-container {
		background: #ffffff;
		margin: 0 30rpx;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}
	
	.content-list {
		background: #ffffff;
	}
	
	.content-item {
		display: flex;
		align-items: flex-start;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		transition: background-color 0.3s ease;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background-color: #f8f8f8;
		}
	}
	
	.item-number {
		width: 60rpx;
		height: 60rpx;
		background: #f0f0f0;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	
	.item-content {
		flex: 1;
	}
	
	.item-question {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.4;
		margin-bottom: 12rpx;
	}
	
	.item-answer {
		font-size: 26rpx;
		color: #999;
		line-height: 1.4;
	}
	
	// 展开更多按钮
	.expand-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		background: #ffffff;
		border-top: 1rpx solid #f0f0f0;
		transition: background-color 0.3s ease;
		
		&:active {
			background-color: #f8f8f8;
		}
	}
	
	.expand-text {
		font-size: 28rpx;
		color: #666;
		margin-right: 12rpx;
	}
	
	// 主题色彩调整（黑色和粉色）
	.tab-item.active {
		background: #ffffff;
		color: #000;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 40rpx;
			height: 4rpx;
			background: #1EC28B;
			border-radius: 2rpx;
		}
	}
	.content-item:active {
		background: linear-gradient(90deg, rgba(255, 105, 180, 0.05), rgba(255, 20, 147, 0.05));
	}
</style>