yicangzongtai_app_240321/pages/career/index.vue

<template>
  <view>
    <navbar ref="navbar" :config="config" backColor="#666"></navbar>
    <view class="career-box">
      <view class="career-user">
        <view class="user-info">
          <view class="user-info-left">
            <view class="user-name" v-if="isLogin">{{userInformation.real_name}}
				<image class="star" v-if="orderEquity.userPayConsumption>=10000" src="/static/career/star.png" mode=""></image>
				<image class="star" v-if="orderEquity.userPayConsumption>=50000" src="/static/career/star.png" mode=""></image>
			</view>
            <view class="user-name" v-else>登陆/注册<text style="margin-left: 5px;" class="iconfont right">&#xe6c7;</text>
            </view>
            <view class="user-tag"><text
                class="iconfont3 user-tag-icon">&#xe728;</text>{{ userInformation.grade == 1 ? '店长' : '普通会员' }}</view>
            <view class="user-tag"><text
                class="iconfont3 user-tag-icon">&#xe744;</text>{{userInformation.register_time?userInformation.register_time.substr(0,11):''}}
            </view>
            <view class="user-tag"><text
                class="iconfont3 user-tag-icon">&#xe611;</text>推荐人：{{ userInformation.invited  || '平台'}}</view>
            <view class="user-tag"><text
                class="iconfont3 user-tag-icon">&#xe617;</text>状态：{{ userInformation.activating ? '激活' : '未激活'}}</view>
          </view>
          <image class="user-head-img" v-if="userInformation.head_photo" :src="userInformation.head_photo"
            mode="aspectFill"></image>
          <image class="user-head-img" v-else :src="imgUrl+'/head-on.png'" mode="aspectFill"></image>
        </view>
		<view class="stateBox">
			<view class="stateBox_title">说明</view>
			<view class="stateBox_txt">惠选区消费得到消费值达到1万1颗星,达到5万2颗星</view>
			<view class="stateBox_list">
				<view class="line">
					<view class="stateBox_lab">{{orderEquity.userPayConsumption||0}}</view>
					<view class="stateBox_val">我的消费值</view>
				</view>
				<view>
					<view class="stateBox_lab">{{orderEquity.platformMonthEquity||0}}</view>
					<view class="stateBox_val">平台权益值</view>
				</view>
			</view>
		</view>
		
        <view class="user-integral" @click.stop="lookConsume()">
          <text class="user-integral-nums">{{ $addDecimals(userInformation.commission_able , 2) | integer }}.
            <text>{{ $addDecimals(userInformation.commission_able , 2) | decimals }}</text> </text>
          <text class="user-integral-hint">我的贡献值（贡献值可变积分）</text>
          <text class="user-integral-more iconfont">&#xe6c7;</text>
        </view>
      </view>

		
      <view class="popularize-info" v-if="userInformation.grade === 0">
        <view class="grand-total">
          累计推广人员{{ updatestatisticsData.existing_count }}人，
          <span v-if="updatestatisticsData.without_count > 0">升级还需要推广{{ updatestatisticsData.without_count }}人</span>
          <span v-else>升级还需要推广{{updatestatisticsData.child_without_count}}人直推用户</span>
        </view>
        <view class="progress-box">
          <view class="progress-line"
            :style="{'width':progressWidth(updatestatisticsData.existing_count , updatestatisticsData.without_count)}">
            <view class="progress-icon">
              <image class="progress-img" src="../../static/career/career4.png" mode=""></image>
            </view>
          </view>
        </view>
        <view class="popularize-btn" @click="goSublevelPage('/pages/user/invitationCode/invitationCode')">
          去邀请
        </view>
        <view class="popularize-hint">
          累计推广人员满{{ updatestatisticsData.count }}人，直推人员满{{ updatestatisticsData.num_direct_referrals }}人，且被推广的人员已激活，可自动升级为店长，尊享团队贡献值，享受更多收益
        </view>
      </view>

      <view class="other">
        <view class="other-top">
          <view class="left">
            其他工具
          </view>
        </view>
        <view class="option">
          <view class="list" @click.stop="goSublevelPage('/pages/user/distribution/moneyList')">
            <image class="my-icon" src="../../static/career/career1.png" mode=""></image>
            <view class="name-one">推广订单</view>
          </view>
          <view class="list" @click="goNewPull()">
            <image class="my-icon" src="../../static/career/career2.png" mode=""></image>
            <view class="name-one">我的团队</view>
          </view>
          <view class="list" @click="goSublevelPage('/pages/user/invitationCode/invitationCode')">
            <image class="my-icon" src="../../static/career/career3.png" mode=""></image>
            <view class="name-one">会员码</view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    updatestatistics,
    operatingInfo,
	orderEquity
  } from "@/api/personal-center.js"
  import math from "@/common/math.js"
  export default {
    data() {
      return {
        imgUrl: this.$mConfig.staticUrl,
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '事业',
          color: '#1a1a1a',
          backgroundColor: [1, '#fff'],
          rightSlot: true,
        },
        defaultHeadPhoto: false,
        userInformation: {},
        updatestatisticsData: {
          count: 20,
          existing_count: 0,
          without_count: 20
        },
        isLogin: false,
		orderEquity:{}
      };
    },
    onShow() {
      this.judgeLogin();
	  this.getOrderEquity()
    },
    onPullDownRefresh() {
      this.judgeLogin();
	  this.getOrderEquity()
    },
    computed: {
      progressWidth() {
        return function(num_1 = 0, num_2 = 1) {
          try {
            const num = num_1 / num_2 * 100
            if (num <= 0) {
              return '1px'
            } else if (num > 95 && num < 100) {
              return '95%'
            } else if (num >= 100) {
              return '100%'
            } else {
              return `${num}%`
            }
          } catch (err) {
            return '1px'
          }
        }
      }
    },
    methods: {
      getUpdatestatistics() {
        this.$http.get(updatestatistics).then(res => {
          if (res && res.code == 200) {
            this.updatestatisticsData = res.data;
          }
        })
      },
	  //获取我的消费值  平台权益值
	  getOrderEquity(){
		  this.$http.get(orderEquity).then(res=>{
			  if(res&&res.code==200){
				  this.orderEquity=res.data
			  }
		  })
	  },
      // lookHeadPhoto(){
      // } 
      judgeLogin() {
        this.$http.get(operatingInfo).then(res => {
          uni.stopPullDownRefresh();
          if (res && res.code == 200) {
            this.isLogin = true
            this.userInformation = res.data;
            if (res.data.grade === 0) {
              this.getUpdatestatistics()
            }
          } else {
            this.isLogin = false
          }
        })

      },
      lookConsume() {
        uni.navigateTo({
          url: '/pages/user/consume-val'
        })
      },
      // 跳转 推广拉新
      goNewPull() {
        let obj = {
          real_name: this.userInformation.real_name,
          service_system_province: this.userInformation.service_system_province,
          head_photo: this.userInformation.head_photo
        }
        uni.navigateTo({
          url: "/pages/operationCenter/newPull?userInfo=" + JSON.stringify(obj)
        })
      },
      // 跳转子级页面
      goSublevelPage(page) {
        uni.navigateTo({
          url: page
        })
        // if(this.isLogin){
        // 	uni.navigateTo({
        // 		url: page
        // 	})
        // }else{
        // 	this.$mUtil.toast("请先登录")
        // }
      },
    }
  }
