<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-21 16:03:42
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-08-03 17:47:21
|
* @Description:
|
-->
|
<template>
|
<div class="personal-center-page">
|
<div class="top-box">
|
<div class="top-img-box">
|
<img src="../../../static/img/touxiang.png" alt="头像" />
|
</div>
|
<div class="top-info-box">
|
<!-- <p>{{mation.nickname}}</p> -->
|
<p>{{userinfo.mblNo}}</p>
|
</div>
|
<div :class="{'fn-box':true,'fn_box1':!userinfo.hasBankCard,'fn_box':userinfo.hasBankCard}">
|
<div @click="goMyOrder">
|
<img src="../../../static/img/order.png" alt />
|
<p :style="{color:overStatus>0?'red':'#000'}">我的订单</p>
|
</div>
|
<div @click="goMybankCard" v-if='userinfo.hasBankCard'>
|
<img src="../../../static/img/bankCard.png" alt />
|
<p>我的银行卡</p>
|
</div>
|
<div @click="logout">
|
<img src="../../../static/img/logout.png" alt/>
|
<p @click="logout">退出登录</p>
|
</div>
|
</div>
|
</div>
|
<van-dialog className="dio-box" confirmButtonColor="#333" cancelButtonColor="#666666" @confirm="onConfirm" v-model="show" show-cancel-button>
|
<div class="box">
|
<p>确定退出登录吗？</p>
|
</div>
|
</van-dialog>
|
</div>
|
</template>
|
<script>
|
import Vue from 'vue';
|
import { Dialog } from 'vant';
|
import { mapState } from 'vuex';
|
|
|
Vue.use(Dialog);
|
export default {
|
data() {
|
return {
|
show:false,
|
overStatus:0
|
};
|
},
|
computed:{
|
...mapState(['userinfo']),
|
mation(){
|
if(localStorage.axx_ins_client_userMation){
|
return JSON.parse(localStorage.axx_ins_client_userMation)
|
}
|
}
|
},
|
created(){
|
this.getBaseInfo()
|
},
|
methods: {
|
goMyOrder() {
|
this.$router.push("/order/my-order");
|
},
|
logout(){
|
this.show = true
|
},
|
goMybankCard(){
|
this.$router.push('/bankCard/index')
|
},
|
onConfirm(){
|
this.$api.logout().then(res=>{
|
//清除openId session等存储，跳转登录页面
|
localStorage.clear()
|
sessionStorage.clear()
|
this.$router.push('/')
|
})
|
},
|
getBaseInfo(){
|
this.$api.baseInfo().then(({body})=>{
|
this.overStatus = body.overStatus;
|
})
|
}
|
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.personal-center-page {
|
& {
|
height: 100vh;
|
background: #fff;
|
}
|
.top-box {
|
width: 100vw;
|
height: 205px;
|
background-image: url("../../../static/img/bgwd.png");
|
background-size: cover;
|
text-align: center;
|
box-sizing: border-box;
|
padding-top: 26px;
|
position: relative;
|
.top-img-box {
|
display: inline-block;
|
width: 75px;
|
height: 75px;
|
margin-bottom: 16px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
}
|
}
|
.top-info-box {
|
p:nth-of-type(1) {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: rgba(255, 255, 255, 1);
|
margin-bottom: 10px;
|
}
|
p:nth-of-type(2) {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(255, 255, 255, 1);
|
}
|
}
|
.fn-box {
|
& {
|
width: 343px;
|
height: 90px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 10px 0px rgba(26, 94, 216, 0.12);
|
border-radius: 8px;
|
position: absolute;
|
left: 50%;
|
top: 173px;
|
transform: translateX(-50%);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
div {
|
padding-top: 21px;
|
img {
|
width: 22px;
|
height: 22px;
|
margin-bottom: 7px;
|
}
|
p {
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(0, 0, 0, 1);
|
}
|
}
|
}
|
}
|
.fn_box{
|
div {
|
width: 30%;
|
}
|
}
|
.fn_box1{
|
div {
|
width: 50%;
|
}
|
}
|
.dio-box{
|
width:280px;
|
//height:150px;
|
background:rgba(255,255,255,1);
|
border-radius:5px;
|
.box{
|
line-height: 80px;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
