dvcp_v2_wechat_app/src/project/qujing/AppMine/AppMine.vue

<template>
  <div class="page">
    <div class="header-bg">
      <div class="header-info">
        <div class="wrap" @click="handleLogin()">
          <div class="user-img-div">
            <img :src="user.avatarUrl" alt="" class="user-img" v-if="user.id && user.avatarUrl"/>
            <open-data type="userAvatarUrl" lang="zh_CN" class="user-img" v-else/>
          </div>
          <div class="user-info">
            <div class="option">
              <template v-if="!token">
                <p>登录</p>
                <p>点击进行登录</p>
              </template>
              <template v-else>
                <p v-if="isApprove">{{ user.realName }}</p>
                <p v-else>{{ user.nickName }}</p>
                <!-- <p>{{ user.areaName || "" }}</p> -->
                <p>共累计学习<span>{{studyDuration || 0}}</span>分钟</p>
              </template>
            </div>
            <p class="info" @click.stop="$linkTo('./userInfo')" v-if="token">个人信息</p>
          </div>
        </div>
      </div>
    </div>
    <div class="list-wrap">
      <div class="card" v-for="(group,index) in listGroup" :key="index">
        <div class="item" v-for="(item) in group" hover-class="bg-hover" :key="item.label"
             @click="linkTo(item.path, item.type)">
          <div class="block">
            <img class="icon" :src="item.icon" alt="">
          </div>
          <span class="desc">{{ item.label }}</span>
        </div>
      </div>
    </div>
    <AiLogin ref="login" @success="getAuth()"/>
  </div>
</template>
<script>
import {mapState, mapActions} from "vuex";

export default {
  name: "AppPcMine",
  appName: "我的",
  customNavigation: true,
  data() {
    return {
      user: {},
      studyDuration: ''
    }
  },
  computed: {
    ...mapState(['token']),
    isApprove() {
      return this.user?.areaId ? true : false
    },
    listGroup() {
      return [
        [
          {
            icon: 'https://cdn.cunwuyun.cn/qujing/jfmx.png',
            label: "积分明细",
            path: "./integralInfo",
            type: 'token'
          },
        ],
        [
          {
            icon: 'https://cdn.cunwuyun.cn/qujing/xxjl.png',
            label: "学习记录",
            path: "./studyList",
            type: 'token'
          },
          {
            icon: 'https://cdn.cunwuyun.cn/qujing/ksjl.png',
            label: "考试记录",
            path: "./testList",
            type: 'token'
          },
          {
            icon: 'https://cdn.cunwuyun.cn/qujing/wdzs.png',
            label: "我的证书",
            path: "./myCertificate",
            type: 'token'
          }
        ],
      ]
    }
  },
  methods: {
    ...mapActions(['getUserInfo']),
    getUserInfo() {
      this.$instance.post(`/app/appwechatuserqujing/check`).then(res=> {
        if(res?.data) {
          this.user = res.data
        }
      })
    },
    getStudyDuration() {
      this.$instance.post(`/app/appwechatuserqujing/queryStudyDuration`).then(res=> {
        if(res?.data) {
          this.studyDuration = res.data.studyDuration
        }
      })
    },
    approve() {
      if (!this.token) {
        this.$refs.login.show();
      } else if (!this.isApprove) {
        if (this.user.status == 0) {
          this.$linkTo('/mods/AppPartyAuth/AppPartyAuth');
        } else {
          this.$linkTo('/mods/AppPartyAuth/partyAuthSuccess')
        }
      }
    },
    linkTo(url, type) {
      if (type) {
        if (this.token) {
          if (type == 'token') {
            this.$linkTo(url)
          }
          if (type == 'idNumber') {
            if (this.user.status == 0) {
              if (!this.user.phone) {
                this.$linkTo('/pages/phone/bingPhoneNumber?from=auth')
              } else {
                this.$linkTo('/mods/AppAuth/AppAuth')
              }
            } else {
              this.$linkTo(url)
            }
          }
        } else {
          this.$refs.login.show()
        }
      } else {
        this.$linkTo(url)
      }
    },
    handleLogin() {
      if (!this.token) {
        this.$refs.login.show();
      }
    },
    getAuth() {
      this.$nextTick(() => {
        this.token && this.getUserInfo()
      })
    }
  },
  onShow() {
    this.getAuth()
    this.getUserInfo()
    this.getStudyDuration()
  },
  onShareAppMessage() {
    return {
      title: `欢迎使用法制曲靖~`,
      path: `/pages/AppHome/AppHome`
    }
  },
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";

.page {
  width: 100%;
  min-height: 100%;
  background-color:#F4F5FA;;
  position: relative;

  .header-bg {
    width: 100%;
    height: 512px;

    .header-info {
      width: 100%;
      height: 100%;
      background: url("https://cdn.cunwuyun.cn/qujing/header-banner.png") no-repeat no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 240px 32px 0 48px;

      .wrap {
        width: 100%;
        height: 96px;
        display: flex;
        align-items: center;

        .user-img-div {
          display: inline-block;
          width: 96px;
          height: 96px;
          border-radius: 50%;
          overflow: hidden;
          border: 4px solid #FFFFFF;
          flex-shrink: 0;

          .user-img {
            display: inline-block;
            width: 96px;
            height: 96px;
            border-radius: 58px;
          }
        }

        .user-info {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 26px;
          box-sizing: border-box;
          padding-right: 32px;

          .option {
            & > p:first-child {
              font-size: 34px;
              font-weight: 600;
              color: #333333;
              line-height: 54px;
            }

            & > p:last-child {
              font-size: 26px;
              font-weight: 400;
              color: #7088A0;
              line-height: 36px;
              span {
                color: #2D7DFF;
              }
            }
          }

          .info {
            width: 136px;
            height: 48px;
            border-radius: 8px;
            border: 2px solid #7088A0;
            font-size: 26px;
            font-weight: 400;
            color: #7088A0;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }

  .approve {
    position: absolute;
    left: 50%;
    top: 400px;
    transform: translateX(-50%);
    width: 686px;
    height: 112px;
    background: linear-gradient(90deg, #8FB4FF 0%, #4181FF 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;

    .icon {
      width: 296px;
      height: 52px;
    }

    .cert {
      font-family: PingFangSC-Regular, PingFang SC;
      font-size: 28px;
      color: #E7F2FF;
      margin-right: 4px;
    }
  }

  .list-wrap {
    box-sizing: border-box;
    padding: 32px;
    margin-top: -130px;

    .card {
      width: 100%;
      min-height: 100px;
      border-radius: 16px;
      background-color: #fff;
      margin-bottom: 32px;

      .item {
        height: 100px;
        display: flex;
        align-items: center;

        &:last-child {
          .desc {
            border-bottom: none !important;
          }
        }

        .block {
          width: 80px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;

          .icon {
            width: 44px;
            height: 44px;
          }
        }

        .desc, & > button {
          height: 100%;
          flex: 1;
          font-size: 30px;
          font-weight: 400;
          color: #666666;
          display: flex;
          align-items: center;

          & > span {
            width: 100%;
            height: 100%;
            text-align: left;
            display: flex;
            align-items: center;
          }

          &::after {
            border: none;
          }
        }

        .no-border {
          border-bottom: none;
        }
      }

      &:first-of-type {
        margin-bottom: 32px;
      }
    }
  }

  .point-card {
    padding: 0 32px!important;
    .card {
      margin-bottom: 0!important;
    }
  }

}
</style>