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;
      background: url("data:image/png;base64,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
      background-size: 100% 100%;
      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>