<template>
|
<div class="mine-index">
|
<div class="mine-header">
|
<!--不要动这个东西-->
|
<img class="corner" src="../../assets/img/tag-bg.png">
|
<!--这个是头像-->
|
<img src="../../assets/img/person.png" alt="" class="head-portrait">
|
<!--这个是登录信息-->
|
<div class="login-info">
|
<p @click="handleJumpLogin">{{phoneNum}}</p>
|
<div class="status" v-if="certification"><p>未实名</p></div>
|
</div>
|
</div>
|
<div class="mine-person-info">
|
<div @click="pushToPage('f-auth')">
|
<i class="iconfont icon-my-identification-fill"></i>
|
<p>实名认证</p>
|
</div>
|
<div @click="pushToPage('f-apply-record')">
|
<i class="iconfont icon-my-application-recor"></i>
|
<p>申请记录</p>
|
</div>
|
</div>
|
<div class="person-func">
|
<div @click="pushToPage('f-message-center')">
|
<i class="iconfont icon-notice"></i>
|
<p>消息中心</p>
|
</div>
|
<div @click="pushToPage('f-help-center')">
|
<i class="iconfont icon-question"></i>
|
<p>帮助中心</p>
|
</div>
|
<div @click="pushToPage('f-feedback')">
|
<i class="iconfont icon-feedback"></i>
|
<p>意见反馈</p>
|
</div>
|
<div @click="openLocalQQ">
|
<i class="iconfont icon-qq"></i>
|
<p>加入QQ群</p>
|
</div>
|
<div @click="openLocalWX">
|
<i class="iconfont icon-wechat"></i>
|
<p>微信公众号</p>
|
</div>
|
<div @click="showModal=true;" v-show="showShare">
|
<i class="iconfont icon-share"></i>
|
<p>分享给好友</p>
|
</div>
|
<div @click="pushToPage('f-setting')" v-show="showSetting">
|
<i class="iconfont icon-settings"></i>
|
<p>设置</p>
|
</div>
|
</div>
|
<!--wechat弹窗-->
|
<div class="wechath" v-if="isApp==0">
|
<alert v-model="showUpdata" hide-on-blur>
|
<x-button mini type="primary" id='weChat' :data-clipboard-text="wechatName" class="f-button-alert"
|
@click.native="copyWeChatName">复制名称
|
</x-button>
|
<div class="wechatimg">
|
<img :src="wechatqrcode">
|
</div>
|
<div class="close-icon" @click="showUpdata=false">
|
<span></span>
|
<i class="iconfont icon-roundclose"></i>
|
</div>
|
</alert>
|
</div>
|
<!--APP下的wechat弹窗-->
|
<div class="wechatapp" v-if="isApp==1">
|
<alert v-model="showUpdata" hide-on-blur>
|
<x-button mini type="primary" id='weChat' :data-clipboard-text="wechatName" class="f-button-alert"
|
@click.native="copyWeChatName">复制名称
|
</x-button>
|
<div class="close-icon" @click="showUpdata=false">
|
<span></span>
|
<i class="iconfont icon-roundclose"></i>
|
</div>
|
</alert>
|
</div>
|
<!--QQchat弹窗-->
|
<div class="QQchat">
|
<alert v-model="showAddqq" hide-on-blur>
|
<div class="qqcode">
|
<p>QQ群</p>
|
<p>{{qqNumber}}</p>
|
</div>
|
<x-button mini type="primary" id="qqNumber" :data-clipboard-text="qqNumber" class="f-button-alert"
|
@click.native="copyQQNum">复制群号
|
</x-button>
|
<div class="close-icon" @click="showAddqq=false">
|
<span></span>
|
<i class="iconfont icon-roundclose"></i>
|
</div>
|
</alert>
|
</div>
|
<!--footer-->
|
<FFooter :index="3"></FFooter>
|
<!--分享弹窗-->
|
<div class="shareModal" v-show="showModal" @click="showModal=false;">
|
<img v-if="shareType=='IOS'" src="../../assets/img/shareIOS.png">
|
<img v-if="shareType=='Android'" src="../../assets/img/shareAndroid.png">
|
</div>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by 吴彦祖 on 2018/3/22.
|
* 我的--首页
|
*/
|
import FFooter from '../../components/common/FFooter.vue';
|
import jsBridge from '../../tool/jsBridge';
|
import {Alert, XButton} from 'vux';
|
import validator from '../../tool/validator';
|
import sysApi from '../../api/api';
|
import statusCodeManager from '../../api/statusCodeManage';
|
|
export default {
|
name: 'f-mine',
|
data() {
|
return {
|
shareType: 'Android',
|
phoneNum: '点击登录/注册',
|
certification: false,//true就是没有实名，显示未实名标签
|
showUpdata: false,
|
showAddqq: false,
|
showModal: false,
|
showShare: true,
|
showSetting: true,
|
qqNumber: '888888888',
|
wechatName: '纷领钱包',
|
wechatqrcode: '',
|
isApp: null
|
}
|
},
|
components: {
|
FFooter,
|
Alert,
|
XButton
|
},
|
methods: {
|
copyWeChatName() {
|
let _this = this;
|
let clipboard = new ClipboardJS('#weChat');
|
clipboard.on('success', function (e) {
|
jsBridge.openWX();
|
_this.$vux.toast.text('已复制', 'middle');
|
e.clearSelection();
|
// 关闭模态窗
|
_this.showUpdata = false;
|
});
|
clipboard.on('error', function (e) {
|
e.clearSelection();
|
_this.showUpdata = false;
|
});
|
},
|
copyQQNum() {
|
let _this = this;
|
let clipboard = new ClipboardJS('#qqNumber');
|
// console.log(clipboard);
|
clipboard.on('success', function (e) {
|
jsBridge.openQQ();
|
_this.$vux.toast.text('已复制', 'middle');
|
e.clearSelection();
|
// 关闭模态窗
|
_this.showAddqq = false;
|
});
|
clipboard.on('error', function (e) {
|
e.clearSelection();
|
_this.showAddqq = false;
|
});
|
},
|
pushToPage(to) {
|
// 申请记录 意见反馈 实名认证
|
if (to === 'f-apply-record' || to === 'f-feedback' || to === 'f-auth') {
|
let _sessionId = window.sessionStorage.getItem('newSid');
|
// 如果处理未登录时
|
if (validator.checkValEmpty(_sessionId)) {
|
this.$router.push({path: '/f-login'});
|
return false;
|
}
|
}
|
this.$router.push({name: to, query: {tshare: 'i123'}});
|
},
|
openLocalQQ() {
|
this.showAddqq = true;
|
},
|
openLocalWX() {
|
this.showUpdata = true;
|
},
|
handleJumpLogin() {
|
//如果没有登陆则跳转到登陆界面
|
let sid = window.sessionStorage.getItem('newSid');
|
if (!sid) {
|
this.$router.push({name: 'f-login'});
|
}
|
}
|
},
|
deactivated() {
|
this.showModal = false;
|
this.showAddqq = false;
|
this.showUpdata = false;
|
},
|
activated() {
|
// window.location.reload();
|
//获取QQ号等基础配置信息
|
sysApi.fetchQuestionAndTypeList().then(
|
res => {
|
let baseInfo = res;
|
this.qqNumber = baseInfo.qq;
|
this.wechatqrcode = baseInfo.wechatqrcode;
|
},
|
err => {
|
statusCodeManager.showTipOfStatusCode(err, this);
|
}
|
);
|
//判断是否显示分享按钮
|
let clientInfo = JSON.parse(window.localStorage.getItem('newClientInfo'));
|
let sid = window.sessionStorage.getItem('newSid');
|
if (clientInfo.cn) {
|
this.showShare = true;
|
} else {
|
this.showShare = false;
|
}
|
if (clientInfo.ostype == 'IOS') {
|
this.shareType = 'IOS';
|
} else if (clientInfo.ostype == 'Android') {
|
this.shareType = 'Android';
|
}
|
//判断是否为H5，如果是则判断是否登录，没有登录就隐藏设置按钮
|
if (clientInfo.isApp === '0') {
|
this.isApp = 0;
|
if (!sid) {
|
this.showSetting = false;
|
} else {
|
this.showSetting = true;
|
}
|
} else {
|
this.isApp = 1;
|
}
|
//判断是否登陆
|
if (!sid) {
|
this.phoneNum = '点击登录/注册';
|
this.certification = false;
|
} else {
|
let phoneNum = window.sessionStorage.getItem('newPhoneNum');
|
if (phoneNum) {
|
this.phoneNum = `${phoneNum.substr(0, 3)}****${phoneNum.substr(7)}`;
|
}
|
let isClient = window.sessionStorage.getItem('newClientState');
|
if (parseInt(isClient)) {
|
this.certification = false;
|
} else {
|
this.certification = true;
|
}
|
}
|
},
|
beforeRouteEnter(to, from, next) { // 这里通过导航者守卫，来处理页面跳转记录
|
window.sessionStorage.setItem('newGoBackPage', to.path);
|
next();
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@import "../../style/mixin.less";
|
|
.mine-index {
|
background-color: @color-background-default;
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-title {
|
font-size: 20PX;
|
}
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
.vux-header-right {
|
color: @color-white !important;
|
}
|
}
|
.mine-header {
|
height: 110px;
|
position: relative;
|
box-sizing: border-box;
|
text-align: center;
|
.color-linear-gradient(@color-primary-light, @color-primary);
|
.corner {
|
position: absolute;
|
width: 94px;
|
height: 11px;
|
left: 50%;
|
bottom: -1px;
|
margin-left: -47px;
|
}
|
.head-portrait {
|
position: absolute;
|
left: 50%;
|
top: 65px;
|
margin-left: -32px;
|
width: 64px;
|
height: 64px;
|
}
|
.login-info {
|
position: absolute;
|
top: 48px;
|
left: 13px;
|
color: @color-white;
|
font-size: @font-size-base;
|
.status {
|
text-align: left;
|
p {
|
&:last-child {
|
width: 50%;
|
height: 15px;
|
line-height: 15px;
|
text-align: center;
|
padding: 0 .5px;
|
color: @color-text-placeholder-yellow;
|
border: 1px solid @color-text-placeholder-yellow;
|
font-size: @font-size-tiny;
|
}
|
|
}
|
}
|
}
|
}
|
.mine-person-info {
|
height: 90px;
|
box-sizing: border-box;
|
padding-bottom: 11px;
|
.flexLayout(center, flex-end, row);
|
background-color: @color-white;
|
div {
|
text-align: center;
|
font-size: @font-size-medium;
|
flex: 1;
|
&:first-child {
|
position: relative;
|
&:after {
|
.setRightLine(@color-divider-regular, 44px);
|
top: 8px;
|
transform: translateY(6px);
|
}
|
i {
|
font-size: 25Px;
|
color: @color-primary;
|
}
|
}
|
&:last-child {
|
i {
|
font-size: 25Px;
|
color: @color-primary;
|
}
|
}
|
}
|
}
|
.person-func {
|
margin-top: 10px;
|
/*height:275px;*/
|
background-color: @color-white;
|
.flexLayout(flex-start, center, row);
|
flex-wrap: wrap;
|
padding-bottom: 20px;
|
div {
|
text-align: center;
|
font-size: @font-size-medium;
|
width: 33%;
|
margin-top: 20px;
|
i {
|
font-size: 25Px;
|
}
|
}
|
.icon-notice {
|
color: @color-primary;
|
}
|
.icon-question {
|
color: @color-text-placeholder-red;
|
}
|
.icon-feedback {
|
color: @color-gradient-lightBlue-right;
|
}
|
.icon-qq {
|
color: #ffaa29;
|
}
|
.icon-wechat {
|
color: @color-primary;
|
}
|
.icon-share {
|
color: @color-text-placeholder-red;
|
}
|
.icon-settings {
|
color: @color-gradient-lightBlue-right;
|
}
|
}
|
.weui-dialog {
|
width: 240px;
|
top: 40%;
|
background-size: 100% 100%;
|
border-radius: 7.5PX;
|
overflow: visible;
|
}
|
.weui-dialog__hd {
|
display: none;
|
}
|
.weui-dialog__bd {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
box-sizing: border-box;
|
.wechatimg {
|
width: 83px;
|
height: 83px;
|
position: absolute;
|
left: 50%;
|
bottom: 10px;
|
margin-left: -42px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.close-icon {
|
width: 30px;
|
height: 82px;
|
position: absolute;
|
left: 50%;
|
bottom: -82px;
|
margin-left: -16px;
|
span:after {
|
content: "";
|
border-right: 1PX solid @color-white;;
|
font-size: 20PX;
|
}
|
i {
|
display: block;
|
font-size: 25PX;
|
color: @color-white;
|
position: absolute;
|
top: 20px;
|
left: 50%;
|
margin-left: -12.5px;
|
}
|
}
|
}
|
.weui-dialog__ft {
|
display: none;
|
}
|
.f-button-alert {
|
width: 110px;
|
height: 33px;
|
font-size: 14PX;
|
background-color: @color-text-placeholder-yellow !important;
|
color: @color-primary;
|
position: absolute;
|
|
}
|
.wechatapp {
|
.weui-dialog {
|
height: 315px;
|
background-image: url("../../assets/img/appwechat.png");
|
}
|
.f-button-alert {
|
left: 50%;
|
bottom: 8px;
|
margin-left: -55px;
|
}
|
|
}
|
.wechath {
|
.weui-dialog {
|
height: 375px;
|
background-image: url("../../assets/img/wechat.png");
|
}
|
.f-button-alert {
|
left: 50%;
|
top: 205px;
|
margin-left: -55px;
|
}
|
}
|
.QQchat {
|
.weui-dialog {
|
width: 240px;
|
height: 280px;
|
background-color: transparent;
|
background-image: url("../../assets/img/qqchat.png");
|
background-size: 240px 280px;
|
border-radius: 7.5PX;
|
overflow: visible;
|
}
|
.weui-dialog__bd {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
box-sizing: border-box;
|
.close-icon {
|
width: 83px;
|
height: 83px;
|
position: absolute;
|
left: 50%;
|
bottom: -82px;
|
margin-left: -42px;
|
span:after {
|
content: "";
|
border-right: 1PX solid @color-white;;
|
font-size: 20PX;
|
}
|
i {
|
display: block;
|
font-size: 25PX;
|
color: @color-white;
|
position: absolute;
|
top: 20px;
|
left: 50%;
|
margin-left: -12.5px;
|
}
|
}
|
}
|
.f-button-alert {
|
width: 110px;
|
height: 33px;
|
font-size: 14PX;
|
background-color: @color-text-placeholder-yellow !important;
|
color: @color-primary;
|
position: absolute;
|
left: 50%;
|
top: 230px;
|
margin-left: -55px;
|
}
|
.qqcode {
|
line-height: 28px;
|
position: absolute;
|
left: 50%;
|
top: 110px;
|
transform: translate(-50%);
|
p {
|
&:first-child {
|
color: @color-white;
|
font-size: 14PX;
|
}
|
&:last-child {
|
color: @color-text-placeholder-yellow;
|
font-size: 20PX;
|
}
|
}
|
}
|
|
}
|
.shareModal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.6);
|
text-align: center;
|
z-index: 9999;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
