Skip to content

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

bug修复

parent 95c2e5fb
Show whitespace changes
Inline Side-by-side
Showing with 969 additions and 794 deletions
src/components/reserve-date.vue
View file @ b8cd1f7b
...@@ -2,9 +2,15 @@ ...@@ -2,9 +2,15 @@
<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>
<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>
<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>
...@@ -12,18 +18,34 @@ ...@@ -12,18 +18,34 @@
</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"
class="mian-bolck"
:class="
val.disable == true ? 'disable' : val.Choice == true ? 'Choice' : ''
"
@click="ChoiceDate(index, val.disable)"
:key="index"
>
<div class="border"> <div class="border">
<span class="day">{{val.day}}</span> <span class="day">{{ val.day }}</span>
<p
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>
</div> </div>
...@@ -36,334 +58,406 @@ ...@@ -36,334 +58,406 @@
</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: {
// 排期
scheduleList: {
type: Array,
default: () => [],
},
//下一个月 //下一个月
nextMonth: { nextMonth: {
type: String, type: String,
default: '' default: "",
}, },
// 当前日期 // 当前日期
date: { date: {
type: String, type: String,
default: () => { default: () => {
let _dateData = new Date(), let _dateData = new Date(),
_date = `${_dateData.getFullYear()}-${_dateData.getMonth() + 1}-${_dateData.getDate()}` _date = `${_dateData.getFullYear()}-${
return _date _dateData.getMonth() + 1
} }-${_dateData.getDate()}`;
return _date;
},
}, },
// 禁用开始之前日期 // 禁用开始之前日期
startDate: { startDate: {
type: String, type: String,
default: '' default: "",
}, },
// 禁用开始之后日期 // 禁用开始之后日期
endDate: { endDate: {
type: String, type: String,
default: '' default: "",
}, },
// 是否禁用今天之前的日期 // 是否禁用今天之前的日期
disableBefore: { disableBefore: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
// 价格 // 价格
price: { price: {
type: Object, type: Object,
default: () => { default: () => {
return {type: false, data: []} return { type: false, data: [] };
} },
}, },
// 是否选择默认日期 // 是否选择默认日期
isNowDate: { isNowDate: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
// 单选或多选 // 单选或多选
singleElection: { singleElection: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
computed: { computed: {
PriceData: { PriceData: {
get() { get() {
return this.price.data return this.price.data;
} },
} },
}, },
created() { created() {
let dateArr = this.date.split('-') let dateArr = this.date.split("-");
if (this.date != '' && dateArr.length == 3) { if (this.date != "" && dateArr.length == 3) {
// 初始化年月日 // 初始化年月日
this.year = Number(dateArr[0]) this.year = Number(dateArr[0]);
this.month = Number(dateArr[1]) this.month = Number(dateArr[1]);
this.day = Number(dateArr[2]) this.day = Number(dateArr[2]);
this.InitializationHomeDate(true).then((val) => { this.InitializationHomeDate(true).then((val) => {
this.Preprocessing(dateArr) this.Preprocessing(dateArr);
if(this.nextMonth){ if (this.nextMonth) {
this.nextDate() this.nextDate();
} }
}) });
} else { } else {
console.error('error 请检查传入日期是否正确,如: 2019-5-12') console.error("error 请检查传入日期是否正确,如: 2019-5-12");
} }
}, },
methods: { methods: {
// 是否添加初始化日期 // 是否添加初始化日期
InitializationHomeDate(type) { InitializationHomeDate(type) {
// 指定日期 // 指定日期
let ThisDate = this.compareDate(this.date) let ThisDate = this.compareDate(this.date);
// 禁用开始时间 // 禁用开始时间
let startDate = this.compareDate(this.startDate) let startDate = this.compareDate(this.startDate);
// 禁用结束时间 // 禁用结束时间
let endDate = this.compareDate(this.endDate) let endDate = this.compareDate(this.endDate);
// 当前日期 // 当前日期
let _date = new Date() let _date = new Date();
let currDate = this.compareDate(`${_date.getFullYear()}-${_date.getMonth() + 1}-${_date.getDate()}`) let currDate = this.compareDate(
`${_date.getFullYear()}-${_date.getMonth() + 1}-${_date.getDate()}`
);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let judge = (this.disableBefore == false && this.startDate == '' && this.endDate == '') || // 没有任何禁止 let judge =
(this.disableBefore == false &&
this.startDate == "" &&
this.endDate == "") || // 没有任何禁止
(this.disableBefore == true && ThisDate >= currDate) || // 是否禁用今天之前的日期 (this.disableBefore == true && ThisDate >= currDate) || // 是否禁用今天之前的日期
(ThisDate >= startDate && this.disableBefore == false && this.startDate != '') || // 禁用只有开始时间，没有结束时间 (ThisDate >= startDate &&
(ThisDate <= endDate && this.disableBefore == false && this.endDate != '') || // 禁用只有结束时间，没有开始时间 this.disableBefore == false &&
(ThisDate <= endDate && this.disableBefore == false && ThisDate >= startDate && this.startDate != '' &&this.endDate != '') // 禁用结束时间，开始时间 this.startDate != "") || // 禁用只有开始时间，没有结束时间
(ThisDate <= endDate &&
this.disableBefore == false &&
this.endDate != "") || // 禁用只有结束时间，没有开始时间
(ThisDate <= endDate &&
this.disableBefore == false &&
ThisDate >= startDate &&
this.startDate != "" &&
this.endDate != ""); // 禁用结束时间，开始时间
if (this.isNowDate == false) { if (this.isNowDate == false) {
resolve(true) resolve(true);
return false return false;
} else if (judge && type) { } else if (judge && type) {
//this.storageDate.push({date: this.date}) //this.storageDate.push({date: this.date})
} }
resolve(true) resolve(true);
}) });
},
// 返回每个月第一天和最后一天
monthDays() {
// 椋鸟当前业务，返回第一天和最后一天
let d = new Date(this.year, this.month, 0);
let month = this.month < 10 ? "0" + this.month : this.month;
this.$emit("changeMonth", {
min: `${this.year}${month}01`,
max: `${this.year}${month}${d.getDate()}`,
});
}, },
// 时间转换为时间戳 // 时间转换为时间戳
compareDate(s1) { compareDate(s1) {
let curTime = new Date(); let curTime = new Date();
//把字符串格式转化为日期类 //把字符串格式转化为日期类
return s1 ? new Date(s1).valueOf() : false return s1 ? new Date(s1).valueOf() : false;
}, },
// 上一个月 // 上一个月
prevDeta() { prevDeta() {
let dateLen = new Date(this.year, this.month - 1, 0).getDate() let dateLen = new Date(this.year, this.month - 1, 0).getDate();
this.month = Number(this.month) - 1 this.month = Number(this.month) - 1;
if (this.month == 0) { if (this.month == 0) {
this.month = 12 this.month = 12;
this.year = Number(this.year) - 1 this.year = Number(this.year) - 1;
} }
this.Preprocessing([this.year, this.month, this.day]) this.Preprocessing([this.year, this.month, this.day]);
if (this.price.type) { if (this.price.type) {
this.$emit('changeMonth', [this.year, this.month, dateLen]) this.$emit("changeMonth", [this.year, this.month, dateLen]);
} }
// 椋鸟当前业务，返回第一天和最后一天
this.monthDays();
}, },
// 下一个月 // 下一个月
nextDate() { nextDate() {
let dateLen = new Date(this.year, this.month - 1, 0).getDate() let dateLen = new Date(this.year, this.month - 1, 0).getDate();
this.month = 1 + Number(this.month) this.month = 1 + Number(this.month);
if (this.month == 13) { if (this.month == 13) {
this.month = 1 this.month = 1;
this.year = 1 + Number(this.year) this.year = 1 + Number(this.year);
} }
this.Preprocessing([this.year, this.month, this.day]) this.Preprocessing([this.year, this.month, this.day]);
if (this.price.type) { if (this.price.type) {
this.$emit('changeMonth', [this.year, this.month, dateLen]) this.$emit("changeMonth", [this.year, this.month, dateLen]);
} }
// 椋鸟当前业务，返回第一天和最后一天
this.monthDays();
}, },
//将日期小于10的转为两位数， 9-> 09 //将日期小于10的转为两位数， 9-> 09
numberDouble(num) { numberDouble(num) {
return num < 10 ? '0' + num : num; return num < 10 ? "0" + num : num;
}, },
// 数据发布 // 数据发布
ChoiceDate(index, disable) { ChoiceDate(index, disable) {
let day = this.swiperData.dateDay[index].day 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 = {
date: `${this.swiperData.year}-${this.swiperData.month}-${day}`,
price: this.swiperData.dateDay[index].price,
_id,
};
} else { } else {
_date = {date: `${this.swiperData.year}-${this.swiperData.month}-${day}`, _id} _date = {
date: `${this.swiperData.year}-${this.swiperData.month}-${day}`,
_id,
};
} }
if (disable != true) { if (disable != true) {
// 添加数据 // 添加数据
if (JSON.stringify(this.storageDate).indexOf(_date.date) == -1) { if (JSON.stringify(this.storageDate).indexOf(_date.date) == -1) {
// 单选还是多选 // 单选还是多选
if (this.singleElection == true) { if (this.singleElection == true) {
this.storageDate = [] this.storageDate = [];
this.swiperData.dateDay.forEach((val, inde) => { this.swiperData.dateDay.forEach((val, inde) => {
val.Choice = false val.Choice = false;
}) });
// 多选 // 多选
} }
this.storageDate.push(_date) this.storageDate.push(_date);
// 删除数据 // 删除数据
} else { } else {
this.storageDate = this.storageDate.filter((val, index) => { this.storageDate = this.storageDate.filter((val, index) => {
if (val.date != _date.date) { if (val.date != _date.date) {
return val return val;
} }
}) });
} }
this.swiperData.dateDay[index].Choice = !_Choice this.swiperData.dateDay[index].Choice = !_Choice;
this.$emit('changeDay', this.storageDate) this.$emit("changeDay", this.storageDate);
} }
}, },
// 日期初始化 // 日期初始化
Preprocessing(arr) { Preprocessing(arr) {
let swiperData = {} let swiperData = {};
this.getDay(`${arr[0]}-${arr[1]}-${arr[2]}`).then((val) => { this.getDay(`${arr[0]}-${arr[1]}-${arr[2]}`).then((val) => {
swiperData = val swiperData = val;
this.$emit('changeDay', this.storageDate) console.log("不一样", this.schedules, swiperData, arr);
this.$set(this, 'swiperData', swiperData) for (let i = 0; i < swiperData.dateDay.length; i++) {
}) for (let k = 0; k < this.schedules.length; k++) {
if (
swiperData.dateDay[i].date &&
swiperData.dateDay[i].date === this.schedules[k].scheduleDate
) {
swiperData.dateDay[i].personCount = this.schedules[k].personCount;
swiperData.dateDay[i].disable = false;
console.log("没有执行？", swiperData.dateDay[i].disable);
}
}
}
console.log("产出", swiperData);
this.$emit("changeDay", this.storageDate);
this.$set(this, "swiperData", swiperData);
});
}, },
// 判断当前是 安卓还是ios ，传入不容的日期格式 // 判断当前是 安卓还是ios ，传入不容的日期格式
judgeDate(dateData) { judgeDate(dateData) {
if (typeof dateData !== 'object') { if (typeof dateData !== "object") {
dateData = dateData.replace(/-/g, '/') dateData = dateData.replace(/-/g, "/");
} }
return dateData return dateData;
}, },
// 循环上个月末尾几天添加到数组 // 循环上个月末尾几天添加到数组
getDay(dateData) { getDay(dateData) {
dateData = this.judgeDate(dateData) dateData = this.judgeDate(dateData);
// 获取年，月，日，星期 // 获取年，月，日，星期
let _date = new Date(dateData), let _date = new Date(dateData),
year = _date.getFullYear(), year = _date.getFullYear(),
month = _date.getMonth() + 1, month = _date.getMonth() + 1,
date = _date.getDate(), date = _date.getDate(),
day = _date.getDay() 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++) { for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
thisDayArr.push({ let date = `${year}${month < 10 ? "0" + month : month}${
i < 10 ? "0" + i : i
}`;
let obj = {
day: i, day: i,
disable: false, disable: true,
Choice: false, Choice: false,
price: this.price.data[i-1], price: this.price.data[i - 1],
priceType: this.price.type priceType: this.price.type,
}) date,
};
thisDayArr.push(obj);
// 重绘已选择日期 // 重绘已选择日期
this.storageDate.forEach((val, index) => { this.storageDate.forEach((val, index) => {
let valArr = val.date.split('-'); let valArr = val.date.split("-");
if (year == valArr[0] && month == valArr[1] && i == valArr[2]) { if (year == valArr[0] && month == valArr[1] && i == valArr[2]) {
thisDayArr[i - 1].Choice = false thisDayArr[i - 1].Choice = false;
val.price = this.price.data[i-1] val.price = this.price.data[i - 1];
} }
}) });
} }
// 获取下个月开始几天 // 获取下个月开始几天
let nextDayArr = [], let nextDayArr = [],
nextDaylength = 42 - (prevDayArr.length + thisDayArr.length) nextDaylength = 42 - (prevDayArr.length + thisDayArr.length);
for (let i = 1; i < nextDaylength + 1; i++) { for (let i = 1; i < nextDaylength + 1; i++) {
nextDayArr.push({ nextDayArr.push({
day: i, day: i,
disable: true, disable: true,
Choice: false Choice: false,
}) });
} }
// 数据合并 // 数据合并
let dateShow = [] let dateShow = [];
dateShow = dateShow.concat(prevDayArr, thisDayArr, nextDayArr) dateShow = dateShow.concat(prevDayArr, thisDayArr, nextDayArr);
// 禁用今天之前的日期 // 禁用今天之前的日期
if (this.disableBefore) { if (this.disableBefore) {
let __beForeDeta = new Date(), let __beForeDeta = new Date(),
dDate = `${__beForeDeta.getFullYear()}-${__beForeDeta.getMonth() + 1}-${__beForeDeta.getDate()}` dDate = `${__beForeDeta.getFullYear()}-${
this.disableDatePrevFn(dateShow, dDate.split('-'), year, month).then((val) => { __beForeDeta.getMonth() + 1
}-${__beForeDeta.getDate()}`;
this.disableDatePrevFn(dateShow, dDate.split("-"), year, month).then(
(val) => {
resolve({ resolve({
dateDay: val, dateDay: val,
year: year, year: year,
month: month month: month,
}) });
}) }
);
// 禁用双向指定范围可用 // 禁用双向指定范围可用
} else if (this.startDate != '' && this.endDate != '') { } else if (this.startDate != "" && this.endDate != "") {
let startDateArr = this.startDate.split('-') let startDateArr = this.startDate.split("-");
let endDateArr = this.endDate.split('-') let endDateArr = this.endDate.split("-");
if (startDateArr.length == 3 && endDateArr.length == 3) { if (startDateArr.length == 3 && endDateArr.length == 3) {
this.disableDatePrevFn(dateShow, startDateArr, year, month).then((val) => { this.disableDatePrevFn(dateShow, startDateArr, year, month)
return this.disableDateNextFn(val, endDateArr, year, month) .then((val) => {
}).then((val) => { return this.disableDateNextFn(val, endDateArr, year, month);
})
.then((val) => {
resolve({ resolve({
dateDay: val, dateDay: val,
year: year, year: year,
month: month month: month,
}) });
}) });
} else if (endDateArr.length != 3) { } else if (endDateArr.length != 3) {
console.error('error 日期选择范围-结束日期错误,如: 2019-5-12') console.error("error 日期选择范围-结束日期错误,如: 2019-5-12");
if (startDateArr.length != 3) { if (startDateArr.length != 3) {
console.error('error 日期选择范围-开始日期错误,如: 2019-5-12') console.error("error 日期选择范围-开始日期错误,如: 2019-5-12");
} }
} }
// 禁用开始日期之前 // 禁用开始日期之前
} else if (this.startDate != '') { } else if (this.startDate != "") {
let startDateArr = this.startDate.split('-') let startDateArr = this.startDate.split("-");
if (startDateArr.length == 3) { if (startDateArr.length == 3) {
this.disableDatePrevFn(dateShow, startDateArr, year, month).then((val) => { this.disableDatePrevFn(dateShow, startDateArr, year, month).then(
(val) => {
resolve({ resolve({
dateDay: val, dateDay: val,
year: year, year: year,
month: month month: month,
}) });
}) }
);
} else { } else {
console.error('error 日期选择范围-开始日期错误,如: 2019-5-12') console.error("error 日期选择范围-开始日期错误,如: 2019-5-12");
} }
// 禁用结束日期之前 // 禁用结束日期之前
} else if (this.endDate != '') { } else if (this.endDate != "") {
let endDateArr = this.endDate.split('-') let endDateArr = this.endDate.split("-");
if (endDateArr.length == 3) { if (endDateArr.length == 3) {
this.disableDateNextFn(dateShow, endDateArr, year, month).then((val) => { this.disableDateNextFn(dateShow, endDateArr, year, month).then(
(val) => {
resolve({ resolve({
dateDay: val, dateDay: val,
year: year, year: year,
month: month month: month,
}) });
}) }
);
} else { } else {
console.error('error 日期选择范围-结束日期错误,如: 2019-5-12') console.error("error 日期选择范围-结束日期错误,如: 2019-5-12");
} }
// 不禁用 // 不禁用
} else { } else {
this.disableDatePrevFn(dateShow, new Array(3), year, month).then((val) => { this.disableDatePrevFn(dateShow, new Array(3), year, month).then(
(val) => {
resolve({ resolve({
dateDay: val, dateDay: val,
year: year, year: year,
month: month month: month,
}) });
})
} }
}) );
}
});
}, },
// 禁用指定日期之前的日期 // 禁用指定日期之前的日期
disableDatePrevFn() { disableDatePrevFn() {
...@@ -371,20 +465,24 @@ ...@@ -371,20 +465,24 @@
dateShow = DateObj[0], dateShow = DateObj[0],
dDate = DateObj[1], dDate = DateObj[1],
year = DateObj[2], year = DateObj[2],
month = DateObj[3] month = DateObj[3];
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
dateShow = dateShow.map((val, index) => { dateShow = dateShow.map((val, index) => {
if (dDate[0] > year) { if (dDate[0] > year) {
val.disable = true val.disable = true;
} else if (dDate[1] > month && dDate[0] >= year) { } else if (dDate[1] > month && dDate[0] >= year) {
val.disable = true val.disable = true;
} else if (dDate[0] >= year && dDate[2] > val.day && dDate[1] >= month) { } else if (
val.disable = true dDate[0] >= year &&
} dDate[2] > val.day &&
return val dDate[1] >= month
}) ) {
resolve(dateShow) val.disable = true;
}) }
return val;
});
resolve(dateShow);
});
}, },
// 禁用指定日期之后的日期 // 禁用指定日期之后的日期
disableDateNextFn() { disableDateNextFn() {
...@@ -392,63 +490,76 @@ ...@@ -392,63 +490,76 @@
dateShow = DateObj[0], dateShow = DateObj[0],
dDate = DateObj[1], dDate = DateObj[1],
year = DateObj[2], year = DateObj[2],
month = DateObj[3] month = DateObj[3];
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
dateShow = dateShow.map((val, index) => { dateShow = dateShow.map((val, index) => {
if (dDate[0] < year) { if (dDate[0] < year) {
val.disable = true val.disable = true;
} else if (dDate[0] <= year && dDate[1] < month) { } else if (dDate[0] <= year && dDate[1] < month) {
val.disable = true val.disable = true;
} else if (dDate[0] <= year && dDate[1] <= month && dDate[2] < val.day) { } else if (
val.disable = true dDate[0] <= year &&
} dDate[1] <= month &&
return val dDate[2] < val.day
}) ) {
resolve(dateShow) val.disable = true;
}) }
return val;
});
resolve(dateShow);
});
}, },
/**重新赋值 魔改 burtyang /**重新赋值 魔改 burtyang
* **/ * **/
initDate(dataAll){ initDate(dataAll) {
this.storageDate = []; this.storageDate = [];
this.swiperData.dateDay.forEach((item)=>{ this.swiperData.dateDay.forEach((item) => {
if(item.disable){ //不是当月的 if (item.disable) {
//不是当月的
return; return;
} }
let date = `${this.swiperData.year}-${this.swiperData.month}-${item.day}`; let date = `${this.swiperData.year}-${this.swiperData.month}-${item.day}`;
if(dataAll.hasOwnProperty(date)){ if (dataAll.hasOwnProperty(date)) {
item.Choice = true; item.Choice = true;
item.id = dataAll[date]; item.id = dataAll[date];
this.storageDate.push({ this.storageDate.push({
date, date,
id: dataAll[date]||'' id: dataAll[date] || "",
}); });
}else{ } else {
item.Choice = false; item.Choice = false;
} }
}); });
}, },
// 确定 // 确定
confirm() { confirm() {
this.$emit('confirmDate', true) this.$emit("confirmDate", true);
}, },
// 取消 // 取消
cancle() { cancle() {
this.$emit('cancleDate', true) this.$emit("cancleDate", true);
} },
}, },
watch: { watch: {
'PriceData': { 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) { handler(newData, oldData) {
this.InitializationHomeDate(false).then((val) => { this.InitializationHomeDate(false).then((val) => {
this.Preprocessing([this.year, this.month, this.day]) this.Preprocessing([this.year, this.month, this.day]);
}) });
}, },
immediate: false, immediate: false,
deep: true deep: true,
} },
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -479,7 +590,7 @@ ...@@ -479,7 +590,7 @@
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 {
...@@ -510,7 +621,7 @@ ...@@ -510,7 +621,7 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
.yellow { .yellow {
color:#FFCC00; color: #ffcc00;
} }
.border { .border {
display: flex; display: flex;
...@@ -520,14 +631,14 @@ ...@@ -520,14 +631,14 @@
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;
} }
} }
...@@ -541,11 +652,11 @@ ...@@ -541,11 +652,11 @@
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;
} }
...@@ -565,7 +676,7 @@ ...@@ -565,7 +676,7 @@
border-radius: 4px; border-radius: 4px;
} }
.confirm { .confirm {
background: #3F7FFB; background: #3f7ffb;
color: #fff; color: #fff;
} }
.cancle { .cancle {
......
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,119 +105,147 @@ ...@@ -95,119 +105,147 @@
</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
...@@ -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,7 +193,7 @@ export default { ...@@ -180,7 +193,7 @@ 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;
} }
......
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