index.vue

<template>
  <div class="index">
    <div class="title" v-if="userDetail.family_user==1||userDetail.family_user==0">
      我的子账号
    </div>
    <div class="title" v-if="userDetail.family_user==2">
      我的主账号
    </div>
    <div class="count" v-if="userDetail.family_user==0">
      <img :src="img_change" alt="">
      <p>（本月剩余<span>{{times}}次</span>授权机会）</p>
    </div>
    <div class="warntip" v-if="userDetail.family_user==0">
      <p class="title">请谨慎操作！</p>
      <p>授权子账号后看课权限将转移至子账号</p>
      <p> 当前账号则无看课权限！</p>
    </div>
    <div class="avata" v-if="userDetail.family_user==1">
      <img :src="subDetail.avatar" alt="">
      <p>{{subDetail.nickname}}</p>
    </div>
    <div class="avata" v-if="userDetail.family_user==2">
      <img :src="userDetail.avatar" alt="">
      <p>{{userDetail.nickname}}</p>
    </div>
    <div class="btnBox" v-if="userDetail.family_user==0&&times!=0" @click="authorization" ><van-button round size="large" type="info">授权子账号</van-button></div>
    <div class="btnBox" v-if="userDetail.family_user==1" @click="confirmshow=true" ><van-button round size="large" type="info">解除授权</van-button></div>
    <div class="info" v-if="userDetail.family_user==0">
      <div class="zhusi">注：</div>
      <div class="text">
        <p>1、开课期间内，每个月最多可授权4次子账号</p>
        <p>2、为了账号安全，您分享的绑定页面有效时间为30分钟，请在时限内完成绑定。（过期后请重新操作）</p>
      </div>
    </div>
    <div class="info" v-if="userDetail.family_user==1">
      <div class="zhusi">注：</div>
      <div class="text">
        <p>1、当前以子账号进行看课学习</p>
        <p>2、若需主账号继续看课，可解绑授权子账号</p>
      </div>
    </div>
    <div class="info" v-if="userDetail.family_user==2">
      <div class="zhusi">注：</div>
      <div class="text">
        <p>1、当前以子账号进行看课学习</p>
        <p>2、若需解绑可联系主账号进行解除授权</p>
      </div>
    </div>
    <van-popup  position='top' v-model="navshow">
      <img :src="img_point" alt="">
    </van-popup>
    <van-dialog
      v-model="confirmshow"
      show-cancel-button
      :show-confirm-button='bol'
      :show-cancel-button='bol'>
    <div class="content">此次解除授权后本月只剩<span>{{times}}次</span>授权机会，确定解除授权吗</div>
    <div class="button">
      <button class="certain" @click='relieve'>确定</button>
      <button class="cancel" @click="confirmshow=false" >取消</button>
    </div>
    </van-dialog>
  </div>
</template>

<script>
import img_change from "../../assets/account/img_change@3x.png";
import img_point from "../../assets/account/img_point@2x.png";
import { Toast } from 'vant';
import { unbindAccountApi,creatAuthorizationApi,countAuthorizationApi,getUserDetailApi,subAccountinfoApi,getwechatParam } from "../../service/api";
export default {
  name: "index",
  components:{
  },
  data() {
    return {
      img_change:img_change,
      addressInfo:{},
      userDetail:{},
      navshow:false,
      confirmshow:false,
      img_point:img_point,
      bol:false,
      subDetail:'',
      times:''
    };
  },
  mounted() {
    this.initPage();
    // Dialog.confirm({
    //   title: '',
    //   message: '弹窗内容',
    //   cancelButtonText:'确定',
    //   confirmButtonText:"取消"
    // }).then(() => {
    //   // on confirm
    // }).catch(() => {
    //   // on cancel
    // });
  },
  beforeDestroy(){
    getUserDetailApi().then(res=>{
      localStorage.setItem('userDesc',JSON.stringify(res));
    })
  },
  methods:{
    authorization(){
      if(this.times!==0){
        this.navshow = true
        creatAuthorizationApi().then(res =>{
          let URL = process.env.API_URL+'#/subAccept?code='+ res;
          let option={
            product_title: `${this.userDetail.nickname}邀请你成为唱唱启蒙英语的子账号`, // 分享标题
            desc: '丰富的课程内容,快乐的学习过程,这里是宝宝们的英语学习集中营。',//
            shareIcon:'https://cdn.singsingenglish.com/logo/logo.jpg',
            shareUrl:URL
          }
          this.enableShare(option)
        })
      }else{
        Toast('授权次数已用完');
      }
    },
    relieve(){
      unbindAccountApi().then(res =>{
        this.confirmshow=false
        // console.log()
        getUserDetailApi().then(res=>{
          // debugger
          this.userDetail = res
          localStorage.setItem('userDesc',JSON.stringify(res));
        })
        countAuthorizationApi().then(res =>{
          this.times = res.times
        })
        Toast(res);
      })
    },
    initPage() {
      this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
      if(this.userDetail.family_user==1){
        subAccountinfoApi().then(res => {
          this.subDetail = res
        })
      }
      countAuthorizationApi().then(res =>{
        this.times = res.times
      })
      // getUserAdressApi().then(res => {
      //   // this.starNum = res.last_value
      //   this.addressInfo = res;
      // });
    },
    enableShare: function(option) {
        let that = this;
        getwechatParam({
          api_list:   'onMenuShareAppMessage,onMenuShareTimeline',
          url:window.location.href.split('#')[0]
        }).then(wechatRes => {
          wx.config({
            debug: false,
            appId: wechatRes.appId,
            timestamp: parseInt(wechatRes.timestamp),
            nonceStr: wechatRes.nonceStr,
            signature: wechatRes.signature,
            jsApiList: wechatRes.jsApiList
          });
          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: option.product_title, // 分享标题
              desc: option.desc,// 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl: option.shareIcon, // 分享图标
              success: function() {
                // debugger
              },
              cancel: function() {
              }
            });
            wx.onMenuShareAppMessage({
              title: option.product_title, // 分享标题
              desc: option.desc,// 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
              success: function() {
                console.log(that.elementId)
                // debugger
              },
              cancel: function() {
              }
            });
          })
        })
      },
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.index {
  padding: 24* @toVw;
  box-sizing: border-box;
  .title{
    font-size: 24* @toVw;
    font-weight: bold;
  }
  .count{
    text-align: center;
    margin-top: 60* @toVw;
    img{width: 138* @toVw;}
    p{color: #666666;
    font-size: 14* @toVw;
    margin-top: 4* @toVw;
      span{color: #66BAFF;} 
    }
  }
  .warntip{
    .title{
      font-weight: bold;
      font-size: 14* @toVw;
    }
    margin-top: 20* @toVw;
    line-height: 22* @toVw;
    text-align: center;
    color: #333333;
    font-size: 14* @toVw;
  }
  .btnBox{
    text-align: center;
    margin-top: 58* @toVw;
    font-weight: 700;
    .van-button--info{width: 132* @toVw;}
  }
  .info{
    display: flex;
    color: #999999;
    margin-top: 46* @toVw;
    font-size: 13* @toVw;
    line-height: 19* @toVw;
    .zhusi{
      margin-top: 0;
    }
    .text{
      width: 293* @toVw;
    }
  }
  .avata{
    text-align: center;
    margin-top: 38* @toVw;
    img{width: 84* @toVw; border-radius: 50%; }
    p{font-size: 20* @toVw;line-height: 26* @toVw;  }
  }
  .van-popup{
    text-align: center;
    top: 20* @toVw;
    img{width: 337* @toVw;}
  }
  .van-dialog{
    width: 274* @toVw;
    border-radius: 15px;
    .content{
      padding: 26* @toVw;
      span{color: #5BC9FF;}
      color: #333333;
    }
    .van-button{
      width: 98* @toVw;
    }
    .button{
      display: flex;
      padding-bottom: 26* @toVw;
      
      button{
        border: none;
        width: 98* @toVw;
        height: 44* @toVw;
        color: white;
        border-radius: 22* @toVw;
        font-size: 17* @toVw;
      }
      .certain{
        background: #97A0BB;
      }
      .cancel{
        background:#40A9FF;
      }
    }
  }
}
</style>