<!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>