training-wx/src/views/UserCenter.vue

<template>
  <div class="User-box flex flex-column">
    <div class="user-card flex-0">
      <div class="profile flex" v-if="divShow">
        <img class="flex-0" src="@/assets/userImag/userImag.jpg" />
        <div class="info-name flex-1">
          <div class="title">
            {{person.name}}
          </div>
          <div class="subtitle">
            {{person.phone}}
          </div>
          <div class="userInfo-button">一期架空线路工1班</div>
        </div>
      </div>

      <div v-else class="userInfo-button-zhuce" @click="seeUserInfo()">注册</div>
    </div>

    <div class="menu-list flex-1">
      <van-cell-group>
        <van-cell
          v-for="menu in menus"
          :key="menu.title"
          :icon="menu.icon"
          :title="menu.title"
          is-link
          :to="menu.path"
          title-class="menu-title"
        />
      </van-cell-group>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
// import {SetUser} from '../util/api'
export default {
  data() {
    return {
      register: require('@/assets/icon/register.svg'),
      buttonShow: true,
      menus: [
        {
          icon: require('@/assets/userImag/userInfo.png'),
          title: '我的信息',
          path: '/SetUser',
        },
        {
          icon: require('@/assets/userImag/shoucang.png'),
          title: '我的收藏',
          path: '/MyCollection',
        },
        {
          icon: require('@/assets/userImag/wenjuan.png'),
          title: '我的问卷',
          path: '',
        }
      ]
    }
  },
  computed: {
    ...mapState({
      person: s => s.user,
    }),
    divShow() {
      return false; // !!this.person?.phone
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.User-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: url('~@/assets/userImag/backImag.png');
  background-size: 100%;
  background-repeat: no-repeat;

  .user-card {
    display: flex;
    align-items: center;
    width: 100vw;
    box-sizing: border-box;
    padding: 2em;
    position: relative;
    min-height: 136px;

    .profile {
      width: 100%;
      
      > img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        position: relative;
        box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);
      }
      .info-name {
        margin-left: 1em;
        position: relative;

        > div {
          margin-top: 10px;
          color: #fff;
        }

        .title {
          font-size: 17px;
          font-weight: 700;
        }

        .subtitle {
          font-size: 16px;
          letter-spacing: 1px;
        }

        .userInfo-button {
          color: rgb(255, 255, 255);
          font-weight: 100;
          border-top-left-radius: 20px; /* 左上角 */
          border-bottom-left-radius: 20px; /* 左下角 */
          position: absolute;
          padding: 8px 10px;
          right: -3em;
          top: 1em;
          font-size: 10px;
          letter-spacing: 1px;
          background-color: #2cb698;
        }

      }

    }
    .userInfo-button-zhuce {
      width: 80px;
      letter-spacing: 4px;
      color: #fff;
      border-radius: 20px;
      line-height: 30px;
      background-color: #2cb798;
      margin: 0 auto;
      text-align: center;
    }
  }
  .menu-list {
    width: 90%;
    border-radius: 20px;
    margin: 0 auto;
    box-shadow: 0px 0 2px 2px rgba(0, 0, 0, 0.12);
    background-color: #fff;
    overflow: hidden;

    position: relative;

    .menu-title {
      margin-left: 1em;
      font-size: 18px;
    }

    .van-cell {
      padding-top: 28px;
      padding-bottom: 28px;
    }

    .van-icon {
      font-size: 20px;
      
      & > img {
        padding-top: 2px;
      }
    }
  }
}
</style>