lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545
							<!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">
    <style>
      /* 首页*/
      .banner .van-skeleton__title{height:3rem;border-radius:10px;}
      .banner1 .van-skeleton__title{height:5rem;border-radius:15px;}
      .indexicon{margin-top:50px;}
      .indexicon .van-skeleton__content{display:flex; justify-content:space-between;} 
      .indexicon .van-skeleton__content .van-skeleton__row{display:inline-block; width:1.2rem !important; height:1.2rem; margin-top:0 !important; border-radius:50%;}
      /* 商品详情*/
      .mall-skeleton-title .van-skeleton__title{height:9rem;border-radius:15px;}
      .mall-skeleton-text .van-skeleton__title{height:3rem;border-radius:15px;}
      .mall-skeleton .van-skeleton__title{height:10rem;border-radius:15px;}
    </style>
  </head>
  <body class="pt0" id="user_rank_explan">
    <div class="pt0" id="app" v-cloak>
      <van-skeleton title avatar :row="0" title-width="30%" round :loading="loading" style="padding:30px;"></van-skeleton>
      <van-skeleton title :row="0" title-width="100%" round :loading="loading" style="padding:10px 20px;"></van-skeleton>
      <van-skeleton title :row="0" title-width="100%" round :loading="loading" style="padding:10px 20px;"></van-skeleton>
      <van-skeleton class="banner1" title :row="0" title-width="100%" :loading="loading" style="margin-top:30px;"></van-skeleton>
      <van-skeleton class="banner1" title :row="0" title-width="100%" :loading="loading" style="margin-top:30px;"></van-skeleton>
      <van-skeleton class="banner1" title :row="0" title-width="100%" :loading="loading" style="margin-top:30px;"></van-skeleton>
      <van-sticky>
        <van-nav-bar class="user_rank_explan_title user_title_normal" title="创客详情" left-arrow @click-left="backbtn" v-if="toptitleisshow">
          <template #left> <img src="./static/images/left.png" alt=""></template>
        </van-nav-bar>
      </van-sticky>
      <div v-if="!loading">
        <div class="userpanel bordertop df borderbottom ovh">
          <div class="imgbox tc mr12" @click="speclick"><img class="headportrait" :src="createrinfo.HeadPhoto" alt=""><img class="grade_rank" :src="gradephoto[createrinfo.UserLevel-1]" alt=""></div>
          <div class="infobox">
            <div class="userinfo df spb">
              <div class="right">
                <div class="name f16"><span class="mr12">{{createrinfo.RealName}}</span><span>{{createrinfo.MakerCode}}</span></div>
                <div class="phonenumber f12 c999">{{createrinfo.phoneNum}}</div>
              </div>
              <div class="leftbtn">
                <button class="c333" @click="takephone(createrinfo.Mobile)">联系TA</button>
              </div>
            </div>
            <div class="time c999">实名时间 {{createrinfo.AuthDate}}</div>
          </div>
        </div>
        <van-tabs class="creater_main_panel creater_tab" v-model="active" sticky @change="checktab" swipeable :class="toptitleisshow ? '':'istitletab'" v-if="!loading">
          <van-tab disabled></van-tab>
          <van-tab title="近七天">
            <div v-if="active === 1">
              <div class="bordertop pl16 pr16 pt16">
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">交易分类占比</div>
                  </div>
                  <div class="f12 c333">总交易{{abs(echartsdata.TradeTotal)}}元</div>
                </div>
                <div class="card" ref="transactionclassification"></div>
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">交易趋势图</div>
                  </div>
                </div>
                <div class="card" ref="secend"></div>
              </div>
              <div class="ovh ovhbox">
                <div class="btnbox" @touchmove.stop>
                  <button v-for="item,index in ActMerchantTrenditem(echartsdata.TradeTrend)" :key="index" :class="ischeck === index ? 'productbtn':''" @click="checkbtn(index)">{{item}}</button>
                </div>
              </div>
              <div class="bordertop pl16 pr16 pt16">
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">新增激活商户分类占比</div>
                  </div>
                  <div class="f12 c333">总激活{{echartsdata.ActTotal}}户</div>
                </div>
                <div class="card" ref="addmerchantpie"></div>
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">新增激活商户趋势图</div>
                  </div>
                </div>
                <div class="card" ref="addmerchantbar"></div>
              </div>
              <div class="ovh ovhbox">
                <div class="btnbox" @touchmove.stop>
                  <button v-for="item,index in ActMerchantTrenditem(echartsdata.ActMerchantTrend)" :key="index" :class="ischeck2 === index ? 'productbtn':''" @click="checkbtn2(index)">{{item}}</button>
                </div>
              </div>
              <div class="bordertop pl16 pr16 pt16">
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">创客新增趋势图</div>
                  </div>
                </div>
                <div class="card" ref="addmakerbar"></div>
              </div>
            </div>
          </van-tab>
          <van-tab title="近半年">
            <div v-if="active === 2">
              <div class="bordertop pl16 pr16 pt16">
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">交易分类占比</div>
                  </div>
                  <div class="f12 c333">总交易{{abs(echartsdata.TradeTotal)}}元</div>
                </div>
                <div class="card" ref="transactionclassification"></div>
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">交易趋势图</div>
                  </div>
                </div>
                <div class="card" ref="secend"></div>
              </div>
              <div class="ovh ovhbox">
                <div class="btnbox" @touchmove.stop>
                  <button v-for="item,index in ActMerchantTrenditem(echartsdata.TradeTrend)" :key="index" :class="ischeck === index ? 'productbtn':''" @click="checkbtn(index)">{{item}}</button>
                </div>
              </div>
              <div class="bordertop pl16 pr16 pt16">
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">新增激活商户分类占比</div>
                  </div>
                  <div class="f12 c333">总激活{{echartsdata.ActTotal}}户</div>
                </div>
                <div class="card" ref="addmerchantpie"></div>
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">新增激活商户趋势图</div>
                  </div>
                </div>
                <div class="card" ref="addmerchantbar"></div>
              </div>
              <div class="ovh ovhbox">
                <div class="btnbox" @touchmove.stop>
                  <button v-for="item,index in ActMerchantTrenditem(echartsdata.ActMerchantTrend)" :key="index" :class="ischeck2 === index ? 'productbtn':''" @click="checkbtn2(index)">{{item}}</button>
                </div>
              </div>
              <div class="bordertop pl16 pr16 pt16">
                <div class="title df"> 
                  <div class="left df">
                    <div class="tips"></div>
                    <div class="text c333 f14 b">创客新增趋势图</div>
                  </div>
                </div>
                <div class="card" ref="addmakerbar"></div>
              </div>
            </div>
          </van-tab>
          <van-tab disabled></van-tab>
        </van-tabs>
      </div>
    </div>
    <script src="./static/js/echarts.min.js"></script> 
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/appfunc.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script src="./static/js/publicfn.js"></script>
    <script src="./static/js/performanceechart.js"></script>
    <script>
      PublicLib.SetStatusBarBgColor({bgcolor:'ffffff'});
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
      	el: '#app',
      	data() {
      		return {
      			loading:true,
      			isLoading:false,
      			toptitleisshow,
      			active:1,
      			createrinfo:[],
      			gradephoto:[
      				'./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',
      			],
      			ischeck:0,
      			ischeck2:0,
      			echartsdata:{
      				//- TradePercent: [
      				//-   {
      				//-     Name: '',  //产品名称
      				//-     TradeAmt: 0,  //交易额
      				//-   },
      				//- ],
      				//- TradeTrend: [
      				//-   {
      				//-     Name: 'awdaw',  //产品名称
      				//-     Times: [
      				//-       {
      				//-         TimeString: '11204',  //交易日期/月份
      				//-         TradeAmt: 500.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '11204',  //交易日期/月份
      				//-         TradeAmt: 50.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '11204',  //交易日期/月份
      				//-         TradeAmt: 50.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '11204',  //交易日期/月份
      				//-         TradeAmt: 50.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '11204',  //交易日期/月份
      				//-         TradeAmt: 500.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '11204',  //交易日期/月份
      				//-         TradeAmt: 50.00  //交易额
      				//-       },
      				//-     ]
      				//-   },
      				//-   {
      				//-     Name: '111',  //产品名称
      				//-     Times: [
      				//-       {
      				//-         TimeString: '444',  //交易日期/月份
      				//-         TradeAmt: 5100.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '444',  //交易日期/月份
      				//-         TradeAmt: 50450.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '444',  //交易日期/月份
      				//-         TradeAmt: 5005.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '444',  //交易日期/月份
      				//-         TradeAmt: 50630.00  //交易额
      				//-       },
      				//-     ]
      				//-   },
      				//-   {
      				//-     Name: '23232',  //产品名称
      				//-     Times: [
      				//-       {
      				//-         TimeString: '333',  //交易日期/月份
      				//-         TradeAmt: 500.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '333',  //交易日期/月份
      				//-         TradeAmt: 0.00  //交易额
      				//-       },
      				//-       {
      				//-         TimeString: '333',  //交易日期/月份
      				//-         TradeAmt: 0.00  //交易额
      				//-       },
      				//-     ]
      				//-   },
      				//- ],
      				//- ActMerchantPercent: [
      				//-   {
      				//-     Name: '4',  //产品名称
      				//-     ActCount: 50  //激活数
      				//-   },
      				//-   {
      				//-     Name: '5',  //产品名称
      				//-     ActCount: 150  //激活数
      				//-   },
      				//-   {
      				//-     Name: '6',  //产品名称
      				//-     ActCount: 500  //激活数
      				//-   }
      				//- ],
      				//- ActMerchantTrend: [
      				//-   {
      				//-     Name: '123',  //产品名称
      				//-     Times: [
      				//-       {
      				//-         TimeString: '1133324',  //统计日期/月份
      				//-         ActCount: 50  //激活数
      				//-       },
      				//-       {
      				//-         TimeString: '1124',  //统计日期/月份
      				//-         ActCount: 502  //激活数
      				//-       },
      				//-       {
      				//-         TimeString: '1124',  //统计日期/月份
      				//-         ActCount: 50  //激活数
      				//-       },
      				//-       {
      				//-         TimeString: '1124',  //统计日期/月份
      				//-         ActCount: 502  //激活数
      				//-       },
      				//-       {
      				//-         TimeString: '1124',  //统计日期/月份
      				//-         ActCount: 50  //激活数
      				//-       },
      				//-     ]
      				//-   },
      				//-   {
      				//-     Name: '456',  //产品名称
      				//-     Times: [
      				//-       {
      				//-         TimeString: '0000',  //统计日期/月份
      				//-         ActCount: 150  //激活数
      				//-       },
      				//-       {
      				//-         TimeString: '000',  //统计日期/月份
      				//-         ActCount: 5014  //激活数
      				//-       },
      				//-       {
      				//-         TimeString: '0000',  //统计日期/月份
      				//-         ActCount: 50  //激活数
      				//-       },
      				//-     ]
      				//-   },
      				//-   {
      				//-     Name: '56415',  //产品名称
      				//-     Times: [
      				//-       {
      				//-         TimeString: '0000',  //统计日期/月份
      				//-         ActCount: 150  //激活数
      				//-       },
      				//-       {
      				//-         TimeString: '000',  //统计日期/月份
      				//-         ActCount: 4  //激活数
      				//-       },
      				//-       {
      				//-         TimeString: '0000',  //统计日期/月份
      				//-         ActCount: 50  //激活数
      				//-       },
      				//-     ]
      				//-   }
      				//- ],
      				//- MakerAdd: [
      				//-   {
      				//-     TimeString: '11024',  //统计日期/月份
      				//-     AddCount: 50  //新增数
      				//-   },
      				//-   {
      				//-     TimeString: '1124',  //统计日期/月份
      				//-     AddCount: 50  //新增数
      				//-   },
      				//-   {
      				//-     TimeString: '1124',  //统计日期/月份
      				//-     AddCount: 50  //新增数
      				//-   },
      				//-   {
      				//-     TimeString: '1124',  //统计日期/月份
      				//-     AddCount: 50  //新增数
      				//-   },
      				//-   {
      				//-     TimeString: '1124',  //统计日期/月份
      				//-     AddCount: 50  //新增数
      				//-   },
      				//-   {
      				//-     TimeString: '1124',  //统计日期/月份
      				//-     AddCount: 50  //新增数
      				//-   },
      				//- ]
      			},
      			sevenday:{},
      			fullyear:{},
      		};
      	},
      	created(){
      			this.toptitleisshow;
      			this.getcreaterinfo();
      			this.getcreaterdetail();
      			this.getcreaterdetailfullytear();
      	},
      	beforeUpdate() {
      		this.$nextTick(()=>{
      			this.secendchart(this.ischeck);
      			this.addmerchantbarchart(this.ischeck2);
      			this.TradePercenttovalue(this.echartsdata.TradePercent);
      			this.ActMerchantPercenttovalue(this.echartsdata.ActMerchantPercent);
      			this.firstchart();
      		})
      	},
      	methods: {
      		speclick(){
      			if(!isWeb){return};
      			const id = PublicLib.getCookieInfo('querycreaterid');
      			PublicLib.putCookieInfo('userId',id);
      			PublicLib.Goto({Url:'index'});
      		},
      		onRefresh(){
      			this.getcreaterinfo();
      			this.getcreaterdetail();
      			this.getcreaterdetailfullytear();
      			this.isLoading = false;
      		},
      		checkbtn(index){
      			this.ischeck = index;
      		},
      		checkbtn2(index){
      			this.ischeck2 = index;
      		},
      		//- 分类交易占比(固定图表)
      		firstchart(){
      			pieechart(this.$refs.transactionclassification,this.echartsdata.TradePercent);
      			pieechart(this.$refs.addmerchantpie,this.echartsdata.ActMerchantPercent);
      			barechart(this.$refs.addmakerbar,this.MakerAddtovalue(this.echartsdata.MakerAdd)[0],this.MakerAddtovalue(this.echartsdata.MakerAdd)[1]);
      		},
      		//- 交易趋势图(随品牌切换)
      		secendchart(index){
      			barechart(this.$refs.secend,this.TradeTrendechart(this.echartsdata.TradeTrend,index)[0],this.TradeTrendechart(this.echartsdata.TradeTrend,index)[1])
      		},
      		//- 新增激活商户趋势图(随品牌切换)
      		addmerchantbarchart(index){
      			barechart(this.$refs.addmerchantbar,this.ActMerchantTrendechart(this.echartsdata.ActMerchantTrend,index)[0],this.ActMerchantTrendechart(this.echartsdata.ActMerchantTrend,index)[1]);
      		},
      		//- 数值转换为echarts所需数据
      		TradePercenttovalue(arr){
      			arr.forEach(item=>{item.value = item.TradeAmt;item.name = item.Name});
      		},
      		//- 数值转换为echarts所需数据
      		ActMerchantPercenttovalue(arr){
      			arr.forEach(item=>{item.value = item.ActCount;item.name = item.Name});
      		},
      		//- 新增创客趋势图
      		MakerAddtovalue(arr){
      			const newarr = [];
      			const item1 = [];
      			const item2 = [];
      			arr.forEach(item=>{
      			item1.push(item.TimeString)
      			item2.push(item.AddCount)
      			});
      			newarr.push(item1,item2);
      			return newarr; 
      		},
      		//- 新增激活商户趋势图
      		ActMerchantTrendechart(arr,index){
      			const newarr = [];
      			const item1 = [];
      			const item2 = [];
      			arr[index].Times.forEach(item=>{
      			item1.push(item.TimeString);
      			item2.push(item.ActCount);
      			});
      			newarr.push(item1,item2);
      			return newarr; 
      		},
      		//- 交易趋势图
      		TradeTrendechart(arr,index){
      			const newarr = [];
      			const item1 = [];
      			const item2 = [];
      			arr[index].Times.forEach(item=>{
      			item1.push(item.TimeString);
      			item2.push(item.TradeAmt);
      			});
      			newarr.push(item1,item2);
      			return newarr; 
      		},
      		ActMerchantTrenditem(arr){
      			const result = [];
      			arr.forEach(item=>{
      				result.push(item.Name);
      			});
      			return result;
      		},
      		backbtn(){
      			PublicLib.GoBack({Level:1});
      		},
      		async getcreaterdetail(){
      			const  UserId= PublicLib.getCookieInfo('querycreaterid');
      			const res = await getRequest('api/v1/users/mymakerdetail?t='+Math.random(6),JSON.stringify({Id:'',UserId,DateKind:1}));
      			if(res.status !== '1') return tips('获取图表信息失败，请重试！');
      			if(this.active === 1){
      				res.data.MakerAdd.forEach(item=>{
      					item.TimeString = item.TimeString.substr(4,6)
      				});
      			};
      			this.sevenday = res.data
      			if(this.active === 1) {
      				this.echartsdata = this.sevenday
      			};
      			this.loading = false;
      		},
      		async getcreaterdetailfullytear(){
      			const  UserId= PublicLib.getCookieInfo('querycreaterid');
      			const res = await getRequest('api/v1/users/mymakerdetail?t='+Math.random(6),JSON.stringify({Id:'',UserId,DateKind:2}));
      			if(res.status !== '1') return tips('获取图表信息失败，请重试！');
      			if(this.active === 1){
      				res.data.MakerAdd.forEach(item=>{
      					item.TimeString = item.TimeString.substr(4,6)
      				});
      			};
      			this.fullyear = res.data
      			 if(this.active === 2) {
      				this.echartsdata = this.fullyear
      			};
      		},
      		async getcreaterinfo(){
      			const Id = PublicLib.getCookieInfo('querycreaterid');
      			const res = await getRequest('api/v1/users/personalinfo?t='+Math.random(6),JSON.stringify({Id}));
      			if(res.status !== '1') return tips('获取创客信息失败，请重试！');
      			res.data.phoneNum = hidemiddlenum(res.data.Mobile,3,4);
      			this.createrinfo = res.data;
      		},
      		takephone(phonenum){
      			PublicLib.PhoneCall(phonenum);
      		},
      		checktab(){
      		this.ischeck = 0;
      		this.ischeck2 = 0;
      		if(this.active === 1) {
      			this.echartsdata = this.sevenday
      		}else{
      			this.echartsdata = this.fullyear
      		};
      		},
      	}
      });
    </script>
  </body>
</html>