doctorList.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
  1. <template>
  2. <view>
  3. <view class="top-fixed">
  4. <!-- 搜索框 -->
  5. <view class="search-cont">
  6. <view class="inner">
  7. <image class="icon-search" src="../../static/images/search.png" mode=""></image>
  8. <input type="text" v-model="searchVal" placeholder="输入医生姓名搜索" confirm-type="搜索" @confirm="goSearch" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
  9. </view>
  10. </view>
  11. <!-- tab切换 -->
  12. <view class="pub-tab-box">
  13. <view class="tab-inner">
  14. <view
  15. v-for="(item,index) in depts"
  16. :key="index"
  17. :class="deptId == item.departmentId?'item active':'item'"
  18. @click="changeDept(item)"
  19. >
  20. <view class="text">
  21. {{ item.departmentName }}
  22. <image v-show="deptId == item.departmentId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. <!-- 数据列表 -->
  29. <mescroll-body ref="mescrollRef" top="190rpx" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
  30. <view class="doc-list">
  31. <view class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail(item)">
  32. <!-- 头像 -->
  33. <view class="head-box">
  34. <image :src="item.headImg" mode="aspectFill"></image>
  35. </view>
  36. <!-- 详细信息 -->
  37. <view class="info">
  38. <!-- 姓名等 -->
  39. <view class="top">
  40. <text class="name">{{ item.doctorName }}</text>
  41. <view class="line"></view>
  42. <text class="other">{{utils.getDictLabelName("doctorPosition",item.position)}}</text>
  43. <view class="line"></view>
  44. <text class="other">{{ item.departmentName }}</text>
  45. </view>
  46. <!-- 单位 -->
  47. <view class="unit-box">
  48. <!-- <view class="level">三甲</view> -->
  49. <view class="name">{{ item.hospitalName }}</view>
  50. </view>
  51. <!-- 擅长 -->
  52. <view class="expertise ellipsis2">
  53. 擅长:{{ item.doctorDesc }}
  54. </view>
  55. <!-- 评分 -->
  56. <!-- <view class="rate-box">
  57. <view class="star">
  58. <image src="../../static/images/star.png" mode=""></image>
  59. <text>{{ item.pings }}</text>
  60. </view>
  61. <view class="line"></view>
  62. <view class="num-box">
  63. <text class="label">接诊数</text>
  64. <text class="num">{{ item.orders }}</text>
  65. </view>
  66. <view class="line"></view>
  67. <view class="num-box">
  68. <text class="label">响应速度</text>
  69. <text class="num">{{ item.speed }}分钟</text>
  70. </view>
  71. </view> -->
  72. <!-- 价格 -->
  73. <view class="price-box" v-if="item.price!=null&&item.price.length>0">
  74. <view class="btn-item" v-for="(subitme) in item.price">
  75. <text class="label" >{{subitme.priceType==1?'图文':'语音'}}</text>
  76. <text class="num">¥{{subitme.price.toFixed(2)}}</text>
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. </view>
  82. </mescroll-body>
  83. </view>
  84. </template>
  85. <script>
  86. import {getDepartmentList,getDoctorList} from '@/api/doctorOrder.js'
  87. import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  88. export default {
  89. mixins: [MescrollMixin],
  90. data() {
  91. return {
  92. searchVal:"",
  93. depts:[],
  94. deptId:0,
  95. doctorType:0,
  96. // tab切换
  97. mescroll:null,
  98. // 上拉加载的配置
  99. upOption: {
  100. onScroll:true,
  101. use: true, // 是否启用上拉加载; 默认true
  102. page: {
  103. num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
  104. size: 10 // 每页数据的数量,默认10
  105. },
  106. noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
  107. empty: {
  108. icon:'/static/images/no_data.png',
  109. tip: '暂无数据'
  110. }
  111. },
  112. // 列表数据
  113. dataList: []
  114. };
  115. },
  116. onLoad(option) {
  117. if(option.doctorType!=null){
  118. this.doctorType=option.doctorType
  119. }
  120. this.getDepartmentList();
  121. },
  122. methods: {
  123. getDepartmentList(){
  124. getDepartmentList().then(res => {
  125. if(res.code==200){
  126. var allDept={departmentId:0,departmentName:"全部"}
  127. this.depts.push(allDept);
  128. this.depts=this.depts.concat(res.data);
  129. console.log(this.depts)
  130. }else{
  131. uni.showToast({
  132. icon:'none',
  133. title: "请求失败",
  134. });
  135. }
  136. });
  137. },
  138. // tab切换
  139. changeDept(item) {
  140. this.deptId = item.departmentId;
  141. this.mescroll.resetUpScroll()
  142. },
  143. mescrollInit(mescroll) {
  144. this.mescroll = mescroll;
  145. },
  146. /*下拉刷新的回调 */
  147. downCallback(mescroll) {
  148. mescroll.resetUpScroll()
  149. },
  150. upCallback(page) {
  151. //联网加载数据
  152. var that = this;
  153. var data = {
  154. doctorType:this.doctorType,
  155. departmentId:this.deptId,
  156. doctorName:this.searchVal,
  157. page: page.num,
  158. pageSize: page.size
  159. };
  160. getDoctorList(data).then(res => {
  161. if(res.code==200){
  162. //设置列表数据
  163. if (page.num == 1) {
  164. that.dataList = res.data.list;
  165. } else {
  166. that.dataList = that.dataList.concat(res.data.list);
  167. }
  168. that.mescroll.endBySize(res.data.list.length, res.data.total);
  169. }else{
  170. uni.showToast({
  171. icon:'none',
  172. title: "请求失败",
  173. });
  174. that.dataList = null;
  175. that.mescroll.endErr();
  176. }
  177. });
  178. },
  179. goSearch(){
  180. this.mescroll.resetUpScroll()
  181. },
  182. // 查看医生资料详情
  183. showDetail(item) {
  184. uni.navigateTo({
  185. url: './doctorDetail?doctorId=' + item.doctorId
  186. })
  187. }
  188. }
  189. }
  190. </script>
  191. <style lang="scss">
  192. .top-fixed{
  193. width: 100%;
  194. position: fixed;
  195. top: 0;
  196. left: 0;
  197. z-index: 10;
  198. }
  199. .search-cont{
  200. padding: 16upx 30upx;
  201. background-color: #FFFFFF;
  202. .inner{
  203. box-sizing: border-box;
  204. width: 100%;
  205. height: 72upx;
  206. background: #F7F7F7;
  207. border-radius: 36upx;
  208. display: flex;
  209. align-items: center;
  210. padding: 0 30upx;
  211. .icon-search{
  212. width: 28upx;
  213. height: 28upx;
  214. margin-right: 20upx;
  215. }
  216. input{
  217. flex: 1;
  218. height: 60upx;
  219. line-height: 60upx;
  220. }
  221. }
  222. }
  223. .pub-tab-box{
  224. padding: 0 33upx;
  225. background-color: #FFFFFF;
  226. .tab-inner{
  227. height: 88upx;
  228. line-height: 88upx;
  229. display: flex;
  230. overflow-x: auto;
  231. }
  232. .item{
  233. font-size: 28upx;
  234. white-space: nowrap;
  235. line-height: 1;
  236. font-family: PingFang SC;
  237. font-weight: 500;
  238. color: #666666;
  239. margin-right: 60upx;
  240. display: flex;
  241. align-items: center;
  242. justify-content: center;
  243. &:last-child{
  244. margin-right: 0;
  245. }
  246. &.active{
  247. font-weight: bold;
  248. color: #333333;
  249. }
  250. .text{
  251. position: relative;
  252. z-index: 1;
  253. }
  254. .tab-bg{
  255. width: 72upx;
  256. height: 28upx;
  257. position: absolute;
  258. top: 17upx;
  259. left: 50%;
  260. transform: translateX(-36upx);
  261. z-index: -1;
  262. }
  263. }
  264. }
  265. .top-seat{
  266. width: 100%;
  267. height: 192upx;
  268. }
  269. .doc-list{
  270. padding: 20upx;
  271. .item{
  272. box-sizing: border-box;
  273. // height: 433upx;
  274. background: #FFFFFF;
  275. border: 4upx solid #FFFFFF;
  276. border-radius: 16upx;
  277. padding: 40upx 30upx;
  278. display: flex;
  279. margin-bottom: 20upx;
  280. .head-box{
  281. width: 120upx;
  282. height: 120upx;
  283. background: #EDF1F4;
  284. border-radius: 50%;
  285. overflow: hidden;
  286. margin-right: 30upx;
  287. image{
  288. width: 100%;
  289. height: 100%;
  290. }
  291. }
  292. .info{
  293. width: calc(100% - 150upx);
  294. .top{
  295. display: flex;
  296. align-items: center;
  297. font-family: PingFang SC;
  298. line-height: 1;
  299. .name{
  300. font-size: 34upx;
  301. font-weight: bold;
  302. color: #111111;
  303. }
  304. .line{
  305. width: 1px;
  306. height: 26upx;
  307. background: #DDDDDD;
  308. margin: 0 20upx;
  309. }
  310. .other{
  311. font-size: 28upx;
  312. font-weight: 500;
  313. color: #333333;
  314. }
  315. }
  316. .unit-box{
  317. display: flex;
  318. margin-top: 24upx;
  319. .level{
  320. padding: 0 10upx;
  321. height: 30upx;
  322. line-height: 30upx;
  323. font-size: 22upx;
  324. font-family: PingFang SC;
  325. font-weight: 500;
  326. color: #FFFFFF;
  327. background: #018C39;
  328. border-radius: 10upx 4upx 10upx 4upx;
  329. margin-right: 12upx;
  330. }
  331. .name{
  332. font-size: 28upx;
  333. font-family: PingFang SC;
  334. font-weight: 500;
  335. color: #333333;
  336. line-height: 30upx;
  337. }
  338. }
  339. .expertise{
  340. font-size: 26upx;
  341. font-family: PingFang SC;
  342. font-weight: 500;
  343. color: #666666;
  344. line-height: 42upx;
  345. margin: 22upx 0 0upx;
  346. }
  347. .rate-box{
  348. display: flex;
  349. align-items: center;
  350. .star{
  351. display: flex;
  352. align-items: center;
  353. image{
  354. width: 22upx;
  355. height: 22upx;
  356. margin-right: 10upx;
  357. }
  358. text{
  359. font-size: 26upx;
  360. font-family: PingFang SC;
  361. font-weight: bold;
  362. color: #CEA764;
  363. line-height: 1;
  364. }
  365. }
  366. .line{
  367. width: 1px;
  368. height: 20upx;
  369. background: #DDDDDD;
  370. margin: 0 20upx;
  371. }
  372. .num-box{
  373. display: flex;
  374. align-items: center;
  375. font-family: PingFang SC;
  376. .label{
  377. font-size: 24upx;
  378. font-weight: 500;
  379. color: #999999;
  380. line-height: 1;
  381. margin-right: 7px;
  382. }
  383. .num{
  384. font-size: 26upx;
  385. font-weight: bold;
  386. color: #CEA764;
  387. line-height: 1;
  388. }
  389. }
  390. }
  391. .price-box{
  392. display: flex;
  393. align-items: center;
  394. margin-top: 38upx;
  395. .btn-item{
  396. display: flex;
  397. align-items: center;
  398. justify-content: center;
  399. width: 164upx;
  400. height: 56upx;
  401. line-height: 56upx;
  402. border: 1px solid rgba(43, 199, 185, 0.5);
  403. border-radius: 28upx;
  404. font-family: PingFang SC;
  405. margin-right: 30upx;
  406. &:last-child{
  407. margin-right: 0;
  408. }
  409. .label{
  410. font-size: 26upx;
  411. font-weight: 500;
  412. color: #018C39;
  413. margin-right: 5upx;
  414. }
  415. .num{
  416. font-size: 28upx;
  417. font-weight: bold;
  418. color: #018C39;
  419. }
  420. }
  421. }
  422. }
  423. }
  424. }
  425. </style>