vue价格日历

vue酒店入住 vant自定义日历显示不同的价格

<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>

效果

具体业务需求根基实际开发自行调整