347 lines
9.5 KiB
Vue
347 lines
9.5 KiB
Vue
<template>
|
|
<div class="courseList">
|
|
<van-pull-refresh
|
|
v-model="refreshing"
|
|
@refresh="onRefresh"
|
|
:loosing-text="$t('loosing_text')"
|
|
:loading-text="$t('loading_text')"
|
|
>
|
|
<van-list v-model="loading" :finished="finished" @load="getList">
|
|
<div style="padding-bottom: 110px">
|
|
<div class='course_class_box' v-if='classList && classList.length != 0'>
|
|
<div class='course_class_item font12' :class='classIndex == index ? "activeClass" : "inactiveClass"' v-for='(item,index) in classList' :key='index' @click='chooseClass(item,index)'>
|
|
{{item.name}}
|
|
</div>
|
|
</div>
|
|
<div class="text-center" style="padding: 170px 0" v-if="!emptyData">
|
|
<img
|
|
class="emptyDataIcon"
|
|
src="https://image.fulllinkai.com/202108/23/939c529ca16a91e3ee3b22bef2fe92ca.png"
|
|
alt=""
|
|
/>
|
|
<div class="color9 font14" style="margin-top: 14px">{{ $t('Temporarily_no_data') }}</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="moreCourseBox">
|
|
<div
|
|
class="courseBox"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@click="goToUrlId(`courseDetail`, item.id)"
|
|
>
|
|
<div class="coursePic backCover">
|
|
<van-image class="" width="100%" height="100%" fit="cover" :src="item.thumb" />
|
|
<div v-if="item.discount_status == 1" class="preferential colorff font10">
|
|
{{ $t('preferential') }}
|
|
</div>
|
|
</div>
|
|
<div class="m_cou_ct">
|
|
<div class="m_lst_ri">
|
|
<div class="font16 color3 bold course_title">
|
|
<div class="group-icon backCover" v-if="item.is_group"></div>
|
|
<div class="ellipsis_1">{{ item.title }}</div>
|
|
</div>
|
|
<div class="font12 color9 ellipsis_1">{{ item.videos_count || 0 }}{{ $t('Class_time') }}</div>
|
|
</div>
|
|
<div class="signUpBox f-fbc">
|
|
<div class="coursePrice bold font18">
|
|
<span v-if="item.charge != 0">￥</span>
|
|
<span >{{ item.charge == 0? $t('free') : item.charge }}</span>
|
|
<span class="color9 font12 originalPrice" v-if="item.discount_status == 1">{{
|
|
item.price
|
|
}}</span>
|
|
</div>
|
|
<div class="signUp font14 colorff">{{userAuth.is_vip === 1 && item.vip_free === 1? 'VIP免费' : $t('join_learning') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottomLine font12 color6 text-center" v-if="noMoreData">
|
|
- {{ $t('I_have_a_line_in_the_sand') }} -
|
|
</div>
|
|
<div style="height: 50px;"></div>
|
|
</div>
|
|
</div>
|
|
</van-list>
|
|
</van-pull-refresh>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { $toastClear, $toastLoading } from '@/config/toast'
|
|
import service from '@/utils/request'
|
|
|
|
export default {
|
|
computed: {},
|
|
components: {},
|
|
props: {
|
|
url: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
list: [],
|
|
classState: 0,
|
|
classIndex: 0,
|
|
class_id: '',
|
|
classList: [],
|
|
page: 1,
|
|
finished: false,
|
|
loading: false,
|
|
refreshing: false,
|
|
emptyData: true,
|
|
noMoreData: false,
|
|
userAuth: {}
|
|
}
|
|
},
|
|
watch: {},
|
|
methods: {
|
|
chooseClass(e, index) {
|
|
this.classIndex = index
|
|
if (e.id) {
|
|
this.class_id = e.id
|
|
} else {
|
|
this.class_id = ''
|
|
}
|
|
this.onRefresh()
|
|
},
|
|
getAllClass() {
|
|
const vm = this
|
|
const url = `s/h5/course/class`
|
|
service.get(url).then(data => {
|
|
if (data) {
|
|
vm.classList = data
|
|
if (vm.classList.length !== 0) {
|
|
vm.classList.unshift({ id: 0, name: '全部', sort: 0 })
|
|
}
|
|
console.log(vm.classList, '/*-/-*-*/-')
|
|
}
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
ToText(HTML) {
|
|
var input = HTML
|
|
return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ')
|
|
},
|
|
getVipValue() {
|
|
const vm = this
|
|
vm.showQrcode = false
|
|
service.get(`s/h5/user/auth/info`)
|
|
.then(data => {
|
|
console.log(data, 'data----')
|
|
vm.userAuth = data
|
|
})
|
|
},
|
|
getList() {
|
|
const vm = this
|
|
$toastLoading(vm.$i18n.t('loading_text'))
|
|
console.log('two')
|
|
if (!vm.classState) {
|
|
vm.class_id = ''
|
|
vm.getAllClass()
|
|
vm.classState++
|
|
}
|
|
vm.getVipValue()
|
|
service.get(`${vm.url}?page=${vm.page}&class_id=${vm.class_id}`).then(data => {
|
|
const dataV = vm.page === 1 ? [] : vm.list
|
|
if (data.data && data.data.length !== 0) {
|
|
data.data.forEach((item) => {
|
|
if (item.short_description) {
|
|
item.short_description = vm.ToText(item.short_description).slice(0, 32)
|
|
}
|
|
})
|
|
}
|
|
dataV.push(...data.data)
|
|
vm.list = dataV
|
|
vm.refreshing = false
|
|
if (vm.list.length !== 0) {
|
|
vm.emptyData = true
|
|
} else {
|
|
vm.emptyData = false
|
|
}
|
|
if (vm.list.length < 15 || data.data.length < 15) {
|
|
vm.finished = true
|
|
vm.noMoreData = true
|
|
if (vm.list.length === 0) {
|
|
vm.noMoreData = false
|
|
}
|
|
$toastClear()
|
|
return
|
|
} else {
|
|
vm.$nextTick(() => {
|
|
vm.loading = false
|
|
vm.page++
|
|
})
|
|
$toastClear()
|
|
}
|
|
// vm.page++
|
|
// vm.loading = false
|
|
setTimeout(() => {
|
|
$toastClear()
|
|
}, 500)
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
onRefresh() {
|
|
this.page = 1
|
|
this.finished = false
|
|
this.loading = true
|
|
this.getList()
|
|
},
|
|
goToUrlId(url, id) {
|
|
this.$router.push({
|
|
name: url,
|
|
params: { id: id }
|
|
})
|
|
}
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
const ScrollTop = document.getElementById('app')
|
|
ScrollTop.scrollTop = 0
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.courseList {
|
|
height: calc(100vh - 44px) !important;
|
|
}
|
|
.van-tab__pane {
|
|
width: 100vw;
|
|
background: #ffffff;
|
|
}
|
|
.emptyDataIcon {
|
|
width: 135px;
|
|
height: 100px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.course_class_box{
|
|
padding: 3px 0 3px 15px;
|
|
overflow-x: scroll;
|
|
white-space: nowrap;
|
|
.course_class_item{
|
|
display: inline-block;
|
|
width: fit-content;
|
|
padding: 3px 12px;
|
|
border-radius: 20px;
|
|
margin-right: 15px;
|
|
}
|
|
.activeClass{
|
|
color: #707FFA;
|
|
background: #F2F3FF;
|
|
}
|
|
.inactiveClass{
|
|
color: #999999;
|
|
background: #f8f8f8;
|
|
}
|
|
}
|
|
.moreCourseBox {
|
|
margin: 0 15px;
|
|
.courseBox {
|
|
margin: 15px 0;
|
|
background: #ffffff;
|
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
.coursePic {
|
|
width: 100%;
|
|
height: 194px;
|
|
position: relative;
|
|
.group_icon{
|
|
width: 32px;
|
|
height: 16px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.preferential {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: #ff4a4c;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 5px;
|
|
height: 17px;
|
|
border-radius: 8px 0;
|
|
}
|
|
}
|
|
.m_cou_ct {
|
|
padding: 10px 12px 15px;
|
|
box-sizing: border-box;
|
|
.m_lst_ri {
|
|
width: 100%;
|
|
.course_title{
|
|
width: 100%;
|
|
/*display: flex;*/
|
|
/*align-items: center;*/
|
|
.group-icon{
|
|
float: left;
|
|
margin-top: 2px;
|
|
margin-right: 4px;
|
|
width: 32px;
|
|
height: 16px;
|
|
background-image: url("https://image.fulllinkai.com/202211/15/631d937276380af19ec646cf7563a64a.png");
|
|
}
|
|
}
|
|
div {
|
|
/*width: 100%;*/
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
.signUpBox {
|
|
width: 100%;
|
|
.coursePrice {
|
|
color: #fb9830;
|
|
max-width: 80px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
.originalPrice {
|
|
text-decoration: line-through;
|
|
margin-left: 5px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
}
|
|
.signUp {
|
|
padding: 8px 25px;
|
|
background: linear-gradient(90deg, #8c9bff 0%, #707ffa 100%);
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
}
|
|
.joinButton,
|
|
.joinCourseV2 {
|
|
position: absolute;
|
|
right: 15px;
|
|
bottom: 20px;
|
|
width: 78px;
|
|
height: 28px;
|
|
border-radius: 15px;
|
|
border: 1px solid #ffc67d;
|
|
}
|
|
.joinCourseV2 {
|
|
border: 1px solid #c2c2c2;
|
|
}
|
|
}
|
|
}
|
|
.bottomLine {
|
|
padding-top: 20px;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.van-tab__pane {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
background: #ffffff;
|
|
}
|
|
</style>
|