331 lines
6.7 KiB
Vue
331 lines
6.7 KiB
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> |