zhishifufei_uniapp/pages/merchant/teacher_list.vue

<template>
    <BaseContainer class="thematic-details" flex>
        <NavBar title="讲师列表" />
        <view class="form">
            <label class="label">
                <i class="iconfont iconsousuo"></i>
                <input v-model="search" @confirm="getsearch" type="search" placeholder="输入要搜索的讲师" class="input">
            </label>
            <i v-show="search" class="iconfont iconguanbi1" @click="search = ''"></i>
        </view>

        <view class="flex-auto pos">
            <scroll-view scroll-y class="abs full" @scrolltolower="get_lecturer_list">
                <view v-if="lecturerList.length" class="list">
                    <navigator v-for="item in lecturerList" :key="item.id"  hover-class="none"
                        :url="`/pages/merchant/teacher_detail?id=${item.id}`" class="item">
                        <view><img :src="item.lecturer_head"></view>
                        <view class="item-bd">
                            <view class="name">{{ item.lecturer_name }}</view>
                            <view class="tags"><span v-for="label in item.label" :key="label" class="tag">{{ label }}</span>
                            </view>
                            <view class="attr">{{ item.study }}人学习 | {{ item.curriculum }}课时</view>
                        </view>
                    </navigator>

                </view>
                <view v-if="finished && !lecturerList.length">
                    <image class="nothing" :src="getImgPath('/wap/first/zsff/images/no_data_available.png')" />
                </view>

                <view v-else class="loading-line" style="background-color: #ffffff">
                    <text class="fa fa-spinner loadingpic" style="font-size: 40rpx"></text>
                    <text>{{ loadTitle || "加载更多" }}</text>
                </view>
            </scroll-view>

        </view>

    </BaseContainer>
</template>

<script>
import { lecturerlist } from "@/api/merchant"
export default {
    data() {
        return {
            finished: false,
            page: 1,
            limit: 10,
            lecturerList: [],
            search: '',
            loadTitle: '',
            loadend: false
        }
    },
    watch: {
        search: function (value) {
            this.lecturerList = [];
            this.finished = false;
            this.page = 1;
            if (!value) {
                this.get_lecturer_list();
            }
        }
    },
    onLoad() {
        this.get_lecturer_list();
    },
    methods: {
        getsearch() {
            this.lecturerList = [];
            this.finished = false;
            this.page = 1;
            this.get_lecturer_list()
        },
        // 讲师列表
        async get_lecturer_list() {
            if (this.finished) {
                return;
            }
            uni.showLoading({
                mask: true,
            });
            var params = {
                search: this.search,
                limit: this.limit,
                page: this.page++,
            };
            await lecturerlist(params).then(res => {
                var data = res.data;
                this.lecturerList = this.lecturerList.concat(data);
                this.finished = this.limit > data.length;
                this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多";
            }).catch(err => {
                console.log(err)
            })
            uni.hideLoading();

        }
    },
}
</script>

<style>
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}
page{
    background-color: #ffffff;
}

.form {
    display: flex;
    align-items: center;
    height: 66rpx;
    padding-right: 20rpx;
    padding-left: 30rpx;
    border-radius: 33rpx;
    margin: 18rpx 60rpx;
    background-color: #F7F7F7;
}

.form .label {
    flex: 1;
    display: flex;
    align-items: center;
}

.form .iconsousuo {
    font-size: 23rpx;
    color: #939393;
}

.form .input {
    flex: 1;
    padding-left: 11rpx;
    font-size: 26rpx;
}

.form .input::placeholder {
    color: #999999;
}

.form .iconguanbi1 {
    font-size: 26rpx;
    color: #CCCCCC;
    cursor: pointer;
}

.list {
    padding-left: 30rpx;
}

.list .item {
    display: flex;
    padding: 35rpx 0 35rpx 0;
    border-top: 1px solid #F2F2F2;
}

.list .item:first-child {
    border-top: none;
}

.list img {
    display: block;
    width: 130rpx;
    height: 130rpx;
}

.list .item-bd {
    flex: 1;
    padding-left: 22rpx;
}

.list .name {
    font-weight: 500;
    font-size: 30rpx;
    line-height: 42rpx;
    color: #282828;
}

.list .tags {
    margin-top: 10rpx;
    font-size: 0;
}

.list .tag {
    display: inline-block;
    height: 32rpx;
    padding: 0 12rpx;
    border-radius: 4rpx;
    margin-left: 10rpx;
    background-color: rgba(255, 107, 0, 0.1);
    font-size: 22rpx;
    line-height: 32rpx;
    color: #FF6B00;
}

.list .tag:first-child {
    margin-left: 0;
}

.list .attr {
    margin-top: 10rpx;
    font-size: 26rpx;
    line-height: 37rpx;
    color: #666666;
}

.empty {
    margin-top: 100rpx;
    font-size: 28rpx;
    text-align: center;
    color: #bbb;
}
.nothing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 414rpx;
  height: 336rpx;

  transform: translate(-50%, -50%);
}
.empty image {
    display: block;
    width: 414rpx;
    height: 305rpx;
    margin: 0 auto;
}
</style>