first commit
This commit is contained in:
zoujiandong
@@ -0,0 +1,357 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user