dvcp_v2_wechat_app/src/project/fengdu/AppMine/myFamily.vue

<template>
  <div class="page">
    <div class="user-list" v-if="list.length">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="item-left">
          <img :src="item.avatarUrl" alt="">
          <div class="user-info">
            <h3>{{item.nickName}}</h3>
            <p>{{item.girdName || ''}}</p>
          </div>
        </div>
        <div class="item-right">
          <div @click="toTransfer(item)">转积分</div>
        </div>
      </div>
    </div>
    <AiEmpty v-else/>
    <p class="bottom-text">如果绑定错误，请联系网格员解绑！</p>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  appName: "我的家庭",
  computed: {
    ...mapState(['user', 'token'])
  },
  data() {
    return {
      list: []
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    getList() {
      this.$instance.post(`/app/appwechatuserrelation/list`).then(res => {
        if (res.code === 0 && res.data) {
          this.list = res.data
        }
      })
    },
    toTransfer(row) {
      uni.navigateTo({url: `./transferIntrgral?openId=${row.openId}&nickName=${row.nickName}&avatarUrl=${row.avatarUrl}`})
    }
  },
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";

.page {
  width: 100%;
  height: 100vh;
  background-color: #f3f6f9;

  .user-list {
    padding: 32px 32px 0;
    height: calc(100% - 180px);
    overflow-y: scroll;
    .item {
      padding: 26px;
      background-color: #fff;
      display: flex;
      margin-bottom: 24px;
      .item-left {
        width: calc(100% - 150px);
        display: flex;
        img {
          width: 108px;
          height: 108px;
          border-radius: 54px;
        }
        .user-info {
          margin-left: 20px;
          h3 {
            line-height: 42px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 32px;
            color: #333;
            margin-bottom: 10px;
          }
          p {
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #999;
            line-height: 40px;
          }
        }
      }
      .item-right {
        width: 150px;
        div {
          width: 126px;
          height: 56px;
          line-height: 56px;
          text-align: center;
          background: #2D7DFF;
          border-radius: 30px;
          font-family: PingFangSC-Regular;
          font-size: 26px;
          color: #FFF;
          margin-top: 26px;
        }
      }
    }
  }

  .bottom-text {
    line-height: 34px;
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #999;
    position: fixed;
    bottom: 92px;
    left: 180px;
  }
}
</style>