dvcp_v2_wechat_app/src/pages/home.vue

<template>
  <div class="page">
    <div class="header-bg">
      <div class="header-info">
        <div class="wrap" @click="handleLogin()">
          <div class="user-img-div">
            <open-data type="userAvatarUrl" lang="zh_CN" class="user-img"></open-data>
          </div>
          <div class="user-info">
            <div class="option">
              <template v-if="!user.id">
                <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>
              </template>
            </div>
          </div>
        </div>
        <input class="codeText" v-model="search" placeholder="搜索要查找的应用"/>
        <div class="appsPane flex">
          <b v-for="app in appsList" :key="app.key" @tap="handleGotoApp(app)">{{ app.name }}</b>
        </div>
      </div>
    </div>
    <ai-login ref="login" @success="getAuth()"/>
  </div>
</template>
<script>
import {mapMutations} from 'vuex'

export default {
  name: "home",
  data() {
    return {
      code: '',
      token: null,
      user: null,
      apps: [],
      search: ""
    }
  },

  computed: {
    isApprove() {
      return this.user && this.user.status == 2;
    },
    appsList() {
      let {search} = this
      return this.apps?.filter(e => !!search ? e.name.indexOf(search) > -1 : true) || []
    },
  },
  methods: {
    ...mapMutations(['getUserInfo']),
    handleLogin() {
      if (!this.token) {
        this.$refs.login.show();
      }
    },
    handleGotoApp(app) {
      uni.navigateTo({url: `/mods${app.path}`})
    },
    getApps() {
      this.apps = []
      let applications = require.context('../mods', true, /\.(\/.+)\/App[^\/]+\.vue$/)
      applications.keys().map(path => {
        if (applications(path).default) {
          let {name: key, appName: name} = applications(path).default
          this.apps.push({key, name, path: path.replace(/^\.(.+).vue$/g, '$1')})
        }
      })
    },
    getAuth() {
      this.token = uni.getStorageSync("token");
      this.user = uni.getStorageSync("userInfo");
      this.$nextTick(() => {
        this.token && this.getUserInfo()
      })
    }
  },
  onShow() {
    this.getAuth();
    this.getApps()
  },
}
</script>
<style scoped lang="scss">
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #F3F6F9;
  position: relative;

  .header-bg {
    width: 100%;
    position: relative;

    .header-info {
      width: 100vw;
      height: 100vh;
      box-sizing: border-box;
      padding: 36px;
      display: flex;
      align-items: center;
      flex-direction: column;

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

        .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;
            }
          }

          .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;
          }
        }
      }
    }
  }

  .codeText {
    font-size: 24px;
    margin-top: 16px;
    padding: 4px 0;
    width: 100%;
    text-align: center;
    background: rgba(#ccc, .3);
  }

  .appsPane {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
    padding: 0 16px;

    b {
      cursor: pointer;
      font-size: 24px;
      background: $uni-color-primary;
      color: #fff;
      padding: 8px;
      margin: 4px;
      border-radius: 8px;
      font-weight: normal;
    }
  }
}
</style>