|
|
源码几乎没有变动，请教哪里出了问题
<template name='c-course-list'>
<view class="page">
<a-header :left-icon="leftIcon">大管家_家庭服务</a-header>
{api.systemType==='android'?
<view class="a-tabs">
<view class="a-tabs__nav"
style="flex-flow: row nowrap;flex-shrink: 0;">
<view class="a-tabs__nav--item" onClick={this.handleNavClick.bind(this,index)}
style="flex:1;height: 44px;justify-content: center;align-items: center;"
v-for="(it,index) in course_category">
<text :class="'a-tabs__nav-text'
+ (index===this.data.tabsParam.current?' a-tabs__nav-text---active':'')">
{it.name}
</text>
<view :class="index===this.data.tabsParam.current?'a-tabs__nav--line-active':'a-tabs__nav--line'"></view>
</view>
</view>
<list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}>
<cell @click="itemClick">
<view class="course-tabs__item--list__item">
<img _slot="content" class="course-tabs__item--list__item--cover" :src="item.cover"/>
<view _slot="footer" class="course-item__footer a-card__footer">
<view class="course-item__info">
<text class="course-item__info--title">{{ item.title }}</text>
<text class="course-item__info--price">{{ item.class_hour + '课时 / ' }}</text>
<text class="course-item__info--price">{{ item.class_hour + '元' }}</text>
</view>
<text class="course-tabs__item--list__item--introduction">{{ item.introduction }}</text>
</view>
</view>
</cell>
</list-view>
{ this.data.dataList[tabsParam.current]==='-'&&
<b-notice title="正在加载中" icon="../../images/icon__notice--loading.gif"/>
}
{ this.data.dataList[tabsParam.current].length===0&&
<b-notice title="暂无数据哦" icon="../../images/icon__notice--empty.png"/>
}
</view>
:
<a-tabs class="course-tabs" :param="tabsParam" onChange="tabChange">
<a-tab class="course-tabs__item" :title="it.name" v-for="it in course_category">
{this.data.dataList[tabsParam.current]==='-'?
<b-notice title="正在加载中" icon="../../images/icon__notice--loading.gif"/>
:
(
this.data.dataList[tabsParam.current].length?
<view class="course-tabs__item--list">
<a-card v-for="item in dataList[tabsParam.current]" class="course-tabs__item--list__item"
@click="goto(item)">
<img _slot="content" class="course-tabs__item--list__item--cover" :src="item.cover"/>
<view _slot="footer" class="course-item__footer">
<view class="course-item__info">
<text class="course-item__info--title">{{ item.title }}</text>
<text class="course-item__info--price">{{ '参考：'+item.class_hour }}工时/{{ item.class_hour }}元</text>
</view>
<text class="course-tabs__item--list__item--introduction">{{ item.introduction }}</text>
</view>
</a-card>
</view>
:
<b-notice title="暂无数据哦" icon="../../images/icon__notice--empty.png"/>
)}
</a-tab>
</a-tabs>
}
</view>
</template>
<script>
import AHeader from "./a-header.stml";
import ATab from "./a-tab.stml";
import ATabs from "./a-tabs.stml";
import ACard from "./a-card.stml";
import {GET} from "../script/req";
import BNotice from "./b-notice.stml";
export default {
name: "c-course-list",
components: {BNotice, ACard, AHeader, ATabs, ATab},
installed() {
this.getCourseData();
},
data() {
console.log(['data', api.pageParam.id])
const course_category = JSON.parse(api.getPrefs({
sync: true,
key: 'course_category'
}));
let current = 0;
let leftIcon = false; // 头部返回按钮
if (api.pageParam.id) {
leftIcon = true;
for (let i = 0; i < course_category.length; i++) {
if (course_category[i].id === api.pageParam.id) {
current = i;
break;
}
}
}
return {
leftIcon,
tabsParam: {
current: current,
type: 'line',
color: 'red'
},
course_category,
dataList: new Array(course_category.length).fill('-')
};
},
methods: {
getCourseData() {
if (this.data.dataList[this.data.tabsParam.current] === '-') {
// api.toast({
// msg: '开始加载' + this.data.tabsParam.current,
// location: 'top'
// })
const currentItem = this.data.course_category[this.data.tabsParam.current];
GET('i_alls/getCoursesList?categoryId=' + currentItem.id).then(data => {
this.data.dataList[this.data.tabsParam.current] = data;
// api.toast({
// msg: '加载完成' + this.data.tabsParam.current,
// location: 'middle'
// })
if (api.systemType === 'android') {
var listView = document.getElementById('listView');
listView.load({data});
}
})
} else {
// api.toast({
// msg: '已加载过' + this.data.tabsParam.current
// })
if (api.systemType === 'android') {
const listView = document.getElementById('listView');
const data = this.data.dataList[this.data.tabsParam.current];
listView.load({data});
}
}
},
tabChange(e) {
console.log(e);
this.getCourseData();
},
goto(pageParam) {
api.openWin({
name: 'course-detail',
url: '../course-detail/course-detail.stml',
pageParam
})
}, itemClick({target: {index}}) {
this.goto(this.data.dataList[this.tabsParam.current][index]);
},
handleNavClick(index) {
this.data.tabsParam.current = index;
this.getCourseData();
}
}
};
</script>
<style>
.page {
height: 100%;
background-color: #f0f0f0;
}
.a-tabs__nav {
flex-shrink: 0; /*防止被压缩*/
background: #FFF;
border: 1px solid #f3f3f3;
}
.course-tabs__item--list__item {
margin: 15px;
background: #FFF;
box-shadow: 0 2px 6px #f3f3f3;
border: 1px solid #f3f3f3;
border-radius: 4px;
}
.course-tabs__item--list__item--cover {
width: 100%;
height: 194px;
}
.course-tabs__item--list__item--introduction {
margin-top: 15px;
white-space: pre-wrap;
font-size: 14px;
color: #666666;
}
.course-item__info {
flex-flow: row nowrap;
}
.course-item__info--title {
flex: 1;
color: #333;
font-size: 16px;
font-weight: bold;
color: #FA6400;
}
.course-item__info--price {
font-size: 16px;
color: #FA6400;
font-weight: bold;
}
.a-card__footer {
padding: 15px 10px;
}
.a-tabs__nav-text {
color: #666;
font-size: 14px;
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
}
.a-tabs__nav-text---active {
color: #FA6400;
font-weight: bold;
}
</style> |
|
显示全部楼层
QQ空间
新浪微博
微信扫一扫
