新增日历切换

components/ui-calendar/ui-calendar.js

@@ -33,6 +33,11 @@ Component({
     // debugger
   },
   methods: {
+    emptyFun(){
+      this.setData({
+        indexT:-1,
+      })
+    },
     onDayTap: function (e) {
       console.log(e)
       this.triggerEvent('onDayTap', e.currentTarget.dataset);

components/ui-calendar/ui-calendar.wxml

@@ -81,10 +81,10 @@
     day = day>9?day:'0'+day;
 
     var dataTime = year+'-'+month+'-'+day;
-    console.log(dataTime);
+    // console.log(dataTime);
     var a = auctionCount.indexOf(dataTime);
     var b = listedCount.indexOf(dataTime);
-    console.log(a,b);
+    // console.log(a,b);
     if(a>=0&&b>=0){
       return 'active active-back-four'
     }else if(a>=0&&b<0){

components/ui-calendar/ui-calendar.wxss

@@ -14,16 +14,16 @@
   align-items: center;
   justify-content: center;
   margin: 12rpx;
-  width: 72rpx;
-  height: 72rpx;
+  width: 76rpx;
+  height: 76rpx;
   box-sizing: border-box;
 }
 .item .item_view {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  width: 72rpx !important;
-  height: 72rpx !important;
+  width: 76rpx !important;
+  height: 76rpx !important;
   box-sizing: border-box !important;
 }
 

pages/calendar/calendar.js

@@ -37,20 +37,34 @@ Page({
     calendarSelectedDateStr: '',
     region: ["500000", "500100"],
     cityName: '重庆',
+    timeValue: '',
+    year: '',
+    month: '',
+
+
 
     info: [],//挂牌列表
-    infoT:[],//拍卖列表
+    infoT: [],//拍卖列表
 
-    auctionCount:[],//有拍卖数量日期
-    listedCount:[],//有挂牌数量日期
+    auctionCount: [],//有拍卖数量日期
+    listedCount: [],//有挂牌数量日期
   },
 
   bindDateChange(res) {
-    let calendarDisplayTime = res.detail.value
+    let calendarDisplayTime = res.detail.value;
+    console.log(calendarDisplayTime);
+
     this.setData({
-      calendarDisplayTime
+      year: calendarDisplayTime.split('-')[0],
+      month: calendarDisplayTime.split('-')[1],
+      calendarDisplayTime,
+      timer: '',
     })
+    this.selectComponent("#calendarId").emptyFun('');
+    this.getCalendar();
   },
+
+
   tabDowm(e) {
     let active = e.currentTarget.dataset.id
     if (active !== this.data.active) {
@@ -69,9 +83,14 @@ Page({
     let date = `${year}-${month}`
     if (date !== this.data.calendarDisplayTime) {
       this.setData({
-        calendarDisplayTime: date
+        calendarDisplayTime: date,
       })
     }
+    this.setData({
+      timeValue: date,
+      year: year,
+      month: month,
+    })
   },
 
   bindAddressChange(res) {
@@ -84,11 +103,11 @@ Page({
     this.onShow()
   },
   // 跳转
-  navigate(e){
-    let id=e.currentTarget.dataset.id;
+  navigate(e) {
+    let id = e.currentTarget.dataset.id;
     console.log(e.currentTarget.dataset.id)
     wx.navigateTo({
-      url: '/pages/look-detail/look-detail?id='+id,
+      url: '/pages/look-detail/look-detail?id=' + id,
     })
   },
 
@@ -104,29 +123,30 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-    let demo =wx.getStorageSync("date");
-    let timer=this.data.timer;
-    if(demo){
-      timer=demo.time
+    let demo = wx.getStorageSync("date");
+    let timer = this.data.timer;
+    if (!timer) {
+      timer = this.data.calendarDisplayTime + '-' + new Date().getDate();
+    }
+    if (demo) {
+      timer = demo.time
       this.setData({
         timer
       })
-    }else{
-      timer = moment().format('YYYY-MM-DD')
+    } else {
+      // timer = moment().format('YYYY-MM-DD')
       this.setData({
         timer
       })
     }
 
-    $api.getLandlistedList({annoDate:timer,city:this.data.cityName}).then(res=>{
-      console.log(res.data)
-
+    $api.getLandlistedList({ annoDate: timer, city: this.data.cityName }).then(res => {
       this.setData({
         info: res.data.records
       })
     })
 
-    $api.getLandlistedList2({auctionDate:timer,city:this.data.cityName}).then(res=>{
+    $api.getLandlistedList2({ auctionDate: timer, city: this.data.cityName }).then(res => {
       console.log(res.data)
       this.setData({
         infoT: res.data.records
@@ -138,20 +158,23 @@ Page({
         selected: 0
       })
     }
-  // 获取日历列表数据
-    $api.AJAX("GET",'applets/landlisted/calendar',{
-      date: moment().format('YYYY-MM')
-    },true).then(res=>{
+    this.getCalendar();
+  },
+  getCalendar() {
+    // 获取日历列表数据
+    $api.AJAX("GET", 'applets/landlisted/calendar', {
+      date: this.data.calendarDisplayTime
+    }, true).then(res => {
       let auctionCount = [];//	拍卖数量的
       let listedCount = [];//挂牌数量的
 
-      res.data.map((item,index)=>{
-        if(item.auctionCount>0){
+      res.data.map((item, index) => {
+        if (item.auctionCount > 0) {
           auctionCount.push(
             item.date
           )
         }
-        if(item.listedCount>0){
+        if (item.listedCount > 0) {
           listedCount.push(
             item.date
           )
@@ -160,14 +183,13 @@ Page({
       console.log(auctionCount);
       console.log(listedCount);
 
-        this.setData({
-          auctionCount: auctionCount,
-          listedCount: listedCount,
-        })
+      this.setData({
+        auctionCount: auctionCount,
+        listedCount: listedCount,
+      })
 
     })
   },
-
   // 日历点击跳转（请求接口获取列表数据）
   onCalendarDayTap(res) {
     console.log(res)
@@ -178,7 +200,7 @@ Page({
     })
     this.onShow()
   },
-  calendarSelectedDate(e){
+  calendarSelectedDate(e) {
     console.log(e)
   }
 })

pages/calendar/calendar.wxml

@@ -14,22 +14,33 @@
   <view class="main">
     <!-- 日历部分 -->
     <view class="top">
-      <view class="address">
-        <picker mode="region" value="{{region}}" bindchange="bindAddressChange">
-          <view class="picker">
-            当前选择
+      <view class="screening">
+        <view class="address">
+          <picker mode="region" value="{{region}}" bindchange="bindAddressChange">
+            <view class="picker">
+              当前选择
+            </view>
+          </picker>
+          <text>{{cityName}}</text>
+          <image class="tag" src="../../assets/images/arrow-down.png"></image>
+        </view>
+        <picker mode="region" value="{{timeValue}}" fields="month" mode="date" bindchange="bindDateChange">
+          <view class="dateTime">
+            <view class="dateLi years">
+              {{year}}年
+            </view>
+            <view class="dateLi month">
+              {{month}}月
+            </view>
           </view>
         </picker>
 
-
-        <text>{{cityName}}</text>
-        <image class="tag" src="../../assets/images/arrow-down.png"></image>
       </view>
       <view class="cal-box">
         <image class="cal-back" src="../../assets/images/cal-back.png"></image>
         <view class="calendar-box">
           <!-- <calendar bind:callSomeFun="onShow"></calendar> -->
-          <ui-calendar ex-class="calendar-cm-month" bindonDayTap="onCalendarDayTap" auctionCount="{{auctionCount}}"
+          <ui-calendar ex-class="calendar-cm-month" id='calendarId' bindonDayTap="onCalendarDayTap" auctionCount="{{auctionCount}}"
             listedCount="{{listedCount}}" displayTime="{{calendarDisplayTime}}" selectedDate="{{calendarSelectedDate}}"
             displayMonthNum="{{calendarDisplayMonthNum}}" is-show="{{isCalendarShow}}"></ui-calendar>
         </view>
@@ -39,7 +50,7 @@
       <view class="tab-item {{item.id===active?'active':''}}" wx:for="{{tabList}}" wx:for-index="i" wx:for-item="item"
         wx:key="id" bindtap="tabDowm" data-id="{{item.id}}">
         <view class="tab-title">
-        {{item.name}} ({{item.id == 1?info.length:infoT.length}})
+          {{item.name}} ({{item.id == 1?info.length:infoT.length}})
         </view>
         <image class="tab-tag" src="../../assets/images/tab-tag.png"></image>
       </view>

pages/calendar/calendar.wxss

@@ -153,4 +153,25 @@
   flex: 1;
   width: 100%;
   display: flex;
+}
+
+
+.screening{
+  display: flex;
+  align-items: center;
+  justify-content:space-between;
+  padding-right: 20rpx;
+
+}
+.dateTime{
+  display: flex; 
+}
+.dateTime .dateLi{
+  height: 50rpx;
+  line-height: 50rpx;
+  padding:0 20rpx;
+  border-radius: 25rpx;
+  border:2rpx solid #333333;
+  columns: #333333;
+  margin:0 10rpx;
 }