<template>
  <div class="page">
    <div class="content">
      <img :src="familyInfo.avatarUrl" alt="" v-if="familyInfo.avatarUrl">
      <img src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt="" v-else>
      <p class="user-name">{{familyInfo.nickName}}</p>
      <div class="btn" @click="add">加为家人</div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  appName: "加家人",
  computed: {
    ...mapState(['user', 'token'])
  },
  data() {
    return {
      familyInfo: {}
    }
  },
  onLoad(options) {
    this.familyInfo = {...options}
  },
  methods: {
    add() {
      this.$instance.post(`/app/appwechatuserrelation/addRelation?openId=${this.familyInfo.openId}`).then(res=> {
        if(res.code == 0) {
          this.$u.toast('添加成功')
          setTimeout(() => uni.navigateBack({}), 1500)
        }
      }).catch(err => {
        this.$u.toast(err)
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";
.page {
  width: 100%;
  height: 100%;
  height: 100vh;
  padding: 32px 32px 96px 32px;
  box-sizing: border-box;
  background-color: #f3f6f9;
  .content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
    img {
      width: 176px;
      height: 176px;
      border-radius: 88px;
      margin: 160px auto 24px auto;
    }
    .user-name {
      margin-bottom: 100px;
      line-height: 42px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 36px;
      color: #333;
    }
    .btn {
      width: 400px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      background: #4181FF;
      border-radius: 44px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 34px;
      color: #FFF;
      margin: 0 auto;
    }
  }
}
</style>
