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