zhangqi
/
circulation_ancientCoins_new
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

预约列表抽离成组件

master
kuaileWu 1 year ago
parent
1eb86d9000
commit
32a5fb39cd
4 changed files with 215 additions and 186 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 161
      components/preBookList.vue
  2. 16
      pages.json
  3. 84
      pages/index/index.vue
  4. 140
      pages/prebook_list/prebook_list.vue

161
components/preBookList.vue
View File

@ -0,0 +1,161 @@
<template>
<view class="prebook-list-com">
<view class="list btPadding">
<view :class="'item '+item" v-for="(item, key) in data">
<view class="left">
<view class="title PfScMedium">上官梓涵</view>
<view class="date">2024.01.09 周二 09:30-12:00</view>
<view class="loction">广安门医院西单门诊部</view>
</view>
<view class="right">
<view :class="item+' status'"><view class="over">候诊</view></view>
<view class="queue-num" v-if="item=='status_wait'"><view>前方<text class="PfScSemibold">40</text>人</view> </view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "preBookList",
props: {
},
data() {
return {
cssUrl:this.cssUrl,
data:['status_wait', 'status_out_num', 'status_down', 'status_expire', 'status_ing', 'status_down', 'status_expire', 'status_ing']
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.prebook-list-com{
width: 100%;
height: auto;
overflow: hidden;
.list{
width: 100%;
min-height: calc(100vh - 168rpx);
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto 0;
overflow: hidden;
box-sizing: border-box;
.item{
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 692rpx;
border-bottom: 2rpx solid rgba(151,151,151,0.15);
padding: 35rpx 13rpx;
box-sizing: border-box;
overflow: hidden;
height: auto;
&:last-of-type{
border-bottom: none !important;
}
.left{
flex-grow: 1;
flex-shrink: 1;
.title{
min-height: 42rpx;
font-size: 30rpx;
color: #000000;
line-height: 42rpx;
margin-bottom: 28rpx;
overflow: hidden;
}
.date{
height: 40rpx;
font-size: 28rpx;
color: #949699;
line-height: 40rpx;
margin-bottom: 12rpx
}
.loction{
max-width: 500rpx;
min-height: 40rpx;
line-height: 40rpx;
color: #949699;
}
}
.right{
width: 250rpx;
flex-shrink: 1;
text-align: right;
word-break: break-all;
.status{
display: flex;
justify-content: flex-end;
view{
display: flex;
border-radius: 6rpx;
font-size: 22rpx;
height: 32rpx;
line-height: 32rpx;
padding: 0 10rpx;
box-sizing: border-box;
min-width: 90rpx;
display: block;
text-align: center;
}
&.status_wait{
view{
background: #F8FFF7;
border: 1rpx solid #5BD07A;
color: #58CA7F;
}
}
&.status_out_num{
view{
background: #FFFAF7;
border: 1rpx solid #FE6710;
color: #FE6710;
}
}
&.status_down{
view{
background: #FCFCFC;
border: 1rpx solid #AEB0B8;
color: #B6B8BF;
}
}
&.status_expire{
view{
background: #FCFCFC;
border: 1rpx solid #AEB0B8;
color: #B6B8BF;
}
}
&.status_ing{
view{
border: 1rpx solid #5FA1CB;
background: #F7FCFF;
color: #5FA1CB;
}
}
}
.queue-num{
line-height: 48rpx;
height: 48rpx;
font-size: 28rpx;
color: #999999;
margin-top: 25rpx;
text{
font-size: 48rpx;
color: #39D067;
margin: 0 8rpx;
}
}
}
}
}
}
</style>

16
pages.json
View File

@ -1,5 +1,13 @@
{
"pages": [
{
"path" : "pages/prebook_list/prebook_list",
"style" :
{
"navigationBarTitleText": "预约列表",
"enablePullDownRefresh": false
}
},
{
"path": "pages/index/index",
"style": {
@ -15,14 +23,6 @@
}
},
{
"path" : "pages/prebook_list/prebook_list",
"style" :
{
"navigationBarTitleText": "预约列表",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/user_modify/user_modify",
"style" :
{

84
pages/index/index.vue
View File

@ -3,19 +3,19 @@
<view class="header-wrapper flex">
<view class="left">
<view class="flex top PfScMedium">
<view class="ft50 over2">李静</view>
<view class="">
<view class="over2">中医针灸科</view>
<view class="ft50 over2">{{doctorInfo.name}}</view>
<view v-if="doctor_dept">
<view class="over2">{{doctor_dept}}</view>
</view>
</view>
<view class="bt over2">
北京中医药大学硕士 从业10年
<view class="bt over2" v-if="doctorInfo.brief">
{{doctorInfo.brief}}
</view>
</view>
<img class="right" src="https://qny.xmz.yitongtang66.com/uploads/20240202/4c91b27887ee12a29beb015ef4dfe71f.jpg" alt="" @click="enlargePicture('https://qny.xmz.yitongtang66.com/uploads/20240202/4c91b27887ee12a29beb015ef4dfe71f.jpg')">
<img class="right" :src="doctorInfo.photo" alt="" @click="enlargePicture(doctorInfo.photo)" v-if="doctorInfo.photo">
</view>
<view class="block desc-wrapper">
<view class="block desc-wrapper" v-if="doctorInfo.intro">
<view class="title-wrapper flex">
<view class="title">
医生简介
@ -24,20 +24,20 @@
</view>
<view class="con over2 over4">
北京中医药大学硕士研究生，中国针灸学会会员，中国中医药信息学会专科专病诊疗分会理事，擅长针药并用治疗内科疾病。取穴少，用药精。擅长月经不调、痛经、带下症、妇科炎症、胃炎
{{doctorInfo.intro}}
</view>
</view>
<view class="block hospital-wrapper">
<view class="item">
<view class="block hospital-wrapper" v-if="hospitals">
<view class="item" v-for="(item,key) in hospitals">
<view class="top flex">
<view class="left">
<view class="title flex">
<text class="over2">中国中医科学院</text>
<text class="over2">{{item.hospital_name}}</text>
<img :src="cssUrl+'index_comback.svg'" alt="">
</view>
<view class="date over2">
出诊：周三下午、周六上午
<view class="date over2" v-if="item.visit_day_text">
出诊：{{item.visit_day_text}}
</view>
</view>
<view class="right">
@ -54,35 +54,9 @@
预约看诊
</view>
</view>
<view class="item">
<view class="top flex">
<view class="left">
<view class="title flex">
<text class="over2">中国中医科学院</text>
<img :src="cssUrl+'index_comback.svg'" alt="">
</view>
<view class="date over2">
出诊：周三下午、周六上午
</view>
</view>
<view class="right">
<view class="flex right-wrapper" style="justify-content:flex-end;">
<view class="">
<img :src="cssUrl+'index_nav.svg'" alt="">
<view>导航</view>
</view>
</view>
</view>
</view>
<view class="bot primary btn btn2" hover-class="hover">
预约看诊
</view>
</view>
</view>
<view class="block visit-wrapper">
<view class="block visit-wrapper" v-if="recentAppoint">
<view class="header flex">
<view class="title-wrapper flex booklist">
<view class="title">
@ -134,7 +108,11 @@
cssUrl:this.cssUrl,
code:'',
pageShow:false,
doctor_id:''
doctor_id:'',
doctorInfo:false,
doctor_dept:false,
hospitals:false,
recentAppoint:false,
}
},
components:{
@ -180,6 +158,18 @@
if(data == -1) return
this.pageShow = true
this.keywords = data
this.doctorInfo = data
if(this.doctorInfo.visit_hospital && this.doctorInfo.visit_hospital.length>0){
this.doctor_dept = this.doctorInfo.visit_hospital[0].hospital_dept_name
}
if(this.doctorInfo.visit_hospital && this.doctorInfo.visit_hospital.length>0){
this.hospitals = this.doctorInfo.visit_hospital
}
if(this.doctorInfo.appoint_record && this.doctorInfo.appoint_record.length>0){
this.recentAppoint = this.doctorInfo.appoint_record
}
});
},
enlargePicture(imgUrl) {
@ -230,10 +220,11 @@
view{
width: auto;
padding: 0 15rpx;
min-width: 125rpx;
margin-top: 14rpx;
line-height: 42rpx;
text-align: center;
font-size: 28rpx;
text-align: left;
background: linear-gradient( 288deg, #FFEED2 0%, #FED9A6 100%);
border-radius: 8rpx;
color: #7D501F;
@ -271,7 +262,7 @@
font-size: 30rpx;
line-height: 50rpx;
.con{
height: 200rpx;
height: auto;
}
}
.title-wrapper{
@ -318,12 +309,10 @@
font-size: 28rpx;
color: #666666;
margin-top: 14rpx;
margin-bottom: 16rpx;
}
}
.right{
width: 300rpx;
width: 300rpx;
width: 200rpx;
height: 100%;
img{
width: 52rpx;
@ -344,6 +333,9 @@
}
}
}
.bot{
margin-top: 16rpx;
}
}
}
.visit-wrapper{

140
pages/prebook_list/prebook_list.vue
View File

@ -18,30 +18,20 @@
<view class="item">张小宇</view>
<view class="item">刘大琪</view>
</view>
<view class="list btPadding">
<view :class="'item '+item" v-for="(item, key) in data">
<view class="left">
<view class="title PfScMedium">上官梓涵</view>
<view class="date">2024.01.09 周二 09:30-12:00</view>
<view class="loction">广安门医院西单门诊部</view>
</view>
<view class="right">
<view :class="item+' status'"><view class="over">候诊</view></view>
<view class="queue-num" v-if="item=='status_wait'"><view>前方<text class="PfScSemibold">40</text>人</view> </view>
</view>
</view>
</view>
<pre-book-list class="preg-books"></pre-book-list>
</view>
</template>
<script>
<script>
import preBookList from '@/components/preBookList.vue'
export default {
data() {
return {
data:['status_wait', 'status_out_num', 'status_down', 'status_expire', 'status_ing', 'status_down', 'status_expire', 'status_ing'],
userSelectIndex:0
}
},
components:{
preBookList
},
methods: {
pageInit() {
@ -85,123 +75,9 @@
}
}
}
.list{
.preg-books{
width: 714rpx;
min-height: calc(100vh - 168rpx);
background: #FFFFFF;
border-radius: 8rpx;
margin: 36rpx auto 0;
overflow: hidden;
box-sizing: border-box;
.item{
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 692rpx;
border-bottom: 2rpx solid rgba(151,151,151,0.15);
padding: 35rpx 13rpx;
box-sizing: border-box;
overflow: hidden;
height: auto;
&:last-of-type{
border-bottom: none !important;
}
.left{
flex-grow: 1;
flex-shrink: 1;
.title{
min-height: 42rpx;
font-size: 30rpx;
color: #000000;
line-height: 42rpx;
margin-bottom: 28rpx;
overflow: hidden;
}
.date{
height: 40rpx;
font-size: 28rpx;
color: #949699;
line-height: 40rpx;
margin-bottom: 12rpx
}
.loction{
max-width: 500rpx;
min-height: 40rpx;
line-height: 40rpx;
color: #949699;
}
}
.right{
width: 250rpx;
flex-shrink: 1;
text-align: right;
word-break: break-all;
.status{
display: flex;
justify-content: flex-end;
view{
display: flex;
border-radius: 6rpx;
font-size: 22rpx;
height: 32rpx;
line-height: 32rpx;
padding: 0 10rpx;
box-sizing: border-box;
min-width: 90rpx;
display: block;
text-align: center;
}
&.status_wait{
view{
background: #F8FFF7;
border: 1rpx solid #5BD07A;
color: #58CA7F;
}
}
&.status_out_num{
view{
background: #FFFAF7;
border: 1rpx solid #FE6710;
color: #FE6710;
}
}
&.status_down{
view{
background: #FCFCFC;
border: 1rpx solid #AEB0B8;
color: #B6B8BF;
}
}
&.status_expire{
view{
background: #FCFCFC;
border: 1rpx solid #AEB0B8;
color: #B6B8BF;
}
}
&.status_ing{
view{
border: 1rpx solid #5FA1CB;
background: #F7FCFF;
color: #5FA1CB;
}
}
}
.queue-num{
line-height: 48rpx;
height: 48rpx;
font-size: 28rpx;
color: #999999;
margin-top: 25rpx;
text{
font-size: 48rpx;
color: #39D067;
margin: 0 8rpx;
}
}
}
}
margin: 0 auto;
}
}
</style>

Write Preview
Loading…
Cancel
Save