Skip to content

S
self-support
Commit 23a68ad2 authored by Morson's avatar Morson
Browse files
Options

预约时间对接

parent cbcdca34
Hide whitespace changes
Inline Side-by-side
Showing with 191 additions and 52 deletions
src/components/appoint/appoint-time.vue
View file @ 23a68ad2
......@@ -7,15 +7,20 @@
<view class="select-date">
<view class="u-flex u-row-between ">
<view class="txt">选择日期：</view>
<view class="txt active">{{ dateList[currentDay].day }}</view>
<view class="txt active">{{appointTime | datefmt('YYYY.MM.DD')}}</view>
</view>
<view class="u-m-t-30 u-flex u-row-between date-list">
<view :class="{'date-item':true,'active':index===currentDay}"
@click="dateChange(item,index,dateList)" v-for="(item,index) in dateList" :key="index">
<text class="day">{{item.weekDay}}</text>
<text class="day day1">{{item.day}}</text>
<view v-show="hasLast" class="last" @click="lastWeek(dateList[0],dateList)">
<u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>
</view>
<view class="next" @click="weekChange">
<view class="u-flex u-row-between date-box">
<view :class="{'date-item':true,'active':item.day===appointTime}"
@click="dateChange(item,index,dateList)" v-for="(item,index) in dateList" :key="index">
<text class="day">{{ item.day | datefmt('周dd')}}</text>
<text class="day day1">{{ item.day | datefmt('DD')}}</text>
</view>
</view>
<view class="next" @click="nextWeek(dateList[0],dateList)">
<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
</view>
</view>
......@@ -28,9 +33,9 @@
</view>
<view class="u-p-t-30 u-flex u-flex-wrap time-list">
<view @click="timeChange(item,index,timeList)"
:class="{'time-item':true,'active': (currentTime && index===currentTime)}" v-for="(item,index) in timeList"
:key="index">
<text class="time">{{item}}</text>
:class="{'time-item':true,'active': index===currentTime}" v-for="(item,index) in timeList"
:key="item.pkey">
<text class="time">{{item.name}}</text>
</view>
</view>
</view>
......@@ -41,6 +46,7 @@
</template>
<script>
let now = Date.now()
export default {
props: {
titleShow: {
......@@ -49,23 +55,49 @@
},
dateList: {
type: Array,
default: []
default(){
return [
{day: now, timeRange: []},
{day: now + (1*86400000), timeRange: []},
{day: now + (2*86400000), timeRange: []},
{day: now + (3*86400000), timeRange: []},
{day: now + (4*86400000), timeRange: []},
{day: now + (5*86400000), timeRange: []},
{day: now + (6*86400000), timeRange: []},
]
}
},
timeList: {
type: Array,
default: []
default(){
return [
{"name":"06:00-08:00","pkey":"appointment_range_8"},
{"name":"08:00-10:00","pkey":"appointment_range_10"},
{"name":"10:00-12:00","pkey":"appointment_range_12"},
{"name":"12:00-14:00","pkey":"appointment_range_14"},
{"name":"14:00-16:00","pkey":"appointment_range_16"},
{"name":"16:00-18:00","pkey":"appointment_range_18"},
{"name":"18:00-20:00","pkey":"appointment_range_20"},
{"name":"20:00-22:00","pkey":"appointment_range_22"},
{"name":"22:00-24:00","pkey":"appointment_range_24"}
]
}
},
},
data() {
return {
currentDay: 0,
currentTime: null,
appointTime: Date.now(),
appointRange: "",
num: 0,
hasLast: false
}
},
computed: {
currentTimeTxt() {
if(this.currentTime != null) {
return this.timeList[this.currentTime]
return this.timeList[this.currentTime].name
}
return ''
},
......@@ -81,8 +113,9 @@
list,
}
this.currentDay = index
let res = await this.$u.api.openTimerange()
debugger
this.appointTime = item.day
this.currentTime = null
this.appointRange = ""
this.$emit('date-change', data)
},
timeChange(item, index, list) {
......@@ -92,6 +125,7 @@
list,
}
this.currentTime = index
this.appointRange = item.pkey
this.$emit('time-change', data)
},
weekChange(item, index, list) {
......@@ -102,7 +136,34 @@
}
this.$emit('week-change', data)
},
lastWeek(item, list) {
if(this.num > 0) {
this.num --
let len = list.length
if(this.num == 0) {
this.hasLast = false
len ++
}
let time = item.day - len*86400000
let data = {
time: time,
num: this.num
}
this.$emit('week-change', data)
}
},
nextWeek(item, list) {
this.hasLast = true
this.num ++
let len = list.length
let time = item.day + len*86400000
let data = {
time: time,
num: this.num
}
this.$emit('week-change', data)
},
}
}
</script>
......@@ -134,56 +195,69 @@
.date-list {
background-color: #F4F5F7;
.next{
.last{
width: 60rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
border-left: 2rpx solid #fff;
border-right: 2rpx solid #fff;
}
.date-item {
padding: 20rpx 20rpx 16rpx;
border-radius: 12rpx;
.day {
display: block;
font-size: 24rpx;
line-height: 26rpx;
color: #999;
&.day1 {
width: 48rpx;
height: 48rpx;
margin-top: 10rpx;
border-radius: 50%;
font-size: 28rpx;
text-align: center;
line-height: 48rpx;
}
}
&.active {
// background-color: #2272FF;
.date-box {
padding: 20rpx 18rpx 16rpx 20rpx;
width: 568rpx;
.date-item {
// padding: 20rpx 20rpx 16rpx;
border-radius: 12rpx;
.day {
color: #2272FF;
display: block;
font-size: 24rpx;
line-height: 26rpx;
color: #999;
&.day1 {
background-color: #2272FF;
color: #fff !important;
width: 48rpx;
height: 48rpx;
margin-top: 10rpx;
border-radius: 50%;
font-size: 28rpx;
text-align: center;
line-height: 48rpx;
}
}
&.active {
// background-color: #2272FF;
.day {
color: #2272FF;
&.day1 {
background-color: #2272FF;
color: #fff !important;
}
}
}
}
}
.next{
width: 60rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
border-left: 2rpx solid #fff;
}
}
.time-list {
justify-content: space-between;
margin-bottom: -30rpx;
.time-item {
min-width: 196rpx;
margin-right: 24rpx;
// margin-right: 24rpx;
margin-bottom: 20rpx;
border-radius: 12rpx;
padding: 26rpx 20rpx 24rpx;
......
src/main.js
View file @ 23a68ad2
......@@ -9,13 +9,23 @@ Vue.config.productionTip = false
Vue.mixin(vuexStore)
Vue.use(uView);
Vue.prototype.moment = moment
App.mpType = 'app'
const app = new Vue({
store,
...App
})
// 引入时间组件 moment
moment.locale('zh-cn');
Vue.prototype.moment = moment
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳，需转为Number类型
if(input){
return moment(input).format(fmtstring);
}else{
return "";
}
});
// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js'
......
src/pages/order/feedback.vue
View file @ 23a68ad2
......@@ -64,7 +64,7 @@
</view>
</view>
<view class="time-view">
<appoint-time :dateList="dateList" :timeList="timeList" @dateChange="dateChange" @timeChange="timeChange" @weekChange="weekChange"></appoint-time>
<appoint-time :dateList="dateList" :timeList="timeList" @dateChange="dateChange" @timeChange="timeChange" @weekChange="weekChange"></appoint-time>
</view>
</view>
</view>
......@@ -75,6 +75,7 @@
</template>
<script>
let now = Date.now()
import appointTime from '@/components/appoint/appoint-time.vue'
export default {
data() {
......@@ -83,8 +84,26 @@
categoryId: null,
showRemark: false,
submiting: false,
dateList: [],
timeList: [],
dateList: [
{day: now, timeRange: []},
{day: now + (1*86400000), timeRange: []},
{day: now + (2*86400000), timeRange: []},
{day: now + (3*86400000), timeRange: []},
{day: now + (4*86400000), timeRange: []},
{day: now + (5*86400000), timeRange: []},
{day: now + (6*86400000), timeRange: []},
],
timeList: [
{"name":"06:00-08:00","pkey":"appointment_range_8"},
{"name":"08:00-10:00","pkey":"appointment_range_10"},
{"name":"10:00-12:00","pkey":"appointment_range_12"},
{"name":"12:00-14:00","pkey":"appointment_range_14"},
{"name":"14:00-16:00","pkey":"appointment_range_16"},
{"name":"16:00-18:00","pkey":"appointment_range_18"},
{"name":"18:00-20:00","pkey":"appointment_range_20"},
{"name":"20:00-22:00","pkey":"appointment_range_22"},
{"name":"22:00-24:00","pkey":"appointment_range_24"}
],
background: {
backgroundColor: 'none',
},
......@@ -155,6 +174,7 @@
mask: true
})
this.loadCalendar()
this.loadTimerange()
await this.initPageData()
},
methods: {
......@@ -215,6 +235,15 @@
}
},
/* 加载预约时间段 */
async loadTimerange() {
let self = this
let res = await this.$u.api.openTimerange()
if(res && res.code == 200) {
self.timeList = res.data
}
},
/**
* 切换tab项
*/
......@@ -239,6 +268,32 @@
weekChange(data){
// 点击下一周
console.log(data,'week-data')
if (data && data.time) {
let num = data.num
let time = data.time
if (num == 0) {
this.dateList = [
{day: time, timeRange: []},
{day: time + (1*86400000), timeRange: []},
{day: time + (2*86400000), timeRange: []},
{day: time + (3*86400000), timeRange: []},
{day: time + (4*86400000), timeRange: []},
{day: time + (5*86400000), timeRange: []},
{day: time + (6*86400000), timeRange: []},
]
} else {
this.dateList = [
{day: time, timeRange: []},
{day: time + (1*86400000), timeRange: []},
{day: time + (2*86400000), timeRange: []},
{day: time + (3*86400000), timeRange: []},
{day: time + (4*86400000), timeRange: []},
{day: time + (5*86400000), timeRange: []},
]
}
}
},
dateChange(data){
// 点击日期选择
......@@ -388,7 +443,7 @@
white-space: nowrap;
}
.input-view {
margin-bottom: 30rpx;
margin-bottom: 24rpx;
}
.textarea{
......
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