study_sm/src/containers/main/index/index.vue

<template>
  <div>
    <div class="content">
      <div class="navigation">
        <router-link to="/">首页</router-link>
        <span>&gt; </span>
        在线课程
      </div>

      <div class="photo" v-if="isLoginOk">
        <ul class="pt-line clear ng-scope">
          <li class="pt-sola ng-scope" v-for="(item,index) in list" :key="index">
            <div class="img">
              <a>
                <img class="p-o" :src="item.tb" ></a>
                <div class="hover-block ng-scope">
                <div class="mask"></div>
                <a class="btn-normal" @click="gotoDetail(item.courseId)">
                  立即学习
                </a>
              </div>
            </div>
            <div class="bth">
              <a>
                  <span class="zt ng-binding">{{item.name}}
                    <span class="db">
                      <span class="status status0" @click="goPay( index)" v-if="item.status==0">立即购买</span>
                      <span class="status status1" @click="goPay( index)" v-if="item.status==1">继续购买</span>
                      <span class="status status2" v-if="item.status==2">已经购买</span>
                    </span>
                  </span>
              </a>
            </div>
            <div class="hb">
              <img class="hb-head" src="@/assets/images/user-man.jpg">
              <span class="name ng-binding" >{{item.author||'-'}}</span>
              <span class="da ng-binding">
              发布时间：{{item.publishAt|dateFilter}}
             </span>

            </div>
          </li>
        </ul>
        <!--  -->
        <el-pagination  class="m-pages"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="size" layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>

      <div vl-else>
        <div class="m-no-data tc" @click="loginDialog=true">
          <img src="../../../assets/images/no-data-2_hash6c469a3790.png" alt="">
          <p class="mt10 b t-b" >点击登入</p>
          <p class="mt10 txt-g">本页面需要先登入</p>
        </div>
      </div>

    </div>

    <el-dialog
      class="fc tc"
      :visible.sync="loginDialog"
      :close-on-click-modal="false"
      width="500px"
      @close="loginDialog=false"
    >
      <div class="login-dialog m-login">
        <un-login @login="login"></un-login>
      </div>
    </el-dialog>


    <el-dialog
      title="用户登入"
      class="fc tc"
      :visible.sync="qrcode"
      width="500px"
      :append-to-body="true"
      @close="closeDialog"
    >
      <div class="qrcode">
        <img :src="qrcodeUrl" />
        <div class="notice">请注意：报名学习通过不代表报名考试成功</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {httpServer} from "@/components/httpServer/httpServer.js";
import { MessageBox } from "element-ui";
import unLogin from "../../login/components/unLogin.vue";
import {parseTime} from "@/utils";

export default {
  name: "Index",
  data() {
    return {
      page: 1,
      size: 8,
      total: 0,
      list: [],
      showData: [],
      qrcode: false,
      qrcodeUrl: "",
      outTradeNo: "",
      title:'',
      timer: null,
      tickCount: 0,
      listLoading: false,
      loginDialog:false,
      isLoginOk: false,
      user:{}
    };
  },
  components:{unLogin},
  filters:{
    dateFilter(val) {
      return parseTime(val, '{y}-{m}-{d}')
    }
  },
  created() {
    if( !localStorage.uid || !localStorage.token){
      this.loginDialog = true;
      return;
    }else{
      this.isLoginOk = true;
      this.getData();
    }
  },
  beforeDestroy() {
    if (this.timer) window.clearInterval(this.timer);
  },
  methods: {
    initTimer() {
      if (this.timer) window.clearInterval(this.timer);
      this.timer = window.setInterval(() => {
        this.tickCount++;
        this.tickTimer();
      }, 2000);
    },
    tickTimer() {
      if (this.tickCount > 30) {
        if (this.timer) window.clearInterval(this.timer);
        this.qrcode = false;
      }
      let outTradeNo = this.outTradeNo;
      httpServer("weixin.iswxPay", { outTradeNo }).then((res) => {
        if (res.code == 200) {
          if (!!res.data) {
            if (this.timer) window.clearInterval(this.timer);
            MessageBox("支付成功", "提示", {
              confirmButtonText: "确定",
              showClose: true,
              type: "sucess",
            });
            this.qrcode = false;
            this.getData();
          }
        }
      });
    },
    closeDialog() {
      if (this.timer) window.clearInterval(this.timer);
    },
    getData() {
      let param = {
        size: this.size,
        from: (this.page - 1) * this.size
      }
      httpServer("course.getcoursemarket", param).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
      });
    },
    gotoDetail(courseId) {
      this.$router.push({name:'play', params:{courseId}})
    },
    goPay(index) {
      let item = this.list[index];
      httpServer("weixin.DoWxpay", { courseId: item.courseId }).then((res) => {
        if (res.code == 200) {
          let { outTradeNo, showUrl } = res.data;
          this.qrcode = true;
          this.qrcodeUrl = showUrl;
          this.outTradeNo = outTradeNo;
          this.title = '购买课程'+ item.name
          this.initTimer();
        }
      });
    },
    handleCurrentChange(page){
      this.page = page;
      this.getData()
    },
    login( param ){
      httpServer("Auth.LoginStudy" , param).then( res => {
        if(res.code==200){
          let { nickname, token, uid } = res.data;
          localStorage.nickname = nickname;
          localStorage.token = token;
          localStorage.uid = uid
          this.user = { nickname, token, uid };
          this.loginOk = true
          this.loginDialog = false
        }
      })
     }
  },
};
</script>
<style>
  @import "../../../assets/css/content.css";
  @import url("./index.css");
</style>