< -- 汪宁  2021-4-16  -- > 
<template>
  <view class="app_content">
    <scroll-view class="course_list" scroll-y>
      <block v-if="!$util.isEmpty(pageList)">
        <view class="list_item" v-for="(item, index) in pageList" :key="index" >
        <image :src="item.cover"></image>
        <view class="class_name">{{item.name}}</view>
        <view class="class_introduce">{{item.target}}</view>
        <view class="class_price">
          <text>¥{{item.tuition}}</text>
          <view class="class_apply">
            <text>{{item.num}}人报名</text>
            <view class="apply_btn" @click="signUp(item)">报名</view>
          </view>
        </view>
      </view>
      </block>
      <block v-else>
        <view class="nodata">
          <view>
            <image :src="`${constant.imgUrl}/common/nodata.png`"></image>
            <view>暂无课程~</view>
          </view>
        </view>
      </block>
    </scroll-view>
    <tab-bar :current="2"></tab-bar>
  </view>
</template>

<script>
import AppWrapperEmpty from '@/components/app-wrapper-empty';
import { pxClassList } from '@/api/px-class/index';
import { share } from "@/mixins";
import { getShopUser } from "@/utils/auth";
export default {
  components: {
		AppWrapperEmpty
	},
  data() {
    return {
      currentTabIndex: 2,
      pageList: []
    }
  },
  mixins: [share],
  onShow () {
    uni.hideTabBar();
  },
  onPullDownRefresh() {
      this.pxClassList().then(res => {
        uni.stopPullDownRefresh();
      });
  },
  methods: {
    tabClick (index) {
      this.currentTabIndex = index
    },
    init() {
      this.pxClassList()
      let account = uni.getStorageSync('account')
      
      getShopUser().then(res => {
        // 设置分享
        let shareParams = {
          title: '课程', // 分享标题
          desc: "", // 分享内容
          imgUrl: '',
          // #ifndef H5
          pagePath: `/pages/home/course?fromUserId=${res.id}&account=${account}`
          // #endif
        }
        this.jweixinFn(shareParams)
        console.log('分享地址',`/pages/home/course?fromUserId=${res.id}&account=${account}`)
      })
    },
    signUp(item) {
      this.pageTo({
        url: '/pages/class/index?id=' + item.id + '&name=' + item.name + '&price=' + item.tuition + '&target=' + item.target
      })
    },
    pxClassList() {
      return pxClassList().then(res => {
        console.log(res)
        this.pageList = res.data.list
      }).catch(err => {console.log(err)})
    }
  }
}
</script>

<style lang="scss" scoped>
.app_content{
  // width: 100vw;
  height: 100vh;
  background-color: #f0f2f6;
  padding-top: 1px;
  padding-bottom: 120upx;
  .course_list{
    margin-top: 20upx;
    // background-color: pink;
    height: 100%;
    padding-bottom: 100upx;
    .list_item{
      background-color: #fff;
      margin: 0 20upx 20upx;
      padding-bottom: 30upx;
      &:last-child{
        margin-bottom: 130upx;
      }
      &>image{
        height: 440upx;
        width: 100%;
      }
      &>.class_name{
        padding-left: 20upx;
        font-size: 38px;
        font-weight: 600;
        color: #333333;
        margin: 20upx 0;
      }
      &>.class_introduce{
        margin-left: 20upx;
        font-size: 24px;
        color: #999999;
        margin-bottom: 20upx;
        overflow: hidden;/*超出部分隐藏*/
        white-space: nowrap;/*不换行*/
        text-overflow:ellipsis;/*超出部分文字以...显示*/
      }
      &>.class_price{
        display: flex;
        justify-content: space-between;
        align-items: center;
        &>text{
          margin-left: 20upx;
          font-size: 28px;
          font-weight: bold;
          color: #FF2842;
        }
        &>.class_apply{
          margin-left: 20upx;
          &>text{
            font-size: 24px;
            color: #666666;
          }
          &>.apply_btn{
            width: 140upx;
            display: inline-block;
            height: 50upx;
            line-height: 50upx;
            background: linear-gradient(0deg, #FD6161, #FF3C59);
            border-radius: 25px;
            text-align: center;
            color: #fff;
            font-size: 26upx;
            margin: 0 20upx;
          }
        }
      }
    }
  }
}
.nodata{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  &>view{
    width: 318upx;
    height: 326upx;
    // background-color: pink;
    &>image{
      width: 318upx;
      height: 256upx;
      // background-color: green;
    }
    &>view{
      font-size: 26px;
      color: #999999;
      text-align: center;
      margin-top: 40upx;
    }
  }
}
</style>