com.kasite.client.uniapp.patient/pagesNetHos/st1/business/doctor/doctorInfo/doctorInfo.vue

<template>
  <view class="page">
    <!-- 顶部导航栏 -->
    <view class="tabbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="p_inner p_flexCenter">{{ pageTitle }}</view>
      <image class="p_back_img" mode="widthFix" :src="iconUrl.doctor_back_n"></image>
      <view class="iconCon" :style="{ top: statusBarHeight + 'px' }" @click="toBack">
        <view class="iconLeft"></view>
      </view>
    </view>

    <view class="container" v-if="showCon" :style="{ paddingTop: 44 + statusBarHeight + 'px' }">
      <view class="content">
        <image class="p_back_img" mode="widthFix" :src="iconUrl.doctor_back_n"></image>
        <view class="doc_con_outer">
          <view class="doc_con">
            <view class="doc_his p_flexCenter">
              <view class="p_doctor_img_con">
                <image class="p_doctor_img" :src="doctorInfo.DoctorPhotourl"></image>
              </view>
              <view class="doc_his_con">
                <view class="doc_name p_flexStart">
                  {{ doctorInfo.DoctorName }}
                  <image class="doc_his_code_img" :src="iconUrl.doctor_code_n" @click="codeClick"></image>
                </view>
                <view class="doc_dept p_color_6">{{ doctorInfo.DeptName }} {{ doctorInfo.TitleName }}</view>
                <view class="doc_tip_list p_flexCenter">
                  <view class="doc_tip_item" v-if="doctorInfo.DoctorServiceCons != '1' && doctorInfo.DoctorServiceTelcons != '1' && doctorInfo.DoctorVideocons != '1'">暂停接单</view>
                  <view class="doc_tip_item" v-if="doctorInfo.DoctorService1004 == '0'">不能开处方</view>
                </view>
              </view>

              <view class="doc_his_btn_list p_flexCenter">
                <view class="doc_his_btn_like p_flexCenter" :class="{ 'doc_his_btn_liked': like }">
                  <image class="doc_his_btn_img" :src="like ? iconUrl.doctor_gz_ac : iconUrl.doctor_gz"></image>
                  <view class="doc_his_btn_val" @click="likeFn">{{ like ? '已关注' : '关注' }}</view>
                </view>
              </view>
            </view>
            <view class="doc_info p_format">
              <view class="doc_info_item">
                <image class="doc_info_img" :src="iconUrl.doctor_sc_n"></image>
                <view class="doc_info_val" :class="{ 'p_lineClamp': !showAllInfo }" @click="showAllFn">
                  擅长：{{ doctorInfo.DoctorSkill }} 简介：{{ doctorInfo.DoctorIntro }}
                </view>
              </view>
            </view>
          </view>
          <view class="doc_his_val p_flexCenter p_color_6">
            <view class="p_flexCenterCol">
              <text class="doc_his_val_num p_color_3" v-if="doctorInfo.ConsultAmount >= 10">{{ doctorInfo.ConsultAmount }}</text>
              <text class="doc_his_val_num p_color_3" v-else>{{ '<' }}10</text>咨询量
            </view>
            <view class="p_flexCenterCol">
              <text class="doc_his_val_num p_color_3">{{ doctorInfo.percentage }}</text>好评率
            </view>
            <view class="p_flexCenterCol">
              <text class="doc_his_val_num p_color_3" v-if="doctorBdInfo.CollectCount >= 10">{{ doctorBdInfo.CollectCount }}</text>
              <text class="doc_his_val_num p_color_3" v-else>{{ '<' }}10</text>粉丝量
            </view>
          </view>
        </view>

        <view class="consulting_con">
          <view class="consulting_detail p_format">
            <view class="consulting_option_list p_flexBetween">
              <view
                class="consulting_option p_flexCenterCol"
                :class="{ 'consulting_option_ac': selectedType == 'twzx' }"
                @click="setVal('selectedType', 'twzx')"
              >
                <image class="doctor_selected" :src="iconUrl.doctor_selected" v-if="selectedType == 'twzx'"></image>
                <image class="consulting_option_img" :src="doctorInfo.DoctorServiceCons == '1' ? iconUrl.doctor_twzx_ac : iconUrl.doctor_twzx"></image>
                <view class="consulting_option_tit">图文咨询</view>
                <view class="consulting_option_subtit p_color_6">￥{{ doctorInfo.consultFeeDiy }}/次</view>
              </view>
              <view
                class="consulting_option p_flexCenterCol"
                :class="{ 'consulting_option_ac': selectedType == 'spzx' }"
                @click="setVal('selectedType', 'spzx')"
              >
                <image class="doctor_selected" :src="iconUrl.doctor_selected_spzx" v-if="selectedType == 'spzx'"></image>
                <image class="consulting_option_img" :src="doctorInfo.DoctorVideocons == '1' ? iconUrl.doctor_spzx_ac : iconUrl.doctor_spzx"></image>
                <view class="consulting_option_tit">视频咨询</view>
                <view class="consulting_option_subtit p_color_6">￥{{ doctorInfo.videoFeeDiy }}/次</view>
              </view>
            </view>
            <view v-for="item in typeInfoList" :key="item.key">
              <view v-if="item.key == selectedType">
                <view class="consulting_detail_tips">
                  <view class="consulting_detail_tip_tit">{{ item.tip.title }}</view>
                  <view class="consulting_detail_tip_val p_color_6" v-for="(tip, idx) in item.tip.tipList" :key="idx">
                    {{ tip }}
                  </view>
                </view>
                <view class="consulting_detail_tip">
                  <view class="consulting_detail_tip_tit">{{ item.pic.title }}</view>
                  <view class="consulting_detail_imgtip p_flexBetween">
                    <view class="consulting_detail_imgtip_inner p_flexBetween" v-for="(pic, picIdx) in item.pic.picList" :key="picIdx">
                      <image class="consulting_detail_right" :src="iconUrl.home_right" v-if="picIdx != 0"></image>
                      <view class="consulting_detail_imgtip_item p_flexCenterCol">
                        <image class="consulting_detail_img" :src="pic.icon"></image>
                        <view class="consulting_detail_val p_color_6">{{ pic.text }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="consulting_comment p_format" v-if="doctorInfo.AppraiseRule && doctorInfo.AppraiseRule.TYPE_1.isCheck == '1'">
            <view class="consulting_detail_tip_tit p_flexCenter">
              患者评价
            </view>
            <!-- 评价统计标签 -->
            <view class="statistics_item_outer" v-if="evaluateList.length > 0">
              <view class="statistics_item_box" v-for="(item, index) in evaluateList" :key="index">
                <view class="p_flexStart">
                  <image class="statistics_item_icon" :src="item.DictRemark" mode="scaleToFill"></image>
                  <view class="statistics_item_text">
                    <text class="color333" v-for="(txt, idx) in item.evalua" :key="idx">{{ txt }}</text>
                  </view>
                </view>
                <text class="p_color_FB9630">x{{ item.Num }}次</text>
              </view>
            </view>
            <!-- 评价列表 -->
            <view class="consulting_comment_list" v-if="!showNoData">
              <view class="consulting_comment_item p_format p_border_bottom" v-for="(item, index) in list" :key="index">
                <view class="consulting_comment_user p_flexBetween">
                  <view class="p_flexStart">
                    <image class="consulting_comment_user_phtot" src="https://weixin.fyyy.com/cdn/st1/darkGreen/static/images/icon/small_patient_icon.png"></image>
                    <view class="consulting_comment_user_name p_color_6">评价人：{{ item.Remark ? item.Remark.memberName : '' }}</view>
                  </view>
                  <text class="consulting_comment_user_time p_color_6">评价时间：{{ item.AppraiseDate }}</text>
                </view>
                <view class="consulting_comment_val">{{ item.Content != '' ? item.Content : item.DictName }}</view>
              </view>
              <view class="p_load_more p_color_9">{{ stopReachBottom ? '已加载全部' : '上拉加载更多' }}</view>
            </view>
            <noData v-else :value="noDataValue"></noData>
          </view>
        </view>

        <view class="p_btn_con">
          <view class="p_btn p_flexCenter p_bgcolor" @click="toSupplement">
            提交咨询({{ selectedType == 'twzx' ? doctorInfo.consultFeeDiy : selectedType == 'dhzx' ? doctorInfo.phoneFeeDiy : selectedType == 'spzx' ? doctorInfo.videoFeeDiy : 0 }}元)
          </view>
        </view>
      </view>

      <!-- 电子名片 -->
      <view class="p_mask p_flexCenter mask_bottom" v-if="showDocDetial" @click="codeClick">
        <view class="p_dialog" @click.stop="doNothing">
          <image class="doctor_picback1" :src="iconUrl.doctor_picback1"></image>
          <image class="doctor_picback2" :src="iconUrl.doctor_picback2"></image>
          <view class="p_dialog_tit p_flexCenter">
            <view class="p_dialog_tit_val">电子名片</view>
            <image class="p_dialog_cha" :src="iconUrl.doctor_cha" @click.stop="codeClick"></image>
          </view>
          <view class="p_dialog_inner p_format p_scroll dialog_inner_bottom">
            <view class="doc_detial_pic">
              <image class="doc_detial_pic_img" :src="iconUrl.doctor_picback"></image>
              <view class="doc_detial_pic_inner p_flexBetween">
                <view class="pic_con p_format">
                  <view class="pic_tit">
                    {{ hosName }}
                    <view class="pic_tit_line p_bgcolor"></view>
                  </view>
                  <view class="pic_name">{{ doctorInfo.DoctorName }}</view>
                  <view class="pic_subtit p_color_6">{{ doctorInfo.DeptName }} {{ doctorInfo.TitleName }}</view>
                </view>
                <view class="pic_img_con">
                  <image class="doc_imgback" :src="iconUrl.doctor_docback"></image>
                  <image class="doc_img" :src="doctorInfo.DoctorPhotourl"></image>
                </view>
              </view>
            </view>

            <view class="doc_detail_code_con p_flexCenter">
              <image class="doc_detail_code" :src="codeInfo.Url"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useOnLoad } from '@/hook'
