| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <u-popup :show="show" mode="bottom" :closeable="true" :round="10" @open="open" @close="close"> |
| | | <view class="title"> |
| | | <text>éæ©ç产人å</text> |
| | | </view> |
| | | <view class="content"> |
| | | <view class="content_search"> |
| | | <u-search :showAction="false" placeholder="æç´¢å§å" v-model="form.name" @search="searchInput"></u-search> |
| | | </view> |
| | | <div class="content_total">å
±{{form.total}}æ¡æ°æ®</div> |
| | | <scroll-view class="content_list" scroll-y> |
| | | <div class="content_list_item" v-for="(item, index) in list" :key="index" @click="jump(item)"> |
| | | <div class="content_list_item_name"> |
| | | <span>{{item.name}}</span> |
| | | </div> |
| | | </div> |
| | | </scroll-view> |
| | | </view> |
| | | </u-popup> |
| | | </template> |
| | | |
| | | <script> |
| | | import { allUser } from '@/util/api/PlanningAPI' |
| | | export default { |
| | | props: { |
| | | show: Boolean |
| | | }, |
| | | data() { |
| | | return { |
| | | list: [], |
| | | loading: false, |
| | | finished: false, |
| | | refreshing: false, |
| | | form: { |
| | | capacity: 50, |
| | | page: 0, |
| | | total: 0, |
| | | name: '' |
| | | } |
| | | }; |
| | | }, |
| | | methods: { |
| | | // æç´¢æ¡ |
| | | searchInput(data) { |
| | | this.form.page = 0 |
| | | this.finished = false |
| | | this.list = [] |
| | | this.loadmore() |
| | | }, |
| | | jump(item) { |
| | | this.$emit('value', item) |
| | | }, |
| | | open() { |
| | | this.list = [] |
| | | this.form.page = 0 |
| | | this.finished = false |
| | | this.list = [] |
| | | this.loadmore() |
| | | }, |
| | | loadmore() { |
| | | allUser({ name: this.form.name }) |
| | | .then(res => { |
| | | if (res.code === 200 && res.data && res.data.length !== 0) { |
| | | this.form.total = res.data.length |
| | | this.list = res.data |
| | | } else { |
| | | this.finished = true; |
| | | } |
| | | }).catch(err => { |
| | | this.loading = false; |
| | | this.finished = true; |
| | | if (this.refreshing) { |
| | | this.list = [] |
| | | this.refreshing = false; |
| | | } |
| | | }) |
| | | }, |
| | | close() { |
| | | this.$emit('close') |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .title { |
| | | width: 100%; |
| | | height: 85rpx; |
| | | line-height: 85rpx; |
| | | text-align: center; |
| | | text { |
| | | font-size: 30rpx; |
| | | font-family: PingFangSC-Medium, PingFang SC; |
| | | font-weight: 500; |
| | | color: #222222; |
| | | } |
| | | } |
| | | .content { |
| | | width: 100%; |
| | | .content_search { |
| | | width: 100%; |
| | | padding: 0 30rpx 30rpx 30rpx; |
| | | background: white; |
| | | position: sticky; |
| | | top: 85rpx; |
| | | z-index: 9; |
| | | box-sizing: border-box; |
| | | } |
| | | .content_total { |
| | | padding: 24rpx 30rpx; |
| | | background: #F7F7F7; |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | color: #666666; |
| | | } |
| | | .content_list { |
| | | width: 100%; |
| | | height: 800rpx; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .content_list_item { |
| | | padding: 30rpx; |
| | | display: flex; |
| | | border-bottom: 1rpx solid #ececec; |
| | | .serious { |
| | | color: $nav-stateColor4 !important; |
| | | } |
| | | .success { |
| | | color: $nav-stateColor2 !important; |
| | | } |
| | | .warning { |
| | | color: $nav-stateColor5 !important; |
| | | } |
| | | .content_list_item_status { |
| | | font-size: 28rpx; |
| | | margin-right: 10rpx; |
| | | } |
| | | .content_list_item_name { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | span { |
| | | font-size: 30rpx; |
| | | font-family: PingFangSC-Regular, PingFang SC; |
| | | font-weight: 400; |
| | | color: #222222; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |