hlm_pl_mall_h5/pages/member/inviter/InviterManage.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <member-base :show="false"><view class="div container">
    <view class="div common-header-wrap">
      <view :style="'height:'+navHeight+'px'"></view>
      <view class="common-header-holder"></view>
      <view class="common-header-fixed">
      <title-header />
      <uni-nav-bar title="推广管理" class="common-header" left-icon="back" @clickLeft="goBack()">
      </uni-nav-bar>
    </view>
    </view>
    <view class="div main-content">
		<view class="member-info item">
			<view class="logo"><image mode="aspectFit" class="img avatar"  v-bind:src="user.member_avatar+'?'+time"/></image></view>
			<view class="name">会员名称：{{user.member_name}}</view>
		</view>
		<view class="money item mt-5">
			<view class="title">我的资产</view>
			<view class="money-wrapper mt-10">
				<view class="money-item">
					<view>{{inviter_member.inviter_total_amount}}</view>
					<text>已分销金额</text>
				</view>
				<view class="money-item">
					<view>{{inviter_member.inviter_goods_quantity}}</view>
					<text>分销商品数</text>
				</view>
				<view class="money-item">
					<view>{{inviter_member.inviter_goods_amount}}</view>
					<text>分销商品金额</text>
				</view>
			</view>
		</view>
		<view class="team item mt-5">
			<view class="title"><text class="row"></text><text class="span">我的团队</text></view>
			<view class="team-wrapper">
				<view class="team-item">
					<view class="num">{{inviter_member.inviter_1_quantity}}</view>
					<view class="link"></view>
					<view class="text">一级会员</view>
				</view>
				<view class="team-item">
					<view class="num">{{inviter_member.inviter_2_quantity}}</view>
					<view class="link"></view>
					<view class="text">二级会员</view>
				</view>
				<view class="team-item">
					<view class="num">{{inviter_member.inviter_3_quantity}}</view>
					<view class="link"></view>
					<view class="text">三级会员</view>
				</view>
			</view>
		</view>
		<view class="div nav-wrapper mt-5">
		  <view class="div nav-item" @click='showPopup("weixinVisible")'>推广公众号</view>
		  <view class="div nav-item" @click='showPopup("posterVisible")'>推广海报</view>
		  <view class="div nav-item" @click='goNavigate("/pages/member/inviter/InviterUser")'>推广成员</view>
		  <view class="div nav-item" @click='goNavigate("/pages/member/inviter/InviterOrder")'>推广业绩</view>
		</view>
		<view class="btn" @click.stop="onShare">点击查看推广链接</view>

    </view>
    <!--推广公众号-->
    <uni-popup background-color="#fff" ref="weixinVisible" type="right" >
      <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
      <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="推广公众号" class="common-header" left-icon="back" @clickLeft="hidePopup('weixinVisible')">
        </uni-nav-bar>
      </view>
      </view>
      <view class="div common-popup-content">
		  <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
        <view class="div refer_qrcode_weixin" v-if="refer_qrcode_weixin" >
          <image mode="aspectFit" class="img" :src="refer_qrcode_weixin">
          <view class="p">赶快去推广微信二维码吧!</view>
        </view>
        <view  class="p refer_qrcode_weixin_error" v-else>{{wx_error_msg}}</view>
		</scroll-view>
      </view>
    </view>
    </uni-popup>
    <!--推广海报-->
    <uni-popup background-color="#fff" ref="posterVisible" type="right" >
      <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
      <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="推广海报" class="common-header" left-icon="back" @clickLeft="hidePopup('posterVisible')">
        </uni-nav-bar>
      </view>
      </view>
      <view class="div common-popup-content">
		<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
        <image mode="aspectFit" class="img refer_qrcode_logo" :src="refer_qrcode_logo" :style="'width:'+wrapperWidth+'px'">
		</scroll-view>
	  </view>
    </view>
    </uni-popup>
	<uni-popup background-color="#fff" ref="shareVisible" type="bottom">
	    <view class="div common-popup-content">
	        <view class="div share-list">
	            <view class="div share-item copy" @click.stop="showLink">复制</view>
			</view>
	    </view>
	</uni-popup>

	<uni-popup background-color="#fff" ref="copyVisible">
	  <view class="copy-wrapper">
	    <view class="div title">您的浏览器不支持直接复制，请手动复制</view>
	    <input type="text" :value="inviter_url" onfocus="this.select()" >
	  </view>
	</uni-popup>
  </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import { mapState } from 'vuex'
