dvcp_v2_wxcp_app/src/project/saas/AppHomeOld/my.vue

<template>
  <div class="my">
    <!-- 个人信息 -->
    <div class="card">
      <div class="userInfoCard">
        <div class="user">
          <div>
            <img v-if="!!user.avatar" :src="user.avatar" class="avtar">
            <img v-else src="./components/img/tx@2x.png" alt="" class="avtar">
          </div>
          <div class="user-info">
            <div class="user-name">
              <AiOpenData type="userName" :openid="user.id"/>
            </div>
            <div class="user-job" v-text="user.corpName"/>
          </div>
        </div>
        <div class="myGrid" v-if="gridInfo.length">
          <div class="my-grid">我的网格<span class="num" v-text="gridInfo.length||0"/></div>
          <div class="all-grid" flex>
            <div class="gridBox fill">
              <div class="grid-name" v-for="gird in gridInfo" :key="gird.id"><span v-text="gird.girdName"/></div>
            </div>
            <div class="arrow-right" @click="gotoMyGrids">
              <u-icon name="arrow-right"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选项 -->
    <div class="option">
      <div class="option-item">
        <img src="./components/img/txsc@2x.png" alt="" class="option-img">
        <div class="option-info" @click="fromAlbum">
          <div class="option-text">头像上传</div>
          <div class="option-icon">
            <u-icon name="arrow-right" size="28"></u-icon>
          </div>
        </div>
      </div>
      <div class="option-item">
        <img src="./components/img/yjfk@2x.png" alt="" class="option-img">
        <div class="option-info" @click="feedback">
          <div class="option-text">意见反馈</div>
          <div class="option-icon">
            <u-icon name="arrow-right" size="28"></u-icon>
          </div>
        </div>
      </div>
      <div class="option-item">
        <img src="./components/img/lxwm@2x.png" alt="" class="option-img">
        <div class="option-info" @click="contactUs">
          <div class="option-text">联系我们</div>
          <div class="option-icon">
            <u-icon name="arrow-right" size="28"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: 'my',

  data() {
    return {
      gridInfo: []
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapActions(['wxInvoke', 'injectJWeixin']),
    feedback() {
      uni.navigateTo({url: './feedback'})
    },
    contactUs() {
      this.wxInvoke(["openThirdAppServiceChat", {}, res => {
        if (res.err_msg == "openThirdAppServiceChat:fail") {
          window.open("https://work.weixin.qq.com/kfid/kfcc23927b18d1ad4f4")
        }
      }])
    },
    fromAlbum() {
      uni.navigateTo({url: './uploadPhoto'})
    },
    getGirdInfo() {
      this.$http.post("/app/appgirdmemberinfo/queryMyGirdList").then(res => {
        if (res?.data) {
          this.gridInfo = res.data
        }
      })
    },
    gotoMyGrids() {
      uni.navigateTo({url: './myGrids'})
    },

  },
  created() {
    document.title = '个人中心'
    this.getGirdInfo()
    this.injectJWeixin('openThirdAppServiceChat')
  },
}
</script>

<style lang="scss" scoped>
.my {
  background-color: #fff;
  padding-bottom: 100px;
  box-sizing: border-box;
  .card {
    position: relative;
    height: 458px;
    background: url(./components/img/bg.png) no-repeat;
    background-size: 100%;

    .userInfoCard {
      position: absolute;
      top: 180px;
      left: 32px;
      width: calc(100% - 64px);
      height: 320px;
      background-color: #FFFFFF;
      border-radius: 12px;
      padding-left: 32px;
      box-sizing: border-box;
      box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.12);

      .user {
        display: flex;
        justify-content: flex-start;
        padding-top: 44px;
        margin-bottom: 15px;

        .avtar {
          width: 90px;
          height: 90px;
          margin-right: 24px;
          border-radius: 50%;
        }

        .user-name {
          font-size: 44px;
          color: #333333;
          font-weight: 800;
        }

        .user-job {
          font-size: 28px;
          color: #999999;
        }
      }

      .myGrid {
        padding: 5px 15px;

        .my-grid {
          font-size: 28px;
          font-weight: 800;
          color: #333333;

          .num {
            font-weight: normal;
            margin-left: 15px;
            font-size: 26px;
            color: #3476B9;
          }
        }

        .all-grid {
          display: flex;
          justify-content: space-between;
          margin-top: 16px;

          .gridBox {
            display: flex;
            justify-content: flex-start;
            overflow: hidden;

            .grid-name {
              margin-right: 10px;
              height: 46px;
              line-height: 46px;
              background-color: #F4F9FF;
              color: #3476B9;
              font-size: 24px;
              padding: 6px 16px;
              white-space: nowrap;
              max-width: 300px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .arrow-right {
            width: 40px;
            padding-top: 10px;
          }
        }
      }
    }
  }

  .option {
    margin-top: 64px;
    background-color: #fff;

    .option-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 104px;
      box-sizing: border-box;
      padding: 0 30px;

      .option-img {
        width: 50px;
        height: 50px;
        margin-right: 16px;
      }

      .option-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .option-text {
          font-size: 30px;
        }

        .option-icon {
          padding-left: 100px;
        }
      }

    }
  }

  .btn-pat,
  .btn-album,
  .btn-cancel {
    width: 100%;
    height: 112px;
    line-height: 112px;
    text-align: center;
  }

  .btn-pat {
    border-bottom: 1px solid #DDDDDD;
  }

  .space {
    width: 100%;
    height: 16px;
    background-color: #F5F5F5;
  }


}
</style>