year-report4.html 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>月度账单-创业帮</title>
  6. <meta name="keywords" content="月度账单-创业帮">
  7. <meta name="description" content="月度账单-创业帮">
  8. <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  11. <meta content="telephone=no" name="format-detection">
  12. <meta content="email=no" name="format-detection">
  13. <meta name="apple-mobile-web-app-title" content="月度账单-创业帮">
  14. <meta http-equiv="Cache-Control" content="no-siteapp">
  15. <link rel="stylesheet" href="./static/css/main.css">
  16. <!-- <link rel="stylesheet" href="./static/css/year-report.css">
  17. <link rel="stylesheet" href="./static/css/_keyframes.css"> -->
  18. <link rel="stylesheet", href="https://ap.kexiaoshuang.com/skin/app/default/static/css/_keyframes.css?t=123">
  19. <link rel="stylesheet", href="https://ap.kexiaoshuang.com/skin/app/default/static/css/year-report.css?t=123">
  20. <style></style>
  21. </head>
  22. <body class="pb0 ovh fl">
  23. <div class="iphonetitle" style="background: linear-gradient( #131e38, #131e38);z-index:-1"></div>
  24. <div class="year-report bgctra invited-old" id="app" v-cloak>
  25. <div class="year-report-2 abs" style="z-index:-1;height:calc(100vh - topheight);min-height:750px" ref="saved"><img class="logoimg" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/headimg.png" alt="alt" v-if="pageNum != 1">
  26. <div class="music" @click="playmp3"><img src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/music.png" alt="alt" :class="{'stopAnimation': !isPlay,'rotate360':isPlay}"></div>
  27. <audio class="audio" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/mp3/city-of-start.mp3" autoplay="autoplay" ref="music" loop="true"></audio><img class="nextPage" v-show="(pageNum != 7 &amp;&amp; pageNum != 8 &amp;&amp; pageNum!=9) " src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/nextPage.png" alt="alt">
  28. <div class="vh100" @touchend="gtouchend" @touchstart="gtouchstart" style="min-height:550px">
  29. <transition name="fade">
  30. <div class="rel" v-if="pageNum === 1"><img class="logoimg" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/logo.png" alt="alt"><img class="abs scal-title" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/scal-title.png" alt="alt" style="width:80vw; margin-left: calc(50% - 40vw);margin-top:1.5rem">
  31. <div class="rel warp1"><img class="abs LOGO1" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/LOGO1.png" alt="alt"><img class="abs hands" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/hands.png" alt="alt"><img class="abs txt" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/text.png" alt="alt"></div>
  32. </div>
  33. </transition>
  34. <transition name="fade">
  35. <div class="df jcsb cfff flex-dir-col pl10" v-if="pageNum === 2">
  36. <div class="mt50" style="animation: opac0-1 1s 0.1s forwards; opacity:0;"><span class="f26 b">3</span><span class="f13"> 月</span><span class="f26 b">8</span><span class="f13 b"> 日 </span><span class="f13 ml14">创业帮立项</span></div>
  37. <div class="mt13" style="animation: opac0-1 1s 0.2s forwards; opacity:0;"><span class="f26 b">3</span><span class="f13"> 月</span><span class="f26 b">10</span><span class="f13"> 日 </span><span class="f13 ml14">创业帮正式上线 金控机具同步上线</span></div>
  38. <div class="mt13" style="animation: opac0-1 1s 0.3s forwards; opacity:0;"> <span class="f26 b">3</span><span class="f13"> 月</span><span class="f26 b">11</span><span class="f13"> 日 </span><span class="f13 ml14">平台首次进件 </span></div>
  39. <div class="mt13" style="animation: opac0-1 1s 0.3s forwards; opacity:0;"> <span class="f13">进件人</span><span class="f26 b"> K8****8</span><span class="f26 b ml14">刘XX</span></div>
  40. <div class="mt50" style="animation: opac0-1 1s 0.4s forwards; opacity:0;"> <span class="f26 b">3</span><span class="f13"> 月</span><span class="f26 b">31</span><span class="f13"> 日 </span><span class="f13 ml14">创业帮上线</span><span class="f26 b"> 20</span><span class="f13"> 天</span></div>
  41. <div class="mt13" style="animation: opac0-1 1s 0.5s forwards; opacity:0;"> <span class="f13">创业帮平台总交易量</span><span class="f26 b ml14">破亿</span></div>
  42. <div class="mt50" style="animation: opac0-1 1s 0.6s forwards; opacity:0;"> <span class="f26 b">5</span><span class="f13"> 月</span><span class="f26 b">31</span><span class="f13"> 日 </span><span class="f13 ml14"> 创业帮上线 </span><span class="f26 b"> 78</span><span class="f13"> 天</span></div>
  43. <div class="mt13" style="animation: opac0-1 1s 0.7s forwards; opacity:0;"> <span class="f13">创业帮平台总交易量</span><span class="f26 b ml14">破十二亿</span></div><img class="abs coin" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/coin.png" alt="alt">
  44. </div>
  45. </transition>
  46. <transition name="fade">
  47. <div class="df jcsb cfff flex-dir-col pl10" v-if="pageNum === 3"><img class="abs phone" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/phone.png" alt="alt">
  48. <div class="abs articl2">
  49. <div class="f13" style="animation: opac0-1 1s 0.1s forwards; opacity:0;"> <span class="f26 b">{{firstCome.month}}</span><span class="f13"> 月 </span><span class="f26 b">{{firstCome.day}}</span><span class="f13"> 日 </span></div>
  50. <div class="f13" style="animation: opac0-1 1s 0.2s forwards; opacity:0;"> <span class="f13">是你来到创业帮的第</span><span class="f26 b"> 1 </span><span class="f13">天</span></div>
  51. <div class="f13 mt13" style="animation: opac0-1 1s 0.3s forwards; opacity:0;">隔着这个屏幕</div>
  52. <div class="f13 mt13" style="animation: opac0-1 1s 0.4s forwards; opacity:0;">我们开始紧密相连</div>
  53. <div class="mt40">
  54. <div class="f13" style="animation: opac0-1 1s 0.5s forwards; opacity:0;" v-if="Object.keys(firstOpenDay).length"> <span class="f26 b">{{firstOpenDay.month}}</span><span class="f13"> 月 </span><span class="f26 b"> {{firstOpenDay.day}}</span><span class="f13"> 日 </span></div>
  55. <div class="f13" v-if="Object.keys(firstOpenDay).length" style="animation: opac0-1 1s 0.6s forwards; opacity:0;"><span class="f13">是你第</span><span class="f26 b"> 1 </span><span class="f13">次为商户完成开机</span></div>
  56. <div class="f13 mt13" style="animation: opac0-1 1s 0.7s forwards; opacity:0;">成功的背后</div>
  57. <div class="f13 mt13" style="animation: opac0-1 1s 0.8s forwards; opacity:0;">是你的辛勤付出</div>
  58. <div class="f13 mt13" style="animation: opac0-1 1s 0.9s forwards; opacity:0;">他们的日子方便了一点</div>
  59. <div class="f13 mt13" style="animation: opac0-1 1s 1s forwards; opacity:0;">你的生活也红火了一点</div>
  60. </div>
  61. </div>
  62. </div>
  63. </transition>
  64. <transition name="fade">
  65. <div class="df jcsb cfff flex-dir-col pl10" v-if="pageNum === 4">
  66. <div class="abs articl3">
  67. <div>
  68. <div class="f13 mt13" style="animation: opac0-1 1s 0.1s forwards; opacity:0;">白天越来越长</div>
  69. <div class="f13 mt13" style="animation: opac0-1 1s 0.2s forwards; opacity:0;">夜晚越来越热</div>
  70. <div class="f13 mt13" style="animation: opac0-1 1s 0.3s forwards; opacity:0;">却始终能看到你熟悉的步伐</div>
  71. </div>
  72. <div class="mt35">
  73. <div class="f13" style="animation: opac0-1 1s 0.4s forwards; opacity:0;"><span class="f13">这些天你推荐了</span><span class="f26 b"> {{achivment.AddUser}}</span><span class="f13"> 个伙伴</span></div>
  74. <div class="f13 mt13" style="animation: opac0-1 1s 0.5s forwards; opacity:0;"> <span class="f13">开了</span><span class="f26 b"> {{achivment.TotalPosMerchant}}</span><span class="f13"> 台机具</span></div>
  75. <div class="f13 mt13" style="animation: opac0-1 1s 0.6s forwards; opacity:0;"><span class="f13">交易额突破了</span><span class="f26 b"> {{totalamount}}</span><span class="f13"> 元</span></div>
  76. <div class="f13 mt35" style="animation: opac0-1 1s 0.7s forwards; opacity:0;">每一句你好</div>
  77. <div class="f13 mt13" style="animation: opac0-1 1s 0.8s forwards; opacity:0;">都是为幸福生活努力的声音</div>
  78. </div>
  79. </div><img class="abs dialog" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/dialog.png" alt="alt">
  80. </div>
  81. </transition>
  82. <transition name="fade">
  83. <div class="rank abs mt40" v-if="pageNum === 5"><img class="abs" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/rank.png" alt="alt">
  84. <div class="articl4 m0a df jcsb flex-dir-col">
  85. <div class="df jcsb aic rel">
  86. <div class="c999 f13">排名 / 姓名</div>
  87. <div class="c999 f13">数量(个)</div>
  88. </div>
  89. <div class="df jcsb aic opc0" v-for="item,index in countRank" :key="index" ref="showindex">
  90. <div class="df aic" style="width:30%">
  91. <div class="f21 c999 tc left" :class="{red: index &lt;= 2}">{{index+1}}</div>
  92. <div class="f13 c333 center">{{item.realName}}</div>
  93. </div>
  94. <div class="f13 c999 right">{{item.openCount}}</div>
  95. </div>
  96. </div>
  97. <div class="c333 f17 abs" style="margin:5% 0 0 5%">创业帮开机量排行榜</div>
  98. </div>
  99. </transition>
  100. <transition name="fade">
  101. <div class="rank abs mt40" v-if="pageNum === 6"><img class="abs" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/rank.png" alt="alt">
  102. <div class="articl4 m0a df jcsb flex-dir-col">
  103. <div class="df jcsb aic rel">
  104. <div class="c999 f13">排名 / 姓名</div>
  105. <div class="c999 f13">金额(元)</div>
  106. </div>
  107. <div class="df jcsb aic opc0" v-for="item,index in amountRank" :key="index" ref="showindex">
  108. <div class="df aic" style="width:30%">
  109. <div class="f21 c999 tc left" :class="{red: index &lt;= 2}">{{index+1}}</div>
  110. <div class="f13 c333 center">{{item.RealName}}</div>
  111. </div>
  112. <div class="f13 c999 right">{{item.Sum}}</div>
  113. </div>
  114. </div>
  115. <div class="c333 f17 abs" style="margin:5% 0 0 5%">创业帮交易额排行榜</div>
  116. </div>
  117. </transition>
  118. <transition name="fade">
  119. <div class="page7 ovh" v-if="pageNum === 7"><img class="page6" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/page6.png" alt="">
  120. <div class="df aic jcsb flex-dir-col cfff articl5 ovh">
  121. <div class="f13">这就是创业帮与你的故事</div>
  122. <div class="f13">每一场学习</div>
  123. <div class="f13">每一次开机</div>
  124. <div class="f13">每一笔收益</div>
  125. <div class="f13">都成就了独一无二的你</div>
  126. <div class="f13">试试生成独属于你的创业词条</div>
  127. </div>
  128. <button class="btn abs" @click="pageNum = 8" style="bottom:15%">
  129. <div class="f16">开始拼贴词条</div><img src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/finger.png" alt="alt" style="width:.4533rem;margin-left:8px">
  130. </button>
  131. </div>
  132. </transition>
  133. <transition name="fade">
  134. <div class="choose" v-if="pageNum === 8"><img class="chooseTitle" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/chooes-title.png" alt="alt">
  135. <div class="df jcsb flex-dir-col wordList">
  136. <div class="cfff f13 word tc rel" v-for="(item,index) in wordList" @click="wrodChoose(item,index)" :class="{ active: item.checked }" v-show="item.page === curPage">{{item.text}}
  137. <div class="f10 abs sortIcon" v-show="item.checked">{{item.ind}}</div>
  138. </div>
  139. <div class="f10 c999">请选择5个你熟悉或喜欢的句子,拼成一个词条</div>
  140. </div>
  141. <div class="df jcsb tool aic">
  142. <button class="corperBtn" @click="changePage('jian')">上一页</button>
  143. <button class="corperBtn" @click="changePage('add')">下一页</button>
  144. <button class="emputyBtn" @click="changePage('emputy')">清空</button>
  145. <div class="f10 c999">当前{{curPage}}/5</div>
  146. </div>
  147. <button class="btn abs" @click="makeWordList">选择5个句子,生成关键词</button>
  148. </div>
  149. </transition>
  150. <transition name="fade">
  151. <div class="choose" v-if="pageNum === 9"><img class="chooseTitle" src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/chooes-title.png" alt="alt">
  152. <div class="df jcsb flex-dir-col wordList" style="height:6.4rem">
  153. <div class="cfff f13 word tc rel" v-for="(item,index) in chooseWords" ref="rilima">{{item.text}}</div>
  154. </div><img src="https://ap.kexiaoshuang.com/skin/app/default/static/images/active/summary/bg9.png" alt="" style="width:100vw;margin-top:-20%;z-index:-1">
  155. <div class="df userInfo" v-show="isCreateBase64"><img class="invitedcode" :src="invitedcode" alt="alt">
  156. <div class="df jcsb flex-dir-col">
  157. <div class="f12 cfff">创客:{{name}}</div>
  158. <div class="f12 cfff">推荐码:{{makerCode}}</div>
  159. <div class="f12 cfff">始于支付,不止支付</div>
  160. </div>
  161. </div>
  162. </div>
  163. </transition>
  164. </div>
  165. </div>
  166. <div class="df aic btnbox" v-show="pageNum === 9 &amp;&amp; !isCreateBase64">
  167. <button class="rechoosebtn" @click="rechoose">重新拼</button>
  168. <button class="sharebtn" @click="share">分享</button>
  169. </div>
  170. <van-popup class="bgcf7f7f7" v-model="show" position="bottom" :style="{ height: '28%' }">
  171. <div class="sharepanel rel">
  172. <div class="f12 c999 tc">分享到</div>
  173. <van-grid class="grad" :column-num="2">
  174. <van-grid-item text="微信" @click="weixin">
  175. <template #icon>
  176. <svg class="icon" aria-hidden="true">
  177. <use xlink:href="#icon-weixin"> </use>
  178. </svg>
  179. </template>
  180. </van-grid-item>
  181. <van-grid-item text="微信朋友圈" @click="weixinfriend">
  182. <template #icon>
  183. <svg class="icon" aria-hidden="true">
  184. <use xlink:href="#icon-pengyouquan"></use>
  185. </svg>
  186. </template>
  187. </van-grid-item>
  188. </van-grid>
  189. <div class="tc mt16 cencal abs bgcfff f14 c333" @click="show = false">取消</div>
  190. </div>
  191. </van-popup>
  192. </div>
  193. <script src="./static/js/klm-vv.min.js"></script>
  194. <script src="./static/js/appfunc.min.js"></script>
  195. <script src="./static/js/klm-axios-config.js"></script>
  196. <script src="./static/js/publicfn.js"></script>
  197. <script src="./static/js/html2canvas.js"></script>
  198. <script src="./static/js/iconfont.js"></script>
  199. <script>
  200. const postbaseRequest = (url, parameter) => {
  201. let param = new URLSearchParams();
  202. param.append('value', parameter);
  203. return request({
  204. url,
  205. method: 'post',
  206. headers: {
  207. // 'Access-Control-Allow-Origin':'*'
  208. 'Content-Type': 'application/x-www-form-urlencoded'
  209. },
  210. data: param,
  211. });
  212. };
  213. </script>
  214. <script>
  215. let app1 = new Vue({
  216. el: '#app',
  217. data() {
  218. return {
  219. show:false,
  220. isPlay:true,
  221. isCreateBase64:false,
  222. location:window.location.pathname,
  223. musicURL:'./static/mp3/city-of-start.mp3',
  224. firstCome:{
  225. month:'01',
  226. day:'01'
  227. },
  228. isApp:true,
  229. dateArr:[],
  230. totalamountArr:[],
  231. firstOpenDay:{
  232. month:'01',
  233. day:'01',
  234. },
  235. achivment:{
  236. TotalPosMerchant:0,
  237. AddUser:0,
  238. },
  239. amountRank:[],
  240. countRank:[],
  241. startPrice:100000,
  242. formInfo:{
  243. ExpectAmount:'',
  244. TargetAmount:'',
  245. },
  246. pagY:'',
  247. pagY1:'',
  248. pageNum:1,
  249. type:'',
  250. curPage:1,
  251. invitedcode:'',
  252. makerCode:'',
  253. name:'',
  254. topheight:'',
  255. chooseWords:[],
  256. wordList:[
  257. {
  258. text:'创业帮 成就平凡人的创业梦想',
  259. checked:false,
  260. page:1,
  261. ind:'',
  262. },
  263. {
  264. text:'外行到内行,学习是桥梁!',
  265. checked:false,
  266. page:1,
  267. ind:'',
  268. },
  269. {
  270. text:'行动比说话更重要',
  271. checked:false,
  272. page:1,
  273. ind:'',
  274. },
  275. {
  276. text:'天道酬勤',
  277. checked:false,
  278. page:1,
  279. ind:'',
  280. },
  281. {
  282. text:'这一次的拒绝就是下一次的成交',
  283. checked:false,
  284. page:1,
  285. ind:'',
  286. },
  287. {
  288. text:'每天只看目标,别老想障碍',
  289. checked:false,
  290. page:1,
  291. ind:'',
  292. },
  293. {
  294. text:'要成功,不要与马赛跑,要骑在马上,马上成功',
  295. checked:false,
  296. page:1,
  297. ind:'',
  298. },
  299. {
  300. text:'成功需要改变,用新的方法改变过去的结果',
  301. checked:false,
  302. page:1,
  303. ind:'',
  304. },
  305. {
  306. text:'幸福就是在一起,成功就是跟着走',
  307. checked:false,
  308. page:2,
  309. ind:'',
  310. },
  311. {
  312. text:'始于支付 不止支付',
  313. checked:false,
  314. page:2,
  315. ind:'',
  316. },
  317. {
  318. text:'不论顺境逆境,都可以通过我们的努力进行改变',
  319. checked:false,
  320. page:2,
  321. ind:'',
  322. },
  323. {
  324. text:'地推治百病,推荐打天下,服务定江山',
  325. checked:false,
  326. page:2,
  327. ind:'',
  328. },
  329. {
  330. text:'回避现实的人终将面对现实',
  331. checked:false,
  332. page:2,
  333. ind:'',
  334. },
  335. {
  336. text:'每一次成功都源于勇敢的开始',
  337. checked:false,
  338. page:2,
  339. ind:'',
  340. },
  341. {
  342. text:'弱者用泪水安慰自己,强者用汗水磨练自己',
  343. checked:false,
  344. page:2,
  345. ind:'',
  346. },
  347. {
  348. text:'可以失败,不可以失志',
  349. checked:false,
  350. page:2,
  351. ind:'',
  352. },
  353. {
  354. text:'没有天生的信心,只有不断培养的信心',
  355. checked:false,
  356. page:3,
  357. ind:'',
  358. },
  359. {
  360. text:'未曾失败的人恐怕也未曾成功过',
  361. checked:false,
  362. page:3,
  363. ind:'',
  364. },
  365. {
  366. text:'吃得苦中苦,明天开路虎',
  367. checked:false,
  368. page:3,
  369. ind:'',
  370. },
  371. {
  372. text:'今天睡地板,明天当老板',
  373. checked:false,
  374. page:3,
  375. ind:'',
  376. },
  377. {
  378. text:'2022大干创业帮',
  379. checked:false,
  380. page:3,
  381. ind:'',
  382. },
  383. {
  384. text:'不要等待机会,要去创造机会',
  385. checked:false,
  386. page:3,
  387. ind:'',
  388. },
  389. {
  390. text:'与成功的人为伍',
  391. checked:false,
  392. page:3,
  393. ind:'',
  394. },
  395. {
  396. text:'每一份努力的背后必有加倍的赏赐',
  397. checked:false,
  398. page:3,
  399. ind:'',
  400. },
  401. {
  402. text:'人之所以能是相信能',
  403. checked:false,
  404. page:4,
  405. ind:'',
  406. },
  407. {
  408. text:'贫穷是不需要计划的,致富才要',
  409. checked:false,
  410. page:4,
  411. ind:'',
  412. },
  413. {
  414. text:'时间都是挤出来的',
  415. checked:false,
  416. page:4,
  417. ind:'',
  418. },
  419. {
  420. text:'人们能看到的只有你的成就',
  421. checked:false,
  422. page:4,
  423. ind:'',
  424. },
  425. {
  426. text:'生命只有一次,多试试',
  427. checked:false,
  428. page:4,
  429. ind:'',
  430. },
  431. {
  432. text:'图文无法穷尽,亲临始见风华',
  433. checked:false,
  434. page:4,
  435. ind:'',
  436. },
  437. {
  438. text:'摇摆和迟疑,只会让机会更少',
  439. checked:false,
  440. page:4,
  441. ind:'',
  442. },
  443. {
  444. text:'愈懂得欣赏,愈被人们欣赏',
  445. checked:false,
  446. page:4,
  447. ind:'',
  448. },
  449. {
  450. text:'只有不断前行,才能刷新新的高度',
  451. checked:false,
  452. page:5,
  453. ind:'',
  454. },
  455. {
  456. text:'这一秒不放弃,下一秒就能成功',
  457. checked:false,
  458. page:5,
  459. ind:'',
  460. },
  461. {
  462. text:'如果有梦想,不妨大胆一点',
  463. checked:false,
  464. page:5,
  465. ind:'',
  466. },
  467. {
  468. text:'心不唤物,物不至',
  469. checked:false,
  470. page:5,
  471. ind:'',
  472. },
  473. {
  474. text:'成功没有奇迹,而是有轨迹',
  475. checked:false,
  476. page:5,
  477. ind:'',
  478. },
  479. {
  480. text:'越努力越幸运',
  481. checked:false,
  482. page:5,
  483. ind:'',
  484. },
  485. {
  486. text:'开机才是硬道理',
  487. checked:false,
  488. page:5,
  489. ind:'',
  490. },
  491. {
  492. text:'学习是第一生产力',
  493. checked:false,
  494. page:5,
  495. ind:'',
  496. },
  497. ]
  498. };
  499. },
  500. created() {
  501. if(PublicLib.getCookieInfo('isApp') === 'true'){
  502. this.isApp = true;
  503. }else{
  504. this.isApp = false;
  505. PublicLib.putCookieInfo('userId',this.getUrlParam('Id'));
  506. };
  507. this.type = browsertype.versions.ios ? 'ios' : 'android';
  508. if (this.type !== 'ios') {
  509. Func.PlayMusic();
  510. } else{
  511. window.webkit.messageHandlers.PlayMusic.postMessage({});
  512. };
  513. document.getElementsByClassName('year-report-2')[0].style.height = "calc(100vh - this.topheight+'px')"
  514. this.getuserinfo();
  515. this.personalInfo();
  516. this.theFirstOpen(0);
  517. this.theFirstOpen(1);
  518. this.theFirstOpen(2);
  519. this.theFirstOpen(3);
  520. this.makerSortDo()
  521. this.makerFlowingSortDo()
  522. this.getMonthInfo('202203')
  523. this.getMonthInfo('202204')
  524. this.getMonthInfo('202205')
  525. },
  526. updated(){
  527. this.$refs.showindex.forEach((item,index)=>{
  528. console.dir(item.style);
  529. item.style.animation = `opac0-1 1s ${(index+1)*.2}s forwards`
  530. })
  531. },
  532. destroyed(){
  533. this.$refs.music.stop();
  534. },
  535. mounted(){
  536. const type = browsertype.versions.ios ? 'ios' : 'android';
  537. if(type === 'ios'){
  538. if(isFringe()){
  539. this.topheight = 48;
  540. }else{
  541. this.topheight = 20;
  542. };
  543. }else{
  544. this.topheight = PublicLib.getStatusBarHeight();
  545. };
  546. },
  547. computed:{
  548. totalamount:function(){
  549. let sum = 0
  550. return this.abs(this.totalamountArr.reduce(
  551. (pre, cur) => pre + cur,
  552. sum
  553. ))
  554. }
  555. },
  556. watch:{
  557. show(){
  558. if(this.show){
  559. this.isCreateBase64 = true;
  560. }else{
  561. this.isCreateBase64 = false;
  562. };
  563. },
  564. },
  565. methods: {
  566. playmp3(){
  567. console.log(this.$refs.music)
  568. if(this.isPlay === false){
  569. this.$refs.music.play().then(()=>{this.isPlay = true})
  570. }else{
  571. this.$refs.music.pause()
  572. this.isPlay = false
  573. }
  574. console.log(this.isPlay)
  575. },
  576. wrodChoose(item,index){
  577. if(this.chooseWords.length < 5){
  578. item.checked = !item.checked
  579. if(item.checked){
  580. this.chooseWords.push(item)
  581. }else{
  582. let ind = this.chooseWords.findIndex((i)=> i.text == item.text)
  583. this.chooseWords.splice(ind,1)
  584. this.wordList.forEach((item)=>item.ind = '')
  585. }
  586. }
  587. else if(!item.checked && this.chooseWords.length === 5){
  588. return tips('最多只能选取5句话')
  589. }
  590. else if(item.checked && this.chooseWords.length === 5){
  591. item.checked = false
  592. let ind = this.chooseWords.findIndex((i)=> i.text == item.text)
  593. this.chooseWords.splice(ind,1)
  594. item.ind = ''
  595. }
  596. this.wordList.forEach((item)=>{
  597. if(this.chooseWords.findIndex((i)=>item.text === i.text) != -1){
  598. item.ind = this.chooseWords.findIndex((i)=>
  599. item.text === i.text
  600. ) + 1
  601. }
  602. })
  603. },
  604. makeWordList(){
  605. if(this.chooseWords.length === 5){
  606. this.pageNum = 9
  607. this.chooseWords.push({text:'2022大干创业帮'})
  608. this.$nextTick().then(()=>{
  609. this.$refs.saved.style.height = `${document.documentElement.clientHeight - this.topheight}px`;
  610. document.getElementsByClassName('year-report-2')[0].style.background = 'linear-gradient(to bottom,#E03A31,#EB5048)'
  611. document.getElementsByClassName('iphonetitle')[0].style.background = 'linear-gradient(to bottom,#e03a31,#e03a31)'
  612. })
  613. }else{
  614. return tips('请选择5个句子!')
  615. }
  616. },
  617. changePage(type){
  618. if(type === "add" && this.curPage < 5){
  619. this.curPage ++
  620. }else if(type === "jian" && this.curPage >= 2){
  621. this.curPage --
  622. }else if (type === 'emputy'){
  623. this.chooseWords = Array.from(0)
  624. this.wordList.forEach((item)=>{
  625. item.checked = false
  626. item.ind = ''
  627. })
  628. }
  629. },
  630. rechoose(){
  631. this.pageNum = 8
  632. this.$nextTick().then(()=>{
  633. this.$refs.saved.style.height = `${document.documentElement.clientHeight - this.topheight}px`;
  634. document.getElementsByClassName('year-report-2')[0].style.background = 'linear-gradient(to bottom,#131E38,#31365F)'
  635. document.getElementsByClassName('iphonetitle')[0].style.background = 'linear-gradient(to bottom,#131e38,#131e38)'
  636. })
  637. this.chooseWords = []
  638. this.wordList.forEach((item)=>{
  639. item.checked = false
  640. item.ind = ''
  641. })
  642. },
  643. //- 截取参数函数
  644. getUrlParam(name){
  645. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  646. var r = window.location.search.substr(1).match(reg); //匹配目标参数
  647. if (r != null) return unescape(r[2]);
  648. return null; //返回参数值
  649. },
  650. // 金额展示处理函数(1000,423,324,322.00)
  651. abs (val){
  652. //金额转换 保留2位小数 并每隔3位用逗号分开 1,234.56
  653. let str = (val/1).toFixed(2) + ''
  654. let intSum = str.substring(0,str.indexOf(".")).replace( /\B(?=(?:\d{3})+$)/g, ',' ) //取到整数部分
  655. let dot = str.substring(str.length,str.indexOf(".")) //取到小数部分搜索
  656. let ret = intSum + dot;
  657. return ret;
  658. },
  659. //- 用户信息
  660. async personalInfo(){
  661. const Id = PublicLib.getCookieInfo('userId');
  662. const res = await getRequest('api/v1/users/personalinfo?t='+Math.random(6),JSON.stringify({Id}));
  663. if(res.status === '1' && res.data.AuthDate) {
  664. let data = '';
  665. const zero = this.changedata(res.data.AuthDate,5) === '0' ? '': this.changedata(res.data.AuthDate,5);
  666. const month = zero + '' + this.changedata(res.data.AuthDate,6);
  667. const day = this.changedata(res.data.AuthDate,8) + '' + this.changedata(res.data.AuthDate,9);
  668. //- this.firstCome = `${month} 月 ${day} 日`;
  669. this.firstCome.month = month
  670. this.firstCome.day = day
  671. };
  672. },
  673. changedata(str,ind){
  674. let arr = str.split('');
  675. return arr[ind];
  676. },
  677. //- 第一次开机
  678. async theFirstOpen(ProductType){
  679. const UserId = PublicLib.getCookieInfo('userId');
  680. 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'}));
  681. if(res.status === '1') {
  682. if(res.data.length){
  683. this.dateArr.push((new Date(res.data[0].KqRegTime)).getTime())
  684. this.sortDate();
  685. }else{
  686. this.firstOpenDay = {}
  687. }
  688. };
  689. },
  690. //- 机具排行榜
  691. async makerSortDo(){
  692. const res = await getRequest('api/v1/LargeDataScreen/MakerSorts?t='+Math.random(6),JSON.stringify({UserId:1}));
  693. if(res.status === '1') {
  694. res.data.forEach((item)=>{
  695. if(item.realName === "辛*军"){
  696. item.realName = '张*'
  697. }else{
  698. if(item.realName && item.realName.length === 3){
  699. item.realName = item.realName[0] + '**';
  700. }else if(item.realName && item.realName.length != 3){
  701. item.realName = item.realName[0] + '*';
  702. }
  703. }
  704. })
  705. this.countRank = res.data
  706. };
  707. },
  708. //- 交易额排行榜
  709. async makerFlowingSortDo(){
  710. const res = await getRequest('api/v1/LargeDataScreen/MakerFlowingWatersSort?t='+Math.random(6),JSON.stringify({UserId:1}));
  711. if(res.status === '1'){
  712. res.data.forEach((item)=>{
  713. if(item.RealName === "辛*军"){
  714. item.RealName = '张*'
  715. }else{
  716. if(item.RealName && item.RealName.length === 3){
  717. item.RealName = item.RealName[0] + '**';
  718. }else if(item.RealName && item.RealName.length != 3){
  719. item.RealName = item.RealName[0] + '*';
  720. }
  721. }
  722. })
  723. this.amountRank = res.data
  724. this.amountRank.map((item)=>{this.abs(item.Sum)})
  725. }
  726. },
  727. //- 交易额
  728. async getMonthInfo(month){
  729. const UserId = PublicLib.getCookieInfo('userId');
  730. const res = await getRequest('api/v1/usertradedaysummary/teamperformance?t='+Math.random(6),JSON.stringify({TradeMonth:month,UserId}));
  731. if(res.status === '1') {
  732. this.achivment = res.data
  733. this.totalamountArr.push(res.data.TotalAmount)
  734. console.log(this.totalamountArr,'总交易额数组')
  735. };
  736. },
  737. sortDate(){
  738. this.dateArr.sort((a,b)=>a-b)
  739. let date = new Date( this.dateArr[0])
  740. //- this.firstOpenDay = `${date.getMonth() + 1} 月 ${date.getDate()} 日`
  741. this.firstOpenDay.month = `${date.getMonth() + 1}`
  742. this.firstOpenDay.day = `${date.getDate()}`
  743. console.log(this.firstOpenDay,'open')
  744. },
  745. //- backbtn(){
  746. //- this.$refs.music.stop()
  747. //- this.isPlay = false
  748. //- PublicLib.GoBack({Level:1});
  749. //- },
  750. gtouchstart(e){
  751. this.pagY = e.changedTouches[0].clientY;
  752. },
  753. gtouchend(e){
  754. this.pagY1 = e.changedTouches[0].clientY;
  755. if((this.pagY1 - this.pagY) > 50){
  756. clearInterval(this.timer2)
  757. if(this.pageNum >= 2 && this.pageNum <= 7){
  758. this.pageNum --
  759. }
  760. };
  761. if((this.pagY1 - this.pagY) < -50){
  762. if(this.pageNum >= 1 && this.pageNum < 7){
  763. this.pageNum ++
  764. }
  765. };
  766. },
  767. nextPage(){
  768. if(this.pageNum >= 1 && this.pageNum < 8){
  769. this.pageNum ++
  770. }
  771. },
  772. share(){
  773. this.show = true;
  774. },
  775. //- 图片生成
  776. // 生成快照
  777. convertToImage(container){
  778. window.pageYoffset = 0;
  779. document.documentElement.scrollTop = 0;
  780. document.body.scrollTop = 0;
  781. // 设置放大倍数
  782. const scale = window.devicePixelRatio;
  783. // 传入节点原始宽高
  784. const width = container.offsetWidth;
  785. const height = container.offsetHeight;
  786. const canvas = document.createElement('canvas');
  787. // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
  788. canvas.width = width * scale;
  789. canvas.height = height * scale;
  790. // 设定 canvas css宽高为 DOM 节点宽高
  791. canvas.style.width = `${width}px`;
  792. canvas.style.height = `${height}px`;
  793. // 获取画笔
  794. const context = canvas.getContext('2d');
  795. // 将所有绘制内容放大像素比倍
  796. context.scale(scale, scale);
  797. var rect = container.getBoundingClientRect(); //获取元素相对于视察的偏移量
  798. context.translate(-rect.left, -rect.top); //设置context位置,值为相对于视窗的偏移量负值,让图片复位
  799. // html2canvas配置项
  800. //- console.log(11)
  801. const ops = {
  802. scale,
  803. canvas,
  804. width,
  805. height,
  806. logging: false,
  807. useCORS: true,
  808. allowTaint: false,
  809. dpi:300,
  810. };
  811. return html2canvas(container, ops).then(canvas => {
  812. // 返回图片的二进制数据
  813. return canvas.toDataURL("image/png");
  814. });
  815. },
  816. async getuserinfo(){
  817. const Id = PublicLib.getCookieInfo('userId');
  818. const res = await getRequest('api/v1/users/mycard?t='+Math.random(6),JSON.stringify({Id}));
  819. if(res.status !== '1')return tips('获取个人信息失败!请刷新重试');
  820. //- 个人信息
  821. this.name = res.data.RealName;
  822. this.makerCode = res.data.MakerCode;
  823. this.invitedcode = res.data.InvitePhoto;
  824. },
  825. weixin:undebounce(async function(){
  826. //- debugger;
  827. let Base64 = await this.convertToImage(this.$refs.saved);
  828. console.log(Base64);
  829. const type = browsertype.versions.ios ? 'ios' : 'android';
  830. if(type === 'ios'){
  831. window.webkit.messageHandlers.Base64ImageShareWechatSession.postMessage({Base64});
  832. }else{
  833. Func.Base64ImageShareWechatSession(JSON.stringify({Base64}))
  834. };
  835. }),
  836. weixinfriend:undebounce(async function(){
  837. let Base64 = await this.convertToImage(this.$refs.saved);
  838. const type = browsertype.versions.ios ? 'ios' : 'android';
  839. if(type === 'ios'){
  840. window.webkit.messageHandlers.Base64ImageShareWechatTimeline.postMessage({Base64});
  841. }else{
  842. Func.Base64ImageShareWechatTimeline(JSON.stringify({Base64}))
  843. };
  844. })
  845. }
  846. });
  847. </script>
  848. </body>
  849. </html>