circulation_ancientCoins_new/pages/searchCoinName/index.vue

<template>
    <view class="column">
        <view class="search-wrapper flex">
            <div class="search-main" :class="{ 'search-main-focus': keyWords > 0 }">
                <image class="icon" :src="cssUrl + 'prescriptSearch.svg'" mode="widthFix"></image>
                <input class="ft46 input-box" placeholder-class="placeholder-style" placeholder="搜索患者姓名"
                    v-model="keyword" />
                <view class="search-text" :class="{ 'green': keyWords > 0 }" @click="getSearch">搜索</view>
            </div>
        </view>
        <view class="patientTab">
            <view :class="'notActive ft32' + (status == '1' ? ' active PfScMedium' : '')" @tap="changeWaitType('1')">
                库存列表</view>
            <view :class="'notActive ft32' + (status == '2' ? ' active PfScMedium' : '')" @tap="changeWaitType('2')">
                出库列表
            </view>
        </view>

        <scroll-view class="patient-type-tab1" @scrolltolower="onScroll" scroll-y>
            <view class="bed-wait-container">
                <ListWrap :bedWaitList="bedWaitList" :type="status" />
            </view>
            <view v-if="loading" class="loading-text">加载中...</view>
            <view v-if="noMore" class="no-more-text">没有更多数据了</view>
            <view class="page-padding" v-show="bedWaitList && bedWaitList.length && bedWaitList.length > 0">
            </view>
        </scroll-view>
    </view>
</template>
<script>
import ListWrap from '@/components/listWrap.vue'

export default {
    options: { styleIsolation: "shared" },
    components: {
        ListWrap,
    },
    data() {
        return {
            list: [],
            cssUrl: this.cssUrl1,
            status: '1',
            loading: false,
            noMore: false,
            page: 1,
            pagesize: 10,
            keyword: '',
            bedWaitList: []
        }
    },
    computed: {
        keyWords() {
            return this.keyword.length
        }
    },
    onLoad(option) {
        // var token = uni.getStorageSync("u_token");
        // 初始化情求
        this.getCoinsList()
        // this.$refs.coinsPopup.openPop();
    },
    onPullDownRefresh() {
        this.bedWaitList = [];
        this.page = 1;
        this.getCoinsList()
    },
    onReachBottom() {
        if (!this.noMore && !this.loading) {
            this.page++;
            this.getCoinsList();
        }
    },
    methods: {
        onScroll() {
            if (!this.noMore && !this.loading) {
                this.page++;
                this.getCoinsList();
            }
        },
        getSearch(){
            this.page = 1;
            this.bedWaitList = [];
            this.getCoinsList()
        },
        changeWaitType(type) {
            this.status = type;
            this.page = 1;
            this.bedWaitList = [];
            // 调用列表查询接口
            this.getCoinsList()
        },
        getCoinsList() {
            this.loading = true;
            // 获取列表信息
            this.$http.req('/api/getlist', { status: this.status, page: this.page, pagesize: this.pagesize, keyword: this.keyword }, 'POST').then(data => {
                uni.stopPullDownRefresh();
                this.loading = false;
                if (data.list.length === 0 || data.length == 0) {
                    this.noMore = true;
                    uni.showToast({ title: '没有更多数据了', icon: 'none' });
                    return;
                }
                debugger
                // 如果是第一页直接替换，否则追加
                if (this.page === 1) {
                    this.bedWaitList = data.list;
                } else {
                    this.bedWaitList = [...this.bedWaitList, ...data.list];
                }
                console.log(this.bedWaitList,'bedWaitList===');
                this.storage_count = data.storage_count;
                this.delivery_count = data.delivery_count;
            }).catch(res => {
                this.loading = false;
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.column{
    display: flex;
    height: 100%;
    flex-direction: column;
}
.loading-text,
    .no-more-text {
        text-align: center;
        padding: 20rpx;
        color: #999;
    }
.patient-type-tab1 {
    height: 0;
    width: 100%;
    background: white;
    flex: 1;

    .bed-wait-container {
        padding: 0rpx 42rpx;
        background: white;
        box-sizing: border-box;
    }

}

.search-main-focus {
    border: 2rpx solid #39D067 !important;
    transition: all .3s;
    background: #fff;
}

.green {
    color: #4DC56D !important;
}

.search-wrapper {
    margin-top: 20rpx;
    padding: 20rpx 42rpx;
    background: #fff;

    input:focus {
        border-color: #39D067;
    }

    .search-main {
        transition: all .3s;
        border: 2rpx solid transparent;
        width: 100%;
        border-radius: 6px;
        background: #F7F7F7;
        box-sizing: border-box;
        display: flex;
        height: 70rpx;
        align-items: center;
        padding: 0rpx 20rpx;
        justify-content: space-between;
    }

    .search-main-left {
        align-items: center;
        gap: 12rpx;
        color: #999999;
    }

    .input-box {
        height: 70rpx;
        line-height: 70rpx;
        font-size: 28rpx;
        color: #000000;
        text-align: left;
        flex: 1;
        padding-left: 12rpx;
    }

    .icon {
        width: 34rpx;
        display: block;
    }
}

.patientTab {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 120rpx;
    align-items: center;
    margin-top: 20rpx;
    padding: 0 62rpx;
    box-sizing: border-box;
    justify-content: space-between;
    background: white;
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.15);
    // box-shadow: 0px 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.15);

    .notActive {
        width: 269rpx;
        height: 100%;
        text-align: center;
        font-weight: 400;
        color: #666666;
        font-size: 32rpx;
        line-height: 120rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .wait-bed-num {
            padding: 0px 14rpx;
            box-sizing: border-box;
            width: auto;
            height: 38rpx;
            min-width: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 60rpx;
            background: #FFEBEB;
            font-size: 28rpx;
            color: #FF1818;
            margin-left: 10rpx;
        }
    }

    .active {
        font-weight: 500;
        color: #4DC56D;
        box-sizing: border-box;
        border-bottom: 4rpx solid #4DC56D;
    }
}
</style>