<scroll-view class="htmler_sv" :scroll-y="!cho_ons" :scroll-top="page_nu" @scroll="page_cho" @scrolltolower="to_lower">
<!-- 导航 -->
<view class="sn_box"></view>
<view class="sn_box sn_con">
<view class="sn_tit">{{ index_ajax.name || "在线课堂" }}</view>
</view>
<!-- 内容 -->
<view class="htmler">
<!-- 搜索 -->
<view class="search">
<image class="search_imgs" src="/static/1.index/search.png" mode=""></image>
<input type="text" name="" id="" class="search_inps" placeholder="请输入课程名称" placeholder-class="ph" v-model="inps"
@confirm="to_s" />
<view class="search_line"></view>
<view class="search_btn" @tap="to_s">确定</view>
</view>
<!-- banner -->
<swiper class="bas" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="999999">
<block v-for="(item, index) in index_ajax.banner" :key="index">
<swiper-item>
<image :src="api_url + item.url" mode=""></image>
</swiper-item>
</block>
</swiper>
<!-- 课程分类选择 -->
<next-xcascader class="ctype" :showArrow="true" inputAlign="right" placeholder="选择课程分类"
:options="baseAjax.class_type" @confirm="oct" @touchmove.stop="" />
<!-- 排序 -->
<view id="orders" class="orders">
<block v-for="(item, index) in ol" :key="index">
<view :class="`orders_item ${ol_ons == item ? 'orders_ons' : ''}`" @tap="o_do" :data-txt="item">
<text>{{ item }}</text>
<block v-if="index == 1">
<view class="orders_line"></view>
<image class="orders_imgs" :src="ol_imgs[ol_keys]" mode=""></image>
</block>
</view>
</block>
</view>
<!-- 筛选 -->
<scroll-view id="cho" class="cho" :scroll-x="true" :scroll-left="cho_nu" @scroll="sv_cho">
<view class="cho_line"></view>
<block v-for="(item, index) in cho_types" :key="index">
<view :id="'cho_item' + index" :class="'cho_item' +
' ' +
(item.vs && item.vs != item.names ? 'cho_sels' : '') +
' ' +
(item.ons ? 'cho_ons' : '')
" @tap="tog_cho" :data-ks="index">
<text class="cho_txt">{{ item.vs || item.names }}</text>
<block v-if="item.ons">
<image class="cho_imgs" src="/static/3.bul/cho_shangla.png" mode=""></image>
</block>
<block v-else>
<image class="cho_imgs" src="/static/3.bul/cho_xiala.png" mode=""></image>
</block>
</view>
</block>
<view class="cho_line"></view>
</scroll-view>
<view>
<block v-for="(item, index) in cho_types" :key="index">
<uni-popup ref="popup" type="top" @tap.stop="tog_cho" :data-ks="index" @touchmove.stop="">
<view class="cho_p" @tap.stop="">
<scroll-view class="cho_sv" :scroll-y="true">
<block v-for="(item1, index1) in baseAjax[item.keys]" :key="index1">
<view :class="'cho_one' +
' ' +
(item.vs1 == item1.label ? 'cho_one_on' : '')
" @tap.stop="c_cho" :data-ks="index" :data-label="item1.label" :data-value="item1.value">
{{ item1.label }}
</view>
</block>
</scroll-view>
<view class="cho_box">
<view class="cho_btn" @tap.stop="tog_cho" :data-ks="index" data-reset="1">重置</view>
<view class="cho_btn" @tap.stop="tog_cho" :data-ks="index" data-done="1">确定</view>
</view>
</view>
</uni-popup>
</block>
</view>
<!-- 课程 -->
<view class="cla" :style="clas">
<!-- 课程列表 -->
<block v-if="lists && lists.length">
<block v-for="(item, index) in lists" :key="index">
<view class="cla_item" @tap="to_clas" :data-id="item.id">
<image class="cla_imgs" :src="api_url + item.path" mode=""></image>
<view class="cla_rig">
<view class="cla_ts">
<text class="cla_tits">{{ item.name }}</text>
</view>
<view class="cla_bots">
<view class="cla_infos">
<image class="cla_icon" src="/static/3.bul/times.png" mode=""></image>
<text class="cla_txt">{{ item.time }}</text>
</view>
<view class="cla_infos">
<image class="cla_icon" src="/static/3.bul/nu.png" mode=""></image>
<text class="cla_txt">{{ item.num_person }}人学习</text>
</view>
</view>
</view>
</view>
</block>
</block>
<!-- else -->
<block v-else>
<view class="zanwu_str">
<image class="zanwu_imgs" src="/static/zanwu.svg" mode=""></image>
<view class="zanwu_str">暂无数据</view>
</view>
</block>
<!-- 课程列表 结束 -->
</view>
<!-- 课程 结束 -->
</view>
</scroll-view>
</template>
<script>
// var app = getApp();
var app;
var that;
var ol = ["综合排序", "发布时间"];
export default {
data() {
return {
api_url: "",
options: {},
lists: [],
p: 1,
flow: true,
loaded: true,
inps: "",
index_ajax: {},
baseAjax: {},
cts: 0,
ol: ol,
ol_ons: ol[0],
ol_imgs: [
"/static/3.bul/o_xiala.png",
"/static/3.bul/o_up.png",
"/static/3.bul/o_down.png",
],
ol_keys: 0,
cho_types: [
{
names: "难易度",
vs: "",
vs1: "",
keys: "level_list",
ons: false,
vals: "",
vals1: "",
forms: "level",
types: "nu",
},
{
names: "技术平台",
vs: "",
vs1: "",
keys: "platform_list",
ons: false,
vals: "",
vals1: "",
forms: "platform",
types: "nu",
},
{
names: "讲师",
vs: "",
vs1: "",
keys: "lecturer_list",
ons: false,
vals: "",
vals1: "",
forms: "lecturer",
types: "nu",
},
{
names: "知识点",
vs: "",
vs1: "",
keys: "knowledge_list",
ons: false,
vals: "",
vals1: "",
forms: "knowledge",
types: "arr",
},
{
names: "产品线",
vs: "",
vs1: "",
keys: "line_list",
ons: false,
vals: "",
vals1: "",
forms: "product_line",
types: "arr",
},
],
cho_ons: false,
page_nu: 0,
page_nu_old: 0,
page_nu_first: 0,
cho_nu: 0,
cho_nu_old: 0,
cho_nu_first: 0,
sysinfo: null,
windowWidth: 0,
windowHeight: 0,
};
},
onLoad(options) {
app = getApp();
that = this;
that.api_url = app.globalData.api_url;
that.options = options;
if (app.globalData.ct) {
that.cts = app.globalData.ct;
app.globalData.ct = 0;
}
app.request_api(
"/lesson/index_ajax",
{
class_type: that.cts,
},
function (params) {
// console.log(params);
that.index_ajax = params;
}
);
app.request_api("/lesson/baseAjax", {}, function (params) {
// console.log(params);
that.baseAjax = params;
});
that.sysinfo = uni.getSystemInfoSync();
that.windowWidth = that.sysinfo.windowWidth;
that.windowHeight = that.sysinfo.windowHeight;
console.log(that.windowHeight);
},
onShow() {
if (!app.globalData.uuid) {
uni.redirectTo({ url: "/pages/my/login" });
}
that.to_load();
},
// #ifdef MP-WEIXIN
onShareAppMessage() { },
onShareTimeline() { },
// #endif
methods: {
// 空方法
void: function () { },
// 加载
to_load: function (ud = true) {
if (ud) {
// that.lists = [];
that.p = 1;
that.flow = true;
that.loaded = true;
}
var p = that.p;
var datas = {
p: p,
page: p,
keywords: that.inps,
type_id: [that.cts],
order: that.ol_ons,
type: that.ol_keys,
};
that.cho_types.forEach(function (vo, key) {
if (vo.vals) {
if (vo.types == "arr") {
datas[vo.forms] = [vo.vals];
} else {
datas[vo.forms] = vo.vals;
}
}
});
app.request_api("/lesson/listAjax", datas, function (params) {
// console.log(params);
var list = that.lists;
var lists = params.class_list;
if (p == 1) {
list = [];
}
if (!lists || typeof lists != "object") {
lists = [];
}
list = list.concat(lists);
var flow = true;
if (list.length == params.total) {
flow = false;
}
that.lists = list;
that.flow = flow;
that.loaded = true;
});
},
// 流加载
to_lower() {
var flow = that.flow;
var loaded = that.loaded;
if (!flow || !loaded) {
return false;
}
var p = that.p;
p++;
that.p = p;
that.to_load(false);
},
// 搜索
to_s: function () {
if (app.globalData.uuid) {
that.to_load();
} else {
uni.redirectTo({ url: "/pages/my/login" });
}
},
// 课程分类选择
oct: function (res) {
// console.log("---------confirm----------", res);
// console.log("---------confirm----------", res.value);
// console.log("---------confirm----------", res.value[0]);
var vals = res.value;
var vo = vals[vals.length - 1];
// console.log(vo);
that.cts = vo.value;
that.to_load();
},
// 排序切换
o_do: function (e) {
// console.log(e);
// console.log(e.currentTarget.dataset.txt);
that.ol_ons = e.currentTarget.dataset.txt;
if (that.ol_ons == ol[1]) {
if (that.ol_keys != 1) {
that.ol_keys = 1;
} else {
that.ol_keys = 2;
}
} else {
that.ol_keys = 0;
}
that.to_load();
},
// 筛选切换
tog_cho: function (e) {
// console.log(e);
// console.log(e.currentTarget.dataset.ks);
var index = e.currentTarget.dataset.ks;
that.cho_types.forEach(function (vo, key) {
if (key != index) {
vo.ons = false;
that.$refs.popup[key].close();
}
});
that.cho_types[index].ons = !that.cho_types[index].ons;
if (that.cho_types[index].ons) {
that.$refs.popup[index].open();
that.cho_types[index].vs1 = that.cho_types[index].vs;
that.cho_types[index].vals1 = that.cho_types[index].vals;
} else {
that.$refs.popup[index].close();
if (e.currentTarget.dataset.reset) {
that.cho_types[index].vs = "";
that.cho_types[index].vs1 = "";
that.cho_types[index].vals = "";
that.cho_types[index].vals1 = "";
that.to_load();
} else if (e.currentTarget.dataset.done) {
that.cho_types[index].vs = that.cho_types[index].vs1;
that.cho_types[index].vals = that.cho_types[index].vals1;
that.to_load();
} else {
}
}
that.cho_ons = false;
var query = uni.createSelectorQuery().in(that);
query
.select("#cho")
.boundingClientRect()
.selectViewport()
.scrollOffset()
.exec(function (params) {
// console.log(params);
// console.log("top", params[0].top);
// console.log("scrollTop", params[1].scrollTop);
// console.log("page_nu_old", that.page_nu_old);
var page_nu_c = params[0].top + params[1].scrollTop;
page_nu_c -= (180 * that.windowWidth) / 750; //导航栏的高度
page_nu_c -= (20 * that.windowWidth) / 750; //margin的高度
page_nu_c += that.page_nu_old;
if (that.page_nu_first == 0) {
console.log(1);
that.page_nu_first = page_nu_c;
}
var page_s = that.page_nu_first > 0 ? that.page_nu_first : page_nu_c;
// that.page_nu = that.page_nu_old;
// that.page_nu = -1;
that.page_nu = 0;
that.$nextTick(function () {
console.log(page_nu_c);
console.log(that.page_nu_first);
// that.page_nu = page_nu_c;
that.page_nu = page_s;
if (that.cho_types[index].ons) {
that.cho_ons = true;
} else {
that.cho_ons = false;
}
});
});
query
.select("#cho_item" + index)
.boundingClientRect()
.exec(function (params) {
// console.log(params);
var cho_nu_c = params[2].left + that.cho_nu_old; //元素到屏幕左边的距离
cho_nu_c -= (that.windowWidth - params[2].width) / 2; //减去这个数据让元素滚动到中间
that.cho_nu = that.cho_nu_old;
that.$nextTick(function () {
// console.log(cho_nu_c);
that.cho_nu = cho_nu_c;
});
});
},
// 滚动距离记录
page_cho: function (e) {
// console.log(e);
// console.log(e.detail.scrollTop);
that.page_nu_old = e.detail.scrollTop;
},
// 滚动距离记录
sv_cho: function (e) {
// console.log(e);
// console.log(e.detail.scrollLeft);
that.cho_nu_old = e.detail.scrollLeft;
},
// 类型选择
c_cho: function (e) {
// console.log(e);
// console.log(e.target.dataset.ks);
// console.log(e.target.dataset.l);
var index = e.currentTarget.dataset.ks;
var label = e.currentTarget.dataset.label;
var value = e.currentTarget.dataset.value;
that.cho_types[index].vs1 = label;
that.cho_types[index].vals1 = value;
},
// 课程详情
to_clas: function (e) {
// console.log(e);
// console.log(e.currentTarget.dataset.id);
if (app.globalData.uuid) {
uni.navigateTo({
url: `/pages/lesson/show?class_id=${e.currentTarget.dataset.id}`,
});
} else {
uni.redirectTo({ url: "/pages/my/login" });
}
},
},
// 设置样式
computed: {
clas() {
return {
"min-height": this.windowHeight - (270 * this.windowWidth) / 750 + "px",
};
},
},
};
</script>
<style>
template,
page {
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
}
.htmler_sv {
overflow: hidden;
flex-grow: 1;
-webkit-overflow-scrolling: auto;
width: 100%;
height: 100%;
/* position: fixed; */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 内容 */
.htmler {
margin: 0 30rpx;
}
/* 搜索 */
.search {
overflow: hidden;
display: flex;
align-items: center;
margin-top: 20rpx;
box-sizing: border-box;
position: relative;
width: 690rpx;
height: 80rpx;
line-height: 80rpx;
background-color: #ededed;
border-radius: 40rpx;
}
.search_imgs {
width: 26rpx;
height: 26rpx;
position: absolute;
top: 50%;
left: 60rpx;
margin-top: -13rpx;
}
.search_inps {
overflow: hidden;
flex-grow: 1;
height: inherit;
line-height: inherit;
padding-left: 98rpx;
padding-right: 30rpx;
font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333333;
}
.search_line {
width: 2rpx;
height: 30rpx;
background-color: #4276fd;
}
.search_btn {
overflow: hidden;
flex-shrink: 0;
width: 141rpx;
height: inherit;
line-height: inherit;
text-align: center;
font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3rpx;
color: #4276fd;
}
/* banner */
.bas {
width: 690rpx;
height: 300rpx;
margin-top: 19rpx;
border-radius: 20rpx;
overflow: hidden;
}
.bas image {
width: 100%;
height: 100%;
}
/* 排序 */
.orders {
overflow: hidden;
display: flex;
height: 69rpx;
line-height: 69rpx;
margin-top: 11rpx;
}
.orders_item {
overflow: hidden;
flex: 1;
text-align: center;
border-bottom: 2rpx solid #f2f2f2;
font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333333;
}
.orders_ons {
border-color: #4276fd;
color: #4276fd;
}
.orders_line {
display: inline-block;
width: 13rpx;
}
.orders_imgs {
width: 16rpx;
height: 21rpx;
}
/* 筛选 */
.cho {
margin: 20rpx -30rpx;
margin-bottom: 0;
position: relative;
z-index: 100;
overflow: hidden;
display: flex;
align-items: flex-start;
white-space: nowrap;
overflow-y: scroll;
}
.cho_item {
overflow: hidden;
display: inline-flex;
align-items: center;
flex-shrink: 0;
position: relative;
z-index: 100;
height: 50rpx;
line-height: 50rpx;
margin-left: 22rpx;
margin-bottom: 20rpx;
padding: 0 16rpx;
background-color: #f6f6f6;
border: 1rpx solid #f6f6f6;
border-radius: 25rpx;
font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #686868;
}
.cho_item::after {
display: block;
content: "";
}
.cho_item:first-child {
margin-left: 0;
}
.cho_line {
width: 30rpx;
}
.cho_sels {
color: #218fff;
border-color: #218fff;
background: #cce6ff;
}
.cho_ons {
margin-bottom: 0;
padding-bottom: 20rpx;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: #f6f6f6;
border-color: #f6f6f6;
}
.cho_txt {
padding-right: 8rpx;
}
.cho_imgs {
width: 18rpx;
height: 10rpx;
}
.cho_p {
margin-top: 270rpx;
background-color: #f6f6f6;
position: relative;
z-index: 999999;
}
.cho_sv {
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
height: 600rpx;
position: relative;
z-index: 999999;
}
.cho_one {
display: inline-block;
width: 50%;
padding: 18rpx;
box-sizing: border-box;
position: relative;
z-index: 999999;
font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333;
}
.cho_one_on {
color: #218fff;
}
.cho_box {
overflow: hidden;
display: flex;
height: 100rpx;
line-height: 100rpx;
border-top: 1rpx solid #dedede;
text-align: center;
}
.cho_btn {
overflow: hidden;
flex: 1;
}
.cho_btn:nth-child(1) {
font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #218fff;
}
.cho_btn:nth-child(2) {
background-color: #218fff;
font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ffffff;
}
/* 课程 */
.cla {
min-height: 3000rpx;
}
/* 课程列表 */
.cla_item {
overflow: hidden;
display: flex;
padding: 20rpx 0;
border-top: 2rpx solid #f9f9fb;
}
.cho_item:first-child {
border-top: none;
}
.cla_imgs {
overflow: hidden;
flex-shrink: 0;
position: relative;
width: 200rpx;
height: 150rpx;
background-color: #ffffff;
border-radius: 10rpx;
border: solid 1rpx #e5e5e5;
}
.cla_subs {
width: 80rpx;
height: 36rpx;
position: absolute;
top: 0;
left: 0;
}
.cla_m {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ffffff;
}
.cla_rig {
overflow: hidden;
flex-grow: 1;
margin-left: 30rpx;
}
.cla_ts {
height: 90rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-wrap: break-word;
/*英文强制换行*/
word-break: break-all;
/*英文强制换行*/
}
.cla_label {
margin-right: 8rpx;
padding: 7rpx 18rpx;
border-radius: 6rpx;
border: solid 1rpx #ea5628;
font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ea6633;
}
.cla_tits {
line-height: 1.5;
font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333333;
}
.cla_bots {
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
.cla_infos {
overflow: hidden;
display: flex;
align-items: center;
font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #666666;
}
.cla_icon {
width: 30rpx;
height: 30rpx;
}
.cla_txt {
padding-left: 12rpx;
}
.cla_btn {
text-align: center;
width: 180rpx;
height: 60rpx;
line-height: 60rpx;
background-color: #4276fd;
border-radius: 20rpx;
font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ffffff;
}
</style>
<template>
<scroll-view class="htmler_sv" :scroll-y="!cho_ons" :scroll-top="page_nu" @scroll="page_cho" @scrolltolower="to_lower">
<!-- 导航 -->
<view class="sn_box"></view>
<view class="sn_box sn_con">
<navigator class="sn_backs" hover-class="none" open-type="navigateBack">
<image class="sn_imgs" src="/static/3.bul/fanhui.png" mode=""></image>
</navigator>
<view class="sn_tit">{{ index_ajax.name || "更多课程" }}</view>
</view>
<!-- 内容 -->
<view class="htmler">
<!-- 搜索 -->
<view class="search">
<image class="search_imgs" src="/static/1.index/search.png" mode=""></image>
<input type="text" name="" id="" class="search_inps" placeholder="请输入课程名称" placeholder-class="ph" v-model="inps"
@confirm="to_s" />
<view class="search_line"></view>
<view class="search_btn" @tap="to_s">确定</view>
</view>
<!-- banner -->
<swiper class="bas" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="999999">
<block v-for="(item, index) in index_ajax.banner" :key="index">
<swiper-item>
<image :src="api_url + item.url" mode=""></image>
</swiper-item>
</block>
</swiper>
<!-- 排序 -->
<view id="orders" class="orders">
<block v-for="(item, index) in ol" :key="index">
<view :class="`orders_item ${ol_ons == item ? 'orders_ons' : ''}`" @tap="o_do" :data-txt="item">
<text>{{ item }}</text>
<block v-if="index == 1">
<view class="orders_line"></view>
<image class="orders_imgs" :src="ol_imgs[ol_keys]" mode=""></image>
</block>
</view>
</block>
</view>
<!-- 筛选 -->
<scroll-view id="cho" class="cho" :scroll-x="true" :scroll-left="cho_nu" @scroll="sv_cho">
<view class="cho_line"></view>
<block v-for="(item, index) in cho_types" :key="index">
<view :id="'cho_item' + index" :class="'cho_item' +
' ' +
(item.vs && item.vs != item.names ? 'cho_sels' : '') +
' ' +
(item.ons ? 'cho_ons' : '')
" @tap="tog_cho" :data-ks="index">
<text class="cho_txt">{{ item.vs || item.names }}</text>
<block v-if="item.ons">
<image class="cho_imgs" src="/static/3.bul/cho_shangla.png" mode=""></image>
</block>
<block v-else>
<image class="cho_imgs" src="/static/3.bul/cho_xiala.png" mode=""></image>
</block>
</view>
</block>
<view class="cho_line"></view>
</scroll-view>
<view>
<block v-for="(item, index) in cho_types" :key="index">
<uni-popup ref="popup" type="top" @tap.stop="tog_cho" :data-ks="index" @touchmove.stop="">
<view class="cho_p" @tap.stop="">
<scroll-view class="cho_sv" :scroll-y="true">
<block v-for="(item1, index1) in baseAjax[item.keys]" :key="index1">
<view :class="'cho_one' +
' ' +
(item.vs1 == item1.label ? 'cho_one_on' : '')
" @tap.stop="c_cho" :data-ks="index" :data-label="item1.label" :data-value="item1.value">
{{ item1.label }}
</view>
</block>
</scroll-view>
<view class="cho_box">
<view class="cho_btn" @tap.stop="tog_cho" :data-ks="index" data-reset="1">重置</view>
<view class="cho_btn" @tap.stop="tog_cho" :data-ks="index" data-done="1">确定</view>
</view>
</view>
</uni-popup>
</block>
</view>
<!-- 课程 -->
<view class="cla" :style="clas">
<!-- 课程列表 -->
<block v-if="lists && lists.length">
<block v-for="(item, index) in lists" :key="index">
<view class="cla_item" @tap="to_clas" :data-id="item.id">
<image class="cla_imgs" :src="api_url + item.path" mode=""></image>
<view class="cla_rig">
<view class="cla_ts">
<text class="cla_tits">{{ item.name }}</text>
</view>
<view class="cla_bots">
<view class="cla_infos">
<image class="cla_icon" src="/static/3.bul/times.png" mode=""></image>
<text class="cla_txt">{{ item.time }}</text>
</view>
<view class="cla_infos">
<image class="cla_icon" src="/static/3.bul/nu.png" mode=""></image>
<text class="cla_txt">{{ item.num_person }}人学习</text>
</view>
</view>
</view>
</view>
</block>
</block>
<!-- else -->
<block v-else>
<view class="zanwu_str">
<image class="zanwu_imgs" src="/static/zanwu.svg" mode=""></image>
<view class="zanwu_str">暂无数据</view>
</view>
</block>
<!-- 课程列表 结束 -->
</view>
<!-- 课程 结束 -->
</view>
</scroll-view>
</template>
<script>
// var app = getApp();
var app;
var that;
var ol = ["综合排序", "发布时间"];
export default {
data() {
return {
api_url: "",
options: {},
lists: [],
p: 1,
flow: true,
loaded: true,
inps: "",
index_ajax: {},
baseAjax: {},
cts: 0,
ol: ol,
ol_ons: ol[0],
ol_imgs: [
"/static/3.bul/o_xiala.png",
"/static/3.bul/o_up.png",
"/static/3.bul/o_down.png",
],
ol_keys: 0,
cho_types: [
{
names: "难易度",
vs: "",
vs1: "",
keys: "level_list",
ons: false,
vals: "",
vals1: "",
forms: "level",
types: "nu",
},
{
names: "技术平台",
vs: "",
vs1: "",
keys: "platform_list",
ons: false,
vals: "",
vals1: "",
forms: "platform",
types: "nu",
},
{
names: "讲师",
vs: "",
vs1: "",
keys: "lecturer_list",
ons: false,
vals: "",
vals1: "",
forms: "lecturer",
types: "nu",
},
{
names: "知识点",
vs: "",
vs1: "",
keys: "knowledge_list",
ons: false,
vals: "",
vals1: "",
forms: "knowledge",
types: "arr",
},
{
names: "产品线",
vs: "",
vs1: "",
keys: "line_list",
ons: false,
vals: "",
vals1: "",
forms: "product_line",
types: "arr",
},
],
cho_ons: false,
page_nu: 0,
page_nu_old: 0,
page_nu_first: 0,
cho_nu: 0,
cho_nu_old: 0,
cho_nu_first: 0,
sysinfo: null,
windowWidth: 0,
windowHeight: 0,
};
},
onLoad(options) {
app = getApp();
that = this;
that.api_url = app.globalData.api_url;
that.options = options;
if (app.globalData.ct) {
that.cts = app.globalData.ct;
app.globalData.ct = 0;
}
app.request_api(
"/lesson/index_ajax",
{
class_type: that.cts,
},
function (params) {
// console.log(params);
that.index_ajax = params;
}
);
app.request_api("/lesson/baseAjax", {}, function (params) {
// console.log(params);
that.baseAjax = params;
});
that.sysinfo = uni.getSystemInfoSync();
that.windowWidth = that.sysinfo.windowWidth;
that.windowHeight = that.sysinfo.windowHeight;
console.log(that.windowHeight);
},
onShow() {
if (!app.globalData.uuid) {
uni.redirectTo({ url: "/pages/my/login" });
}
that.to_load();
},
// #ifdef MP-WEIXIN
onShareAppMessage() { },
onShareTimeline() { },
// #endif
methods: {
// 空方法
void: function () { },
// 加载
to_load: function (ud = true) {
if (ud) {
// that.lists = [];
that.p = 1;
that.flow = true;
that.loaded = true;
}
var p = that.p;
var datas = {
p: p,
page: p,
keywords: that.inps,
type_id: [that.cts],
order: that.ol_ons,
type: that.ol_keys,
};
that.cho_types.forEach(function (vo, key) {
if (vo.vals) {
if (vo.types == "arr") {
datas[vo.forms] = [vo.vals];
} else {
datas[vo.forms] = vo.vals;
}
}
});
app.request_api("/lesson/listAjax", datas, function (params) {
// console.log(params);
var list = that.lists;
var lists = params.class_list;
if (p == 1) {
list = [];
}
if (!lists || typeof lists != "object") {
lists = [];
}
list = list.concat(lists);
var flow = true;
if (list.length == params.total) {
flow = false;
}
that.lists = list;
that.flow = flow;
that.loaded = true;
});
},
// 流加载
to_lower() {
var flow = that.flow;
var loaded = that.loaded;
if (!flow || !loaded) {
return false;
}
var p = that.p;
p++;
that.p = p;
that.to_load(false);
},
// 搜索
to_s: function () {
if (app.globalData.uuid) {
that.to_load();
} else {
uni.redirectTo({ url: "/pages/my/login" });
}
},
// 课程分类选择
oct: function (res) {
// console.log("---------confirm----------", res);
// console.log("---------confirm----------", res.value);
// console.log("---------confirm----------", res.value[0]);
var vals = res.value;
var vo = vals[vals.length - 1];
// console.log(vo);
that.cts = vo.value;
that.to_load();
},
// 排序切换
o_do: function (e) {
// console.log(e);
// console.log(e.currentTarget.dataset.txt);
that.ol_ons = e.currentTarget.dataset.txt;
if (that.ol_ons == ol[1]) {
if (that.ol_keys != 1) {
that.ol_keys = 1;
} else {
that.ol_keys = 2;
}
} else {
that.ol_keys = 0;
}
that.to_load();
},
// 筛选切换
tog_cho: function (e) {
// console.log(e);
// console.log(e.currentTarget.dataset.ks);
var index = e.currentTarget.dataset.ks;
that.cho_types.forEach(function (vo, key) {
if (key != index) {
vo.ons = false;
that.$refs.popup[key].close();
}
});
that.cho_types[index].ons = !that.cho_types[index].ons;
if (that.cho_types[index].ons) {
that.$refs.popup[index].open();
that.cho_types[index].vs1 = that.cho_types[index].vs;
that.cho_types[index].vals1 = that.cho_types[index].vals;
} else {
that.$refs.popup[index].close();
if (e.currentTarget.dataset.reset) {
that.cho_types[index].vs = "";
that.cho_types[index].vs1 = "";
that.cho_types[index].vals = "";
that.cho_types[index].vals1 = "";
that.to_load();
} else if (e.currentTarget.dataset.done) {
that.cho_types[index].vs = that.cho_types[index].vs1;
that.cho_types[index].vals = that.cho_types[index].vals1;
that.to_load();
} else {
}
}
that.cho_ons = false;
var query = uni.createSelectorQuery().in(that);
query
.select("#cho")
.boundingClientRect()
.selectViewport()
.scrollOffset()
.exec(function (params) {
// console.log(params);
// console.log("top", params[0].top);
// console.log("scrollTop", params[1].scrollTop);
// console.log("page_nu_old", that.page_nu_old);
var page_nu_c = params[0].top + params[1].scrollTop;
page_nu_c -= (180 * that.windowWidth) / 750; //导航栏的高度
page_nu_c -= (20 * that.windowWidth) / 750; //margin的高度
page_nu_c += that.page_nu_old;
if (that.page_nu_first == 0) {
console.log(1);
that.page_nu_first = page_nu_c;
}
var page_s = that.page_nu_first > 0 ? that.page_nu_first : page_nu_c;
// that.page_nu = that.page_nu_old;
// that.page_nu = -1;
that.page_nu = 0;
that.$nextTick(function () {
console.log(page_nu_c);
console.log(that.page_nu_first);
// that.page_nu = page_nu_c;
that.page_nu = page_s;
if (that.cho_types[index].ons) {
that.cho_ons = true;
} else {
that.cho_ons = false;
}
});
});
query
.select("#cho_item" + index)
.boundingClientRect()
.exec(function (params) {
// console.log(params);
var cho_nu_c = params[2].left + that.cho_nu_old; //元素到屏幕左边的距离
cho_nu_c -= (that.windowWidth - params[2].width) / 2; //减去这个数据让元素滚动到中间
that.cho_nu = that.cho_nu_old;
that.$nextTick(function () {
// console.log(cho_nu_c);
that.cho_nu = cho_nu_c;
});
});
},
// 滚动距离记录
page_cho: function (e) {
// console.log(e);
// console.log(e.detail.scrollTop);
that.page_nu_old = e.detail.scrollTop;
},
// 滚动距离记录
sv_cho: function (e) {
// console.log(e);
// console.log(e.detail.scrollLeft);
that.cho_nu_old = e.detail.scrollLeft;
},
// 类型选择
c_cho: function (e) {
// console.log(e);
// console.log(e.target.dataset.ks);
// console.log(e.target.dataset.l);
var index = e.currentTarget.dataset.ks;
var label = e.currentTarget.dataset.label;
var value = e.currentTarget.dataset.value;
that.cho_types[index].vs1 = label;
that.cho_types[index].vals1 = value;
},
// 课程详情
to_clas: function (e) {
// console.log(e);
// console.log(e.currentTarget.dataset.id);
if (app.globalData.uuid) {
uni.navigateTo({
url: `/pages/lesson/show?class_id=${e.currentTarget.dataset.id}`,
});
} else {
uni.redirectTo({ url: "/pages/my/login" });
}
},
},
// 设置样式
computed: {
clas() {
return {
"min-height": this.windowHeight - (270 * this.windowWidth) / 750 + "px",
};
},
},
};
</script>
<style>
template,
page {
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
}
.htmler_sv {
overflow: hidden;
flex-grow: 1;
-webkit-overflow-scrolling: auto;
width: 100%;
height: 100%;
/* position: fixed; */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 内容 */
.htmler {
margin: 0 30rpx;
}
/* 搜索 */
.search {
overflow: hidden;
display: flex;
align-items: center;
margin-top: 20rpx;
box-sizing: border-box;
position: relative;
width: 690rpx;
height: 80rpx;
line-height: 80rpx;
background-color: #ededed;
border-radius: 40rpx;
}
.search_imgs {
width: 26rpx;
height: 26rpx;
position: absolute;
top: 50%;
left: 60rpx;
margin-top: -13rpx;
}
.search_inps {
overflow: hidden;
flex-grow: 1;
height: inherit;
line-height: inherit;
padding-left: 98rpx;
padding-right: 30rpx;
font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333333;
}
.search_line {
width: 2rpx;
height: 30rpx;
background-color: #4276fd;
}
.search_btn {
overflow: hidden;
flex-shrink: 0;
width: 141rpx;
height: inherit;
line-height: inherit;
text-align: center;
font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3rpx;
color: #4276fd;
}
/* banner */
.bas {
width: 690rpx;
height: 300rpx;
margin-top: 19rpx;
border-radius: 20rpx;
overflow: hidden;
}
.bas image {
width: 100%;
height: 100%;
}
/* 排序 */
.orders {
overflow: hidden;
display: flex;
height: 69rpx;
line-height: 69rpx;
margin-top: 11rpx;
}
.orders_item {
overflow: hidden;
flex: 1;
text-align: center;
border-bottom: 2rpx solid #f2f2f2;
font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333333;
}
.orders_ons {
border-color: #4276fd;
color: #4276fd;
}
.orders_line {
display: inline-block;
width: 13rpx;
}
.orders_imgs {
width: 16rpx;
height: 21rpx;
}
/* 筛选 */
.cho {
margin: 20rpx -30rpx;
margin-bottom: 0;
position: relative;
z-index: 100;
overflow: hidden;
display: flex;
align-items: flex-start;
white-space: nowrap;
overflow-y: scroll;
}
.cho_item {
overflow: hidden;
display: inline-flex;
align-items: center;
flex-shrink: 0;
position: relative;
z-index: 100;
height: 50rpx;
line-height: 50rpx;
margin-left: 22rpx;
margin-bottom: 20rpx;
padding: 0 16rpx;
background-color: #f6f6f6;
border: 1rpx solid #f6f6f6;
border-radius: 25rpx;
font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #686868;
}
.cho_item::after {
display: block;
content: "";
}
.cho_item:first-child {
margin-left: 0;
}
.cho_line {
width: 30rpx;
}
.cho_sels {
color: #218fff;
border-color: #218fff;
background: #cce6ff;
}
.cho_ons {
margin-bottom: 0;
padding-bottom: 20rpx;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: #f6f6f6;
border-color: #f6f6f6;
}
.cho_txt {
padding-right: 8rpx;
}
.cho_imgs {
width: 18rpx;
height: 10rpx;
}
.cho_p {
margin-top: 270rpx;
background-color: #f6f6f6;
position: relative;
z-index: 999999;
}
.cho_sv {
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
height: 600rpx;
position: relative;
z-index: 999999;
}
.cho_one {
display: inline-block;
width: 50%;
padding: 18rpx;
box-sizing: border-box;
position: relative;
z-index: 999999;
font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333;
}
.cho_one_on {
color: #218fff;
}
.cho_box {
overflow: hidden;
display: flex;
height: 100rpx;
line-height: 100rpx;
border-top: 1rpx solid #dedede;
text-align: center;
}
.cho_btn {
overflow: hidden;
flex: 1;
}
.cho_btn:nth-child(1) {
font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #218fff;
}
.cho_btn:nth-child(2) {
background-color: #218fff;
font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ffffff;
}
/* 课程 */
.cla {
min-height: 3000rpx;
}
/* 课程列表 */
.cla_item {
overflow: hidden;
display: flex;
padding: 20rpx 0;
border-top: 2rpx solid #f9f9fb;
}
.cho_item:first-child {
border-top: none;
}
.cla_imgs {
overflow: hidden;
flex-shrink: 0;
position: relative;
width: 200rpx;
height: 150rpx;
background-color: #ffffff;
border-radius: 10rpx;
border: solid 1rpx #e5e5e5;
}
.cla_subs {
width: 80rpx;
height: 36rpx;
position: absolute;
top: 0;
left: 0;
}
.cla_m {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ffffff;
}
.cla_rig {
overflow: hidden;
flex-grow: 1;
margin-left: 30rpx;
}
.cla_ts {
height: 90rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-wrap: break-word;
/*英文强制换行*/
word-break: break-all;
/*英文强制换行*/
}
.cla_label {
margin-right: 8rpx;
padding: 7rpx 18rpx;
border-radius: 6rpx;
border: solid 1rpx #ea5628;
font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ea6633;
}
.cla_tits {
line-height: 1.5;
font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333333;
}
.cla_bots {
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
.cla_infos {
overflow: hidden;
display: flex;
align-items: center;
font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #666666;
}
.cla_icon {
width: 30rpx;
height: 30rpx;
}
.cla_txt {
padding-left: 12rpx;
}
.cla_btn {
text-align: center;
width: 180rpx;
height: 60rpx;
line-height: 60rpx;
background-color: #4276fd;
border-radius: 20rpx;
font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ffffff;
}
</style>
