<template>
  <div class="address2" >
    <div class="avata" v-if="acceptStatus==0">
      <img :src="userDetail.avatar" alt="">
    </div>
    <div class="title" v-if="acceptStatus==1">
      授权成功
    </div>
    <div class="title" v-if="acceptStatus==2">
      授权失败
    </div>
    <div class="text" v-if="acceptStatus==0">
      <p>你的好友{{userDetail.nickname}}邀请你</p>
      <p>成为他在唱唱启蒙英语的子账户</p>
    </div>
    <div class="text" v-if="acceptStatus==1">
      <p>此账号已成为{{userDetail.nickname}}在 唱唱启蒙英语上的子账户</p>
    </div>
    <div class="text" v-if="acceptStatus==2">
      <p v-html="errMsg.replace(/\n/g,'</br>')"></p>
    </div>
    <div class="btnBox" @click="acceptFn" v-if="acceptStatus==0"><van-button round size="large" type="info">确认接受</van-button></div>
    <div class="ewm" v-if="acceptStatus!=0">
      <p>扫码关注</p>
      <p>「唱唱启蒙英语」</p>
      <img :src="img_qr" alt="">
    </div>
    <img class="bg" :src="img_logo" alt="">
  </div>
</template>

<script>
import img_logo from "../../assets/account/img_logo@3x.png";
import img_qr from "../../assets/shop/qr4.png";
import { bindAccountApi,mainAccountinfoApi } from "../../service/api";
import common from '../../util/common'
export default {
  name: "accept",
  components: {},
  data() {
    return {
      img_logo: img_logo,
      img_qr:img_qr,
      addressInfo: {},
      userDetail:{},
      acceptStatus:0,
      errMsg:""
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      //  console.log(common.getParamhref())
       console.log(this.$route.query)
      // console.log(common.getUrlParam().code)
      let ownDetail = JSON.parse(localStorage.getItem("userDesc"));
      if(ownDetail.family_user==2){
        this.acceptStatus = 1
      }
      if(this.$route.query.code){
          mainAccountinfoApi(this.$route.query.code).then(res =>{
            this.userDetail = res
          // console.log(res)
        })
      }else{
        alert('分享失败')
        // this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
      }
      
    },
    acceptFn(){
      bindAccountApi(this.$route.query.code).then(res =>{
        if(res.code==1){
          this.acceptStatus = 1
        }else{
          this.acceptStatus = 2
          this.errMsg = res.msg.toString()
        }
      })
    }
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.address2 {
  background: #FFECAD;
  .bg{
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  .avata{
    text-align: center;
    padding-top: 60* @toVw;
    img{width: 84* @toVw; border-radius: 50%;border: 3px solid white; }
  }
  .text{
    text-align: center;
    color: #333333;
    margin-top: 20* @toVw;
    line-height: 32* @toVw;
  }
  .btnBox{
    text-align: center;
    margin-top: 58* @toVw;
    .van-button--info{width: 132* @toVw;}
  }
  .ewm{
    text-align: center;
    margin-top: 68* @toVw;
    font-size: 12* @toVw;
    img{width: 180* @toVw; margin-top: 10* @toVw; }
  }
  .title{
    font-size: 30* @toVw;
    text-align: center;
    font-weight: 600;
    padding-top: 25* @toVw;
  }
}
</style>
