对接接口
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="user-home" v-show="data">
|
||||
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
||||
<div class="light">
|
||||
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Forj360%2F97cc0d35ly1fwmdvbemq4j20zk0k0taz.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638084364&t=1e0d9bd2dcb2906674f8b5142889db7a" alt="">
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="user-profile">
|
||||
<img class="avatar" :src="data.avatar" alt="">
|
||||
<span class="name">{{data.nickname}}</span>
|
||||
<div class="total">
|
||||
<p>累计行善<span>{{data.total_friendly}}</span>天</p>
|
||||
<p>累计功德<span>{{data.total_merit}}</span>元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="item customer" @click="$router.push({ name: 'user-customer'})">
|
||||
<h3>客服中心</h3>
|
||||
<span>答疑问</span>
|
||||
<i class="iconfont icon-kefu"></i>
|
||||
</div>
|
||||
<div class="item certificate" @click="$router.push({ name: 'user-certificate' })">
|
||||
<h3>功德证书</h3>
|
||||
<span>积功德</span>
|
||||
<i class="iconfont icon-zhengshu"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-group">
|
||||
<p class="label">我的善缘</p>
|
||||
<div class="order-type">
|
||||
<div class="tab-order" @click="$router.push('/user/order?current=1')">
|
||||
<span class="iconfont icon-qianbao"></span>
|
||||
<p>待支付</p>
|
||||
</div>
|
||||
<div class="tab-order" @click="$router.push('/user/order?current=2')">
|
||||
<span class="iconfont icon-dingdanchulizhong"></span>
|
||||
<p>处理中</p>
|
||||
</div>
|
||||
<div class="tab-order" @click="$router.push('/user/order?current=3')">
|
||||
<span class="iconfont icon-yichuli"></span>
|
||||
<p>已处理</p>
|
||||
</div>
|
||||
<div class="tab-order" @click="$router.push('/user/order?current=4')">
|
||||
<span class="iconfont icon-quanbudingdan"></span>
|
||||
<p>全部订单</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<van-cell-group>
|
||||
<van-cell title="我的关注" is-link to="/user/focus" />
|
||||
<van-cell title="我的功课" is-link to="/user/course" />
|
||||
</van-cell-group>
|
||||
<div class="divider"></div>
|
||||
<van-cell-group>
|
||||
<van-cell title="认证法师 领取信众供奉" is-link :value="getMonkStatus(data.master_certify)" to="/user/approve"/>
|
||||
<van-cell title="寺院入驻" is-link :value="getTempleStatus(data.temple_settled)" to="/user/temple-station"/>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserData } from '@/api';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
data: null,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
getUserData().then(data => {
|
||||
console.log(data)
|
||||
this.data = data;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getTempleStatus(k){
|
||||
const m = {
|
||||
0: '未入驻',
|
||||
1: '审核中',
|
||||
2: '已入驻'
|
||||
}
|
||||
return m[k]
|
||||
},
|
||||
getMonkStatus(k){
|
||||
const m = {
|
||||
0: '未认证',
|
||||
1: '认证中',
|
||||
2: '已认证'
|
||||
}
|
||||
return m[k]
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-home{
|
||||
.light{
|
||||
margin: .4rem;
|
||||
img{
|
||||
width: 100%;
|
||||
border-radius: .13rem;
|
||||
}
|
||||
display: block;
|
||||
}
|
||||
.user-profile{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .4rem;
|
||||
.avatar{
|
||||
width: 1.33rem;
|
||||
height: 1.33rem;
|
||||
border-radius: 1.33rem;
|
||||
vertical-align: top;
|
||||
|
||||
}
|
||||
.name{
|
||||
padding: 0 .3rem;
|
||||
display: inline-block;
|
||||
font-size: .37rem;
|
||||
}
|
||||
.total{
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
p{
|
||||
margin-bottom: .2rem;
|
||||
font-size: .37rem;
|
||||
color: #333;
|
||||
}
|
||||
span{
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
padding: 0 .2rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.group{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 .4rem;
|
||||
margin-top: .27rem;
|
||||
.item{
|
||||
width: 3.7rem;
|
||||
color: white;
|
||||
padding: .27rem;
|
||||
font-size: .37rem;
|
||||
border-radius: .13rem;
|
||||
position: relative;
|
||||
h3{
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
span{
|
||||
opacity: 0.4;
|
||||
font-size: .53rem;
|
||||
}
|
||||
.iconfont{
|
||||
font-size: 1.33rem;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
right: .4rem;
|
||||
top: .27rem;
|
||||
}
|
||||
}
|
||||
.customer{
|
||||
background: rgb(243, 120, 63);
|
||||
}
|
||||
.certificate{
|
||||
background: rgb(224, 114, 114)
|
||||
}
|
||||
}
|
||||
.my-group{
|
||||
padding: .4rem;
|
||||
margin-top: .4rem;
|
||||
.label{
|
||||
font-size: .37rem;
|
||||
}
|
||||
.order-type{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: .4rem;
|
||||
.tab-order{
|
||||
text-align: center;
|
||||
font-size: .37rem;
|
||||
color: #555;
|
||||
.iconfont{
|
||||
font-size: .67rem;
|
||||
color: #555;
|
||||
}
|
||||
p{
|
||||
margin-top: .13rem;
|
||||
font-size: .35rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user