页面修改

src/components/trip/tripcalendar.vue

+<style>
+  .calendar-box {
+      height:460px;
+  }
+
+  .calendar-box .calendar {
+    width: 100%;
+    overflow: hidden;
+    table-layout: fixed;
+  }
+
+  .calendar-box .calendar th {
+    height: 20px;
+    padding: 10px 0;
+    line-height: 20px;
+    background: #eee;
+    color: #333;
+    text-align: center;
+    font-size: 14px;
+    font-family: 'PingFangR';
+  }
+
+  .dayList {
+    position: relative;
+    float: left;
+    width: 14.28%;
+    height: 70px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    background-color: #F5F5F5;
+    font-size: 12px;
+  }
+
+  .dayList.noPrice {
+    cursor: default;
+    color: #ccc;
+    background-color: #FFFFFF;
+  }
+
+  .dayList.selectDay {
+    border: 1px solid #ff4646;
+    background-color: #f9f7f6;
+  }
+
+  .dayList.yesPrice {
+    font-weight: bold;
+    font-family: 'PingFangR'
+  }
+
+  .dayList p {
+    float: initial;
+    width: 100%;
+    text-align: center;
+    padding: 0;
+    margin: 10px 0;
+  }
+
+  .dayList p.price {
+    float: initial;
+    width: 100%;
+    text-align: center;
+    padding: 0;
+    margin: 10px 0;
+    color: #ff4646;
+  }
+
+</style>
 <template>
   <div class="q-mt-lg q-mb-lg">
     <div class="section-block download1">
-        123
+      <div class="calendar-box" id='calendar'>
+        <table class="calendar" cellspacing=0 cellpadding=0>
+          <thead>
+            <th v-for="i in week">{{i}}</th>
+          </thead>
+        </table>
+        <div class="monthDayList">
+          <div v-for="(item,index) in daysData" class="dayList" :key="index" @click="item.price?selectDate(index):''"
+            :class="{selectDay:isSelect == index,noPrice:!item.price,yesPrice:item.price}">
+            <p>{{item.day}}</p>
+            <p v-if="item.price" class="price">￥{{item.price}}起</p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
+  // import bus from '../../plugins/event-bus'
   export default {
-    props: ['tripList'],
+    props: {
+      dateData: Array,
+      day: String,
+    },
     data() {
       return {
-        
-      };
+        week: ['日', '一', '二', '三', '四', '五', '六'],
+        priceData: this.dateData,
+        currentDay: this.day,
+        DaysInMonth: [],
+        daysData: [],
+        isSelect: -1,
+        mydate: -1,
+      }
     },
-    created() {},
     mounted() {
-      
+      console.log(this.dateData, 'dateDate');
+      console.log(this.day, 'daydaydaydayday');
+    },
+    created() {
+      this.getYearMonthDay()
+      // bus.$on('order-chosen_calendar', this.orderChosen)
     },
     methods: {
+      orderChosen: function (date) {
+        let day = parseInt(date.split('-')[2]).toString()
+        this.daysData.forEach((x, index) => {
+          if (x.day === day) {
+            this.isSelect = index;
+            this.$emit('ChildrenSelect', date)
+          }
+        });
+        // this.$emit('ChildrenSelect', clickDate)
+      },
 
+      selectDate(index) {
+        if (this.$data.daysData[index].day == 0) {
+          // bus.$emit('chosen-tripdate', null)
+          return;
+        }
+        if (this.isSelect == index) {
+          this.isSelect = -1;
+          // bus.$emit('chosen-tripdate', null)
+          return;
+        }
+        this.isSelect = index;
+
+        let currentDay = this.currentDay.split('-')
+        let clickDay = parseInt(this.$data.daysData[index].day)
+        clickDay = clickDay < 10 ? ('0' + clickDay) : clickDay
+        let clickDate = currentDay[0] + '-' + currentDay[1] + '-' + clickDay
+        this.$emit('ChildrenSelect', clickDate)
       },
+      getYearMonthDay() {
+        let currentYear = this.currentDay.substring(0, 4); //当前年份
+        let currentMonth = this.currentDay.substring(5, 7); //当前月份	
+        let date = new Date();
+        let strDate = date.getDate();
+        let strMonth = (date.getMonth() + 1).toString();
+        // alert(typeof strMonth)
+        //判断是否是闰年
+        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,
+            'dis': false
+          };
+          daysData.push(priceDict);
+        }
+        this.daysData = daysData;
+        var currentDay = `${currentYear}-${currentMonth}-01`;
+        var dateObject = new Date(currentDay);
+        var firstDay = dateObject.getDay(); //得到每个月1号是周几
+        for (var i in this.priceData) {
+          var price = this.priceData[i];
+          var dayIndex = price.startDate.substring(price.startDate.length - 2, price.startDate.length);
+          var dqmonth= price.startDate.split('-')[1];
+          console.log(dqmonth,'dqmonthdqmonthdqmonthdqmonthdqmonth');
+          console.log(dayIndex,'dayIndexxxxx');
+          var dayDict = daysData[Number(dayIndex) - 1];
+          dayDict.price = price.b2BPrice;
+          console.log(strDate,'strDate');
+          console.log(currentMonth,'currentMonth');
+          console.log(strMonth,'strMonth');
+        //   if (dayIndex < strDate && strMonth == currentMonth) {
+        //     dayDict.price = '';
+        //   }
+          if (dqmonth != currentMonth) {
+            dayDict.price = '';
+          }
+
+        }
+        if (firstDay > 0) {
+          var firstDayData = [];
+          for (var i = 0; i < firstDay; i++) {
+            var dict = {
+              'day': ' ',
+              price: '',
+              'dis': true
             };
+            firstDayData.push(dict);
+          }
+          this.daysData = firstDayData.concat(daysData);
+        } else {
+          this.daysData = daysData;
+        }
+        console.log(this.daysData,'daysdataaaaaasadasd');
+      },
+      isleapYears(year) {
+        if (((year % 4) == 0) && ((year % 100) != 0) || ((year % 400) == 0)) {
+          return true;
+        } else {
+          return false;
+        }
+      },
+    }
+  }
 
 </script>