import icon from '@/utils/icon'
import { REQUEST_CONFIG } from '@/config';
import { common } from '@/uni-app-base/utils';
import {
  queryConsultDoctorList,
  QueryBDoctorInfo,
  queryAppraiseList as queryAppraiseListApi,
  getUserCollectByDoctorUid as getUserCollectByDoctorUidApi,
  userCollect,
  unUserCollect,
  queryQrCode,
  addOrUpdateConsultDoctorReport,
  countConsultAppraise,
  queryConsultAppraiseList
} from '@/pagesNetHos/st1/service/doctor'
import { useGetMember } from '@/hook'
import { doctorListHandle } from '/pagesNetHos/st1/static/js/pagesNetHosFn';
import noData from '@/pages/st1/components/noData/noData.vue';

// 获取全局应用实例
const app = getApp()
const { proxy } = getCurrentInstance()

// 图片icon
const iconUrl = ref(icon);
const baseUrl = ref(`${REQUEST_CONFIG.BASE_URL}`);
// 页面状态
const showCon = ref(false)
const like = ref(false)
const showDocDetial = ref(false)
const queryBean = reactive<any>({})
const showAllInfo = ref(false)
const list = ref<any[]>([])
const pIndex = ref(0)
const selectedType = ref('twzx')
const serviceType = ref('')
const showNoData = ref(false)
const noDataValue = ref('暂无评价')
const doctorInfo = reactive<any>({})
const doctorBdInfo = reactive<any>({})
const stopReachBottom = ref(false)
const evaluateList = ref<any[]>([])
const queryData = reactive({
  PassiveUid: '',
  StarType: 0,
  Page: {
    PSize: 10,
    PIndex: 0
  }
})
const codeInfo = reactive<any>({})
const statusBarHeight = ref(20)
const pageTitle = ref('医生主页')
const hosName = ref('')

