lichunlei
/
mp_consumerap


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
							<!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 pb0">
    <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="#fff" size="20"></van-icon>
        </template>
      </van-nav-bar>
      <div class="performance_toppanel ovh">
        <div class="title df cfff mt8">
          <div class="time"><span>{{nowdate}}</span>
            <van-icon name="arrow"> </van-icon>
          </div>
          <div class="tips 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"></div>
            <div class="data">
              <div class="f14 c999">总交易额(元)
                <van-icon name="arrow"> </van-icon>
              </div>
              <div class="money"> {{personelinfo.TradeAmount}}</div>
            </div>
          </div>
          <div class="detailinfo df">
            <div class="bycard">
              <div class="f12 c999"> <span class="roll dib"></span><span>大额交易(元)</span></div>
              <div class="f14 c666 money">{{personelinfo.CardAmount}}</div>
            </div>
            <div class="bycloud">
              <div class="f12 c999"> <span class="roll dib"></span><span>小额交易(元)</span></div>
              <div class="f14 c666 money">{{personelinfo.QrPayAmount}}</div>
            </div>
          </div>
        </div>
        <div class="user df rel" @click="mymerchant">
          <div class="bycard">
            <div class="f12 c999"> <span class="mr12">累计总创客(人)</span></div>
            <div class="f14 c666 all">{{personelinfo.MakerCount}}</div>
          </div>
          <div class="bycloud ml60">
            <div class="f12 c999"> <span>新增创客(人)</span></div>
            <div class="c666 add">+ {{personelinfo.AddMakerCount}}</div>
            <div class="abs righticon">
              <van-icon name="arrow"> </van-icon>
            </div>
          </div>
        </div>
        <div class="user df rel" @click="gopersonalactive">
          <div class="bycard">
            <div class="f12 c999"> <span>累计活动商户(户)</span></div>
            <div class="f14 c666 all">{{personelinfo.ActMerchantCount}}</div>
          </div>
          <div class="bycloud ml60">
            <div class="f12 c999"> <span>新增活动商户(户)</span></div>
            <div class="c666 add">+ {{personelinfo.AddActMerchantCount}}</div>
            <div class="abs righticon">
              <van-icon name="arrow"> </van-icon>
            </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"></div>
            <div class="data">
              <div class="f14 c999">总交易额(元)
                <van-icon name="arrow"> </van-icon>
              </div>
              <div class="money">{{teaminfo.TradeAmount}}</div>
            </div>
          </div>
          <div class="detailinfo df">
            <div class="bycard">
              <div class="f12 c999"> <span class="roll dib"></span><span>大额交易(元)</span></div>
              <div class="f14 c666 money">{{teaminfo.CardAmount}}</div>
            </div>
            <div class="bycloud">
              <div class="f12 c999"> <span class="roll dib"></span><span>小额交易(元)</span></div>
              <div class="f14 c666 money">{{teaminfo.QrPayAmount}}</div>
            </div>
          </div>
        </div>
        <div class="user df rel">
          <div class="bycard">
            <div class="f12 c999"> <span class="mr12">累计总创客(人)</span></div>
            <div class="f14 c666 all">{{teaminfo.MakerCount}}</div>
          </div>
          <div class="bycloud ml60">
            <div class="f12 c999"> <span>新增创客(人)</span></div>
            <div class="c666 add">+ {{teaminfo.AddMakerCount}}</div>
          </div>
        </div>
        <div class="user df rel" @click="goteamactive">
          <div class="bycard">
            <div class="f12 c999"> <span>累计活动商户(户)</span></div>
            <div class="f14 c666 all">{{teaminfo.ActMerchantCount}}</div>
          </div>
          <div class="bycloud ml60">
            <div class="f12 c999"> <span>新增活动商户(户)</span></div>
            <div class="c666 add">+ {{teaminfo.AddActMerchantCount}}</div>
            <div class="abs righticon">
              <van-icon name="arrow"> </van-icon>
            </div>
          </div>
        </div>
      </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/klm-vv.min.js"></script>
    <script src="./static/js/echarts.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,
            ecgart1: [
              { value: 0, name: '暂时没有数据' },            
            ],
            personelinfo:{
            },
            teaminfo:{
            },
            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: {
          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'],
              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'],
              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',JSON.stringify({TradeMonth:this.onConformateDate(),UserId}));
            if(res.status !== '1')return tips('个人业绩获取失败！');
            PublicLib.HideLoading();
            this.personelinfo = res.data;
            if(this.nowdate === new Date().getFullYear()+'-'+ (new Date().getMonth()+1)) {
              this.personelinfo = {
                ActMerchantCount: 24,
                AddActMerchantCount: 3,
                AddMakerCount: 5,
                CardAmount: 45421.02,
                MakerCount: 35,
                QrPayAmount: 15421.52,
                TradeAmount:(15421.52 + 45421.02).toFixed(2),
              };
            };
            //- if(this.nowdate = this.)
            if(this.personelinfo.TradeAmount == 0) {
              return this.echartpersonal();
            };
            this.ecgart1 = [
              {value:0,name:'空'},
              {value:this.personelinfo.CardAmount,name:'大额'},
              {value:this.personelinfo.QrPayAmount,name:'小额'}
              ];
            this.echartpersonal();
          },
          async getteaminfo(){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('/api/v1/usertradedaysummary/teamperformance',JSON.stringify({TradeMonth:this.onConformateDate(),UserId}));
            if(res.status !== '1')return tips('团队业绩获取失败！');
            this.teaminfo = res.data;
            this.teaminfo = res.data;
            console.log(this.currentDate == new Date()) 
            if(this.nowdate === new Date().getFullYear()+'-'+ (new Date().getMonth()+1)) {
              this.teaminfo = {
                ActMerchantCount: 85,
                AddActMerchantCount: 13,
                AddMakerCount: 12,
                CardAmount: 945421.02,
                MakerCount: 95,
                QrPayAmount: 515421.38,
                TradeAmount:(515421.38 + 945421.02).toFixed(2),
              };
            };
            //- if(this.nowdate = this.)
            if(this.teaminfo.TradeAmount == 0) {
              return this.echartpersonal2team();
            };
            this.ecgart2team = [
              {value:0,name:'空'},
              {value:this.teaminfo.CardAmount,name:'大额'},
              {value:this.teaminfo.QrPayAmount,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>