xinyilu/xinelu-doctor-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
47558cdaee
xinelu-doctor-app/pages/ServiceSchedule/ServiceSchedule.vue
shidongli 326919e98a 修改
2023-11-14 15:53:48 +08:00

613 lines
12 KiB
Vue
Raw Blame History

<template>
<view class="app">
<view class="content" v-if='tabslist.length>0'>
<view class="toptime" v-if="timecurrent==0">
<span>{{tabslist[0].name}}&nbsp;&nbsp;{{tabslist[0].dates}}</span>
</view>
<view class="" v-else>
<span>{{tabslist[timecurrent].name}}&nbsp;&nbsp;{{tabslist[timecurrent].dates}}</span>
</view>
<tabs :list="tabslist" :current="timecurrent" @change="timechange" active-color="#18CBB3"
background="#18CBB3">
</tabs>
<view class="imageitem">
<image src="../../static/jiantou.png" mode="" @tap="timedata"></image>
</view>
</view>
<view class="time">
<view @tap="tapSoonerorlater('morning')"
:class="Soonerorlater=='morning'?'morningbutton':'afternoonbutton'">
上午
</view>
<view @tap="tapSoonerorlater('after')" :class="Soonerorlater=='after'?'morningbutton':'afternoonbutton'">
下午
</view>
<view @tap="tapSoonerorlater('all')" :class="Soonerorlater=='all'?'morningbutton':'afternoonbutton'">
全天
</view>
</view>
<view class="morning">
<view class="morningtime">
上午
</view>
<view class="bodyitem">
<view class="" v-for="(item ,index) in List[timecurrent].morningList">
<view @tap='taptimemorning(item,index)' :class="item.status==true?'morningbodytwo':'morningbody'">
<span class="spanitem">{{item.scheduleTimeSlot}}</span>
<view class="spanitem" v-if="item.status==false">不可预约</view>
<view class="spanitem" v-else>可预约</view>
</view>
</view>
</view>
</view>
<view class="morning after">
<view class="morningtime">
下午
</view>
<view class="bodyitem">
<view class="" v-for="(item ,index) in List[timecurrent].afternoonList">
<view @tap='taptimeafter(item,index)' :class="item.status==true?'bodytwo':'body'">
<span class="spanitem">{{item.scheduleTimeSlot}}</span>
<view class="spanitem" v-if="item.status==false">不可预约</view>
<view class="spanitem" v-else>可预约</view>
</view>
</view>
</view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import tabs from '@/components/utabs/u-tabs.vue'
import {
getListByDoctor,
updateStatus
} from '@/api/ServiceSchedule/ServiceSchedule.js'
export default {
components: {
tabs
},
data() {
return {
time: 0,
timecurrent: 0,
tabslist: [{
dates: '',
name: '',
}],
doctorId: '', //医生id
List: [{
morningList: {},
afternoonList: {},
}],
morningListdata: [],
status: '',
timeindex: null,
timeindexafter: null,
Soonerorlater: 'afternoonbutton',
qurey: {
schedulePlanDetailIds: [],
status: "",
},
}
},
onLoad() {
},
onShow() {
this.doctorId = uni.getStorageSync('id')
// console.log(this.doctorId)
this.getListByDoctordata()
},
methods: {
//切换上下午全天
tapSoonerorlater(item) {
this.Soonerorlater = item
console.log(item)
if (this.Soonerorlater == 'morning') {
this.timeindexafter = null
this.timeindex = null
this.morningdata()
} else if (this.Soonerorlater == 'after') {
this.timeindexafter = null
this.timeindex = null
this.afterdata()
} else if (this.Soonerorlater == 'all') {
this.timeindexafter = null
this.timeindex = null
this.alldata()
}
},
// 修改上午全部状态
morningdata() {
this.qurey = {
schedulePlanDetailIds: [],
status: '1',
}
getListByDoctor(this.doctorId).then(res => {
if (res.data) {
res.data[this.timecurrent].morningList.forEach(e => {
this.qurey.schedulePlanDetailIds.push(e.schedulePlanDetailId)
})
updateStatus(this.qurey).then(res => {
if (res.code == 500) {
this.$refs.uToast.show({
title: res.msg,
type: 'error',
})
} else {
this.$refs.uToast.show({
title: '修改成功',
type: 'success',
duration: '1000'
})
this.updata()
}
})
}
})
},
// 修改下午全部状态
afterdata() {
this.qurey = {
schedulePlanDetailIds: [],
status: '1',
},
getListByDoctor(this.doctorId).then(res => {
if (res.data) {
console.log(res.data[this.timecurrent].afternoonList)
// var schedulePlanDetailId
res.data[this.timecurrent].afternoonList.forEach(e => {
this.qurey.schedulePlanDetailIds.push(e.schedulePlanDetailId)
})
updateStatus(this.qurey).then(res => {
if (res.code == 500) {
this.$refs.uToast.show({
title: res.msg,
type: 'error',
})
} else {
this.$refs.uToast.show({
title: '修改成功',
type: 'success',
duration: '1000'
})
this.updata()
}
})
}
})
},
// 修改全天状态
alldata() {
getListByDoctor(this.doctorId).then(res => {
this.qurey = {
schedulePlanDetailIds: [],
status: '1',
}
if (res.data) {
console.log(res.data[this.timecurrent].afternoonList)
// var schedulePlanDetailId
res.data[this.timecurrent].afternoonList.forEach(e => {
this.qurey.schedulePlanDetailIds.push(e.schedulePlanDetailId)
})
res.data[this.timecurrent].morningList.forEach(e => {
this.qurey.schedulePlanDetailIds.push(e.schedulePlanDetailId)
})
updateStatus(this.qurey).then(res => {
if (res.code == 500) {
this.$refs.uToast.show({
title: res.msg,
type: 'error',
})
} else {
this.$refs.uToast.show({
title: '修改成功',
type: 'success',
duration: '1000'
})
this.updata()
}
})
}
})
},
//选择时间
taptimemorning(item, index) {
this.qurey = {
schedulePlanDetailIds: [],
status: '1',
}
this.status = item.status
this.timeindex = index
if (item.status == true) {
this.qurey.status = "1"
} else {
this.qurey.status = "0"
}
this.qurey.schedulePlanDetailIds.push(item.schedulePlanDetailId)
console.log(this.qurey)
updateStatus(this.qurey).then(res => {
if (res.code == 500) {
this.$refs.uToast.show({
title: res.msg,
type: 'error',
})
} else {
this.$refs.uToast.show({
title: '修改成功',
type: 'success',
duration: '1000'
})
this.updata()
}
})
},
// 下午
taptimeafter(item, index) {
this.timeindexafter = index
this.qurey = {
schedulePlanDetailIds: [],
status: ''
}
if (item.status == true) {
this.qurey.status = "1"
} else {
this.qurey.status = "0"
}
this.qurey.schedulePlanDetailIds.push(item.schedulePlanDetailId)
console.log(this.qurey)
updateStatus(this.qurey).then(res => {
if (res.code == 500) {
this.$refs.uToast.show({
title: res.msg,
type: 'error',
})
} else {
this.$refs.uToast.show({
title: '修改成功',
type: 'success',
duration: '1000'
})
this.updata()
// this.getListByDoctordata()
}
})
this.status = item.status
},
updata() {
getListByDoctor(this.doctorId).then(res => {
if (res.data) {
this.List = res.data
}
})
},
getListByDoctordata() {
this.tabslist = []
getListByDoctor(this.doctorId).then(res => {
if (res.data) {
res.data.forEach(e => {
// console.log(e)
this.tabslist.push({
dates: e.week,
name: e.scheduleDate,
})
})
console.log(this.tabslist)
this.List = res.data
}
})
},
timechange(index) {
this.timecurrent = index
this.timeindexafter = null
this.timeindex = null
this.Soonerorlater = null
},
timedata() {
this.timecurrent++
this.timeindexafter = null
this.timeindex = null
this.Soonerorlater = null
},
}
}
</script>
<style lang="scss">
.app {
height: 100vh;
background: #F1F1F1;
position: relative;
overflow: hidden;
.time {
display: flex;
position: absolute;
right: 2%;
top: 20%;
flex-wrap: wrap;
width: 400rpx;
.morningbutton {
width: 128rpx;
margin: 0 1px 1px 2px;
font-size: 32rpx;
border-radius: 30rpx;
line-height: 54rpx;
text-align: center;
color: #FFFFFF;
background-color: #18CBB3;
}
.afternoonbutton {
margin: 0 1px 1px 2px;
width: 128rpx;
font-size: 32rpx;
border-radius: 30rpx;
line-height: 54rpx;
text-align: center;
color: #18CBB3;
background-color: #FFFFFF;
border: 1rpx solid #18CBB3;
}
}
.afternoon {
width: 100%;
height: 361px;
background: #fff;
border-radius: 0rpx 5rpx 5rpx 0rpx;
// margin: 15px 0 15px 0;
}
.after {
height: 100vh !important;
}
.morning {
width: 100%;
height: 420rpx;
background: #FFFFFF;
border-radius: 0rpx 5rpx 5rpx 0rpx;
margin: 20rpx auto;
background-color: #fff;
margin: 15px 0 15px 0;
.morningtime {
padding: 15px 27px 62rpx 20rpx;
width: 150rpx;
font-size: 28rpx;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: #333333;
line-height: 38rpx;
}
.bodyitem {
display: flex;
align-items: flex-start;
justify-content: flex-start;
height: 50rpx;
color: #000000;
line-height: 27rpx;
text-align: center;
flex-wrap: wrap;
}
.bodytwo {
background-color: #18CBB3;
// font-size: 36rpx;
// color: #26A888;
margin-bottom: 30rpx;
width: 200rpx;
height: 109rpx;
// background: #fff;
margin: 10rpx 30rpx 10rpx 22rpx;
.spanitem {
// width: 121px;
// height: 22px;
display: inline-block;
padding: 8rpx;
font-size: 28rpx;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: #FFFFFF;
line-height: 38rpx;
}
}
.body {
font-size: 36rpx;
color: #18CBB3;
margin-bottom: 30rpx;
width: 200rpx;
height: 109rpx;
background: #fff;
margin: 10rpx 30rpx 10rpx 22rpx;
// border-radius: 10rpx 10rpx 10rpx 10rpx;
// opacity: 1;
// margin: 30rpx;
border: 1rpx solid #E6E6E6;
.spanitem {
// width: 121px;
// height: 22px;
display: inline-block;
padding: 8rpx;
font-size: 28rpx;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: #666666;
line-height: 38rpx;
}
}
.morningbodytwo {
background-color: #18CBB3;
// font-size: 36rpx;
// color: #26A888;
margin-bottom: 30rpx;
width: 200rpx;
height: 109rpx;
// background: #fff;
margin: 10rpx 30rpx 10rpx 22rpx;
.spanitem {
// width: 121px;
// height: 22px;
display: inline-block;
padding: 8rpx;
font-size: 28rpx;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: #FFFFFF;
line-height: 38rpx;
}
}
.morningbody {
font-size: 36rpx;
color: #18CBB3;
margin-bottom: 30rpx;
width: 200rpx;
height: 109rpx;
background: #fff;
margin: 10rpx 30rpx 10rpx 22rpx;
// border-radius: 10rpx 10rpx 10rpx 10rpx;
// opacity: 1;
// margin: 30rpx;
border: 1rpx solid #E6E6E6;
.spanitem {
// width: 121px;
// height: 22px;
display: inline-block;
padding: 8rpx;
font-size: 28rpx;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: #666666;
line-height: 38rpx;
}
}
}
.content {
background-color: #fff;
width: 100%;
height: 214rpx;
border-radius: 5rpx 5rpx 5rpx 0rpx;
::v-deep .u-tabs[data-v-59a86fad] {
padding: 10rpx 0 0 0;
}
::v-deep .uni-scroll-view,
.uni-scroll-view-content {
width: 96%;
height: 100%;
}
span {
position: relative !important;
left: 50%;
transform: translateX(-50%);
// top: 1%;
margin-top: 14rpx;
display: inline-block;
// background: red;
/* width: 100%; */
height: 30px;
}
::v-deep.tabs {
width: 100%;
position: fixed;
}
.imageitem {
position: absolute;
top: 8%;
right: 1%;
// padding-top: 100rpx;
float: right;
image {
width: 18rpx;
height: 32rpx;
}
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink