Files
taimed/pages/talents/detail.vue
2025-06-20 17:40:41 +08:00

196 lines
4.1 KiB
Vue

<template>
<view class="content">
<z-nav-bar title="医生主页" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
<view class="taihu_wrap" v-if="status">
<view class="taihu_infor">
<image :src="taihuTalent.icon" class="infor_image" mode="aspectFit"></image>
<view class="infor_right">
<view class="infor_top">
<text class="infor_name">{{taihuTalent.name}}</text>
<text class="infor_title">{{taihuTalent.title}}</text>
</view>
<view class="infor_con">
<text v-for="item in label" :key="item">{{item}}</text>
</view>
</view>
</view>
<view class="taihu_common">
<text>介绍</text>
{{taihuTalent.introduce}}
</view>
<view class="taihu_common">
<text>业务专长</text>
{{taihuTalent.specialty}}
</view>
<view class="taihu_common">
<text>出诊信息</text>
<span v-html="taihuTalent.clinic"></span>
</view>
<view class="taihu_common">
<text>预约信息</text>
<span style="white-space: pre-line;">{{taihuTalent.reservation.replace('电话预约:', '电话预约:\n')}}</span>
</view>
<view class="taihu_common">
<text>所属地域</text>
{{taihuTalent.region}}
</view>
<view class="taihu_common">
<text>太湖证书</text>
<view class="certificate-list" v-if="certificates.length>0">
<view class="list_block" v-for="(item,index) in displayedCertificates" :key="index" @click="goToUrl(item.userCertificates)">
{{item.title}}
</view>
<view v-if="shouldShowToggle" class="toggle-btn" @click="toggleShow">
{{ showAll ? '收起' : '查看更多' }}
</view>
</view>
<view class="certificate-list" v-else>暂无</view>
</view>
</view>
</view>
</template>
<script>
import $http from "@/config/requestConfig.js";
export default {
data() {
return {
id: null,
taihuTalent: {},
label: [], //标签
certificates: [], //证书
status: false,
showAll: false, //是否显示全部
defaultShowCount: 6 //默认显示条数
}
},
computed: {
displayedCertificates() {
if (this.showAll) {
return this.certificates
} else {
return this.certificates.slice(0, this.defaultShowCount)
}
},
shouldShowToggle() {
return this.certificates.length > this.defaultShowCount
}
},
onLoad(e) {
this.id = e.id;
this.getData();
},
methods: {
//获取数据
getData() {
uni.showLoading({
title: '加载中'
})
this.$http.request({
url: 'common/taihuTalent/taihuTalentInfo',
method: "POST",
data: {
id: this.id
},
header: {
"Content-Type": "application/json",
},
})
.then(res=> {
if (res.code==0) {
uni.hideLoading();
this.status = true;
this.taihuTalent = res.taihuTalent;
this.label = res.label;
this.certificates = res.certificates;
}
});
},
//点击展示全部
toggleShow() {
this.showAll = !this.showAll
},
//展示图片
goToUrl(urlArr){
if(urlArr&&urlArr.length>0){
uni.navigateTo({
url: '/pages/talents/certificateUrl?data='+JSON.stringify(urlArr),
});
}else{
this.$commonJS.showToast("暂无证书图片");
}
},
},
}
</script>
<style lang="scss" scoped>
@import '@/static/mixin.scss';
.content{
height: 100%;
overflow: auto;
background-color: #fff;
}
.taihu_wrap{
padding: 30rpx 30rpx 50rpx;
}
.taihu_infor{
display: flex;
align-items: center;
padding-bottom: 10rpx;
}
.infor_image{
display: block;
width: 180rpx;
height: 220rpx;
}
.infor_right{
width: calc(100% - 220rpx);
margin-left: 40rpx;
}
.infor_top{
display: flex;
align-items: center;
line-height: 40rpx;
}
.infor_name{
font-size: 38rpx;
color: #333;
font-weight: bold;
}
.infor_title{
font-size: 34rpx;
color: #999;
padding-left: 20rpx;
}
.infor_con{
padding-top: 20rpx;
text{
display: block;
font-size: 30rpx;
line-height: 34rpx;
padding: 8rpx 0;
color: $themeColor;
}
}
.taihu_common{
margin-top: 30rpx;
font-size: 30rpx;
line-height: 46rpx;
text{
font-size: 38rpx;
padding-right: 15rpx;
font-weight: bold;
color: $themeColor;
}
}
.list_block{
padding-top: 5rpx;
}
.toggle-btn{
color: $themeColor;
}
</style>