vue 里面日历能够自定义价格。
Posted dashaxiong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 里面日历能够自定义价格。相关的知识，希望对你有一定的参考价值。
cell-month 组件
<template>
<div class="cell-month">
<div class="weeklist">
<!--星期几-->
<div class="week_box">
<p v-for="(item,index) in weekData">
{{item}}
</p>
</div>
<!--slot插入时间-->
<slot slot="select_month"></slot>
<!--具体的时间-->
<div class="monthDayList">
<div
v-for="(item,index) in daysData" class="dayList"
@click="selectDate(item,index)"
:class="{selectDay:isSelect == index,unData:item.day == ‘ ‘}">
<p :class="item.price?‘‘:‘hui_color‘">{{item.day}}</p>
<span :class="item.price?‘‘:‘hidden‘">{{item.price}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props:{
dateData: Array,
day:String,
},
data(){
return{
weekData:[‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘],
currentDay: this.day,
DaysInMonth:[],
daysData:[],
priceData:this.dateData,
isSelect :-1,
undate :1,
}
},
methods:{
getYearMonthDay(){
let currentYear = this.$data.currentDay.substring(0,4); //当前年份
let currentMonth = this.$data.currentDay.substring(5,7); //当前月份
//判断是否是闰年
if (this.isleapYears(currentYear)) {
this.$data.DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}else{
this.$data.DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}
let monthDay = this.$data.DaysInMonth[Number(currentMonth)-1];//当前月的天数
let daysData = [];
//给数据源赋值
for (var i = 0 ;i < Number(monthDay) ;i++) {
var priceDict = {‘day‘:String(i+1),‘price‘:0};
daysData.push(priceDict);
}
this.$data.daysData = daysData;
var currentDay = `${currentYear}-${currentMonth}-01`;
var dateObject = new Date(currentDay);
var firstDay = dateObject.getDay();//得到每个月1号是周几
for (var i in this.$data.priceData) {
var price = this.$data.priceData[i];
var dayIndex = price.dateStr.substring(price.dateStr.length-2,price.dateStr.length);
var dayDict = daysData[Number(dayIndex)-1];
dayDict.price = price.price;
}
if (firstDay > 0) {
var firstDayData = [];
for (var i=0; i< firstDay;i++) {
var dict = {‘day‘:‘ ‘,price:‘ ‘};
firstDayData.push(dict);
}
this.$data.daysData = firstDayData.concat(daysData);
}else{
this.$data.daysData = daysData;
}
},
isleapYears(year){
if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0)) {
return true;
} else{
return false;
}
},
selectDate(item,index){
if(!item.price){
return
}else{
if (this.$data.daysData[index].day == 0) {
return;
}
this.$data.isSelect = index;
this.$store.commit(‘SetTicketPrice‘,item)
}
// this.back();
},
},
created(){
this.getYearMonthDay();
// console.log(this.priceData)
}
}
</script>
<style scoped lang="less">
.weeklist{
.week_box{
line-height: 42px;
border:1px solid #eee;
display: flex;
p{
float: left;
width: 14%;
padding-left: 10px;
padding-right: 10px;
color: #999999;
text-align: center;
.font11;
&:nth-child(1),&:last-child{
color:#B49C63;
}
}
}
background-color: white;
}
.dayList{
position: relative;
float: left;
width: 14%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 50px;
p{
float: initial;
width: 100%;
text-align: center;
padding: 0 0 0 0;
font-size: 15px;
color:#222222;
}
span{
font-size: 11px;
color:#FF5858;
&.hidden{
opacity: 0;
}
}
}
.monthDayList{
background-color: #fff;
overflow: hidden;
}
.selectDay{
background-color: #B49C63;
p{
color: #fff;
}
span{
color: #fff;
}
}
.unData{
p{
color: white;
}
}
.hui_color{
color:#999999 !important;
}
</style>
页面引用
<div class="data_model">
<div class="calender-content">
<!--选择日期 取消按钮-->
<div class="text_title">
<b>选择日期</b>
<span @click="show_date_model = false">取消</span>
</div>
<cell-month
v-for = "(item,index) in classArray"
:dateData= "item" :day = "item[0].dateStr"
v-if = "index === selectMonth" :key = "index">
<slot name="select_month">
<!--包含的日期-->
<div class="detail_time">
<div class="allMounth"
v-for="(item , index) in dateArray"
@click="selectMounth(index)">
<p :class="index === selectMonth?‘active‘:‘‘">
{{item.mounth.substring(5)}}月</p>
<!--<p>{{item.price}}起</p>-->
</div>
</div>
</slot>
</cell-month>
<div class="sure_btn" @click="select_date">确定</div>
</div>
</div>
script 如下
import cellMonth from ‘@/components/cell-month‘
methods:{
// 加载价格的接口。
loadData(){
// 数据里面的时间年都要完整。 例如1号，就要写 01
let jsonArray = [
{id: ‘4‘, dateStr: ‘2019-12-25‘, price: ‘￥2‘},
{id: ‘4‘, dateStr: ‘2019-12-26‘, price: ‘￥2‘},
{id: ‘4‘, dateStr: ‘2019-12-27‘, price: ‘￥2‘},
{id: ‘4‘, dateStr: ‘2019-12-28‘, price: ‘￥2‘},
{id: ‘4‘, dateStr: ‘2019-12-29‘, price: ‘￥2‘},
{id: ‘4‘, dateStr: ‘2019-12-30‘, price: ‘￥2‘},
{id: ‘4‘, dateStr: ‘2019-12-31‘, price: ‘￥2‘},
{id: ‘0‘, dateStr: ‘2020-01-01‘, price: ‘￥123‘},
{id: ‘0‘, dateStr: ‘2020-01-02‘, price: ‘￥123‘},
{id: ‘0‘, dateStr: ‘2020-01-03‘, price: ‘￥123‘},
];
let monthArray = [];
for (var i in jsonArray) {
var data = jsonArray[i];
var dateDict = {‘mounth‘:data.dateStr.substring(0,data.dateStr.length-3)};
monthArray.push(dateDict);
}
//数组去重,获取有几个月
var hash={};
monthArray = monthArray.reduce(
function (item,next) {
hash[next.mounth]?‘‘ :hash[next.mounth] = true && item.push(next);
return item;
},[]
)
console.log(monthArray);
this.$data.dateArray = monthArray;
//数据分组
let classArray = [];
for (var j in monthArray) {
var newArray = new Array();
for (var i in jsonArray) {
var data = jsonArray[i];
if (data.dateStr.substring(0,data.dateStr.length-3) == monthArray[j].mounth) {
newArray.push(data)
}
}
classArray.push(newArray);
}
this.$data.classArray = classArray;
},
// 点击选择月份
selectMounth(index){
this.$data.selectMonth = index;
console.log(index);
},
// 点击时间确认
select_date() {
this.show_date_model = false // 关闭弹窗
var click_current_month = this.classArray[this.selectMonth][0].dateStr.substring(5,7)
this.click_current_month = click_current_month
},
},
created(){
this.loadData();
},
<style scoped lang="less">
.container{
padding-bottom:60px;
.ticket_item{
margin-bottom:5px;
width: 100%;
.flex-justify-between();
background: @color_fff;
padding:20px 20px 10px 20px;
.ticket_item_left{
width: 240px;
.name{
font-weight:500;
line-height: 30px;
.overflow2;
.font16;
i{
display: inline-block;
width: 16px;
height: 16px;
background: url("../../../static/img/ic_jing.png") no-repeat;
background-size: cover;
margin-right:8px;
}
}
.tap{
margin:15px 0 11px;
.flex();
.flex-wrap();
span{
padding:0 7px;
line-height: 26px;
border:1px solid @color_border;
margin-right:8px;
color:@color_h4;
}
}
.need_know{
.flex-align-center();
line-height: 30px;
>span{
color:@color_h4;
}
>i{
width: 4px;
height: 6px;
background: url("../../../static/img/ic_more.png");
background-size: cover;
margin-left:4px;
}
}
}
.ticket_item_right{
.flex-column();
.flex-justify-between();
.money{
b{
.font12;
color:@color_red;
font-weight: normal;
}
span{
.font18;
color:@color_red;
}
}
.btn{
background: @color_btn;
padding:8px;
border-radius: 3px;
color:#fff;
.font13;
margin-bottom:10px;
}
}
}
.need_conditions{
line-height: 32px;
background: @page_bg;
.padding20();
color:@color_red;
.font12;
}
.content_item{
border-bottom:1px solid @color_border;
.flex-justify-between();
.flex-align-center();
margin:0 20px;
padding:20px 0;
>span{
.font16;
color:@color_h2;
.flex-column();
b{
line-height: 20px;
font-weight: normal;
.font11;
color:@color_span;
}
}
.select_num{
.flex_center();
.btn{
.flex_center();
width: 25px;
height: 25px;
border:1px solid @color_border;
&:active{
background: @color_btn;
color:@color_fff;
}
}
.input{
width: 34px;
height: 25px;
border:1px solid @color_border;
margin:8px;
outline: none;
text-align: center;
.font12();
}
}
.input_text{
width: 46%;
text-align: right;
line-height: 30px;
.font14;
color:@color_h3;
&::-webkit-input-placeholder{
}
}
.tel_box{
.flex-align-center();
input{
flex:1;
}
i{
width: 19px;
height: 18px;
background: url("../../../static/img/ic_peoples.png");
background-size: cover;
margin-left:10px;
}
}
/*使用日期*/
.buy_time{
.flex();
.time_box{
.flex_center();
.flex-column();
text-align: center;
padding:6px;
border-radius: 3px;
min-width: 70px;
border:1px solid @color_h5;
margin-left:5px;
color:@color_h4;
&.active{
background: @color_btn;
color:@color_fff;
border:none;
}
&.disable{
color:@color_span;
}
span{
.font11;
line-height: 18px;
i{
display: block;
}
}
}
.time_box_more{
flex-direction: row;
i{
width: 4px;
height: 7px;
background: url("../../../static/img/ic_switch_choice_jiatou_hui.png") no-repeat;
background-size: cover;
margin:0 11px;
}
}
}
}
.buy_btn_box{
position: fixed;
bottom:0;
width: 100%;
height:60px;
.flex-justify-between();
.flex-align-center();
background: @color_fff;
border-top:1px solid @color_border;
.money{
margin-left:20px;
>span:nth-child(1){
.font14;
color:@color_red;
}
>span:last-child{
color:@color_red;
.font20;
font-weight: 600;
}
}
.buy_btn{
background: @color_btn;
height: 100%;
.flex_center();
width: 140px;
.font18;
color:@color_fff;
}
}
}
.data_model{
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
background: rgba(0,0,0,.4);
}
.calender-content{
background: #fff;
position: fixed;
bottom:0;
left:0;
width: 100%;
.text_title{
text-align: center;
padding:20px 0 30px;
color:@color_h3;
position: relative;
.font16;
font-weight: 400;
span{
.font13;
position: absolute;
padding:20px;
top:0;
right:0;
}
}
.detail_time{
display: flex;
overflow-x: scroll;
}
}
.allMounth{
float: left;
width: 20%;
padding-left: 10px;
padding-right: 10px;
p:last-child{
.font18;
color: #222;
margin:30px 0;
font-weight:400;
}
p{
text-align: center;
&.active{
color:#B49C63;
}
}
}
.cell-month{
margin-top: 3%;
background: #fff;
}
.sure_btn{
width: 100%;
height:50px;
display: flex;
justify-content: center;
align-items: center;
background: #B49C63;
color:#fff;
font-size: 20px;
font-weight: 400;
margin-top:10px;
}
</style>
以上是关于vue 里面日历能够自定义价格。的主要内容，如果未能解决你的问题，请参考以下文章