// 咨询方式详情
const typeInfoList = ref([
  {
    key: 'twzx',
    tip: {
      title: '图文咨询',
      tipList: [
        '与医生本人在线图文交流,一一对应充分沟通;',
        '医生给出明确建议,如用药指导、康复方法等;',
        '医生接受申请后的24小时内，图文对话上限为10次;'
      ]
    },
    pic: {
      title: '图文咨询服务流程',
      picList: [
        { icon: icon.doctor_ghzf, text: '挂号支付' },
        { icon: icon.doctor_bqms, text: '病情描述' },
        { icon: icon.doctor_yshf, text: '医生回复' },
        { icon: icon.doctor_wzjs, text: '问诊结束' }
      ]
    }
  },
  {
    key: 'spzx',
    tip: {
      title: '视频咨询',
      tipList: [
        '通过视频交流,高效直接更清楚;',
        '与医生本人在线视频交流,一一对应充分沟通;',
        '医生给出明确建议，如用药指导、康复方法等;',
        '视频咨询需预约医生号源,并提前20分钟签到候诊;'
      ]
    },
    pic: {
      title: '视频咨询服务流程',
      picList: [
        { icon: icon.doctor_ghzf, text: '挂号支付' },
        { icon: icon.doctor_bqms, text: '病情描述' },
        { icon: icon.doctor_yshz, text: '医生候诊' },
        { icon: icon.doctor_yshj, text: '医生呼叫' },
        { icon: icon.doctor_wzjs, text: '问诊结束' }
      ]
    }
  }
])

