gdy_app_8/src/view/course/user.vue

<template>
    <div class="curPage">
      <div class="userInfo">
        <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"
              v-if="user_info.imgUrl"
            ></userImage>
            <div style="background: #26A2FF;border-radius: 50%;overflow: hidden;" v-else>
              <userImage
                class="about-me__avatar"
                :img_url="defaultImgUrl"
                user_name="用户"
                width="1.12rem"
                height="1.12rem"
              ></userImage>
            </div>
            <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/1')">
            <van-image
              src="static/images/course_team.png"
              style="width: .8rem;height: .8rem;"
              type="contain"
            />
            <span>我的团队</span>
          </div>
          <div class="tabsLi" @click="qropen">
            <van-image
              src="static/images/course_ewm.png"
              style="width: .8rem;height: .8rem;"
              type="contain"
            />
            <span>邀请二维码</span>
          </div>
          <div class="tabsLi" @click="toUrl('/courseTeam/2')">
            <van-image
              src="static/images/course_dingdan.png"
              style="width: .8rem;height: .8rem;"
              type="contain"
            />
            <span>交易往来</span>
          </div>
        </div>
      </div>
      <div class="user_course_tabs" v-if='user_info.marketable'>
        <van-tabs v-model="tbsIndex" style="width: 60%;">
          <van-tab title="我的推广"></van-tab>
          <van-tab title="我的学习"></van-tab>
        </van-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>名额变动明细<van-icon name="arrow" /></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 - 5.38rem) !important'
            : 'calc(-3.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>
        <van-tabbar v-model="active" @change="activeChange">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
        </van-tabbar>
      </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 class="btm">
              <p>邀请朋友成为经销商，并加入你的团队</p>
            </div>
          </div>
        </div>
      </van-overlay>
    </div>
  </template>
  
  <script>
  import Clipboard from "clipboard";
  import QRCode from "qrcodejs2";
  import courseList from "./components/courseList.vue";
  import {setDocumentTitle} from '../../components/vueHashCalendar/utils/util'
  import {setWxConfig} from './utils'
  import {
    getWxApiToken,
    getUSerInfo,
    getDealerCourseList,
    getUserCourseList
  } from "./api";
  export default {
    name: "courseUser",
    components: {
      courseList
    },
    data() {
      return {
        active:1,
        defaultImgUrl:require('../../assets/images/headLogo.jpg'),
        showLoad: false,
        tbsIndex: 0,
        clipboard: null,
        qrVisible: false,
        qrcode: null,
        qrcodeStatus: false,
        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"
      };
    },
    activated(){
      this.init();
      if(this.$isWx){
        setWxConfig();
      }
    },
    methods: {
        //底部导航变化
        activeChange(){
            if(this.active != 1){
                this.$router.push('/courseHome');
                this.active = 1;
            }
        },
      // 推广/学习标签切换
      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) {
          this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: `${window.location.href.split("#")[0]}#/courseLogin?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, params) {
        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: 0.4rem;
    background: #f3f2ee;
    background: linear-gradient(90deg, #f3f2ee, #e7eff9);
    .userInfo {
      padding: 0.24rem 0.32rem 0.12rem;
      .userImage {
        display: flex;
        align-items: center;
        flex: 1;
        .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;
      margin-top: 0.15rem;
      .tabs_content {
        box-sizing: border-box;
        height: 1.5rem;
        padding: 0.1rem 0;
        display: flex;
        justify-content: space-around;
        border-radius: 0.1rem;
        background: #fff;
        .tabsLi {
          // flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          span {
            font-size: 0.24rem;
            color: #333;
            line-height: 0.3rem;
          }
        }
      }
    }
    .user_course_tabs {
      margin: 0.15rem 0.2rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      border-radius: .1rem;
      overflow: hidden;
      .ctbsL {
        width: 2rem;
        display: flex;
        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: 0.24rem;
          color: #444;
          line-height: 0.4rem;
          text-align: center;
          margin-right: 0.2rem;
          &.active {
            border: 1px solid rgb(22, 132, 252);
            background-color: rgba(38, 162, 255, 0.1);
            color: rgb(22, 132, 252);
          }
        }
      }
      .tbsR {
        display: flex;
        align-items: center;
        margin-right: .2rem;
        span {
          font-size: 0.24rem;
          color: #333;
          line-height: 0.4rem;
        }
      }
    }
    .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;
        background-color: #FFF;
        .btm{
          font-size: .23rem;
          color: #666;
          line-height: .6rem;
          text-align: center;
          border: 0;
        }
        .tit {
          position: relative;
          width: 100%;
          text-align: center;
          font-size: 0.3rem;
          color: #333;
          line-height: 0.8rem;
          &::after {
            content: "X";
            position: absolute;
            right: 0.2rem;
            top: 0.2rem;
            font-size: 0.3rem;
            line-height: 0.3rem;
          }
        }
        .qrcode-wrap {
          padding: 0.2rem .2rem 0;
          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;
  }
  /deep/ .van-tabs--line .van-tabs__wrap{
    height: .68rem;
  }
  /deep/ .van-tab--active{
    font-weight: 600;
  }
  </style>