hz-zhhq-app/pages/medical/see-doctor-sl.vue

797 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="hzIndex">
<hzHeader title="就诊预约受理"></hzHeader>
<view class="container hzContent">
<view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">
预约受理
<view class="tabBottom" v-if="currentTabIndex == 0"></view>
</view>
<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">
历史记录
<view class="tabBottom" v-if="currentTabIndex == 1"></view>
</view>
</view>
<view v-if="currentTabIndex == 0">
<view class="selectDate">
<view class="dateTit">
<view class="leftIcon">
</view>
<text style="font-size:32upx;color:#333;font-weight: 600;">选择日期</text>
</view>
<scroll-view class="scrollDate" scroll-x="true">
<view class="dateItem" :class="chooseDateIndex == index ? 'time-active' : ''"
v-for="(item, index) in date" :key="index" @click="switchTab(index)">
<text class="time">{{ item.tiems.substr(5, 10) }}</text>
<text class="week">{{ item.week }}</text>
</view>
</scroll-view>
</view>
<view class="content">
<!-- 类型 -->
<view class="barber-doctor">
<!-- v-if="(!item.project_day)||item.project_day.indexOf(date[chooseDateIndex].weekDay)!=-1" -->
<view :class="chooseProjectId == item.id ? 'barber-doctor-item-choose' : ''"
class="barber-doctor-item" v-for="(item, index) in projectList" :key="index"
@click="chooseProject(item)">
<text>{{ item.project_name }}</text>
<text>{{ item.count||0 }}</text>
</view>
</view>
<!-- <scroll-view scroll-x="true" class="scroll-view">
<view class="kind" style="justify-content: inherit;">
<text style="margin-right: 20upx;" v-for="(item, index) in projectList" :key="index" @click="chooseProject(item)">
<text class="round" :class="chooseProjectId == item.id ? 'barberactive' : ''"></text>
<text class="input_left" style="line-height: 32upx;">
{{ item.project_name }}:
<text class="num" style="line-height: 32upx;">{{ item.count||0 }}</text>
</text>
</text>
</view>
</scroll-view> -->
<!-- <view class="time-wrap">
<view
class="time time-item"
style="width: 46%!important;padding: 0rpx;padding-top: 20upx;"
v-for="(item, index) in timelist"
:key="index"
:style="item.count > 0 ? 'color:#00c277;border-color:#00c277' : 'color:#999;border-color:#999'"
@click="checkItem(item.id)"
:class="isActive == item.id ? 'active' : ''"
>
<p class="times">{{ item.name }}</p>
<span>已约{{ item.count }}位</span>
</view>
</view> -->
</view>
<view class="yy-detail">
<view class="dateTit" style="margin-top: 40upx;">
<view class="leftIcon">
</view>
<text style="font-size:32upx;color:#333;font-weight: 600;">预约详情</text>
</view>
<!-- 预约详情 -->
<!-- <view v-if="appointlist.length > 0"> -->
<view v-if="appointlist.length > 0">
<view class="order-detail" v-for="(item, index) in appointlist" :key="index">
<view class="detail">
<!-- <p>排号:{{ item.code }}</p> -->
<view>
<view class="s-title">预约项目</view>{{ item.project_name }}
</view>
<view>
<view class="s-title">预约时间</view>{{ item.apply_date+" "+item.project_info_name }}
</view>
<view>
<view class="s-title">预约时间</view>联系人{{ item.apply_name }}
</view>
<view @click="callPhone(item.apply_phone)">
<view class="s-title">预约时间</view>
<span>
{{ item.apply_phone }}</span>
</view>
<view>
<view class="s-title">部门</view>{{ item.apply_dept_name }}
</view>
</view>
<view class="btn" style="border-color:#00C277;color:#00c277"
v-if="item.edit_other ==0 && item.editFlag" @click="goEditPage(item,index)">修改</view>
<view class="btn" v-if="item.edit_other ==1 && item.editFlag">已修改</view>
</view>
</view>
<content-none v-else :padTop="8"></content-none>
</view>
</view>
<view v-if="currentTabIndex == 1">
<view class="search-box">
<view class="form-item searchv">
<picker class="time-data" mode="date" @change="startDateChange">
<view class="">{{ startDate }}</view>
</picker>
<text class="timecenter">至</text>
<picker class="time-data" mode="date" @change="endDateChange">
<view class="">{{ endDate }}</view>
</picker>
<!-- <view class="search" style="height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchYjList">搜索</view> -->
<!-- <image style="width: 5vh;height: 5vh;margin-left: 1vh;" @click="search" src="/static/icons/seach.png" mode=""></image>
-->
</view>
<view class="tj-box">
<text style="font-size: 28upx; color: #666666;">时段内预约总数:</text>
<text style="font-size: 32upx;color: #0DB0A7;">{{count}}</text>
</view>
</view>
<view class="list-box" v-if="appointlist.length > 0">
<view class="detail-box" v-for="(item, index) in appointlist" :key="index">
<view class="detail_header">
<image class="blueSign" src="@/static/haircut/jzyy.png" mode=""></image>
<text class="font-tilte">就诊预约</text>
<!-- <text class="slect_icon"></text> -->
<!-- <text class="font-result" v-if="item.int_status==0">预约成功</text>
<text class="font-result" v-if="item.int_status==1" style="color: #666666;">已取消</text>
<text class="font-result" v-if="item.int_status==2" style="color: red;">车主未至</text> -->
</view>
<view class="detail_msg">
<view class="info-item">
<text>预约人员:</text>
<text class="infoSpan">{{ item.apply_name }}</text>
</view>
<view class="info-item">
<text>联系方式:</text>
<text class="infoSpan">{{ item.apply_phone }}</text>
</view>
<view class="info-item">
<text>预约项目:</text>
<text class="infoSpan">{{ item.project_name }}</text>
</view>
<view class="info-item">
<text>预约时间:</text>
<text class="infoSpan">{{ item.apply_date+" "+item.project_info_name }}</text>
</view>
<view class="info-item">
<text>申请时间:</text>
<text class="infoSpan">{{ formatDate(item.createTime) }}</text>
</view>
</view>
</view>
</view>
<content-none :padTop="20" v-else></content-none>
</view>
</view>
</view>
</template>
<script>
import {
getSlSeekmedicalProjectRecord,
getSeekmedicalProjectSl,
getAllSeekmedicalProjectRecord
} from '@/common/api.js';
import {
callbackRequest,
getStorage,
getNumDate,
alertTip,
formatDate,
getDate,
callPhone
} from '@/common/util.js';
import contentNone from '@/components/contentNone.vue';
export default {
data() {
return {
userInfo: getStorage('userInfo'),
pos: 0,
isActive: -9,
kindActive: 0,
barber1: 0,
barber2: 1,
barberActive: 0,
barberActive1: -1,
part: '',
name: '',
tel: '',
key: true,
date: getDate(),
chooseDateIndex: 0,
detailList: [{
deptName: "大数据事业部",
code: "D302",
userName: "刘晓明",
tel: "15056771234",
type: "心电图"
}, ],
fagtime: '',
projectList: [], //项目列表
chooseProjectId: 0,
parent_id: "",
callPhone: callPhone,
currentTabIndex: 0, //当前选择的tab
//分页
page: 1,
pageSize: 10,
loadingType: 0, //0-loading前1-loading中2-没有更多了
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
user: getStorage('userInfo'),
appointlist: [],
date: getNumDate(7), //获取今天起 最近7天时间
formatDate: formatDate,
startDate: this.getDay(-7),
endDate: this.getDay(0),
areas: ['', '会议中心', '科技楼'],
count: ""
};
},
components: {
contentNone
},
onLoad(options) {
this.parent_id = options.parent_id || "";
this.initData();
},
watch: {
currentTabIndex: function(newVal, oldVal) {
this.chooseProjectInfoId = 0;
if (newVal == 1) {
this.page = 1;
this.loadingType = 0;
this.getListYY();
} else {
// 初始化
this.initData();
}
}
},
methods: {
goEditPage(item, index) {
uni.redirectTo({
url: `/pages/medical/see-doctor-edit?id=` + item.id + '&type=2'
});
},
getListYY() {
// let lfDatas = uni.getStorageSync('lfDatas');
// this.appointlist = lfDatas;
let params = {
method: getAllSeekmedicalProjectRecord,
data: {
pageNum: this.page,
pageSize: this.pageSize,
startDate: this.startDate,
endDate: this.endDate,
userId: this.user.id
}
};
console.log('222', params)
callbackRequest(params).then(res => {
if (res.data.returnCode == 1) {
if (this.page == 1) {
this.appointlist = res.data.returnData.list || [];
this.count = res.data.returnData.count || 0;
} else {
if (res.data.returnData.length > 0) {
this.appointlist = this.appointlist.concat(res.data.returnData.list);
this.loadingType = 0;
} else {
this.loadingType = 2;
}
}
}
});
},
startDateChange: function(e) {
this.startDate = e.target.value;
this.page = 1;
this.loadingType = 0;
this.getListYY();
},
endDateChange: function(e) {
this.endDate = e.target.value;
this.page = 1;
this.loadingType = 0;
this.getListYY();
},
getDay(i) {
var date1 = new Date(new Date().getTime() + i * 24 * 60 * 60 * 1000);
var year = date1.getFullYear();
var month = date1.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
var day = date1.getDate();
if (day < 10) {
day = "0" + day;
}
return year + '-' + month + '-' + day;
},
getList() {
let params = {
"method": getSlSeekmedicalProjectRecord,
data: {
projectId: this.chooseProjectId,
applyDate: this.date[this.chooseDateIndex].tiems
},
}
callbackRequest(params)
.then(res => {
var listS = res.data.returnData || [];
var listSS = [];
var dateNow = this.date[0].tiems;
dateNow = dateNow.replace(/-/g, '/');
var dateNowTime = new Date(dateNow).getTime();
for (var i = 0; i < listS.length; i++) {
var obj = listS[i];
var apply_date = obj.apply_date;
apply_date = apply_date.replace(/-/g, '/');
var apply_date_time = new Date(apply_date).getTime();
if (apply_date_time > dateNowTime) {
obj.editFlag = true;
} else {
obj.editFlag = false;
}
listSS.push(obj);
}
if (res.data.returnCode == 1) {
this.appointlist = listSS
}
})
},
chooseProject(item) {
this.chooseProjectId = item.id;
this.choseProject = item;
this.getList();
},
//初始化数据
initData() {
let params = {
"method": getSeekmedicalProjectSl,
"data": {
userId: this.userInfo.id,
applyDate: this.date[this.chooseDateIndex].tiems,
parentId: this.parent_id,
}
}
callbackRequest(params)
.then(res => {
res = res.data;
if (res.returnCode === "1") {
this.projectList = res.returnData;
this.chooseProjectId = res.returnData[0].id;
this.choseProject = res.returnData[0];
this.getList();
}
})
},
//切换日期
switchTab: function(i) {
this.chooseDateIndex = i;
this.isActive = '';
this.initData();
},
checkItem: function(id) {
var self = this;
self.isActive = id;
},
handle: function(index) {
this.kindActive = index;
},
check: function(index) {
this.barberActive = index;
},
cancel: function(item) {
if (confirm('是否取消')) {
var self = this;
item.id;
// request.visitorInfoUpdateStatus({
// applyType: "06",
// applyId: item.id,
// status: "3"
// }, function(res) {
// if (res.returnCode == 1) {
// self.checkItem(self.isActive);
// mui.toast("取消成功", {
// duration: "long"
// });
// request.getBasicInfoForBarber({
// applyDate: self.haircutDate
// }, function(res) {
// vm.kind = res.returnData[0].kind;
// vm.timelist = res.returnData[0].remain.slice(0, 2)
// })
// } else mui.toast(res.returnMsg, {
// duration: "long"
// })
// })
}
},
onNavigationBarButtonTap(e) {
const index = e.index;
if (index == 0) {
var url = "/pages/medical/see-doctor-history";
uni.navigateTo({
url
});
}
},
change: function(id) {
var self = this;
storage.set({
id: id,
openType: 8
});
window.location.href = './haircut.html';
}
}
};
</script>
<style lang="scss" scoped>
.container {
padding: 24upx;
margin-top: 150upx;
.tab-box {
width: 80%;
display: flex;
font-size: 32upx;
color: #555555;
.active_tab {
font-weight: 800;
}
.tab-item {
width: 40%;
.tabBottom {
width: 28%;
height: 4upx;
border-radius: 5px;
background-image: linear-gradient(to right, #64E182, #1CA7B2);
}
}
}
}
.content {
margin-top: 24upx;
border-radius: 20upx;
overflow: hidden;
background-color: #fff;
}
.barber-doctor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
// border-bottom: 1px solid #e5e5e5;
padding-bottom: 20upx;
.barber-doctor-item {
width: 157*2upx;
min-height: 38*2upx;
background: linear-gradient(90deg, #EAF4FF 0%, #FAFCFF 100%);
border-radius: 4*2upx;
border: 1px solid #F2F6FA;
line-height: 40upx;
color: #555555;
font-size: 28upx;
margin-left: 24upx;
margin-top: 24upx;
padding: 18upx 30upx;
display: flex;
align-items: center;
justify-content: space-between;
}
// .barber-doctor-item:first-child {
// margin-left: 0;
// }
.barber-doctor-item-choose {
background: #EDFCF7;
border: 1px solid #00ADA6;
color: #0DB0A7;
}
}
.barberactive {
background: #00c277 !important;
}
.input_left {
vertical-align: middle;
font-size: 28rpx;
color: #555;
}
.round {
width: 32upx;
height: 32upx;
border-radius: 50%;
background: #cccccc;
display: inline-block;
margin-right: 10upx;
vertical-align: middle;
}
.selectDate {
width: 100%;
padding: 20upx;
background-color: #fff;
border-radius: 20upx;
padding-left: 0;
margin-top: 24upx;
.dateItem {
margin: 0 10upx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 28upx;
color: #555;
border-radius: 16upx;
padding: 18upx 20upx;
background-color: #F2F6FA;
border: 1px solid #F2F6FA;
}
.time-active {
background: #EDFCF7;
color: #0DB0A7;
border: 1px solid #0DB0A7;
}
.scrollDate {
margin-top: 20upx;
white-space: nowrap;
}
/deep/::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/deep/.uni-scroll-view-content {
display: flex;
}
}
.yy-detail {}
.dateTit {
width: 100%;
display: flex;
align-items: center;
margin-left: 20upx;
image {
width: 35upx;
height: 35upx;
margin-right: 10upx;
}
.leftIcon {
width: 8upx;
height: 30upx;
background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
border-radius: 5px;
margin-right: 10upx;
}
}
.order-detail {
background: #ffffff;
padding: 24upx;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #eee;
margin-top: 24upx;
}
.detail view {
font-size: 28rpx;
color: #999999;
display: flex;
flex-direction: row;
align-items: center;
}
.s-title {
display: inline-block;
width: 56*2upx;
line-height: 60upx;
margin-right: 24upx;
color: #555 !important;
}
.detail .last {
margin-bottom: 0;
}
.btn {
width: 186.6667upx;
height: 72upx;
line-height: 72upx;
border: 1.3333upx solid #00c277;
border-radius: 40upx;
color: #00c277;
text-align: center;
font-size: 16*2upx;
}
.btn:last-child {
border-color: #cccccc;
margin-top: 26.6667upx;
color: #999999;
}
.search-box {
margin-top: 36upx;
padding: 24upx;
background-color: #fff;
border-radius: 20upx;
}
.form-item {
overflow: hidden;
border-bottom: 1px solid #eee;
}
.searchv {
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.timecenter {
display: inline-block;
font-size: 24upx;
margin-left: 10upx;
margin-right: 10upx;
color: #555555;
line-height: 30upx;
// margin-top: 15upx;
}
.time-data {
width: 300upx;
height: 60upx;
font-size: 28upx;
display: inline-block;
border: 1px solid #0DB0A7;
border-radius: 8upx;
color: #555555;
line-height: 60upx;
}
.tj-box {
margin-top: 28upx;
display: flex;
flex-direction: row;
align-items: center;
}
.list-box {
margin-top: 24upx;
.detail-box {
// margin-top: 10upx;
margin-bottom: 24upx;
background: #ffffff;
border-radius: 20upx;
padding: 24upx;
}
.detail_header {
padding: 15upx 0upx;
border-bottom: 1px solid #eee;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.detail_header .blueSign {
width: 48upx;
height: 48upx;
}
.detail_header .font-tilte {
display: inline-block;
font-weight: bold;
font-size: 18px;
color: #333333;
margin-left: 16upx;
}
.detail_header .font-result {
display: inline-block;
position: absolute;
width: 80*2upx;
height: 28*2upx;
right: 0upx;
background: #C1EFEA;
border-radius: 15px 15px 15px 15px;
font-size: 28upx;
color: #0DB0A7;
text-align: center;
line-height: 28*2upx;
}
.detail_msg {
display: grid;
margin-top: 20upx;
}
.detail_msg .info-item {
font-size: 28upx;
color: #999999;
margin-bottom: 10upx;
font-size: 28upx;
line-height: 50upx;
text {
display: inline-block;
width: 140upx;
}
.infoSpan {
width: auto;
font-size: 28upx;
color: #666;
float: right;
}
}
.detail_msg .info-item:nth-of-type(6) {
padding-bottom: 24upx;
border-bottom: 1px solid #EBEFF7;
}
.detail_msg .info-item:last-child {
padding-bottom: 24upx;
border-bottom: 0px solid #000;
}
.comment-btn {
margin-top: 24upx;
width: 84*2upx;
height: 32*2upx;
border-radius: 16*2upx;
border: 1px solid #0DB0A7;
font-size: 28upx;
color: #0DB0A7;
line-height: 32*2upx;
text-align: center;
min-width: 140upx;
justify-self: end;
}
.bg-ccc {
border-color: #CACACA;
color: #CACACA;
background-color: #fff !important;
}
}
</style>