<!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"> <link rel="stylesheet" href="https://ap.kexiaoshuang.com/skin/app/default/static/css/_keyframes.css"> <link rel="stylesheet" href="https://ap.kexiaoshuang.com/skin/app/default/static/css/year-report.css"> <style> .m0a{ margin: 0 auto; } .width90{ width:90% !important; } @keyframes translateY0-100 { 0% { transform: translate(-50%,0) rotate(180deg); opacity: 0.5; } 50% { transform: translate(-50%,50%) rotate(180deg); opacity: 1; } 100%{ transform: translate(-50%,0) rotate(180deg); opacity: 0.5; } } @keyframes scale1-3-1 { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } .year-report .fourth2 .kv{ //- animation: opachalf-1 0.5 forwards; } .amtBox:{animation: none !important;} .kv{animation:scale1-3-1 1s ease-in-out} .year-report .second .kv .df { width: 6.56rem; height: 6.2rem; top: 0.7667rem; } .openAnm{} .next{animation:translateY0-100 1s 0.3s ease-in-out infinite;bottom:1rem !important;transform:} .first .kv, .second .kv, .third1 .kv, .third2 .kv, .fourth1 .kv, .fourth2 .kv, .fiveth .kv, .sixth .kv, .seventh .kv{ background-size: cover !important; } .flexdimg{ animation:none !important; } .bgctra{background:transparent !important;} .year-report .seventh .kv .df{ width:100%; } </style> </head> <body class="pb0 pt0 ovh fl" style="padding:0;"> <div class="year-report bgctra invited-old" id="app" v-cloak> <div class="year-report abs" style="z-index:-1;"></div> <div class="vh100" @touchend="gtouchend" @touchstart="gtouchstart"><img class="bottom1 mt16 abs" src="./static/images/report-bottom-1.png" alt="alt"> <transition class="openAnm" name="fade"> <div class="first m0a ovh rel width90" v-if="pageNum === 1"><img class="logo" src="./static/images/report-LOGO.png" alt="alt"><img class="kv db" src="./static/images/report-KV.png" alt="alt" style="width:100%;"></div> </transition> <transition name="fade"> <div class="second m0a ovh width90" v-if="pageNum === 2"><img class="logo" src="./static/images/report-LOGO.png" alt="alt"> <div class="kv m0a rel"> <div class="df abs jcsb"> <div class="f15" style="animation: opac0-1 1s 0.1s forwards; opacity:0;">3月8日 创业帮立项</div> <div class="f15" style="animation: opac0-1 1s 0.2s forwards; opacity:0;">3月10日 创业帮正式上线 金控机具同步上线</div> <div class="f15"> <div class="f15" style="animation: opac0-1 1s 0.3s forwards; opacity:0;">3月11日 平台首次进件 </div> </div> <div class="f15"> <div style="animation: opac0-1 1s 0.5s forwards; opacity:0;">3月24日17:24:01 </div><span style="animation: opac0-1 1s 0.6s forwards; opacity:0;">创业帮平台日交易量</span><span class="b f16" style="animation: opac0-1 1s 0.6s forwards; opacity:0;">突破333万</span> </div> <div class="f15"> <div style="animation: opac0-1 1s 0.8s forwards; opacity:0;">4月28日09:09:36 </div><span style="animation: opac0-1 1s 0.9s forwards; opacity:0;">创业帮平台总交易量</span><span class="b f16" style="animation: opac0-1 1s 1s forwards; opacity:0;">破十亿</span> </div> </div> </div> </div> </transition> <transition name="fade"> <div class="third1 m0a ovh rel width90" v-if="pageNum === 3"><img class="logo" src="./static/images/report-LOGO.png" alt="alt"> <div class="kv m0a"> <div class="df m0a mt8 jcsb warp"> <div class="df jcsb aic" v-for="item,index in amountRank" :key="index" ref="showindex" style="opacity:0"><img class="left" src="./static/images/report-num1.png" alt="" v-if="index === 0"><img class="left" src="./static/images/report-num2.png" alt="" v-if="index === 1"><img class="left" src="./static/images/report-num3.png" alt="" v-if="index === 2"> <div class="left" v-if="index > 2">{{index+1}}</div> <div class="center">{{item.realname}}</div> <div class="right">{{item.thisamount}}</div> </div> </div> </div> </div> </transition> <transition name="fade"> <div class="third2 m0a ovh rel width90" v-if="pageNum === 4"><img class="logo" src="./static/images/report-LOGO.png" alt="alt"> <div class="kv m0a"> <div class="df m0a mt8 jcsb warp"> <div class="df jcsb aic" v-for="item,index in countRank" :key="index" ref="showindex" style="opacity:0"><img class="left" src="./static/images/report-num1.png" alt="" v-if="index === 0"><img class="left" src="./static/images/report-num2.png" alt="" v-if="index === 1"><img class="left" src="./static/images/report-num3.png" alt="" v-if="index === 2"> <div class="left" v-if="index > 2">{{index+1}}</div> <div class="center">{{item.realname}}</div> <div class="right">{{item.thismonthcount}}</div> </div> </div> </div> </div> <div class="fourth1 m0a ovh width90" v-if="pageNum === 5"><img class="logo" src="./static/images/report-LOGO.png" alt="alt"> <div class="kv m0a rel" style="background:none"><img class="flexdimg" src="./static/images/report-KV4.png" alt="" style="width:100%;height:100%"><img class="abs" src="./static/images/report-person.png" alt=""></div> </div> <div class="fourth2 m0a ovh width90" v-if="pageNum === 6"><img class="logo" src="./static/images/report-LOGO.png" alt="alt"> <div class="kv m0a rel" style="background:none"><img src="./static/images/report-KV4-2.png" alt="" style="width:100%;height:100%"><img class="abs" src="./static/images/report-person.png" alt=""> <div class="df abs jcsb" style="color:#FD8817;"> <div> <div class="f15" style="animation: opac0-1 1s 0.1s forwards; opacity:0;">{{firstCome}}</div> <div class="f15" style="animation: opac0-1 1s 0.2s forwards; opacity:0;">是你来到创业帮的第一天</div> <div class="f15" style="animation: opac0-1 1s 0.3s forwards; opacity:0;">隔着这个屏幕</div> <div class="f15" style="animation: opac0-1 1s 0.4s forwards; opacity:0;">我们开始紧密相连</div> </div> <div class="mt16"> <div class="f15" v-if="firstOpenDay.length" style="animation: opac0-1 1s 0.5s forwards; opacity:0;">{{firstOpenDay}} </div> <div class="f15" v-if="firstOpenDay.length" style="animation: opac0-1 1s 0.6s forwards; opacity:0;">是你第一次为商户完成开机</div> <div class="f15" style="animation: opac0-1 1s 0.7s forwards; opacity:0;">成功的背后</div> <div class="f15" style="animation: opac0-1 1s 0.8s forwards; opacity:0;">是你的辛勤付出</div> <div class="f15" style="animation: opac0-1 1s 0.9s forwards; opacity:0;">他们的日子方便了一点</div> <div class="f15" style="animation: opac0-1 1s 1s forwards; opacity:0;">你的生活也红火了一点</div> </div> </div> </div> </div> </transition> <transition name="fade"> <div class="fiveth m0a ovh width90" v-if="pageNum === 7"><img class="logo" src="./static/images/report-LOGO.png" alt="alt"> <div class="kv m0a rel"> <div class="amtBox abs"><img class="abs" src="./static/images/report-start.png" alt=""></div> <div class="df abs jcsb"> <div> <div class="f15" style="animation: opac0-1 1s 0.1s forwards; opacity:0;">白天越来越长</div> <div class="f15" style="animation: opac0-1 1s 0.2s forwards; opacity:0;">夜晚越来越热</div> <div class="f15" style="animation: opac0-1 1s 0.3s forwards; opacity:0;">却始终能看到你熟悉的步伐</div> </div> <div> <div class="f15" style="animation: opac0-1 1s 0.4s forwards; opacity:0;">这些天你推荐了{{achivment.AddUser}}个伙伴</div> <div class="f15" style="animation: opac0-1 1s 0.5s forwards; opacity:0;">开了{{achivment.TotalPosMerchant}}台机具</div> <div class="f15" style="animation: opac0-1 1s 0.6s forwards; opacity:0;">交易额突破了{{totalamount}}元</div> <div class="f15" style="animation: opac0-1 1s 0.7s forwards; opacity:0;">每一句你好</div> <div class="f15" style="animation: opac0-1 1s 0.8s forwards; opacity:0;">都是为幸福生活努力的声音</div> </div> </div> </div> </div> </transition> <transition name="fade"> <div class="sixth m0a ovh width90" v-if="pageNum === 8"><img class="logo" src="./static/images/report-LOGO.png" alt="alt"> <div class="kv m0a rel"><img class="abs" id="s1" src="./static/images/report-start.png" alt=""> <div class="amtBox abs" style="animation: opachalf-1 1s 4s forwards;"><img class="abs" id="s2" src="./static/images/report-start.png" alt="" style="animation: opachalf-1 3s 4s infinite;"><img class="abs" id="s3" src="./static/images/report-start.png" alt="" style="animation: opachalf-1 3s 5.5s infinite;"><img class="abs" id="s4" src="./static/images/report-start.png" alt="" style="animation: opachalf-1 3s 6.8s infinite;"><img class="abs" id="s5" src="./static/images/report-start.png" alt="" style="animation: opachalf-1 3s 5s infinite;"><img class="abs" id="s6" src="./static/images/report-start.png" alt="" style="animation: opachalf-1 3s 5.2s infinite;"><img class="abs" id="s7" src="./static/images/report-start.png" alt="" style="animation: opachalf-1 3s 4.3s infinite;"><img class="abs" id="s8" src="./static/images/report-start.png" alt="" style="animation: opachalf-1 3s 5.4s infinite;"></div> <div class="df abs jcsb" style="width: 5.8733rem;height: 4.9733rem;"> <div> <div class="f15" style="animation: opac0-1 1s 4.1s forwards;opacity:0;">用微光点燃微光</div> <div class="f15" style="animation: opac0-1 1s 4.2s forwards;opacity:0;">微光照亮微光</div> <div class="f15" style="animation: opac0-1 1s 4.3s forwards;opacity:0;">最终我们将连在一起发光</div> </div> <div v-if="isApp"> <div class="f15" style="animation: opac0-1 1s 4.4s forwards;opacity:0;">感谢创业帮全体伙伴的辛勤付出</div> <div class="f15" style="animation: opac0-1 1s 4.5s forwards;opacity:0;">写下你的期望</div> <div class="f15" style="animation: opac0-1 1s 4.6s forwards;opacity:0;">定下你的年度目标</div> <div class="f15" style="animation: opac0-1 1s 4.7s forwards;opacity:0;">也许惊喜将在不远后发生</div> </div> <div v-if="!isApp"> <div class="f15" style="animation: opac0-1 1s 4.4s forwards;opacity:0;">加入创业帮</div> <div class="f15" style="animation: opac0-1 1s 4.5s forwards;opacity:0;">与我一起直面惊喜</div> <div class="f15" style="animation: opac0-1 1s 4.6s forwards;opacity:0;">也许惊喜将在不远后发生</div> </div> </div> <div class="form abs" v-if="isApp"> <input type="text" placeholder="写下你对自己的的年度期望" v-model="formInfo.ExpectAmount "> <input class="mt8" type="text" placeholder="写下你的年度目标业绩" v-model="formInfo.TargetAmount"> <div class="pt16 bc333"> <van-button type="primary" block color="#FFD500" round @click="submit">提交目标</van-button> </div> </div> <div class="form abs" v-if="!isApp" style="height: 0.5rem;"> <div class="pt16 bc333"> <van-button type="primary" block color="#FFD500" round @click="joinus">点击加入</van-button> </div> </div> </div> </div> </transition> <transition name="fade"> <div class="seventh m0a width90" v-if="pageNum === 9"><img class="logo" src="./static/images/report-LOGO.png" alt="alt"> <div class="kv m0a rel"> <div class="df m0a jcsb abs"> <div class="f20" style="animation: opac0-1 1s 0.1s forwards;opacity:0;">创业帮上线首月成绩单</div> <div> <div class="f15" style="animation: opac0-1 1s 0.2s forwards;opacity:0;">这些天</div> <div class="f15" style="animation: opac0-1 1s 0.3s forwards;opacity:0;">我在创业帮推荐了{{achivment.AddUser}}个伙伴</div> <div class="f15" style="animation: opac0-1 1s 0.4s forwards;opacity:0;">开了{{achivment.TotalPosMerchant}}台机具</div> <div class="f15" style="animation: opac0-1 1s 0.5s forwards;opacity:0;">交易额突破了{{totalamount}}元</div> </div> <div> <div class="f15" style="animation: opac0-1 1s 0.6s forwards;opacity:0;">在今年</div> <div class="f15" style="animation: opac0-1 1s 0.7s forwards;opacity:0;">我期望是: {{formInfo.ExpectAmount }} </div> <div class="f15" style="animation: opac0-1 1s 0.8s forwards;opacity:0;">我的目标是: {{formInfo.TargetAmount}}</div> <div class="f15" style="animation: opac0-1 1s 0.9s forwards;opacity:0;">我的生活</div> <div class="f15" style="animation: opac0-1 1s 1.1s forwards;opacity:0;">将因为这一点一滴的行动</div> <div class="f15" style="animation: opac0-1 1s 1.2s forwards;opacity:0;">变得更加美好</div> </div> </div> <van-button type="primary" block color="#FD8817" round @click="share" v-if="type === 'ios'">分享成绩</van-button> <van-button type="primary" block color="#FD8817" round @click="share" v-if="type === 'android'">返回分享</van-button> </div> </div> </transition> </div><img class="next" src="./static/images/report-nextPage.png" alt="" @click="nextPage" v-if="pageNum !== 8 && pageNum!==9"> <van-popup class="bgcf7f7f7" v-model="show" position="bottom" :style="{ height: '28%' }"> <div class="sharepanel rel"> <div class="f12 c999 tc">分享到</div> <van-grid class="grad" :column-num="2"> <van-grid-item text="微信" @click="weixin"> <template #icon> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-weixin"> </use> </svg> </template> </van-grid-item> <van-grid-item text="微信朋友圈" @click="weixinfriend"> <template #icon> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-pengyouquan"></use> </svg> </template> </van-grid-item> </van-grid> <div class="tc mt16 cencal abs bgcfff f14 c333" @click="show = false">取消</div> </div> </van-popup> </div> <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/iconfont.js"></script> <script> //- PublicLib.SetStatusBarStyle({type:'light', isShow:1}); // 通过 CDN 引入时不会自动注册 Lazyload 组件 // 可以通过下面的方式手动注册 // 在 #app 标签下渲染一个按钮组件 let app = new Vue({ el: '#app', data() { return { show:false, firstCome:'', isApp:true, dateArr:[], totalamountArr:[], firstOpenDay:'', achivment:{ TotalPosMerchant:0, AddUser:0, }, amountRank:[], countRank:[], startPrice:100000, formInfo:{ ExpectAmount:'', TargetAmount:'', }, pagY:'', pagY1:'', pageNum:1, timer:'', timer2:'', timer3:'', type:'', }; }, created() { if(PublicLib.getCookieInfo('isApp') === 'true'){ this.isApp = true; }else{ this.isApp = false; PublicLib.putCookieInfo('userId',this.getUrlParam('Id')); }; this.type = browsertype.versions.ios ? 'ios' : 'android'; this.personalInfo(); this.theFirstOpen(0); this.theFirstOpen(1); this.theFirstOpen(2); this.theFirstOpen(3); this.makerSortDo() this.makerFlowingSortDo() this.getMonthInfo('202003') this.getMonthInfo('202004') this.getMonthInfo('202005') }, mounted(){ this.autoPage() }, updated(){ this.$refs.showindex.forEach((item,index)=>{ console.dir(item.style); item.style.animation = `opac0-1 1s ${(index+1)*.2}s forwards` }) }, watch:{ pageNum:function (val) { console.log(val,'val') if(val === 5){ this.timer2 = setTimeout(()=>{ this.pageNum ++ },1000) } if(val === 7){ this.timer3 = setInterval(()=>{ this.startPrice * 9 },1000) } clearInterval(this.timer3) }, }, computed:{ totalamount:function(){ let sum = 0 return this.abs(this.totalamountArr.reduce( (pre, cur) => pre + cur, sum )) } }, methods: { //- 截取参数函数 getUrlParam(name){ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 }, // 金额展示处理函数(1000,423,324,322.00) abs (val){ //金额转换 保留2位小数 并每隔3位用逗号分开 1,234.56 let str = (val/1).toFixed(2) + '' let intSum = str.substring(0,str.indexOf(".")).replace( /\B(?=(?:\d{3})+$)/g, ',' ) //取到整数部分 let dot = str.substring(str.length,str.indexOf(".")) //取到小数部分搜索 let ret = intSum + dot; return ret; }, //- 用户信息 async personalInfo(){ const Id = PublicLib.getCookieInfo('userId'); const res = await getRequest('api/v1/users/personalinfo?t='+Math.random(6),JSON.stringify({Id})); if(res.status === '1' && res.data.AuthDate) { let data = ''; const zero = this.changedata(res.data.AuthDate,5) === '0' ? '': this.changedata(res.data.AuthDate,5); const month = zero + '' + this.changedata(res.data.AuthDate,6); const day = this.changedata(res.data.AuthDate,8) + '' + this.changedata(res.data.AuthDate,9); this.firstCome = `${month} 月 ${day} 日`; }; }, changedata(str,ind){ let arr = str.split(''); return arr[ind]; }, //- 第一次开机 async theFirstOpen(ProductType){ const UserId = PublicLib.getCookieInfo('userId'); const res = await getRequest('api/v1/pos/merchantinfo/mymerchant?t='+Math.random(6),JSON.stringify({PageSize:10,PageNum:1,UserId,ActiveStatus:1,ProductType,MinTrade:'',MaxTrade:'',ActTime:'',Sort:'trade'})); if(res.status === '1') { if(res.data.length){ this.dateArr.push((new Date(res.data[0].KqRegTime)).getTime()) this.sortDate(); }else{ this.firstOpenDay = '' } }; }, //- 机具排行榜 async makerSortDo(){ const res = await getRequest('api/v1/LargeDataScreen/MakerSort?t='+Math.random(6),JSON.stringify({})); if(res.status === '1') { this.countRank = res.data console.log(this.countRank) }; }, //- 交易额排行榜 async makerFlowingSortDo(){ const res = await getRequest('api/v1/LargeDataScreen/MakerFlowingWaterSort?t='+Math.random(6),JSON.stringify({})); if(res.status === '1'){ this.amountRank = res.data this.amountRank.map((item)=>{this.abs(item.thisamount)}) } }, //- 交易额 async getMonthInfo(month){ const UserId = PublicLib.getCookieInfo('userId'); const res = await getRequest('api/v1/usertradedaysummary/teamperformance?t='+Math.random(6),JSON.stringify({TradeMonth:'202204',UserId})); if(res.status === '1') { this.achivment = res.data this.totalamountArr.push(res.data.TotalAmount) console.log(this.totalamountArr,'总交易额数组') }; }, //提交表单 async submitFormInfo(){ const UserId = PublicLib.getCookieInfo('userId'); this.pageNum ++; const res = await postRequest('api/v1/LargeDataScreen/UsersWish?t='+Math.random(6),JSON.stringify({...this.formInfo,UserId})) if(res.status !== '1'){ tips('请重试!') } //- if(res.status === '1'){ //- } }, sortDate(){ this.dateArr.sort((a,b)=>a-b) let date = new Date( this.dateArr[0]) this.firstOpenDay = `${date.getMonth() + 1} 月 ${date.getDate()} 日` }, backbtn(){ PublicLib.GoBack({Level:1}); }, submit(){ if(this.formInfo.ExpectAmount.length === 0 || this.formInfo.TargetAmount.length === 0){ return tips('请写下目标!') }; if(this.formInfo.ExpectAmount.length >= 15 || this.formInfo.TargetAmount.length >=15){ return tips('请不要超过15个字!') }; this.submitFormInfo() }, gtouchstart(e){ this.pagY = e.changedTouches[0].clientY; clearInterval( this.timer) clearInterval( this.timer2) }, gtouchend(e){ this.pagY1 = e.changedTouches[0].clientY; this.autoPage() if((this.pagY1 - this.pagY) > 50){ clearInterval(this.timer2) if(this.pageNum >= 2 && this.pageNum <= 9){ this.pageNum -- if(this.pageNum === 5 ){ this.pageNum = 4 } } //- console.log( this.pageNum,'up','timer2',this.timer2) }; if((this.pagY1 - this.pagY) < -50){ if(this.pageNum >= 1 && this.pageNum < 8){ this.pageNum ++ } //- console.log( this.pageNum,'down') }; }, autoPage(time = 4000){ this.timer = setInterval(()=>{ if(this.pageNum >= 1 && this.pageNum < 8){ this.pageNum ++ } },time) }, nextPage(){ if(this.pageNum >= 1 && this.pageNum < 8){ this.pageNum ++ } }, joinus(){ const UserId = PublicLib.getCookieInfo('userId'); window.location.href = 'http://bs.kexiaoshuang.com/p/user-inviteregist-1?Id='+UserId; }, share(){ if(this.type === 'ios'){ this.show = true; }else{ this.backbtn(); }; }, weixin(){ const UserId = PublicLib.getCookieInfo('userId'); const Url = 'http://bs.kexiaoshuang.com/p/year-report4?Id='+UserId; PublicLib.ShareAppMessageImage({Title:'创业帮破十亿啦!', Detail:'点击查看我的创客历程', Icon:'https://bs.kexiaoshuang.com/static/share-logo.png', Url}); }, weixinfriend(){ const UserId = PublicLib.getCookieInfo('userId'); const Url = 'http://bs.kexiaoshuang.com/p/year-report4?Id='+UserId; PublicLib.ShareTimeline({Title:'创业帮破十亿啦!', Detail:'点击查看我的创客历程', Icon:'https://bs.kexiaoshuang.com/static/share-logo.png', Url}); }, } }); </script> </body> </html>