|
@@ -0,0 +1,573 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="popup-wrapper popup-wrapper-special">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="popup-title popup-title-special popup-title-new">
|
|
|
+ <view>请选择服务开始时间</view>
|
|
|
+ <view v-if="selectTimeValue >= 17" class="fee-tips">您选的时间段可能会加收夜间服务费,具体以与商家的沟通为准</view>
|
|
|
+ <!-- 选择服务者上门时段(具体服务时长以实际服务为准) -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <block>
|
|
|
+ <view class="popup-content popup-content-special">
|
|
|
+ <view class="time-select-top" style="display: flex;">
|
|
|
+ <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
|
|
|
+ <view class="time-select-left-item" @tap="dateCheck" :data-index="index"
|
|
|
+ :data-week="item.week" :data-date="item.date" :data-isbook="item.isBook"
|
|
|
+ v-for="(item, index) in dateList" :key="index" style="display: inline-block;">
|
|
|
+ <view class="date-line-wrapper">
|
|
|
+ <view :class="[
|
|
|
+ 'date-msg',
|
|
|
+ dateIndex == index ? 'current-date' : '',
|
|
|
+ item.dateMsg == '不可约' ? 'avail-date' : ''
|
|
|
+ ]">
|
|
|
+ {{item.weekOfDay}}
|
|
|
+ </view>
|
|
|
+ <view :class="[
|
|
|
+ 'date-msg1',
|
|
|
+ dateIndex == index ? 'current-date' : '',
|
|
|
+ item.dateMsg == '不可约' ? 'avail-date' : ''
|
|
|
+ ]"> {{ item.bookdate | formatDate }}</view>
|
|
|
+ <view :class="[
|
|
|
+ dateIndex == index ? 'current-line' : '',
|
|
|
+ item.dateMsg == '不可约' ? 'current-line0' : ''
|
|
|
+ ]"></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="time-select-middle">
|
|
|
+ <view class="noon-select">
|
|
|
+ <view :class="'noon-item' + (noonType == '1' ? 'active-noon' : '')" data-noon="1"
|
|
|
+ @tap="noonTab">上午</view>
|
|
|
+ <view class="divider"></view>
|
|
|
+ <view :class="'noon-item' + (noonType == '2' ? 'active-noon' : '')" data-noon="2"
|
|
|
+ @tap="noonTab">下午</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="time-item-wrapper">
|
|
|
+ <view @tap="timeCheck" :data-stock="item.stock" :data-index="index" :data-msg="item.timeMsg" :data-toastmsg="item.toastMsg"
|
|
|
+ :class="[
|
|
|
+ 'time-msg',
|
|
|
+ timeIndex == index ? 'current-time' : '',
|
|
|
+ item.timeMsg == '不可约' ? 'avail-time' : ''
|
|
|
+ ]" v-for="(item, index) in timeList" :key="index">
|
|
|
+ <view :class="timeIndex === index ? 'current-time' : ''">{{ item.begin }}</view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="appointment-tips">
|
|
|
+ <view> <span></span>
|
|
|
+ <text>可预约</text>
|
|
|
+ </view>
|
|
|
+ <view> <span class="selected"></span>
|
|
|
+ <text>已选择</text>
|
|
|
+ </view>
|
|
|
+ <view> <span class="no-appointment"></span>
|
|
|
+ <text>不可约</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="time-select-bottom" v-if="date!==''&week!==''&time!==''">
|
|
|
+ <span>当前选择:</span>{{date}}({{week}}){{time}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <!-- 确认按钮 -->
|
|
|
+ <view class="popup-btn-wrapper">
|
|
|
+ <view @tap="confirmTime" class="confirm-btn" >确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ var util = require('@/utils/util.js');
|
|
|
+ var api = require('@/config/api.js');
|
|
|
+ var check = require('@/utils/check.js');
|
|
|
+ export default {
|
|
|
+ name: "time-select",
|
|
|
+ props: {
|
|
|
+ timeParams: Object
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log("传过来的参数", this.timeParams);
|
|
|
+ this.getDayTime(this.timeParams)
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ formatDate: function(value, format) {
|
|
|
+ // 这里可以根据format来格式化日期
|
|
|
+ if (value) {
|
|
|
+ return value.substring(0, 10).split('-').slice(1).join('-');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ noonType: 1,
|
|
|
+ selectTimeValue: '',
|
|
|
+ timeList: [],
|
|
|
+ dateList: [],
|
|
|
+ timeIndex: '',
|
|
|
+
|
|
|
+ //选中的时间段
|
|
|
+ dateIndex: 0,
|
|
|
+
|
|
|
+ //选中的日期
|
|
|
+ appointDate: '',
|
|
|
+ futureDays: '',
|
|
|
+ time: '',
|
|
|
+ week: '',
|
|
|
+ date: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ getDayTime(params) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ util.request(api.everyDayTime, params, 'GET')
|
|
|
+ .then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.errno == 0) {
|
|
|
+ console.log("时间", res.data);
|
|
|
+ this.setData({
|
|
|
+ dateList: res.data,
|
|
|
+ dateIndex: 0,
|
|
|
+ timeIndex: -1,
|
|
|
+ noonType: 1
|
|
|
+ });
|
|
|
+ let period = res.data[0].period;
|
|
|
+ let list = period.filter((item) => {
|
|
|
+ return item.ofTime == '上午';
|
|
|
+ });
|
|
|
+ this.setData({
|
|
|
+ timeList: list
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ this.setData({
|
|
|
+ timeList: [],
|
|
|
+ timeIndex: ''
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: err.errMsg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ this.setData({
|
|
|
+ timeList: [],
|
|
|
+ timeIndex: ''
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ noonTab(e) {
|
|
|
+ let noon = e.currentTarget.dataset.noon;
|
|
|
+ console.log("noon", noon);
|
|
|
+ this.setData({
|
|
|
+ timeIndex: -1,
|
|
|
+ noonType: noon,
|
|
|
+ selectTimeValue: ''
|
|
|
+ });
|
|
|
+ console.log("noon1", noon);
|
|
|
+ let period = this.dateList[this.dateIndex].period;
|
|
|
+ let current = this.noonType == 1 ? '上午' : '下午';
|
|
|
+ let list = period.filter((item) => {
|
|
|
+ return item.ofTime == current;
|
|
|
+ });
|
|
|
+ this.setData({
|
|
|
+ timeList: list
|
|
|
+ });
|
|
|
+ },
|
|
|
+ dateCheck(e) {
|
|
|
+ let index = e.currentTarget.dataset.index;
|
|
|
+ let date = e.currentTarget.dataset.date;
|
|
|
+ let week = e.currentTarget.dataset.week;
|
|
|
+ let isbook = e.currentTarget.dataset.isbook;
|
|
|
+ this.setData({
|
|
|
+ dateIndex: index
|
|
|
+ });
|
|
|
+ let period = this.dateList[this.dateIndex].period;
|
|
|
+ let current = this.noonType == 1 ? '上午' : '下午';
|
|
|
+ let list = period.filter((item) => {
|
|
|
+ return item.ofTime == current;
|
|
|
+ });
|
|
|
+ let bookdate = this.dateList[this.dateIndex].bookdate
|
|
|
+ let weekOfDay = this.dateList[this.dateIndex].weekOfDay
|
|
|
+ this.setData({
|
|
|
+ timeList: list,
|
|
|
+ date: bookdate,
|
|
|
+ week: weekOfDay
|
|
|
+ });
|
|
|
+ let isNoTime = list.every((item) => {
|
|
|
+ return item.timeMsg && item.timeMsg != null;
|
|
|
+ });
|
|
|
+ if (isNoTime) {
|
|
|
+ this.setData({
|
|
|
+ timeIndex: -1,
|
|
|
+ selectTimeValue: ''
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ timeCheck(e) {
|
|
|
+ console.log( e.currentTarget);
|
|
|
+ let index = e.currentTarget.dataset.index;
|
|
|
+ let msg = e.currentTarget.dataset.msg;
|
|
|
+ let toastMsg= e.currentTarget.dataset.toastmsg;
|
|
|
+ if (msg == null || msg == '') {
|
|
|
+ let time = this.timeList[index].begin.split(':')[0];
|
|
|
+ let bookTime = this.timeList[index].begin + '-' + this.timeList[index].end
|
|
|
+ this.setData({
|
|
|
+ timeIndex: index,
|
|
|
+ selectTimeValue: Number(time),
|
|
|
+ time: bookTime
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title:toastMsg,
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmTime() {
|
|
|
+ if (this.timeIndex === '' || this.timeIndex < 0) {
|
|
|
+ util.showErrorToast('请选择服务时间');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let date = this.dateList[this.dateIndex].bookdate;
|
|
|
+ let week = this.dateList[this.dateIndex].weekOfDay;
|
|
|
+ let time = this.timeList[this.timeIndex].begin + '-' + this.timeList[this.timeIndex].end;
|
|
|
+ let futureDays = (((new Date(date)).getTime() - (new Date()).getTime()) / (1000 * 24 * 3600));
|
|
|
+
|
|
|
+ futureDays = Math.ceil(futureDays);
|
|
|
+ this.setData({
|
|
|
+ choosePopup: false,
|
|
|
+ appointDate: date + ' ' + week + ' ' + time,
|
|
|
+ futureDays: futureDays,
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$emit('timeShow', {
|
|
|
+ appointDate: this.appointDate,
|
|
|
+ futureDays: this.futureDays,
|
|
|
+ Time: {
|
|
|
+ date,
|
|
|
+ week,
|
|
|
+ time
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDayTime(params) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ util.request(api.everyDayTime, params, 'GET')
|
|
|
+ .then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.errno == 0) {
|
|
|
+ console.log("时间", res.data);
|
|
|
+ this.setData({
|
|
|
+ dateList: res.data,
|
|
|
+ dateIndex: 0,
|
|
|
+ timeIndex: -1,
|
|
|
+ noonType: 1
|
|
|
+ });
|
|
|
+ let period = res.data[0].period;
|
|
|
+ let list = period.filter((item) => {
|
|
|
+ return item.ofTime == '上午';
|
|
|
+ });
|
|
|
+ this.setData({
|
|
|
+ timeList: list
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ this.setData({
|
|
|
+ timeList: [],
|
|
|
+ timeIndex: ''
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: err.errMsg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ this.setData({
|
|
|
+ timeList: [],
|
|
|
+ timeIndex: ''
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .popup-wrapper view {
|
|
|
+ color: #888;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-content {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .appointment-tips {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 178px;
|
|
|
+ /* margin: 170px auto 10px; */
|
|
|
+ position: absolute;
|
|
|
+ bottom: 72rpx;
|
|
|
+ left: calc(50% - 89px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .appointment-tips view span {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #feebd7;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .appointment-tips view .selected {
|
|
|
+ background-color: #d77958;
|
|
|
+ }
|
|
|
+
|
|
|
+ .appointment-tips view .no-appointment {
|
|
|
+ background-color: #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .appointment-tips view text {
|
|
|
+ color: #d77958;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select-bottom {
|
|
|
+ width: 100vw;
|
|
|
+ background-color: #feebd7;
|
|
|
+ height: 54rpx;
|
|
|
+ font-size: 22rpx !important;
|
|
|
+ /* color: #00b4fe !important; */
|
|
|
+ line-height: 54rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select-left {
|
|
|
+ /* flex: 2; */
|
|
|
+ border-right: 1rpx solid #ddd;
|
|
|
+ padding: 0 8rpx 0 20rpx;
|
|
|
+ width: 370rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select-right {
|
|
|
+ flex: 1;
|
|
|
+ /* padding: 0 8rpx; */
|
|
|
+ height: 900rpx;
|
|
|
+ overflow-y: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view_H {
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 确保子元素在同一行内显示 */
|
|
|
+ overflow-x: scroll;
|
|
|
+ /* 允许横向滚动 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select-left-item {
|
|
|
+ height: 108rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 4rpx 0;
|
|
|
+ width: 20vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-line-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select-left-item .date-msg {
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ color: #292929;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select-left-item .date-msg1 {
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ color: #292929;
|
|
|
+ font-size: 22rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select-left-item .date-msg.avail-date {
|
|
|
+ color: #999 !important;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select-left-item .date-msg1.avail-date {
|
|
|
+ color: #999 !important;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-wrapper .popup-content .current-date {
|
|
|
+ color: #d77958;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ view.popup-btn-wrapper {
|
|
|
+ margin: 10rpx auto;
|
|
|
+ padding: 24rpx;
|
|
|
+ background-color: #d77958;
|
|
|
+ text-align: center;
|
|
|
+ width: 682rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ view.popup-btn-wrapper view {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select-middle {
|
|
|
+ background-color: #FCFCFC;
|
|
|
+ padding: 10rpx 0rpx;
|
|
|
+ height: 800rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noon-select {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 30rpx auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noon-select .divider {
|
|
|
+ height: 40rpx;
|
|
|
+ width: 2rpx;
|
|
|
+ background-color: #e5e5e5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noon-select .noon-item {
|
|
|
+ text-align: center;
|
|
|
+ color: #979797;
|
|
|
+ font-size: 36rpx;
|
|
|
+ width: 49%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noon-itemactive-noon {
|
|
|
+ text-align: center;
|
|
|
+ color: #d77958!important;
|
|
|
+ font-size: 36rpx !important;
|
|
|
+ width: 49%;
|
|
|
+ }
|
|
|
+ .popup-title-new.popup-title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: left;
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .popup-title-new view {
|
|
|
+ color: #000;
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .popup-title-new view.fee-tips {
|
|
|
+ color: #d77958;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .current-line {
|
|
|
+ width: 38rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background: #d77958;
|
|
|
+ border-radius: 3rpx;
|
|
|
+ margin: auto;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .current-line0 {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .current-time {
|
|
|
+ color: #fff !important;
|
|
|
+ font-family: AlibabaPuHuiTi_2_65_Medium;
|
|
|
+ line-height: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: #d77958;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .time-item-wrapper {
|
|
|
+ display: flex;
|
|
|
+ width: 90vw;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ text-align: center;
|
|
|
+ gap: 20px;
|
|
|
+ margin: 10px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .time-item-wrapper .time-msg {
|
|
|
+ width: 20%;
|
|
|
+ line-height: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: #feebd7;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .time-item-wrapper .avail-time {
|
|
|
+ width: 20%;
|
|
|
+ line-height: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: #CCCCCC;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|