lichunlei
/
miniprogram


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的-爽客邦</title>
    <meta name="keywords" content="我的-爽客邦">
    <meta name="description" content="我的-爽客邦">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="apple-mobile-web-app-title" content="我的-爽客邦">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="./static/css/main.css">
  </head>
  <body class="bgc-back">
    <div id="app" v-cloak>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:90vh;">
        <div class="user-center-header">
          <div class="tr pt8" v-if="toptitleisshow">
            <div class="setting-btn dib" @click="gosetting"><img width="100%" src="./static/images/setting@3x.png"></div>
          </div>
          <div class="df pb16" v-cloak @click="userinfobtn">
            <div class="user-img" style="overflow:hidden;"><img :src="PublicLib.CachePicture({picUrl:userInfo.header,domid:'usercenterimg'})" id="usercenterimg" style="width:100%;height:100%;"></div>
            <div class="user-info cm">
              <div class="tl">
                <div class="f18 cfff b pb6"><span class="vm">{{userInfo.name}}</span><img class="vm" :src="gradelist[userInfo.grade - 1]" alt=""></div>
                <div class="f12 cfff op7">推荐码：{{userInfo.recommendcode}}</div>
              </div>
            </div>
          </div>
          <div class="user-level rel">
            <div class="df"><img class="abs absimg" src="./static/images/user-center-topcard-bottom.png" alt="">
              <div class="f14 cfff z-index-on">我的职级</div>
              <div class="f12 c999 flex1 tr z-index-on"> 保持当前级别还差{{exceedVal}}的交易</div>
            </div>
            <van-row class="tc pb8">
              <van-col span="2">
                <van-tag round color="#000" text-color="#fff">K{{userInfo.grade}}</van-tag>
              </van-col>
              <van-col span="20">
                <van-progress :percentage="userInfo.experience" :show-pivot="false"></van-progress>
              </van-col>
              <van-col span="2">
                <van-tag round color="#000" text-color="#fff">K{{userInfo.grade === 9 ? userInfo.grade : userInfo.grade + 1}}</van-tag>
              </van-col>
            </van-row>
          </div>
        </div>
        <div class="block-padding pb0 pt16 pl16 pr16" v-cloak>
          <div class="user-card bgcfff">
            <div class="df van-hairline--bottom pb8 pr16 pl16">
              <div class="cf">
                <div class="f12 c999"><span class="vm">账户余额(元)</span><span class="dib" @click="showMoney"><img class="show-btn vm" :src="isShow ? './static/images/show-icon@3x.png' : './static/images/noshow-icon@3x.png'" alt=""></span></div>
                <div class="index-num-b f16 c333 b">{{isShow ? `￥${balance}`: '****'}}</div>
              </div>
              <div class="flex1 tr"></div>
            </div>
            <div class="tl pr16 pl16">
              <van-row>
                <van-col span="12">
                  <div class="f12 c999">累计收益(元)</div>
                  <div class="index-num-b f16 c333 b">{{isShow ? `￥${total}` : '****'}}</div>
                </van-col>
                <van-col span="12">
                  <div class="f12 c999">已提现金额(元)</div>
                  <div class="index-num-b f16 c333 b">{{isShow ? `￥${tocash}`: '****'}}</div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
        <div class="block-padding pt16 pl16 pr16" v-cloak>
          <div class="user-card bgcfff">
            <div class="van-hairline--bottom pb8 tl pl16"><strong class="db f16">常用工具</strong></div>
            <van-grid class="pt8" :border="false" :icon-size="40" v-cloak>
              <van-grid-item class="gridicon" v-for="item,index in usercentericonlist" :text="item.Title" @click="gousercentericonlist(item.Url)">
                <template v-slot:icon><img :icon="PublicLib.CachePicture({picUrl:item.Icon,domid:'userIcon' + index})" :id="'userIcon' + index"></template>
              </van-grid-item>
            </van-grid>
          </div>
        </div>
        <div class="pb8 tc mt45"><img class="logo-bottom" src="./static/images/user-logo-gray.png" alt=""></div>
      </van-pull-refresh>
      <van-tabbar v-model="active" active-color="#FF502A" v-cloak v-if="tabsisshow">
        <van-tabbar-item icon="home-o" @click="index">首页
          <template #icon="props"><img :src="props.active ? icon1.active : icon1.inactive"></template>
        </van-tabbar-item>
        <van-tabbar-item icon="friends-o" @click="notice" :dot="isnotice">消息
          <template #icon="props"><img :src="props.active ? icon3.active : icon3.inactive"></template>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o">我的
          <template #icon="props"><img :src="props.active ? icon4.active : icon4.inactive"></template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script>
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            toptitleisshow:true,
            active: 2,
            userInfo:{
              name:'',
              header: '',
              recommendcode:'',
              grade: '',
              experience: 0
            },
            dialogisshow:false,
            isShow: false,
            balance: '',
            total: '',
            tocash: '',
            icon1: {
              active: './static/images/tab-icon1-active.png',
              inactive: './static/images/tab-icon1-no.png',
            },
            icon2: {
              active: './static/images/tab-icon2-active.png',
              inactive: './static/images/tab-icon2-no.png',
            },
            icon3: {
              active: './static/images/tab-icon3-active.png',
              inactive: './static/images/tab-icon3-no.png',
            },
            icon4: {
              active: './static/images/tab-icon4-active.png',
              inactive: './static/images/tab-icon4-no.png',
            },
            gradelist:[
              './static/images/grade-k1.png',
              './static/images/grade-k2.png',
              './static/images/grade-k3.png',
              './static/images/grade-k4.png',
              './static/images/grade-k5.png',
              './static/images/grade-k6.png',
              './static/images/grade-k7.png',
              './static/images/grade-k8.png',
              './static/images/grade-k9.png',
            ],
            usercentericonlist:[],
            //- 超越值
            exceedVal:'',
            //- 当前交易额
            currentTradeAmt:0.00,
            tabsisshow:'',
            isLoading:false,
          };
        },
        created() {
          this.tabsisshow = bottomtabisshow;
            this.getusercentericonlist();
            this.getuserinfo();
            this.getuseraccount();
            this.getuserrankinfo();
        },
        computed:{
          isnotice:function(){
            return PublicLib.getCookieInfo('noticeiscount') !== "";
          }
        },
        methods: {
          async onRefresh(){
            await this.getusercentericonlist();
            await this.getuserinfo();
            await this.getuseraccount();
            await this.getuserrankinfo();
            this.isLoading = false;
          },
          //- 显示余额状态
          showMoney(){
            this.isShow = !this.isShow;
          },
          //- 获取常用工具列表
          async getusercentericonlist(){
            const res = await getRequest('/api/v1/usercentericonlist/list',JSON.stringify({PageSize:8,PageNum:1}));
            //- TODO:
            //- if(res.status !== '1'){
            if(res.status === '1'){
              this.usercentericonlist = [             
                {Icon:'./static/images/user-btn1@3x.png',Title:'收支明细',Url:'user-payment-list'},
                {Icon:'./static/images/user-btn5@3x.png',Title:'服务中心',Url:'user-service-list'},
                {Icon:'./static/images/user-btn6@3x.png',Title:'意见反馈',Url:'user-feedback'},
                {Icon:'./static/images/user-btn7@3x.png',Title:'创客守则',Url:'user-maker-code'},
              ]
            }else{
              this.usercentericonlist = res.data;
              res.data.forEach(item=>{
                PublicLib.CachePicture({picUrl:item.Icon});
              });
            }
          },
          //- 获取用户个人信息
          async getuserinfo(){
            const userId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('/api/v1/users/personalinfo',JSON.stringify({Id:userId}));
            if(res.status === '1') {
              this.userInfo.name = res.data.RealName;
              this.userInfo.header = res.data.HeadPhoto;
              this.userInfo.recommendcode = res.data.MakerCode;
              //- this.userInfo.grade = res.data.UserLevel
            }
          },
          //- 获取用户账户信息
          async getuseraccount(){
            PublicLib.ShowLoading({Message:''});
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('/api/v1/useraccount/myaccount',JSON.stringify({UserId}));
            if(res.status === '1') {
              PublicLib.HideLoading();
              this.balance = tofixed2(res.data.BalanceAmount);
              this.total = tofixed2(res.data.BalanceAmount);
              this.tocash = tofixed2(res.data.WithdrawAmount);
            }
          },
          //- 获取用户职级信息
          async getuserrankinfo(){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('/api/v1/userrank/detail',JSON.stringify({UserId}));
            if(res.status === '1') {
              this.exceedVal = res.data.ExceedVal;
              this.userInfo.grade = res.data.Rank;
              this.userInfo.experience = res.data.Percent;
            }else{
              this.userInfo.grade = 1;
            }
          },
          //- 跳转商城
          mall(){
            PublicLib.Goto({Url:'mall'});
          },
          //- 跳转主页
          index(){
            PublicLib.Goto({Url:'index'});
          },
          //- 跳转消息
          notice(){
            PublicLib.Goto({Url:'notice-center'});
          },
          withdrawal(){
            PublicLib.Goto({Url:'user-Withdrawal'});
          },
          gosetting(){
            PublicLib.Goto({Url:'user-setting'});
          },
          async gousercentericonlist(Url){
            PublicLib.Goto({Url});
          },
          userinfobtn(){
            PublicLib.Goto({Url:'user-info'});
          },
        }
      });
    </script>
  </body>
</html>