gdy_app_8/src/view/course/home.vue

<template>
  <div class="curPage">
    <div v-show="!isWx">
      <p>请在微信中打开</p>
    </div>
    <div class="userInfo" v-show="isWx">
      <van-row
        type="flex"
        class="imageName"
        justify="space-between"
        align="center"
      >
        <div class="userImage">
          <userImage
            class="about-me__avatar"
            :img_url="user_info.imgUrl"
            :user_name="user_info.name"
            width="1.12rem"
            height="1.12rem"
          ></userImage>
          <div class="info">
            <span
              >{{ user_info.name?user_info.name:'未知'
              }}<van-icon
                name="notes-o"
                color="#E1B98B"
                style="margin-left: .1rem;"
            /></span>
            <!-- <p>手机：{{ user_info.tel }}</p> -->
            <p
              class="userId"
              :aria-label="user_info.id"
              @click="copyLink('.userId')"
            >
              <i class="courseIcon icon-fuzhi"></i>复制身份ID
            </p>
          </div>
        </div>
        <div class="user_leave">
          <van-icon name="gem-o" color="#a66666" />
          {{ user_info.marketable ? "经销商" : "学员" }}
        </div>
      </van-row>
    </div>
    <div class="user_tabs" v-if="user_info.marketable">
      <div class="tabs_content">
        <div class="tabsLi" @click="toUrl('/courseTeam')">
          <van-icon name="friends-o" />
          <span>我的团队</span>
        </div>
        <div class="tabsLi" @click="qropen">
          <i class="courseIcon icon-erweima"></i>
          <span>我的二维码</span>
        </div>
      </div>
    </div>
    <div class="user_course_tabs">
      <div class="tbsL" v-if='user_info.marketable'>
        <div class="tbsi" :class="{active:tbsIndex==0}" @click="selectTbs(0)">我的推广</div>
        <div class="tbsi" :class="{active:tbsIndex==1}" @click="selectTbs(1)">我的学习</div>
      </div>
      <div class="tbsR" v-if='user_info.marketable' @click="toMoreUrl">
        <span>名额变动明细</span>
      </div>
    </div>
    <van-search
      v-model="wxId"
      placeholder="请输入wxid替换当前账号"
      show-action
      style="margin: 0.1rem 0.2rem 0;border-radius: 0.1rem;"
      @search="changeUSer"
    />
    <div class="courScroll" :style="{height:user_info.marketable?'calc(100vh - 3.32rem) !important':'calc(-2.05rem + 100vh) !important'}">
      <scroller ref="scroller" :isInitRefresh="false">
        <van-loading v-show="showLoad" style="margin: 0px auto;position: relative;left: 50%;transform: translateX(-0.25rem);"/>
        <div class="myCourseList" v-if="user_info.marketable&&tbsIndex==0&&!showLoad">
          <courseList
            :dataList="courseClass.proCourse.courseList"
            :showNum="1"
            :fixedTitle="courseClass.proCourse.title"
          ></courseList>
        </div>
        <div class="myCourseList" v-if="tbsIndex==1&&!showLoad">
          <courseList
            :dataList="courseClass.learnCourse.courseList"
            :fixedTitle="courseClass.learnCourse.title"
            isNoAd
          ></courseList>
        </div>
      </scroller>
    </div>
    <van-overlay :show="qrVisible" @click="qrVisible = false">
      <div class="wrapper">
        <div class="qrContent">
          <div class="tit">我的二维码</div>
          <div class="qrcode-wrap" ref="qrCodeUrl"></div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import QRCode from "qrcodejs2";