// 页面加载
useOnLoad((options: any) => {
  if (options.queryBean) {
    Object.assign(queryBean, common.parse(options.queryBean))
  }
  if (options.serviceType) {
    serviceType.value = options.serviceType
  }

  // 获取用户信息
  const memberInfo = useGetMember()
  hosName.value = memberInfo.hospitalInfo?.HospitalAlias || ''

  queryData.PassiveUid = queryBean.DoctorUid
  statusBarHeight.value = (app as any).globalData.statusBarHeight || 20

  main()
})

// 主逻辑
async function main() {
  let selectedTypeVal = ''

  common.showLoading()
  await queryBDoctorInfo()
  await getUserCollectByDoctorUid()

  let { resp: consultList } = await queryConsultDoctorList({
    DoctorUid: queryBean.DoctorUid,
    DeptId: queryBean.DeptId
  })

  await AddOrUpdateConsultDoctorReport()
  common.hideLoading()

  if (!common.isEmpty(consultList)) {
    const handledDoctorInfo = doctorListHandle(consultList)[0]
    Object.assign(doctorInfo, handledDoctorInfo)

    if (handledDoctorInfo.DoctorServiceCons == '1') {
      selectedTypeVal = 'twzx'
    } else if (handledDoctorInfo.DoctorServiceTelcons == '1') {
      selectedTypeVal = 'dhzx'
    } else if (handledDoctorInfo.DoctorVideocons == '1') {
      selectedTypeVal = 'spzx'
    }
  }

  showCon.value = true
  selectedType.value = selectedTypeVal
  // 调用统计评价API
  await CountConsultAppraise()
  // 调用查询评价列表API
  await queryAppraiseList()
}

// 查询医生信息
async function queryBDoctorInfo() {
  let data = {
    DoctorId: '',
    DeptCode: queryBean.DeptCode || '',
    DeptId: queryBean.DeptId || '',
    DoctorCode: queryBean.DoctorCode,
    DoctorUid: queryBean.DoctorUid,
  }

  let { resp } = await QueryBDoctorInfo(data)
  if (!common.isEmpty(resp)) {
    Object.assign(doctorBdInfo, resp[0])
  }
}

// 查询评价列表
async function queryAppraiseList(reachBottom = false) {
  if (!reachBottom) {
    queryData.Page.PIndex = 1
  }

  let { resp } = await queryConsultAppraiseList(queryData)
  console.log(resp, 'queryConsultAppraiseList resp')

  // 处理评价数据
  if (!common.isEmpty(resp)) {
    const baseUrlVal = baseUrl.value || ''
    let url = baseUrlVal
    if (url.indexOf('KasiteWeb') > -1) {
      url = url.split('KasiteWeb/')[0]
    }

    resp.forEach((item: any) => {
      item.DictRemark = url + item.DictRemark
      item.DictName = item.DictName ? (item.DictName.substring(0, 4) + '-' + item.DictName.substring(4)) : ''
      item.evalua = item.DictName ? item.DictName.split('-') : []
      if (item.Remark) {
        try {
          item.Remark = JSON.parse(item.Remark)
          // 脱敏处理
          item.Remark.memberName = item.Remark.memberName ? item.Remark.memberName.substring(0, 1) + '**' : ''
        } catch (e) {
          item.Remark = { memberName: '' }
        }
      }
    })
  }

  console.log(resp, 'queryAppraiseListApiresp2')
  const stopReach = (resp || []).length < queryData.Page.PSize

  if (!common.isEmpty(resp)) {
    if (reachBottom) {
      list.value.push(...resp)
    } else {
      list.value = resp
    }
  } else {
    if (!reachBottom) {
      list.value = []
    }
  }
  console.log(list.value, 'list.value')
  showNoData.value = list.value.length > 0 ? false : true
  stopReachBottom.value = stopReach
}

// 统计咨询评价
async function CountConsultAppraise() {
  let data = {
    DoctorUid: queryBean.DoctorUid
  }

  let { resp } = await countConsultAppraise(data)
  if (common.isNotEmpty(resp)) {
    const baseUrlVal = baseUrl.value || ''
    let url = baseUrlVal
    if (url.indexOf('KasiteWeb') > -1) {
      url = url.split('KasiteWeb/')[0]
    }

    resp.forEach((item: any) => {
      item.DictRemark = url + item.DictRemark
      item.DictName = item.DictName ? (item.DictName.substring(0, 4) + '-' + item.DictName.substring(4)) : ''
      item.evalua = item.DictName ? item.DictName.split('-') : []
    })

    evaluateList.value = resp
  }
}

// 获取用户是否关注
async function getUserCollectByDoctorUid() {
  let data = {
    resourceId: queryBean.DoctorUid,
    resourceType: 1
  }

  let { resp } = await getUserCollectByDoctorUidApi(data)
  like.value = !common.isEmpty(resp)
}

// 关注/取消关注
async function likeFn() {
  let data = {
    resourceId: queryBean.DoctorUid,
    resourceType: 1
  }

  common.showLoading()

  if (like.value) {
    // 取消关注
    let { resData } = await unUserCollect(data)
    if (resData?.RespCode == '10000') {
      await getUserCollectByDoctorUid()
    }
  } else {
    // 关注
    let { resData } = await userCollect(data)
    if (resData?.RespCode == '10000') {
      await getUserCollectByDoctorUid()
    }
  }

  await queryBDoctorInfo()
  common.hideLoading()
}

// 前往病情补充
async function toSupplement() {
  if (!selectedType.value) {
    common.showToast('当前医生未开通咨询')
    return
  }

  let queryStr = common.stringify(doctorInfo)
  let url = `/pagesNetHos/st1/business/doctor/supplement/supplement?queryBean=${queryStr}&selectedType=${selectedType.value}&serviceType=${serviceType.value}`

  // #ifdef H5
  window.location.href = url
  // #endif
  // #ifndef H5
  uni.navigateTo({ url })
  // #endif
}

// 展示所有医生信息
function showAllFn() {
  showAllInfo.value = !showAllInfo.value
}

// 设置选中值
function setVal(key: string, value: string) {
  if (doctorInfo.DoctorServiceCons != '1' && value == 'twzx') {
    common.showToast('图文咨询暂未开通')
    return
  }
  if (doctorInfo.DoctorServiceTelcons != '1' && value == 'dhzx') {
    common.showToast('电话咨询暂未开通')
    return
  }
  if (doctorInfo.DoctorVideocons != '1' && value == 'spzx') {
    common.showToast('视频咨询暂未开通')
    return
  }

  if (value == 'dhzx') {
    // 电话咨询逻辑（可扩展）
  }

  selectedType.value = value
}

// 医生二维码点击
async function codeClick() {
  let { resp } = await queryQrCode({ SceneStr: queryBean.DoctorUid })

  if (!common.isEmpty(resp)) {
    Object.assign(codeInfo, resp[0])
    // 处理二维码URL（需要根据实际API根地址）
    codeInfo.Url = `${baseUrl.value || ''}api/340/340/createQrCode.do?content=${codeInfo.Url}`
  }

  showDocDetial.value = !showDocDetial.value
}

// 上拉加载
function onReachBottom() {
  if (stopReachBottom.value) {
    return
  }

  queryData.Page.PIndex += 1
  queryAppraiseList(true)
}

// 分享
function onShareAppMessage() {
  let queryStr = common.stringify(queryBean)
  let url = encodeURIComponent(`/pages/st1/business/doctor/doctorInfo/doctorInfo?queryBean=${queryStr}`)

  return {
    path: `/pages/st1/business/tabbar/transferPage/transferPage?url=${url}`
  }
}

