850 lines
21 KiB
Vue
850 lines
21 KiB
Vue
|
<template>
|
|||
|
|
<view class="hzIndex">
|
|||
|
|
<hzHeader title="理发预约受理"></hzHeader>
|
|||
|
|
<view class="container hzContent">
|
|||
|
|
<view class="main" :style="{paddingBottom:currentTabIndex == 0?'300upx':'180upx'}">
|
|||
|
|
<!-- <scroll-view scroll-x="true" class="scroll-view">
|
|||
|
|
<view class="time-item-box" :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="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="reservation-box" v-if="currentTabIndex == 0 ">
|
|||
|
|
<view class="selectDate">
|
|||
|
|
<scroll-view scroll-x="true" class="scroll-view">
|
|||
|
|
<view class="time-item-box" :class="chooseDateIndex == index ? 'time-active' : ''"
|
|||
|
|
v-for="(item,index) in date" :key="index" @click="switchTab(index)">
|
|||
|
|
<view class="time">{{item.tiems.substr(5,10)}}</view>
|
|||
|
|
<view class="week">{{item.week}}</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<!-- <view class="barber">
|
|||
|
|
<view style="font-size: 14px;color:#666">地点：</view>
|
|||
|
|
<view class="barber-box">
|
|||
|
|
<view class="barber-item" v-for="(item, index) in placeArr"
|
|||
|
|
:class="placeArrIndex == index ? 'barberactive' : ''" :key="index"
|
|||
|
|
@click="choosePlace(index)">
|
|||
|
|
{{item}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<!-- 预约记录列表 -->
|
|||
|
|
<view v-if="timelist.length > 0" class="flex-item">
|
|||
|
|
<view class="order-detail" v-for="(item, index) in timelist" :key="index">
|
|||
|
|
<view class="detail" v-if="item.apply_person_name!=null">
|
|||
|
|
<view class="row-1">
|
|||
|
|
<view class="text_time">{{ item.haircut_time }}</view>
|
|||
|
|
<!-- <view class="text_cph">{{ item.licenseplate }}</view>
|
|||
|
|
<view class="text_loc">{{ item.apply_place }}</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="row-2">
|
|||
|
|
<view class="text_name">{{ item.apply_person_name }}</view>
|
|||
|
|
<view class="text_tel">{{ item.apply_person_tel }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-btn">
|
|||
|
|
<view v-if="item.countData ==1" @click="cancleHaircut(item)" class="qc-btn">客户未至
|
|||
|
|
</view>
|
|||
|
|
<!-- <view v-if="item.endremind ==0" @click="remindPickUpCar(item)" class="qc-btn">通知取车
|
|||
|
|
</view>
|
|||
|
|
<view v-if="item.endremind > 0" class="qc-btn bg-gray">已通知</view> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="detail-empty" v-if="item.apply_person_name==''||item.apply_person_name==null">
|
|||
|
|
<view class="no-time">{{ item.haircut_time }}</view>
|
|||
|
|
<view class="no-text">无预约</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<content-none v-else :padTop="25"></content-none>
|
|||
|
|
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
|
|||
|
|
<view class="fixedView">
|
|||
|
|
<view>预约人数 ：<text style="font-size: 32upx;color: #0DB0A7;">{{orderNum}}</text> 人</view>
|
|||
|
|
<view v-if="chooseDateIndex==0">
|
|||
|
|
<view @click="remindForHairCut()" class="tx-style">
|
|||
|
|
提醒下一位</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="content" >
|
|||
|
|
<view v-if="timelist.length > 0" >
|
|||
|
|
<view class="order-detail" v-for="(item, index) in timelist" :key="index">
|
|||
|
|
<view class="detail" v-if="item.countData==1" >
|
|||
|
|
<view style="color: #00c277;height:25px;margin: 0upx;">{{ item.haircut_time }}</view>
|
|||
|
|
<view style="color: #00c277;height:25px;margin: 0upx;">{{ item.apply_person_name }} {{ item.apply_person_tel }}</view>
|
|||
|
|
<view style="color: #00c277;height:20px;margin: 0upx;">{{areas[item.barber_id]}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="detail" v-if="item.countData!=1">
|
|||
|
|
<view style="height:25px;margin: 0upx;">{{ item.haircut_time }}</view>
|
|||
|
|
<view style="height:45px;line-height: 45px;margin: 0upx;">无预约</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="height: 25px;margin: 0px;">
|
|||
|
|
<view style="height: 25px;margin: 0px;" v-if="item.countData ==1" @click="cancleHaircut(item)" class="qc-btn" >客户未至</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="order-detail" style="height: 120upx;border: none;">
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="fixedView" >
|
|||
|
|
<view style="float: left;width: 40%;">预约人数 ：{{orderNum}}人</view>
|
|||
|
|
<view v-if="chooseDateIndex==0" style="float: right;width: 40%;padding-right: 20upx;text-align: right;">
|
|||
|
|
<view @click="remindForHairCut()" style="height: 60upx;line-height: 60upx;margin-top: 20upx;color: #00C277;border:2upx solid #00C277;text-align: center;border-radius: 10upx;" >提醒下一位</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="height: 110upx;"></view>
|
|||
|
|
</view> -->
|
|||
|
|
<view v-if="currentTabIndex==1">
|
|||
|
|
<view class="search-box">
|
|||
|
|
<view class="form-item searchv">
|
|||
|
|
<picker class="time-data" mode="date" @change="startDateChange">
|
|||
|
|
<view class="">{{ startDate }}</view>
|
|||
|
|
</picker>
|
|||
|
|
<text class="timecenter">至</text>
|
|||
|
|
<picker class="time-data" mode="date" @change="endDateChange">
|
|||
|
|
<view class="">{{ endDate }}</view>
|
|||
|
|
</picker>
|
|||
|
|
<!-- <view class="search" style="height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchYjList">搜索</view> -->
|
|||
|
|
<!-- <image style="width: 5vh;height: 5vh;margin-left: 1vh;" @click="search" src="/static/icons/seach.png" mode=""></image>
|
|||
|
|
-->
|
|||
|
|
</view>
|
|||
|
|
<view class="tj-box">
|
|||
|
|
<text style="font-size: 28upx; color: #666666;">时段内预约总数：</text>
|
|||
|
|
<text style="font-size: 32upx;color: #0DB0A7;">{{count}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-box" v-if="appointlist.length > 0">
|
|||
|
|
<view class="detail-box" v-for="(item, index) in appointlist" :key="index">
|
|||
|
|
<view class="detail_header">
|
|||
|
|
<image class="blueSign" src="@/static/haircut/leftIcon.png" mode=""></image>
|
|||
|
|
<text class="font-tilte">理发预约</text>
|
|||
|
|
<!-- <text class="slect_icon"></text> -->
|
|||
|
|
<text class="font-result" v-if="item.int_status==0">预约成功</text>
|
|||
|
|
<text class="font-result" v-if="item.int_status==1" style="color: #666666;">已取消</text>
|
|||
|
|
<text class="font-result" v-if="item.int_status==2" style="color: red;">客户未至</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="detail_msg">
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text>预约人员：</text>
|
|||
|
|
<text class="infoSpan">{{ item.userName }}</text>
|
|||
|
|
</view>
|
|||
|
|
<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) }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<content-none :padTop="20" v-else></content-none>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
initHaircutForBarber,
|
|||
|
|
getBasicInfoForBarber,
|
|||
|
|
getHaircutList,
|
|||
|
|
remindForHairCut,
|
|||
|
|
cancleHaircut,
|
|||
|
|
getAllHaircutList
|
|||
|
|
} from '@/common/api.js';
|
|||
|
|
import {
|
|||
|
|
callbackRequest,
|
|||
|
|
getStorage,
|
|||
|
|
alertTip,
|
|||
|
|
formatDate,
|
|||
|
|
getNumDate
|
|||
|
|
} from '@/common/util.js';
|
|||
|
|
import contentNone from '@/components/contentNone.vue';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userInfo: getStorage('userInfo'),
|
|||
|
|
pos: 0,
|
|||
|
|
timelist: [],
|
|||
|
|
kind: [],
|
|||
|
|
barber: ['李师傅', '杨师傅'],
|
|||
|
|
isActive: -9,
|
|||
|
|
kindActive: 0,
|
|||
|
|
barber1: 0,
|
|||
|
|
barber2: 1,
|
|||
|
|
barberActive: 0,
|
|||
|
|
barberActive1: -1,
|
|||
|
|
part: '',
|
|||
|
|
name: '',
|
|||
|
|
tel: '',
|
|||
|
|
key: true,
|
|||
|
|
date: getNumDate(7),
|
|||
|
|
chooseDateIndex: 0,
|
|||
|
|
fagtime: '',
|
|||
|
|
orderNum: 0,
|
|||
|
|
areas: ['', '会议中心', '科技楼'],
|
|||
|
|
places: [],
|
|||
|
|
choosePlaceId: '', // 当前选择的地点
|
|||
|
|
choosePlaceName: '',
|
|||
|
|
currentTabIndex: 0,
|
|||
|
|
//分页
|
|||
|
|
page: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
loadingType: 0, //0-loading前；1-loading中；2-没有更多了
|
|||
|
|
contentText: {
|
|||
|
|
contentdown: '上拉加载更多',
|
|||
|
|
contentrefresh: '正在加载...',
|
|||
|
|
contentnomore: '没有更多数据了'
|
|||
|
|
},
|
|||
|
|
user: getStorage('userInfo'),
|
|||
|
|
appointlist: [],
|
|||
|
|
date: getNumDate(7), //获取今天起 最近7天时间
|
|||
|
|
formatDate: formatDate,
|
|||
|
|
placeArrIndex: 0,
|
|||
|
|
formatDate: formatDate,
|
|||
|
|
startDate: this.getDay(-7),
|
|||
|
|
endDate: this.getDay(0),
|
|||
|
|
count: 0,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
contentNone
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
currentTabIndex: function(newVal, oldVal) {
|
|||
|
|
if (newVal == 1) {
|
|||
|
|
this.page = 1;
|
|||
|
|
this.loadingType = 0;
|
|||
|
|
this.getList();
|
|||
|
|
} else {
|
|||
|
|
// 初始化
|
|||
|
|
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.initData();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
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.initData();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initData() {
|
|||
|
|
let params = {
|
|||
|
|
method: initHaircutForBarber,
|
|||
|
|
data: {
|
|||
|
|
userId: this.userInfo.id,
|
|||
|
|
applyDate: this.date[this.chooseDateIndex].tiems,
|
|||
|
|
barbershop: this.choosePlaceId
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(params).then(res => {
|
|||
|
|
res = res.data;
|
|||
|
|
this.timelist = res.returnData[0].remain;
|
|||
|
|
this.orderNum = 0;
|
|||
|
|
for (var i = 0; i < this.timelist.length; i++) {
|
|||
|
|
this.orderNum += this.timelist[i].countData;
|
|||
|
|
}
|
|||
|
|
// this.fagtime = this.timelist[0].apply_time_id;
|
|||
|
|
// this.isActive = this.timelist[0].apply_time_id;
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
// this.checkItem(this.fagtime);
|
|||
|
|
// }, 100);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
remindForHairCut() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认',
|
|||
|
|
content: '请确认是否发起提醒。',
|
|||
|
|
showCancel: true,
|
|||
|
|
cancelText: '取消',
|
|||
|
|
confirmText: '确认',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
let params = {
|
|||
|
|
method: remindForHairCut,
|
|||
|
|
data: {
|
|||
|
|
userId: this.userInfo.id,
|
|||
|
|
barbershop: this.choosePlaceId
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(params).then(res => {
|
|||
|
|
if (res.data.returnCode == 1) {
|
|||
|
|
alertTip("已成功通知下一位！");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else if (res.cancel) {}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
cancleHaircut(item) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认',
|
|||
|
|
content: '请确认是否设置为客户未至！',
|
|||
|
|
showCancel: true,
|
|||
|
|
cancelText: '取消',
|
|||
|
|
confirmText: '确认',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
let params = {
|
|||
|
|
method: cancleHaircut,
|
|||
|
|
data: {
|
|||
|
|
id: item.id,
|
|||
|
|
intStatus: 2
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(params).then(res => {
|
|||
|
|
if (res.data.returnCode == 1) {
|
|||
|
|
alertTip(res.data.returnMsg);
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
this.initData();
|
|||
|
|
}, 1000);
|
|||
|
|
} else {
|
|||
|
|
alertTip(res.data.returnMsg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else if (res.cancel) {}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//切换日期
|
|||
|
|
switchTab: function(i) {
|
|||
|
|
this.chooseDateIndex = i;
|
|||
|
|
this.isActive = '';
|
|||
|
|
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.initData();
|
|||
|
|
},
|
|||
|
|
checkItem: function(id) {
|
|||
|
|
var self = this;
|
|||
|
|
self.isActive = id;
|
|||
|
|
},
|
|||
|
|
handle: function(index) {
|
|||
|
|
this.kindActive = index;
|
|||
|
|
},
|
|||
|
|
check: function(index) {
|
|||
|
|
this.barberActive = index;
|
|||
|
|
},
|
|||
|
|
cancel: function(item) {
|
|||
|
|
if (confirm('是否取消')) {
|
|||
|
|
var self = this;
|
|||
|
|
item.id;
|
|||
|
|
// request.visitorInfoUpdateStatus({
|
|||
|
|
// applyType: "06",
|
|||
|
|
// applyId: item.id,
|
|||
|
|
// status: "3"
|
|||
|
|
// }, function(res) {
|
|||
|
|
// if (res.returnCode == 1) {
|
|||
|
|
// self.checkItem(self.isActive);
|
|||
|
|
// mui.toast("取消成功", {
|
|||
|
|
// duration: "long"
|
|||
|
|
// });
|
|||
|
|
// request.getBasicInfoForBarber({
|
|||
|
|
// applyDate: self.haircutDate
|
|||
|
|
// }, function(res) {
|
|||
|
|
// vm.kind = res.returnData[0].kind;
|
|||
|
|
// vm.timelist = res.returnData[0].remain.slice(0, 2)
|
|||
|
|
// })
|
|||
|
|
// } else mui.toast(res.returnMsg, {
|
|||
|
|
// duration: "long"
|
|||
|
|
// })
|
|||
|
|
// })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onNavigationBarButtonTap(e) {
|
|||
|
|
const index = e.index;
|
|||
|
|
if (index == 0) {
|
|||
|
|
var url = "/pages/haircut-order/haircut-history";
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
change: function(id) {
|
|||
|
|
var self = this;
|
|||
|
|
storage.set({
|
|||
|
|
id: id,
|
|||
|
|
openType: 8
|
|||
|
|
});
|
|||
|
|
window.location.href = './haircut.html';
|
|||
|
|
},
|
|||
|
|
getList() {
|
|||
|
|
// let lfDatas = uni.getStorageSync('lfDatas');
|
|||
|
|
// this.appointlist = lfDatas;
|
|||
|
|
let params = {
|
|||
|
|
method: getAllHaircutList,
|
|||
|
|
data: {
|
|||
|
|
pageNum: this.page,
|
|||
|
|
pageSize: this.pageSize,
|
|||
|
|
startDate: this.startDate,
|
|||
|
|
endDate: this.endDate,
|
|||
|
|
userId: this.user.id
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(params).then(res => {
|
|||
|
|
if (res.data.returnCode == 1) {
|
|||
|
|
if (this.page == 1) {
|
|||
|
|
this.appointlist = res.data.returnData.list || [];
|
|||
|
|
this.count = res.data.returnData.count || 0;
|
|||
|
|
} else {
|
|||
|
|
if (res.data.returnData.length > 0) {
|
|||
|
|
this.appointlist = this.appointlist.concat(res.data.returnData.list);
|
|||
|
|
this.loadingType = 0;
|
|||
|
|
} else {
|
|||
|
|
this.loadingType = 2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
startDateChange: function(e) {
|
|||
|
|
this.startDate = e.target.value;
|
|||
|
|
this.page = 1;
|
|||
|
|
this.loadingType = 0;
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
endDateChange: function(e) {
|
|||
|
|
this.endDate = e.target.value;
|
|||
|
|
this.page = 1;
|
|||
|
|
this.loadingType = 0;
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
getDay(i) {
|
|||
|
|
var date1 = new Date(new Date().getTime() + i * 24 * 60 * 60 * 1000);
|
|||
|
|
|
|||
|
|
var year = date1.getFullYear();
|
|||
|
|
var month = date1.getMonth() + 1;
|
|||
|
|
if (month < 10) {
|
|||
|
|
month = "0" + month;
|
|||
|
|
}
|
|||
|
|
var day = date1.getDate();
|
|||
|
|
if (day < 10) {
|
|||
|
|
day = "0" + day;
|
|||
|
|
}
|
|||
|
|
return year + '-' + month + '-' + day;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import url('../../static/css/haircut-order.css');
|
|||
|
|
|
|||
|
|
.main {
|
|||
|
|
.tab-box {
|
|||
|
|
width: 80%;
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 36upx;
|
|||
|
|
color: #555555;
|
|||
|
|
|
|||
|
|
.active_tab {
|
|||
|
|
font-weight: 800;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
width: 40%;
|
|||
|
|
|
|||
|
|
.tabBottom {
|
|||
|
|
width: 28%;
|
|||
|
|
height: 6upx;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
background-image: linear-gradient(to right, #64E182, #1CA7B2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
padding: 22upx;
|
|||
|
|
margin-top: 150upx;
|
|||
|
|
background-color: unset;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectDate {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
// padding-bottom: 24upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-view {
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
padding: 26upx 8upx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
|
|||
|
|
.time-item-box {
|
|||
|
|
margin: 0 8upx;
|
|||
|
|
display: inline-block;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #555;
|
|||
|
|
border-radius: 16upx;
|
|||
|
|
padding: 18upx 20upx;
|
|||
|
|
background-color: #F2F6FA;
|
|||
|
|
border: 1px solid #F2F6FA;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-active {
|
|||
|
|
background: #EDFCF7;
|
|||
|
|
color: #0DB0A7;
|
|||
|
|
border: 1px solid #0DB0A7;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-item {
|
|||
|
|
margin-top: 24upx;
|
|||
|
|
padding: 24upx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
padding-top: 0;
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.detail {
|
|||
|
|
background: #EDFCF7;
|
|||
|
|
padding: 24upx;
|
|||
|
|
display: grid;
|
|||
|
|
|
|||
|
|
.row-1 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.text_time {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 32upx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_cph {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #555555;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_loc {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #0DB0A7;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row-2 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: start;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #555555;
|
|||
|
|
border-bottom: 1px dashed #B4E1DE;
|
|||
|
|
|
|||
|
|
.text_name {
|
|||
|
|
margin-right: 24upx;
|
|||
|
|
line-height: 70upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_tel {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-btn {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #0DB0A7;
|
|||
|
|
text-align: center;
|
|||
|
|
justify-self: end;
|
|||
|
|
margin-top: 24upx;
|
|||
|
|
|
|||
|
|
.qc-btn {
|
|||
|
|
width: 92*2upx;
|
|||
|
|
height: 32*2upx;
|
|||
|
|
border-radius: 32upx;
|
|||
|
|
border: 1px solid #0DB0A7;
|
|||
|
|
line-height: 32*2upx;
|
|||
|
|
margin-left: 24upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-detail {
|
|||
|
|
margin-top: 24upx;
|
|||
|
|
border-radius: 6*2upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-detail .bg-gray {
|
|||
|
|
background-color: #cfcfcf;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-empty {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 46*2upx;
|
|||
|
|
background: #F2F6FA;
|
|||
|
|
border-radius: 16upx;
|
|||
|
|
padding: 0 24upx;
|
|||
|
|
|
|||
|
|
.no-time {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 16*2upx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 46*2upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #CACACA;
|
|||
|
|
line-height: 46*2upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-box {
|
|||
|
|
margin-top: 36upx;
|
|||
|
|
padding: 24upx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.searchv {
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timecenter {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
margin-left: 10upx;
|
|||
|
|
margin-right: 10upx;
|
|||
|
|
color: #555555;
|
|||
|
|
line-height: 30upx;
|
|||
|
|
// margin-top: 15upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-data {
|
|||
|
|
width: 300upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
display: inline-block;
|
|||
|
|
border: 1px solid #0DB0A7;
|
|||
|
|
border-radius: 8upx;
|
|||
|
|
color: #555555;
|
|||
|
|
line-height: 60upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tj-box {
|
|||
|
|
margin-top: 28upx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-box {
|
|||
|
|
margin-top: 24upx;
|
|||
|
|
|
|||
|
|
.detail-box {
|
|||
|
|
// margin-top: 10upx;
|
|||
|
|
margin-bottom: 24upx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
padding: 24upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_header {
|
|||
|
|
padding: 15upx 0upx;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_header .blueSign {
|
|||
|
|
width: 48upx;
|
|||
|
|
height: 48upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_header .font-tilte {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-left: 16upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_header .font-result {
|
|||
|
|
display: inline-block;
|
|||
|
|
position: absolute;
|
|||
|
|
width: 80*2upx;
|
|||
|
|
height: 28*2upx;
|
|||
|
|
right: 0upx;
|
|||
|
|
background: #C1EFEA;
|
|||
|
|
border-radius: 15px 15px 15px 15px;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #0DB0A7;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 28*2upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_msg {
|
|||
|
|
display: grid;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_msg .info-item {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-bottom: 10upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
line-height: 50upx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 140upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infoSpan {
|
|||
|
|
width: auto;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #666;
|
|||
|
|
float: right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_msg .info-item:nth-of-type(6) {
|
|||
|
|
padding-bottom: 24upx;
|
|||
|
|
border-bottom: 1px solid #EBEFF7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_msg .info-item:last-child {
|
|||
|
|
padding-bottom: 24upx;
|
|||
|
|
border-bottom: 0px solid #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-btn {
|
|||
|
|
margin-top: 24upx;
|
|||
|
|
width: 84*2upx;
|
|||
|
|
height: 32*2upx;
|
|||
|
|
border-radius: 16*2upx;
|
|||
|
|
border: 1px solid #0DB0A7;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #0DB0A7;
|
|||
|
|
line-height: 32*2upx;
|
|||
|
|
text-align: center;
|
|||
|
|
min-width: 140upx;
|
|||
|
|
justify-self: end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-ccc {
|
|||
|
|
border-color: #CACACA;
|
|||
|
|
color: #CACACA;
|
|||
|
|
background-color: #fff !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fixedView {
|
|||
|
|
height: 56*2upx;
|
|||
|
|
line-height: 56*2upx;
|
|||
|
|
padding: 0 24upx;
|
|||
|
|
background-color: white;
|
|||
|
|
width: 100%;
|
|||
|
|
/* border-radius: 10px; */
|
|||
|
|
/* margin-left: 5%; */
|
|||
|
|
font-size: 14*2upx;
|
|||
|
|
/* border: 1px solid #cfcfcf; */
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.tx-style {
|
|||
|
|
width: 150*2upx;
|
|||
|
|
height: 40*2upx;
|
|||
|
|
background: linear-gradient(91deg, #5BCE9D 0%, #00ADA6 100%);
|
|||
|
|
border-radius: 22*2upx;
|
|||
|
|
font-size: 16*2upx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: 40*2upx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|