chenkainan
/
tourist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

提交

master
chenkainan 11 months ago
parent
15964cf315
commit
cb25be0cca
3 changed files with 1533 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      main.js
  2. 451
      pages/index/index.vue
  3. 1077
      static/js/lunar.js

6
main.js
View File

@ -8,9 +8,9 @@ import '@/static/js/CommonFunction.js'
Vue.config.productionTip = false Vue.config.productionTip = false
// 去除生产环境console // 去除生产环境console
if (uni.getSystemInfoSync().platform !== "devtools") { // if (uni.getSystemInfoSync().platform !== "devtools") {
console.log = () => {} // console.log = () => {}
} // }
App.mpType = 'app' App.mpType = 'app'

451
pages/index/index.vue
View File

@ -2,9 +2,7 @@
<view class="content"> <view class="content">
<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/topImg.png" class="topImg"></image> <image src="https://static.ticket.sz-trip.com/tourGuide/images/index/topImg.png" class="topImg"></image>
<view class="title"> <view class="title" style="margin-top: 40rpx;">·快捷入口</view>
·快捷入口
</view>
<view class="flex-between"> <view class="flex-between">
<view class="nav-item flex-around"> <view class="nav-item flex-around">
@ -16,21 +14,335 @@
<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/dingdan.png" mode=""></image> <image src="https://static.ticket.sz-trip.com/tourGuide/images/index/dingdan.png" mode=""></image>
</view> </view>
</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> </view>
</template> </template>
<script> <script>
import {
lunar
} from "../../static/js/lunar.js"
export default { export default {
data() { data() {
return { 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() { 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: { 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> </script>
@ -71,4 +383,133 @@
height: 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>

1077
static/js/lunar.js
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save