fohow_wx/src/views/user/invite/Invite.vue

<template>
  <div class="invite-bg">
    <div class="invite-top" v-if="info.wx_user">
      <img :src="info.wx_user.head" class="top-head" alt="">
      <div class="top-name" v-if="info.wx_user.nickname">{{info.wx_user.nickname}}</div>
      <div class="top-name" v-if="!info.wx_user.nickname">微信用户</div>
      <div class="clear"></div>
    </div>
    <div class="invite-center">
      <div class="center-top">
        <div class="top-title">我的收益</div>
        <img src="@/assets/img/icon.png" @click="toincome" alt="" class="top-icon">
        <div class="top-detail" @click="toincome">查看明细</div>
        <div class="clear"></div>
      </div>
      <div class="center-income">
        <div class="income-left">
          <div class="income-title">当前收益</div>
          <div class="income-count">{{balance.available | getAcounting('￥',false)}}</div>
        </div>
        <div class="income-right">
          <div class="income-title">历史总收益</div>
          <div class="income-count">{{balance.total | getAcounting('￥',false)}}</div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="invite-bottom">
      <div class="bottom-top">
        <div class="top-title">我的邀请</div>
        <img src="@/assets/img/icon.png" @click="torecode" alt="" class="top-icon">
        <div class="top-detail" @click="torecode">查看记录</div>
        <div class="clear"></div>
      </div>
      <div class="bottom-center">{{countnumber}}</div>
      <div class="bottom-btn" :data-clipboard-text="countnumber" @click="copy">点击按钮邀请</div>
      <!-- <div class="bottom-center">邀请人数</div>
      <div class="bottom-count">8</div> -->
    </div>
  </div>
</template>
<script>
import Clipboard from 'clipboard'
import { Toast } from 'vant'
import { mapGetters } from 'vuex'
import Weixin from '@/common/wx'
export default {
  name: '',
  props: [''],
  data () {
    return {
      balance: {},
      info: {},
      countnumber: '',
      id: 0
    };
  },
  created() {
    this.$store.dispatch('userInfo')
    this.getbalanceinfo()
    // this.getinvitelist()
  },
  components: {},
  computed: {
    ...mapGetters(['userInfo'])
  },
  beforeMount() {},
  mounted() {},
  methods: {
    toincome () {
      this.$router.push({ path: '/income' })
    },
    torecode () {
      this.$router.push({ path: '/recode', query: { id: this.id } })
    },
    copy () {
      var clipboard = new Clipboard('.bottom-btn')
      clipboard.on('success', e => {
        console.log(e)
        Toast({
          message: '链接复制成功，快去邀请吧~',
          duration: 2000
        })
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.log(e)
        Toast({
          message: '该浏览器不支持自动复制',
          duration: 2000
        })
        clipboard.destroy()
      })
    },
    getbalanceinfo () {
      this.$get({
        url: 'v1/user/cash/balance/info',
        data: {}
      }).then((res) => {
        console.log(res)
        this.balance = res
      })
    },
    getinvitelist () {
      this.$get({
        url: `v1/invite/1/list`,
        data: {}
      }).then((res) => {
        console.log(res)
        // this.balance = res
      })
    }
  },
  watch: {
    'userInfo': function (val) {
      console.log(val)
      this.countnumber = window.location.origin + '/product?invite_id=' + val.wx_user.id
      this.info = val
      this.id = val.wx_user.id
      const wx = new Weixin({
        title: '天下一家',
        desc: '醇酱香酒之一',
        imgUrl: 'http://world-wine.oss-cn-shenzhen.aliyuncs.com/shareImg/wine_share.jpg',
        link: window.location.origin + '/product?invite_id=' + val.wx_user.id
      })
    }
  }
}
</script>
<style lang='less' scoped>
.invite-bg {
  background: #eeeeed;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  .invite-top {
    width: 7.1rem;
    background: #fff;
    border-radius: 0.1rem;
    padding: 0.2rem;
    box-sizing: border-box;
    margin: 0.3rem auto 0.3rem;
    .top-head {
      height: 0.62rem;
      width: 0.62rem;
      background: #ccc;
      float: left;
      border-radius: 50%;
      margin-right: 0.2rem;
    }
    .top-name {
      font-size: 0.28rem;
      color: #4c4c4c;
      float: left;
      margin-top: 0.1rem;
    }
  }
  .invite-center {
    width: 7.1rem;
    background: #fff;
    border-radius: 0.1rem;
    padding: 0.2rem;
    padding-top: 0.3rem;
    box-sizing: border-box;
    margin: 0 auto 0.3rem;
    .center-top {
      margin-bottom: 0.3rem;
      .top-title {
        color: #acbac3;
        float: left;
        font-weight: 600;
        font-size: 0.3rem;
      }
      .top-detail {
        float: right;
        color: #acbac3;
        font-size: 0.28rem;
      }
      .top-icon {
        float: right;
        width: 0.12rem;
        height: 0.2rem;
        margin-top: 0.08rem;
        margin-left: 0.2rem;
      }
    }
    .center-income {
      padding-bottom: 0.2rem;
      .income-left {
        float: left;
        width: 50%;
        .income-title {
          color: #999999;
          font-size: 0.28rem;
          margin-bottom: 0.1rem;
        }
        .income-count {
          font-size: 0.4rem;
          font-weight: 600;
          color: #ff696b;
        }
      }
      .income-right {
        float: left;
        width: 50%;
        .income-title {
          color: #999999;
          font-size: 0.28rem;
          margin-bottom: 0.1rem;
        }
        .income-count {
          font-size: 0.4rem;
          font-weight: 600;
          color: #4c4c4c;
        }
      }
    }
  }
  .invite-bottom {
    width: 7.1rem;
    background: #fff;
    border-radius: 0.1rem;
    padding: 0.3rem 0.2rem;
    box-sizing: border-box;
    margin: 0 auto 0.3rem;
    .bottom-top {
      margin-bottom: 0.2rem;
      .top-title {
        color: #acbac3;
        float: left;
        font-weight: 600;
        font-size: 0.3rem;
      }
      .top-detail {
        float: right;
        color: #acbac3;
        font-size: 0.28rem;
      }
      .top-icon {
        float: right;
        width: 0.12rem;
        height: 0.2rem;
        margin-top: 0.08rem;
        margin-left: 0.2rem;
      }
    }
    .bottom-center {
      background: #ebf3f7;
      // height:0.8rem;
      width: 100%;
      text-align: center;
      line-height: 0.3rem;
      font-size: 0.24rem;
      color: #708fa3;
      box-sizing: border-box;
      word-wrap: break-word;
      word-break: normal;
      padding: 0.2rem;
      margin-top: 0.3rem;
      margin-bottom: 0.2rem;
      border-radius: 0.05rem;
    }
    .bottom-btn {
      width: 100%;
      height: 0.8rem;
      background: #28cd5e;
      color: #fff;
      text-align: center;
      line-height: 0.8rem;
      border-radius: 0.05rem;
      font-size: 0.3rem;
    }
    // .bottom-count {
    //   text-align: center;
    //   font-size: 0.3rem;
    //   color: #ff696b;
    //   font-weight: 600;
    // }
  }
}
</style>