zoujiandong 07e0630824 111
2025-07-18 09:29:19 +08:00

184 lines
3.6 KiB
Vue

<template>
<view class="navbox">
<view class="bg"></view>
<view class="namebox">
<view class="logo">
<up--image
:src="logoImg"
width="62rpx"
height="62rpx"
radius="50%"
></up--image>
</view>
<view class="name">
{{ navName }}
<view class="navbg">
<up--image
:src="navbg"
width="100rpx"
height="31rpx"
></up--image>
</view>
</view>
</view>
<view class="search">
<view class="searchwrap">
<input type="text" class="ipt" v-model="keyWord" :placeholder="placeholder"/>
<up-icon name="search" size="26" color="#999" @click="search"></up-icon>
</view>
<up--image
:src="userHeadImg"
@click="goMy"
mode="widthFix"
width="62rpx"
height="62rpx"
radius="50%"
></up--image>
</view>
</view>
</template>
<script setup>
import { ref, watch} from "vue";
import headImg from "@/static/headImg.png";
import logoImg from "@/static/logo.png";
import navbg from "@/static/navbg.png"
import navTo from "@/utils/navTo.js";
import { onShow,onLoad } from "@dcloudio/uni-app";
const userHeadImg = ref('');
const keyWord = ref('');
const props=defineProps({
searchWord:{
type:String,
default:''
},
type:{
type:String,
default:'home',
},
navName:{
type:String,
default:'肝胆相照临床病例库',
}
})
const emit = defineEmits(['changeWord'])
const placeholder = ref("输入疾病名称、标题、作者搜索");
watch(()=>props.type,(newVal)=>{
if(newVal==='home'){
//placeholder.value='输入医生姓名'
}else if(newVal==='caseTalk'){
//placeholder.value='输入医院名称'
}
},{immediate: true })
watch(()=>props.searchWord,(newVal)=>{
keyWord.value=newVal
})
const goMy=()=>{
navTo({
url:'/pages/my/my'
})
}
const search=()=>{
if(props.type=='home'){
navTo({
url: `/pages/search/search?keyWord=${keyWord.value}`,
});
}else if(props.type=='caseTalk'){
navTo({
url: `/pages/specialList/specialList?keyWord=${keyWord.value}`,
});
}
// if (!keyWord.value) {
// return uni.showToast({
// title: "请输入关键字",
// icon:'none'
// });
// }
}
onLoad(()=>{
let userInfo = uni.getStorageSync('userInfo');
if(userInfo && userInfo.avatar){
userHeadImg.value=userInfo.avatar
}else{
userHeadImg.value=headImg;
}
})
</script>
<style lang="scss" scoped>
.navbox {
padding-bottom: 20rpx;
background-color: #f9fafb;
position: relative;
background: radial-gradient(
60% 90% at 4% 2%,
#43c9c3 0%,
rgba(255, 255, 255, 0) 100%
);
}
.bg {
z-index: -1;
top: 0;
bottom: 0;
width: 100%;
position: absolute;
background: radial-gradient(
43% 90% at 84% 6%,
#ffd6c9 0%,
rgba(255, 255, 255, 0) 100%
);
}
.namebox {
padding-top: 102rpx;
margin: 0rpx 30rpx 0rpx;
display: flex;
align-items: center;
.name {
margin-left: 16rpx;
font-size: 30rpx;
color: #111827;
position: relative;
.navbg{
position: absolute;
z-index:-1;
top:10rpx;
left:18rpx;
}
}
}
.search {
margin: 40rpx 30rpx 0rpx;
display: flex;
align-items: center;
justify-content: space-between;
.searchwrap {
display: flex;
padding-right:35rpx;
align-items: center;
flex: 1;
padding-left: 28rpx;
margin-right: 23rpx;
height: 80rpx;
background: #fbfbfb;
box-shadow: 0px 4rpx 10rpx 0px rgba(153, 153, 153, 0.5);
border-radius: 40rpx;
.ipt {
flex:1;
margin-left: 15rpx;
font-size: 28rpx;
}
}
}
</style>