bonus
/
hz-zhhq-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hz-zhhq-app/pages/haircut/haircut.vue

792 lines
20 KiB
Vue
Raw Normal View History

first commit
2025-01-22 10:53:47 +08:00
<template>
<view class="hzIndex">
<hzHeader title="理发预约"></hzHeader>
<view class="hzContent" :style="{paddingBottom:currentTabIndex == 0?'300upx':'180upx'}">
<view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">
理发预约
<view class="tabBottom" v-if="currentTabIndex == 0"></view>
</view>
<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">
预约记录
<view class="tabBottom" v-if="currentTabIndex == 1"></view>
</view>
</view>
<!-- 理发预约表单 -->
<view class="form-box one" v-if="currentTabIndex == 0">
<!-- 选择日期 -->
<view class="selectDate">
<view class="dateTit">
<view class="leftIcon">
</view>
<text style="font-size:32upx;color:#333;font-weight: 600;">选择日期</text>
</view>
<scroll-view class="scrollDate" scroll-x="true">
<view class="dateItem" :class="chooseDateIndex == index ? 'time-active' : ''"
v-for="(item, index) in date" :key="index" @click="switchTab(index)">
<text class="time">{{ item.tiems.substr(5, 10) }}</text>
<text class="week">{{ item.week }}</text>
</view>
</scroll-view>
<view class="loc">
<image src="@/static/haircut/loc.png" mode=""></image>
<view v-for="(item, index) in places" :key="index" @click="choosePlace(item.id, item.name)">
<text class="round" :class="choosePlaceId == item.id ? 'barberactive' : ''"></text>
<text class="input_left">{{ item.name }}</text>
</view>
</view>
</view>
<!-- 选择地点 -->
<!-- 包含节假日及周六周日的判断 -->
<!-- <view v-if="this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1&&this.date[this.chooseDateIndex].week!='星期六'&&this.date[this.chooseDateIndex].week!='星期日')"> -->
<view class="timeInterval" style="margin-top: 20upx;"
v-if="this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1)">
<view class="dateTit">
<image src="@/static/haircut/date.png" mode=""></image>
<text style="font-size:30upx;color:#333;font-weight: 600;">选择时段</text>
</view>
<!-- 选择时间段 -->
<view class="selectInterval">
<view class="intervalItem"
:class="[chooseTime.id == item.haircut_time_id ? 'time-active' : '', item.status == '1' &&item.remain_count!= 0&&item.compareTime? '' : 'bg-gray']"
@click="item.status == '1' &&item.compareTime? checkItem(item.haircut_time_id, item.haircut_time, item.status, item.remain_count) : ''"
v-for="(item, index) in barber" :key="index">
<view class="time-text">{{ item.haircut_time }}</view>
</view>
</view>
</view>
<view class="tips">
<view class="tipsTit">
<image src="@/static/haircut/tz.png" mode=""></image>
<text>科技楼：每周一、三、五（10:00-18:00）</text>
</view>
<view class="tipsCont">
<text>会议中心：每周二、四、六、日（10:00-21:00）</text>
</view>
</view>
</view>
<!-- 预约记录列表 -->
<view v-else>
<view class="list-box" v-if="appointlist.length > 0">
<view class="detail" v-for="(item, index) in appointlist" :key="index">
<view class="detail_header">
<view style="display: flex;align-items: center;">
<image src="@/static/haircut/leftIcon.png" mode=""></image>
<text class="font-tilte">理发预约</text>
</view>
<text class="font-result" v-if="item.int_status==0">预约成功</text>
<text class="font-result" style="background-color: #FFEFE3;color: #FB8107;"
v-if="item.int_status==1">已取消</text>
<text class="font-result" style="background-color: #F6DFDF;color:#BD1515 "
v-if="item.int_status==2">客户未至</text>
</view>
<view class="detail_msg">
<view class="info-item">
<text>预约时间：</text>
<text class="infoSpan">{{ item.timeQ }}</text>
</view>
<view class="info-item">
<text>地点：</text>
<text class="infoSpan">{{ areas[item.barber_id||1]}}</text>
</view>
<view class="info-item">
<text>申请时间：</text>
<text class="infoSpan">{{ formatDate(item.apply_time,'m_Time') }}</text>
</view>
<!-- <view class="comment-btn bg-ccc" v-if="item.edit_own == 1">已修改</view> -->
</view>
<view class="infoBtn">
<view class="comment-btn" v-if="item.compareTimeCancle&&item.int_status==0"
@click="cancleHaircut(item)">取消</view>
<view class="comment-btn"
v-if="item.conmentStatus == 0 && item.compareTime&&item.int_status==0"
@click="goEvaluatePage(item.detailId)">评价</view>
<view class="comment-btn bg-ccc" v-if="item.conmentStatus == 1&&item.int_status==0">已评价
</view>
<view class="comment-btn" v-if="item.compareTimeEdit&&item.int_status==0"
@click="goEditPage(item,index)">修改</view>
</view>
</view>
</view>
<content-none :padTop="20" v-else></content-none>
</view>
</view>
<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
<view class="sub-btn"
v-if="currentTabIndex == 0&&(this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1))">
<view class="btn" @click="submit">提交预约</view>
</view>
</view>
</template>
<script>
import {
getAllDept,
initHaircut,
getHaircutBasicInfo,
saveHaircutInfo,
getMyHaircutList,
cancleHaircut
} from '@/common/api.js';
import {
callbackRequest,
getStorage,
getNumDate,
alertTip,
regPhone,
formatDate
} from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
export default {
components: {
loadMore,
contentNone
},
data() {
return {
//分页
page: 1,
pageSize: 10,
loadingType: 0, //0-loading前；1-loading中；2-没有更多了
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
user: getStorage('userInfo'),
currentTabIndex: 0, //当前选择的tab
appointlist: [
// {
// id: 189,
// detailId: 100224,
// userName: '王健兴ssss',
// placeName: '丽景酒店',
// conmentStatus: '1',
// timeQ: '2020-01-07 (09:00-13:00)',
// status: '预约成功',
// apply_time: 1578383782000
// }
], //预约记录列表
chooseTime: {
id: '',
time: ''
}, //选择的时间段 (几点到几点)
chooseDateIndex: 0, //当前选择的理发日期
userName: getStorage('userInfo').userName, //申请人姓名
userTel: getStorage('userInfo').telnumber, //申请人手机号
key: '1',
date: getNumDate(7), //获取今天起 最近7天时间
formatDate: formatDate,
choosePlaceId: '1', // 当前选择的地点
choosePlaceName: '会议中心',
areas: ['', '会议中心', '科技楼'],
places: [],
barber: [], //{ haircut_time_id: '1', haircut_time: '08:00-08:30', remain_count: 1, status: 0 }, // status 1空闲 2繁忙
submitFlag: true
};
},
onLoad(option) {
this.currentTabIndex = option.currentTabIndex || 0;
if (this.date[this.chooseDateIndex].weekDay == "1" || this.date[this.chooseDateIndex].weekDay == "3" || this
.date[this.chooseDateIndex].weekDay == "5") {
this.places = [{
id: '2',
name: '科技楼'
}];
this.choosePlaceId = '2';
this.choosePlaceName = '科技楼';
} else {
this.places = [{
id: '1',
name: '会议中心'
}];
this.choosePlaceId = '1';
this.choosePlaceName = '会议中心';
}
},
onShow() {
this.getCalendar();
if (this.currentTabIndex == 0) {
// 初始化
this.init();
} else {
this.page = 1;
this.loadingType = 0;
this.getList();
}
},
watch: {
currentTabIndex: function(newVal, oldVal) {
this.chooseTime.id = '';
this.chooseTime.time = '';
if (newVal == 1) {
this.page = 1;
this.loadingType = 0;
this.getList();
} else {
// 初始化
this.init();
}
}
},
onReachBottom() {
if (this.loadingType !== 0 || this.currentTabIndex == 0) {
return;
}
this.loadingType = 1;
this.page = this.page + 1;
this.getList();
},
methods: {
cancleHaircut(item) {
let params = {
method: cancleHaircut,
data: {
id: item.detailId,
intStatus: 1
}
};
callbackRequest(params).then(res => {
if (res.data.returnCode == 1) {
alertTip("已成功取消预约！");
this.page = 1;
this.loadingType = 0;
this.getList();
} else {
alertTip(res.data.returnMsg);
}
});
},
goEditPage(item, index) {
uni.navigateTo({
url: `/pages/haircut/haircut-edit?id=` + item.detailId + '&type=1'
});
},
compareTime(time1) {
var endTime = time1.split("-")[0];
var endDate = this.date[this.chooseDateIndex].tiems + " " + endTime;
endDate = endDate.replace(/-/g, '/');
var endDateTime = new Date(endDate).getTime();
24年问题修改代码
2025-02-25 15:19:01 +08:00
// var nowDateTime = new Date().getTime() + 3 * 60 * 60 * 1000;
var nowDateTime = new Date().getTime();
first commit
2025-01-22 10:53:47 +08:00
if (endDateTime > nowDateTime) {
return true;
} else {
return false;
}
},
compareTimeForRecord(date, time) {
var endTime = time.split(" ")[1].split("-")[0];
var endDate = date + " " + endTime;
endDate = endDate.replace(/-/g, '/');
var endDateTime = new Date(endDate).getTime();
var nowDateTime = new Date().getTime();
if (endDateTime < nowDateTime) {
return true;
} else {
return false;
}
},
compareTimeForEdit(date, time) {
var startTime = time.split(" ")[1].split("-")[0];
var startTime = date + " " + startTime;
startTime = startTime.replace(/-/g, '/');
var startDateTime = new Date(startTime).getTime();
var nowDateTime = new Date().getTime();
if (startDateTime - nowDateTime >= 30 * 60 * 1000) {
return true;
} else {
return false;
}
},
compareTimeForCancle(date, time) {
var startTime = time.split(" ")[1].split("-")[0];
var startTime = date + " " + startTime;
startTime = startTime.replace(/-/g, '/');
var startDateTime = new Date(startTime).getTime();
var nowDateTime = new Date().getTime();
if (startDateTime > nowDateTime) {
return true;
} else {
return false;
}
},
//选择日期
switchTab(index) {
if (this.chooseDateIndex != index) {
this.chooseDateIndex = index;
this.chooseTime.id = '';
this.chooseTime.time = '';
if (this.date[this.chooseDateIndex].weekDay == "1" || this.date[this.chooseDateIndex].weekDay == "3" ||
this.date[this.chooseDateIndex].weekDay == "5") {
this.places = [{
id: '2',
name: '科技楼'
}];
this.choosePlaceId = '2';
this.choosePlaceName = '科技楼';
} else {
this.places = [{
id: '1',
name: '会议中心'
}];
this.choosePlaceId = '1';
this.choosePlaceName = '会议中心';
}
this.init();
}
},
//选择地点
choosePlace(id, name) {
if (this.choosePlaceId != id) {
this.chooseTime.id = '';
this.chooseTime.time = '';
this.choosePlaceId = id;
this.choosePlaceName = name;
this.init();
}
},
// 选择时间段
checkItem(id, time, status, count) {
if (status == 2) {
alertTip('该时间段已预约');
return false;
} else if (count <= 0) {
alertTip('该时间段已约满');
return false;
}
this.$set(this.chooseTime, 'id', id);
this.$set(this.chooseTime, 'time', time);
},
init() {
//理发预约时间段剩余名额查询接口
let params = {
method: getHaircutBasicInfo,
data: {
userId: this.user.id,
haircutDate: this.date[this.chooseDateIndex].tiems,
barbershop: this.choosePlaceId
}
};
callbackRequest(params).then(res => {
if (this.date[this.chooseDateIndex].isholiday == 1) {
uni.showToast({
title: '今日节假日不可预约',
icon: 'none'
})
}
res = res.data;
console.log(res)
if (res.returnCode === '1') {
//this.kind = res.returnData[0].type;
this.barber = res.returnData[0].remain[0].haircut_remain;
for (var i = 0; i < this.barber.length; i++) {
var compareTime = this.compareTime(this.barber[i].haircut_time);
this.barber[i].compareTime = compareTime;
}
//this.chooseWorkerId = res.returnData[0].remain[0].barber_id;
//this.chooseWorkerName = res.returnData[0].remain[0].barber_name;
}
});
},
//提交预约
submit() {
if (!this.choosePlaceId) {
alertTip('请选择理发地点');
return false;
} else if (!this.chooseTime.time && !this.chooseTime.id) {
alertTip('请选择时间段');
return false;
} else if (this.userName.length == 0) {
alertTip('请输入联系人姓名');
return false;
} else if (!regPhone.test(this.userTel)) {
alertTip('请输入正确的手机号');
return false;
}
if (!this.submitFlag) {
return;
}
this.submitFlag = false;
let params = {
method: saveHaircutInfo,
data: {
applyDate: this.date[this.chooseDateIndex].tiems,
applyPersonName: this.userName,
applyPersonTel: this.userTel,
applyTime: this.chooseTime.time,
applyTimeId: this.chooseTime.id,
barbershopArea: this.choosePlaceId,
barberId: this.choosePlaceId,
//placeName: this.choosePlaceName,
//deptId:this.user.deptId,
userId: this.user.id
}
};
callbackRequest(params).then(res => {
let result = res.data;
if (result.returnCode == 1) {
alertTip('预约成功');
setTimeout(_ => {
this.submitFlag = true;
this.currentTabIndex = 1;
}, 2000);
} else {
this.submitFlag = true;
alertTip(result.returnMsg);
}
});
},
//获取列表记录接口
getList() {
// let lfDatas = uni.getStorageSync('lfDatas');
// this.appointlist = lfDatas;
let params = {
method: getMyHaircutList,
data: {
pageNum: this.page,
pageSize: this.pageSize,
userId: this.user.id
}
};
callbackRequest(params).then(res => {
if (res.data.returnCode == 1) {
if (this.page == 1) {
this.appointlist = res.data.returnData || [];
} else {
if (res.data.returnData.length > 0) {
this.appointlist = this.appointlist.concat(res.data.returnData);
this.loadingType = 0;
} else {
this.loadingType = 2;
}
}
for (var i = 0; i < this.appointlist.length; i++) {
var compareTime = this.compareTimeForRecord(this.appointlist[i].apply_date, this
.appointlist[i].timeQ);
var compareTimeEdit = this.compareTimeForEdit(this.appointlist[i].apply_date, this
.appointlist[i].timeQ);
var compareTimeCancle = this.compareTimeForCancle(this.appointlist[i].apply_date, this
.appointlist[i].timeQ);
this.appointlist[i].compareTime = compareTime;
this.appointlist[i].compareTimeEdit = compareTimeEdit;
this.appointlist[i].compareTimeCancle = compareTimeCancle;
}
}
});
},
goEvaluatePage(id) {
uni.navigateTo({
url: `/pages/order-form/evaluate?type=4&typeId=${id}`
});
},
getCalendar(params) {
let params2 = {
method: "greenCalendar/getCalendarList",
data: {
date_name: this.date[0].tiems,
}
};
callbackRequest(params2).then(res => {
if (res.data.returnCode == 1) {
var list = res.data.returnData;
for (var j = 0; j < this.date.length; j++) {
var fl = true;
for (var i = 0; i < list.length; i++) {
if (list[i].date_name == this.date[j].tiems) {
this.$set(this.date[j], 'isholiday', list[i].isholiday);
fl = false;
}
}
if (fl) {
this.$set(this.date[j], 'isholiday', '0');
}
}
}
});
},
}
};
</script>
<style lang="scss">
.sub-btn {
width: 100%;
height: 120upx;
background-color: #fff;
position: fixed;
bottom: 0;
color: #fff;
font-size: 32upx;
display: flex;
align-items: center;
justify-content: center;
.btn {
width: 94%;
height: 88upx;
border-radius: 44upx;
text-align: center;
line-height: 88upx;
background-image: linear-gradient(to right, #5BCE9D, #00ADA6);
}
}
.hzContent {
padding: 22upx;
margin-top: 150upx;
.bg-gray {
opacity: 0.6;
color: #999999 !important;
background-color: #F2F6FA !important;
}
.tab-box {
width: 80%;
display: flex;
font-size: 32upx;
color: #555555;
.active_tab {
font-weight: 800;
}
.tab-item {
width: 40%;
.tabBottom {
width: 28%;
height: 4upx;
border-radius: 5px;
background-image: linear-gradient(to right, #64E182, #1CA7B2);
}
}
}
.tips {
width: 100%;
padding: 20upx;
background-color: #fff;
border-radius: 20upx;
margin-top: 20upx;
color: #FB8107;
font-size: 28upx;
.tipsTit {
width: 100%;
display: flex;
align-items: center;
}
.tipsCont {
margin-left: 38upx;
display: flex;
flex-direction: column;
}
image {
width: 36upx;
height: 36upx;
}
}
.form-box {
margin-top: 20upx;
.loc {
margin-top: 20upx;
width: 100%;
display: flex;
align-items: center;
font-weight: bold;
font-size: 30upx;
color: #333333;
image {
width: 38upx;
height: 38upx;
margin-right: 10upx;
}
}
.dateTit {
width: 100%;
display: flex;
align-items: center;
image {
width: 35upx;
height: 35upx;
margin-right: 10upx;
}
.leftIcon {
width: 8upx;
height: 30upx;
background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
border-radius: 5px;
margin-right: 10upx;
}
}
.dateItem {
margin: 0 10upx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 28upx;
color: #555;
border-radius: 16upx;
padding: 18upx 20upx;
background-color: #F2F6FA;
border: 1px solid #F2F6FA;
}
.selectInterval {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.intervalItem {
width: 30%;
margin-top: 20upx;
padding: 15upx 20upx;
// background: #F2F6FA;
border-radius: 8upx;
font-weight: 400;
font-size: 28upx;
// color: #999999;
background: #EDFCF7;
color: #0DB0A7;
border: 1px solid rgba(0, 0, 0, 0);
}
}
.timeInterval,
.selectDate {
width: 100%;
padding: 20upx;
background-color: #fff;
border-radius: 20upx;
.time-active {
background: #EDFCF7;
color: #0DB0A7;
border: 1px solid #0DB0A7;
}
.scrollDate {
margin-top: 20upx;
white-space: nowrap;
}
/deep/::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/deep/.uni-scroll-view-content {
display: flex;
}
}
}
}
.list-box {
width: 100%;
.detail {
background-color: #fff;
border-radius: 20upx;
margin-top: 20upx;
padding: 20upx;
.detail_header {
width: 100%;
display: flex;
justify-content: space-between;
.font-tilte {
font-weight: bold;
font-size: 32upx;
color: #333333;
margin-left: 20upx;
}
.font-result {
font-weight: 400;
font-size: 24upx;
color: #0DB0A7;
padding: 10upx 30upx;
background: #C1EFEA;
border-radius: 30upx;
}
image {
width: 42upx;
height: 42upx;
}
}
.detail_msg {
font-weight: 400;
font-size: 28upx;
color: #999999;
margin-top: 20upx;
border-bottom: 1px solid #EBEFF7;
padding-bottom: 20upx;
.info-item {
margin-top: 20upx;
display: flex;
justify-content: space-between;
}
}
}
.infoBtn {
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 20upx;
font-size: 28upx;
color: #0DB0A7;
.comment-btn {
display: flex;
border-radius: 30upx;
margin-left: 20upx;
padding: 10upx 50upx;
border: 1px solid #0DB0A7;
}
}
.bg-ccc {
color: #CACACA;
border: 1px solid #CACACA !important;
}
}
</style>