lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
							<!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>
      .screenroll::-webkit-scrollbar {
          display: none;  
      }
      .van-pull-refresh{
        height:calc(100vh - 2.3rem);
      }
      .bycloud{
        margin-left:0 !important;
      }
      .detailinfo{
        justify-content:space-between !important;
      }
      /*.mtr{
        text-align:right;
      }
      */
      .jcsb div{
        flex:1;
      }
    </style>
  </head>
  <body class="bgc-back pb0 ovh">
    <div class="iphonetitle"> </div>
    <div id="app" v-cloak>
      <van-nav-bar class="camp_title user_title_normal f16" title="我的业绩" @click-left="goback" v-if="toptitleisshow" left-arrow v-cloak>
        <template #left> 
          <van-icon name="arrow-left" color="#333" size="20"></van-icon>
        </template>
      </van-nav-bar>
      <div class="screenroll">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <div class="performance_toppanel ovh">
            <div class="title df mt8 c333">
              <div class="time" @click="showDate = true"><span>{{nowdate}}</span>
                <van-icon name="arrow"> </van-icon>
              </div>
              <div class="f12">本月业绩每日上午统一更新(不含当日)</div>
            </div>
          </div>
          <div class="performance_panel bgcfff">
            <div class="title df">
              <div class="f14 c333 b">个人交易</div>
              <div class="pic" @click="trendpic('个人交易')"><span class="f12">趋势图</span>
                <van-icon class="f12" name="arrow"> </van-icon>
              </div>
            </div>
            <div class="maininfo">
              <div class="amount df" @click="gopersonalachievement">
                <div class="echarts" ref="echartpersonal" style="pointer-events: none;"></div>
                <div class="data">
                  <div class="f14 c999">总交易额(元)
                    <van-icon name="arrow"> </van-icon>
                  </div>
                  <div class="money"> {{abs(personelinfo.TotalAmount)}}</div>
                </div>
              </div>
              <div class="detailinfo df">
                <div class="bycard">
                  <div class="f12 c999"> <span class="roll dib"></span><span>POS贷记卡交易额(元)</span></div>
                  <div class="f14 c666 money">{{abs(personelinfo.TotalPosAmount)}}</div>
                </div>
                <div class="bycloud">
                  <div class="f12 c999"> <span class="roll dib"></span><span>云闪付小额交易额(元)</span></div>
                  <div class="f14 c666 money mtr">{{abs(personelinfo.TotalCloudPayAmount)}}</div>
                </div>
              </div>
              <div class="detailinfo df">
                <div class="bycard">
                  <div class="f12 c999"> <span class="roll green dib"></span><span>码牌活动交易额(元)</span></div>
                  <div class="f14 c666 money">{{abs(personelinfo.TotalActiveAmount)}}</div>
                </div>
                <div class="bycloud">
                  <div class="f12 c999"> <span class="roll blue dib"></span><span>POS借记卡交易额(元)</span></div>
                  <div class="f14 c666 money mtr">{{abs(personelinfo.TotalUnActiveAmount)}}</div>
                </div>
              </div>
            </div>
            <div class="user df jcsb rel" @click="mymerchant">
              <div class="bycard">
                <div class="f12 c999"> <span>累计总创客(人)</span></div>
                <div class="f14 c666 all">{{personelinfo.TotalUser}}</div>
              </div>
              <div class="bycloud ml60">
                <div class="f12 c999"> <span>新增创客(人)</span></div>
                <div class="f14 c666 all mtr add">+{{personelinfo.AddUser}}</div>
                <div class="abs righticon">
                  <van-icon name="arrow"> </van-icon>
                </div>
              </div>
            </div>
            <div class="user df rel jcsb" @click="gopersonalactive">
              <div class="bycard">
                <div class="f12 c999"> <span>累计激活POS机商户(户)</span></div>
                <div class="f14 c666 all">{{personelinfo.TotalPosMerchant}}</div>
              </div>
              <div class="bycloud ml60">
                <div class="f12 c999"> <span>累计激活码牌商户(户)</span></div>
                <div class="c666 mtr f14">{{personelinfo.TotalActMerchant}}</div>
                <div class="abs righticon">
                  <van-icon name="arrow"></van-icon>
                </div>
              </div>
            </div>
            <div class="user df rel jcsb">
              <div class="bycard">
                <div class="f12 c999"> <span>支付宝总订单数</span></div>
                <div class="f14 c666 all">{{personelinfo.TotalAlipayOrder}}</div>
              </div>
              <div class="bycloud ml60">
                <div class="f12 c999"> <span>微信总订单数</span></div>
                <div class="c666 f14 mtr">{{personelinfo.TotalWeChatOrder}}</div>
                <div class="abs righticon"></div>
              </div>
            </div>
          </div>
          <div class="performance_panel bgcfff teampanel">
            <div class="title df">
              <div class="f14 c333 b">计奖交易</div>
              <div class="pic" @click="trendpic('计奖交易')"> <span class="f12">趋势图</span>
                <van-icon class="f12" name="arrow"> </van-icon>
              </div>
            </div>
            <div class="maininfo">
              <div class="amount df" @click="goteamachievement">
                <div class="echarts" ref="echartpersonal2team" style="pointer-events: none;"></div>
                <div class="data">
                  <div class="f14 c999">总交易额(元)
                    <van-icon name="arrow"> </van-icon>
                  </div>
                  <div class="money">{{abs(teaminfo.TotalAmount)}}</div>
                </div>
              </div>
              <div class="detailinfo df">
                <div class="bycard">
                  <div class="f12 c999"> <span class="roll dib"></span><span>POS贷记卡交易额(元)</span></div>
                  <div class="f14 c666 money">{{abs(teaminfo.TotalPosAmount)}}</div>
                </div>
                <div class="bycloud">
                  <div class="f12 c999"> <span class="roll dib"></span><span>云闪付小额交易额(元)</span></div>
                  <div class="f14 c666 money mtr">{{abs(teaminfo.TotalCloudPayAmount)}}</div>
                </div>
              </div>
              <div class="detailinfo df">
                <div class="bycard">
                  <div class="f12 c999"> <span class="roll dib green"></span><span>码牌活动交易额(元)</span></div>
                  <div class="f14 c666 money">{{abs(teaminfo.TotalActiveAmount)}}</div>
                </div>
                <div class="bycloud">
                  <div class="f12 c999"> <span class="roll dib blue"></span><span>POS借记卡交易额(元)</span></div>
                  <div class="f14 c666 money mtr">{{abs(teaminfo.TotalUnActiveAmount)}}</div>
                </div>
              </div>
            </div>
            <div class="user df rel jcsb">
              <div class="bycard">
                <div class="f12 c999"> <span>累计总创客(人)</span></div>
                <div class="f14 c666 all">{{teaminfo.TotalUser}}</div>
              </div>
              <div class="bycloud ml60">
                <div class="f12 c999"> <span>新增创客(人)</span></div>
                <div class="f14 c666 all mtr add">+{{teaminfo.AddUser}}</div>
              </div>
            </div>
            <div class="user df rel jcsb" @click="goteamactive">
              <div class="bycard">
                <div class="f12 c999"> <span>累计激活POS机商户(户)</span></div>
                <div class="f14 c666 all">{{teaminfo.TotalPosMerchant}}</div>
              </div>
              <div class="bycloud ml60">
                <div class="f12 c999"> <span>累计激活码牌商户(户)</span></div>
                <div class="c666 f14 mtr">{{teaminfo.TotalActMerchant}}</div>
                <div class="abs righticon">
                  <van-icon name="arrow"></van-icon>
                </div>
              </div>
            </div>
            <div class="user df rel jcsb">
              <div class="bycard">
                <div class="f12 c999"> <span>支付宝总订单数</span></div>
                <div class="f14 c666 all">{{teaminfo.TotalAlipayOrder}}</div>
              </div>
              <div class="bycloud ml60">
                <div class="f12 c999"> <span>微信总订单数</span></div>
                <div class="c666 f14 mtr">{{teaminfo.TotalWeChatOrder}}</div>
                <div class="abs righticon"></div>
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </div>
      <van-popup class="product_mymerchant_transaction" v-model="showDate" position="bottom" :style="{ height: '50%' }" v-cloak>
        <van-datetime-picker v-model="currentDate" type="year-month" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @cancel="showDate = false" @confirm="onConfirmDate"></van-datetime-picker>
      </van-popup>
    </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>
      function OnStart(){
        PublicLib.SetStatusBarStyle({type:'light', isShow:1});
      };
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      //--- PublicLib.SetStatusBarStyle({type:'light', isShow:1});
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            refreshing: false,
            toptitleisshow:true,
            ecgart1: [
              { value: 0, name: '暂时没有数据' },            
            ],
            personelinfo:{
              TotalAmount:0,
              TotalPosAmount:0,
              TotalCloudPayAmount:0,
              TotalActiveAmount:0,
              TotalUnActiveAmount:0,
            },
            teaminfo:{
              TotalAmount:0,
              TotalPosAmount:0,
              TotalCloudPayAmount:0,
              TotalActiveAmount:0,
              TotalUnActiveAmount:0,
            },
            ecgart2team: [
              //- 默认空数据
              { value: 0, name: '暂时没有数据' },
            ],
            showDate: false,
            currentDate: new Date(),
            minDate: new Date(new Date().getFullYear(),(new Date().getMonth() - 5)),
            maxDate: new Date(),
            nowdate: '',
          };
        },
        created(){
          this.onConfirmDate();
        },
        methods: {
          onRefresh() {
            // 清空列表数据
            this.onConfirmDate();
          },
          formatter(type, val) {
            if (type === 'year') {
              return `${val}年`;
            } else if (type === 'month') {
              return `${val}月`;
            } else if (type === 'day') {
              return `${val}日`;
            }
            return val;
          },
          onConfirmDate() {
            this.showDate = false;
            this.nowdate = this.currentDate.getFullYear() + '-' + (this.currentDate.getMonth() + 1);
            this.getperformanceinfo();
            this.getteaminfo();
          },
          onConformateDate(){
            return fillzero(formatDate(this.currentDate.getFullYear(),this.currentDate.getMonth() + 1));
          },
          echartpersonal(){
            var myChart = echarts.init(this.$refs.echartpersonal);
            const option = {
              tooltip: {
                show:false,
                trigger: 'item'
              },
              legend: {
                show:false,
                top: 'center',
                left: 'center'
              },
              color:['#EDE9E9','#FF574D','#FFD320','#189754','#4380F3'],
              series: [
                {
                  type: 'pie',
                  radius: ['60%', '100%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: false,
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data:this.ecgart1
                }
              ]
            };
            myChart.setOption(option);
          },
          echartpersonal2team(){
            var myChart = echarts.init(this.$refs.echartpersonal2team);
            const option = {
              tooltip: {
                show:false,
                trigger: 'item'
              },
              legend: {
                show:false,
                top: 'center',
                left: 'center'
              },
              color:['#EDE9E9','#FF574D','#FFD320','#189754','#4380F3'],
              series: [
                {
                  type: 'pie',
                  radius: ['60%', '100%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: false,
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data:this.ecgart2team
                }
              ]
            };
            myChart.setOption(option);
          },
          //- 获取个人交易
          async getperformanceinfo(){
            //- PublicLib.ShowLoading({Message:''});
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/usertradedaysummary/personalperformance?t='+Math.random(6),JSON.stringify({TradeMonth:this.onConformateDate(),UserId}));
            if(res.status !== '1')return tips('个人交易获取失败！');
            //- PublicLib.HideLoading();
            res.data.TotalAmount = res.data.TotalAmount.toFixed(2);
            res.data.TotalPosAmount = res.data.TotalPosAmount.toFixed(2);
            res.data.TotalCloudPayAmount = res.data.TotalCloudPayAmount.toFixed(2);
            res.data.TotalActiveAmount = res.data.TotalActiveAmount.toFixed(2);
            res.data.TotalUnActiveAmount = res.data.TotalUnActiveAmount.toFixed(2);
            this.personelinfo = res.data;
            if(res.data.TotalAmount === '0.00') {
              return this.echartpersonal();
            };
            this.ecgart1 = [
              {value:0,name:'空'},
              {value:res.data.TotalPosAmount,name:'POS机刷卡交易额'},
              {value:res.data.TotalCloudPayAmount,name:'云闪付小额交易额'},
              {value:res.data.TotalActiveAmount,name:'码牌活动交易'},
              {value:res.data.TotalUnActiveAmount,name:'码牌非活动交易'}
              ];
            this.echartpersonal();
          },
          //- 获取计奖交易
          async getteaminfo(){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/usertradedaysummary/teamperformance?t='+Math.random(6),JSON.stringify({TradeMonth:this.onConformateDate(),UserId}));
            if(res.status !== '1')return tips('计奖交易获取失败！');
            res.data.TotalAmount = res.data.TotalAmount.toFixed(2);
            res.data.TotalPosAmount = res.data.TotalPosAmount.toFixed(2);
            res.data.TotalCloudPayAmount = res.data.TotalCloudPayAmount.toFixed(2);
            res.data.TotalActiveAmount = res.data.TotalActiveAmount.toFixed(2);
            res.data.TotalUnActiveAmount = res.data.TotalUnActiveAmount.toFixed(2);
            this.teaminfo = res.data;
            this.refreshing = false;
            if(res.data.TotalAmount === '0.00') {
              return this.echartpersonal2team();
            };
            this.ecgart2team = [
              {value:0,name:'空'},
              {value:res.data.TotalPosAmount,name:'POS机刷卡交易额'},
              {value:res.data.TotalCloudPayAmount,name:'云闪付小额交易额'},
              {value:res.data.TotalActiveAmount,name:'码牌活动交易'},
              {value:res.data.TotalUnActiveAmount,name:'码牌非活动交易'}
            ];
            this.echartpersonal2team();
          },
          trendpic(val){
            PublicLib.putCookieInfo('trendtype', val);
            PublicLib.Goto({Url:'product-trendchart'});
          },
          gopersonalactive(){
            PublicLib.Goto({Url:'merchant-personal-active'});
          },
          mymerchant(){
            PublicLib.Goto({Url:'creater-list'});
          },
          goback(){
            PublicLib.GoBack({Level:1});
          },
          gopersonalachievement(){
            PublicLib.Goto({Url:'personal-achievement'});
          },
          goteamachievement(){
            PublicLib.Goto({Url:'team-achievement'});
          },
          goteamactive(){
            PublicLib.Goto({Url:'merchant-active'});
          }
        }
      });
    </script>
  </body>
</html>