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.
163 lines
4.1 KiB
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>
|
|
|