You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
611 lines
16 KiB
611 lines
16 KiB
<template>
|
|
<view class="bg">
|
|
<!-- <span class="iconfont topLeft" @click="goBack"></span> -->
|
|
<image :src="showImg(headImg)" class="topImg"></image>
|
|
|
|
<view class="calendar">
|
|
<view class="calendar-top flex-between">
|
|
<view @click="preNextDate(0)">
|
|
<img src="https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/left.png" class="iconfont" />
|
|
{{ monthShow ? '上一月' : '上一周' }}
|
|
</view>
|
|
<view>{{year}}年{{month}}月</view>
|
|
<view @click="preNextDate(1)">
|
|
{{ monthShow ? '下一月' : '下一周' }}
|
|
<img src="https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/right.png" class="iconfont" />
|
|
</view>
|
|
</view>
|
|
<view class="calendar-bottom">
|
|
<view class="week-item" v-for="(item,index) in weekList" :key="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" :class="selectDay == item.date ? 'daySelect' : ''" @click="changeDate(item.date)">
|
|
{{ nowDay== item.date ? '今日' : item.day }}
|
|
<view class="day-point" v-if="(item.day && selectDay != item.date) && item.flag"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-for="(item, index) in weekDates" :key="index" class="day-box flex-center" :class="(nowDay > getNowTime(item)) ? 'grayDate' : ''" v-if="!monthShow">
|
|
<view class="day-item" :class="selectDay == getNowTime(item) ? 'daySelect' : ''" @click="changeDate(getNowTime(item))">
|
|
{{ nowDay == getNowTime(item) ? '今日' : getNowTime(item).slice(-2) }}
|
|
<view class="day-point" v-if="(item && selectDay != getNowTime(item)) && item.flag"></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 class="box">
|
|
<view class="search-box">
|
|
<img src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" class="search-img" />
|
|
<input type="text" placeholder="搜索" v-model="keywords" @confirm="getList()"/>
|
|
</view>
|
|
|
|
<view class="type-box flex-between">
|
|
<view :class="['type-item',{'type-active': index == typeIndex}]" v-for="(item,index) in typeList" :key="index" @click="typeIndex = index;getList()">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item" v-for="(item,index) in list" :key="index" @click="viewDetail(item)">
|
|
<image :src="showImg(item.image)" mode="aspectFill" class="item-img"></image>
|
|
<view class="content flex-column">
|
|
<view class="title text-overflowRows">{{item.title}}</view>
|
|
<view class="tag text-overflow" v-if="item.keyword">{{item.keyword}}</view>
|
|
<view class="subtitle text-overflow" v-if="item.address">地址：{{item.address}}</view>
|
|
<view class="subtitle text-overflow" v-if="item.start_time && item.end_time">时间：{{item.start_time}} - {{item.end_time}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
weekList: ['日', '一', '二', '三', '四', '五', '六'],
|
|
monthShow: false,
|
|
year: 0,
|
|
month: 0,
|
|
day: 0,
|
|
week: '',
|
|
nowDay: '',
|
|
selectDay: '',
|
|
everyDay: [],
|
|
weekDates: [],
|
|
list: [],
|
|
keywords: '',
|
|
typeList: [
|
|
{
|
|
title: '全部',
|
|
id: ''
|
|
},
|
|
{
|
|
title: '景区活动',
|
|
id: '13'
|
|
},
|
|
{
|
|
title: '演出',
|
|
id: '14'
|
|
},
|
|
{
|
|
title: '展览',
|
|
id: '15'
|
|
},
|
|
{
|
|
title: '其他',
|
|
id: '16'
|
|
}
|
|
],
|
|
typeIndex: 0,
|
|
headImg: ''
|
|
}
|
|
},
|
|
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())
|
|
// if(uni.getSystemInfoSync().platform == 'ios'){
|
|
// this.getEveryDay(this.year + '/' + this.month + '/' + this.day);
|
|
// }else{
|
|
// this.getEveryDay(this.year + '-' + this.month);
|
|
// }
|
|
this.getWeekDates(new Date())
|
|
|
|
this.getList()
|
|
this.getHeadImg('calendar').then(res => {this.headImg = res})
|
|
},
|
|
methods: {
|
|
// 列表
|
|
getList() {
|
|
this.Post({
|
|
date: this.selectDay,
|
|
offset: 0,
|
|
limit: 100,
|
|
type_id: this.typeList[this.typeIndex].id,
|
|
title: this.keywords
|
|
},'/api/activity/getActivityCalendar').then(res => {
|
|
this.list = res.data
|
|
})
|
|
},
|
|
// 将日期格式/改为-
|
|
formatDate(dateStr) {
|
|
if (dateStr) {
|
|
return dateStr.replace(/^\D*(\d{4})\D*(\d{2})\D*(\d{2})\D*$/, '$1-$2-$3').replace(/^(\d{4})-(\d{0,2})-(\d{0,2})$/, (match, p1, p2, p3) => {return `${p1}-${String(p2).padStart(2, '0')}-${String(p3).padStart(2, '0')}`;})
|
|
}
|
|
return
|
|
},
|
|
// 获取当前日期是否有活动
|
|
getActivityCalendarCount() {
|
|
let start = ''
|
|
let end = ''
|
|
if (!this.monthShow) {
|
|
start = this.getNowTime(this.weekDates[0])
|
|
end = this.getNowTime(this.weekDates[6])
|
|
} else{
|
|
start = this.everyDay[0].date
|
|
end = this.everyDay.slice(-1)[0].date
|
|
}
|
|
|
|
this.Post({
|
|
begin_date: start,
|
|
end_date: end,
|
|
},'/api/activity/getActDateCount').then(res => {
|
|
if (!this.monthShow) { //按周展示
|
|
this.weekDates.forEach(day=> {
|
|
const date = this.formatDate(this.getNowTime(day))
|
|
day.flag = 0
|
|
res.data.forEach(item=> {
|
|
if (date == item) {
|
|
day.flag = 1
|
|
}
|
|
})
|
|
})
|
|
} else{ //按月展示
|
|
this.everyDay.forEach(day=> {
|
|
day.flag = 0
|
|
res.data.forEach(item=> {
|
|
if (this.formatDate(day.date) == item) {
|
|
day.flag = 1
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取当前日期
|
|
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;
|
|
console.log(this.everyDay)
|
|
this.getActivityCalendarCount();
|
|
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
|
|
|
|
if(this.weekDates.length > 0) this.getActivityCalendarCount();
|
|
},
|
|
// 切换上一周月、下一周月
|
|
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()
|
|
}
|
|
}
|
|
this.getActivityCalendarCount()
|
|
},
|
|
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))
|
|
}
|
|
},
|
|
// 选中日期
|
|
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
|
|
this.pageNo = 0
|
|
this.list = []
|
|
this.getList()
|
|
}
|
|
},
|
|
viewDetail (item) {
|
|
this.goOtherDetail(item)
|
|
if(!item.link_type) {
|
|
uni.navigateTo({
|
|
url:'/subPackages/eventCalendar/detail?id='+item.id
|
|
})
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
// background: url('https://static.ticket.sz-trip.com/yandu/images/eventCalendar/topBg.png') no-repeat;
|
|
// background-size: 100%;
|
|
background-color: #F5F5F5;
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
.topLeft {
|
|
position: absolute;
|
|
left: 26rpx;
|
|
top: 101rpx;
|
|
font-size: 40rpx;
|
|
z-index: 2;
|
|
}
|
|
|
|
.topBg {
|
|
width: 750rpx;
|
|
height: 520rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.topImg {
|
|
width: 750rpx;
|
|
height: 309.33rpx;
|
|
}
|
|
|
|
.calendar{
|
|
padding: 0 26rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
position: relative;
|
|
margin-top: -20rpx;
|
|
background: #F5F5F5;
|
|
|
|
.calendar-top{
|
|
height: 109rpx;
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
|
|
view:nth-child(2){
|
|
font-size: 31rpx;
|
|
font-weight: bold;
|
|
|
|
span {
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
|
|
.iconfont{
|
|
width: 20rpx;
|
|
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;
|
|
|
|
.day-point{
|
|
width: 5rpx;
|
|
height: 5rpx;
|
|
background: #FF3615;
|
|
border-radius: 50%;
|
|
margin: 5rpx auto 0;
|
|
}
|
|
}
|
|
|
|
.daySelect{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
background: #515150;
|
|
font-size: 29rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.grayDate{
|
|
.day-item{
|
|
color: #999999;
|
|
|
|
.day-point{
|
|
background: #CCCCCC;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconfont{
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
// position: absolute;
|
|
// left: 50%;
|
|
// right: 0;
|
|
// margin-left: -18rpx;
|
|
// bottom: 36rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 13rpx;
|
|
margin: 26.67rpx auto 0;
|
|
padding: 27rpx 13rpx;
|
|
|
|
.search-box {
|
|
width: 670rpx;
|
|
height: 53rpx;
|
|
background: #F7F7F7;
|
|
border-radius: 27rpx;
|
|
padding: 0 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.search-img {
|
|
width: 26.67rpx;
|
|
height: 26.67rpx;
|
|
}
|
|
|
|
input {
|
|
margin-left: 11rpx;
|
|
width: 610rpx;
|
|
line-height: 53rpx;
|
|
font-weight: 400;
|
|
font-size: 25rpx;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.type-box {
|
|
height: 134rpx;
|
|
|
|
.type-item {
|
|
line-height: 45rpx;
|
|
border-radius: 22rpx;
|
|
border: 1rpx solid #999999;
|
|
padding: 0 20rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
.type-active {
|
|
background: #515150;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
|
|
.item-img {
|
|
width: 187rpx;
|
|
height: 236rpx;
|
|
border-radius: 13rpx;
|
|
}
|
|
|
|
.content {
|
|
width: 447rpx;
|
|
height: 236rpx;
|
|
padding: 15rpx 0;
|
|
margin-left: 15rpx;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
width: 447rpx;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.tag {
|
|
padding: 0 10rpx;
|
|
width: fit-content;
|
|
max-width: 400rpx;
|
|
line-height: 36rpx;
|
|
border-radius: 7rpx;
|
|
border: 1rpx solid #515150;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #515150;
|
|
}
|
|
|
|
.subtitle {
|
|
width: 447rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|