dvcp_v2_wechat_app/src/pages/home.vue

<template>
  <div class="home">
    <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>
    </div>
    <div class="appsPane">
      <div v-for="app in appsList" :key="app.id" @tap="handleGotoApp(app)" class="appItem flex">
        <b v-text="app.label"/>
        <u-tag v-if="app.project" :text="app.project" mode="dark" shape="circle" size="mini"/>
        <div class="appName fill" v-text="app.name"/>
      </div>
    </div>
  </div>
</template>
<script>
import {mapActions, mapState} from 'vuex'
import config from "../config.json";

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

  computed: {
    ...mapState(['user', 'token']),
    isApprove() {
      return this.user?.status == 2;
    },
    appsList() {
      let {search} = this
      return this.apps?.filter(e => !!search ? e.label?.indexOf(search) > -1 : true) || []
    },
  },
  methods: {
    ...mapActions(['getUserInfo', 'autoLogin']),
    handleLogin() {
      if (!this.token) {
        this.autoLogin();
      } else this.$u.toast("已登录,无需重新登录!")
    },
    handleGotoApp(app) {
      uni.navigateTo({url: `${app.path}`})
    },
    getApps() {
      this.apps = config.apps
      this.$instance.post("/node/wechatapps/list", null, {
        baseURL: "http://192.168.1.87:12525/", params: {size: 999, type: 'mp'}, withoutToken: true
      }).then(res => {
        if (res?.data) {
          this.apps = res.data.records.map(e => {
            if (/\/project\//.test(e.libPath)) {
              e.project = e.libPath.replace(/.*project\/([^\/]+)\/.+/, '$1')
            }
            return {...e, path: e.libPath}
          })
        }
      })
    },
  },
  onShow() {
    if (this.token) {
      this.getUserInfo();
    } else {
      this.autoLogin().then(() => this.getUserInfo())
    }
    this.getApps()
  },
}
</script>
<style scoped lang="scss">
.home {
  width: 100vw;
  min-height: 100vh;
  background-color: #F3F6F9;
  position: relative;

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

    .header-info {
      width: 100vw;
      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 {
    padding: 0 36px;
    width: 100%;
    box-sizing: border-box;

    .appItem {
      width: 100%;
      font-size: 28px;
      padding: 0 16px;
      height: 64px;

      &:nth-of-type(2n) {
        background: rgba(#26f, .05);
      }

      .appName {
        text-align: right;
      }

      b {
        cursor: pointer;
        margin-right: 16px;
        display: block;
      }
    }
  }
}
</style>