【银保app】首页保费排行榜日期只是展示当前时间 柱状图动画调整

src/views/YB_APP/home.vue

@@ -31,7 +31,7 @@
           <img src="@/assets/YB_APP/images/1.png">
           <span style="margin-left: 10px;font-size: 16px;font-weight: bold;">个人保费排行榜</span>
         </span>
-        <span @click="clickCalendar" style="color: #2a409d;border:lpx solid #eee;padding: 6px 12px;border-radius: 15px;background: #f4f6ff;cursor: pointer;font-weight: bold;">
+        <span style="color: #2a409d;border:lpx solid #eee;padding: 6px 12px;border-radius: 15px;background: #f4f6ff;cursor: pointer;font-weight: bold;">
           {{calendarValue}}
         </span>
       </div>
@@ -274,14 +274,14 @@
     <van-popup v-model="calendarShow" position="bottom">
       <van-datetime-picker
         v-model="currentDate"
-        type="month-day"
-        title="选择月日"
+        type="date"
+        title="选择日期"
         :min-date="minDate"
         :max-date="maxDate"
-        :formatter="formatter"
+        @cancel="handleCurrentDateCancel"
+        @confirm="handleCurrentDateConfirm"
       />
     </van-popup>
-    
   </div>
 </template>
 
@@ -290,7 +290,7 @@ import { homeConfigYB, getPremRankList, timelyContYB } from '@/api/YB_APP/index'
 import { Swipe, SwipeItem, NoticeBar, Icon, Popup, DatetimePicker } from 'vant'
 import config from '@/config'
 import png8 from '@/assets/YB_APP/images/8.png';
-
+import utils from '@/assets/js/utils/date-utils'
 export default {
   name: 'Home',
   components: {
@@ -301,19 +301,9 @@ export default {
     [Popup.name]: Popup,
   },
   data() {
-    const formatter = (type, val) => {
-      if (type === 'year') {
-        return `${val}年`;
-      }
-      if (type === 'month') {
-        return `${val}月`;
-      }
-      return val;
-    };
     return {
       config,
-      currentDate:'',
-      formatter,
+      currentDate:new Date(),
       marginTop:'80',
       getCodeValue:'',
       png8,
@@ -326,7 +316,7 @@ export default {
       calendarShow:false,
       minDate: new Date(2019, 1, 1),
       maxDate: new Date(2030, 12, 31),
-      calendarValue:'9月27日',
+      calendarValue:'',
       colorOne:false,
       colorTwo:false,
       colorThree:false,
@@ -335,6 +325,10 @@ export default {
     }
   },
   mounted(){
+    
+    let monthNum = new Date().getMonth()+1
+    let daysNum = new Date().getUTCDate()
+    this.calendarValue = monthNum +'月'+daysNum+'日'
     this.getHomeConfigYB()
     this.getPremRankList()
     this.getTimelyContYB()
@@ -351,6 +345,18 @@ export default {
     }
   },
   methods:{
+    handleCurrentDateCancel() {
+      this.calendarShow = false
+    },
+    handleCurrentDateConfirm(e) {
+      this.calendarShow = false
+      // let titleTime = utils.formatDate(e, 'yyyy-MM')
+      // this.calendarValue = utils.formatDate(e, 'MM-dd')
+      let monthNum = utils.formatDate(e, 'MM')
+      let daysNum = utils.formatDate(e, 'dd')
+      this.calendarValue = monthNum+'月'+daysNum+'日'
+      this.getPremRankList()
+    },
     setMarginTop(){
       EWebBridge.webCallAppInJs("top_bar_height").then(data => {
         console.log(data,'top_bar_height')
@@ -421,20 +427,20 @@ export default {
     setAnimation(){
       if(this.activePersonalType == 1){
         this.ebizPremRankGMList.forEach((item,index)=>{
-          let ruleTrue1 = ` @keyframes changeWidth`+[index]+` { 0% {width: 0px;} 100% {width: `+item.prem/this.ebizPremRankGMList[0].prem*170+`px;} }`
+          let ruleTrue1 = ` @keyframes changeWidth`+[index]+` { 0% {width: 0%;} 100% {width: `+item.prem/this.ebizPremRankGMList[0].prem*100+`%;} }`
           let sheet1 = document.styleSheets[0]
           sheet1.insertRule(ruleTrue1, 0)
-          this.$refs['ebizPremRankGMList'+index].style.width = parseInt(item.prem/this.ebizPremRankGMList[0].prem*170)+'px'
+          this.$refs['ebizPremRankGMList'+index].style.width = parseInt(item.prem/this.ebizPremRankGMList[0].prem*100)+'%'
           this.$refs['ebizPremRankGMList'+index].style.animation = "changeWidth"+index+"  2s  forwards"
         })
       }
       
       if(this.activePersonalType == 2){
         this.ebizPremRankQJList.forEach((item,index)=>{
-          let ruleTrue2 = ` @keyframes changeTotalWidth`+[index]+` { 0% {width: 0px;} 100% {width: `+item.prem/this.ebizPremRankQJList[0].prem*170+`px;} }`
+          let ruleTrue2 = ` @keyframes changeTotalWidth`+[index]+` { 0% {width: 0%;} 100% {width: `+item.prem/this.ebizPremRankQJList[0].prem*100+`%;} }`
           let sheet2 = document.styleSheets[0]
           sheet2.insertRule(ruleTrue2, 0)
-          this.$refs['ebizPremRankQJList'+index].style.width = parseInt(item.prem/this.ebizPremRankQJList[0].prem*170)+'px'
+          this.$refs['ebizPremRankQJList'+index].style.width = parseInt(item.prem/this.ebizPremRankQJList[0].prem*100)+'%'
           this.$refs['ebizPremRankQJList'+index].style.animation = "changeTotalWidth"+index+"  2s  forwards"
         })
       }