Skip to content

L
ln-medicalAppointment-pc
Commit b8cd1f7b authored by hailiang.sun's avatar hailiang.sun
Browse files
Options

bug修复

parent 95c2e5fb
Hide whitespace changes
Inline Side-by-side
Showing with 969 additions and 794 deletions
src/components/reserve-date.vue
View file @ b8cd1f7b
<template> <template>
<div class="content"> <div class="content">
<div class="body"> <div class="body">
<div class="head-body"> <div class="head-body">
<span class="prev" @click='prevDeta'><img src="../assets/imgs/flow/prev.png" alt=""></span> <span class="prev" @click="prevDeta"
<span class="date-head">{{swiperData.year}}年{{swiperData.month}}月</span> ><img src="../assets/imgs/flow/prev.png" alt=""
<span class="next" @click='nextDate'><img src="../assets/imgs/flow/next.png" alt=""></span> /></span>
<!-- <div> <span class="date-head"
>{{ swiperData.year }}年{{ swiperData.month }}月</span
>
<span class="next" @click="nextDate"
><img src="../assets/imgs/flow/next.png" alt=""
/></span>
<!-- <div>
<div class='pr40' style="display: inline-block;"><span></span><uni-icon type="arrowup" size='26' color='#fff' @click='prevDeta'/></div> <div class='pr40' style="display: inline-block;"><span></span><uni-icon type="arrowup" size='26' color='#fff' @click='prevDeta'/></div>
<div style="display: inline-block;"><uni-icon type="arrowdown" size='26' color='#fff' @click='nextDate' /></div> <div style="display: inline-block;"><uni-icon type="arrowdown" size='26' color='#fff' @click='nextDate' /></div>
</div> --> </div> -->
</div> </div>
<div class="mian-body"> <div class="mian-body">
<!-- 星期 --> <!-- 星期 -->
<div class="mian-bolck"> <span class="yellow">Sun</span> </div> <div class="mian-bolck"><span class="yellow">Sun</span></div>
<div class="mian-bolck"> <span class="yellow">Mon</span> </div> <div class="mian-bolck"><span class="yellow">Mon</span></div>
<div class="mian-bolck"> <span class="yellow">Tue</span> </div> <div class="mian-bolck"><span class="yellow">Tue</span></div>
<div class="mian-bolck"> <span class="yellow">Wed</span> </div> <div class="mian-bolck"><span class="yellow">Wed</span></div>
<div class="mian-bolck"> <span class="yellow">Thu</span> </div> <div class="mian-bolck"><span class="yellow">Thu</span></div>
<div class="mian-bolck"> <span class="yellow">Fri</span> </div> <div class="mian-bolck"><span class="yellow">Fri</span></div>
<div class="mian-bolck"> <span class="yellow">Sat</span> </div> <div class="mian-bolck"><span class="yellow">Sat</span></div>
<!-- 日 --> <!-- 日 -->
<div v-for="(val, index) in swiperData.dateDay" class="mian-bolck" :class="val.disable == true ? 'disable' : val.Choice == true ? 'Choice' : ''" <div
@click="ChoiceDate(index, val.disable)" :key='index'> v-for="(val, index) in swiperData.dateDay"
<div class="border"> class="mian-bolck"
<span class="day">{{val.day}}</span> :class="
</div> val.disable == true ? 'disable' : val.Choice == true ? 'Choice' : ''
</div> "
</div> @click="ChoiceDate(index, val.disable)"
<div class="foot"> :key="index"
<button class="confirm" @click="confirm">确定选择</button> >
<button class="cancle" @click="cancle">取消</button> <div class="border">
</div> <span class="day">{{ val.day }}</span>
</div> <p
</div> style="color: #3f7ffb; font-size: 12px"
v-if="val.personCount > 10"
>
空闲
</p>
<p v-if="val.personCount <= 10" style="color: red; font-size: 12px">
紧张
</p>
</div>
</div>
</div>
<div class="foot">
<button class="confirm" @click="confirm">确定选择</button>
<button class="cancle" @click="cancle">取消</button>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
swiperData: {}, swiperData: {},
year: '', year: "",
month: '', month: "",
day: '', day: "",
storageDate: [] storageDate: [],
} schedules: [],
}, };
props: { },
//下一个月 props: {
nextMonth: { // 排期
type: String, scheduleList: {
default: '' type: Array,
}, default: () => [],
// 当前日期 },
date: { //下一个月
type: String, nextMonth: {
default: () => { type: String,
let _dateData = new Date(), default: "",
_date = `${_dateData.getFullYear()}-${_dateData.getMonth() + 1}-${_dateData.getDate()}` },
return _date // 当前日期
} date: {
}, type: String,
// 禁用开始之前日期 default: () => {
startDate: { let _dateData = new Date(),
type: String, _date = `${_dateData.getFullYear()}-${
default: '' _dateData.getMonth() + 1
}, }-${_dateData.getDate()}`;
// 禁用开始之后日期 return _date;
endDate: { },
type: String, },
default: '' // 禁用开始之前日期
}, startDate: {
// 是否禁用今天之前的日期 type: String,
disableBefore: { default: "",
type: Boolean, },
default: false // 禁用开始之后日期
}, endDate: {
// 价格 type: String,
price: { default: "",
type: Object, },
default: () => { // 是否禁用今天之前的日期
return {type: false, data: []} disableBefore: {
} type: Boolean,
}, default: false,
// 是否选择默认日期 },
isNowDate: { // 价格
type: Boolean, price: {
default: true type: Object,
}, default: () => {
// 单选或多选 return { type: false, data: [] };
singleElection: { },
type: Boolean, },
default: true // 是否选择默认日期
} isNowDate: {
}, type: Boolean,
computed: { default: true,
PriceData: { },
get() { // 单选或多选
return this.price.data singleElection: {
} type: Boolean,
} default: true,
}, },
created() { },
let dateArr = this.date.split('-') computed: {
if (this.date != '' && dateArr.length == 3) { PriceData: {
// 初始化年月日 get() {
this.year = Number(dateArr[0]) return this.price.data;
this.month = Number(dateArr[1]) },
this.day = Number(dateArr[2]) },
this.InitializationHomeDate(true).then((val) => { },
this.Preprocessing(dateArr) created() {
if(this.nextMonth){ let dateArr = this.date.split("-");
this.nextDate() if (this.date != "" && dateArr.length == 3) {
} // 初始化年月日
}) this.year = Number(dateArr[0]);
} else { this.month = Number(dateArr[1]);
console.error('error 请检查传入日期是否正确,如: 2019-5-12') this.day = Number(dateArr[2]);
} this.InitializationHomeDate(true).then((val) => {
this.Preprocessing(dateArr);
}, if (this.nextMonth) {
methods: { this.nextDate();
// 是否添加初始化日期 }
InitializationHomeDate(type) { });
// 指定日期 } else {
let ThisDate = this.compareDate(this.date) console.error("error 请检查传入日期是否正确,如: 2019-5-12");
// 禁用开始时间 }
let startDate = this.compareDate(this.startDate) },
// 禁用结束时间 methods: {
let endDate = this.compareDate(this.endDate) // 是否添加初始化日期
// 当前日期 InitializationHomeDate(type) {
let _date = new Date() // 指定日期
let currDate = this.compareDate(`${_date.getFullYear()}-${_date.getMonth() + 1}-${_date.getDate()}`) let ThisDate = this.compareDate(this.date);
return new Promise((resolve, reject) => { // 禁用开始时间
let judge = (this.disableBefore == false && this.startDate == '' && this.endDate == '') || // 没有任何禁止 let startDate = this.compareDate(this.startDate);
(this.disableBefore == true && ThisDate >= currDate) || // 是否禁用今天之前的日期 // 禁用结束时间
(ThisDate >= startDate && this.disableBefore == false && this.startDate != '') || // 禁用只有开始时间，没有结束时间 let endDate = this.compareDate(this.endDate);
(ThisDate <= endDate && this.disableBefore == false && this.endDate != '') || // 禁用只有结束时间，没有开始时间 // 当前日期
(ThisDate <= endDate && this.disableBefore == false && ThisDate >= startDate && this.startDate != '' &&this.endDate != '') // 禁用结束时间，开始时间 let _date = new Date();
if (this.isNowDate == false) { let currDate = this.compareDate(
resolve(true) `${_date.getFullYear()}-${_date.getMonth() + 1}-${_date.getDate()}`
return false );
} else if (judge && type) { return new Promise((resolve, reject) => {
//this.storageDate.push({date: this.date}) let judge =
} (this.disableBefore == false &&
resolve(true) this.startDate == "" &&
}) this.endDate == "") || // 没有任何禁止
}, (this.disableBefore == true && ThisDate >= currDate) || // 是否禁用今天之前的日期
// 时间转换为时间戳 (ThisDate >= startDate &&
compareDate(s1) { this.disableBefore == false &&
let curTime = new Date(); this.startDate != "") || // 禁用只有开始时间，没有结束时间
//把字符串格式转化为日期类 (ThisDate <= endDate &&
return s1 ? new Date(s1).valueOf() : false this.disableBefore == false &&
}, this.endDate != "") || // 禁用只有结束时间，没有开始时间
// 上一个月 (ThisDate <= endDate &&
prevDeta() { this.disableBefore == false &&
let dateLen = new Date(this.year, this.month - 1, 0).getDate() ThisDate >= startDate &&
this.month = Number(this.month) - 1 this.startDate != "" &&
if (this.month == 0) { this.endDate != ""); // 禁用结束时间，开始时间
this.month = 12 if (this.isNowDate == false) {
this.year = Number(this.year) - 1 resolve(true);
} return false;
this.Preprocessing([this.year, this.month, this.day]) } else if (judge && type) {
if (this.price.type) { //this.storageDate.push({date: this.date})
this.$emit('changeMonth', [this.year, this.month, dateLen]) }
} resolve(true);
}, });
// 下一个月 },
nextDate() { // 返回每个月第一天和最后一天
let dateLen = new Date(this.year, this.month - 1, 0).getDate() monthDays() {
this.month = 1 + Number(this.month) // 椋鸟当前业务，返回第一天和最后一天
if (this.month == 13) { let d = new Date(this.year, this.month, 0);
this.month = 1 let month = this.month < 10 ? "0" + this.month : this.month;
this.year = 1 + Number(this.year) this.$emit("changeMonth", {
} min: `${this.year}${month}01`,
this.Preprocessing([this.year, this.month, this.day]) max: `${this.year}${month}${d.getDate()}`,
if (this.price.type) { });
this.$emit('changeMonth', [this.year, this.month, dateLen]) },
} // 时间转换为时间戳
}, compareDate(s1) {
//将日期小于10的转为两位数， 9-> 09 let curTime = new Date();
numberDouble(num) { //把字符串格式转化为日期类
return num < 10 ? '0' + num : num; return s1 ? new Date(s1).valueOf() : false;
}, },
// 数据发布 // 上一个月
ChoiceDate(index, disable) { prevDeta() {
let day = this.swiperData.dateDay[index].day let dateLen = new Date(this.year, this.month - 1, 0).getDate();
this.month = Number(this.month) - 1;
if (this.month == 0) {
this.month = 12;
this.year = Number(this.year) - 1;
}
this.Preprocessing([this.year, this.month, this.day]);
if (this.price.type) {
this.$emit("changeMonth", [this.year, this.month, dateLen]);
}
// 椋鸟当前业务，返回第一天和最后一天
this.monthDays();
},
// 下一个月
nextDate() {
let dateLen = new Date(this.year, this.month - 1, 0).getDate();
this.month = 1 + Number(this.month);
if (this.month == 13) {
this.month = 1;
this.year = 1 + Number(this.year);
}
this.Preprocessing([this.year, this.month, this.day]);
if (this.price.type) {
this.$emit("changeMonth", [this.year, this.month, dateLen]);
}
// 椋鸟当前业务，返回第一天和最后一天
this.monthDays();
},
//将日期小于10的转为两位数， 9-> 09
numberDouble(num) {
return num < 10 ? "0" + num : num;
},
// 数据发布
ChoiceDate(index, disable) {
let day = this.swiperData.dateDay[index].day;
let _Choice = this.swiperData.dateDay[index].Choice let _Choice = this.swiperData.dateDay[index].Choice;
let _id = this.swiperData.dateDay[index].id||'' let _id = this.swiperData.dateDay[index].id || "";
let _date = {} let _date = {};
if (this.price.type == true) { if (this.price.type == true) {
_date = {date: `${this.swiperData.year}-${this.swiperData.month}-${day}`, price: this.swiperData.dateDay[index].price, _id} _date = {
} else { date: `${this.swiperData.year}-${this.swiperData.month}-${day}`,
_date = {date: `${this.swiperData.year}-${this.swiperData.month}-${day}`, _id} price: this.swiperData.dateDay[index].price,
} _id,
if (disable != true) { };
// 添加数据 } else {
if (JSON.stringify(this.storageDate).indexOf(_date.date) == -1) { _date = {
// 单选还是多选 date: `${this.swiperData.year}-${this.swiperData.month}-${day}`,
if (this.singleElection == true) { _id,
this.storageDate = [] };
this.swiperData.dateDay.forEach((val, inde) => { }
val.Choice = false if (disable != true) {
}) // 添加数据
// 多选 if (JSON.stringify(this.storageDate).indexOf(_date.date) == -1) {
} // 单选还是多选
this.storageDate.push(_date) if (this.singleElection == true) {
// 删除数据 this.storageDate = [];
} else { this.swiperData.dateDay.forEach((val, inde) => {
this.storageDate = this.storageDate.filter((val, index) => { val.Choice = false;
if (val.date != _date.date) { });
return val // 多选
} }
}) this.storageDate.push(_date);
} // 删除数据
this.swiperData.dateDay[index].Choice = !_Choice } else {
this.$emit('changeDay', this.storageDate) this.storageDate = this.storageDate.filter((val, index) => {
} if (val.date != _date.date) {
}, return val;
// 日期初始化 }
Preprocessing(arr) { });
let swiperData = {} }
this.getDay(`${arr[0]}-${arr[1]}-${arr[2]}`).then((val) => { this.swiperData.dateDay[index].Choice = !_Choice;
swiperData = val this.$emit("changeDay", this.storageDate);
this.$emit('changeDay', this.storageDate) }
this.$set(this, 'swiperData', swiperData) },
}) // 日期初始化
}, Preprocessing(arr) {
// 判断当前是 安卓还是ios ，传入不容的日期格式 let swiperData = {};
judgeDate(dateData) { this.getDay(`${arr[0]}-${arr[1]}-${arr[2]}`).then((val) => {
if (typeof dateData !== 'object') { swiperData = val;
dateData = dateData.replace(/-/g, '/') console.log("不一样", this.schedules, swiperData, arr);
} for (let i = 0; i < swiperData.dateDay.length; i++) {
return dateData for (let k = 0; k < this.schedules.length; k++) {
}, if (
// 循环上个月末尾几天添加到数组 swiperData.dateDay[i].date &&
getDay(dateData) { swiperData.dateDay[i].date === this.schedules[k].scheduleDate
dateData = this.judgeDate(dateData) ) {
// 获取年，月，日，星期 swiperData.dateDay[i].personCount = this.schedules[k].personCount;
let _date = new Date(dateData), swiperData.dateDay[i].disable = false;
year = _date.getFullYear(), console.log("没有执行？", swiperData.dateDay[i].disable);
month = _date.getMonth() + 1, }
date = _date.getDate(), }
day = _date.getDay() }
console.log("产出", swiperData);
this.$emit("changeDay", this.storageDate);
this.$set(this, "swiperData", swiperData);
});
},
// 判断当前是 安卓还是ios ，传入不容的日期格式
judgeDate(dateData) {
if (typeof dateData !== "object") {
dateData = dateData.replace(/-/g, "/");
}
return dateData;
},
// 循环上个月末尾几天添加到数组
getDay(dateData) {
dateData = this.judgeDate(dateData);
// 获取年，月，日，星期
let _date = new Date(dateData),
year = _date.getFullYear(),
month = _date.getMonth() + 1,
date = _date.getDate(),
day = _date.getDay();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
//获取上个月末尾几天 //获取上个月末尾几天
let prevDayArr = [], let prevDayArr = [],
prevDayLength = new Date(year, month - 1, 1).getDay() prevDayLength = new Date(year, month - 1, 1).getDay();
for (let i = prevDayLength; i > 0; i--) { for (let i = prevDayLength; i > 0; i--) {
let prevDay = new Date(year, month - 1, -i + 1).getDate() let prevDay = new Date(year, month - 1, -i + 1).getDate();
prevDayArr.push({ prevDayArr.push({
day: prevDay, day: prevDay,
disable: true, disable: true,
Choice: false Choice: false,
}) });
} }
// 获取本月 // 获取本月
let thisDayArr = [], let thisDayArr = [],
thisDaylength = new Date(year, month - 1, 0).getDate() thisDaylength = new Date(year, month - 1, 0).getDate();
for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
thisDayArr.push({
day: i,
disable: false,
Choice: false,
price: this.price.data[i-1],
priceType: this.price.type
})
// 重绘已选择日期
this.storageDate.forEach((val, index) => {
let valArr = val.date.split('-');
if (year == valArr[0] && month == valArr[1] && i == valArr[2]) {
thisDayArr[i - 1].Choice = false
val.price = this.price.data[i-1]
}
})
}
// 获取下个月开始几天 for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
let nextDayArr = [], let date = `${year}${month < 10 ? "0" + month : month}${
nextDaylength = 42 - (prevDayArr.length + thisDayArr.length) i < 10 ? "0" + i : i
for (let i = 1; i < nextDaylength + 1; i++) { }`;
nextDayArr.push({
day: i,
disable: true,
Choice: false
})
}
// 数据合并 let obj = {
let dateShow = [] day: i,
dateShow = dateShow.concat(prevDayArr, thisDayArr, nextDayArr) disable: true,
Choice: false,
price: this.price.data[i - 1],
priceType: this.price.type,
date,
};
thisDayArr.push(obj);
// 重绘已选择日期
this.storageDate.forEach((val, index) => {
let valArr = val.date.split("-");
if (year == valArr[0] && month == valArr[1] && i == valArr[2]) {
thisDayArr[i - 1].Choice = false;
val.price = this.price.data[i - 1];
}
});
}
// 获取下个月开始几天
let nextDayArr = [],
nextDaylength = 42 - (prevDayArr.length + thisDayArr.length);
for (let i = 1; i < nextDaylength + 1; i++) {
nextDayArr.push({
day: i,
disable: true,
Choice: false,
});
}
// 禁用今天之前的日期 // 数据合并
if (this.disableBefore) { let dateShow = [];
let __beForeDeta = new Date(), dateShow = dateShow.concat(prevDayArr, thisDayArr, nextDayArr);
dDate = `${__beForeDeta.getFullYear()}-${__beForeDeta.getMonth() + 1}-${__beForeDeta.getDate()}`
this.disableDatePrevFn(dateShow, dDate.split('-'), year, month).then((val) => { // 禁用今天之前的日期
resolve({ if (this.disableBefore) {
dateDay: val, let __beForeDeta = new Date(),
year: year, dDate = `${__beForeDeta.getFullYear()}-${
month: month __beForeDeta.getMonth() + 1
}) }-${__beForeDeta.getDate()}`;
}) this.disableDatePrevFn(dateShow, dDate.split("-"), year, month).then(
// 禁用双向指定范围可用 (val) => {
} else if (this.startDate != '' && this.endDate != '') { resolve({
let startDateArr = this.startDate.split('-') dateDay: val,
let endDateArr = this.endDate.split('-') year: year,
if (startDateArr.length == 3 && endDateArr.length == 3) { month: month,
this.disableDatePrevFn(dateShow, startDateArr, year, month).then((val) => { });
return this.disableDateNextFn(val, endDateArr, year, month) }
}).then((val) => { );
resolve({ // 禁用双向指定范围可用
dateDay: val, } else if (this.startDate != "" && this.endDate != "") {
year: year, let startDateArr = this.startDate.split("-");
month: month let endDateArr = this.endDate.split("-");
}) if (startDateArr.length == 3 && endDateArr.length == 3) {
}) this.disableDatePrevFn(dateShow, startDateArr, year, month)
} else if (endDateArr.length != 3) { .then((val) => {
console.error('error 日期选择范围-结束日期错误,如: 2019-5-12') return this.disableDateNextFn(val, endDateArr, year, month);
if (startDateArr.length != 3) { })
console.error('error 日期选择范围-开始日期错误,如: 2019-5-12') .then((val) => {
} resolve({
} dateDay: val,
// 禁用开始日期之前 year: year,
} else if (this.startDate != '') { month: month,
let startDateArr = this.startDate.split('-') });
if (startDateArr.length == 3) { });
this.disableDatePrevFn(dateShow, startDateArr, year, month).then((val) => { } else if (endDateArr.length != 3) {
resolve({ console.error("error 日期选择范围-结束日期错误,如: 2019-5-12");
dateDay: val, if (startDateArr.length != 3) {
year: year, console.error("error 日期选择范围-开始日期错误,如: 2019-5-12");
month: month }
}) }
}) // 禁用开始日期之前
} else { } else if (this.startDate != "") {
console.error('error 日期选择范围-开始日期错误,如: 2019-5-12') let startDateArr = this.startDate.split("-");
} if (startDateArr.length == 3) {
// 禁用结束日期之前 this.disableDatePrevFn(dateShow, startDateArr, year, month).then(
} else if (this.endDate != '') { (val) => {
let endDateArr = this.endDate.split('-') resolve({
if (endDateArr.length == 3) { dateDay: val,
this.disableDateNextFn(dateShow, endDateArr, year, month).then((val) => { year: year,
resolve({ month: month,
dateDay: val, });
year: year, }
month: month );
}) } else {
}) console.error("error 日期选择范围-开始日期错误,如: 2019-5-12");
} else { }
console.error('error 日期选择范围-结束日期错误,如: 2019-5-12') // 禁用结束日期之前
} } else if (this.endDate != "") {
// 不禁用 let endDateArr = this.endDate.split("-");
} else { if (endDateArr.length == 3) {
this.disableDatePrevFn(dateShow, new Array(3), year, month).then((val) => { this.disableDateNextFn(dateShow, endDateArr, year, month).then(
resolve({ (val) => {
dateDay: val, resolve({
year: year, dateDay: val,
month: month year: year,
}) month: month,
}) });
} }
}) );
}, } else {
// 禁用指定日期之前的日期 console.error("error 日期选择范围-结束日期错误,如: 2019-5-12");
disableDatePrevFn() { }
let DateObj = arguments, // 不禁用
dateShow = DateObj[0], } else {
dDate = DateObj[1], this.disableDatePrevFn(dateShow, new Array(3), year, month).then(
year = DateObj[2], (val) => {
month = DateObj[3] resolve({
return new Promise((resolve, reject) => { dateDay: val,
dateShow = dateShow.map((val, index) => { year: year,
if (dDate[0] > year) { month: month,
val.disable = true });
} else if (dDate[1] > month && dDate[0] >= year) { }
val.disable = true );
} else if (dDate[0] >= year && dDate[2] > val.day && dDate[1] >= month) { }
val.disable = true });
} },
return val // 禁用指定日期之前的日期
}) disableDatePrevFn() {
resolve(dateShow) let DateObj = arguments,
}) dateShow = DateObj[0],
}, dDate = DateObj[1],
// 禁用指定日期之后的日期 year = DateObj[2],
disableDateNextFn() { month = DateObj[3];
let DateObj = arguments, return new Promise((resolve, reject) => {
dateShow = DateObj[0], dateShow = dateShow.map((val, index) => {
dDate = DateObj[1], if (dDate[0] > year) {
year = DateObj[2], val.disable = true;
month = DateObj[3] } else if (dDate[1] > month && dDate[0] >= year) {
return new Promise((resolve, reject) => { val.disable = true;
dateShow = dateShow.map((val, index) => { } else if (
if (dDate[0] < year) { dDate[0] >= year &&
val.disable = true dDate[2] > val.day &&
} else if (dDate[0] <= year && dDate[1] < month) { dDate[1] >= month
val.disable = true ) {
} else if (dDate[0] <= year && dDate[1] <= month && dDate[2] < val.day) { val.disable = true;
val.disable = true }
} return val;
return val });
}) resolve(dateShow);
resolve(dateShow) });
}) },
}, // 禁用指定日期之后的日期
/**重新赋值 魔改 burtyang disableDateNextFn() {
* **/ let DateObj = arguments,
initDate(dataAll){ dateShow = DateObj[0],
this.storageDate = []; dDate = DateObj[1],
this.swiperData.dateDay.forEach((item)=>{ year = DateObj[2],
if(item.disable){ //不是当月的 month = DateObj[3];
return; return new Promise((resolve, reject) => {
} dateShow = dateShow.map((val, index) => {
let date = `${this.swiperData.year}-${this.swiperData.month}-${item.day}`; if (dDate[0] < year) {
if(dataAll.hasOwnProperty(date)){ val.disable = true;
item.Choice = true; } else if (dDate[0] <= year && dDate[1] < month) {
item.id = dataAll[date]; val.disable = true;
this.storageDate.push({ } else if (
date, dDate[0] <= year &&
id: dataAll[date]||'' dDate[1] <= month &&
}); dDate[2] < val.day
}else{ ) {
item.Choice = false; val.disable = true;
} }
}); return val;
}, });
// 确定 resolve(dateShow);
confirm() { });
this.$emit('confirmDate', true) },
}, /**重新赋值 魔改 burtyang
// 取消 * **/
cancle() { initDate(dataAll) {
this.$emit('cancleDate', true) this.storageDate = [];
} this.swiperData.dateDay.forEach((item) => {
}, if (item.disable) {
watch: { //不是当月的
'PriceData': { return;
handler(newData, oldData) { }
this.InitializationHomeDate(false).then((val) => { let date = `${this.swiperData.year}-${this.swiperData.month}-${item.day}`;
this.Preprocessing([this.year, this.month, this.day]) if (dataAll.hasOwnProperty(date)) {
}) item.Choice = true;
}, item.id = dataAll[date];
immediate: false, this.storageDate.push({
deep: true date,
} id: dataAll[date] || "",
} });
} } else {
item.Choice = false;
}
});
},
// 确定
confirm() {
this.$emit("confirmDate", true);
},
// 取消
cancle() {
this.$emit("cancleDate", true);
},
},
watch: {
scheduleList: {
immediate: true,
handler(val) {
console.log("监听", val, this.year, this.month);
this.schedules = val;
this.Preprocessing([this.year, this.month, "25"]);
},
},
PriceData: {
handler(newData, oldData) {
this.InitializationHomeDate(false).then((val) => {
this.Preprocessing([this.year, this.month, this.day]);
});
},
immediate: false,
deep: true,
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.content { .content {
width: 480px; width: 480px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
.body { .body {
width: 100%; width: 100%;
padding: 18px 33px; padding: 18px 33px;
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.head-body { .head-body {
width: 245px; width: 245px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 41px; height: 41px;
box-sizing: border-box; box-sizing: border-box;
padding: 5px 15px 10px 15px; padding: 5px 15px 10px 15px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: #333; color: #333;
.date-head { .date-head {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: #3F7FFB; color: #3f7ffb;
letter-spacing: 1px; letter-spacing: 1px;
} }
.prev { .prev {
img { img {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
.mian-body { .mian-body {
width: 100%; width: 100%;
height: calc(100% - 46px); height: calc(100% - 46px);
color: #333; color: #333;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.mian-bolck { .mian-bolck {
width: 100% / 7; width: 100% / 7;
padding: 4px 0; padding: 4px 0;
box-sizing: border-box; box-sizing: border-box;
font-size: 17px; font-size: 17px;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 3px 0; margin: 3px 0;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
.yellow { .yellow {
color:#FFCC00; color: #ffcc00;
} }
.border { .border {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
width: 31px; width: 31px;
height: 31px; height: 31px;
.price{ .price {
font-size: 12px; font-size: 12px;
} }
.day{ .day {
width: 31px; width: 31px;
height: 31px; height: 31px;
} }
span{ span {
font-size: 18px; font-size: 18px;
} }
} }
} }
.disable { .disable {
color: #e8e3e3; color: #e8e3e3;
} }
.Choice { .Choice {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
.day{ .day {
width: 31px; width: 31px;
height: 31px; height: 31px;
line-height: 31px; line-height: 31px;
background: #FFCC00; background: #ffcc00;
border-radius: 50%; border-radius: 50%;
color: #fff; color: #fff;
} }
} }
} }
} }
.foot { .foot {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 58px; margin-top: 58px;
button { button {
outline: none; outline: none;
border: none; border: none;
width: 109px; width: 109px;
height: 42px; height: 42px;
border-radius: 4px; border-radius: 4px;
} }
.confirm { .confirm {
background: #3F7FFB; background: #3f7ffb;
color: #fff; color: #fff;
} }
.cancle { .cancle {
background: #ccc; background: #ccc;
color: #fff; color: #fff;
} }
} }
} }
</style> </style>
src/views/flow/components/selectInstitution.vue
View file @ b8cd1f7b
...@@ -8,7 +8,11 @@ ...@@ -8,7 +8,11 @@
<ul class="area_box"> <ul class="area_box">
<li> <li>
<label>省：</label> <label>省：</label>
<a-select style="width: 120px" @change="handleSelectProvince" allowClear> <a-select
style="width: 120px"
@change="handleSelectProvince"
allowClear
>
<a-select-option <a-select-option
v-for="item in provinceList" v-for="item in provinceList"
:key="item.id" :key="item.id"
...@@ -79,14 +83,20 @@ ...@@ -79,14 +83,20 @@
</ul> </ul>
<div v-else class="hospital_none">暂无可选分院</div> <div v-else class="hospital_none">暂无可选分院</div>
</div> </div>
<div class="mask" v-if="datePickShow"> <div class="mask" v-if="datePickShow && showDatemask">
<reserve-date <reserve-date
ref="reserveDate1" ref="reserveDate1"
:scheduleList="getScheduleList"
@confirmDate="getConfirm" @confirmDate="getConfirm"
@cancleDate="getCancle" @cancleDate="getCancle"
@changeDay=" @changeDay="
(date) => { (date) => {
return dateChange(date, 0) return dateChange(date, 0);
}
"
@changeMonth="
(date) => {
return changeM(date);
} }
" "
/> />
...@@ -95,120 +105,148 @@ ...@@ -95,120 +105,148 @@
</template> </template>
<script> <script>
import api from '@/api/customer' import api from "@/api/customer";
import reserveDate from '../../../components/reserve-date' import reserveDate from "../../../components/reserve-date";
import moment from "moment";
export default { export default {
name: 'selectInstitution', name: "selectInstitution",
components: { components: {
reserveDate, reserveDate,
}, },
props: { props: {
id: { id: {
type: String | Number, type: String | Number,
default: '', default: "",
}, },
}, },
data() { data() {
return { return {
showDatemask: false,
datePickShow: false, datePickShow: false,
selectIndex: 0, selectIndex: 0,
provinceList: [], //省 provinceList: [], //省
cityList: [], //市 cityList: [], //市
areaList: [], //区 areaList: [], //区
provinceCode: '', //选择省 provinceCode: "", //选择省
cityCode: '', //选择市 cityCode: "", //选择市
areaCode: '', //选择区 areaCode: "", //选择区
mechanismList: [], //服务机构列表 mechanismList: [], //服务机构列表
hospitalList: [], //服务机构对应下的服务中心列表 hospitalList: [], //服务机构对应下的服务中心列表
isShowHospitalList: true, //是否显示服务中心列表 isShowHospitalList: true, //是否显示服务中心列表
supplierIds: '', //服务中心ids,默认显示全部 supplierIds: "", //服务中心ids,默认显示全部
servicepackageId: '', //产品id servicepackageId: "", //产品id
serviceDate: '', //预约的时间 serviceDate: "", //预约的时间
hospitalId: '', //医院id hospitalId: "", //医院id
supplierId: '', //选择服务中id supplierId: "", //选择服务中id
} getScheduleList: [], // 排期列表
};
}, },
created() { created() {
const { servicepackageId } = this.$route.query const { servicepackageId, id } = this.$route.query;
this.servicepackageId = servicepackageId ? servicepackageId : '' this.servicepackageId = servicepackageId ? servicepackageId : "";
this.getProvinceList() //获取省 this.id = id;
this.getSupplierList() //获取服务机构 this.getProvinceList(); //获取省
this.getSupplierList(); //获取服务机构
// 获取门店排期 // 获取门店排期
}, },
methods: { methods: {
// 获取门店排期
getScheduleByCode(beginDate, endDate) {
const query = {
code: JSON.stringify(this.hospitalId), //门店编码
beginDate, //开始时间
endDate, //结束时间
supplierId: this.supplierId, //机构id
chooseList: JSON.parse(window.localStorage.getItem("chooseList")), // 服务
payList: [], // 付费
servicepackageId: this.servicepackageId, // 服务包
customerId: this.id, // 客户id
};
api.getScheduleByCode(query).then((res) => {
if (res.content) {
this.getScheduleList = res.content;
}
this.showDatemask = true;
});
},
// 获取省 // 获取省
async getProvinceList() { async getProvinceList() {
const query = { const query = {
chooseList: JSON.parse(window.localStorage.getItem('chooseList')), chooseList: JSON.parse(window.localStorage.getItem("chooseList")),
servicepackageId: this.servicepackageId, servicepackageId: this.servicepackageId,
} };
await api.getProvinceList(query).then((res) => { await api.getProvinceList(query).then((res) => {
if (res.returnCode === '0000') { if (res.returnCode === "0000") {
this.provinceList = res.content this.provinceList = res.content;
} else { } else {
this.$message.error(res.returnMsg) this.$message.error(res.returnMsg);
} }
}) });
}, },
changeM(month) {
// 根据月份查可预约
this.getScheduleByCode(month.min, month.max);
console.log("下个月", month);
},
// 获取市 // 获取市
getCityListByProvinceCode() { getCityListByProvinceCode() {
const query = { const query = {
provinceCode: this.provinceCode, provinceCode: this.provinceCode,
chooseList: JSON.parse(window.localStorage.getItem('chooseList')), chooseList: JSON.parse(window.localStorage.getItem("chooseList")),
servicepackageId: this.servicepackageId, servicepackageId: this.servicepackageId,
} };
api.getCityListByProvinceCode(query).then((res) => { api.getCityListByProvinceCode(query).then((res) => {
if (res.returnCode === '0000') { if (res.returnCode === "0000") {
this.cityList = res.content this.cityList = res.content;
} else { } else {
this.$message.error(res.returnMsg) this.$message.error(res.returnMsg);
} }
}) });
}, },
// 获取区/城市 // 获取区/城市
getDistrictListByCityCode() { getDistrictListByCityCode() {
const query = { const query = {
cityCode: this.cityCode, cityCode: this.cityCode,
chooseList: JSON.parse(window.localStorage.getItem('chooseList')), chooseList: JSON.parse(window.localStorage.getItem("chooseList")),
servicepackageId: this.servicepackageId, servicepackageId: this.servicepackageId,
} };
api.getDistrictListByCityCode(query).then((res) => { api.getDistrictListByCityCode(query).then((res) => {
if (res.returnCode === '0000') { if (res.returnCode === "0000") {
this.areaList = res.content this.areaList = res.content;
} else { } else {
this.$message.error(res.returnMsg) this.$message.error(res.returnMsg);
} }
}) });
}, },
// 选择省 // 选择省
handleSelectProvince(value) { handleSelectProvince(value) {
console.log(`选择省provinceCode= ${value}`) console.log(`选择省provinceCode= ${value}`);
this.provinceCode = value||'' this.provinceCode = value || "";
this.cityCode = '' this.cityCode = "";
this.areaCode = '' this.areaCode = "";
this.getCityListByProvinceCode() // 根据省-获取市 this.getCityListByProvinceCode(); // 根据省-获取市
this.getSupplierList(); this.getSupplierList();
}, },
// 选择市 // 选择市
handleSelectCity(value) { handleSelectCity(value) {
console.log(`选择市CityCode= ${value}`) console.log(`选择市CityCode= ${value}`);
this.cityCode = value this.cityCode = value;
this.areaCode = '' this.areaCode = "";
this.getDistrictListByCityCode() // 根据市-获取区 this.getDistrictListByCityCode(); // 根据市-获取区
this.getSupplierList(); this.getSupplierList();
}, },
// 选择区 // 选择区
handleSelectDistrict(value) { handleSelectDistrict(value) {
this.areaCode = value this.areaCode = value;
console.log(`选择区DistrictCode= ${value}`) console.log(`选择区DistrictCode= ${value}`);
this.getSupplierList(); this.getSupplierList();
}, },
// 获取服务机构 // 获取服务机构
...@@ -217,39 +255,39 @@ export default { ...@@ -217,39 +255,39 @@ export default {
api api
.getSupplierList({ servicepackageId: this.servicepackageId }) .getSupplierList({ servicepackageId: this.servicepackageId })
.then((res) => { .then((res) => {
if (res.returnCode == '0000') { if (res.returnCode == "0000") {
const data = res.content const data = res.content;
// 提取所有的服务机构ids,并用逗号隔开,比如:1004,1007 // 提取所有的服务机构ids,并用逗号隔开,比如:1004,1007
this.supplierIds = data this.supplierIds = data
.map(function (e, i) { .map(function (e, i) {
return e.id return e.id;
}) })
.join(',') .join(",");
this.mechanismList = [ this.mechanismList = [
{ {
status: '0', status: "0",
supplierName: '全部', supplierName: "全部",
id: this.supplierIds, id: this.supplierIds,
}, },
...res.content, ...res.content,
] ];
console.log('this.supplierIds===', this.supplierIds) console.log("this.supplierIds===", this.supplierIds);
this.getShopByDistrictCode() //根据服务结构-显示可选择的服务中心,默认显示全部 this.getShopByDistrictCode(); //根据服务结构-显示可选择的服务中心,默认显示全部
} else { } else {
this.$message.error(res.returnMsg) this.$message.error(res.returnMsg);
} }
}) });
}, },
// 选择服务机构 // 选择服务机构
clickTab(index, id) { clickTab(index, id) {
this.selectIndex = index this.selectIndex = index;
console.log('选择服务机构id', index, id) console.log("选择服务机构id", index, id);
this.supplierIds = id this.supplierIds = id;
// 点击选择服务机构,显示该机构下的服务中心 // 点击选择服务机构,显示该机构下的服务中心
this.getShopByDistrictCode() this.getShopByDistrictCode();
}, },
// 根据服务机构-获取服务中心列表 // 根据服务机构-获取服务中心列表
...@@ -257,61 +295,57 @@ export default { ...@@ -257,61 +295,57 @@ export default {
const params = { const params = {
// customerSex: 'M', //性别 // customerSex: 'M', //性别
// customerMaritalStatus: '02', //婚姻状况 // customerMaritalStatus: '02', //婚姻状况
chooseList: JSON.parse(window.localStorage.getItem('chooseList')), chooseList: JSON.parse(window.localStorage.getItem("chooseList")),
payList: [], payList: [],
provinceCode: this.provinceCode, //省编号 provinceCode: this.provinceCode, //省编号
cityCode: this.cityCode, //市编号 cityCode: this.cityCode, //市编号
areaCode: this.areaCode, //区号 areaCode: this.areaCode, //区号
supplierIds: this.supplierIds, //服务机构d supplierIds: this.supplierIds, //服务机构d
location: ',', //经纬度 location: ",", //经纬度
servicepackageId: this.servicepackageId, //产品id servicepackageId: this.servicepackageId, //产品id
} };
api.getShopByDistrictCode(params).then((res) => { api.getShopByDistrictCode(params).then((res) => {
if (res.returnCode === '0000') { if (res.returnCode === "0000") {
this.isShowHospitalList = true this.isShowHospitalList = true;
this.hospitalList = res.content this.hospitalList = res.content;
console.log('根据服务机构-获取服务中心列表=', this.hospitalList) console.log("根据服务机构-获取服务中心列表=", this.hospitalList);
} else { } else {
this.isShowHospitalList = false this.isShowHospitalList = false;
// this.$message.error(res.returnMsg) // this.$message.error(res.returnMsg)
} }
}) });
}, },
// 获取门店排期
getScheduleByCode() {
const query = {
code: '', //门店编码
beginDate: '', //开始时间
endDate: '', //结束时间
supplierId: '', //机构id
}
api.getScheduleByCode(query).then((res) => {
console.log(res)
})
},
// 打开日期弹框 // 打开日期弹框
openDatePicker(item) { openDatePicker(item) {
if (item.isDisabled) { if (item.isDisabled) {
return return;
} }
this.supplierId = item.supplierId this.supplierId = item.supplierId;
this.hospitalId = item.id this.hospitalId = item.id;
this.datePickShow = true this.datePickShow = true;
// 查看排期
let month = moment().startOf("month").format("yyyyMM");
// let start = month + "1";
// let end = month + moment().daysInMonth();
this.getScheduleByCode("20211125", "20211225");
}, },
// 确认选择-"立即预约" // 确认选择-"立即预约"
getConfirm(val) { getConfirm(val) {
this.datePickShow = false this.datePickShow = false;
console.log('确认选择', val, this.serviceDate) this.showDatemask = false;
const _this = this console.log("确认选择", val, this.serviceDate);
const _this = this;
const query = { const query = {
dataSource: 'M', //数据来源P电脑PC ,M 手机 dataSource: "M", //数据来源P电脑PC ,M 手机
customerId: this.id, //客户id customerId: this.id, //客户id
servicepackageId: this.servicepackageId, //套餐id servicepackageId: this.servicepackageId, //套餐id
checkUnitCode: JSON.stringify(this.hospitalId), //预约门店code checkUnitCode: JSON.stringify(this.hospitalId), //预约门店code
serviceDate: this.serviceDate, //预约使用服务时间 serviceDate: this.serviceDate, //预约使用服务时间
chooseList: JSON.parse(window.localStorage.getItem('chooseList')), //选择服务列表 chooseList: JSON.parse(window.localStorage.getItem("chooseList")), //选择服务列表
payList: [], payList: [],
supplierId: this.supplierId, //供应商id supplierId: this.supplierId, //供应商id
hospitalId: this.hospitalId, //医院id hospitalId: this.hospitalId, //医院id
...@@ -324,54 +358,55 @@ export default { ...@@ -324,54 +358,55 @@ export default {
// serviceDate: '20211127', // serviceDate: '20211127',
// servicepackageId: 1043, // servicepackageId: 1043,
// supplierId: 1007, // supplierId: 1007,
} };
console.log('立即预约=', query) console.log("立即预约=", query);
// 弹窗-"你预约的日期为:xxxxxx" // 弹窗-"你预约的日期为:xxxxxx"
this.$confirm({ this.$confirm({
title: '预约时间确认', title: "预约时间确认",
content: `您预约的日期为： ${this.serviceDate}`, content: `您预约的日期为： ${this.serviceDate}`,
okText: '确认', okText: "确认",
cancelText: '取消', cancelText: "取消",
onOk() { onOk() {
// return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
// setTimeout(Math.random() > 0.5 ? resolve : reject, 1000) // setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
// }).catch(() => console.log('Oops errors!')) // }).catch(() => console.log('Oops errors!'))
api.addAppointment(query).then((res) => { api.addAppointment(query).then((res) => {
if (res.returnCode === '0000') { if (res.returnCode === "0000") {
console.log('立即预约=', res) console.log("立即预约=", res);
_this.$message.success('预约成功') _this.$message.success("预约成功");
// 提示预约成功,之后跳转到预约详情页面 // 提示预约成功,之后跳转到预约详情页面
setTimeout(() => { setTimeout(() => {
// 需要获取用户id // 需要获取用户id
_this.$router.push({ _this.$router.push({
name: 'Detail', name: "Detail",
query: { query: {
id: _this.id, id: _this.id,
}, },
}) });
}, 1000) }, 1000);
} else { } else {
_this.$message.error(res.returnMsg) _this.$message.error(res.returnMsg);
} }
}) });
}, },
onCancel() {}, onCancel() {},
}) });
}, },
getCancle(val) { getCancle(val) {
this.datePickShow = false this.datePickShow = false;
this.showDatemask = false;
}, },
dateChange(date, type) { dateChange(date, type) {
console.log(date) console.log(date);
if (date.length != 0) { if (date.length != 0) {
this.serviceDate = date[0].date this.serviceDate = date[0].date;
} }
}, },
}, },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -475,7 +510,7 @@ export default { ...@@ -475,7 +510,7 @@ export default {
padding: 20px; padding: 20px;
} }
} }
.ant-btn.ant-btn-primary{ .ant-btn.ant-btn-primary {
background: #3F7FFB; background: #3f7ffb;
} }
</style> </style>
src/views/flow/detail.vue
View file @ b8cd1f7b
...@@ -31,9 +31,9 @@ ...@@ -31,9 +31,9 @@
<span class="label">出生日期：</span> <span class="label">出生日期：</span>
<a-input :value="customerInfo.birthDate" disabled /> <a-input :value="customerInfo.birthDate" disabled />
</div> </div>
<div class="item tip"> <div class="item tip">
【温馨提醒：女士请注意婚姻状况的选择，未婚代表不做妇科项目，需要做妇科项目检测请选择已婚，谢谢理解！】 【温馨提醒：女士请注意婚姻状况的选择，未婚代表不做妇科项目，需要做妇科项目检测请选择已婚，谢谢理解！】
</div> </div>
</div> </div>
</div> </div>
...@@ -41,24 +41,24 @@ ...@@ -41,24 +41,24 @@
<!-- 预约详情 --> <!-- 预约详情 -->
<div class="detail"> <div class="detail">
<div class="title"><span class="point"></span>预约详情</div> <div class="title"><span class="point"></span>预约详情</div>
<ul class="items" v-for="item in appointmentList" :key="item.id"> <ul class="items">
<li> <li>
<div class="label">已选服务：</div> <div class="label">已选服务：</div>
<div class="detail_content"> <div class="detail_content">
{{item.servicepackageName}} {{ item.servicepackageName }}
</div> </div>
</li> </li>
<li> <li>
<div class="label">已选服务门店：</div> <div class="label">已选服务门店：</div>
<div class="detail_content">{{item.checkUnitName}}</div> <div class="detail_content">{{ item.checkUnitName }}</div>
</li> </li>
<li> <li>
<div class="label">已选服务门店地址：</div> <div class="label">已选服务门店地址：</div>
<div class="detail_content">{{item.shopAddress}}</div> <div class="detail_content">{{ item.shopAddress }}</div>
</li> </li>
<li> <li>
<div class="label">预约日期:</div> <div class="label">预约日期:</div>
<div class="detail_content">{{item.serviceAppDate}}</div> <div class="detail_content">{{ item.serviceAppDate }}</div>
</li> </li>
</ul> </ul>
<div class="tips"> <div class="tips">
...@@ -68,7 +68,17 @@ ...@@ -68,7 +68,17 @@
> >
</div> </div>
<div class="btns"> <div class="btns">
<a-button type="primary">预约中...</a-button> <a-button type="primary" disabled>{{
item.status === "88" ||
item.status === "99" ||
item.status === "1"
? "预约中..."
: item.status === "3"
? "取消中..."
: item.status === "7"
? "改约中..."
: "状态异常"
}}</a-button>
<a-button type="primary" @click="goIndexPage"> 回首页 </a-button> <a-button type="primary" @click="goIndexPage"> 回首页 </a-button>
</div> </div>
</div> </div>
...@@ -78,66 +88,69 @@ ...@@ -78,66 +88,69 @@
</template> </template>
<script> <script>
// import AppointmentDetail from './components/appointmentDetail' // import AppointmentDetail from './components/appointmentDetail'
import api from '@/api/customer' import api from "@/api/customer";
import { log } from 'util' import { log } from "util";
export default { export default {
name: 'Detail', name: "Detail",
components: { components: {
// AppointmentDetail, // AppointmentDetail,
}, },
data() { data() {
return { return {
id: '', //客户id id: "", //客户id
customerInfo: { customerInfo: {
name: '', name: "",
sex: '', sex: "",
idNo: '', idNo: "",
phone: '', phone: "",
birthDate: '', birthDate: "",
maritalStatus: '', maritalStatus: "",
}, //客户信息 }, //客户信息
tips: require('../../assets/imgs/detail/tips.png'), tips: require("../../assets/imgs/detail/tips.png"),
appointmentList: [], //已预约列表 appointmentList: [], //已预约列表
} item: {}, // 详情对象，通过路由带过来
};
}, },
created() { created() {
const { id } = this.$route.query const { id } = this.$route.query;
this.id = id console.log("对象带过来没?", this.$route);
this.getCustomerDetail()//获取客户信息 this.item = this.$route.params;
this.getAppointmentList()//获取客户的预约详情 this.id = id;
this.getCustomerDetail(); //获取客户信息
this.getAppointmentList(); //获取客户的预约详情
}, },
methods: { methods: {
// 获取客户信息 // 获取客户信息
getCustomerDetail() { getCustomerDetail() {
api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => { api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => {
if (res.returnCode == '0000') { if (res.returnCode == "0000") {
this.customerInfo = res.content this.customerInfo = res.content;
console.table('客户信息customerInfo=', this.customerInfo) console.table("客户信息customerInfo=", this.customerInfo);
} else { } else {
this.$message.error(res.returnMsg) this.$message.error(res.returnMsg);
} }
}) });
}, },
// 回首页 // 回首页
goIndexPage() { goIndexPage() {
this.$router.push({ this.$router.push({
name: 'Index', name: "Index",
query: { query: {
id: this.id, //客户id id: this.id, //客户id
}, },
}) });
}, },
// 获取预约详情 // 获取预约详情
getAppointmentList() { getAppointmentList() {
api.getAppointmentList({ id: parseInt(this.id) }).then((res) => { api.getAppointmentList({ id: parseInt(this.id) }).then((res) => {
if (res.returnCode == '0000') { if (res.returnCode == "0000") {
console.log('111111111111获取已预约列表==', res.content) console.log("111111111111获取已预约列表==", res.content);
this.appointmentList = res.content this.appointmentList = res.content;
} }
}) });
}, },
}, },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -180,10 +193,10 @@ export default { ...@@ -180,10 +193,10 @@ export default {
.item { .item {
display: flex; display: flex;
margin-top: 14px; margin-top: 14px;
&.tip{ &.tip {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
.label { .label {
display: inline-block; display: inline-block;
width: 120px; width: 120px;
......
src/views/flow/index.vue
View file @ b8cd1f7b
...@@ -106,9 +106,7 @@ export default { ...@@ -106,9 +106,7 @@ export default {
// 获取客户信息 // 获取客户信息
getCustomerDetail() { getCustomerDetail() {
console.log("ssss");
api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => { api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => {
console.log("sdadad", res.content);
if (res.returnCode == "0000") { if (res.returnCode == "0000") {
this.customerInfo = res.content; this.customerInfo = res.content;
console.table("客户信息customerInfo=", this.customerInfo); console.table("客户信息customerInfo=", this.customerInfo);
......
src/views/index/components/item.vue
View file @ b8cd1f7b
...@@ -23,7 +23,11 @@ ...@@ -23,7 +23,11 @@
>立即预约</a-button >立即预约</a-button
> >
<div class="date"> <div class="date">
{{ listType == 1 ? (' 有效期至：'+item.validityEnd ): ('预约体检日期：'+item.customerAppDate) }} {{
listType == 1
? " 有效期至：" + item.validityEnd
: "预约体检日期：" + item.customerAppDate
}}
</div> </div>
</div> </div>
</div> </div>
...@@ -31,16 +35,16 @@ ...@@ -31,16 +35,16 @@
<script> <script>
export default { export default {
name: 'item', name: "item",
components: {}, components: {},
props: { props: {
listType: { listType: {
type: String, type: String,
default: '', default: "",
}, },
id: { id: {
type: String | Number, type: String | Number,
default: '', default: "",
}, },
item: { item: {
type: Object, type: Object,
...@@ -49,35 +53,36 @@ export default { ...@@ -49,35 +53,36 @@ export default {
}, },
data() { data() {
return { return {
eyes: require('@/assets/imgs/index/eyes.png'), eyes: require("@/assets/imgs/index/eyes.png"),
} };
}, },
methods: { methods: {
// 立即预约 // 立即预约
handleSubmit() { handleSubmit() {
console.log('立即预约~', this.item.chooseList) console.log("立即预约~", this.item.chooseList);
// 本地存储数据-该产品下可选择的体检套餐 // 本地存储数据-该产品下可选择的体检套餐
window.localStorage.setItem('reservedInfo', JSON.stringify(this.item)) window.localStorage.setItem("reservedInfo", JSON.stringify(this.item));
this.$router.push({ this.$router.push({
name: 'Flow', name: "Flow",
query: { query: {
id: this.id, //客户id id: this.id, //客户id
servicepackageId: this.item.id, //产品id servicepackageId: this.item.id, //产品id
}, },
}) });
}, },
// 查看-预约详情 // 查看-预约详情
handleReadDetail() { handleReadDetail() {
this.$router.push({ this.$router.push({
name: 'Detail', name: "Detail",
query: { query: {
id: this.id, id: this.id,
}, },
}) params: this.item,
});
}, },
}, },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
......
src/views/index/index.vue
View file @ b8cd1f7b
...@@ -2,18 +2,33 @@ ...@@ -2,18 +2,33 @@
<div class="index"> <div class="index">
<div class="appointment"> <div class="appointment">
<div class="type"><span class="point"></span> 待预约的服务</div> <div class="type"><span class="point"></span> 待预约的服务</div>
<div v-if="packageList.length == 0" class="point_none">暂无可预约体检</div> <div v-if="packageList.length == 0" class="point_none">
暂无可预约体检
</div>
<div class="item-container" v-else> <div class="item-container" v-else>
<Item v-for="(item, index) in packageList" :item="item" :key="index" listType='1' :id="id"/> <Item
v-for="(item, index) in packageList"
:item="item"
:key="index"
listType="1"
:id="id"
/>
</div> </div>
</div> </div>
<div class="appointmented"> <div class="appointmented">
<div class="type"><span class="point"></span>已预约的服务</div> <div class="type"><span class="point"></span>已预约的服务</div>
<div v-if="appointmentList.length == 0" class="point_none">暂无已预约体检</div> <div v-if="appointmentList.length == 0" class="point_none">
暂无已预约体检
</div>
<div class="item-container" v-else> <div class="item-container" v-else>
<Item v-for="(item, index) in appointmentList" :item="item" :key="index" listType='2' :id="id"/> <Item
v-for="(item, index) in appointmentList"
:item="item"
:key="index"
listType="2"
:id="id"
/>
</div> </div>
</div> </div>
<!-- 新卡-初始对话框 --> <!-- 新卡-初始对话框 -->
<a-modal <a-modal
...@@ -28,125 +43,125 @@ ...@@ -28,125 +43,125 @@
</template> </template>
<script> <script>
import Item from './components/item.vue' import Item from "./components/item.vue";
import Form from './components/form.vue' import Form from "./components/form.vue";
import api from '@/api/customer' import api from "@/api/customer";
export default { export default {
components: { Item, Form }, components: { Item, Form },
data() { data() {
return { return {
id: '',//客户id id: "", //客户id
visible: false, //是否显示"个人基本信息填写"弹窗 visible: false, //是否显示"个人基本信息填写"弹窗
items: [ items: [
{ {
name: '体检套餐名称-某某单位-某某套餐', name: "体检套餐名称-某某单位-某某套餐",
detailUrl: 'http://baidu.com', detailUrl: "http://baidu.com",
type: 1, type: 1,
date: '2021-11-18', date: "2021-11-18",
}, },
{ {
name: '体检套餐名称-某某单位-某某套餐', name: "体检套餐名称-某某单位-某某套餐",
detailUrl: 'http://baidu.com', detailUrl: "http://baidu.com",
type: 1, type: 1,
date: '2021-11-18', date: "2021-11-18",
}, },
{ {
name: '体检套餐名称-某某单位-某某套餐', name: "体检套餐名称-某某单位-某某套餐",
detailUrl: 'http://baidu.com', detailUrl: "http://baidu.com",
type: 1, type: 1,
date: '2021-11-18', date: "2021-11-18",
}, },
{ {
name: '体检套餐名称-某某单位-某某套餐', name: "体检套餐名称-某某单位-某某套餐",
detailUrl: 'http://baidu.com', detailUrl: "http://baidu.com",
type: 1, type: 1,
date: '2021-11-18', date: "2021-11-18",
}, },
], ],
itemb: [ itemb: [
{ {
name: '体检套餐名称-某某单位-某某套餐', name: "体检套餐名称-某某单位-某某套餐",
detailUrl: 'http://baidu.com', detailUrl: "http://baidu.com",
type: 2, type: 2,
date: '2021-11-18', date: "2021-11-18",
}, },
{ {
name: '体检套餐名称-某某单位-某某套餐', name: "体检套餐名称-某某单位-某某套餐",
detailUrl: 'http://baidu.com', detailUrl: "http://baidu.com",
type: 2, type: 2,
date: '2021-11-18', date: "2021-11-18",
}, },
{ {
name: '体检套餐名称-某某单位-某某套餐', name: "体检套餐名称-某某单位-某某套餐",
detailUrl: 'http://baidu.com', detailUrl: "http://baidu.com",
type: 2, type: 2,
date: '2021-11-18', date: "2021-11-18",
}, },
{ {
name: '体检套餐名称-某某单位-某某套餐', name: "体检套餐名称-某某单位-某某套餐",
detailUrl: 'http://baidu.com', detailUrl: "http://baidu.com",
type: 2, type: 2,
date: '2021-11-18', date: "2021-11-18",
}, },
], ],
packageList:[],//待预约列表 packageList: [], //待预约列表
appointmentList:[]//已预约列表 appointmentList: [], //已预约列表
} };
}, },
created() { created() {
const { id } = this.$route.query const { id } = this.$route.query;
this.id = id this.id = id;
this.getCustomerDetail()//客户信息 this.getCustomerDetail(); //客户信息
this.getPackageList() //待预约列表 this.getPackageList(); //待预约列表
this.getAppointmentList() //已预约列表 this.getAppointmentList(); //已预约列表
}, },
methods: { methods: {
showModal() { showModal() {
this.visible = true this.visible = true;
}, },
handleHideModal(e) { handleHideModal(e) {
console.log(e) console.log(e);
this.visible = false this.visible = false;
}, },
// 获取客户详情 // 获取客户详情
getCustomerDetail() { getCustomerDetail() {
api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => { api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => {
if (res.returnCode == '0000') { if (res.returnCode == "0000") {
// 根据information是否显示'个人基本信息填写'弹窗(01:完善 02:不完善) // 根据information是否显示'个人基本信息填写'弹窗(01:完善 02:不完善)
res.content.information == '02' res.content.information == "02"
? (this.visible = true) ? (this.visible = true)
: (this.visible = false) : (this.visible = false);
} else { } else {
this.$message.error(res.returnMsg) this.$message.error(res.returnMsg);
} }
}) });
}, },
// 获取待预约列表 // 获取待预约列表
getPackageList() { getPackageList() {
api.getPackageList({ id: parseInt(this.id) }).then((res) => { api.getPackageList({ id: parseInt(this.id) }).then((res) => {
if (res.returnCode == '0000') { if (res.returnCode == "0000") {
console.log('获取待预约==', res.content) console.log("获取待预约==", res.content);
this.packageList = res.content this.packageList = res.content;
} }
// else { // else {
// this.$message.error(res.returnMsg) // this.$message.error(res.returnMsg)
// } // }
}) });
}, },
// 获取已预约列表 // 获取已预约列表
getAppointmentList() { getAppointmentList() {
api.getAppointmentList({ id: parseInt(this.id) }).then((res) => { api.getAppointmentList({ id: parseInt(this.id) }).then((res) => {
if (res.returnCode == '0000') { if (res.returnCode == "0000") {
console.log('获取已预约列表==', res.content) console.log("获取已预约列表==", res.content);
this.appointmentList = res.content this.appointmentList = res.content;
} }
// else { // else {
// this.$message.error(res.returnMsg) // this.$message.error(res.returnMsg)
// } // }
}) });
}, },
}, },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -192,7 +207,7 @@ export default { ...@@ -192,7 +207,7 @@ export default {
} }
} }
} }
.point_none{ .point_none {
padding: 26px; padding: 26px;
} }
</style> </style>
src/views/layout/footer.vue
View file @ b8cd1f7b
...@@ -92,11 +92,9 @@ ...@@ -92,11 +92,9 @@
background: #2c2c31; background: #2c2c31;
background-size: 100% 100%; background-size: 100% 100%;
padding: 58px 0 0 0; padding: 58px 0 0 0;
position: absolute;
width: 100%; width: 100%;
height: 180px; height: 180px;
bottom: 0px; box-sizing: border-box;
box-sizing:border-box;
.con_ { .con_ {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment