|
@@ -54,21 +54,32 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-search v-model="wxId"
|
|
|
- placeholder="请输入wxid替换当前账号"
|
|
|
+ <div class="user_course_tabs">
|
|
|
+ <div class="tbsL" v-if='user_info.marketable'>
|
|
|
+ <div class="tbsi" :class="{active:tbsIndex==0}" @click="selectTbs()">我的推广</div>
|
|
|
+ <div class="tbsi" :class="{active:tbsIndex==1}" @click="selectTbs()">我的学习</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">
|
|
|
+ />
|
|
|
+ <div class="courScroll" :style="{height:user_info.marketable?'calc(100vh - 3.32rem) !important':'calc(-2.05rem + 100vh) !important'}">
|
|
|
<scroller ref="scroller" :isInitRefresh="false">
|
|
|
- <div class="myCourseList" v-if="user_info.marketable">
|
|
|
+ <div class="myCourseList" v-if="user_info.marketable&&tbsIndex==0">
|
|
|
<courseList
|
|
|
:dataList="courseClass.proCourse.courseList"
|
|
|
:showNum="1"
|
|
|
:fixedTitle="courseClass.proCourse.title"
|
|
|
></courseList>
|
|
|
</div>
|
|
|
- <div class="myCourseList">
|
|
|
+ <div class="myCourseList" v-if="tbsIndex==1">
|
|
|
<courseList
|
|
|
:dataList="courseClass.learnCourse.courseList"
|
|
|
:fixedTitle="courseClass.learnCourse.title"
|
|
@@ -79,27 +90,27 @@
|
|
|
</div>
|
|
|
<van-overlay :show="qrVisible" @click="qrVisible = false">
|
|
|
<div class="wrapper">
|
|
|
- <div class="qrcode-wrap" ref="qrCodeUrl"></div>
|
|
|
+ <div class="qrContent">
|
|
|
+ <div class="tit">我的二维码</div>
|
|
|
+ <div class="qrcode-wrap" ref="qrCodeUrl"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</van-overlay>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Vue from "vue";
|
|
|
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 { Overlay } from "vant";
|
|
|
import {
|
|
|
getWxApiToken,
|
|
|
getUSerInfo,
|
|
|
getDealerCourseList,
|
|
|
getUserCourseList
|
|
|
} from "./api";
|
|
|
-Vue.use(Overlay);
|
|
|
export default {
|
|
|
name: "courseHome",
|
|
|
components: {
|
|
@@ -107,7 +118,8 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- clipboard:null,
|
|
|
+ tbsIndex:0,
|
|
|
+ clipboard: null,
|
|
|
qrVisible: false,
|
|
|
qrcode: null,
|
|
|
qrcodeStatus: false,
|
|
@@ -128,43 +140,55 @@ export default {
|
|
|
courseClass: {
|
|
|
proCourse: {
|
|
|
title: "我推广的课程",
|
|
|
- total:0,
|
|
|
+ total: 0,
|
|
|
courseList: []
|
|
|
},
|
|
|
learnCourse: {
|
|
|
title: "我学习的课程",
|
|
|
- total:0,
|
|
|
+ total: 0,
|
|
|
courseList: []
|
|
|
}
|
|
|
},
|
|
|
- wxId:'11770'
|
|
|
+ wxId: "11770"
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.init();
|
|
|
},
|
|
|
- watch:{
|
|
|
- '$route'(to){
|
|
|
- if(to.path == '/courseHome'){
|
|
|
+ watch: {
|
|
|
+ $route(to) {
|
|
|
+ if (to.path == "/courseHome") {
|
|
|
this.init();
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- changeUSer(){
|
|
|
+ selectTbs(){
|
|
|
+ if(this.user_info.marketable){
|
|
|
+ if(this.tbsIndex == 1){
|
|
|
+ this.tbsIndex = 0;
|
|
|
+ }else{
|
|
|
+ this.tbsIndex = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //查看名额变动明细
|
|
|
+ toMoreUrl() {
|
|
|
+ // this.$router.push(`/course/adlist`);
|
|
|
+ this.$router.push(`/course/limitChange`);
|
|
|
+ },
|
|
|
+ changeUSer() {
|
|
|
localStorage.clear();
|
|
|
- this.getUerInfo(this.wxId)
|
|
|
+ this.getUerInfo(this.wxId);
|
|
|
},
|
|
|
- getUerInfo(wxid){
|
|
|
+ getUerInfo(wxid) {
|
|
|
getWxApiToken(wxid).then(token => {
|
|
|
getUSerInfo(token).then(res => {
|
|
|
- this.user_info = JSON.parse(
|
|
|
- localStorage.getItem("wx_user_info")
|
|
|
- );
|
|
|
- if(this.$route.query && this.$route.query.pid){
|
|
|
- localStorage.setItem('pid',this.$route.query.pid)
|
|
|
+ this.user_info = JSON.parse(localStorage.getItem("wx_user_info"));
|
|
|
+ if (this.$route.query && this.$route.query.pid) {
|
|
|
+ localStorage.setItem("pid", this.$route.query.pid);
|
|
|
this.$router.push(`/courseLogin?pid=${this.$route.query.pid}`);
|
|
|
- }else if (this.user_info.marketable) {
|
|
|
+ } else if (this.user_info.marketable) {
|
|
|
getDealerCourseList();
|
|
|
}
|
|
|
getUserCourseList();
|
|
@@ -173,62 +197,66 @@ export default {
|
|
|
},
|
|
|
//获取用户数据
|
|
|
init() {
|
|
|
- isWxEnv()
|
|
|
- .then(() => {
|
|
|
- if (getWxToken()&&localStorage.getItem('wx_user_info')) {
|
|
|
- this.user_info = JSON.parse(localStorage.getItem("wx_user_info"));
|
|
|
- if(this.$route.query && this.$route.query.pid){
|
|
|
- localStorage.setItem('pid',this.$route.query.pid)
|
|
|
- this.$router.push(`/courseLogin?pid=${this.$route.query.pid}`);
|
|
|
- }else if (this.user_info.marketable) {
|
|
|
- this.getDealerCourseList();
|
|
|
- }
|
|
|
- this.getUserCourseList();
|
|
|
- } else {
|
|
|
- this.getUerInfo(this.wxId)
|
|
|
+ isWxEnv()
|
|
|
+ .then(() => {
|
|
|
+ if (getWxToken() && localStorage.getItem("wx_user_info")) {
|
|
|
+ this.user_info = JSON.parse(localStorage.getItem("wx_user_info"));
|
|
|
+ if (this.$route.query && this.$route.query.pid) {
|
|
|
+ localStorage.setItem("pid", this.$route.query.pid);
|
|
|
+ this.$router.push(`/courseLogin?pid=${this.$route.query.pid}`);
|
|
|
+ } else if (this.user_info.marketable) {
|
|
|
+ this.getDealerCourseList();
|
|
|
+ } else if (!this.user_info.marketable){
|
|
|
+ this.tbsIndex = 1;
|
|
|
}
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- if (getWxToken()&&localStorage.getItem('wx_user_info')) {
|
|
|
- this.user_info = JSON.parse(localStorage.getItem("wx_user_info"));
|
|
|
- if(this.$route.query && this.$route.query.pid){
|
|
|
- localStorage.setItem('pid',this.$route.query.pid)
|
|
|
- this.$router.push(`/courseLogin?pid=${this.$route.query.pid}`);
|
|
|
- }else if (this.user_info.marketable) {
|
|
|
- this.getDealerCourseList();
|
|
|
- }
|
|
|
- this.getUserCourseList();
|
|
|
- } else {
|
|
|
- this.getUerInfo(this.wxId)
|
|
|
+ this.getUserCourseList();
|
|
|
+ } else {
|
|
|
+ this.getUerInfo(this.wxId);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ if (getWxToken() && localStorage.getItem("wx_user_info")) {
|
|
|
+ this.user_info = JSON.parse(localStorage.getItem("wx_user_info"));
|
|
|
+ if (this.$route.query && this.$route.query.pid) {
|
|
|
+ localStorage.setItem("pid", this.$route.query.pid);
|
|
|
+ this.$router.push(`/courseLogin?pid=${this.$route.query.pid}`);
|
|
|
+ } else if (this.user_info.marketable) {
|
|
|
+ this.getDealerCourseList();
|
|
|
+ } else if (!this.user_info.marketable){
|
|
|
+ this.tbsIndex = 1;
|
|
|
}
|
|
|
- });
|
|
|
+ this.getUserCourseList();
|
|
|
+ } else {
|
|
|
+ this.getUerInfo(this.wxId);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
//获取经销推广课程列表
|
|
|
getDealerCourseList(done) {
|
|
|
getDealerCourseList().then(res => {
|
|
|
- this.courseClass.proCourse.total = res.total
|
|
|
- this.courseClass.proCourse.courseList = res.list
|
|
|
- if(done) done();
|
|
|
+ this.courseClass.proCourse.total = res.total;
|
|
|
+ this.courseClass.proCourse.courseList = res.list;
|
|
|
+ if (done) done();
|
|
|
});
|
|
|
},
|
|
|
//获取用户消费的课程列表
|
|
|
getUserCourseList(done) {
|
|
|
getUserCourseList().then(res => {
|
|
|
- this.courseClass.learnCourse.total = res.total
|
|
|
- let list = []
|
|
|
- res.list.forEach(item=>{
|
|
|
+ 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
|
|
|
- if(done) done();
|
|
|
+ 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;
|
|
|
+ if (done) done();
|
|
|
});
|
|
|
},
|
|
|
// 打开二维码
|
|
@@ -241,11 +269,13 @@ export default {
|
|
|
// 创建二维码
|
|
|
creatQrCode() {
|
|
|
if (!this.qrcodeStatus) {
|
|
|
- console.log(`http://192.168.0.102:8088/#/courseHome?pid=${
|
|
|
+ console.log(
|
|
|
+ `http://192.168.0.102:8088/#/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=${
|
|
|
+ text: `${window.location.href.split("#")[0]}#/courseHome?pid=${
|
|
|
JSON.parse(localStorage.getItem("wx_user_info")).id
|
|
|
}`, // 需要转换为二维码的内容
|
|
|
width: 200,
|
|
@@ -301,7 +331,9 @@ img {
|
|
|
.curPage {
|
|
|
height: 100%;
|
|
|
position: relative !important;
|
|
|
- background-color: #eee;
|
|
|
+ padding-top: .4rem;
|
|
|
+ background: #F3F2EE;
|
|
|
+ background: linear-gradient(90deg, #F3F2EE, #E7EFF9);
|
|
|
.userInfo {
|
|
|
padding: 0.24rem 0.32rem 0.12rem;
|
|
|
.userImage {
|
|
@@ -346,9 +378,10 @@ img {
|
|
|
padding: 0 0.2rem;
|
|
|
.tabs_content {
|
|
|
padding: 0.1rem 0.2rem;
|
|
|
- background-color: #fff;
|
|
|
display: flex;
|
|
|
border-radius: 0.1rem;
|
|
|
+ background: #E9F1FE;
|
|
|
+ background: linear-gradient(90deg, #E9F1FE, #C1D9FF);
|
|
|
.tabsLi {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
@@ -370,8 +403,41 @@ img {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .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.35rem) !important;
|
|
|
+ height: calc(100vh - 2.75rem) !important;
|
|
|
position: relative;
|
|
|
.cScroll {
|
|
|
height: 100%;
|
|
@@ -390,10 +456,39 @@ img {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 100vh;
|
|
|
- .qrcode-wrap {
|
|
|
- padding: 0.2rem;
|
|
|
- background-color: #fff;
|
|
|
+ .qrContent{
|
|
|
+ width: 65%;
|
|
|
+ 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>
|