'完成老师列表及找老师功能'

app.json

@@ -1,13 +1,13 @@
 
 {
     "pages": [
+        "pages/teacherList/teacherList",
+        "pages/stuNeed/stuNeed",
+        "pages/stuList/stuList",
         "pages/coursePublish/coursePublish",
         "pages/teachAuthentication/teachAuthentication",
-        "pages/stuNeed/stuNeed",
         "pages/stuDetail/stuDetail",
-        "pages/stuList/stuList",
         "pages/myInfo/myInfo",
-        "pages/teacherList/teacherList",
         "pages/teachDetail/teachDetail",
         "pages/stuCollectionTeach/stuCollectionTeach",
         "pages/teachCollectionStu/teachCollectionStu",

pages/coursePublish/coursePublish.js

@@ -689,10 +689,6 @@ Page({
                         courseName: '葡萄牙语',
                         choesd: false
                     },
-                    {
-                        courseName: '初中政治',
-                        choesd: false
-                    }
                 ],
                 [{
                         courseName: '羽毛球',

pages/myInfo/myInfo.js

@@ -46,7 +46,7 @@ Page({
     //跳转到我的需求
     myNeed(){
         wx.redirectTo({
-          url: '/pages/index/index',
+          url: '/pages/stuNeed/stuNeed',
         })
     },
 

pages/stuNeed/stuNeed.js

@@ -530,10 +530,6 @@ Page({
                 {
                     courseName: '葡萄牙语',
                     choesd: false
-                },
-                {
-                    courseName: '初中政治',
-                    choesd: false
                 }
             ],
             [{

pages/teacherList/teacherList.js

@@ -5,21 +5,689 @@ Page({
      * 页面的初始数据
      */
     data: {
+        toSearch: false,    //是否打开找老师的筛选区
+        courseChosedIndex: '', //选中科目的索引
+        showCourse: false, //科目选项区是否显示
+        courseDetailChosed: '', //课程详情筛选条件
+        showCourseDetail: false, //课程详情选项区是否显示
+        teachIdChosed: '', //老师身份的筛选条件
+        showTeachId: false, //老师身份选项区是否显示
+        teachEduChosed: '', //老师学历的筛选条件
+        showTeachEdu: false, //老师学历选项区是否显示
+        teachSexChosed: '', //老师性别的筛选条件
+        showTeachSex: false, //老师性别选项区是否显示
+        schoolChosed: '', //老师大学的筛选条件
+        showSchool: false, //老师大学选项区是否显示
+        teachImgChosed: '', //老师照片的筛选条件
+        showTeachImg: false, //老师照片选项区是否显示
+        searchList: [1], //搜索条件汇总
+        // 筛选条件
+        // 1、科目
+        courseList: ['小学', '初中', '高中', '大学', '音乐', '舞蹈', '语言', '体育', '美术', '书法', '少儿编程', '计算机', '其他'],
+        // 课程详情
+        courseDetail: [
+            ['小学1-5数学', '小学1-5英语', '小学1-5语文', '小学6数学', '小学6英语', '小学6语文', '小学奥数'],
+            ['初一初二语文', '初一初二数学', '初一初二英语', '初一初二物理', '初一初二化学', '初三语文', '初三数学', '初三英语', '初三物理', '初三化学', '初中历史', '初中地理', '初中奥数', '初中生物', '初中预备班', '初中科学', '初中政治'],
+            ['高一高二语文', '高一高二数学', '高一高二英语', '高一高二物理', '高一高二化学', '高三语文', '高三数学', '高三英语', '高三物理', '高三化学', '高中历史', '高中地理', '高中政治', '高中生物', '信息科技', 'SAT'],
+            ['托福', '雅思', '高等数学', '微观经济学', 'MBA', '成人高考', '国学', '自学考试', '专升本', '考博面试辅导', '考博专业课', '考博英语', '英语四级', '英语六级', '论文指导', '考研专业课', '考研政治', '考研数学', '考研英语', '英语专业四级', '英语专业八级', '课程辅导'],
+            ['小提琴', '钢琴', '电子琴', '长笛', '琵琶', '手风琴', '古筝', '练耳歌唱', '大号', '声乐', '萨克斯', '单簧管', '吉他', '小号', '古琴', '二胡', '大提琴', '打击乐', '圆号', '中提琴', '竹笛', '架子鼓', '扬琴', '巴松'],
+            ['民族舞', '爵士舞', '拉丁舞', '芭蕾舞', '街舞', '现代舞', '踢踏舞'],
+            ['本地方言', '日语', '英语口语', '新概念英语', '牛津英语', '西班牙语', '德语', '商务英语', '法语', '韩语', '意大利语', '汉语', '阿拉伯语', 'SBS英语', '俄语', '葡萄牙语'], 
+            ['羽毛球', '跆拳道', '游泳', '乒乓球', '网球', '中国象棋', '国际象棋', '围棋', '篮球', '空手道'],
+            ['卡通画', '中国画', '素描', '油画', '水彩', '漫画'],
+             ['硬笔', '毛笔', '篆刻'],
+            ['Scratch', 'Python', 'C++', 'microbit'],
+            ['应用能力初级', '应用能力中级', '基本操作'],
+            ['学习习惯', '口才', '心理辅导', '记忆力', '注意力']
+        ],
+        // 2、老师身份
+        teachId: ['不限', '专业老师', '在校大学生'],
+        // 3、学历
+        educationList: ['不限', '博士毕业', '博士在读', '硕士毕业', '硕士在读', '本科毕业', '本科在读', '专科毕业', '专科在读'],
+        // 4、老师性别
+        teachSex: ['不限', '男', '女'],
+        // 5、大学列表，从遍历老师列表获取
+        schoolList: [],
+        // 6、老师照片选项
+        teachImgOptions: ['不限', '有照片'],
+        // 模拟后台读取的老师信息列表
+        teachLists: [
+            [{
+                    imgUrl: '../../images/zly.jpeg'
+                },
+                {
+                    firstName: '赵'
+                },
+                {
+                    lastName: '丽颖'
+                },
+                {
+                    sex: '女'
+                },
+                {
+                    id: '专业老师'
+                },
+                {
+                    teachEdu: '专科毕业'
+                },
+                {
+                    school: '四川大学'
+                },
+                {
+                    date: '2022-7-8'
+                },
+                {
+                    teachYear: '5'
+                },
+                {
+                    suc: '20'
+                },
+                {
+                    newDate: '2022年8月8日'
+                },
+                {
+                    ncd: '小学1-5数学'
+                },
+                {
+                    cList: '小学1-5数学'
+                },
+                {
+                    cType: '小学'
+                },
+                {
+                    selfIntroduce: ''
+                }
+            ],
+            [{
+                    imgUrl: '../../images/zly.jpeg'
+                },
+                {
+                    firstName: '钱'
+                },
+                {
+                    lastName: '多多'
+                },
+                {
+                    sex: '女'
+                },
+                {
+                    id: '在校大学生'
+                },
+                {
+                    teachEdu: '本科在读'
+                },
+                {
+                    school: '电子科技大学'
+                },
+                {
+                    date: '2022-9-21'
+                },
+                {
+                    teachYear: '2'
+                },
+                {
+                    suc: '10'
+                },
+                {
+                    newDate: '2022年8月8日'
+                },
+                {
+                    ncd: '初一初二英语'
+                },
+                {
+                    cList: '小学1-5语文,初一初二英语'
+                },
+                {
+                    cType: '小学'
+                },
+                {
+                    selfIntroduce: '什么都教'
+                }
+            ],
+            [{
+                    imgUrl: ''
+                },
+                {
+                    firstName: '孙'
+                },
+                {
+                    lastName: '悟空'
+                },
+                {
+                    sex: '男'
+                },
+                {
+                    id: '在校大学生'
+                },
+                {
+                    teachEdu: '本科在读'
+                },
+                {
+                    school: '西南交通大学'
+                },
+                {
+                    date: '2022-9-21'
+                },
+                {
+                    teachYear: '2'
+                },
+                {
+                    suc: '10'
+                },
+                {
+                    newDate: '2022年8月8日'
+                },
+                {
+                    ncd: '初一初二英语'
+                },
+                {
+                    cList: '小学1-5语文,初一初二英语'
+                },
+                {
+                    cType: '小学,初中'
+                },
+                {
+                    selfIntroduce: '喜欢打怪'
+                }
+            ],
+            [{
+                    imgUrl: ''
+                },
+                {
+                    firstName: '李'
+                },
+                {
+                    lastName: '子'
+                },
+                {
+                    sex: '女'
+                },
+                {
+                    id: '专业老师'
+                },
+                {
+                    teachEdu: '本科毕业'
+                },
+                {
+                    school: '四川师范大学'
+                },
+                {
+                    date: '2022-9-21'
+                },
+                {
+                    teachYear: '4'
+                },
+                {
+                    suc: '8'
+                },
+                {
+                    newDate: '2022年8月8日'
+                },
+                {
+                    ncd: '高一高二语文'
+                },
+                {
+                    cList: '高一高二语文'
+                },
+                {
+                    cType: '高中'
+                },
+                {
+                    selfIntroduce: '自信满满的一天'
+                }
+            ],
+            [{
+                    imgUrl: '../../images/zly.jpeg'
+                },
+                {
+                    firstName: '赵'
+                },
+                {
+                    lastName: '丽颖'
+                },
+                {
+                    sex: '女'
+                },
+                {
+                    id: '专业老师'
+                },
+                {
+                    teachEdu: '专科毕业'
+                },
+                {
+                    school: '四川大学'
+                },
+                {
+                    date: '2022-7-8'
+                },
+                {
+                    teachYear: '5'
+                },
+                {
+                    suc: '20'
+                },
+                {
+                    newDate: '2022年8月8日'
+                },
+                {
+                    ncd: '小学1-5数学'
+                },
+                {
+                    cList: '小学1-5数学'
+                },
+                {
+                    cType: '小学'
+                },
+                {
+                    selfIntroduce: ''
+                }
+            ],
+            [{
+                    imgUrl: '../../images/zly.jpeg'
+                },
+                {
+                    firstName: '赵'
+                },
+                {
+                    lastName: '丽颖'
+                },
+                {
+                    sex: '女'
+                },
+                {
+                    id: '专业老师'
+                },
+                {
+                    teachEdu: '专科毕业'
+                },
+                {
+                    school: '电子科技大学'
+                },
+                {
+                    date: '2022-7-8'
+                },
+                {
+                    teachYear: '5'
+                },
+                {
+                    suc: '20'
+                },
+                {
+                    newDate: '2022年8月8日'
+                },
+                {
+                    ncd: '小学1-5数学'
+                },
+                {
+                    cList: '小学1-5数学'
+                },
+                {
+                    cType: '小学'
+                },
+                {
+                    selfIntroduce: ''
+                }
+            ],
+            [{
+                    imgUrl: ''
+                },
+                {
+                    firstName: '孙'
+                },
+                {
+                    lastName: '悟空'
+                },
+                {
+                    sex: '男'
+                },
+                {
+                    id: '在校大学生'
+                },
+                {
+                    teachEdu: '本科在读'
+                },
+                {
+                    school: '西南交通大学'
+                },
+                {
+                    date: '2022-9-21'
+                },
+                {
+                    teachYear: '2'
+                },
+                {
+                    suc: '10'
+                },
+                {
+                    newDate: '2022年8月8日'
+                },
+                {
+                    ncd: '初一初二英语'
+                },
+                {
+                    cList: '小学1-5语文,初一初二英语'
+                },
+                {
+                    cType: '小学,初中'
+                },
+                {
+                    selfIntroduce: '喜欢打怪'
+                }
+            ],
+            [{
+                    imgUrl: ''
+                },
+                {
+                    firstName: '李'
+                },
+                {
+                    lastName: '子'
+                },
+                {
+                    sex: '女'
+                },
+                {
+                    id: '专业老师'
+                },
+                {
+                    teachEdu: '本科毕业'
+                },
+                {
+                    school: '成都大学'
+                },
+                {
+                    date: '2022-9-21'
+                },
+                {
+                    teachYear: '4'
+                },
+                {
+                    suc: '8'
+                },
+                {
+                    newDate: '2022年8月8日'
+                },
+                {
+                    ncd: '高一高二语文'
+                },
+                {
+                    cList: '高一高二语文'
+                },
+                {
+                    cType: '高中'
+                },
+                {
+                    selfIntroduce: '自信满满的一天'
+                }
+            ],
+        ]
+    },
 
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        // 遍历老师列表，获取大学信息
+        let teachLists = this.data.teachLists
+        let schoolList = this.data.schoolList
+        // 遍历老师列表
+        for (let i = 0; i < teachLists.length; i++) {
+            // 遍历每个老师信息
+            for (let j = 0; j < teachLists[i].length; j++) {
+                // 判断每个老师信息中大学是否存在，如果存在，写入数组
+                if (teachLists[i][j].school) {
+                    // console.log(teachLists[i][j].school);
+                    schoolList[i] = teachLists[i][j].school
+                }
+            }
+        }
+        // console.log(schoolList);
+        // 大学去重
+        for (let i = 0; i < schoolList.length - 1; i++) {
+            // console.log(schoolList[i]);
+            for (let j = i + 1; j < schoolList.length; j++) {
+                // console.log(schoolList[j]);
+                if (schoolList[i] == schoolList[j]) {
+                    schoolList.splice(j, 1)
+                    j--
+                }
+            }
+        }
+        // console.log(schoolList);
+        this.setData({
+            schoolList
+        })
     },
 
     // 跳转到老师详情页
-    toTeachDetail(){
+    toTeachDetail() {
         wx.redirectTo({
-          url: '/pages/teachDetail/teachDetail',
+            url: '/pages/teachDetail/teachDetail',
         })
     },
 
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
+    // 打开找老师的筛选区
+    toOpenSearch(){
+        let toSearch = this.data.toSearch
+        this.setData({
+            toSearch : !toSearch
+        })
+        // 判断打开找老师的筛选区的条件是否为false，如果是，则关闭所有选项的筛选区
+        if(this.data.toSearch == false){
+            this.setData({
+                showTeachId: false,
+                showCourse: false,
+                showCourseDetail: false,
+                showTeachEdu: false,
+                showTeachSex: false,
+                showSchool: false,
+                showTeachImg: false
+            })
+        }
+    },
+
+    // 科目筛选项
+    // 打开科目选项区，关闭其他选项区
+    chooseCourse() {
+        let showCourse = this.data.showCourse
+        this.setData({
+            showTeachId: false,
+            showCourse: !showCourse,
+            showCourseDetail: false,
+            showTeachEdu: false,
+            showTeachSex: false,
+            showSchool: false,
+            showTeachImg: false
+        })
+    },
+    // 选择科目大类
+    chosedCourse(e){
+        // console.log(e.currentTarget.dataset.index);
+        let courseChosedIndex = e.currentTarget.dataset.index
+        this.setData({
+            courseChosedIndex,
+            showCourseDetail:true
+        })
+        // console.log(this.data.courseChosedIndex);
+    },
+    // 选择课程详情
+    chosedCourseDetail(e){
+        // console.log(e.currentTarget.dataset.index);
+        let index = e.currentTarget.dataset.index
+        let courseDetail = this.data.courseDetail
+        let courseChosedIndex = this.data.courseChosedIndex
+        // let courseDetailChosed = this.data.courseDetailChosed
+        this.setData({
+            courseDetailChosed : courseDetail[courseChosedIndex][index],
+            showCourseDetail: false,
+            showCourse: false
+        })
+        console.log(this.data.courseDetailChosed);
+    },
+
+    // 老师身份筛选项
+    // 打开老师身份选项区，关闭其他选项区
+    chooseTeachId() {
+        let showTeachId = this.data.showTeachId
+        this.setData({
+            showTeachId: !showTeachId,
+            showCourse: false,
+            showCourseDetail: false,
+            showTeachEdu: false,
+            showTeachSex: false,
+            showSchool: false,
+            showTeachImg: false
+        })
+    },
+
+    // 选择老师身份
+    toChosedTeachId(e) {
+        // console.log(e);
+        let index = e.currentTarget.dataset.index
+        let teachIdChosed = this.data.teachIdChosed
+        let teachId = this.data.teachId
+        for (let i = 0; i < teachId.length; i++) {
+            if (i == index) {
+                teachIdChosed = teachId[i]
+            }
+        }
+        this.setData({
+            teachIdChosed,
+            showTeachId: false
+        })
+    },
+
+    // 老师学历筛选项
+    // 打开老师学历选项区，关闭其他选项区
+    chooseTeachEdu() {
+        let showTeachEdu = this.data.showTeachEdu
+        this.setData({
+            showTeachId: false,
+            showCourse: false,
+            showCourseDetail: false,
+            showTeachEdu: !showTeachEdu,
+            showTeachSex: false,
+            showSchool: false,
+            showTeachImg: false
+        })
+    },
+    // 选择老师学历
+    toChosedTeachEdu(e) {
+        let index = e.currentTarget.dataset.index
+        let teachEduChosed = this.data.teachEduChosed
+        let educationList = this.data.educationList
+        for (let i = 0; i < educationList.length; i++) {
+            if (i == index) {
+                teachEduChosed = educationList[i]
+            }
+        }
+        this.setData({
+            teachEduChosed,
+            showTeachEdu: false
+        })
+    },
+
+    // 选择老师性别筛选项
+    // 打开老师性别选项区，关闭其他选项区
+    chooseTeachSex() {
+        let showTeachSex = this.data.showTeachSex
+        this.setData({
+            showTeachId: false,
+            showCourse: false,
+            showCourseDetail: false,
+            showTeachEdu: false,
+            showTeachSex: !showTeachSex,
+            showSchool: false,
+            showTeachImg: false
+        })
+    },
+    // 选择老师性别
+    toChosedTeachSex(e) {
+        let index = e.currentTarget.dataset.index
+        let teachSexChosed = this.data.teachSexChosed
+        let teachSex = this.data.teachSex
+        for (let i = 0; i < teachSex.length; i++) {
+            if (i == index) {
+                teachSexChosed = teachSex[i]
+            }
+        }
+        this.setData({
+            teachSexChosed,
+            showTeachSex: false
+        })
+    },
+
+    // 大学筛选项
+    // 打开大学筛选选项区，关闭其他选项区
+    chooseSchool() {
+        let showSchool = this.data.showSchool
+        this.setData({
+            showTeachId: false,
+            showCourse: false,
+            showCourseDetail: false,
+            showTeachEdu: false,
+            showTeachSex: false,
+            showSchool: !showSchool,
+            showTeachImg: false
+        })
+    },
+    // 选择大学
+    toChosedSchool(e) {
+        let index = e.currentTarget.dataset.index
+        let schoolChosed = this.data.schoolChosed
+        let schoolList = this.data.schoolList
+        for (let i = 0; i < schoolList.length; i++) {
+            if (i == index) {
+                schoolChosed = schoolList[i]
+            }
+        }
+        this.setData({
+            schoolChosed,
+            showSchool: false
+        })
+    },
+
+    // 老师照片筛选项
+    // 打开老师照片选项区，关闭其他选项区
+    chooseTeachImg() {
+        let showTeachImg = this.data.showTeachImg
+        this.setData({
+            showTeachImg: !showTeachImg,
+            showTeachId: false,
+            showCourse: false,
+            showCourseDetail: false,
+            showTeachEdu: false,
+            showTeachSex: false,
+            showSchool: false
+        })
+    },
+
+    // 选择老师照片筛选条件
+    toChosedTeachImg(e) {
+        let index = e.currentTarget.dataset.index
+        let teachImgChosed = this.data.teachImgChosed
+        let teachImgOptions = this.data.teachImgOptions
+        for (let i = 0; i < teachImgOptions.length; i++) {
+            if (i == index) {
+                teachImgChosed = teachImgOptions[i]
+            }
+        }
+        this.setData({
+            teachImgChosed,
+            showTeachImg: false
+        })
+    },
 
+    // 清除选择按钮
+    clearOptions() {
+        this.setData({
+            courseDetailChosed:'',
+            teachIdChosed: '',
+            teachEduChosed: '',
+            teachSexChosed: '',
+            schoolChosed: '',
+            teachImgChosed: ''
+        })
     },
 
     /**
@@ -63,8 +731,8 @@ Page({
     onReachBottom() {
         wx.showToast({
             title: '没有更多了',
-            icon:'none'
-          })
+            icon: 'none'
+        })
     },
 
     /**

pages/teacherList/teacherList.wxml

@@ -1,176 +1,107 @@
 <!--pages/teacherList/teacherList.wxml-->
 <view>
-    <view class="searchContainer"> 
-        <text>搜索老师</text>
-        <input class="searchInp" type="text"/>
-        <text>搜索</text>
+    <view class="toOpenSearch" bindtap="toOpenSearch">
+        找老师
+        <image wx:if="{{toSearch}}" class="iconImg" src="../../images/up.png"></image>
+        <image wx:else class="iconImg" src="../../images/down.png"></image>
     </view>
-    <view class="teachInfo" bindtap="toTeachDetail">
-        <image class="teachImg" mode="widthFix" src="../../images/zly.jpeg"></image>
-        <view class="introduce">
-            <text class="teachName">赵老师</text>
-            <text class="attribute">专业老师</text>
-            <text class="day">2022-7-8</text>
-            <view class="ageContainer">
-                <text class="age">龄</text>
-                <text class="ageYears">5年教龄</text>
-            </view>
-            <view class="ageContainer">
-                <text class="transaction">成</text>
-                <text class="transactionTotal">20条家教记录</text>
-            </view>
-            <view class="transactionList">
-                <text>最新接单：</text>
-                <text>2022年8月8日</text>
-                <text>钢琴</text>
-            </view>
-            <view class="courseList">
-                <text>可授课科目：</text>
-                <text>钢琴等</text>
-            </view>
-            <view class="introduceDetail">
-                <text>XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖XX年XX月获得XX奖</text>
-            </view>
+    <view class="searchContainer" wx:if="{{toSearch}}">
+        <view class="searchList" bindtap="chooseCourse">
+            {{courseDetailChosed || '课程详情'}}
+            <image class="iconImg" src="../../images/down.png"></image>
         </view>
-    </view>
-    <view class="teachInfo">
-        <image class="teachImg" mode="widthFix" src="../../images/zly.jpeg"></image>
-        <view class="introduce">
-            <text class="teachName">钱老师</text>
-            <text class="attribute">在读本科</text>
-            <text class="day">2022-7-8</text>
-            <view class="ageContainer">
-                <text class="age">龄</text>
-                <text class="ageYears">15年教龄</text>
-            </view>
-            <view class="ageContainer">
-                <text class="transaction">成</text>
-                <text class="transactionTotal">20条家教记录</text>
-            </view>
-            <view class="transactionList">
-                <text>最新接单：</text>
-                <text>2022年8月8日</text>
-                <text>钢琴</text>
-            </view>
-            <view class="courseList">
-                <text>可授课科目：</text>
-                <text>钢琴等</text>
-            </view>
-            <view class="introduceDetail">
-                <text>XX年XX月获得XX奖</text>
-            </view>
+        <view class="searchList" bindtap="chooseTeachId">
+            {{teachIdChosed || '老师身份'}}
+            <image class="iconImg" src="../../images/down.png"></image>
         </view>
-    </view>
-    <view class="teachInfo">
-        <image class="teachImg" mode="widthFix" src="../../images/zly.jpeg"></image>
-        <view class="introduce">
-            <text class="teachName">孙老师</text>
-            <text class="attribute">在读硕士</text>
-            <text class="day">2022-7-8</text>
-            <view class="ageContainer">
-                <text class="age">龄</text>
-                <text class="ageYears">5年教龄</text>
-            </view>
-            <view class="ageContainer">
-                <text class="transaction">成</text>
-                <text class="transactionTotal">20条家教记录</text>
-            </view>
-            <view class="transactionList">
-                <text>最新接单：</text>
-                <text>2022年8月8日</text>
-                <text>钢琴</text>
-            </view>
-            <view class="courseList">
-                <text>可授课科目：</text>
-                <text>钢琴等</text>
-            </view>
-            <view class="introduceDetail">
-                <text>XX年XX月获得XX奖</text>
-            </view>
+        <view class="searchList" bindtap="chooseTeachEdu">
+            {{teachEduChosed || '学历'}}
+            <image class="iconImg" src="../../images/down.png"></image>
         </view>
-    </view>
-    <view class="teachInfo">
-        <image class="teachImg" mode="widthFix" src="../../images/zly.jpeg"></image>
-        <view class="introduce">
-            <text class="teachName">李老师</text>
-            <text class="attribute">专业老师</text>
-            <text class="day">2022-7-8</text>
-            <view class="ageContainer">
-                <text class="age">龄</text>
-                <text class="ageYears">5年教龄</text>
-            </view>
-            <view class="ageContainer">
-                <text class="transaction">成</text>
-                <text class="transactionTotal">20条家教记录</text>
-            </view>
-            <view class="transactionList">
-                <text>最新接单：</text>
-                <text>2022年8月8日</text>
-                <text>钢琴</text>
-            </view>
-            <view class="courseList">
-                <text>可授课科目：</text>
-                <text>钢琴等</text>
-            </view>
-            <view class="introduceDetail">
-                <text>XX年XX月获得XX奖</text>
-            </view>
+        <view class="searchList" bindtap="chooseTeachSex">
+            {{teachSexChosed || '性别'}}
+            <image class="iconImg" src="../../images/down.png"></image>
         </view>
-    </view>
-    <view class="teachInfo">
-        <image class="teachImg" mode="widthFix" src="../../images/zly.jpeg"></image>
-        <view class="introduce">
-            <text class="teachName">周老师</text>
-            <text class="attribute">专业老师</text>
-            <text class="day">2022-7-8</text>
-            <view class="ageContainer">
-                <text class="age">龄</text>
-                <text class="ageYears">5年教龄</text>
-            </view>
-            <view class="ageContainer">
-                <text class="transaction">成</text>
-                <text class="transactionTotal">20条家教记录</text>
-            </view>
-            <view class="transactionList">
-                <text>最新接单：</text>
-                <text>2022年8月8日</text>
-                <text>钢琴</text>
-            </view>
-            <view class="courseList">
-                <text>可授课科目：</text>
-                <text>钢琴等</text>
-            </view>
-            <view class="introduceDetail">
-                <text>XX年XX月获得XX奖</text>
-            </view>
+        <view class="searchList" bindtap="chooseSchool">
+            {{schoolChosed || '大学'}}
+            <image class="iconImg" src="../../images/down.png"></image>
+        </view>
+        <view class="searchList" bindtap="chooseTeachImg">
+            {{teachImgChosed || '老师照片'}}
+            <image class="iconImg" src="../../images/down.png"></image>
         </view>
     </view>
-    <view class="teachInfo">
-        <image class="teachImg" mode="widthFix" src="../../images/zly.jpeg"></image>
+    <view class="searchBtn-container" wx:if="{{searchList.length && toSearch}}">
+        <view class="searchBtn">搜索</view>
+        <view class="clearBtn" bindtap="clearOptions">清除选择</view>
+    </view>
+    <!-- 筛选区与老师列表区之间的间隔 -->
+    <view class="interval"></view>
+    <!-- 老师列表区 -->
+    <view class="teachInfo" bindtap="toTeachDetail" wx:for="{{teachLists}}" wx:key="index" wx:for-index="teachIndex">
+        <!-- <image class="teachImg" mode="widthFix" src="{{teachLists[teachIndex][0].imgUrl}}"></image> -->
+        <image class="teachImg" mode="widthFix" src="{{teachLists[teachIndex][0].imgUrl || (teachLists[teachIndex][3].sex == '男' ? '../../images/boy.png' : '../../images/girl.png')}}"></image>
         <view class="introduce">
-            <text class="teachName">吴老师</text>
-            <text class="attribute">专业老师</text>
-            <text class="day">2022-7-8</text>
+            <text class="teachName">{{teachLists[teachIndex][1].firstName}}老师</text>
+            <text class="attribute">{{teachLists[teachIndex][4].id}}</text>
+            <text class="day">{{teachLists[teachIndex][7].date}}</text>
             <view class="ageContainer">
-                <text class="age">龄</text>
-                <text class="ageYears">5年教龄</text>
+                <text class="teachAgeIcon">龄</text>
+                <text class="teachYears">{{teachLists[teachIndex][8].teachYear}}年教龄</text>
             </view>
-            <view class="ageContainer">
+            <view class="transactionContainer">
                 <text class="transaction">成</text>
-                <text class="transactionTotal">20条家教记录</text>
+                <text class="transactionTotal">{{teachLists[teachIndex][9].suc}}条家教记录</text>
             </view>
             <view class="transactionList">
                 <text>最新接单：</text>
-                <text>2022年8月8日</text>
-                <text>钢琴</text>
+                <text>{{teachLists[teachIndex][10].newDate}}</text>
+                <text>{{teachLists[teachIndex][11].ncd}}</text>
             </view>
             <view class="courseList">
                 <text>可授课科目：</text>
-                <text>钢琴等</text>
+                <text>{{teachLists[teachIndex][13].cType}}等</text>
             </view>
             <view class="introduceDetail">
-                <text>XX年XX月获得XX奖</text>
+                <view>自我介绍：</view>
+                <text>{{teachLists[teachIndex][14].selfIntroduce || '无'}}</text>
             </view>
         </view>
     </view>
+</view>
+
+<!-- 筛选条件的选项区 -->
+<!-- 课程科目选项区 -->
+<view class="course" wx:if="{{showCourse}}">
+    <view class="courseLists" wx:for="{{courseList}}" wx:key="index" data-index="{{index}}" wx:for-item="courseItem" bindtap="chosedCourse">{{courseItem}}</view>
+</view>
+<!-- 课程详情选区 -->
+<view class="courseDetail" wx:if="{{showCourseDetail}}">
+    <view class="courseDetailLists" wx:for="{{courseDetail[courseChosedIndex]}}" wx:key="index" data-index="{{index}}" wx:for-item="item" bindtap="chosedCourseDetail">{{item}}</view>
+</view>
+
+
+<!-- 老师身份选项区 -->
+<view class="teachId" wx:if="{{showTeachId}}">
+    <view class="detail" wx:for="{{teachId}}" wx:key="index" data-index="{{index}}" bindtap="toChosedTeachId">{{item}}</view>
+</view>
+
+<!-- 学历选项区 -->
+<scroll-view class="eduList" wx:if="{{showTeachEdu}}">
+    <view class="detail" wx:for="{{educationList}}" wx:key="index" data-index="{{index}}" bindtap="toChosedTeachEdu">{{item}}</view>
+</scroll-view>
+
+<!-- 老师性别选项区 -->
+<view class="teachSex" wx:if="{{showTeachSex}}">
+    <view class="detail" wx:for="{{teachSex}}" wx:key="index" data-index="{{index}}" bindtap="toChosedTeachSex">{{item}}</view>
+</view>
+
+<!-- 大学选项区 -->
+<scroll-view class="schoolList" wx:if="{{showSchool}}">
+    <view class="detail" wx:for="{{schoolList}}" wx:key="index" data-index="{{index}}" bindtap="toChosedSchool">{{item}}</view>
+</scroll-view>
+
+<!-- 老师照片 -->
+<view class="teachImgList" wx:if="{{showTeachImg}}">
+    <view class="detail" wx:for="{{teachImgOptions}}" wx:key="index" data-index="{{index}}" bindtap="toChosedTeachImg">{{item}}</view>
 </view>

pages/teacherList/teacherList.wxss

@@ -1,22 +1,87 @@
 /* pages/teacherList/teacherList.wxss */
 
 /* 搜索老师 */
-.searchContainer{
+/* 找老师的按钮 */
+.toOpenSearch{
+    width: 140rpx;
+    height: 50rpx;
+    line-height: 50rpx;
+    margin-left: 20rpx;
+    border: 1rpx solid gray;
+    border-radius: 70rpx;
+    padding: 4rpx 20rpx;
+}
+.mask{
+    height: 300rpx;
+}
+/* 筛选区的样式 */
+.searchContainer {
     display: flex;
+    padding-bottom: 10rpx;
+    width: 100%;
+    line-height: 50rpx;
+    background-color: #fff;
+    font-size: 28rpx;
+    flex-wrap: wrap;
+    position: sticky;
+    top: 0;
+}
+/* 筛选区列表的样式 */
+.searchList{
+    width: 28%;
+    height: 50rpx;
+    text-align: center;
+    margin-top: 10rpx;
     margin-left: 20rpx;
+    border: 1rpx solid gray;
+    border-radius: 30rpx;
+    overflow: hidden;
 }
-.searchInp{
-    width: 60%;
-    margin-left: 10rpx;
-    margin-right: 10rpx;
-    border: 1rpx solid rgba(128, 128, 237, 0.4);
+/* 下拉箭头图标 */
+.iconImg {
+    width: 26rpx;
+    height: 26rpx;
+}
+/* 搜索按钮 */
+/* 搜索按钮外层容器 */
+.searchBtn-container{
+    height: 50rpx;
+    background-color: #fff;
+    display: flex;
+    position: sticky;
+    top: 136rpx;
+}
+/* 搜索按钮和清除选择按钮的公共样式 */
+.searchBtn,
+.clearBtn{
+    border:1rpx solid gray;
     border-radius: 30rpx;
-    padding-left: 30rpx;
-    background: rgba(237,237,237,0.4);
+    height: 38rpx;
+    line-height: 40rpx;
+    padding: 4rpx 20rpx;
+    font-size: 28rpx;
+}
+/* 搜索按钮 */
+.searchBtn{
+    margin-left: 20rpx;
+}
+/* 清除选择按钮 */
+.clearBtn{
+    display: flex;
+    position: absolute;
+    margin-left: auto;
+    right: 20rpx;
+}
+
+/* 搜索区下方的隔离区 */
+.interval{
+    height: 10rpx;
+    margin-top: 20rpx;
+    background-color: gray;
 }
 
 /* 老师列表 */
-.teachInfo{
+.teachInfo {
     width: 96%;
     display: flex;
     margin-top: 20rpx;
@@ -25,41 +90,49 @@
     /* border: 1rpx solid red; */
     border-bottom: 1rpx solid gray;
 }
+
 /* 老师头像 */
-.teachImg{
+.teachImg {
     width: 20%;
     margin: 0 10rpx;
+    border-radius: 20rpx;
 }
+
 /* 老师介绍外容器 */
-.introduce{
+.introduce {
     width: 70%;
     /* height: 400rpx; */
     /* border: 1rpx solid red; */
     padding: 10rpx;
 }
+
 /* 老师名字 */
-.teachName{
+.teachName {
     font-weight: bold;
 }
+
 /* 老师资质 */
-.attribute{
+.attribute {
     margin-left: 20rpx;
     color: rgb(12, 182, 12);
     font-size: 26rpx;
 }
+
 /* 日期 */
-.day{
+.day {
     float: right;
     color: pink;
     font-size: 28rpx;
 }
-/* 教龄 */
-.ageContainer{
+
+/* 成交记录 */
+.transactionContainer {
     margin-top: 10rpx;
     display: flex;
 }
-.age,
-.transaction{
+/* 教龄和成交记录的标签 */
+.teachAgeIcon,
+.transaction {
     /* margin: 10rpx; */
     padding: 2rpx;
     border: 1rpx solid;
@@ -67,37 +140,135 @@
     font-size: 26rpx;
     color: white;
 }
-.age{
-    background-color:rgba(255,0,0,.6);
+/* 教龄标签的背景色 */
+.teachAgeIcon {
+    background-color: rgba(255, 0, 0, .6);
 }
-.transaction{
-    background-color: rgba(0,128,0,.6);
+/* 成交记录标签的背景色 */
+.transaction {
+    background-color: rgba(0, 128, 0, .6);
 }
-.ageYears,
-.transactionTotal{
+/* 教龄和成交记录标签后的文字 */
+.teachYears,
+.transactionTotal {
     font-size: 24rpx;
     margin-left: 10rpx;
 }
+
 /* 最新接单 */
-.transactionList{
+.transactionList {
     margin-top: 10rpx;
     color: green;
     font-size: 24rpx;
 }
+
 /* 可授课科目 */
-.courseList{
+.courseList {
     margin-top: 10rpx;
     font-size: 30rpx;
 }
-/* 老师介绍 */
-.introduceDetail{
+
+/* 自我介绍 */
+.introduceDetail {
     margin-top: 10rpx;
     font-size: 28rpx;
 }
-.introduceDetail text{
-    overflow:hidden;
+/* 自我介绍的内容 */
+.introduceDetail text {
+    overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
-    -webkit-box-orient:vertical;/*设置对齐模式*/
-    -webkit-line-clamp:4;/*设置多行的行数，本例为两行*/
-}
+    /*设置对齐模式*/
+    -webkit-box-orient: vertical;
+    /*设置多行的行数，本例为两行*/
+    -webkit-line-clamp: 4;
+}
+
+/* 老师身份、学历、性别、大学、老师照片选项区的公共样式 */
+.teachId,
+.eduList,
+.teachSex,
+.schoolList,
+.teachImgList
+{
+    background-color: #F3F3F3;
+    border: 1rpx solid #E6E6E6;
+    position: fixed;
+    padding: 10rpx;
+    z-index: 3;
+}
+/* 课程科目 */
+.course{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 64rpx;
+    background-color: #F3F3F3;
+    border: 1rpx solid #E6E6E6;
+}
+
+.courseLists{
+    width: 160rpx;
+    height: 40rpx;
+    /* background-color: yellow; */
+    border-right: 1rpx solid red;
+    border-bottom: 1rpx solid red;
+    padding: 20rpx 20rpx 20rpx 40rpx;
+}
+
+/* 课程详情 */
+.courseDetail{
+    position: fixed;
+    width: calc(100vw - 224rpx);
+    /* height: 100%; */
+    top: 64rpx;
+    left: 224rpx;
+    background-color: #F3F3F3;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.courseDetailLists{
+    padding: 20rpx;
+    border: 1rpx solid #E6E6E6;
+    border-radius: 16rpx;
+    height: 30rpx;
+    line-height: 30rpx;
+    margin: 10rpx;
+}
+
+/* 老师身份选项区 */
+.teachId{
+    top: 64rpx;
+    left: 34%;
+}
+/* 老师身份、学历、性别、大学、老师照片筛选内容区的公共样式 */
+.detail{
+    margin: 30rpx 0;
+}
+
+/* 老师学历选项区 */
+.eduList{
+    width: 30%;
+    top: 64rpx;
+    right: 20rpx;
+}
+
+/* 老师性别选项区 */
+.teachSex{
+    width: 22%;
+    top: 126rpx;
+    left: 20rpx;
+}
+/* 大学选项区 */
+.schoolList{
+    width: 50%;
+    top: 126rpx;
+    left: 34%;
+}
+/* 老师照片选项区 */
+.teachImgList{
+    width: 180rpx;
+    top: 126rpx;
+    left: 66%;
+}