<template> <view class="list"> <!-- <u-picker :show="true" :columns="termList" keyName="name"></u-picker> --> <view class="list_head"> <view class="list_select" @click="openTerm" > <!-- <u-picker :defaultIndex="[0]" :show="true" :columns="termList" keyName="name" @cancel="cancel" @confirm="confirm" @change="changeTerm"> {{this.termName}} </u-picker> --> <picker @change="bindPickerChange" :value="index" :range-key="'name'" :range="termList"> <view class="uni-input" style="font-size: 12px;">{{termList[index].name}}</view> </picker> <view class='neirong'> </view> <image src="../../static/more.png" mode=""></image> </view> <u-search @change="changeName" @search="searchBtn" class="list_search" shape="square" placeholder="请输入学生姓名" placeholder-color="#b9b9b9" searchIconColor="#b9b9b9" :showAction="false" bgColor="#F7F7F7" @clear="clearActive()" v-model="searchName"></u-search> <view class="list_btn" @click="shaixuanBtn"> 筛选 </view> </view> <!-- 判断是否为空 --> <view v-if="list.length > 0"> <view class="list_content" v-for="(item,index) in list" :key='index' @click="student_detail(item.id)"> <view class="top"> <view class="headimg" > <image :src="item.headimg" mode="aspectFill"></image> </view> <view class="message"> <view class="name"> {{item.truename}} </view> <view class="same"> <view class="circle"> </view> <view class="ding">手机号:</view><view class="words">{{item.mobile ? item.mobile : '--'}}</view> </view> <view class="same"> <view class="circle"> </view> <view class="ding"> 班级: </view><view class="words">{{item.class ? item.class : '--'}}</view> </view> <view class="same"> <view class="circle"> </view> <view class="ding"> 学号: </view><view class="words">{{item.account}}</view> </view> </view> </view> <view class="bottom"> <view class="left"> 需求: </view> <view class="right"> {{item.demand}} </view> </view> </view> </view> <view class="enptyStatus" v-else> <image src="../../static/empty.png" mode=""></image> <view class="words"> 暂无学生 </view> </view> <tab-bar :current="2"></tab-bar> </view> </template> <script> export default { data() { return { term:'请选择', showTerm: true, list: [], page: 1, last: false, termList:[{ id:'', name:'' }], termId:'', termName:'', searchName:'', index:0, } }, onShow() { if(this.is_weixin()){ this.navTitle() } this.page = 1 this.list = [] this.last = false let nowDate = new Date() let month = nowDate.getMonth() + 1 // if (month >= 9) { // this.term = 1 // } else { // this.term = 2 // } this.getList() this.getTerm() }, onReachBottom() { if (!this.last) { this.page++ } console.log(this.page) this.getList() }, methods: { //判断是否是微信 is_weixin() { let ua = navigator.userAgent.toLowerCase(); return ua.indexOf('micromessenger') != -1; }, navTitle() { let navTitle = document.getElementsByTagName('uni-page-head'); navTitle[0].style.display = 'none' }, // 拿取学期 getTerm(){ this.$u.get('/mentor/term-select-options').then(res => { // this.termList = res.data.map(item=>{ // return item.name // }) this.termList = res.data console.log(this.termList, '学期数据') }) }, // 触发picker弹窗时间 openTerm(){ this.showTerm = true console.log(this.termList,"搜索触发111") }, bindPickerChange(e){ console.log(e, '********') this.index = e.target.value this.termId = this.termList[this.index].id this.list = [] console.log(this.termId, '000000') this.getList() }, // 点击筛选俩字 shaixuanBtn(){ this.list=[] this.page = 1 this.last = false this.getList() }, // 搜索事件 searchBtn(e){ this.searchName = e console.log(e, "搜索触发000") }, //清空搜索框 clearActive() { this.list = [] this.page = 1 this.searchName = '' this.last = false this.getList() }, changeName(e){ this.searchName = e console.log(e, "搜索内容变化时") }, //获取我的学生列表 getList() { let data = { page:this.page, term_id: this.termId, student_name: this.searchName, } this.$u.get('/mentor/subscribe-student', data).then(res => { let data = res.data.list if (this.page > 1 && data.length == 0) { uni.showToast({ title: '暂无更多', icon: 'none' }) this.last = true } else { this.list = this.list.concat(data) } }) }, //跳转学生详情 student_detail(id) { uni.navigateTo({ url: './details?id=' + id }) } } } </script> <style lang="scss" > page{ background-color: #F7F7F7; border-top: 0.5px solid rgba(0, 0, 0, 0.1); padding-bottom: 70px; } .list { .enptyStatus{ display: flex; margin-top: 100px; justify-content: center; align-items: center; flex-direction: column; padding: 30px 10px; image{ width: 80px; height: 120px; } .words{ color: #ffae21; font-size: 14px; padding-top: 10px; } } // .colorWord{ // color: #000000; // } // padding: 0 15px; .list_head{ padding: 0 10px 0 10px; display: flex; align-items: center; height: 44px; // background-color: #FFFFFF; background-color: #FFFFFF; .list_select{ margin: 0 10px 0 0; // color: #b9b9b9; // color: red !important; background: #F7F7F7; width: 140px; display: flex; justify-content: space-around; align-items: center; image{ margin-right: 5px; width: 13px; height: 18px; transform: rotate(90deg); } height: 28px; // border: 1px solid red; } .list_search{ // color: #138E57; color: red; // color: #b9b9b9; // opacity: 0.25; height: 28px; // border: 1px solid blue; // border-radius: 1px; } .list_btn{ width: 30px; margin-left: 9px; color: #138E57; font-size: 15px; cursor: pointer; } } .list_content{ margin: 0 15px; margin-top: 15px; width: 345px; height: 174px; background-color: #FFFFFF; border-radius: 5px; box-shadow: 0px -0.5px 0px #DDDDDD; .top{ display: flex; height: 111px; width: 100%; .headimg{ margin: 13px 10px 5px 14px; height: 91px; width: 83px; image{ height: 85px; width: 80px; } // .image1{ // height: 85px; // width: 80px; // background: url(../../static/images/stu_nan.png) no-repeat; // background-position: center; // background-size: cover; // } // .image{ // height: 85px; // width: 80px; // background: url(../../static/images/stu_nv.png) no-repeat; // background-position: center; // background-size: cover; // } } .message{ margin-top: 13px; margin-left: 5px; .name{ color: #0C0C0C; font-style: normal; font-weight: 500; font-size: 15px; line-height: 18px; } .same{ display: flex; margin-top: 10px; align-items: center; height: 14px; .circle{ flex-shrink: 0; margin-right: 8px; width: 5px; height: 5px; border-radius: 50%; background: #F1A321; } .ding{ flex-shrink: 0; width: 52px; font-size: 13px; color: #666666; opacity: 0.8; } .words{ overflow: hidden; //超出部分隐藏 text-overflow: ellipsis; //超出部分使用省略号 display: -webkit-box;//布局 -webkit-line-clamp: 1; line-clamp: 1;//设置两行显示 -webkit-box-orient: vertical; word-break: break-all; color: #222222; font-style: normal; opacity: 0.8; font-size: 13px; line-height: 14px; } } } } .bottom{ border-top: 0.5px solid #DDDDDD; display: flex; height: 63px; line-height: 20px; margin: 6px 15px; padding: 10px 0; .left{ width: 40px; color: #666666; font-size: 13px; opacity: 0.8 } .right{ width: 260px; overflow: hidden; //超出部分隐藏 text-overflow: ellipsis; //超出部分使用省略号 display: -webkit-box;//布局 -webkit-line-clamp: 2; line-clamp: 2;//设置两行显示 -webkit-box-orient: vertical; word-break: break-all; } } } } </style>