123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443 |
- <template>
- <view class="main">
- <navbar :config="config" backColor="#666"></navbar>
- <swiper class="swiper" circular indicator-dots autoplay>
- <swiper-item v-for="(item,index) in bannerList" :key="index">
- <image @click="imgLink(item.model_type, item.model_id, item.url, item.shop_id)" class="cover" :src="item.cover"></image>
- </swiper-item>
- </swiper>
- <view class="content">
- <view class="history" v-if="recentList.length>0">
- <view class="title-box">
- <view class="title">最近观看</view>
- <view class="right" @click="goMore">
- <text>查看更多</text>
- <text class="iconfont2"></text>
- </view>
- </view>
- <scroll-view class="list" scroll-x @scroll="scroll">
- <!-- <scroll-view></scroll-view> -->
- <view class="item" v-for="(item,index) in recentList" :key="index" @click="goDetail(item)">
- <view class="tag" v-if="item.has_vip">会员课程</view>
- <image class="cover" :src="item.study_url" mode="aspectFill"></image>
- <view class="box">
- <view class="desc">{{item.study_name}}</view>
- <view class="author"><text class="label">讲师:</text>{{item.study_teacher}}</view>
- <view class="count">
- <text class="iconfont2"></text>
- <text class="num">学习人次:{{item.studying_count}}次</text>
- <text style="color: transparent;height: 1px;">{{timeStamp}}</text>
- </view>
- </view>
- </view>
- </scroll-view>
- </view>
- <u-tabs :list="classList" name="study_type_name" :current="classIndex" @change="changeClass"
- active-color="#22A834" font-size="30" :style="`top: calc(${statusBarHeight}px + 44px)`"></u-tabs>
- <view class="class-list">
- <view class="item-box" v-for="(item,index) in list" :key="index">
- <view class="item" @click="goDetail(item)">
- <view class="tag" v-if="item.has_vip">会员专享</view>
- <image class="cover" :src="item.study_url" mode="aspectFill"></image>
- <view class="box">
- <view class="desc">{{item.study_name}}</view>
- <view class="author"><text class="label">讲师:</text>{{item.study_teacher}}</view>
- <view class="count">
- <text class="iconfont2"></text>
- <text class="num">学习人次:{{item.studying_count}}次</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view>
- <noData v-if="list<=0"></noData>
- <u-loadmore v-else :status="status" />
- </view>
- </view>
- </view>
- </template>
- <script>
- import noData from "@/components/noData/nodata.vue"
- export default {
- components:{noData},
- data() {
- return {
- //手机状态栏高度
- statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
- config: {
- back: true,
- title: '公益讲堂',
- color: '1a1a1a',
- backgroundColor: [1, "#fff"],
- statusBarFontColor: 'black'
- },
- param: {
- page: 1,
- limit: 10
- },
- bannerList: [],
- classList: [],
- classIndex: 0,
- recentList: [],
- list: [],
- totalCount:0,
- status:"nomore", //加载前值为loadmore,加载中为loading,没有数据为nomore
- timeStamp:null,//时间戳
- }
- },
- onLoad() {
- this.getRecentList();
- this.getClassList();
- this.getBanner();
- },
- onPullDownRefresh() {
- this.param.page = 1;
- this.list = [];
- this.totalCount = 0;
- this.getRecentList();
- this.getClassList();
- this.getBanner();
- uni.stopPullDownRefresh();
- },
- onReachBottom(){
- if(this.status=='loadmore'){
- this.param.page++
- this.getList()
- }
- },
- methods: {
- getBanner(){
- this.$http.get('/ad/ad/getByCode/forum-banner',{})
- .then(res=>{
- if (res.code == 200) {
- this.bannerList = res.list;
- }
- })
- },
- changeClass(index) {
- this.classIndex = index;
- this.param.study_type = this.classList[index].id
- this.getList('reset')
- },
- goDetail(item) {
- uni.navigateTo({
- url: '/pages/learningClassroom/detail?id='+item.id
- })
- },
- // 最近观看列表
- getRecentList() {
- this.$http.get('/studying/studyingLately/6').then(res => {
- if (res && res.code == 200) {
- this.recentList = res.list
- }
- })
- },
- // 分类列表
- getClassList() {
- // /studyingtype/getAllStudy
- // /studyingtype/getFirstSelect
- this.$http.get('/studyingtype/getFirstSelect').then(res => {
- if (res && res.code == 200) {
- this.classList = res.data;
- this.param.study_type = this.classList[0].id
- this.getList()
- }
- })
- },
- // 获取课程列表
- getList(reset) {
- if (reset) this.param.page = 1;
- this.status='loading';
- this.$http.get('/studying/list', this.param).then(res => {
- if (res && res.code == 200) {
- if (reset) this.list = []
- this.list.push(...res.page.list);
- this.totalCount=res.page.totalCount;
- if(this.list.length<this.totalCount) this.status='loadmore';
- else this.status='nomore';
- }
- })
- },
- scroll(e){
- this.timeStamp=e.timeStamp
- },
- goMore(){
- uni.navigateTo({
- url:"/pages/learningClassroom/recentWatching"
- })
- },
- /**轮播图跳转 */
- imgLink(type, id, url, shopid) {
- if (type == "goods") {
- uni.navigateTo({
- url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid,
- });
- } else if (type == "service") {
- // uni.navigateTo({
- // url: "/pages/product/goods/serviceGood?id=" + id
- // });
- } else if (type == "point_goods") {
- // uni.navigateTo({
- // url: "/pages/product/goods/IntegralGood?id=" + id
- // });
- } else if (type == "url") {
- if(/^http/.test(url)){
- uni.navigateTo({
- url: "/pages/index/webView?linkUrl=" + url,
- });
- }else{
- uni.navigateTo({
- url
- });
- }
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .main {
- min-height: 100vh;
- background-color: #fdfdfd;
- .cover {
- width: 100%;
- height: 340rpx;
- background-color: #f2f2f2;
- }
- .content {
- padding: 40rpx 0;
- .history {
- padding: 0 30rpx;
- margin-bottom: 40rpx;
- .title-box {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 27rpx;
- .title {
- font-size: 36rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- text-align: left;
- color: #1a1a1a;
- }
- .right {
- .more-text {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: right;
- color: #333333;
- }
- .iconfont2 {
- font-size: 27rpx;
- }
- }
- }
- .list {
- // overflow-x: auto;
- overflow-y: hidden;
- white-space: nowrap;
- padding-bottom: 4rpx;
- .item {
- display: inline-block;
- width: 317rpx;
- border-radius: 16rpx;
- overflow: hidden;
- margin-right: 20rpx;
- background-color: white;
- filter: drop-shadow(2rpx 4rpx 8rpx rgba(26, 58, 70, 0.1));
- box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
- position: relative;
- .tag {
- background: #138e46;
- color: white;
- border-radius: 0px 16rpx 0px 16rpx;
- padding: 0 10rpx;
- height: 41rpx;
- width: fit-content;
- line-height: 41rpx;
- font-size: 24rpx;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 1;
- }
- .cover {
- width: 317rpx;
- height: 292rpx;
- background-color: #f2f2f2;
- }
- .box {
- padding: 5rpx 26rpx 38rpx 26rpx;
- .desc {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: left;
- color: #333333;
- line-height: 36rpx;
- height: 72rpx;
- margin-bottom: 5rpx;
- white-space: normal;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .author {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #808080;
- line-height: 34rpx;
- .label {
- color: #1a1a1a;
- }
- }
- .count {
- .iconfont2 {
- font-size: 35rpx;
- color: #2DB62B;
- vertical-align: middle;
- }
- .num {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: left;
- color: #999999;
- line-height: 24rpx;
- vertical-align: middle;
- }
- }
- }
- }
- }
- }
- }
- .u-tabs {
- position: sticky;
- top: 0;
- z-index: 50;
- }
- .class-list {
- display: flex;
- justify-content: space-between;
- padding: 27rpx 30rpx 30rpx 30rpx;
- flex-wrap: wrap;
- .item-box {
- width: 336rpx;
- }
- .item {
- display: block;
- width: 100%;
- border-radius: 16rpx;
- overflow: hidden;
- margin: 0 20rpx 35rpx 0;
- background-color: white;
- filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.1));
- box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
- position: relative;
- .tag {
- background: #138e46;
- color: white;
- border-radius: 0px 16rpx 0px 16rpx;
- padding: 0 10rpx;
- height: 41rpx;
- width: fit-content;
- line-height: 41rpx;
- font-size: 24rpx;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 1;
- }
- .cover {
- width: 100%;
- height: 240rpx;
- background-color: #f2f2f2;
- }
- .box {
- padding: 5rpx 26rpx 38rpx 26rpx;
- .desc {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: left;
- color: #333333;
- line-height: 36rpx;
- height: 72rpx;
- margin-bottom: 5rpx;
- white-space: normal;
- }
- .author {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #808080;
- line-height: 34rpx;
- .label {
- color: #1a1a1a;
- }
- }
- .count {
- .iconfont2 {
- font-size: 35rpx;
- color: #2DB62B;
- vertical-align: middle;
- }
- .num {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: left;
- color: #999999;
- line-height: 24rpx;
- vertical-align: middle;
- }
- }
- }
- }
- }
- }
- .no-data-view{
- margin-top:20rpx !important;
- }
- /deep/ .u-scroll-box >view{
- border-bottom: 1rpx solid #e6e6e6;
- }
- </style>
|