Skip to content

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

预约时间对接

parent cbcdca34
Show 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 @@ ...@@ -7,15 +7,20 @@
<view class="select-date"> <view class="select-date">
<view class="u-flex u-row-between "> <view class="u-flex u-row-between ">
<view class="txt">选择日期：</view> <view class="txt">选择日期：</view>
<view class="txt active">{{ dateList[currentDay].day }}</view> <view class="txt active">{{appointTime | datefmt('YYYY.MM.DD')}}</view>
</view> </view>
<view class="u-m-t-30 u-flex u-row-between date-list"> <view class="u-m-t-30 u-flex u-row-between date-list">
<view :class="{'date-item':true,'active':index===currentDay}" <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="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"> @click="dateChange(item,index,dateList)" v-for="(item,index) in dateList" :key="index">
<text class="day">{{item.weekDay}}</text> <text class="day">{{ item.day | datefmt('周dd')}}</text>
<text class="day day1">{{item.day}}</text> <text class="day day1">{{ item.day | datefmt('DD')}}</text>
</view>
</view> </view>
<view class="next" @click="weekChange"> <view class="next" @click="nextWeek(dateList[0],dateList)">
<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon> <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
</view> </view>
</view> </view>
...@@ -28,9 +33,9 @@ ...@@ -28,9 +33,9 @@
</view> </view>
<view class="u-p-t-30 u-flex u-flex-wrap time-list"> <view class="u-p-t-30 u-flex u-flex-wrap time-list">
<view @click="timeChange(item,index,timeList)" <view @click="timeChange(item,index,timeList)"
:class="{'time-item':true,'active': (currentTime && index===currentTime)}" v-for="(item,index) in timeList" :class="{'time-item':true,'active': index===currentTime}" v-for="(item,index) in timeList"
:key="index"> :key="item.pkey">
<text class="time">{{item}}</text> <text class="time">{{item.name}}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -41,6 +46,7 @@ ...@@ -41,6 +46,7 @@
</template> </template>
<script> <script>
let now = Date.now()
export default { export default {
props: { props: {
titleShow: { titleShow: {
...@@ -49,23 +55,49 @@ ...@@ -49,23 +55,49 @@
}, },
dateList: { dateList: {
type: Array, 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: { timeList: {
type: Array, 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() { data() {
return { return {
currentDay: 0, currentDay: 0,
currentTime: null, currentTime: null,
appointTime: Date.now(),
appointRange: "",
num: 0,
hasLast: false
} }
}, },
computed: { computed: {
currentTimeTxt() { currentTimeTxt() {
if(this.currentTime != null) { if(this.currentTime != null) {
return this.timeList[this.currentTime] return this.timeList[this.currentTime].name
} }
return '' return ''
}, },
...@@ -81,8 +113,9 @@ ...@@ -81,8 +113,9 @@
list, list,
} }
this.currentDay = index this.currentDay = index
let res = await this.$u.api.openTimerange() this.appointTime = item.day
debugger this.currentTime = null
this.appointRange = ""
this.$emit('date-change', data) this.$emit('date-change', data)
}, },
timeChange(item, index, list) { timeChange(item, index, list) {
...@@ -92,6 +125,7 @@ ...@@ -92,6 +125,7 @@
list, list,
} }
this.currentTime = index this.currentTime = index
this.appointRange = item.pkey
this.$emit('time-change', data) this.$emit('time-change', data)
}, },
weekChange(item, index, list) { weekChange(item, index, list) {
...@@ -102,7 +136,34 @@ ...@@ -102,7 +136,34 @@
} }
this.$emit('week-change', data) 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> </script>
...@@ -134,15 +195,18 @@ ...@@ -134,15 +195,18 @@
.date-list { .date-list {
background-color: #F4F5F7; background-color: #F4F5F7;
.next{ .last{
width: 60rpx; width: 60rpx;
height: 120rpx; height: 120rpx;
line-height: 120rpx; line-height: 120rpx;
text-align: center; text-align: center;
border-left: 2rpx solid #fff; border-right: 2rpx solid #fff;
} }
.date-box {
padding: 20rpx 18rpx 16rpx 20rpx;
width: 568rpx;
.date-item { .date-item {
padding: 20rpx 20rpx 16rpx; // padding: 20rpx 20rpx 16rpx;
border-radius: 12rpx; border-radius: 12rpx;
.day { .day {
...@@ -177,13 +241,23 @@ ...@@ -177,13 +241,23 @@
} }
} }
} }
.next{
width: 60rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
border-left: 2rpx solid #fff;
}
}
.time-list { .time-list {
justify-content: space-between;
margin-bottom: -30rpx; margin-bottom: -30rpx;
.time-item { .time-item {
min-width: 196rpx; min-width: 196rpx;
margin-right: 24rpx; // margin-right: 24rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
border-radius: 12rpx; border-radius: 12rpx;
padding: 26rpx 20rpx 24rpx; padding: 26rpx 20rpx 24rpx;
......
src/main.js
View file @ 23a68ad2
...@@ -9,7 +9,6 @@ Vue.config.productionTip = false ...@@ -9,7 +9,6 @@ Vue.config.productionTip = false
Vue.mixin(vuexStore) Vue.mixin(vuexStore)
Vue.use(uView); Vue.use(uView);
Vue.prototype.moment = moment
App.mpType = 'app' App.mpType = 'app'
const app = new Vue({ const app = new Vue({
...@@ -17,6 +16,17 @@ const app = new Vue({ ...@@ -17,6 +16,17 @@ const app = new Vue({
...App ...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中正常使用 // http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js' import httpInterceptor from '@/common/http.interceptor.js'
Vue.use(httpInterceptor, app) Vue.use(httpInterceptor, app)
......
src/pages/order/feedback.vue
View file @ 23a68ad2
...@@ -75,6 +75,7 @@ ...@@ -75,6 +75,7 @@
</template> </template>
<script> <script>
let now = Date.now()
import appointTime from '@/components/appoint/appoint-time.vue' import appointTime from '@/components/appoint/appoint-time.vue'
export default { export default {
data() { data() {
...@@ -83,8 +84,26 @@ ...@@ -83,8 +84,26 @@
categoryId: null, categoryId: null,
showRemark: false, showRemark: false,
submiting: false, submiting: false,
dateList: [], dateList: [
timeList: [], {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: { background: {
backgroundColor: 'none', backgroundColor: 'none',
}, },
...@@ -155,6 +174,7 @@ ...@@ -155,6 +174,7 @@
mask: true mask: true
}) })
this.loadCalendar() this.loadCalendar()
this.loadTimerange()
await this.initPageData() await this.initPageData()
}, },
methods: { methods: {
...@@ -215,6 +235,15 @@ ...@@ -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项 * 切换tab项
*/ */
...@@ -239,6 +268,32 @@ ...@@ -239,6 +268,32 @@
weekChange(data){ weekChange(data){
// 点击下一周 // 点击下一周
console.log(data,'week-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){ dateChange(data){
// 点击日期选择 // 点击日期选择
...@@ -388,7 +443,7 @@ ...@@ -388,7 +443,7 @@
white-space: nowrap; white-space: nowrap;
} }
.input-view { .input-view {
margin-bottom: 30rpx; margin-bottom: 24rpx;
} }
.textarea{ .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