<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">共{{total}}条数据</div> 
 | 
            <scroll-view scroll-y class="content_list" @scrolltolower="loadmore"> 
 | 
                <div class="content_list_item" v-for="(item, index) in list" :key="index" @click="getVal(item)"> 
 | 
                    <div class="content_list_item_name"> 
 | 
                        <span>{{item.mmodelUnionName}}</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </scroll-view> 
 | 
        </view> 
 | 
    </u-popup> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import { materialDistributeExt } from '@/util/api/ExWarehouse' 
 | 
     
 | 
    export default { 
 | 
        props: { 
 | 
            show: Boolean 
 | 
        }, 
 | 
        data() { 
 | 
            return { 
 | 
                keyword: '', 
 | 
                total: 0, 
 | 
                list: [], 
 | 
                loading: false, 
 | 
                finished: false, 
 | 
                refreshing: false, 
 | 
                form: { 
 | 
                    capacity: 50, 
 | 
                    page: 0, 
 | 
                    total: 0, 
 | 
                    name: '' 
 | 
                } 
 | 
            }; 
 | 
        }, 
 | 
        methods: { 
 | 
            searchInput() { 
 | 
                this.form.page = 0 
 | 
                this.finished = false 
 | 
                this.list = [] 
 | 
                this.loadmore() 
 | 
            }, 
 | 
            getVal(item) { 
 | 
                this.$emit('value', item) 
 | 
            }, 
 | 
            open() { 
 | 
                this.form.page = 0 
 | 
                this.finished = false 
 | 
                this.list = [] 
 | 
                this.loadmore() 
 | 
            }, 
 | 
            loadmore() { 
 | 
                if (!this.finished) { 
 | 
                    this.loading = true; 
 | 
                    this.form.page = this.form.page += 1 
 | 
                    materialDistributeExt({ 
 | 
                        capacity: this.form.capacity, 
 | 
                        page: this.form.page, 
 | 
                        model: { 
 | 
                            mmodelUnionName: this.form.name, 
 | 
                            status: 1 
 | 
                        } 
 | 
                    }).then(res => { 
 | 
                        if (this.refreshing) { 
 | 
                            this.list = [] 
 | 
                            this.refreshing = false; 
 | 
                        } 
 | 
                        this.loading = false; 
 | 
                        if (res.code === 200 && res.data.records && res.data.records.length !== 0) { 
 | 
                            this.form.total = res.data.total 
 | 
                            this.list.push(...res.data.records) 
 | 
                        } 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> 
 |