// 返回
function toBack() {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]

  if (typeof (currentPage as any).backFn == 'function') {
    (proxy as any).$emit('backFn')
  } else {
    common.navigateBack(1)
  }
}

// 上报医生报告
async function AddOrUpdateConsultDoctorReport() {
  let data = {
    dataType: '1',
    doctorId: doctorBdInfo.DoctorId
  }
  addOrUpdateConsultDoctorReport(data)
}

// 空操作（用于阻止事件冒泡）
function doNothing() {
  // 空函数，用于catchtap
}

// 生命周期钩子注册
onMounted(() => {
})

// 暴露给父组件
defineExpose({
  backFn: toBack
})
</script>

<style lang="scss">
@import "@/pagesNetHos/st1/static/css/common.scss";
@import "@/pagesNetHos/st1/static/css/dialog.scss";

.page {
  min-height: 100vh;
  background: #F0F1F6;
}

.p_content {
  padding-bottom: 150upx;
}

.doc_con_outer {
  position: relative;
  padding: 30upx 30upx 30upx;
}

.doc_con_back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.doc_con {
  position: relative;
  z-index: 1;
}

.p_doctor_img_con {
  width: 120upx;
  height: 120upx;
  position: relative;
  margin-right: 20upx;
  flex-shrink: 0;
}

.p_doctor_img {
  border-radius: 50%;
}

.p_doctor_state {
  width: 80upx;
  height: 33upx;
  background: linear-gradient(120deg, #31D59E, #13C287);
  border: 2px solid #FFFFFF;
  border-radius: 16upx;
  font-size: 20upx;
  color: #FFFFFF;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.doc_his_con {
  width: 100%;
}

.doc_name {
  font-size: 34upx;
  font-weight: 500;
}

.name_tip {
  font-size: 24upx;
  color: #481A00;
  padding: 0 14upx;
  line-height: 34upx;
  margin-left: 10upx;
  background: linear-gradient(90deg, #EDCD94 0%, #E9B677 100%);
  border-radius: 20upx;
  line-height: 34upx;
}

.doc_dept {
  font-size: 26upx;
  margin-top: 7upx;
}

.doc_tip_list {
  justify-content: flex-start;
  margin-top: 13upx;
}

.doc_tip_item {
  padding: 0 12upx;
  height: 36upx;
  line-height: 36upx;
  margin-right: 10upx;
  background: #B8BCC3;
  border-radius: 6upx;
  font-size: 22upx;
  color: #fff;
}

.doc_his_val {
  justify-content: space-around;
  margin-top: 30upx;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  font-size: 24upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(98, 98, 109, 0.6);
  line-height: 48upx;
}

.doc_his_val_num {
  font-size: 36upx;
  font-family: JDZhengHT-EN;
  font-weight: bold;
  color: #222326;
}

.doc_his_val_tip {
  color: rgb(216, 221, 223);
  margin: 0 20upx;
}

.doc_his_btn_list {
  position: absolute;
  right: 0;
  top: 40upx;
}

.doc_his_btn {
  width: 54upx;
  height: 54upx;
  background: linear-gradient(120deg, #FFB363, #FF9D35);
  margin-right: 20upx;
  border-radius: 50%;
}

.doc_his_code_img {
  width: 54upx;
  height: 48upx;
  margin-left: 11upx;
}

.doc_his_btn_img {
  width: 32upx;
  height: 32upx;
}

.doc_his_btn_like {
  padding: 0 18upx;
  height: 54upx;
  background: linear-gradient(120deg, #FFB363, #FF9D35);
  border-radius: 27upx;
  font-size: 26upx;
  font-weight: 500;
  color: #fff;
}

.doc_his_btn_val {
  margin-left: 8upx;
}

.doc_his_btn_liked {
  background: #fff;
  color: #FF9D35;
}

.doc_info {
  margin: 18upx 0 10upx;
}

.doc_info_item {
  margin-top: 8upx;
  position: relative;
}

.doc_info_img {
  width: 107upx;
  height: 25upx;
  margin-top: 5upx;
  position: absolute;
}

.doc_info_val {
  font-size: 26upx;
  font-family: PingFang SC;
  color: #62626D;
  line-height: 36upx;
  text-indent: 127upx;
  position: relative;
}

.show_more {
  font-size: 26upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #0CC081;
  line-height: 40upx;
  text-align: right;
  float: right;
}

.doc_tip {
  display: block;
  width: 90upx;
  height: 36upx;
  margin: 10upx auto 0;
}

.doc_tip_top {
  transform: rotateZ(180deg);
}

.consulting_con {
  box-shadow: 0px 2upx 40upx 0px rgba(43, 46, 55, 0.04);
  position: relative;
  width: 690upx;
  margin-left: 30upx;
  margin-bottom: 30upx;
}

.consulting_detail {
  padding: 40upx 30upx 0;
  border-radius: 24upx;
  background-color: #fff;
}

.consulting_comment {
  margin: 30upx 0 220upx;
  border-radius: 24upx;
  background-color: #fff;
}

.consulting_option {
  width: 303upx;
  height: 210upx;
  background: #fff;
  box-shadow: 0px 2upx 40upx 0px rgba(43, 46, 55, 0.1);
  border-radius: 16upx;
  position: relative;
}

.consulting_option_ac {
  background: #F5FFFA;
  border: 1px solid #0CC181;
  box-shadow: 0px 2upx 40upx 0px rgba(43, 46, 55, 0.1);
}

.consulting_option_img {
  width: 80upx;
  height: 80upx;
  margin-bottom: 20upx;
}

.doctor_selected {
  position: absolute;
  width: 52upx;
  height: 52upx;
  bottom: 0;
  right: 0;
}

.consulting_option_tit {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #222326;
  line-height: 36upx;
}

.consulting_option_subtit {
  font-size: 24upx;
  font-family: PingFang SC;
  color: #8A8A99;
  line-height: 36upx;
  margin-top: 7upx;
}

.consulting_detail_tip_tit {
  font-size: 34upx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #222326;
  line-height: 36upx;
  padding: 0 30upx;
}

.consulting_detail .consulting_detail_tip_tit {
  padding-left: 0;
}

.consulting_detail_imgtip_inner {
  width: 100%;
  justify-content: space-around;
}

.consulting_detail_tip_val {
  font-size: 28upx;
  font-family: PingFang SC;
  color: #43434A;
  line-height: 44upx;
  margin: 5upx 0;
  position: relative;
  padding-left: 35upx;
}

.consulting_detail_tip_val::after {
  position: absolute;
  display: block;
  content: "";
  width: 12upx;
  height: 12upx;
  background-color: #02C28A;
  border-radius: 50%;
  left: 7upx;
  top: 14upx;
}

.consulting_detail_imgtip_item {
  margin-bottom: 40upx;
}

.consulting_detail_img {
  width: 48upx;
  height: 48upx;
}

.consulting_detail_val {
  font-size: 26upx;
  margin-top: 13upx;
}

.consulting_detail_right {
  width: 19upx;
  height: 19upx;
  margin-top: -48upx;
}

.consulting_detail_tip_tit {
  justify-content: flex-start;
  padding: 40upx 30upx 28upx;
}

.consulting_detail_tip_img {
  width: 48upx;
  height: 48upx;
  margin-right: 19upx;
}

.consulting_comment_item {
  margin-top: 25upx;
  padding: 0 30upx;
}

.consulting_comment_item:nth-last-child(1)::before {
  border-bottom: 0;
}

.consulting_comment_user_name {
  font-size: 28upx;
  font-family: PingFang SC;
  color: #8A8A99;
}

.consulting_comment_star_img {
  width: 24upx;
  height: 24upx;
  margin-right: 9upx;
}

.consulting_comment_star_img:nth-last-child(1) {
  margin-right: 0;
}

.consulting_comment_val {
  font-size: 30upx;
  margin: 20upx 0 12upx;
}

/* 评价统计标签容器 */
.statistics_item_outer {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16upx;
}

/* 评价统计标签 */
.statistics_item_box {
  padding: 20upx;
  box-sizing: border-box;
  background: #FDF6EB;
  border-radius: 12upx;
  margin: 16upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 40%;
  flex: 1 1 auto;
}

.statistics_item_box text {
  font-size: 28upx;
  white-space: nowrap;
}

.statistics_item_icon {
  width: 66upx;
  height: 66upx;
  margin-right: 16upx;
  flex-shrink: 0;
}

.statistics_item_text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.statistics_item_text text {
  margin-right: 8upx;
}

.statistics_item_text text:last-child {
  margin-right: 0;
}

.consulting_comment_user_phtot {
  width: 36upx;
  height: 36upx;
  margin-right: 15upx;
}

.consulting_comment_user_time {
  font-size: 26upx;
}

.color333 {
  color: #333;
}

.consulting_comment_tips {
  justify-content: flex-start;
  margin: 13upx 0 32upx;
}

.consulting_comment_tip_item {
  height: 40upx;
  line-height: 40upx;
  text-align: center;
  font-size: 22upx;
  padding: 0 12upx;
  margin-right: 10upx;
  background: #F6F7F8;
  border-radius: 6px;
}

.consulting_comment_tip_item:nth-last-child(1) {
  margin-right: 0;
}

/* 电子名片 */
.mask_bottom {
  align-items: flex-end;
}

.p_dialog {
  position: relative;
}

.dialog_inner_bottom {
  max-height: inherit;
  padding: 0 30upx;
}

.doctor_picback1 {
  width: 135upx;
  height: 420upx;
  position: absolute;
  left: 0;
  top: 64upx;
}

.doctor_picback2 {
  width: 208upx;
  height: 517upx;
  position: absolute;
  top: 306upx;
  right: 0;
}

.doc_detial_pic {
  position: relative;
  width: 100%;
  height: 347upx;
  border-radius: 30upxp;
  overflow: hidden;
  padding: 0 50upx;
}

.doc_detial_pic_img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 24upx;
}

.doc_detial_pic_inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.pic_con {
  width: 100%;
}

.pic_tit {
  font-size: 34upx;
  font-weight: 500;
  position: relative;
}

.pic_tit_line {
  width: 57upx;
  height: 3upx;
  position: absolute;
  left: 0;
  bottom: -12upx;
}

.pic_name {
  font-size: 44upx;
  font-weight: 500;
  margin: 46upx 0 15upx;
}

.pic_subtit {
  font-size: 28upx;
  margin-bottom: 50upx;
}

.pic_img_con {
  flex-shrink: 0;
  width: 210upx;
  height: 210upx;
  position: relative;
}

.doc_imgback {
  width: 100%;
  height: 100%;
}

.doc_img {
  position: absolute;
  width: 143upx;
  height: 143upx;
  left: 28upx;
  top: 41upx;
  border-radius: 50%;
}

.doc_detail_code_con {
  width: 320upx;
  height: 320upx;
  background: #FFFFFF;
  border-radius: 20upx;
  box-shadow: 0 0 30upx 0 #eee;
  margin: 48upx 0 41upx;
}

.doc_detail_inp_con {
  height: 90px;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-radius: 12upx;
  height: 90upx;
  line-height: 90upx;
  padding: 0 32upx;
  font-size: 26upx;
  margin-bottom: 10upx;
}

/* 暂无评价 */
.nodata_con {
  padding: 100upx 0 !important;
}

.dialog_inner {
  width: 650upx;
  background-color: #fff;
  border-radius: 16upx;
  padding: 30upx;
}

.dialog_tit {
  font-size: 32upx;
  font-weight: 500;
  color: #000000;
  padding-bottom: 20upx;
}

.dialog_cha {
  width: 24upx;
  height: 24upx;
}

.dialog_row {
  padding: 30upx 0;
}

.row_tit {
  font-size: 28upx;
  font-weight: 400;
  color: #000000;
  line-height: 40upx;
}

.row_subtit {
  font-size: 24upx;
  font-weight: 400;
  color: #666666;
  line-height: 34upx;
}

.dialog_tip {
  font-size: 28upx;
  color: #68BB8D;
}

.dialog_suc {
  width: 28upx;
  height: 28upx;
  margin-right: 12upx;
}

.tabbar {
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #222;
  box-sizing: content-box;
  font-size: 32upx;
  font-weight: 500;
  background: #F0F1F6;
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  overflow: hidden;
}

.iconCon {
  width: 87upx;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 1;
}

.iconLeft {
  width: 12px;
  height: 12px;
  border-top: 2px solid;
  border-left: 2px solid;
  color: #222;
  transform: rotateZ(-45deg);
  position: absolute;
  top: 2px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
</style>