zhishifufei_uniapp/pages/special/search.vue

<template>
  <BaseContainer class="search-page">
    <NavBar title="搜索" />
    <view class="form">
      <view class="left flex-center-x">
        <i class="iconfont2 iconsousuo"></i>
        <input v-model.trim="search" confirm-type="search" @input="onSearch(search)" placeholder="搜索课程讲师" />
        <i v-show="search" class="iconfont iconguanbi2" @click="search = ''"></i>
      </view>
    </view>
		<view v-if="specialList.length" class="special-section">
      <view>
        <navigator v-for="item in specialList" :key="item.id" :url="getJumpUrl(item)">
          <view class="image">
            <image :src="item.image" mode="aspectFill" :alt="item.title" />
            <view v-if="item.type == 1" class="type">图文</view>
            <view v-else-if="item.type == 2" class="type">音频</view>
            <view v-else-if="item.type == 3" class="type">视频</view>
            <view v-else-if="item.type == 5" class="type">专栏</view>
          </view>
          <view class="text">
            <view class="special-title">{{ item.title }}</view>
            <view class="label">
              <text v-for="(label, index) in item.label" :key="index">{{ label }}</text>
            </view>
            <view class="money-total">
              <view class="money">
                ￥<text>{{ item.money }}</text>
              </view>
              <view v-if="!item.is_light" class="total">共{{ item.count }}节</view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
		<view v-if="specialList.length && !loading" class="finished">{{ loadTitle }}</view>
		<view v-if="finished && !specialList.length" class="empty">
		  <image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无课程" />
		  <view>暂无课程</view>
		</view>
  </BaseContainer>
</template>

<script>
import {
  getNowCateSpecial,
	getSpecialList,
} from "@/api/special";
import { debounce } from 'lodash';

export default {
  data() {
    return {
      search: "",
			grade_id: '',
			subject_id: '',
			special_type: '',
      specialList: [],
			page: 1,
			limit: 10,
			loading: false,
			finished: false,
      singleDetailsURL: "/pages/special/single_details",
      detailsURL: "/pages/special/details",
      isEmpty: false,
    };
  },
  watch: {
    specialList(val) {
      this.isEmpty = !val.length;
    },
  },
  onShareAppMessage() {
    return {};
  },
  onShareTimeline() {
    return {};
  },
	onLoad(options) {
		this.grade_id = options.gradeId || '';
		this.subject_id = options.subjectId || '';
		this.special_type = options.specialType || '';
		this.getSpecialList();
	},
  methods: {
    getJumpUrl(item) {
      return item.is_light ? this.singleDetailsURL : this.detailsURL + "?id=" + item.id;
    },
		onSearch: debounce(function () {
			this.page = 1;
			this.finished = false;
			this.specialList = false;
			this.getSpecialList();
		}, 500),
		async getSpecialList() {
		  if (this.loading || this.finished) {
		    return;
		  }
		  this.loadTitle = "";
		  this.loading = true;
		
		  try {
		    const { data } = await getSpecialList({
					grade_id: this.grade_id,
					subject_id: this.subject_id,
					special_type: this.special_type,
		      page: this.page++,
		      limit: this.limit,
					search: this.search,
		    });
				
		    this.specialList = this.specialList.concat(data);
				console.log(this.specialList);
		    this.finished = data.length < this.limit;
		    this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多";
		  } catch (err) {
				console.log(err);
			}
		
		  this.loading = false;
		},
  },
};
</script>

<style lang="scss" scoped>
	.search-page {
		background: #f6f6f6;
	}
	.form {
		padding: 20rpx 0 34rpx;
		width: 690rpx;
		margin: 0 auto;
		.left {
			background: #fff;
		}
	}
	.search-page .special-section uni-navigator {
		background: #fff;
		&~ uni-navigator {
			margin-top: 20rpx;
		}
	}
	.finished,
	.loading {
	  font-size: 28rpx;
	  line-height: 100rpx;
	  text-align: center;
	  color: #bbb;
	}
	.empty {
	  margin-top: 100rpx;
	  font-size: 28rpx;
	  text-align: center;
	  color: #bbb;
	}
	
	.empty image {
	  display: block;
	  width: 414rpx;
	  height: 305rpx;
	  margin: 0 auto;
	  pointer-events: none;
	}
</style>