cp 3 months ago
parent 6bfb1d1688
commit 8f366325c1

@ -1,29 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- 设置字符编码为 UTF-8确保页面能正确显示各种字符 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 设置页面在移动设备上的显示效果,宽度为设备宽度,初始缩放比例为 1最大缩放比例为 1 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置页面标题为医生详情页 -->
<title>医生详情页</title> <title>医生详情页</title>
<!-- 引入 layui 的 CSS 样式文件 -->
<link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 --> <!-- 引入自定义样式文件 -->
<link rel="stylesheet" href="../../css/style.css"/> <link rel="stylesheet" href="../../css/style.css"/>
<!-- 主题(主要颜色设置) --> <!-- 引入主题样式文件,用于设置主要颜色 -->
<link rel="stylesheet" href="../../css/theme.css"/> <link rel="stylesheet" href="../../css/theme.css"/>
<!-- 通用的css --> <!-- 引入通用的 CSS 文件 -->
<link rel="stylesheet" href="../../css/common.css"/> <link rel="stylesheet" href="../../css/common.css"/>
<!-- 引入 Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css"> <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
</head> </head>
<style> <style>
/*padding-bottom 属性设置元素的下内边距(底部空白)*/ /* 定义一个类,设置元素的底部内边距为 50px */
.pb-120 { .pb-120 {
padding-bottom: 50px; padding-bottom: 50px;
} }
/*padding-top 属性设置元素的上内边距(头部空白)*/ /* 定义一个类,设置元素的顶部内边距为 20px */
.pt-120 { .pt-120 {
padding-top: 20px; padding-top: 20px;
} }
/* 手风琴样式相关设置,设置加号图标旋转效果 */
.cmn-accordion .card-header .acc-btn .plus-icon::after { .cmn-accordion .card-header .acc-btn .plus-icon::after {
position: absolute; position: absolute;
content: ''; content: '';
@ -40,20 +46,24 @@
transition: all 0.3s; transition: all 0.3s;
} }
/* 设置手风琴卡片内容区域的内边距为 0 */
.cmn-accordion .card-body { .cmn-accordion .card-body {
padding: 0; padding: 0;
} }
/* 设置块引用元素的左右内边距为 50px */
blockquote { blockquote {
padding: 0 50px; padding: 0 50px;
} }
/* 当屏幕宽度小于等于 767px 时,设置块引用元素的左右内边距为 30px */
@media (max-width: 767px) { @media (max-width: 767px) {
blockquote { blockquote {
padding: 0 30px; padding: 0 30px;
} }
} }
/* 设置块引用内段落的字体样式和对齐方式 */
blockquote p { blockquote p {
font-size: 24px; font-size: 24px;
font-style: italic; font-style: italic;
@ -61,13 +71,14 @@
font-family: "Playfair Display", serif; font-family: "Playfair Display", serif;
} }
/* 当屏幕宽度小于等于 767px 时,设置块引用内段落的字体大小为 20px */
@media (max-width: 767px) { @media (max-width: 767px) {
blockquote p { blockquote p {
font-size: 20px; font-size: 20px;
} }
} }
/* 评论样式 和文本框样式 */ /* 评论样式和文本框样式设置 */
body { body {
font-family: "Raleway", sans-serif; font-family: "Raleway", sans-serif;
font-size: 16px; font-size: 16px;
@ -78,21 +89,25 @@
overflow-x: hidden; overflow-x: hidden;
} }
/* 设置图片的最大宽度为 100%,高度自适应 */
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
/* 设置无序列表和有序列表的内边距和外边距为 0去除列表样式 */
ul, ol { ul, ol {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
} }
/* 设置按钮无边框 */
button { button {
border: none; border: none;
} }
/* 设置输入框和文本框的样式 */
input, textarea { input, textarea {
padding: 10px 20px; padding: 10px 20px;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
@ -100,13 +115,13 @@
background-color: #ffffff; background-color: #ffffff;
} }
/* 设置文本框的最小高度为 150px禁止用户调整大小 */
textarea { textarea {
min-height: 150px; min-height: 150px;
resize: none; resize: none;
} }
/* 标题下面的蓝色字体 删除就会换行 */ /* 标题下面的蓝色字体样式,设置为弹性布局,允许换行 */
.post-meta { .post-meta {
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -116,34 +131,41 @@
margin-top: 5px; margin-top: 5px;
} }
/* 设置文章元数据列表项的外边距 */
.post-meta li { .post-meta li {
margin: 3px 8px; margin: 3px 8px;
} }
/* 设置文章元数据列表项内链接的字体大小 */
.post-meta li a { .post-meta li a {
font-size: 12px; font-size: 12px;
} }
/* 设置博客详情经典布局内容区域的顶部外边距 */
.blog-single-classic .content { .blog-single-classic .content {
margin-top: 25px; margin-top: 25px;
} }
/* 博客详情部分 css start */ /* 博客详情部分 CSS 开始 */
/* 设置博客详情头部的顶部外边距、底部内边距和底部边框 */
.blog-details-wrapper .blog-details-header { .blog-details-wrapper .blog-details-header {
margin-top: 25px; margin-top: 25px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
/* 设置评论区域的顶部外边距 */
.comments-area { .comments-area {
margin-top: 50px; margin-top: 50px;
} }
/* 设置评论区域标题的样式 */
.comments-area .title { .comments-area .title {
text-transform: capitalize; text-transform: capitalize;
margin-bottom: 30px; margin-bottom: 30px;
} }
/* 设置评论列表中单个评论的样式,弹性布局,允许换行 */
.comments-list .single-comment { .comments-list .single-comment {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -151,15 +173,18 @@
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
/* 设置评论列表中第一个评论的顶部内边距为 0 */
.comments-list .single-comment:first-child { .comments-list .single-comment:first-child {
padding-top: 0; padding-top: 0;
} }
/* 设置评论列表中最后一个评论的底部内边距为 0去除底部边框 */
.comments-list .single-comment:last-child { .comments-list .single-comment:last-child {
padding-bottom: 0; padding-bottom: 0;
border-bottom: none; border-bottom: none;
} }
/* 设置评论中用户头像区域的样式 */
.comments-list .single-comment .thumb { .comments-list .single-comment .thumb {
flex: 0 0 80px; flex: 0 0 80px;
-ms-flex: 0 0 80px; -ms-flex: 0 0 80px;
@ -173,6 +198,7 @@
overflow: hidden; overflow: hidden;
} }
/* 设置评论内容区域的样式 */
.comments-list .single-comment .content { .comments-list .single-comment .content {
flex: 0 0 calc(100% - 80px); flex: 0 0 calc(100% - 80px);
-ms-flex: 0 0 calc(100% - 80px); -ms-flex: 0 0 calc(100% - 80px);
@ -180,34 +206,42 @@
padding-left: 20px; padding-left: 20px;
} }
/* 设置评论日期的字体大小 */
.comments-list .single-comment .content .date { .comments-list .single-comment .content .date {
font-size: 14px; font-size: 14px;
} }
/* 设置评论内容段落的顶部外边距 */
.comments-list .single-comment .content p { .comments-list .single-comment .content p {
margin-top: 5px; margin-top: 5px;
} }
/* 设置评论操作区域的顶部外边距 */
.comments-list .single-comment .content .comment-action { .comments-list .single-comment .content .comment-action {
margin-top: 3px; margin-top: 3px;
} }
/* 设置评论表单区域的顶部外边距 */
.comment-form-area { .comment-form-area {
margin-top: 50px; margin-top: 50px;
} }
/* 设置评论表单标题的底部外边距 */
.comment-form-area .title { .comment-form-area .title {
margin-bottom: 30px; margin-bottom: 30px;
} }
/* 设置评论表单中表单组的底部外边距 */
.comment-form-area .comment-form .form-group { .comment-form-area .comment-form .form-group {
margin-bottom: 30px; margin-bottom: 30px;
} }
/* 设置侧边栏中相邻小部件之间的顶部外边距 */
.sidebar .widget + .widget { .sidebar .widget + .widget {
margin-top: 50px; margin-top: 50px;
} }
/* 设置侧边栏小部件标题的样式 */
.sidebar .widget-title { .sidebar .widget-title {
font-size: 24px; font-size: 24px;
text-transform: capitalize; text-transform: capitalize;
@ -216,6 +250,7 @@
padding-left: 15px; padding-left: 15px;
} }
/* 设置侧边栏小部件标题前的竖线样式 */
.sidebar .widget-title::before { .sidebar .widget-title::before {
position: absolute; position: absolute;
content: ''; content: '';
@ -226,16 +261,18 @@
background-color: var(--publicMainColor); background-color: var(--publicMainColor);
} }
/* 设置侧边栏分类列表项的样式 */
.sidebar .category-list li { .sidebar .category-list li {
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
/*位置为 Latest Blog Post 意思 最新博客 样式*/ /* 最新博客文章样式,设置第一个小文章的顶部内边距为 0 */
.small-post-list .small-post-single:first-child { .small-post-list .small-post-single:first-child {
padding-top: 0; padding-top: 0;
} }
/* 设置小文章列表项的样式,弹性布局,允许换行 */
.small-post-list .small-post-single { .small-post-list .small-post-single {
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -245,13 +282,15 @@
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
/* 设置小文章内容区域的宽度和左内边距 */
.small-post-list .small-post-single .content { .small-post-list .small-post-single .content {
width: calc(100% - 65px); width: calc(100% - 65px);
padding-left: 15px; padding-left: 15px;
} }
/* 侧边栏 css end */ /* 侧边栏 CSS 结束 */
/* 设置通用按钮边框样式 */
.cmn-btn-border { .cmn-btn-border {
padding: 13px 35px; padding: 13px 35px;
font-size: 18px; font-size: 18px;
@ -270,16 +309,19 @@
-o-border-radius: 3px; -o-border-radius: 3px;
} }
/* 设置通用按钮边框鼠标悬停时的样式 */
.cmn-btn-border:hover { .cmn-btn-border:hover {
color: #ffffff; color: #ffffff;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
} }
/* 设置通用按钮边框鼠标悬停时伪元素的样式 */
.cmn-btn-border:hover::before { .cmn-btn-border:hover::before {
top: 0; top: 0;
left: 0; left: 0;
} }
/* 设置通用按钮边框伪元素的样式 */
.cmn-btn-border::before { .cmn-btn-border::before {
position: absolute; position: absolute;
content: ''; content: '';
@ -295,6 +337,7 @@
transition: all 0.3s; transition: all 0.3s;
} }
/* 设置通用按钮边框另一个伪元素的样式 */
.cmn-btn-border::after { .cmn-btn-border::after {
position: absolute; position: absolute;
content: ''; content: '';
@ -307,6 +350,7 @@
border: 2px solid #ffffff; border: 2px solid #ffffff;
} }
/* 设置博客详情页底部的样式 */
.blog-details-wrapper .blog-details-footer { .blog-details-wrapper .blog-details-footer {
padding: 20px 20px; padding: 20px 20px;
border: 1px solid #f2f2f2; border: 1px solid #f2f2f2;
@ -316,19 +360,24 @@
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
}</style> }
</style>
<body> <body>
<!-- Vue 实例挂载的根元素 -->
<div id="app"> <div id="app">
<!-- 博客详情部分,设置上下内边距 -->
<section class="blog-details-section pt-120 pb-120"> <section class="blog-details-section pt-120 pb-120">
<!-- 面包屑导航 -->
<div class="sub_backgroundColor data-detail-breadcrumb" style="width: 1110px;" <div class="sub_backgroundColor data-detail-breadcrumb" style="width: 1110px;"
:style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"20px auto","borderColor":"rgba(135, 206, 250, 1)","borderRadius":"4px","borderWidth":"0","borderStyle":"solid","height":"54px"}'> :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"20px auto","borderColor":"rgba(135, 206, 250, 1)","borderRadius":"4px","borderWidth":"0","borderStyle":"solid","height":"54px"}'>
<span class="layui-breadcrumb"> <span class="layui-breadcrumb">
<!-- 首页链接 -->
<a class="first" <a class="first"
:style='{"padding":"8px 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 5px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0)","color":"rgba(14, 14, 14, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}' :style='{"padding":"8px 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 5px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0)","color":"rgba(14, 14, 14, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'
href="../home/home.html"> href="../home/home.html">
首页 首页
</a> </a>
<!-- 当前页面标题 -->
<a> <a>
<cite :style='{"padding":"8px 15px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 15px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0)","color":"rgba(129, 84, 118, 1)","borderRadius":"4px","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'> <cite :style='{"padding":"8px 15px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 15px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0)","color":"rgba(129, 84, 118, 1)","borderRadius":"4px","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
{{title}} {{title}}
@ -336,37 +385,53 @@
</a> </a>
</span> </span>
</div> </div>
<!-- 容器 -->
<div class="container"> <div class="container">
<!-- 行布局 -->
<div class="row"> <div class="row">
<!-- 左侧内容区域,占 8 列 -->
<div class="col-lg-8"> <div class="col-lg-8">
<!-- 博客详情包装器 -->
<div class="blog-details-wrapper"> <div class="blog-details-wrapper">
<!-- 医生图片 -->
<div class="thumb"> <div class="thumb">
<img :src="detail.yishengPhoto" alt="image"> <img :src="detail.yishengPhoto" alt="image">
</div> </div>
<!-- 博客详情头部 -->
<div class="blog-details-header"> <div class="blog-details-header">
<!-- 医生姓名 -->
<h3 class="blog-details-title">{{title}}</h3> <h3 class="blog-details-title">{{title}}</h3>
<!-- 医生信息列表 -->
<ul class="post-meta"> <ul class="post-meta">
<!-- 医生工号 -->
<li v-if="detail.yishengUuidNumber">医生工号: <li v-if="detail.yishengUuidNumber">医生工号:
{{detail.yishengUuidNumber}} {{detail.yishengUuidNumber}}
</li> </li>
<!-- 科室 -->
<li v-if="detail.yishengTypes">科室: <li v-if="detail.yishengTypes">科室:
{{detail.yishengValue}} {{detail.yishengValue}}
</li> </li>
<!-- 职位 -->
<li v-if="detail.zhiweiTypes">职位: <li v-if="detail.zhiweiTypes">职位:
{{detail.zhiweiValue}} {{detail.zhiweiValue}}
</li> </li>
<!-- 职称 -->
<li v-if="detail.yishengZhichneg">职称: <li v-if="detail.yishengZhichneg">职称:
{{detail.yishengZhichneg}} {{detail.yishengZhichneg}}
</li> </li>
<!-- 联系方式 -->
<li v-if="detail.yishengPhone">联系方式: <li v-if="detail.yishengPhone">联系方式:
{{detail.yishengPhone}} {{detail.yishengPhone}}
</li> </li>
<!-- 挂号须知 -->
<li v-if="detail.yishengGuahao">挂号须知: <li v-if="detail.yishengGuahao">挂号须知:
{{detail.yishengGuahao}} {{detail.yishengGuahao}}
</li> </li>
<!-- 邮箱 -->
<li v-if="detail.yishengEmail">邮箱: <li v-if="detail.yishengEmail">邮箱:
{{detail.yishengEmail}} {{detail.yishengEmail}}
</li> </li>
<!-- 挂号价格 -->
<li v-if="detail.yishengNewMoney">挂号价格: <li v-if="detail.yishengNewMoney">挂号价格:
{{detail.yishengNewMoney}} {{detail.yishengNewMoney}}
</li> </li>
@ -377,32 +442,42 @@
</li> </li>
</ul> </ul>
<div style="padding: 20px;border: 0px solid #f2f2f2;margin-top: 20px;display: flex"> <!-- 预约挂号按钮 -->
<div class="num-picker"> <div style="padding: 20px;border: 0px solid #f2f2f2;margin-top: 20px;display: flex">
<button @click="addaaaOrder()" style="height:auto;" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 5px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(23, 124, 176, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}' type="button" class="layui-btn btn-submit"> <div class="num-picker">
预约挂号 <button @click="addaaaOrder()" style="height:auto;" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 5px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(23, 124, 176, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}' type="button" class="layui-btn btn-submit">
</button> 预约挂号
</div> </button>
</div> </div>
</div>
</div> </div>
<!-- 医生详细介绍,使用 v-html 指令渲染 HTML 内容 -->
<div class="blog-details-content" v-html="myFilters(detail.yishengContent)"> <div class="blog-details-content" v-html="myFilters(detail.yishengContent)">
</div> </div>
</div> </div>
</div> </div>
<!-- 右侧侧边栏区域,当 yishengRecommendList 存在时显示 -->
<div class="col-lg-4" v-if="yishengRecommendList"> <div class="col-lg-4" v-if="yishengRecommendList">
<div class="sidebar"> <div class="sidebar">
<!-- 系统推荐小部件 -->
<div class="widget"> <div class="widget">
<!-- 小部件标题 -->
<h3 class="widget-title">系统推荐</h3> <h3 class="widget-title">系统推荐</h3>
<!-- 推荐医生列表 -->
<ul class="small-post-list"> <ul class="small-post-list">
<!-- 循环渲染推荐医生列表项 -->
<li class="small-post-single" v-for="(item,index) in yishengRecommendList" <li class="small-post-single" v-for="(item,index) in yishengRecommendList"
v-bind:key="index" v-bind:key="index"
@click="jump('../yisheng/detail.html?id='+item.id)"> @click="jump('../yisheng/detail.html?id='+item.id)">
<!-- 医生图片 -->
<div class="thumb"><img width="65px" :src="item.yishengPhoto" <div class="thumb"><img width="65px" :src="item.yishengPhoto"
alt="image"> alt="image">
</div> </div>
<!-- 医生信息 -->
<div class="content"> <div class="content">
<!-- 医生姓名 -->
<a class="main_color" class="date">{{item.yishengName}}</a> <a class="main_color" class="date">{{item.yishengName}}</a>
<!-- 挂号价格 -->
<h6 v-if="item.yishengNewMoney" class="post-title"><a <h6 v-if="item.yishengNewMoney" class="post-title"><a
style="color: red">{{item.yishengNewMoney}}</a>RMB</h6> style="color: red">{{item.yishengNewMoney}}</a>RMB</h6>
</div> </div>
@ -416,21 +491,23 @@
</section> </section>
</div> </div>
<!-- 引入 layui 脚本文件 -->
<script src="../../layui/layui.js"></script> <script src="../../layui/layui.js"></script>
<!-- 引入 Vue 脚本文件 -->
<script src="../../js/vue.js"></script> <script src="../../js/vue.js"></script>
<!-- 引入element组件库 --> <!-- 引入 Element 组件库脚本文件 -->
<script src="../../xznstatic/js/element.min.js"></script> <script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 --> <!-- 引入 Element 样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css"> <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 组件配置信息 --> <!-- 引入组件配置信息脚本文件 -->
<script src="../../js/config.js"></script> <script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 --> <!-- 引入扩展插件配置信息脚本文件 -->
<script src="../../modules/config.js"></script> <script src="../../modules/config.js"></script>
<!-- 工具方法 --> <!-- 引入工具方法脚本文件 -->
<script src="../../js/utils.js"></script> <script src="../../js/utils.js"></script>
<script> <script>
// 定义 Vue 原型方法,用于替换换行符为 HTML 换行标签
Vue.prototype.myFilters = function (msg) { Vue.prototype.myFilters = function (msg) {
if (msg != null) { if (msg != null) {
return msg.replace(/\n/g, "<br>"); return msg.replace(/\n/g, "<br>");
@ -438,39 +515,45 @@
return ""; return "";
} }
}; };
// 创建 Vue 实例
var vue = new Vue({ var vue = new Vue({
el: '#app', el: '#app',
data: { data: {
// 轮播图 // 轮播图数据
swiperList: [], swiperList: [],
// 数据详情 // 医生详情数据
detail: { detail: {
id: 0 id: 0
}, },
// 商品标题 // 页面标题
title: '', title: '',
totalScore: 0,//评分 // 评分
totalScore: 0,
storeupFlag: 0,//收藏 [0为收藏 1已收藏] // 收藏标志0 为未收藏1 为已收藏
//系统推荐 storeupFlag: 0,
// 系统推荐医生列表
yishengRecommendList: [], yishengRecommendList: [],
// 当前详情页表 // 当前详情页表
detailTable: 'yisheng', detailTable: 'yisheng',
}, },
methods: { methods: {
// 预约挂号方法,跳转到预约页面
addaaaOrder(){ addaaaOrder(){
this.jump("../guahao/add.html?yishengId="+this.detail.id) this.jump("../guahao/add.html?yishengId="+this.detail.id)
}, },
// 跳转页面方法
jump(url) { jump(url) {
jump(url) jump(url)
}, },
// 权限验证方法
isAuth(tablename, button) { isAuth(tablename, button) {
return isFrontAuth(tablename, button) return isFrontAuth(tablename, button)
}, },
} }
}); });
// 加载 layui 模块
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () { layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
var layer = layui.layer; var layer = layui.layer;
var util = layui.util; var util = layui.util;
@ -481,19 +564,22 @@
var jquery = layui.jquery; var jquery = layui.jquery;
var laypage = layui.laypage; var laypage = layui.laypage;
// 每页显示数量
var limit = 10; var limit = 10;
// 数据ID // 获取 URL 中的医生 ID 参数
var id = http.getParam('id'); var id = http.getParam('id');
vue.detail.id = id; vue.detail.id = id;
// 数据信息
// 请求医生详情信息
http.request(`${vue.detailTable}/detail/` + id, 'get', {}, function (res) { http.request(`${vue.detailTable}/detail/` + id, 'get', {}, function (res) {
// 详情信息 // 更新医生详情数据
vue.detail = res.data; vue.detail = res.data;
// 更新页面标题
vue.title = vue.detail.yishengName; vue.title = vue.detail.yishengName;
// 轮播图片 // 处理轮播图数据
vue.swiperList = vue.detail.yishengPhoto ? vue.detail.yishengPhoto.split(",") : []; vue.swiperList = vue.detail.yishengPhoto ? vue.detail.yishengPhoto.split(",") : [];
// 轮播图 // 渲染轮播图
vue.$nextTick(() => { vue.$nextTick(() => {
carousel.render({ carousel.render({
elem: '#swiper', elem: '#swiper',
@ -506,21 +592,19 @@
indicator: 'inside' indicator: 'inside'
}); });
}); });
}); });
// 请求系统推荐医生列表
// 系统推荐
http.request(`yisheng/list`, 'get', { http.request(`yisheng/list`, 'get', {
page: 1, page: 1,
limit: 5, limit: 5,
yishengTypes: vue.detail.yishengTypes, yishengTypes: vue.detail.yishengTypes,
zhiweiTypes: vue.detail.zhiweiTypes, zhiweiTypes: vue.detail.zhiweiTypes,
}, function (res) { }, function (res) {
// 更新系统推荐医生列表数据
vue.yishengRecommendList = res.data.list; vue.yishengRecommendList = res.data.list;
}); });
}); });
</script> </script>
</body> </body>
</html> </html>
Loading…
Cancel
Save