You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

886 lines
22 KiB
Vue

<template>
<!-- <DraggableButton /> -->
<TabBar/>
<uni-popup ref="popupMultiple" class="w-full" :mask-click="false">
<view class="rounded-10rpx px-20rpx pb-55rpx box-border bg-#fff w-95vw">
<view
class="center relative pt-40rpx pb-30rpx text-36rpx rounded-t-15rpx box-border"
>
<text class="line-height-[1] text-32rpx">请选择</text>
<uni-icons
@click="TaoCanCloseFunc()"
type="closeempty"
color="#A6A6A6"
size="26"
class="absolute right-40rpx"
></uni-icons>
</view>
<view class="bg-#F8F8F8 px-20rpx box-border rounded-10rpx">
<view
v-for="(item, index) in PendingOrders"
:key="index"
@click="OrderId = item.value"
class="px-20rpx box-border b-b-1 b-#EAEAEA b-solid bs between h-100rpx"
>
<text class="text-#000000 text-30rpx">{{ item.text }}</text>
<view class="center">
<uni-icons
class="ml-28rpx"
color="#239EA3"
:type="OrderId == item.value ? 'checkbox-filled' : 'circle'"
size="30"
></uni-icons>
</view>
</view>
</view>
<view class="text-#239EA3 text-28rpx my-45rpx text-center" >有未预约套餐,请选择 </view>
<view class="w-270rpx h-80rpx bg-#239EA3 center text-#F8F8F8 text-30rpx rounded-10rpx mx-auto" @click="PendingOrdersChange(OrderId)" >确定</view >
</view>
</uni-popup>
<view class="ctime_main">
<uni-popup ref="YuYuePopupRef" style="z-index: 999;">
<view class="tishi_main">
<view class="tishi_title">提示</view>
<view class="tishi_title2">
<view class="tishi_shuxian">|</view>
<view>当前日期已有预约记录,是否继续预约?</view>
</view>
<view style="display: flex;justify-content: space-between;">
<view class="tishi_button" style=" width: 200rpx; background-color: #e1ecee;color:#239ea3"
@click="YuYuePopupRef.close()">关闭</view>
<view class="tishi_button" style="width: 200rpx;" @click="UsePlan()">继续</view>
</view>
</view>
</uni-popup>
<view style="display: flex;justify-content: space-between;align-items: center; padding: 20rpx 40rpx;">
<view>
<view style="font-size: 33rpx;margin-top: 2rpx;">{{person_name}}</view>
<view style="font-size: 23rpx;color:#008F96;margin-top: 10rpx;">{{combo_name}}</view>
</view>
<view style="display: flex;">
<view class="doctor_button" @click="doctorNameClick()" >
<uni-icons type="search" color="#D8EEF3" size="16"></uni-icons>
<view style="font-size: 26rpx;margin-left: 10rpx;" >{{doctor_name?doctor_name:"体检医生"}}</view>
</view>
</view>
</view>
<view style="background-color: #F8F8F8;margin-bottom: -20rpx;" v-if="showCallKeFu" >
<CallKeFu class="kefu"></CallKeFu>
</view>
<view class="buttom_div">
<view>
<view v-if="PendingOrders.length>0" class="yigou">
<view class="yigou_tishi">请选择已购套餐</view>
<view style="width: 400rpx; " class="select">
<uni-data-select style="border: 0px;" class="uni-data-select" v-model="OrderId" :localdata="PendingOrders" :clear="false"
@change="PendingOrdersChange"></uni-data-select>
</view>
</view>
<!-- <view v-else style="height: 60rpx;"></view> -->
<!-- <view v-else class="yigou">
<view class="yigou_tishi">您未购买套餐可以点击右侧购买套餐</view>
<view>
<view class="buycombo_button">购买套餐</view>
</view>
</view> -->
</view>
<view :class="[PendingOrders.length > 0 ? 'zhouli2' : 'zhouli']">
<WeeklyCalendar v-if="weekList" :dataInfo="weekList" :selectedTime="selectedTime" :YuYueInfo="YuYueInfo"
:TjDTime="tj_date+' '+tj_time" :ItemSelected="itemSelected" @selectDate="selectDateFunc"
@selectTime="selectTimeFunc" @openMonth="openMonthFunc" />
</view>
</view>
<view class="dateitem" v-if="orderInfo">
<view
style="background-color: #f7f7f7; padding: 20rpx; font-size: 30rpx; border-radius: 20rpx;color: #333;">
<view>{{orderInfo.name}}</view>
<view
style="background-color: #f1f1f1;padding: 20rpx 10rpx; margin-top: 10rpx;border-radius: 14rpx;font-size: 28rpx;color: #666;">
<view v-if="YuYueInfo.NmrInfo.length>0">
<view @click="itemClick('nmr',item_nmr,index_nmr)"
v-for="(item_nmr,index_nmr) in YuYueInfo.NmrInfo" :key="index_nmr" style="padding: 20rpx;"
:class="(itemSelected.type=='nmr' && itemSelected.index==index_nmr)?'itemSelected':''">
{{item_nmr.name}} <span v-if="item_nmr.date && item_nmr.time">{{item_nmr.date}}
{{item_nmr.time}}</span>
</view>
</view>
<view @click="itemClick('tj','',0)" style="margin-top: 10rpx;padding: 20rpx;color: #666;"
:class="itemSelected.type=='tj'?'itemSelected':''">体检日期 <span
v-if="tj_date && tj_time">{{tj_date}}
{{tj_time}}</span></view>
</view>
</view>
</view>
<view class="pb-140rpx" style="background-color: #fff;padding-top: 20rpx;">
<!-- <view @click="StartYuYue()"
class="text-#fff text-32rpx rounded-45rpx bg-#239EA3 mt-40rpx ma w-520rpx h-90rpx flex flex-items-center flex-justify-center">
确定
</view> -->
<view @click="ChaPersonAppointment()" v-if=" !(weekList && weekList.weeklist.find(item => item.date === currentDate)?.count === 0)" class="check_done_wrapper">立即预约</view>
</view>
<view id="ylrl">
<uni-calendar :insert="false" :showMonth="false" ref="DoctorMonthCalendar" @confirm="DoctMonthConfirm" />
<uni-calendar :start-date="GetToday()" :date="currentDate" :selected="MonthList" @monthSwitch="monthSwitch" :insert="false" :showMonth="false"
ref="MonthCalendar" @confirm="MonthConfirm" />
</view>
</view>
</template>
<script setup>
import {
nextTick,
onMounted,
ref,
watch,computed
} from 'vue';
import {
$image,
$api,
$response
} from "@/api";
import wx from "weixin-js-sdk";
import {
useStore
} from "@/store";
const $store = useStore();
import {
onShow,
onLoad
} from "@dcloudio/uni-app";
import DraggableButton from "@/pages/components/goHome.vue";
import WeeklyCalendar from '@/common/WeeklyCalendar.vue';
import TabBar from "@/common/TabBar.vue";
import CallKeFu from "@/common/CallKeFu.vue";
let nmr_date = ref(null);
let nmr_time = ref(null);
let nmr_plan_id = ref(null); //核磁号源id
let buyInfo = ref({}); // 购买信息
let yytjInfo = ref({}); // 预约信息
let tj_date = ref(null);
let tj_time = ref(null);
let tj_plan_id = ref(null); //体检号源id
// let weekList = ref({weeklist: []});
let weekList = ref(null);
let doctor_name = ref(null);
let hospital_id = ref(0);
let person_id = ref(0)
let use_type = ref(0)
let checkup_type_id = ref(0)
let amount = ref(0)
let person_name = ref('')
let combo_name = ref('')
let combo_id = ref(null);
let item_ids = ref([]);
let YuYuePopupRef = ref(null);
let er_xian_info = ref(null);
let PendingOrders = ref([]);
const getBuyInfoFuc = async () => {
// 获取购买信息
let obj = {
item_ids: buyInfo.value.item_ids,
combo_id: combo_id.value,
hospital: $store.save_info?.hospital ? $store.save_info?.hospital : 1,
person_id: person_id.value,
group_id: buyInfo.value.group_id,
duo_xuan_yi: $store.getDuoXuanYi(),
wj: buyInfo.value.wj,
sanfang_code: buyInfo.value.sanfang_code?.code_num ? buyInfo.value.sanfang_code : null
};
const response = await $api("BuyInfo", obj);
$response(response, () => {
if (response.data.nmr_list2.length > 0) {
er_xian_info.value = response.data.nmr_list2
}
if (combo_id.value) {
combo_name.value = response.data.combo_info?.combo_name
} else {
combo_name.value = buyInfo.value.group_id ? $store.getGroupInfo()?.group_name : ''
}
})
}
//查询体检号源
const GetDayPlanListFunc = async () => {
uni.showLoading();
let data = {
hospital:1,
person_id: person_id.value,
date: selectedDate.value,
use_type: 1,
checkup_type_id: 1,
amount: amount.value,
combo_id: combo_id.value,
item_ids: item_ids.value,
er_xian_info: er_xian_info.value,
danwei_id: null,
big_date:MonthSelectedDate.value
}
const response = await $api("GetDayPlanList", data);
uni.hideLoading();
$response(response, () => {
weekList.value = response.data
});
};
let selectedTime = ref(null);
let orderInfo = ref(null)
let YuYueInfo = ref({
TjInfo: {},
NmrInfo: {}
})
const doctorNameClick=()=>{
if (doctor_name.value) {
uni.showModal({
title: '提示',
content: '是否取消预约此医生',
cancelText: '取消医生',
confirmText: '重新选择',
success: function(res) {
if (res.confirm) {
selectDoctor()
} else if (res.cancel) {
doctor_name.value = null //清空体检医生
}
}
});
} else{
selectDoctor()
}
}
//weekly子组件点击了日期
let selectedDate = ref(null);
const selectDateFunc = (date) => {
if (doctor_name.value) {
uni.showModal({
title: '提示',
content: '已选择医生,切换日期将重新选择医生,是否继续',
cancelText: '取消',
confirmText: '确定',
success: function(res) {
if (res.confirm) {
currentDate.value=date
DateChange(date)
} else if (res.cancel) {
}
}
});
} else {
currentDate.value=date
DateChange(date)
}
}
//weekly子组件点击了时间
let SelectedPlanId = ref(null)
const selectTimeFunc = (timeinfo) => {
selectedTime.value = timeinfo.time
SelectedPlanId.value = timeinfo.id
if (itemSelected.value.type == 'nmr') {
YuYueInfo.value.NmrInfo[itemSelected.value.index].time = timeinfo.time
nmr_plan_id.value = timeinfo.id
}
if (itemSelected.value.type == 'tj') {
tj_time.value = timeinfo.time
tj_plan_id.value = timeinfo.id
yytjInfo.value.nmr_list=[{
item_id: -1,
name: "体检时间",
time: selectedDate.value+' '+timeinfo.time,
id: timeinfo.id,
}];
$store.setYytjInfo(yytjInfo.value)
}
}
let itemSelected = ref({
type: null,
item: {},
index: 0
});
const itemClick = (type, item, index) => {
//weekList.value=null
if (type == 'tj') {
selectedTime.value = tj_time.value
selectedDate.value = tj_date.value
GetDayPlanListFunc()
}
itemSelected.value.type = type
itemSelected.value.item = item
itemSelected.value.index = index
}
let DoctorMonthCalendar = ref(null)
const selectDoctor = () => {
if (tj_date.value == null) { //如果没有选定体检日期,则打开日历
DoctorMonthCalendar.value.open();
} else {
uni.navigateTo({
url: `/pages/main/selectDoctor/selectDoctor?date=${tj_date.value}`,
});
}
}
//点击医生月历日期后跳转
const DoctMonthConfirm = (e) => {
tj_date.value = e.year + "-" + e.month + "-" + e.date
uni.navigateTo({
url: `/pages/main/selectDoctor/selectDoctor?date=${tj_date.value}`,
});
}
let MonthCalendar = ref(null)
let MonthList = ref([]); //月历号源数据
let currentDate = ref(null); //月历当前日期
const monthSwitch = (e) => { //月历切换月份
let ym = e.year + "" + "-" + e.month + ""
if (itemSelected.value.type == 'tj') {
GetMonthPlanListFunc(ym)
}
}
let MonthSelectedDate=ref('');//点击月历获取的日期,用来获取7天内的日期
const MonthConfirm = (e) => { //月历确认日期
console.log(e)
// if(e.extraInfo.date ==undefined){
// uni.$lu.toast("此日期已无号源,请重新选择");
// return false
// }
if (doctor_name.value) {
uni.showModal({
title: '提示',
content: '已选择医生,切换日期将重新选择医生,是否继续',
cancelText: '取消',
confirmText: '确定',
success: function(res) {
if (res.confirm) {
MonthSelectedDate.value=e.fulldate
DateChange(e.fulldate)
} else if (res.cancel) {
}
}
});
} else {
MonthSelectedDate.value=e.fulldate
DateChange(e.fulldate)
}
}
//获取体检每月号源数量
const GetMonthPlanListFunc = async (ym = '') => {
uni.showLoading();
let data = {
hospital: 1,
person_id: person_id.value,
month: ym ? ym : tj_date.value.substring(0, 7),
use_type: 1,
combo_id: combo_id.value,
checkup_type_id: 1,
amount: amount.value,
danwei_id: null
}
const response = await $api("GetMonthPlanCount", data);
uni.hideLoading();
$response(response, () => {
let rlArr = [];
response.data.list.forEach((item) => {
let info=null
if(item.count===0){
info="满号"
}
if(item.date<GetToday()){
info=" "
}
if(item.count == -1){
info=" "
}
let o = {
date: item.date,
// info: "余号" + item.count,
info:info
};
if ((item.count >= -1 && item.date!=GetToday()) ||(item.date==GetToday() && item.count === 0) ) {
rlArr.push(o);
}
});
MonthList.value = rlArr;
//MonthCalendar.value.open()
});
};
//打开月历
const openMonthFunc = async () => {
if (itemSelected.value.type == 'tj') {
await GetMonthPlanListFunc()
}
MonthCalendar.value.open()
}
////先查询用户是否在预约日期有预约记录
const ChaPersonAppointment = async () => {
console.log(selectedDate.value);
if (selectedDate.value == null || selectedDate.value == '') {
uni.$lu.toast("请选择体检日期");
return false
}
if(tj_plan_id.value==null || tj_plan_id.value==''){
uni.$lu.toast("请选择体检时间");
return false
}
uni.showLoading();
let data = {
person_id: person_id.value,
appointment_date: selectedDate.value,
status: [2]
}
console.log(data);
const response = await $api("GetPersonOrderList", data);
uni.hideLoading();
$response(response, () => {
if (response.data.count > 0) {
YuYuePopupRef.value.open()
} else {
UsePlan()
}
});
}
//占用号源
const UsePlan = async () => {
let data= {plan_id:tj_plan_id.value,plan_time:tj_time.value}
const response = await $api("LockPlan",data);
uni.hideLoading();
$response(response, () => {
if(response.status){
YuYuePopupRef.value.close()
let tempPlan = $store.getTempPlan()
tempPlan=data
$store.setTempPlan(tempPlan)
uni.navigateTo({
url:'/pages/main/combo/combo'
})
}
});
}
//改变日期
const DateChange = (date) => {
selectedDate.value = date
selectedTime.value = null
if (itemSelected.value.type == 'tj') {
tj_time.value = null
tj_date.value = date
currentDate.value=date
doctor_name.value = null //清空体检医生
GetDayPlanListFunc()
}
}
const TaoCanCloseFunc=()=>{
OrderId.value=0
popupMultiple.value.close()
console.log(PendingOrders.value);
}
//获取用户待预约订单
const GetPendingOrdersFunc = async () => {
PendingOrders.value = []
uni.showLoading();
let data = {
person_id: person_id.value
}
const response = await $api("GetPendingOrders", data);
uni.hideLoading();
$response(response, () => {
response.data.list.forEach((v, i) => {
if(v.title.length>11){
v.title= v.title.substring(0,11)+'...'
}
PendingOrders.value.push({
value: v.id,
text: v.title
})
})
if(PendingOrders.value.length>0){
console.log(PendingOrders.value)
popupMultiple.value.open()
}
});
}
const PendingOrdersChange = (e) => {
if(!e) return false;
uni.redirectTo({
url: '/pages/main/yytjsj/yytjsj_new?id=' + e
})
}
let popupMultiple = ref(false); // 多选弹窗
let temp = null
onMounted(async () => {
itemSelected.value.type = 'tj'
buyInfo.value = $store.getBuyInfo();
//清空一下缓存的医生,防止出问题
temp = $store.getYytjInfo()
yytjInfo.value=temp
temp.doctor_name = ""
temp.doctor_date = ""
$store.setYytjInfo(temp)
selectedDate.value = GetToday()
console.log(selectedDate.value)
tj_date.value = GetToday()
checkup_type_id.value = buyInfo.value.group_id ?
$store.getGroupInfo()?.checkup_type_id : $store.getCheckupTypeId()?.id
hospital_id.value = buyInfo.value.hospital
person_id.value = $store.getUser()?.person_id
combo_id.value = buyInfo.value.combo_id
use_type.value = buyInfo.value.group_id ? 2 : 1
person_name.value = $store.getUser()?.name
await getBuyInfoFuc()
GetDayPlanListFunc()
GetPendingOrdersFunc()
});
let OrderId = ref(0)
onLoad((e) => {
OrderId.value = Number(e.id)
})
onShow(() => {
temp = $store.getYytjInfo()
if (temp.doctor_name != null && temp.doctor_name != '') {
doctor_name.value = temp.doctor_name
}
if (temp.doctor_date != null && temp.doctor_date != '') {
console.log('6666666',selectedDate.value)
console.log('6666666',temp.doctor_date)
if(selectedDate.value!=temp.doctor_date){
tj_time.value=''
tj_plan_id.value=''
selectedTime.value=''
}
selectedDate.value = temp.doctor_date
tj_date.value = temp.doctor_date
MonthSelectedDate.value=temp.doctor_date
currentDate.value=temp.doctor_date
GetDayPlanListFunc()
}
})
const GetToday = () => {
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
currentDate.value=GetToday()
const showCallKeFu = computed(() => {
if (!(weekList.value?.weeklist && weekList.value?.weeklist.length>1)) return false;
const found = weekList.value.weeklist.find(
item => item.date === currentDate.value
);
return found && found.count === 0;
});
</script>
<style scoped lang="scss">
.select {
width: 250rpx;
box-sizing: content-box;
display: flex;
align-items: center;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 24rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #239ea3;
::v-deep .uni-data-select {
width: 100%;
height: 100%;
.uni-select {
border: none !important;
height: 50rpx;
border-bottom: none !important;
.uni-select__input-text {
color: #8F8F8F;
}
.uni-icons {
font-size: 35rpx !important;
}
}
}
}
.ctime_main {
background-color: #D8EEF3;
height: calc(100vh - 90rpx);
overflow: hidden;
}
.top {
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 20rpx;
padding: 20rpx;
}
.buttom_div{
height: calc(100vh - 400rpx);
background-color: #fff;
}
.zhouli {
padding:10rpx 40rpx;
background-color: #fff;
height:calc(100% - 30rpx) ;
overflow-y: scroll;
}
.zhouli2 {
padding:10rpx 40rpx;
background-color: #fff;
height:calc(100% - 120rpx) ;
overflow-y: scroll;
}
.itemSelected {
background-color: #e0fafa;
border-radius: 10rpx;
}
.dateitem {
display: none;
padding: 20rpx;
background-color: #fff;
border-radius: 20rpx;
margin-top: 20rpx;
}
::v-deep #ylrl {
.uni-calendar--fixed{
bottom: 110rpx !important;
}
.uni-calendar__header,
.uni-calendar__weeks-day {
border: none;
}
.uni-calendar-item--checked {
background-color: transparent;
color: #239ea3 !important;
.uni-calendar-item__weeks-box-item {
background-color: #EBFBFF !important;
border-radius: 12rpx;
.uni-calendar-item--extra {
color: #239ea3 !important;
}
}
}
.uni-calendar-item--isDay {
background-color: #EBFBFF !important;
border-radius: 12rpx;
color: #239ea3 !important;
.uni-calendar-item--extra{
color:#ff5500 !important;
}
}
.uni-calendar-item--extra {
color: #ff5500;
font-size: 21rpx !important;
}
.uni-calendar-item__weeks-box {
// padding: 10rpx;
box-sizing: border-box;
}
.uni-calendar-item__weeks-box-circle {
background-color: rgba(0, 0, 0, 0);
}
.uni-calendar-item--isDay-text {
color: #333;
}
.uni-calendar-item__weeks-box-text {
font-size: 30rpx;
// font-weight: 700;
color: #239ea3;
}
.uni-calendar-item--disable{
color:#c0c0c0;
font-weight: 400;
}
.uni-calendar-item__weeks-box-text:has(+ .uni-calendar-item--extra) {
color: #ccc;
}
.uni-calendar-item__weeks-box-text:has(+ .uni-calendar-item--disable) {
color: #ccc !important;
}
.uni-calendar-item__weeks-lunar-text {
font-size: 21rpx;
}
.uni-calendar-item__weeks-box-item {
width: 100%;
}
.uni-calendar__backtoday {
display: none;
}
}
.doctor_button {
display: flex;
background-color: #fff;
padding-left: 10rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 24rpx;
margin-top: 5rpx;
margin-left: 10rpx;
color: #9E9E9F;
font-size: 20rpx;
text-align: center;
width: 180rpx;
}
.check_done_wrapper {
width: 660rpx;
height: 70rpx;
line-height: 70rpx;
margin: 0rpx auto 0rpx;
border-radius: 60rpx ;
background: #00939B;
font-weight: 700;
font-size: 29rpx;
color: #F6FDFD;
text-align: center;
}
.tishi_main {
background-color: #fff;
padding: 40rpx 50rpx;
width: 500rpx;
border-radius: 40rpx;
}
.tishi_button {
height: 60rpx;
line-height: 60rpx;
width: 365rpx;
background-color: #009da5;
color: #fff;
text-align: center;
border-radius: 40rpx;
margin: 40rpx auto 10rpx auto;
}
.tishi_title {
text-align: center;
font-size: 30rpx;
font-weight: 600;
color: #2b2827;
}
.tishi_title2 {
display: flex;
font-size: 28rpx;
margin-top: 30rpx;
font-weight: 600;
color: #3a3635;
padding-left: 5rpx;
}
.tishi_content {
font-size: 28rpx;
margin-top: 30rpx;
color: #474241;
}
.tishi_shuxian {
color: #00939B;
font-weight: bolder;
margin-right: 4rpx;
// border-right: 3rpx solid #00939B;
// height: 28rpx;
}
.yigou {
display: flex;
justify-content: space-between;
padding: 30rpx 30rpx 0rpx 60rpx;
background-color: #fff;
}
.buycombo_button {
background-color: #00939B;
color: #fff;
font-size: 26rpx;
padding: 10rpx 60rpx;
border-radius: 20rpx;
}
.yigou_tishi {
font-size: 26rpx;
color: #8b8b8b;
width: 200rpx;
height: 50rpx;
}
.kefu{
margin:-10rpx 20rpx 20rpx 20rpx;
border-radius: 10rpx;
}
</style>