358 lines
7.8 KiB
Vue
358 lines
7.8 KiB
Vue
<template>
|
|
<view class="search-container">
|
|
<!-- 头部搜索栏 -->
|
|
<view class="search-header">
|
|
<view class="back-icon" @click="goBack">
|
|
<uni-icons type="left" size="30" color="#8B2316"></uni-icons>
|
|
</view>
|
|
<view class="search-input-wrapper">
|
|
<view class="search-icon">
|
|
<uni-icons type="search" size="20" color="#999"></uni-icons>
|
|
</view>
|
|
<input
|
|
class="search-input"
|
|
placeholder="搜索视频、精品课、课件、指南等"
|
|
v-model="searchKeyword"
|
|
@input="onSearchInput"
|
|
@confirm="onSearchConfirm"
|
|
confirm-type="search"
|
|
/>
|
|
<view class="clear-icon" v-if="searchKeyword" @click="clearSearch">
|
|
<uni-icons type="clear" size="20" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="cancel-btn" @click="goBack">
|
|
<text class="cancel-text">搜索</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 搜索分类 -->
|
|
<view class="search-categories" >
|
|
<view class="category-header">
|
|
<text class="category-title">点击图标选择类型</text>
|
|
</view>
|
|
<view class="category-grid">
|
|
<view
|
|
class="category-item"
|
|
v-for="(item, index) in categoryList"
|
|
:key="index"
|
|
@click="onCategoryClick(index)"
|
|
>
|
|
<view class="category-icon">
|
|
<up-image :src="item.icon" width="60rpx" height="60rpx" v-if="tab!=index"></up-image>
|
|
<up-image :src="item.activeIcon" width="60rpx" height="60rpx" v-else></up-image>
|
|
</view>
|
|
<text class="category-text">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import { onShow, onLoad } from "@dcloudio/uni-app";
|
|
import video from "@/static/item_video_no.png"
|
|
import videoOn from "@/static/item_video_pass.png"
|
|
import videoPatient from "@/static/patient_video_no.png"
|
|
import videoPatientOn from "@/static/patient_video_yes.png"
|
|
import news from "@/static/item_news_no.png"
|
|
import newsOn from "@/static/item_news_pass.png"
|
|
import kepu from "@/static/item_science_no.png"
|
|
import kepuOn from "@/static/item_science_pass.png"
|
|
import zhinan from "@/static/item_drug_no.png"
|
|
import zhinanOn from "@/static/item_drug_pass.png"
|
|
import course from "@/static/jingpin_no.png"
|
|
import courseOn from "@/static/jingpin_yes.png"
|
|
import ppt from "@/static/course_no.png"
|
|
import pptOn from "@/static/course_yes.png"
|
|
import patient from "@/static/item_patient_no.png"
|
|
import patientOn from "@/static/item_patient_yes.png"
|
|
import hospital from "@/static/item_hospital_no.png"
|
|
import hospitalOn from "@/static/item_hospital_yes.png"
|
|
import department from "@/static/item_department_no.png"
|
|
import departmentOn from "@/static/item_department_yes.png"
|
|
import doctor from "@/static/item_doctor_no.png"
|
|
import doctorOn from "@/static/item_doctor_yes.png"
|
|
import mall from "@/static/item_mall_no.png"
|
|
import mallOn from "@/static/item_mall_yes.png"
|
|
const tab=ref(-1);
|
|
// 搜索关键词
|
|
const searchKeyword = ref('');
|
|
|
|
// 热门搜索
|
|
const hotSearchList = ref([
|
|
'肝病治疗指南', '肝硬化诊断', '肝炎预防', '肝癌早期症状',
|
|
'肝功能检查', '肝移植', '肝病饮食', '肝病用药'
|
|
]);
|
|
|
|
// 搜索分类
|
|
const categoryList = reactive([
|
|
{ name: '会议视频', icon: video,activeIcon:videoOn, type: 'video',},
|
|
{ name: '患教视频', icon: videoPatient,activeIcon:videoPatientOn,type: 'videoPatient' },
|
|
{ name: '新闻', icon:news,activeIcon:newsOn,type: 'news' },
|
|
{ name: '科普', icon: kepu,activeIcon:kepuOn, type: 'kepu' },
|
|
{ name: '指南', icon:zhinan, activeIcon:zhinanOn,type: 'zhinan' },
|
|
{ name: '精品课', icon:course,activeIcon:courseOn, type: 'course' },
|
|
{ name: '肝胆课件', icon:ppt,activeIcon:pptOn, type: 'ppt' },
|
|
{ name: '患者', icon:patient, patientIcon:videoOn,type: 'patient' },
|
|
{ name: '名院', icon:doctor,activeIcon:doctorOn, type: 'doctor' },
|
|
{ name: '名科', icon:department,activeIcon:departmentOn, type: 'department' },
|
|
{ name: '名医', icon:doctor, activeIcon:doctorOn,type: 'doctor' },
|
|
{ name: '积分商城', icon:mall,activeIcon:mallOn, type: 'mall' }
|
|
]);
|
|
|
|
// 搜索输入
|
|
const onSearchInput = (e) => {
|
|
searchKeyword.value = e.detail.value;
|
|
};
|
|
|
|
// 搜索确认
|
|
const onSearchConfirm = () => {
|
|
if (searchKeyword.value.trim()) {
|
|
uni.showToast({
|
|
title: `搜索：${searchKeyword.value}`,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
};
|
|
|
|
// 清空搜索
|
|
const clearSearch = () => {
|
|
searchKeyword.value = '';
|
|
};
|
|
|
|
// 点击热门搜索
|
|
const onHotSearchClick = (keyword) => {
|
|
searchKeyword.value = keyword;
|
|
uni.showToast({
|
|
title: `搜索：${keyword}`,
|
|
icon: 'none'
|
|
});
|
|
};
|
|
|
|
// 点击分类
|
|
const onCategoryClick = (index) => {
|
|
tab.value=index;
|
|
|
|
// 这里可以根据分类进行搜索
|
|
};
|
|
|
|
// 返回
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
delta:1,
|
|
fail(){
|
|
uni.redirectTo({
|
|
url:'/pages/index/index'
|
|
})
|
|
}
|
|
});
|
|
};
|
|
|
|
// 页面加载
|
|
onLoad(() => {
|
|
console.log('搜索页面加载完成');
|
|
});
|
|
|
|
// 页面显示
|
|
onShow(() => {
|
|
console.log('搜索页面显示');
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search-container {
|
|
min-height: calc(100vh - 140rpx);
|
|
background-color: #fff;
|
|
}
|
|
|
|
// 头部搜索栏
|
|
.search-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background-color: #eeeeee;
|
|
|
|
display: flex;
|
|
height:140rpx;
|
|
align-items: center;
|
|
padding:0 30rpx;
|
|
gap: 20rpx;
|
|
|
|
|
|
.search-input-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 0 20rpx;
|
|
height:70rpx;
|
|
|
|
.search-icon {
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.clear-icon {
|
|
margin-left: 15rpx;
|
|
padding: 10rpx;
|
|
}
|
|
}
|
|
|
|
.cancel-btn {
|
|
padding: 10rpx 20rpx;
|
|
background:#8B2316;
|
|
border-radius: 10rpx;
|
|
|
|
.cancel-text {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 热门搜索
|
|
.hot-search {
|
|
margin-top: 20rpx;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
|
|
.hot-header {
|
|
margin-bottom: 30rpx;
|
|
|
|
.hot-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.hot-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
|
|
.hot-tag {
|
|
padding: 15rpx 25rpx;
|
|
background-color: #fff5f5;
|
|
border: 2rpx solid #ffebeb;
|
|
border-radius: 25rpx;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
&:active {
|
|
background-color: #ffe0e0;
|
|
border-color: #ffcccc;
|
|
}
|
|
|
|
.tag-text {
|
|
font-size: 26rpx;
|
|
color: #8B2316;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 搜索分类
|
|
.search-categories {
|
|
margin-top: 140rpx;
|
|
padding: 30rpx;
|
|
|
|
background-color: #fff;
|
|
|
|
.category-header {
|
|
margin-bottom: 30rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
.category-title {
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.category-grid {
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 40rpx;
|
|
|
|
.category-item {
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 30rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
&:active {
|
|
background-color: #f0f0f0;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.category-icon {
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.category-text {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 响应式调整
|
|
@media (max-width: 750rpx) {
|
|
.search-header {
|
|
padding: 15rpx 20rpx;
|
|
|
|
.search-input-wrapper {
|
|
height: 70rpx;
|
|
|
|
.search-input {
|
|
height: 70rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.cancel-text {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.hot-search,
|
|
.search-categories {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.category-grid {
|
|
gap: 20rpx;
|
|
|
|
.category-item {
|
|
padding: 20rpx 15rpx;
|
|
|
|
.category-text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|