You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
zhishifufei_uniapp/pages/mine/index.vue

822 lines
21 KiB

<template>
<BaseContainer class="user-page" :fixedNav="false">
<image :src="getImgPath('/static/frontend/mine-bg.png')" mode="aspectFill" class="bg"></image>
<view class="header">
<view class="user-section" data-eventsync="true" @tap="goProfilePage" >
<image mode="aspectFill" class="img" :src="userInfo.avatar" v-if="isLogin" />
<image mode="aspectFill" class="img" :src="getImgPath('/wap/first/zsff/images/avatar_default.jpg')" v-else />
<view class="text-wrap">
<template v-if="isLogin">
<view class="name">{{ userInfo.nickname }}</view>
<view class="info info-vip" v-if="userInfo.level == 0">
<image mode="aspectFill" class="icon" :src="getImgPath('/static/frontend/vip.png')" />
<text>vip会员</text>
</view>
<view class="info" v-else>
<text>尚未开通会员</text>
</view>
</template>
<view class="name" v-else>请登录</view>
</view>
<view class="iconfont iconxiangyou"></view>
</view>
<view class="notice header-info">
<image src="@/static/images/notice.png" mode="aspectfill"></image>
<text class="notice-num">6</text>
</view>
</view>
<view class="member-section" @click="memberUrl">
<view>
<image mode="aspectFill" src="@/static/images/vip.png" />
<text>V</text>
</view>
<view>
<view v-if="!isLogin || userInfo.level == 0" class="member_title">会员可享多项课程特权</view>
<view v-else class="member_title">有效期至{{ overdue_time }}</view>
</view>
<view v-if="isLogin">
<view style="white-space: nowrap;">
<button class="flex flex-center" v-if="userInfo.level == 1">
立即查看
</button>
<button class="flex flex-center" v-else>立即激活</button>
</view>
</view>
<button class="flex flex-center" v-else>立即激活</button>
</view>
<view class="func-box">
<view class="tool-section">
<view @click="goUrl('/pages/special/grade_special', 1)">
<image mode="heightFix" :src="getImgPath('/static/frontend/course.png')" />
<span>我的课程</span>
</view>
<view @click="goUrl('/pages/special/record', 1)">
<image mode="heightFix" :src="getImgPath('/static/frontend/record.png')" />
<span>学习记录</span>
</view>
<view @click="goUrl('/pages/special/order_store_list', 1)" v-if="is_store_switch == 1">
<image mode="heightFix" src="@/static/images/my/order.png" />
<span>商品订单</span>
</view>
</view>
<view class="question">
<view v-if="question.length" class="question-section">
<view class="question-item flex " v-for="(item, index) in question" :key="item.id"
@click="goUrl(item.url, 1)">
<image mode="heightFix" :src="getImgPath(`/static/frontend/question-${index}.png`)" />
<view>
<view>{{ item.title }}</view>
<view>{{ item.explain }}</view>
</view>
</view>
</view>
</view>
<view class="serve-section" v-if="menuList.length">
<view class="section-bd">
<!-- <view class="section-link" v-for="item in menuList" :key="item.id" @click="goUrl(item, 2)" v-if="item.title != '咨询客服' && TOUTIAO_STATUS">
<image mode="aspectFill" :src="item.icon" />
{{ item.title }}
<view class="menu-more"></view>
</view>
<button class="section-link" open-type="im" :data-im-id="imId" bindim="imCallback" binderror="onimError" v-if="TOUTIAO_STATUS">
<image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/chats.png')" />
咨询客服
<view class="menu-more"></view>
</button> -->
<view v-if="!TOUTIAO_STATUS" class="section-link" v-for="item in menuList.slice(0, 6)" :key="item.id" @click="goUrl(item, 2)" >
<image mode="aspectFill" :src="item.icon" />
{{ item.title }}
<view class="menu-more"></view>
</view>
</view>
<view class="section-bd" v-if="menuList.length > 6">
<view v-if="!TOUTIAO_STATUS" class="section-link" v-for="item in menuList.slice(6, menuList.length)" :key="item.id" @click="goUrl(item, 2)" >
<image mode="aspectFill" :src="item.icon" />
{{ item.title }}
<view class="menu-more"></view>
</view>
</view>
</view>
<!-- <view v-if="copyright && hasCopyright" class="copyright">{{ copyrigh.nncnL_crmeb_copyright }}</view>
<image mode="widthFix" v-if="!copyright && hasCopyright" class="support"
:src="getImgPath('/wap/first/zsff/images/crmeb_my.png')" /> -->
<!-- <template v-if="is_official_account_switch">
<view v-if="isfollow">
<view class="mask" @touchmove.prevent></view>
<view class="follow">
<view>立即绑定微信公众号用户</view>
<image mode="aspectFill" :src="codeUrl" />
<button @click.stop="skip">跳过</button>
</view>
</view>
</template> -->
<!-- <BaseLogin :login-show="loginShow" :site-name="site_name" @login-close="logComplete" /> -->
<!-- 申请讲师状态 -->
<ApplyDialog :show.sync="applyVisible" :status="applyStatus" :thetype="entry_type" :fail="failMessage" />
<view style="height: var(--tab-bar-height)"></view>
<Modification :tipIsVisable="tipIsVisable" :avatar="avatar" @changes="childClick"></Modification>
</view>
</BaseContainer>
</template>
<script>
import {
getQuestionModule,
getMenus,
getCopyrightInfo,
getUserBaseData,
saveUserInfo
} from "@/api/user";
import { VALID_LOGIN_STATUS } from "@/store/types/action-types";
import { getMerchantApplyStatus } from "@/api/merchant";
import userInfoMixin from "@/mixins/userInfo";
import { UPDATE_USER_INFO } from "@/store/types/muations-types";
import ApplyDialog from "@/components/ApplyDialog/index.vue";
import Modification from "@/components/Modification/index.vue";
import { getSupportData } from "@/api/public";
import Routine from '@/libs/routine';
import { SET_LOGIN } from "@/store/types/muations-types";
import uniFabVue from '@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue';
const app = getApp();
export default {
mixins: [userInfoMixin],
components: {
ApplyDialog,
Modification
},
data() {
return {
tipIsVisable:false,
avatar: '/static/images/avatar.png',
is_official_account_switch: false,
overdue_time: 0,
appear: true,
codeUrl: "",
isfollow: false,
site_name: "",
isyue: 0,
phone: "",
isWechat: 0,
menuList: [],
question: [],
loginShow: false,
is_store_switch: 0,
applyStatus: null,
entry_type:0,
failMessage: "",
applyVisible: false,
clickedLink: "",
hasCopyright: false,
copyright: "",
canUseGetUserProfile: false,
code: '',
userid: 0,
teacherInfo: null,
TOUTIAO_STATUS:false,
imId:''
};
},
computed: {
url() {
return this.isWechat ? "/pages/index/login" : "/pages/login/phone_check";
},
},
onShow() {
this.getUserBaseData();
this.getQuestion();
this.getMenu();
this.get_copyright();
if (uni.getUserProfile) {
this.canUseGetUserProfile = true
}
/* #ifdef MP-TOUTIAO */
this.TOUTIAO_STATUS = true;
/* #endif */
},
watch: {
isLogin() {
this.getMenu();
this.getUserBaseData();
}
},
methods: {
async childClick(e) {
console.log(e)
const result = await saveUserInfo({
nickname:e.username,
avatar:e.currentAvatar,
});
this.tipIsVisable = false;
this.$store.dispatch("app/" + VALID_LOGIN_STATUS);
},
async getUserBaseData() {
try {
const { data } = await getUserBaseData();
const {
userInfo,
site_name,
store_switch: is_store_switch,
isyue,
phone,
isWechat,
is_official_account_switch,
overdue_time,
d_im
} = data;
Object.assign(this, {
site_name,
is_store_switch,
isyue,
phone,
isWechat,
is_official_account_switch,
overdue_time,
imId:d_im
});
if (this.isLogin && userInfo) {
this.$store.commit("app/" + UPDATE_USER_INFO, userInfo);
}
} catch (error) { }
},
async getMenu() {
try {
const { data } = await getMenus();
this.menuList = data.menuList;
this.teacherInfo = data.teacherInfo
} catch (err) { }
},
skip: function () {
this.isfollow = false;
this.appear = true;
setTimeout(function () {
window.location.reload();
}, 800);
},
logComplete: function (data) {
var that = this;
that.loginShow = false;
},
/**
* 获取个人用户信息
*/
getUserInfo: function () {
let that = this;
getUserInfo().then(res => {
uni.hideLoading();
that.userInfo = res.data;
that.$store.commit('app/UPDATE_USERINFO', res.data);
that.$util.showMsg('登录成功');
});
},
goProfilePage() {
this.$util.checkLogin(() => {
uni.navigateTo({
url: "/pages/my/user_info",
});
}, this.showLoginPage);
},
showLoginPage() {
let that=this
/* #ifdef MP-TOUTIAO */
uni.getUserProfile({
success:function(res){
that.$util.getDYUserProfile(this,res)
}
})
/* #endif */
/* #ifndef MP-TOUTIAO */
this.$util.jumpLogin(this)
/* #endif */
},
goUrl(item, type) {
console.log(type)
if (this.isLogin) {
if (type === 1) {
uni.navigateTo({ url: item });
} else if (item.type === 12) {
uni.navigateTo({
url: "/pages/customer/dashboard"
});
} else if (type === 2) {
// 讲师申请
console.log(item.link)
if (item.link.indexOf("entrytype/index") !== -1) {
this.is_apply(item.link);
return false;
}
// 讲师中心
if (item.link.indexOf("merchant/teacher_detail") !== -1) {
this.is_teacher(item.link);
return false;
}
// 咨询客服
if (item.link.indexOf("service/service_list") !== -1) {
this.$util.goSupport();
return false;
}
uni.navigateTo({ url: item.link });
}
} else {
this.$util.jumpLogin(this)
}
},
memberUrl() {
this.$util.checkLogin(
() => {
uni.navigateTo({
url: "/pages/special/member_recharge",
});
},
() => {
this.$util.showMsg("请登录后再进行访问!");
}
);
},
//所有插件回调处理事件
changeVal: function (opt) {
if (typeof opt != "object") opt = {};
var action = opt.action || "";
var value = opt.value || "";
this[action] && this[action](value);
},
enter: function () {
this.appear = false;
},
change: function (title) {
this.appear = title;
},
// 练习考试模块
async getQuestion() {
try {
const { data } = await getQuestionModule();
this.question = data;
} catch (err) { }
},
//讲师状态
is_teacher(link) {
switch (this.teacherInfo.status) {
case 0:
this.$util.showMsg("讲师已锁定")
break;
case 1:
uni.navigateTo({
url:this.teacherInfo.the_type_status == 0 ? `${link}?id=${this.teacherInfo.lecturer_id}` : `/pages/merchant/institution_detail?id=${this.teacherInfo.lecturer_id}`,
});
break;
}
},
// 申请状态
is_apply(link) {
getMerchantApplyStatus().then(({ data }) => {
if (data) {
this.applyStatus = data.status;
}
if (!data || data.status === null || data.status === 2 || data.status == undefined) {
uni.navigateTo({
url: link,
});
} else {
this.applyVisible = true;
this.entry_type = data.entry_type
console.log(this.entry_type)
if (data.status === -1) {
this.failMessage = data.fail_message;
}
}
});
},
goApply() {
uni.navigateTo({
url: this.clickedLink,
});
},
// 版权信息
async get_copyright() {
try {
const { data } = await getCopyrightInfo();
this.hasCopyright = true;
this.copyright = data;
} catch (err) {
this.hasCopyright = true;
}
},
},
};
</script>
<style>
page {
/* background-image: linear-gradient(#ffffff, #f5f5f5); */
background: #F7F8F9;
}
</style>
<style lang="scss" scoped>
.copyright {
margin: 20rpx;
overflow: hidden;
word-break: keep-all;
text-align: center;
font-size: 28rpx;
color: #bbbbbb;
}
a[href^="tel"] {
color: #2c8eff;
}
/* 个人中心 */
.user-page {
.bg {
position: absolute;
top: 0;
left: 0;
width: 750rpx;
height: 522rpx;
z-index: 0;
}
}
.user-page .user-section {
position: relative;
display: flex;
align-items: center;
padding: calc(80rpx + var(--safe-top)) 30rpx 36rpx 40rpx;
/* #ifdef MP-WEIXIN */
padding: calc(110rpx + var(--safe-top)) 30rpx 36rpx 40rpx;
/* #endif */
}
.user-page .notice {
position: absolute;
right: 45rpx;
top: 60rpx;
/* #ifdef MP-WEIXIN */
top: calc(90rpx + var(--safe-top));
/* #endif */
image {
width: 44rpx;
height: 44rpx;
}
.notice-num {
position: absolute;
width: 22rpx;
height: 22rpx;
top: -3rpx;
right: -1rpx;
color: #fff;
font-size: 18rpx;
font-weight: bold;
background: #FE4944;
border-radius: 50%;
line-height: 22rpx;
text-align: center;
}
}
.user-page .user-section .img {
width: 120rpx;
height: 120rpx;
border: 4rpx solid #ebebeb;
border-radius: 50%;
object-fit: cover;
}
.user-page .user-section .text-wrap {
flex: 1;
min-width: 0;
margin-right: 20rpx;
margin-left: 20rpx;
}
.user-page .user-section .name {
font-size: 36rpx;
line-height: 50rpx;
color: #282828;
}
.user-page .user-section .info {
display: inline-block;
height: 50rpx;
padding-right: 14rpx;
padding-left: 14rpx;
border-radius: 25rpx;
margin-top: 15rpx;
line-height: 50rpx;
color: #666666;
font-size: 24rpx;
&.info-vip {
background-color: rgba(247, 247, 247, 0.5);
color: #56AEF9;
>image {
width: 48rpx;
height: 39rpx;
margin-right: 6rpx;
}
}
}
.user-page .user-section .icon {
width: 23rpx;
height: 16rpx;
vertical-align: middle;
}
.user-page .user-section .time {
margin-left: 6rpx;
vertical-align: middle;
font-size: 20rpx;
color: #9f620e;
}
.user-page .user-section .iconxiangyou {
font-size: 28rpx;
color: #999999;
}
.user-page .member-section {
width: 686rpx;
height: 124rpx;
background: linear-gradient(270deg, #151312 0%, #1F2121 100%);
border-radius: 24rpx 24rpx 0 0;
display: flex;
align-items: center;
padding: 0 28rpx 0 30rpx;
margin: 20rpx 30rpx 0;
margin-top: -20rpx;
height: 112rpx;
position: relative;
z-index: 10;
}
.user-page .member-section>view {
position: relative;
>text {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 5rpx;
font-size: 22rpx;
line-height: 10rpx;
overflow: hidden;
color: #874f02;
}
}
.user-page .member-section image {
display: block;
width: 48rpx;
height: 39rpx;
pointer-events: none;
-webkit-touch-callout: none;
}
.user-page .member-section view:nth-child(2) {
flex: 1;
margin-left: 30rpx;
font-weight: bold;
font-size: 30rpx;
color: #e3e5d3;
background: linear-gradient(0deg, #f3cfa3 20%, #fae7cf 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.user-page .member-section button {
width: 160rpx;
height: 60rpx;
// padding-right: 32rpx;
// padding-left: 32rpx;
border-radius: 30rpx;
background: linear-gradient(90deg, #F3cfa3, #fae7cf);
font-family: inherit;
font-weight: 400;
font-size: 24rpx;
color: #212f45;
}
.member_text{
font-weight: 600;
font-size: 32rpx;
color: #F5D294;
}
.member_title{
font-size: 24rpx;
font-weight: 400;
color: #F5D294;
}
.func-box {
background: #f6f6f6;
padding-top: 40rpx;
border-radius: 46rpx 46rpx 0 0;
position: relative;
z-index: 10;
}
.user-page .tool-section {
display: flex;
border-radius: 16rpx;
// margin: 20rpx;
background-color: #ffffff;
}
.user-page .tool-section view {
flex: 1;
padding-top: 33rpx;
padding-bottom: 30rpx;
font-size: 24rpx;
text-align: center;
color: #282828;
}
.user-page .tool-section image {
display: block;
height: 78rpx;
margin: 0 auto;
pointer-events: none;
-webkit-touch-callout: none;
}
.user-page .question{
width: 686rpx;
margin: auto;
}
.user-page .question-section {
display: flex;
margin-top: 24rpx;
}
.user-page .question-section .question-item {
// min-width: 0;
width: 332rpx;
height: 147rpx;
position: relative;
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
}
.user-page .question-section .question-item~.question-item {
margin-left: 22rpx;
}
.user-page .question-section .question-item:first-child {
border-radius: 24rpx;
color: #364f97;
}
.user-page .question-section .question-item:last-child {
border-radius: 24rpx;
color: #9c573c;
}
.user-page .question-section image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
-webkit-touch-callout: none;
}
.user-page .question-section .question-item>view {
position: absolute;
top: 50%;
left: 33rpx;
transform: translateY(-50%);
}
.user-page .question-section .question-item>view>view:last-child {
font-size: 24rpx;
line-height: 24rpx;
margin-top: 18rpx;
opacity: 0.55;
font-weight: normal;
}
.user-page .serve-section {
width: 690rpx;
margin: 0 auto;
}
.user-page .serve-section .section-bd {
padding-left: 30rpx;
font-weight: bold;
font-size: 30rpx;
color: #282828;
background-color: #ffffff;
border-radius: 10rpx;
margin-top: 20rpx;
}
.user-page .serve-section .section-link {
display: flex;
align-items: center;
font-size: 24rpx;
color: #333;
height: 103rpx;
border-bottom: 1px solid #eeeff7;
padding-right: 30rpx;
}
.user-page .serve-section .section-link .menu-more {
width: 14rpx;
height: 14rpx;
border-width: 2px 2px 0 0;
border-color: #ccc;
border-style: solid;
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
vertical-align: top;
margin-left: auto;
}
.section-link::after{
border:none;
}
.user-page .serve-section image {
display: block;
width: 44rpx;
height: 44rpx;
margin-right: 22rpx;
}
.user-page .support {
display: block;
width: calc(100% / 3);
margin: 30rpx auto;
}
.user-page .follow {
position: fixed;
top: 50%;
left: 50%;
z-index: 56;
width: 100%;
transform: translate(-50%, -50%);
text-align: center;
}
.user-page .follow view {
font-weight: 600;
font-size: 50rpx;
color: #ffffff;
}
.user-page .follow image {
display: block;
width: 500rpx;
height: 500rpx;
margin: 100rpx auto;
}
.user-page .follow button {
width: 150rpx;
height: 60rpx;
border-radius: 30rpx;
background-color: #509efb;
font-family: inherit;
font-weight: normal;
font-size: 28rpx;
color: #ffffff;
}
.header{
/* #ifdef MP-WEIXIN || APP-PLUS */
height: 376rpx;
/* #endif */
/* #ifdef H5 */
height: 286rpx;
/* #endif */
position: relative;
z-index: 10;
// background: linear-gradient(180deg, #86ccf0 0%, #F7F8F9 100%);
}
.tool-section{
width: 686rpx;
height: 188rpx;
background: #FFFFFF;
border-radius: 24rpx;
padding-top: 20rpx;
margin: auto;
span{
color:#7A808A;
}
}
</style>