import { getInviterPoster } from '../../../api/memberInviter'
import flexLine from '../../flexLine'
export default {
  components:{
  TitleHeader,
  MemberBase,
  flexLine,
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  ...mapState({
      user: state => state.member.info
    })
  },
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      inviter_url: '',
	  time:'',
      refer_qrcode_logo: '',
      refer_qrcode_weixin: '',
      wx_error_msg: '',
      wrapperWidth: 0,
	  inviter_member:{}
    }
  },
  created () {
    getInviterPoster().then(res => {
      this.inviter_url = res.result.inviter_url
      this.refer_qrcode_logo = res.result.refer_qrcode_logo
      this.refer_qrcode_weixin = res.result.refer_qrcode_weixin
      this.wx_error_msg = res.result.wx_error_msg
	  this.inviter_member = res.result.inviter_member
    }).catch(function (error) {
      uni.showToast({icon:'none',title: error.message})
    })
  },

  mounted(){
      // #ifdef  MP-WEIXIN
      this.navHeight = uni.getMenuButtonBoundingClientRect().top
      // #endif
      this.screenWidth=uni.getSystemInfoSync().screenWidth
    this.wrapperWidth = uni.getSystemInfoSync().windowWidth - 20
	this.time = new Date().getTime()
  },
  methods:{
	onShare () {
	  this.showPopup('shareVisible')
	},
    goNavigate(path){
      uni.navigateTo({url:path})
    },
  showPopup(id){
    this.$refs[id].open()
  },
  hidePopup(id){
    this.$refs[id].close()
  },
  showLink () {
      // #ifdef H5
      if (window.clipboardData) {
        window.clipboardData.clearData()
        window.clipboardData.setData('Text', this.copyLink)
        uni.showToast({icon:'none',title: '复制成功！'})
      } else {
        this.showPopup('copyVisible')
      }
      // #endif
  	// #ifndef H5
  	var _this=this
  	uni.setClipboardData({
  		data: this.copyLink,
  		success: function () {
  			uni.showToast({
  			  icon: 'none',
  			  title: '复制成功！'
  			})
  		},
  		fail:function () {
  		  _this.showPopup('popup_copy')
  		}
  	})
  	// #endif
    },
  goBack(){uni.navigateBack({delta:1})},
  }
}
</script>
<style scoped lang="scss">
  .main-content{
  	  padding:0 $pageSpace;
	  margin-top: $modelSpace;
  	  .item{
  		background-color: #fff;
  		border-radius: .5rem;
  		padding: $pageSpace;
  	  }
  	  .member-info{
  		  padding: $pageSpace;
  		  display: flex;
  		  align-items: center;
  		  background: -webkit-gradient(linear,left top,right top,from(#ecd8be),to(#dbb280));
  		  background: linear-gradient(90deg,#ecd8be,#dbb280);
  		  .logo{
  			  width: 3rem;
  			  height: 3rem;
  			  border-radius: 50%;
  			  overflow: hidden;
  			  image{
  				  width: 3rem;
  				  height: 3rem;
  			  }
  		  }
  		  .name{
  			  margin-left: .5rem;
  			  font-size: .7rem;
  			  color: #333;
  		  }
  	  }
  	  .money{
  		  .title{
  			  font-size: .7rem;
  			  color: #333;
  			  padding-bottom: .5rem;
  			  border-bottom: 1px dashed #dedede;
  		  }
  		  .money-wrapper{
  			  display: flex;
  			  .money-item{
  				  width: 33%;
  				  text-align: center;
  				  view{
  					  font-size: .7rem;
  					  color: #FB2630;
  				  }
  				  text{
  					  font-size: .6rem;
  					  color: #333;
  				  }
  			  }
  		  }
  	  }
  	  .team{
  		  .title{
  			  margin: 0 0 .75rem;
  			  position: relative;
  			  overflow: hidden;
  			  font-size: .8rem;
  			  font-weight: 700;
  			  color: #000;
  			  display: flex;
  			  justify-content: center;
  			  align-items: center;
  			  height: 1.5rem;
  			  .row{
  				  display: block;
  				   width: 6rem;
  				   height: .1rem;
  				   background-color: #000;
  			  }
  			  .span{
  				  width: 3.5rem;
  				  height: 1.25rem;
  				  text-align: center;
  				  padding: 0 .5rem;
  				  overflow: hidden;
  				  background-color: #fff;
  				  position: absolute;
  				  box-sizing: content-box;
  				}
  		  }
  		  .team-wrapper{
  			  display: flex;
  			  .team-item{
  				  flex: 1 1 0%;
  				  justify-content: center;
  				  color: #333;
  				  display: flex;
  				  flex-direction: column;
  				  padding: 1.2rem 0;
  				  align-items: center;
  				  background-color: #fcf3e7;
  				  margin:0 .25rem;
  				  .num{
  					  font-size: .8rem;
  					  font-weight: bold;
  				  }
  				  .link{
  					  height: .1rem;
  					  width: 1.1rem;
  					  background: -webkit-gradient(linear,left top,right top,from(#ecd8be),to(#dbb280));
  					  background: linear-gradient(90deg,#ecd8be,#dbb280);
  					  margin: .4rem 0;
  				  }
  				  .text{
  					  font-size: .6rem;
  				  }
  			  }
  		  }
  	  }
  	  .nav-wrapper{
  		  display: flex;
  		  flex-wrap: wrap;
  		  .nav-item{
  			  width: 49%;
  			  margin-right: 2%;
  			  background-color: #FFFFFF;
  			  font-size: .6rem;
  			  text-align: center;
  			  border-radius: .25rem;
  			  margin-bottom: .5rem;
  			  padding: 1rem 0;

  		  }
  		  .nav-item:nth-child(2n){
  			  margin-right: 0;
  		  }
  	  }
  	  .btn{
  		  background-color: $primaryColor;
  		  color: #FFFFFF;
  		  font-size: .8rem;
  		  text-align: center;
  		  padding: .5rem 0;
  		  border-radius: 1.2rem;
  	  }
    }
    .share-list{
  	  display:flex;
  	  .share-item{
  		  height: 3rem;
  		  margin:1rem 0.8rem;
  		  width:2.5rem;
  		  padding-left:0;
  		  background: none;
  		  text-align:center;
  		  color: #333;
  		  font-size:$fontSize;
  	  }
  	  .share-item:before{
  		  font-family: "iconfont";
  		  content:'';
  		  display:block;
  		  border-radius:50%;
  		  width:2rem;
  		  height:2rem;
  		  line-height:2rem;
  		  text-align:center;
  		  font-size:1.2rem;
  		  color:#fff;
  		  background: red;
  		  margin:0 auto;
  		  margin-bottom:.25rem
  		}
  		.share-item.copy:before{
  			content:"\e64b";
  			background:#228B22;
  		}
  	}
    .copy-wrapper{
  	  padding:1rem;
  	   input{
  		   height:1.5rem;
  		   line-height:1.5rem;
  		   padding:0 .2rem;
  		   width:12rem;
  		   border:1px solid #e1e1e1
  		}
  		.title{
  			font-size:$fontSize;
  			text-align: center;
  			margin-bottom:.5rem;
  		}
  	}
  .inviter_url{font-size:$subFontSize;padding:.5rem;margin-left: .5rem;box-sizing:border-box}
  .refer_qrcode_weixin_error{font-size:$subFontSize;padding:.5rem;}
  .refer_qrcode_logo{margin-left: .5rem}
  .refer_qrcode_weixin{text-align: center;margin-top:30%;}
  .refer_qrcode_weixin .img{width:8rem;height:8rem;}
  .refer_qrcode_weixin .p{line-height:2rem;font-size:$subFontSize;}
</style>