1.竖向价格日历
代码语言：javascript复制<template>
<view class="page">
<view class="block2_dateBox">
<view class="headbox">
<view class="headdate" style="color:#1a76dc">日</view>
<view class="headdate">一</view>
<view class="headdate">二</view>
<view class="headdate">三</view>
<view class="headdate">四</view>
<view class="headdate">五</view>
<view class="headdate" style="color:#1a76dc">六</view>
</view>
<view class="mouth" v-for="(items,ind) in date">
<view class="daybox">
<view style="margin-left:30rpx;">{{items.data[2][0]}} 年 {{items.data[2][1]}} 月</view>
<view style="border:1rpx solid #ededed;margin-top:20rpx;margin:0 30rpx 30rpx 30rpx;"></view>
<view :class="[item.time ? 'bc':'']" v-for="(item,index) in items.data[0]" style="width: 14%;height: 107rpx;line-height: 78rpx;text-align: center;display: inline-block;position: relative;top: 0;margin-top: -10rpx;overflow: hidden;color: #353535;font-size: 32rpx;" @click="changeDate(item,items.data[2][0],items.data[2][1],items.data[0])">
<text>{{item.date}}</text>
<text class="weui-text" :wx:if="item">￥458</text>
</view>
</view>
<view style="border-bottom: 1rpx solid #ededed;margin:24rpx 0rpx 0 0rpx;"></view>
</view>
</view>
</view>
</template>
<script scoped>
//index.js
//获取应用实例
const app = getApp()
export default {
data() {
return {
date: [],
selected: 0
}
},
onLoad: function() {},
onShow: function() {
this.getFullYears()
},
methods: {
//日历显示 最关键方法：
dateData: function(showYear, showMonth, days) {
let dataAll = [] //总日历数据
let date = new Date() //当前日期
let year = date.getFullYear() //当前年
let month = date.getMonth() 1 //当前月份
let day = ''
if (days == '' || days == null || days == undefined) {
day = date.getDate() //当天
} else {
day = days
}
let thisDate = [year, month, day] //当天日期信息
let week = date.getDay() //当天星期几
if (showYear) {
year = showYear //显示年
}
if (showMonth) {
month = showMonth //显示月
}
let showDate = [year, month] //当前显示日期信息
//获取显示月的天数
let monthDays = new Date(year, month, 0).getDate()
let firstWeek = new Date(year '-' month '-' '1').getDay()
// console.log(monthDays)
//console.log('本月1号星期：' firstWeek)
let daysCount = monthDays //一共显示多少天
let dayscNow = 0 //计数器
for (let i = 0; i < firstWeek; i ) {
dataAll.push('')
}
//把当月的天数转为数组
var selected = 0
for (let i = 1; i <= daysCount; i ) {
if (
thisDate[0] == showDate[0] &&
thisDate[1] == showDate[1] &&
i == day
) {
console.log(thisDate[2], day)
selected = 1
} else {
selected = 0
}
dataAll.push({
date: i,
time: selected
})
}
var arr = {}
console.log('dataAll', dataAll, thisDate, showDate, 'showDate')
return [dataAll, thisDate, showDate]
},
//全年
getFullYears: function() {
var arr = []
let date = new Date() //当前日期
let year = date.getFullYear() //当前年
let month = date.getMonth() 1 //当前月份
let day = date.getDate() //当天
var selected = 0
for (var i = month; i <= 12; i ) {
arr.push({
data: this.dateData(year, i)
})
}
this.date = arr
console.log('qrr', arr)
},
changeDate: function(day, year, month, data) {
console.log('jinlail', day.date, year, month, this.date)
wx.setStorage({
key: 'other_date',
data: year '-' month '-' day.date,
success: function() {
wx.navigateBack() //返回上一个页面
}
})
console.log('返回')
}
},
watch: function() {},
mounted: function() {
wx.setNavigationBarTitle({
title: '选择游玩日期'
})
}
}
</script>
<style scoped>
.page {
background-color: #fff;
}
page {
background-color: #fff;
}
page::before {
background-color: #fff;
}
.headdate {
height: 30px;
background-color: white;
width: 14%;
text-align: center;
line-height: 30px;
}
.headbox {
width: 100%;
margin: 2vh 0;
padding: 1vh 0;
/* border-bottom: 1px solid #e5e5e5; */
display: flex;
}
.mouthhead_box {
height: 88rpx;
padding: 1vh 8vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.mouthhead {
display: flex;
justify-content: space-around;
align-items: center;
/* background-color: #f4f4f4; */
line-height: 88rpx;
text-align: center;
flex: 0.6 1 auto;
}
.ico_tb {
color: #93c2e9;
}
.daybox {
background-color: white;
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.day {
width: 14%;
height: 107rpx;
line-height: 107rpx;
text-align: center;
display: inline-block;
position: relative;
top: 0;
margin-top: -10rpx;
overflow: hidden;
color: #353535;
font-size: 34rpx;
}
.bc {
background-color: #1a76dc;
color: white !important;
border-radius: 100%;
}
.weui-text {
margin-top: -40rpx;
position: relative;
bottom: -30rpx;
margin-left: -50rpx;
font-size: 22rpx;
font-weight: none;
}
</style>
