jiazhipeng
11 months ago
5 changed files with 1683 additions and 10 deletions
@ -1,30 +1,515 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/topImg.png" class="topImg"></image> |
|||
|
|||
<view class="title" style="margin-top: 40rpx;">·快捷入口</view> |
|||
|
|||
<view class="flex-between"> |
|||
<view class="nav-item flex-around"> |
|||
立即核销 |
|||
<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/hexiao.png" mode=""></image> |
|||
</view> |
|||
<view class="nav-item flex-around"> |
|||
查看订单 |
|||
<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/dingdan.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="title">·我的排班</view> |
|||
|
|||
<view class="type-box"> |
|||
<view v-for="(item,index) in typeList" :key="index" |
|||
:class="['type-item', {'type-active': index == typeIndex}]" @click="typeIndex = index"> |
|||
{{item.title}} |
|||
<view class="type-line" v-if="index == typeIndex"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 日历 --> |
|||
<view class="calendar"> |
|||
<view class="calendar-top flex-between"> |
|||
<view @click="preNextDate(0)"> |
|||
<img src="https://static.ticket.sz-trip.com/tourGuide/images/index/leftIcon.png" class="iconfont" |
|||
style="margin-right: 13rpx;" /> |
|||
{{ monthShow ? '上一月' : '上一周' }} |
|||
</view> |
|||
<view>{{year}}年{{month}}月</view> |
|||
<view @click="preNextDate(1)"> |
|||
{{ monthShow ? '下一月' : '下一周' }} |
|||
<img src="https://static.ticket.sz-trip.com/tourGuide/images/index/rightIcon.png" class="iconfont" |
|||
style="margin-left: 13rpx;" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="calendar-bottom"> |
|||
<view class="week-item" v-for="(item,index) in weekList" :key="item + index"> |
|||
{{item}} |
|||
</view> |
|||
|
|||
<view v-for="(item, index) in everyDay" :key="item.day" class="day-box flex-center" |
|||
:class="(nowDay > item.date) ? 'grayDate' : ''" v-if="monthShow"> |
|||
<view :class="['day-item', selectDay == item.date ? 'daySelect' : '']" |
|||
@click="changeDate(item.date)"> |
|||
{{ nowDay== item.date ? '今日' : item.day }} |
|||
<view class="day-lunar">{{showLunar(item)}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-for="(item, index) in weekDates" :key="item + index" class="day-box flex-center" |
|||
:class="(nowDay > getNowTime(item)) ? 'grayDate' : ''" v-if="!monthShow"> |
|||
<view :class="['day-item', selectDay == getNowTime(item) ? 'daySelect' : '']" |
|||
@click="changeDate(getNowTime(item))"> |
|||
{{ nowDay == getNowTime(item) ? '今日' : getNowTime(item).slice(-2) }} |
|||
<view class="day-lunar">{{showLunar(getNowTime(item))}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="" style="width: 100%;height: 50rpx;padding: 20rpx;" @click="changeWeekMonth"> |
|||
<img :src="monthShow ? 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/top.png' : 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/bottom.png'" |
|||
class="iconfont" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 选择场次 --> |
|||
<view v-for="(item,index) in sessionList" :key="index" class="session-item flex-between"> |
|||
{{item.title}} |
|||
<switch :checked="item.isChecked" color="#96684F" @change="switchChange(item,index)"/> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
lunar |
|||
} from "../../static/js/lunar.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
typeList: [{ |
|||
title: '导游服务', |
|||
id: '' |
|||
}, |
|||
{ |
|||
title: '线上咨询', |
|||
id: '' |
|||
}, |
|||
{ |
|||
title: '拼团产品', |
|||
id: '' |
|||
}, |
|||
{ |
|||
title: '线路产品', |
|||
id: '' |
|||
} |
|||
], |
|||
typeIndex: 0, |
|||
weekList: ['日', '一', '二', '三', '四', '五', '六'], |
|||
monthShow: false, |
|||
year: 0, |
|||
month: 0, |
|||
day: 0, |
|||
week: '', |
|||
nowDay: '', |
|||
selectDay: '', |
|||
everyDay: [], |
|||
weekDates: [], |
|||
sessionList: [ |
|||
{ |
|||
title: '上午场', |
|||
isChecked: false |
|||
}, |
|||
{ |
|||
title: '下午场', |
|||
isChecked: false |
|||
}, |
|||
{ |
|||
title: '全天场', |
|||
isChecked: false |
|||
} |
|||
], |
|||
isAllChecked: false |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
this.year = Number(this.getNowTime(new Date(), 2).slice(0, 4)); |
|||
this.month = Number(this.getNowTime(new Date(), 2).slice(5, 7)); |
|||
this.day = Number(this.getNowTime(new Date(), 2).slice(8, 10)); |
|||
this.nowDay = this.getNowTime(new Date()) |
|||
this.selectDay = this.getNowTime(new Date()) |
|||
this.getWeekDates(new Date()) |
|||
}, |
|||
methods: { |
|||
// 选择场次 |
|||
switchChange(item, index) { |
|||
item.isChecked = !item.isChecked |
|||
|
|||
if(index == 2) { |
|||
for (let i = 0; i < 2; i++) { |
|||
this.sessionList[i].isChecked = this.sessionList[2].isChecked |
|||
} |
|||
}else { |
|||
if(this.sessionList[0].isChecked && this.sessionList[1].isChecked) { |
|||
this.sessionList[2].isChecked = true |
|||
}else { |
|||
this.sessionList[2].isChecked = false |
|||
} |
|||
} |
|||
}, |
|||
// 选中日期 |
|||
changeDate(item) { |
|||
if (this.nowDay <= item) { |
|||
this.year = Number(item.slice(0, 4)); |
|||
this.month = Number(item.slice(5, 7)); |
|||
this.day = Number(item.slice(8, 10)); |
|||
this.selectDay = item |
|||
} |
|||
}, |
|||
// 农历 |
|||
showLunar(date) { |
|||
if(this.monthShow) { |
|||
if (!date.date) return; |
|||
var lunarObj = lunar.solar2lunar(date.date.slice(0, 4), date.date.slice(5, 7), date.date.slice(8, 10)); |
|||
}else { |
|||
var lunarObj = lunar.solar2lunar(date.slice(0, 4), date.slice(5, 7), date.slice(8, 10)); |
|||
} |
|||
|
|||
return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn; |
|||
}, |
|||
// 获取当前日期 |
|||
getNowTime(time, type) { |
|||
var date = time, |
|||
year = date.getFullYear(), |
|||
month = date.getMonth() + 1, |
|||
day = date.getDate(), |
|||
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), |
|||
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), |
|||
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); |
|||
month >= 1 && month <= 9 ? (month = "0" + month) : ""; |
|||
day >= 0 && day <= 9 ? (day = "0" + day) : ""; |
|||
if (type == 1) { |
|||
if (uni.getSystemInfoSync().platform == 'ios') { |
|||
var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second; |
|||
} else { |
|||
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; |
|||
} |
|||
} else { |
|||
var timer = year + '/' + month + '/' + day; |
|||
} |
|||
|
|||
return timer; |
|||
}, |
|||
// 遍历月份日期 |
|||
getEveryDay(data) { |
|||
let date = new Date(data); |
|||
let month = date.getMonth(); |
|||
//设置月份 |
|||
date.setMonth(month + 1); |
|||
//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环 |
|||
date.setDate(0); |
|||
let dayArry = []; |
|||
let day = date.getDate(); //获取当前月最后一天是几号 |
|||
for (let i = 1; i <= day; i++) { |
|||
date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天 |
|||
dayArry.push({ |
|||
day: i, |
|||
week: this.getWeekday(date.getDay()), |
|||
date: this.getNowTime(date), |
|||
flag: 0 |
|||
}); //选中月份的每一天和当天是星期几 |
|||
} |
|||
|
|||
this.everyDay = dayArry; |
|||
this.resetDay(); |
|||
}, |
|||
getWeekday(day) { |
|||
return ['日', '一', '二', '三', '四', '五', '六'][day]; |
|||
}, |
|||
//重置日期与顶部周期相对应 |
|||
resetDay() { |
|||
let arr = this.weekList; |
|||
let w = this.everyDay[0].week; |
|||
arr.forEach((v, index) => { |
|||
if (v == w) { |
|||
let id = index; |
|||
if (id != 0) { |
|||
for (let i = 0; i < id; i++) { |
|||
this.everyDay.unshift({ |
|||
day: '', |
|||
week: '' |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
// 获取周 |
|||
getWeekDates(day) { |
|||
const currentDayOfWeek = day.getDay(); // 获取今天是星期几( 0 = 周日,...6 = 周六 |
|||
const startDate = new Date(day); |
|||
startDate.setDate(day.getDate() - currentDayOfWeek); |
|||
const weekDates = []; |
|||
for (let i = 0; i < 7; i++) { |
|||
const date = new Date(startDate); |
|||
date.setDate(startDate.getDate() + i); |
|||
weekDates.push(date) |
|||
} |
|||
this.weekDates = weekDates |
|||
}, |
|||
// 切换上一周月、下一周月 |
|||
preNextDate(e) { |
|||
if (this.monthShow) { |
|||
if (e) { |
|||
// 下一月 |
|||
this.month += 1; |
|||
if (this.month > 12) { |
|||
this.year += 1; |
|||
this.month = 1; |
|||
} |
|||
if (uni.getSystemInfoSync().platform == 'ios') { |
|||
this.getEveryDay(this.year + '/' + this.month + '/' + 1); |
|||
} else { |
|||
this.getEveryDay(this.year + '-' + this.month); |
|||
} |
|||
} else { |
|||
// 上一月 |
|||
this.month -= 1; |
|||
if (this.month == 0) { |
|||
this.year -= 1; |
|||
this.month = 12; |
|||
} |
|||
if (uni.getSystemInfoSync().platform == 'ios') { |
|||
this.getEveryDay(this.year + '/' + this.month + '/' + 1); |
|||
} else { |
|||
this.getEveryDay(this.year + '-' + this.month); |
|||
} |
|||
} |
|||
} else { |
|||
if (e) { |
|||
// 下一周 |
|||
this.getNextWeekDates() |
|||
} else { |
|||
// 上一周 |
|||
this.getPreviousWeekDates() |
|||
} |
|||
} |
|||
}, |
|||
getPreviousWeekDates() { |
|||
const today = this.weekDates[0] |
|||
const previousWeekStartDate = new Date(today); |
|||
previousWeekStartDate.setDate(today.getDate() - 7); // 上周的开始日期 |
|||
|
|||
const previousWeekDates = []; |
|||
for (let i = 0; i < 7; i++) { |
|||
const date = new Date(previousWeekStartDate); |
|||
date.setDate(previousWeekStartDate.getDate() + i); |
|||
previousWeekDates.push(date); |
|||
} |
|||
|
|||
this.weekDates = previousWeekDates; |
|||
this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4)); |
|||
this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7)); |
|||
}, |
|||
getNextWeekDates() { |
|||
const today = this.weekDates[0] |
|||
const nextWeekStartDate = new Date(today); |
|||
nextWeekStartDate.setDate(today.getDate() + 7); // 下周的开始日期 |
|||
|
|||
const nextWeekDates = []; |
|||
for (let i = 0; i < 7; i++) { |
|||
const date = new Date(nextWeekStartDate); |
|||
date.setDate(nextWeekStartDate.getDate() + i); |
|||
nextWeekDates.push(date); |
|||
} |
|||
|
|||
this.weekDates = nextWeekDates; |
|||
this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4)); |
|||
this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7)); |
|||
}, |
|||
// 更换周/月 |
|||
changeWeekMonth() { |
|||
this.monthShow = !this.monthShow |
|||
|
|||
this.month = Number(this.selectDay.slice(5, 7)); |
|||
|
|||
if (this.monthShow) { |
|||
this.year = Number(this.selectDay.slice(0, 4)) |
|||
if (uni.getSystemInfoSync().platform == 'ios') { |
|||
this.getEveryDay(this.year + '/' + this.month + '/' + 1); |
|||
} else { |
|||
this.getEveryDay(this.year + '/' + this.month); |
|||
} |
|||
} else { |
|||
this.getWeekDates(new Date(this.selectDay)) |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
<style lang="scss" scoped> |
|||
.content { |
|||
background: #FFFFFF; |
|||
min-height: 100vh; |
|||
padding: 40rpx 26rpx 100rpx; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 299.33rpx; |
|||
height: 70rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: auto; |
|||
} |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
margin: 68rpx 0 34rpx; |
|||
} |
|||
|
|||
.nav-item { |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
width: 338rpx; |
|||
height: 118rpx; |
|||
background: #F5F5F5; |
|||
border-radius: 20rpx; |
|||
padding: 0 15rpx; |
|||
|
|||
image { |
|||
width: 80.67rpx; |
|||
height: 80.67rpx; |
|||
} |
|||
} |
|||
|
|||
.type-box { |
|||
display: flex; |
|||
|
|||
.type-item { |
|||
margin-right: 44rpx; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.type-active { |
|||
color: #96684F; |
|||
} |
|||
|
|||
.type-line { |
|||
width: 117rpx; |
|||
height: 6rpx; |
|||
background: #96684F; |
|||
border-radius: 3rpx; |
|||
margin: 4rpx auto 0; |
|||
} |
|||
} |
|||
|
|||
.calendar { |
|||
.calendar-top { |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
padding: 59rpx 0 38rpx; |
|||
|
|||
view:nth-child(2) { |
|||
font-size: 35rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.iconfont { |
|||
width: 11rpx; |
|||
height: 20rpx; |
|||
vertical-align: inherit; |
|||
} |
|||
} |
|||
|
|||
.calendar-bottom { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 33rpx 0 40rpx; |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
position: relative; |
|||
|
|||
.week-item { |
|||
width: 14%; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #666666; |
|||
} |
|||
|
|||
.day-box { |
|||
width: 14%; |
|||
height: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.day-item { |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
text-align: center; |
|||
|
|||
.day-lunar { |
|||
font-weight: 500; |
|||
font-size: 17rpx; |
|||
color: #999999; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.daySelect { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
text-align: center; |
|||
background: #96684F; |
|||
border-radius: 27rpx; |
|||
color: #fff; |
|||
|
|||
.day-lunar { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.grayDate { |
|||
.day-item { |
|||
color: #999999; |
|||
} |
|||
} |
|||
|
|||
.iconfont { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
display: block; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.session-item { |
|||
width: 697rpx; |
|||
height: 93rpx; |
|||
background: #F5F5F5; |
|||
border-radius: 47rpx; |
|||
margin: 28rpx auto 0; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
padding: 0 28rpx; |
|||
} |
|||
</style> |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue