<template>
|
<z-paging ref="paging" class="z_pag" v-model="reCourses" @query="getCourses"
|
:hide-loading-more-when-no-more-by-limit="5">
|
<view class="list-item flex-row" :key="item._id" v-for="item in reCourses" @click="openCourse(item._id)">
|
<u-image :src="item.thumb" :lazy-load="true" class="image_11" mode="aspectFill">
|
</u-image>
|
<view class="right-group flex-col">
|
<text class="text_11">{{ item.title }}</text>
|
<view class="center-group flex-row">
|
<view class="left-text-wrapper" :key="dynamicTag" v-for="dynamicTag in item.dynamicTags">
|
{{dynamicTag}}
|
</view>
|
</view>
|
<view class="justify-between">
|
<text class="text_17">{{item.user_count}}人已购</text>
|
<text class="text_19">￥{{item.charge / 100}}</text>
|
</view>
|
</view>
|
</view>
|
</z-paging>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
cid: '',
|
text: '',
|
reCourses: []
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
methods: {
|
// 页面数据初始化函数
|
init(options) {
|
this.text = options.text
|
let category_info = vk.getStorageSync('category_info')
|
if (category_info) this.cid = category_info.id
|
},
|
getCourses(pageIndex, pageSize) {
|
vk.callFunction({
|
url: 'client/course/pub/search-result',
|
title: '请求中...',
|
data: {
|
pageIndex,
|
pageSize,
|
category_id: that.cid,
|
keyword: that.text
|
},
|
success: function(data) {
|
that.$refs.paging.complete(data.rows);
|
}
|
});
|
},
|
// 推荐课程详情
|
openCourse(id) {
|
uni.vk.navigateTo('/uni_modules/uce-course/pages/detail/class-detail?_id=' + id, false);
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.list-item {
|
padding: 20rpx 20rpx 40rpx;
|
border-bottom: 1px solid #F0F0F0;
|
|
&:not(:first-of-type) {
|
margin-top: 40rpx;
|
}
|
|
.image_11 {
|
border-radius: 8rpx;
|
width: 284rpx !important;
|
height: 182rpx !important;
|
}
|
|
.right-group {
|
margin-left: 26rpx;
|
flex: 1 1 auto;
|
|
.text_11 {
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 35rpx;
|
text-align: left;
|
}
|
|
.center-group {
|
margin-top: 33rpx;
|
color: rgb(255, 150, 12);
|
font-size: 20rpx;
|
line-height: 28rpx;
|
white-space: nowrap;
|
|
.left-text-wrapper {
|
background-repeat: no-repeat;
|
padding: 4rpx 14rpx;
|
margin-right: 20rpx;
|
background: rgba(255, 150, 12, 0.12);
|
border: 1rpx solid #FF960C;
|
border-radius: 16rpx;
|
}
|
}
|
|
.text_17 {
|
margin-top: 19rpx;
|
color: rgb(153, 153, 153);
|
font-size: 20rpx;
|
line-height: 24rpx;
|
white-space: nowrap;
|
}
|
|
.text_19 {
|
color: rgb(246, 21, 21);
|
font-size: 36rpx;
|
margin-top: 4rpx;
|
white-space: nowrap;
|
}
|
}
|
}
|
</style>
|
