dvcp_v2_wxcp_app/src/project/saas/AppHome/components/My.vue

<template>
  <div class="My">
    <div class="content">
      <div class="user-info">
        <img src="../img/my/my-bg-user.png" alt="" class="bg-img">
        <div class="top">
          <div>
            <AiOpenData v-if="user.wxUserId" type="userName" :openid="user.wxUserId"></AiOpenData>
          </div>
          <img :src="user.avatar" alt="" v-if="user.avatar">
          <img src="../img/user-icon.png" alt="" v-else>
        </div>
        <div class="bottom">{{ user.corpName }}</div>
      </div>
      <div class="link" v-for="(item, index) in linkList" :key="index" @click="linkTo(item.linkUrl)">
        <div class="left">
          <img :src="item.img" alt="">{{ item.title }}
        </div>
        <img src="../img/right-icon-999.png" alt="" class="right-icon">
      </div>
    </div>
    
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: "My",
  data() {
    return {
      linkList: [
        {
          title: '头像上传',
          img: require('../img/my/my-txsc.png'),
          linkUrl: './UploadPhoto'
        },
        {
          title: '意见反馈',
          img: require('../img/my/my-yjfk.png'),
          linkUrl: './FeedBack'
        },
        {
          title: '联系我们',
          img: require('../img/my/my-lxwm.png'),
          linkUrl: 'contact'
        },
        {
          title: '帮助文档',
          img: require('../img/my/my-bzwd.png'),
          linkUrl: './HelpDocs'
        }
      ]
    }
  },
  computed: { ...mapState(['user']) },
  methods: {
    ...mapActions(['wxInvoke', 'injectJWeixin']),
    linkTo(url) {
      if(url == 'contact') { //联系我们
        this.wxInvoke(["openThirdAppServiceChat", {}, res => {
          if (res.err_msg == "openThirdAppServiceChat:fail") {
            window.open("https://work.weixin.qq.com/kfid/kfcc23927b18d1ad4f4")
          }
        }])
      }else {
        console.log(url)
        uni.navigateTo({ url })
      }
      
    }
  },
  created() {
    this.injectJWeixin('openThirdAppServiceChat')
  },
}
</script>

<style lang="scss" scoped>
.My {
  .content {
    padding: 32px 32px 0;
    .user-info{
      width: 100%;
      height: 248px;
      border-radius: 8px;
      background-color: #fff;
      position: relative;
      margin-bottom: 32px;
      .bg-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .top {
        display: flex;
        justify-content: space-between;
        padding: 28px 32px 36px;
        border-bottom: 1px solid #eee;
        div {
          font-size: 40px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333;
          line-height: 96px;
        }
        img {
          width: 96px;
          height: 96px;
          border-radius: 50%;
          border: 1px solid #DDD;
        }
      }
      .bottom {
        padding: 24px 32px;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        line-height: 40px;
      }
    }
    .link {
      display: flex;
      justify-content: space-between;
      padding: 32px;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 24px;
      .left {
        font-size: 30px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333;
        line-height: 42px;
        img {
          width: 48px;
          height: 48px;
          margin-right: 16px;
          vertical-align: middle;
        }
      }
      .right-icon {
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>