You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
zhishifufei_uniapp/pages/special/search.vue

163 lines
4.1 KiB

<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",
};
},
onShareAppMessage() {
return {};
},
onShareTimeline() {
return {};
},
onLoad(options) {
this.grade_id = options.gradeId || '';
this.subject_id = options.subjectId || '';
this.special_type = options.specialType || '';
this.getSpecialList();
},
onReachBottom() {
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>