解决日期标记的动态渲染问题

src/views/home/LivePage.vue

@@ -7,7 +7,6 @@
             <h3 v-html="video.title" />
           </div>
           <div class="text item">
-<!--            <live-player :video-prop="video" />-->
             <div id="dplayer" ref="dplayer" style="height: 480px;" />
           </div>
         </el-card>
@@ -35,7 +34,7 @@
                   @click="handleCellClick(date, data)"
                 >
                   <p>{{ data.day.split("-").slice(2).join() }}</p>
-                  <p v-if="dateMap.get(data.day) != null">{{ '✔️' }}</p>
+                  <p v-if="dealMyDate(data.day)" class="blue budge" />
                 </div>
               </el-calendar>
             </div>
@@ -83,12 +82,10 @@
 <script>
 import flvjs from 'flv.js'
 import DPlayer from 'dplayer'
-import LivePlayer from 'components/LivePlayer'
-import { getCamDetail, getCamList, getCamRecordDay, getCamRecordList } from '@/api/cam'
+import { getCamDetail, getCamList, getCamRecord, getCamRecordByMonth, getCamRecordByDay } from '@/api/cam'
 
 export default {
   name: 'LivePage',
-  components: { LivePlayer },
   data() {
     return {
       flvjs,
@@ -107,33 +104,17 @@ export default {
         following: 1024,
         follower: 1024
       },
-      videoProp: {
-        info: null,
-        autoPlay: false,
-        playlist: []
-      },
-      showPlaylist: false,
-      autoPlay: false,
-      playList: {
-        current: 0,
-        list: [
-          'eyNXaDnmN3',
-          'WkYNYzDePp',
-          'a8Vx9EGDbA',
-          'a8V3D88NJK',
-          '4m7qMXapp1'
-        ]
-      },
       calendarDate: new Date(),
       dateList: [],
       dateMap: new Map(),
-      showCalender: false,
       showRecordList: false,
       camList: [],
       cam: null,
       camDetail: null,
       form: {},
-      recordList: []
+      recordList: [],
+      camRecord: null,
+      showCalender: false
     }
   },
   watch: {
@@ -144,7 +125,7 @@ export default {
         if (oldMonth !== newMonth) {
           this.showCalender = false
           this.form.yearMonth = this.getYearMonth(newValue)
-          getCamRecordDay(this.form).then(resp => {
+          getCamRecordByMonth(this.form).then(resp => {
             if (resp.code === 0) {
               this.dateMap.clear()
               for (const item of resp.data) {
@@ -152,8 +133,8 @@ export default {
                 const dayStr = this.getYearMonthDay(date1)
                 this.dateMap.set(dayStr, date1)
               }
-              this.showCalender = true
             }
+            this.showCalender = true
           })
         }
       }
@@ -165,12 +146,29 @@ export default {
       return
     }
 
+    this.cam = camId
+    this.form.camId = camId
+    this.form.yearMonth = this.getYearMonth(new Date())
+    getCamRecordByMonth(this.form).then(resp => {
+      if (resp.code === 0) {
+        this.dateMap.clear()
+        for (const item of resp.data) {
+          const date1 = new Date(item)
+          const dayStr = this.getYearMonthDay(date1)
+          console.log(date1)
+          console.log(dayStr)
+          this.dateMap.set(dayStr, date1)
+        }
+        this.showCalender = true
+      }
+    })
+
     getCamDetail(camId).then(resp => {
       if (resp.code === 0) {
-        const camDetail = resp.data
-        console.log(camDetail)
-        const url = camDetail.url
-        this.initFlvPlayer(camId, null, url)
+        var camDetail = resp.data
+        // console.log(camDetail)
+        // const url = camDetail.url
+        // this.initFlvPlayer(camId, null, url)
       }
     })
 
@@ -179,31 +177,59 @@ export default {
         this.camList = resp.data
       }
     })
+
+    const recordId = '857500422144'
+    getCamRecord(recordId).then(resp => {
+      if (resp.code === 0) {
+        const respData = resp.data
+        this.initMp4Player(respData.coverUrl, respData.videoUrl)
+      }
+    })
   },
   methods: {
     onSelect(value) {
-      this.showCalender = false
       this.form.camId = value
       this.form.yearMonth = this.getYearMonth(this.calendarDate)
-      getCamRecordDay(this.form).then(resp => {
+      this.showCalender = false
+      getCamRecordByMonth(this.form).then(resp => {
         if (resp.code === 0) {
           for (const item of resp.data) {
             const date1 = new Date(item)
             const dayStr = this.getYearMonthDay(date1)
             this.dateMap.set(dayStr, date1)
           }
-          this.showCalender = true
         }
+
+        this.showCalender = true
       })
     },
     handleCellClick(date, data) {
-      this.form.yearMonthDay = this.getYearMonthDay(date)
-      getCamRecordList(this.form).then(resp => {
+      /* this.form.yearMonthDay = this.getYearMonthDay(date)
+      getCamRecordByDay(this.form).then(resp => {
         if (resp.code === 0) {
           this.showRecordList = true
           this.recordList = resp.data
         }
-      })
+      })*/
+    },
+    dealMyDate(val) {
+      let res = ''
+
+      /* this.potDate = [
+        { date: '2024-02-02', hasRecord: true },
+        { date: '2024-02-01', hasRecord: true }
+      ]
+      for (let i = 0; i < this.potDate.length; i++) {
+        if (this.potDate[i].date === val) {
+          res = this.potDate[i].hasRecord
+          break
+        }
+      }*/
+
+      if (this.dateMap.get(val) != null) {
+        res = true
+      }
+      return res
     },
     getYearMonth(date) {
       const year = date.getFullYear().toString().padStart(4, '0')
@@ -222,6 +248,20 @@ export default {
       const day = date.getDate().toString().padStart(2, '0')
       return year + '-' + month + '-' + day
     },
+    initMp4Player(coverUrl, videoUrl) {
+      new DPlayer({
+        container: document.getElementById('dplayer'),
+        lang: 'zh-cn',
+        autoplay: true,
+        volume: 0.1,
+        mutex: true,
+        video: {
+          pic: coverUrl,
+          url: videoUrl,
+          hotkey: true
+        }
+      })
+    },
     initFlvPlayer(videoId, coverUrl, videoUrl) {
       new DPlayer({
         container: document.getElementById('dplayer'),
@@ -271,4 +311,15 @@ export default {
 .clearfix:after {
   clear: both;
 }
+
+.budge{
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  margin: 10px auto;
+}
+.blue{
+  background-color: #409eff;
+}
+
 </style>