import { getWxToken, setWxToken, openError } from "@/utils/auth";
import { isWxEnv } from "./utils";
import courseList from "./components/courseList.vue";
import {
  getWxApiToken,
  getUSerInfo,
  getDealerCourseList,
  getUserCourseList
} from "./api";
export default {
  name: "courseHome",
  components: {
    courseList
  },
  data() {
    return {
      showLoad:false,
      tbsIndex:0,
      clipboard: null,
      qrVisible: false,
      qrcode: null,
      qrcodeStatus: false,
      isWx: true,
      isAndroid: this.$getCache("isAndroid"),
      user_info: {
        imgUrl: "",
        id: "0",
        name: "用户名",
        mobile: "0",
        marketable: false
      },
      page: {
        cur: 1,
        size: 10,
        total: 0
      },
      courseClass: {
        proCourse: {
          title: "我推广的课程",
          total: 0,
          courseList: []
        },
        learnCourse: {
          title: "我学习的课程",
          total: 0,
          courseList: []
        }
      },
      wxId: "11770"
    };
  },
  created() {
    this.init();
  },
  watch: {
    $route(to) {
      if (to.path == "/courseHome") {
        this.init();
      }
    }
  },
  methods: {
    // 推广/学习标签切换
    selectTbs(i){
      if(this.user_info.marketable){
        if(i == 0&&this.tbsIndex != 0){
          this.tbsIndex = 0;
          this.showLoad = true;
          setTimeout(()=>{
            this.getDealerCourseList()
          },1000)
        }else if(i == 1&&this.tbsIndex != 1){
          this.tbsIndex = 1;
          this.showLoad = true;
          setTimeout(()=>{
            this.getUserCourseList()
          },1000)
        }
      }
    },
    //查看名额变动明细
    toMoreUrl() {
      // this.$router.push(`/course/adlist`);
      this.$router.push(`/course/limitChange`);
    },
    // 清楚本地存储/测试用
    changeUSer() {
      localStorage.clear();
      this.getUerInfo(this.wxId);
    },
    // 获取指定用户信息/测试用
    getUerInfo(wxid) {
      getWxApiToken(wxid).then(token => {
        getUSerInfo(token).then(res => {
          this.user_info = JSON.parse(localStorage.getItem("wx_user_info"));
          if (this.user_info.marketable) {
            getDealerCourseList();
          } else if (!this.user_info.marketable){
            this.tbsIndex = 1;
          }
          getUserCourseList();
        });
      });
    },
    //获取用户数据
    init() {
      this.user_info = JSON.parse(localStorage.getItem("wx_user_info"));
      if (this.user_info.marketable) {
        this.getDealerCourseList();
      } else if (!this.user_info.marketable){
        this.tbsIndex = 1;
      }
      this.getUserCourseList();
    },
    //获取经销推广课程列表
    getDealerCourseList(done) {
      getDealerCourseList().then(res => {
        this.courseClass.proCourse.total = res.total;
        this.courseClass.proCourse.courseList = res.list;
        this.showLoad = false;
        if (done) done();
      });
    },
    //获取用户消费的课程列表
    getUserCourseList(done) {
      getUserCourseList().then(res => {
        this.courseClass.learnCourse.total = res.total;
        let list = [];
        res.list.forEach(item => {
          let data = {
            subjectName: item.name,
            subjectId: item.id,
            subjectPrice: item.price,
            subjectThumb: item.thumb,
            subjectEnable: item.enable,
            sectionsNum: item.sectionsNum
          };
          list.push(data);
        });
        this.courseClass.learnCourse.courseList = list;
        this.showLoad = false;
        if (done) done();
      });
    },
    // 打开二维码
    qropen() {
      this.qrVisible = true;
      this.$nextTick(() => {
        this.creatQrCode();
      });
    },
    // 创建二维码
    creatQrCode() {
      if (!this.qrcodeStatus) {
        console.log(`${window.location.href.split("#")[0]}#/courseHome?pid=${
            JSON.parse(localStorage.getItem("wx_user_info")).id
          }`);
        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: `${window.location.href.split("#")[0]}#/courseHome?pid=${
            JSON.parse(localStorage.getItem("wx_user_info")).id
          }`, // 需要转换为二维码的内容
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
        this.qrcodeStatus = true;
      }
    },
    //复制剪切板
    copyLink(event) {
      let that = this;
      //这里是复制目标的类名
      that.clipboard = new Clipboard(event, {
        text: function(trigger) {
          return trigger.getAttribute("aria-label");
        }
      });
      that.clipboard.on("success", function(e) {
        e.clearSelection(); //清除选中的文字的选择状态
        that.$toast.success("ID复制成功~");
      });

      that.clipboard.on("error", function(e) {
        console.error(e);
      });
    },
    //跳转内页
    toUrl(url) {
      this.$router.push({
        path: url
      });
    },
  }
};
</script>
<style scoped lang="scss">
@import "../../assets/iconfont.css";
* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
.curPage {
  height: 100%;
  position: relative !important;
  padding-top: .4rem;
  background: #F3F2EE;
  background: linear-gradient(90deg, #F3F2EE, #E7EFF9);
  .userInfo {
    padding: 0.24rem 0.32rem 0.12rem;
    .userImage {
      display: flex;
      align-items: center;
      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 0.2rem;
        span {
          font-size: 0.32rem;
          font-weight: 600;
          color: #000;
          line-height: 2;
          display: block;
        }
        p {
          font-size: 0.22rem;
          color: #222;
          line-height: 1;
          display: block;
          i {
            font-size: 0.22rem;
            color: #222;
            line-height: 1;
          }
        }
      }
    }
    .user_leave {
      padding: 0.05rem 0.3rem;
      font-size: 0.26rem;
      font-weight: 550;
      color: #a66666;
      border: 1px solid #c9c3c0;
      border-radius: 0.1rem;
      line-height: 1.5;
    }
  }
  .user_tabs {
    padding: 0 0.2rem;
    .tabs_content {
      padding: 0.1rem 0.2rem;
      display: flex;
      border-radius: 0.1rem;
      background: #E9F1FE;
      background: linear-gradient(90deg, #E9F1FE, #C1D9FF);
      .tabsLi {
        flex: 1;
        text-align: center;
        position: relative;
        &:nth-of-type(1)::after {
          content: "";
          width: 1px;
          height: 80%;
          position: absolute;
          top: 10%;
          right: 0;
          background-color: #999;
        }
        span {
          font-size: 0.28rem;
          color: #333;
          line-height: 0.6rem;
        }
      }
    }
  }
  .user_course_tabs{
    padding: .15rem .2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tbsL{
      width: 60%;
      display: flex;
      align-items: center;
      .tbsi{
        padding: 0 0.15rem;
        border-radius: 0.25rem;
        border: 0.02rem solid #999;
        font-size: .24rem;
        color: #444;
        line-height: .4rem;
        text-align: center;
        margin-right: 0.2rem;
        &.active{
          border: 1px solid rgb(22, 132, 252);
          background-color: rgba(38, 162, 255,.1);
          color: rgb(22, 132, 252);
        }
      }
    }
    .tbsR{
      span{
        font-size: .24rem;
        color: rgb(22, 132, 252);
        line-height: .3rem;
      }
    }
  }
  .courScroll {
    height: calc(100vh - 2.75rem) !important;
    position: relative;
    .cScroll {
      height: 100%;
      position: relative !important;
    }
    .myCourseList {
      &:nth-child(2) {
        padding-bottom: 0.4rem;
      }
      padding: 0 0.2rem;
      margin-top: 0.2rem;
    }
  }
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    .qrContent{
      width: 70%;
      border-radius: 0.2rem;
      overflow: hidden;
      .tit{
        position: relative;
        width: 100%;
        background-color: #FFF;
        text-align: center;
        font-size: .3rem;
        color: #333;
        line-height: .8rem;
        border-bottom: 1px solid #efefef;
        &::after{
          content: "X";
          position: absolute;
          right: .2rem;
          top: .2rem;
          font-size: .3rem;
          line-height: .3rem;
        }
      }
      .qrcode-wrap {
        padding: 0.2rem;
        background-color: #fff;
        text-align: center;
        display: flex;
        justify-content: center;
      }
    }
  }
}
/deep/ .van-search .van-cell{
  padding: 0.1rem 0.16rem 0.1rem 0.16rem;
}
</style>