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 里面日历能够自定义价格。的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板