temple-h5/src/pages/user/index.vue

<template>
  <div class="user-home" v-if="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 => {
            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>