</script>
<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
  .career-box {
    width: 100%;
    padding: 40rpx 30rpx 0;

    .career-user {
      width: 100%;
      background-color: #ffffff;
      padding: 35rpx 30rpx;
      border-radius: 20rpx;
      box-shadow: 0 0 40rpx rgb(250, 250, 250);

      .user-info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .user-info-left {
          .user-name {
            font-size: 36rpx;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            color: #1a1a1a;
			.star{
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
          }

          .user-tag {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #808080;
            margin-top: 11rpx;

            .user-tag-icon {
              color: #FA6138;
              font-size: 36rpx;
              margin-right: 11rpx;
              flex-shrink: 0;
            }
          }
        }

        .user-head-img {
          width: 130rpx;
          height: 130rpx;
          border-radius: 50%;
        }
      }

      .user-integral {
        width: 100%;
        height: 180rpx;
        background: #FA6138;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-top: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        position: relative;

        .user-integral-nums {
          font-size: 38rpx;

          // color: #ffffff;
          text {
            font-size: 24rpx;
          }
        }

        .user-integral-hint {
          font-size: 26rpx;
          color: #f5f5f5;
        }

        .user-integral-more {
          position: absolute;
          right: 30rpx;
          top: 50%;
          transform: translateY(-50%);
          font-size: 37rpx;
        }

        // <view class="user-integral">
        // 	<text class="user-integral-nums">99999999.00</text>
        // 	<text class="user-integral-hint">我的贡献值（贡献值可变积分）</text>
        // 	<!-- <text class="iconfont">&#xe6c7;</text> -->
        // </view>
      }
    }
	.stateBox{
		background: #cccccc3d;
		border-radius: 20rpx;
		padding: 20rpx 40rpx;
		margin-top: 30rpx;
		.stateBox_title{
			font-size: 32rpx;
			font-weight: 700;
		}
		.stateBox_txt{
			font-size: 24rpx;
			color: #808080;
			margin-top: 16rpx;
		}
		.stateBox_list{
			display: flex;
			margin: 20rpx 0 10rpx;
			.line{
				position: relative;
				&::after{
					display: block;
					content: " ";
					position: absolute;
					width: 1rpx;
					height: 60rpx;
					right: 0;
					top: 10rpx;
					background: #cccccc;
				}
			}
			>view{
				width: 50%;
				padding-left: 30rpx;
				&:first-child{
					position: relative;
					
				}
			}
			.stateBox_lab{
				font-size: 28rpx;
				font-weight: 700;
			}
			.stateBox_val{
				font-size: 24rpx;
				color: #808080;
				margin-top: 10rpx;
			}
		}
	}
    .popularize-info {
      margin-top: 30rpx;
      background-color: #fff;
      width: 100%;
      padding: 37rpx 30rpx;
      border-radius: 20rpx;
      box-shadow: 0 0 40rpx rgb(250, 250, 250);

      .grand-total {
        padding: 10rpx 30rpx;
        background-color: #ECF2FF;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #FA6138;
        border-radius: 40rpx;
      }

      .progress-box {
        width: 100%;
        height: 28rpx;
        background: #e6e6e6;
        border-radius: 14rpx;
        margin-top: 24rpx;

        .progress-line {
          height: 100%;
          border-radius: 14rpx;
          background-color: #FA6138;
          position: relative;

          .progress-icon {
            position: absolute;
            right: 0;
            top: 50%;
            width: 41rpx;
            height: 41rpx;
            background-color: #febdf7;
            border-radius: 50%;
            transform: translate(50%, -50%);

            .progress-img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
        }
      }

      .popularize-btn {
        width: 570rpx;
        height: 80rpx;
        background: #FA6138;
        border-radius: 40rpx;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        line-height: 80rpx;
        margin: 45rpx auto 0;
      }

      .popularize-hint {
        width: 100%;
        margin-top: 30rpx;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #666666;
      }


    }

    .other {
      margin-top: 30rpx;
      background-color: #ffffff;
      padding: 38rpx 28rpx 37rpx 28rpx;
      border-radius: 20rpx;
      box-shadow: 0 0 40rpx rgb(250, 250, 250);

      .other-top {
        display: flex;
        padding-bottom: 18rpx;
        align-items: center;
        margin-bottom: 32rpx;
        border-bottom: 1rpx solid #e6e6e6;

        .left {
          flex: 1;
          font-size: 30rpx;
          font-weight: 700;
          color: #1A1A1A;
          line-height: 30rpx;
        }
      }

      .option {
        display: flex;
        justify-content: space-between;

        &:nth-child(n + 1) {
          margin-top: 32rpx;
        }

        // flex-wrap: wrap;
        .list {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .my-icon {
            width: 81rpx;
            height: 81rpx;
          }

          .name-one {
            padding-top: 14rpx;
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: center;
            color: #1a1a1a;
          }
        }
      }
    }
  }
</style>