|
@@ -20,20 +20,20 @@
|
|
|
></userImage>
|
|
|
<div class="info">
|
|
|
<span
|
|
|
- >{{ user_info.name?user_info.name:'未知'
|
|
|
+ >{{ user_info.name ? user_info.name : "未知"
|
|
|
}}<van-icon
|
|
|
name="notes-o"
|
|
|
color="#E1B98B"
|
|
|
style="margin-left: .1rem;"
|
|
|
/></span>
|
|
|
<!-- <p>手机:{{ user_info.tel }}</p> -->
|
|
|
- <p
|
|
|
+ <!-- <p
|
|
|
class="userId"
|
|
|
:aria-label="user_info.id"
|
|
|
@click="copyLink('.userId')"
|
|
|
>
|
|
|
<i class="courseIcon icon-fuzhi"></i>复制身份ID
|
|
|
- </p>
|
|
|
+ </p> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="user_leave">
|
|
@@ -44,43 +44,76 @@
|
|
|
</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" />
|
|
|
+ <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">
|
|
|
- <i class="courseIcon icon-erweima"></i>
|
|
|
- <span>我的二维码</span>
|
|
|
+ <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">
|
|
|
- <div class="tbsL" v-if='user_info.marketable'>
|
|
|
+ <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>名额变动明细</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="tbsR" v-if="user_info.marketable" @click="toMoreUrl">
|
|
|
+ <span>名额变动明细<van-icon name="arrow" /></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-search
|
|
|
+ <!-- <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'}">
|
|
|
+ /> -->
|
|
|
+ <div
|
|
|
+ class="courScroll"
|
|
|
+ :style="{
|
|
|
+ height: user_info.marketable
|
|
|
+ ? 'calc(100vh - 4.38rem) !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">
|
|
|
+ <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">
|
|
|
+ <div class="myCourseList" v-if="tbsIndex == 1 && !showLoad">
|
|
|
<courseList
|
|
|
:dataList="courseClass.learnCourse.courseList"
|
|
|
:fixedTitle="courseClass.learnCourse.title"
|
|
@@ -92,8 +125,13 @@
|
|
|
<van-overlay :show="qrVisible" @click="qrVisible = false">
|
|
|
<div class="wrapper">
|
|
|
<div class="qrContent">
|
|
|
- <div class="tit">我的二维码</div>
|
|
|
+ <div class="tit">
|
|
|
+ 邀请二维码
|
|
|
+ </div>
|
|
|
<div class="qrcode-wrap" ref="qrCodeUrl"></div>
|
|
|
+ <div class="btm">
|
|
|
+ <p>邀请朋友成为经销商,并加入你的团队</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-overlay>
|
|
@@ -103,8 +141,6 @@
|
|
|
<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,
|
|
@@ -119,8 +155,8 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- showLoad:false,
|
|
|
- tbsIndex:0,
|
|
|
+ showLoad: false,
|
|
|
+ tbsIndex: 0,
|
|
|
clipboard: null,
|
|
|
qrVisible: false,
|
|
|
qrcode: null,
|
|
@@ -166,20 +202,20 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
// 推广/学习标签切换
|
|
|
- selectTbs(i){
|
|
|
- if(this.user_info.marketable){
|
|
|
- if(i == 0&&this.tbsIndex != 0){
|
|
|
+ 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){
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getDealerCourseList();
|
|
|
+ }, 1000);
|
|
|
+ } else if (i == 1 && this.tbsIndex != 1) {
|
|
|
this.tbsIndex = 1;
|
|
|
this.showLoad = true;
|
|
|
- setTimeout(()=>{
|
|
|
- this.getUserCourseList()
|
|
|
- },1000)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getUserCourseList();
|
|
|
+ }, 1000);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -200,7 +236,7 @@ export default {
|
|
|
this.user_info = JSON.parse(localStorage.getItem("wx_user_info"));
|
|
|
if (this.user_info.marketable) {
|
|
|
getDealerCourseList();
|
|
|
- } else if (!this.user_info.marketable){
|
|
|
+ } else if (!this.user_info.marketable) {
|
|
|
this.tbsIndex = 1;
|
|
|
}
|
|
|
getUserCourseList();
|
|
@@ -212,7 +248,7 @@ export default {
|
|
|
this.user_info = JSON.parse(localStorage.getItem("wx_user_info"));
|
|
|
if (this.user_info.marketable) {
|
|
|
this.getDealerCourseList();
|
|
|
- } else if (!this.user_info.marketable){
|
|
|
+ } else if (!this.user_info.marketable) {
|
|
|
this.tbsIndex = 1;
|
|
|
}
|
|
|
this.getUserCourseList();
|
|
@@ -257,9 +293,11 @@ export default {
|
|
|
// 创建二维码
|
|
|
creatQrCode() {
|
|
|
if (!this.qrcodeStatus) {
|
|
|
- console.log(`${window.location.href.split("#")[0]}#/courseHome?pid=${
|
|
|
+ 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
|
|
@@ -292,11 +330,11 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
//跳转内页
|
|
|
- toUrl(url) {
|
|
|
+ toUrl(url, params) {
|
|
|
this.$router.push({
|
|
|
path: url
|
|
|
});
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -312,14 +350,15 @@ img {
|
|
|
.curPage {
|
|
|
height: 100%;
|
|
|
position: relative !important;
|
|
|
- padding-top: .4rem;
|
|
|
- background: #F3F2EE;
|
|
|
- background: linear-gradient(90deg, #F3F2EE, #E7EFF9);
|
|
|
+ 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;
|
|
@@ -357,63 +396,68 @@ img {
|
|
|
}
|
|
|
.user_tabs {
|
|
|
padding: 0 0.2rem;
|
|
|
+ margin-top: 0.15rem;
|
|
|
.tabs_content {
|
|
|
- padding: 0.1rem 0.2rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 1.5rem;
|
|
|
+ padding: 0.1rem 0;
|
|
|
display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
border-radius: 0.1rem;
|
|
|
- background: #E9F1FE;
|
|
|
- background: linear-gradient(90deg, #E9F1FE, #C1D9FF);
|
|
|
+ background: #fff;
|
|
|
.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;
|
|
|
- }
|
|
|
+ // flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
span {
|
|
|
- font-size: 0.28rem;
|
|
|
+ font-size: 0.24rem;
|
|
|
color: #333;
|
|
|
- line-height: 0.6rem;
|
|
|
+ line-height: 0.3rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .user_course_tabs{
|
|
|
- padding: .15rem .2rem 0;
|
|
|
+ .user_course_tabs {
|
|
|
+ margin: 0.15rem 0.2rem 0;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- .tbsL{
|
|
|
+ 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{
|
|
|
+ .tbsi {
|
|
|
padding: 0 0.15rem;
|
|
|
border-radius: 0.25rem;
|
|
|
border: 0.02rem solid #999;
|
|
|
- font-size: .24rem;
|
|
|
+ font-size: 0.24rem;
|
|
|
color: #444;
|
|
|
- line-height: .4rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
text-align: center;
|
|
|
margin-right: 0.2rem;
|
|
|
- &.active{
|
|
|
+ &.active {
|
|
|
border: 1px solid rgb(22, 132, 252);
|
|
|
- background-color: rgba(38, 162, 255,.1);
|
|
|
+ background-color: rgba(38, 162, 255, 0.1);
|
|
|
color: rgb(22, 132, 252);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .tbsR{
|
|
|
- span{
|
|
|
- font-size: .24rem;
|
|
|
- color: rgb(22, 132, 252);
|
|
|
- line-height: .3rem;
|
|
|
+ .tbsR {
|
|
|
+ margin-right: .2rem;
|
|
|
+ span {
|
|
|
+ font-size: 0.24rem;
|
|
|
+ color: #333;
|
|
|
+ line-height: 0.3rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -429,7 +473,7 @@ img {
|
|
|
padding-bottom: 0.4rem;
|
|
|
}
|
|
|
padding: 0 0.2rem;
|
|
|
- margin-top: 0.2rem;
|
|
|
+ // margin-top: 0.2rem;
|
|
|
}
|
|
|
}
|
|
|
.wrapper {
|
|
@@ -437,30 +481,36 @@ img {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 100vh;
|
|
|
- .qrContent{
|
|
|
+ .qrContent {
|
|
|
width: 70%;
|
|
|
border-radius: 0.2rem;
|
|
|
overflow: hidden;
|
|
|
- .tit{
|
|
|
+ background-color: #FFF;
|
|
|
+ .btm{
|
|
|
+ font-size: .23rem;
|
|
|
+ color: #666;
|
|
|
+ line-height: .6rem;
|
|
|
+ text-align: center;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
- background-color: #FFF;
|
|
|
text-align: center;
|
|
|
- font-size: .3rem;
|
|
|
+ font-size: 0.3rem;
|
|
|
color: #333;
|
|
|
- line-height: .8rem;
|
|
|
- border-bottom: 1px solid #efefef;
|
|
|
- &::after{
|
|
|
+ line-height: 0.8rem;
|
|
|
+ &::after {
|
|
|
content: "X";
|
|
|
position: absolute;
|
|
|
- right: .2rem;
|
|
|
- top: .2rem;
|
|
|
- font-size: .3rem;
|
|
|
- line-height: .3rem;
|
|
|
+ right: 0.2rem;
|
|
|
+ top: 0.2rem;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ line-height: 0.3rem;
|
|
|
}
|
|
|
}
|
|
|
.qrcode-wrap {
|
|
|
- padding: 0.2rem;
|
|
|
+ padding: 0.2rem .2rem 0;
|
|
|
background-color: #fff;
|
|
|
text-align: center;
|
|
|
display: flex;
|
|
@@ -469,7 +519,13 @@ img {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-/deep/ .van-search .van-cell{
|
|
|
+/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>
|