feat: 完成【筛选】

pages/home/components/popup-button/index.js

@@ -0,0 +1,50 @@
+// pages/home/components/popupButton/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    "text": {
+      "type": String,
+      "value": '分类内容'
+    },
+    "reset": {
+      "type": Boolean,
+      "value": false,
+      "observer": "statusReset"
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    chosen: false
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    handleClick() {
+      let newStatus = !this.data.chosen;
+      this.setData({
+        chosen: newStatus
+      })
+
+      this.triggerEvent('clickBtn', newStatus ? {
+        chosen: true,
+        tag: this.properties.text
+      } : {
+        chosen: false,
+        tag: this.properties.text
+      })
+    },
+    statusReset(){
+      this.setData({
+        chosen: false
+      })
+      this.triggerEvent('finshReset');
+    }
+  }
+})

pages/home/components/popup-button/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/home/components/popup-button/index.less

@@ -0,0 +1,24 @@
+/* pages/home/components/popupButton/index.wxss */
+.btn {
+  display: inline-flex;
+  width: 28.3vw;
+  height: 4.9vh;
+  border-radius: 100px;
+  background: #f3f3f3;
+  font-size: 1.7vh;
+  font-weight: 400;
+  font-family: "PingFang SC";
+  line-height: 22px;
+  align-items: center;
+  justify-content: center;
+}
+
+.normal {
+  color: #000000e6;
+}
+
+.chosen {
+  color: #0052d9;
+  border: 1px solid #0052d9;
+  background: #f2f3ff;
+}

pages/home/components/popup-button/index.wxml

@@ -0,0 +1,4 @@
+<!--pages/home/components/popupButton/index.wxml-->
+<button class="btn {{ chosen ? 'chosen' : 'normal'}}" bindtap="handleClick">
+{{ text }}
+</button>

pages/home/index.js

@@ -5,20 +5,39 @@ import {
   fetchAtvsList
 } from '../../services/fetchAtvsList';
 
+const domain = ['IT互联网', '艺术设计', '科技', '电商', '教育', '医疗健康', '心理学', '摄影'];
+const form = ['讲座', '展览', '工作坊'];
+
 Page({
   data: {
+    // 导航栏高度
     navBarHeight: app.globalData.navBarHeight,
 
+    // 轮播图
     current: 0,
     autoplay: true,
     duration: 500,
     interval: 5000,
     swiperList: [],
     atvsList: [],
 
+    // 当前活动分类
     selectedColTitle: 1,
 
-    popupVisible: false
+    // 筛选弹窗
+    popupVisible: false,
+    choosingDate: false,
+    domain,
+    form,
+    priceMax: 588,
+    priceDefault: [0, 288],
+    reset: false,
+    // 用户选择的筛选条件
+    tags: [],
+    dateRange: [],
+    startTime: '',
+    endTime: '',
+    priceRange: []
   },
 
   // 转换标题的事件
@@ -30,12 +49,140 @@ Page({
 
   // 加载页面数据
   async loadData() {
+    // 加载活动的信息
     const swiper = await fetchSwiperLis();
     const atvsList = await fetchAtvsList();
     this.setData({
       swiperList: swiper.data,
       atvsList: atvsList.data
     })
+
+    // 将价格范围设置为初始范围
+    this.setData({
+      priceRange: this.data.priceDefault
+    });
+
+    // 加载今明两日的日期
+    this.loadDate();
+  },
+
+  // 开关筛选弹窗
+  handlePopup() {
+    let newStatus = !this.data.popupVisible;
+    this.setData({
+      popupVisible: newStatus,
+      choosingDate: false
+    })
+  },
+
+  // 选择标签
+  chooseTag({
+    detail
+  }) {
+    if (detail.chosen) {
+      this.data.tags.push(detail.tag)
+    } else {
+      this.data.tags.forEach((item, idx) => {
+        if (item == detail.tag)
+          this.data.tags.splice(idx, 1);
+      })
+    };
+  },
+
+  // 加载今日的日期
+  loadDate() {
+    let date = new Date();
+    let year = date.getUTCFullYear(),
+      month = date.getUTCMonth() + 1,
+      day = date.getUTCDate();
+    this.setData({
+      startTime: year + '年' + month + '月' + day + '日',
+      endTime: month + '月' + (day + 1) + '日'
+    });
+    this.data.dateRange.push(this.data.startTime, this.data.endTime)
+  },
+
+  // 进入选择日期
+  chooseDate() {
+    let newStatus = !this.data.choosingDate;
+    this.setData({
+      choosingDate: newStatus
+    });
+  },
+
+  // 在日历中选择日期
+  handleSelect(e) {
+    let {
+      value
+    } = e.detail;
+    this.data.dateRange = [];
+
+    if (value.length > 1) {
+      value.forEach((time) => {
+        let date = new Date(time);
+        let year = date.getUTCFullYear(),
+          month = date.getUTCMonth() + 1,
+          day = date.getUTCDate() + 1;
+
+        this.data.dateRange.push(year + '年' + month + '月' + day + '日');
+      });
+    };
+  },
+
+  // 确认提交选择的日期
+  comfirmDate() {
+    let start = this.data.dateRange[0],
+      end = this.data.dateRange[1];
+    if (start && end) {
+      if (start.slice(0, 4) == end.slice(0, 4)) {
+        this.setData({
+          startTime: start,
+          endTime: end.slice(5)
+        })
+      } else {
+        this.setData({
+          startTime: start,
+          endTime: end
+        })
+      };
+    }
+    this.chooseDate();
+  },
+
+  // 选择价格范围
+  choosePrice(e) {
+    this.setData({
+      priceRange: e.detail.value
+    })
+  },
+
+  // 完成筛选
+  submit() {
+    let filter = {
+      tags: this.data.tags,
+      dateRange: this.data.dateRange,
+      priceRange: this.data.priceDefault
+    };
+    console.log(filter);
+    this.handlePopup();
+  },
+
+  // 重置筛选条件
+  reset() {
+    this.setData({
+      tags: [],
+      dateRange: [],
+      priceRange: this.data.priceDefault,
+      reset: true
+    });
+    this.loadDate();
+  },
+
+  // 完成重置，将reset值改回原来的假值
+  finshReset() {
+    this.setData({
+      reset: false
+    })
   },
 
   onLoad() {

pages/home/index.json

@@ -10,7 +10,10 @@
     "t-icon": "tdesign-miniprogram/icon/icon",
     "info-card": "/components/info-card/index",
     "t-popup": "tdesign-miniprogram/popup/popup",
-    "t-button": "tdesign-miniprogram/button/button"
+    "t-button": "tdesign-miniprogram/button/button",
+    "popup-button": "./components/popup-button/index",
+    "t-slider": "tdesign-miniprogram/slider/slider",
+    "t-calendar": "tdesign-miniprogram/calendar/calendar"
   },
   "navigationStyle": "custom"
 }