Vue hotel stay vant custom calendar shows different prices
<template>
<div>
<!-- 日历demo -->
<van-cell title="酒店入住" :value="date" @click="show = true" is-link />
<van-calendar
v-model="show"
type="range"
:formatter="formatter"
title="酒店入住日期选择"
:min-date="minDate"
:max-date="maxDate"
:show-confirm="false"
@confirm="confirm"
>
<div slot="footer">
<van-notice-bar left-icon="cash-back-record">
<div class="footer">
<strong>共计：<span>￥</span>{
{
getCount(s,e)||0}}</strong>
<van-button @click="getConfirm" type="primary">确认</van-button>
</div>
</van-notice-bar>
</div>
</van-calendar>
</div>
</template>
<script>
import {
Button, Calendar, Cell, NoticeBar } from "vant";
export default {
components: {
vanCalendar: Calendar,
vanCell: Cell,
vanNoticeBar: NoticeBar,
vanButton: Button
},
data() {
return {
date: "",
show: false,
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 0, 31),
prices: [],
s: '', // 入住
e: '', // 离店
sum: 0,
};
},
created() {
// 实际开发数据肯定是从后台返回的
// 定义随机假数据
var prices = [];
// 31 天数据 个数 确定时 从1开始 最后小于等于该数字 习惯了这种编程习惯
for (var i = 1; i <= 31; i++) {
// 100 - 200 之间 最后保留两位小数 100.00 88.00 等等
prices.push(parseInt(100 + Math.random() * 101).toFixed(2));
}
this.prices = prices;
},
computed:{
getCount(s, e){
return (s, e)=>{
var prices = this.prices
var sum = eval(prices.slice(s-1,e).join('+'))
this.sum = sum
return sum
}
}
},
methods: {
getConfirm(){
this.show = false
this.date = `${
this.s}日 -- ${
this.e} 日 共计 ${
this.sum} 元`
},
formatter(day) {
const month = day.date.getMonth() + 1;
const date = day.date.getDate();
// 接口返回当前月每天的价格 每天的价格在后台录入 通过接口返回给前端
// 这里我直接写死 31天的随机数据
//
day.bottomInfo = `￥${
this.prices[date - 1]}`;
if (day.type === "start") {
day.topInfo = "入住";
} else if (day.type === "end") {
day.topInfo = "离店";
}
return day;
},
confirm(date){
const [start, end] = date;
this.s = start.getDate()
this.e = end.getDate()
}
},
};
</script>
<style lang="scss" scoped>
.footer{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
width: 300px;
}
</style>
effect
