user-center.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  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. <style>
  17. .testel{height:300px;width:100vw;z-index:-999;}
  18. .van-button--default{color:#333 !important;}
  19. .user-card .index-num-b{height:.58rem;}
  20. .mb{font-weight:500;}
  21. .user-card{border:none;padding:.2rem 0;}
  22. .toparr{right:0;bottom:.6667rem;}
  23. .pr12{margin-right:.32rem;}
  24. .pl12{margin-left:.32rem;}
  25. .pt6{padding-top:.16rem !important;}
  26. .user-img{border:4px solid transparent;}
  27. .border-bottom{border-radius:0 0 .2133rem .2133rem;}
  28. .triangle{bottom:0;left:20%;transform:translateY(100%);width: 0; height: 0;border-width: 7px;border-style: solid;border-color:#fff transparent transparent transparent;}
  29. .withdrawal{background-color:#FFD500;width:1.0667rem;height:.48rem;line-height:.48rem;display:inline-block;border-radius:999px;margin-left:.2133rem;}
  30. </style>
  31. </head>
  32. <body class="bgc-back bgc-back pt0 ovh pb0" style="padding-top:0;">
  33. <div id="app" v-cloak>
  34. <div class="user-center-header">
  35. <div class="tr pt8" v-if="toptitleisshow">
  36. <div class="setting-btn dib" @click="gosetting"><img width="100%" src="./static/images/setting@3x.png"></div>
  37. </div>
  38. </div>
  39. <div class="user-center-header border-bottom">
  40. <div class="df pb16 rel" v-cloak @click="userinfobtn">
  41. <div class="user-img" style="overflow:hidden;"><img :src="userInfo.header" style="width:100%;height:100%;"></div>
  42. <div class="user-info cm">
  43. <div class="tl">
  44. <div class="f18 c333 b pb6"><span class="vm">{{userInfo.name}}</span><img class="vm" :src="gradelist[userInfo.grade - 1]" alt=""><img class="vm" src="./static/images/user-b-alliance.png" alt="" v-if="LeaderLevel === 2"><img class="vm" src="./static/images/user-s-alliance.png" alt="" v-if="LeaderLevel === 1"><img class="vm" src="./static/images/user-certified-warehouse.png" alt="" v-if="AuthFlag === 1"></div>
  45. <div class="f12 cfff op7 c333">推荐码:{{userInfo.recommendcode}} </div>
  46. </div>
  47. </div>
  48. <van-icon class="f18 abs toparr" name="arrow"></van-icon>
  49. </div>
  50. </div>
  51. <div class="ovh-x" ref="wrapper1">
  52. <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height:100%;">
  53. <div class="block-padding pb0 pt16 pl12 pr12" style="overflow:visible;">
  54. <div class="user-card bgcfff rel" style="overflow:visible;padding:12px 0;">
  55. <div class="triangle abs"></div>
  56. <div class="df pl12 pr12">
  57. <div class="cf ovh">
  58. <div class="f12 c999 df aic ovh" v-cloak><img class="mr8" src="./static/images/user-notice.png" alt="" style="height:14px;flex:.1;">
  59. <div class="ovh" v-if="payment.ChangeAmount !== 0" style="flex:20;">
  60. <div class="ovh vm f12" style="color:#ED6A0C;margin-right:10px;display:inline;white-space: nowrap;text-overflow: ellipsis;width:100%;">{{payment.ChangeAmount}}元{{payment.Remark}}已到账</div>
  61. <div class="vm f10" style="display:inline-block;">{{payment.CreateDate}}</div>
  62. </div>
  63. <div v-else><span class="vm f12" style="color:#ED6A0C;margin-right:10px;">欢迎加入创业帮</span><span class="vm f10">{{CreateDate}}</span></div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="block-padding pb0 pt16 pl12 pr12" v-cloak>
  70. <div class="user-card bgcfff" :class=" LeaderLevel !== 0 ? '' : 'pt6'">
  71. <div class="df van-hairline--bottom pb8 pr12 pl12" v-if="LeaderLevel === 0">
  72. <div class="cf">
  73. <div class="f12 c999"><span class="vm">账户余额(元)</span><span class="dib" @click="showMoney"><img class="show-btn vm" :src="isShow ? './static/images/show-icon@3x.png' : './static/images/noshow-icon@3x.png'" alt=""></span></div>
  74. <div class="index-num-b f18 c333 mb">{{isShow ? `${abs(balance)}`: '****'}}</div>
  75. </div>
  76. <div class="flex1 tr bc333">
  77. <van-button class="abs absoption kxs-btn" round color="#FFD500" @click="withdrawal">提现</van-button>
  78. </div>
  79. </div>
  80. <div v-else>
  81. <div class="df pr12 pl12" style="justify-content:flex-end;"><span class="dib" @click="showMoney"><img class="show-btn vm" :src="isShow ? './static/images/show-icon@3x.png' : './static/images/noshow-icon@3x.png'" alt=""></span></div>
  82. <div class="df van-hairline--bottom pb8 pr12 pl12 jcsb">
  83. <div class="cf" style="flex:1.1;">
  84. <div class="f12 c999" @click="withdrawal"><span class="vm">账户余额(元)</span>
  85. <div class="vm withdrawal c333 tc f10">提现</div>
  86. </div>
  87. <div class="index-num-b f18 c333 mb">{{isShow ? `${abs(balance)}`: '****'}}</div>
  88. </div>
  89. <div class="cf" style="flex:1;">
  90. <div class="f12 c999"><span class="vm">盟主储蓄金(元)</span></div>
  91. <div class="df aic jcsb" @click="goalliance">
  92. <div class="index-num-b f18 c333 mb">{{isShow ? `${abs(LeaderReserve)}`: '****'}}</div>
  93. <van-icon class="f16" name="arrow"></van-icon>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="tl pr12 pl12">
  99. <van-row>
  100. <van-col span="12">
  101. <div class="f12 c999">累计收益(元)</div>
  102. <div class="index-num-b f18 c333 mb">{{isShow ? `${abs(total)}` : '****'}}</div>
  103. </van-col>
  104. <van-col span="12">
  105. <div class="f12 c999">已提现金额(元)</div>
  106. <div class="index-num-b f18 c333 mb">{{isShow ? `${abs(tocash)}`: '****'}}</div>
  107. </van-col>
  108. </van-row>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="block-padding pt16 pl12 pr12" v-cloak>
  113. <div class="user-card bgcfff">
  114. <div class="van-hairline--bottom pb8 tl pl12 pr12"><strong class="db f16">常用工具</strong></div>
  115. <van-grid class="pt8" :border="false" :icon-size="40" v-cloak>
  116. <van-grid-item class="gridicon" v-for="item,index in usercentericonlist" :text="item.Title" @click="gousercentericonlist(item.Url)">
  117. <template v-slot:icon><img :src="item.Icon"></template>
  118. </van-grid-item>
  119. </van-grid>
  120. </div>
  121. </div>
  122. <div class="pb8 tc mt45"><img class="logo-bottom" src="./static/images/user-logo-gray.png" alt=""></div>
  123. </van-pull-refresh>
  124. </div>
  125. <van-tabbar v-model="active" active-color="#333" inactive-color="#999" v-cloak v-if="tabsisshow">
  126. <van-tabbar-item icon="home-o" @click="index">首页
  127. <template #icon="props"><img :src="props.active ? icon1.active : icon1.inactive"></template>
  128. </van-tabbar-item>
  129. <van-tabbar-item icon="search" @click="mall">商城
  130. <template #icon="props"><img :src="props.active ? icon2.active : icon2.inactive"></template>
  131. </van-tabbar-item>
  132. <van-tabbar-item icon="friends-o" @click="notice" :dot="isnotice">消息
  133. <template #icon="props"><img :src="props.active ? icon3.active : icon3.inactive"></template>
  134. </van-tabbar-item>
  135. <van-tabbar-item icon="setting-o">我的
  136. <template #icon="props"><img :src="props.active ? icon4.active : icon4.inactive"></template>
  137. </van-tabbar-item>
  138. </van-tabbar>
  139. </div>
  140. <script src="./static/js/klm-vv.min.js"></script>
  141. <script src="./static/js/appfunc.min.js"></script>
  142. <script src="./static/js/klm-axios-config.js"></script>
  143. <script src="./static/js/publicfn.js"></script>
  144. <script>
  145. function OnStart(){
  146. PublicLib.SetStatusBarBgColor({bgcolor:'FFD500'});
  147. PublicLib.SetStatusBarStyle({type:'default', isShow:1});
  148. app.getuserinfo();
  149. app.getuseraccount();
  150. app.verificationrealauth();
  151. app.getpaymentlist();
  152. };
  153. PublicLib.SetStatusBarBgColor({bgcolor:'FFD500'});
  154. PublicLib.SetStatusBarStyle({type:'default', isShow:1});
  155. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  156. // 可以通过下面的方式手动注册
  157. Vue.use(vant.Lazyload);
  158. // 在 #app 标签下渲染一个按钮组件
  159. let app = new Vue({
  160. el: '#app',
  161. data() {
  162. return {
  163. LeaderReserve:0, //储蓄金金额
  164. AuthFlag:0, //1.是 0.否
  165. LeaderLevel:0, //0.无 1、小盟主 2、大盟主
  166. isalliance:true,
  167. realauth:false,
  168. isnotice:false,
  169. toptitleisshow:true,
  170. active: 3,
  171. userInfo:{
  172. name:'',
  173. header: '',
  174. recommendcode:'',
  175. grade: '',
  176. experience: 0
  177. },
  178. isShow: false,
  179. CreateDate:'',
  180. balance: 0,
  181. total: 0,
  182. tocash: 0,
  183. icon1: {
  184. active: './static/images/tab-icon1-active1@3x.png',
  185. inactive: './static/images/tab-icon1-no@3x.png',
  186. },
  187. icon2: {
  188. active: './static/images/tab-icon2-active1@3x.png',
  189. inactive: './static/images/tab-icon2-no@3x.png',
  190. },
  191. icon3: {
  192. active: './static/images/tab-icon3-active1@3x.png',
  193. inactive: './static/images/tab-icon3-no@3x.png',
  194. },
  195. icon4: {
  196. active: './static/images/tab-icon4-active1@3x.png',
  197. inactive: './static/images/tab-icon4-no@3x.png',
  198. },
  199. gradelist:[
  200. './static/images/grade-k1.png',
  201. './static/images/grade-k2.png',
  202. './static/images/grade-k3.png',
  203. './static/images/grade-k4.png',
  204. './static/images/grade-k5.png',
  205. './static/images/grade-k6.png',
  206. './static/images/grade-k7.png',
  207. './static/images/grade-k8.png',
  208. './static/images/grade-k9.png',
  209. ],
  210. usercentericonlist:[
  211. ],
  212. //- 超越值
  213. exceedVal:'',
  214. //- 当前交易额
  215. currentTradeAmt:0.00,
  216. tabsisshow:'',
  217. isLoading:false,
  218. payment:{
  219. ChangeAmount:0,
  220. },
  221. };
  222. },
  223. created() {
  224. if(PublicLib.getCookieInfo('balanceisshow') === 'true'){
  225. this.isShow = true;
  226. }else{
  227. this.isShow = false;
  228. }
  229. this.tabsisshow = bottomtabisshow;
  230. this.getpaymentlist();
  231. this.getusercentericonlist();
  232. this.getuserinfo();
  233. this.getuseraccount();
  234. //- this.getuserrankinfo();
  235. this.verificationrealauth();
  236. },
  237. mounted(){
  238. this.$nextTick(() => {
  239. this.$refs.wrapper1.style.height = `${document.documentElement.clientHeight - 130}px`;
  240. });
  241. },
  242. computed:{
  243. isnotice:function(){
  244. return PublicLib.getCookieInfo('noticeiscount') === "";
  245. }
  246. },
  247. methods: {
  248. goalliance(){
  249. PublicLib.Goto({Url:'user-leaderLevel-main'});
  250. },
  251. async verificationrealauth(){
  252. const Id = PublicLib.getCookieInfo('userId');
  253. const userinfo = await getRequest('api/v1/users/personalinfo?t='+Math.random(6),JSON.stringify({Id}));
  254. //- 是否实名认证完毕
  255. if(userinfo.data.AuthFlag !== 1) {
  256. this.realauth = true;
  257. }else{
  258. this.realauth = false;
  259. };
  260. },
  261. async onRefresh(){
  262. //- await this.getusercentericonlist();
  263. await this.getuserinfo();
  264. await this.getuseraccount();
  265. //- await this.getuserrankinfo();
  266. this.isLoading = false;
  267. },
  268. //- 显示余额状态
  269. showMoney(){
  270. this.isShow = !this.isShow;
  271. if(this.isShow){
  272. PublicLib.putCookieInfo('balanceisshow', 'true');
  273. }else{
  274. PublicLib.putCookieInfo('balanceisshow', '');
  275. };
  276. },
  277. getBase64(url, callback) {
  278. var Img = new Image(),
  279. dataURL = '';
  280. Img.src = url + '?v=' + Math.random();
  281. Img.setAttribute('crossOrigin', 'Anonymous');
  282. Img.onload = function() {
  283. var canvas = document.createElement('canvas'),
  284. width = Img.width,
  285. height = Img.height;
  286. canvas.width = width;
  287. canvas.height = height;
  288. canvas.getContext('2d').drawImage(Img, 0, 0, width, height);
  289. dataURL = canvas.toDataURL('image/jpeg');
  290. return callback ? callback(dataURL) : null;
  291. };
  292. },
  293. //- 获取常用工具列表
  294. async getusercentericonlist(){
  295. //- const version = PublicLib.GetAppVersion();
  296. //- if(version === '1.4.0'){
  297. this.usercentericonlist = [
  298. {Icon:'./static/images/user-btn1@3x.png',Title:'收支明细',Url:'user-payment-list'},
  299. //- {Icon:'./static/images/user-btn2@3x.png',Title:'提现记录',Url:'user-withdrawal-list'},
  300. //- {Icon:'./static/images/user-btn3@3x.png',Title:'排行版',Url:'user-ranking'},
  301. //- {Icon:'./static/images/user-btn4@3x.png',Title:'邀请好友',Url:'invite-frend'},
  302. {Icon:'./static/images/user-btn5@3x.png',Title:'服务中心',Url:'user-service-list'},
  303. {Icon:'./static/images/user-btn6@3x.png',Title:'意见反馈',Url:'user-feedback'},
  304. {Icon:'./static/images/user-btn7@3x.png',Title:'创客守则',Url:'user-maker-code'},
  305. {Icon:'./static/images/user-btn8@3x.png',Title:'授权证明',Url:'user-certificate-of-authorization'},
  306. {Icon:'./static/images/user-btn10@3x.png',Title:'预发机',Url:'user-warehouse-mini-list'},
  307. {Icon:'./static/images/user-btn9@3x.png',Title:'我的地址',Url:'mall-address-list'},
  308. ];
  309. //- }else{
  310. //- this.usercentericonlist = [
  311. //- {Icon:'./static/images/user-btn1@3x.png',Title:'收支明细',Url:'user-payment-list'},
  312. //- //- {Icon:'./static/images/user-btn2@3x.png',Title:'提现记录',Url:'user-withdrawal-list'},
  313. //- //- {Icon:'./static/images/user-btn3@3x.png',Title:'排行版',Url:'user-ranking'},
  314. //- //- {Icon:'./static/images/user-btn4@3x.png',Title:'邀请好友',Url:'invite-frend'},
  315. //- {Icon:'./static/images/user-btn5@3x.png',Title:'服务中心',Url:'user-service-list'},
  316. //- {Icon:'./static/images/user-btn6@3x.png',Title:'意见反馈',Url:'user-feedback'},
  317. //- {Icon:'./static/images/user-btn7@3x.png',Title:'创客守则',Url:'user-maker-code'},
  318. //- //- {Icon:'./static/images/user-btn8@3x.png',Title:'授权证明',Url:'user-certificate-of-authorization'},
  319. //- ];
  320. //- };
  321. },
  322. //- 获取用户个人信息
  323. async getuserinfo(){
  324. const userId = PublicLib.getCookieInfo('userId');
  325. const res = await getRequest('api/v1/users/personalinfo?t='+Math.random(6),JSON.stringify({Id:userId}));
  326. if(res.status === '1') {
  327. this.userInfo.name = res.data.RealName;
  328. this.userInfo.header = res.data.HeadPhoto;
  329. this.userInfo.recommendcode = res.data.MakerCode;
  330. this.userInfo.grade = res.data.UserLevel
  331. if(res.data.LeaderLevel){
  332. this.LeaderLevel = res.data.LeaderLevel;
  333. };
  334. if(res.data.AuthFlags){
  335. this.AuthFlag = res.data.AuthFlags;
  336. };
  337. const arr = res.data.AuthDate.split(' ');
  338. this.CreateDate = arr[0];
  339. //- 头像转BASE64
  340. this.getBase64(res.data.HeadPhoto, dataURL => {
  341. PublicLib.putCookieInfo('userPhoto',dataURL);
  342. });
  343. PublicLib.putCookieInfo('userPhotoUrl',res.data.HeadPhoto);
  344. };
  345. },
  346. //- 获取收支明细列表
  347. async getpaymentlist(){
  348. const UserId = PublicLib.getCookieInfo('userId');
  349. const res = await getRequest('api/v1/useraccountrecord/lists?t='+Math.random(6),JSON.stringify({PageSize:1,PageNum:1,UserId,Kind:1}));
  350. this.payment = res.data[0];
  351. if(res.data[0].ChangeAmount !== 0) {
  352. const arr = res.data[0].CreateDate.split(' ');
  353. this.payment.CreateDate = arr[0];
  354. };
  355. },
  356. //- 获取用户账户信息
  357. async getuseraccount(){
  358. PublicLib.putCookieInfo('withdrawRealAuth','');
  359. const UserId = PublicLib.getCookieInfo('userId');
  360. const res = await getRequest('api/v1/useraccount/myaccount?t='+Math.random(6),JSON.stringify({UserId}));
  361. if(res.status === '1') {
  362. this.balance = tofixed2(res.data.BalanceAmount);
  363. this.total = tofixed2(res.data.TotalAmount);
  364. this.tocash = tofixed2(res.data.WithdrawAmount);
  365. if(res.data.LeaderReserve){
  366. this.LeaderReserve = tofixed2(res.data.LeaderReserve);
  367. };
  368. if(res.data.WithdrawFlag === 1){
  369. PublicLib.putCookieInfo('withdrawRealAuth','true');
  370. };
  371. };
  372. },
  373. //- //- 获取用户职级信息
  374. //- async getuserrankinfo(){
  375. //- const UserId = PublicLib.getCookieInfo('userId');
  376. //- const res = await getRequest('api/v1/userrank/detail',JSON.stringify({UserId}));
  377. //- if(res.status === '1') {
  378. //- this.exceedVal = res.data.ExceedVal;
  379. //- this.userInfo.grade = res.data.Rank;
  380. //- this.userInfo.experience = res.data.Percent;
  381. //- }else{
  382. //- this.userInfo.grade = 1;
  383. //- };
  384. //- },
  385. //- 跳转商城
  386. mall(){
  387. PublicLib.Goto({Url:'mall'});
  388. },
  389. //- 跳转主页
  390. index(){
  391. PublicLib.Goto({Url:'index'});
  392. },
  393. //- 跳转消息
  394. notice(){
  395. PublicLib.Goto({Url:'notice-center'});
  396. },
  397. withdrawal(){
  398. if(this.realauth){
  399. PublicLib.ShowDialog({
  400. Title:'暂未实名认证',
  401. Message:'是否去实名认证?',
  402. ConfirmText:'去实名',
  403. CancelText:'暂不实名',
  404. ConfirmAction:'app.goAuth()',
  405. CanelAction:''
  406. });
  407. return;
  408. }
  409. PublicLib.Goto({Url:'user-Withdrawal'});
  410. },
  411. gosetting(){
  412. PublicLib.Goto({Url:'user-setting'});
  413. },
  414. async gousercentericonlist(Url){
  415. if(Url !== 'user-maker-code'){
  416. if(this.realauth){
  417. PublicLib.ShowDialog({
  418. Title:'暂未实名认证',
  419. Message:'是否去实名认证?',
  420. ConfirmText:'去实名',
  421. CancelText:'暂不实名',
  422. ConfirmAction:'app.goAuth()',
  423. CanelAction:''
  424. });
  425. return;
  426. };
  427. };
  428. if(Url === 'mall-address-list'){
  429. PublicLib.putCookieInfo('iscentergoing','true');
  430. };
  431. PublicLib.Goto({Url});
  432. },
  433. userinfobtn(){
  434. PublicLib.Goto({Url:'user-info'});
  435. },
  436. myrank(){
  437. PublicLib.Goto({Url:'user-rank'});
  438. },
  439. goAuth(){
  440. PublicLib.Goto({Url:'user-realauth'});
  441. },
  442. }
  443. });
  444. </script>
  445. </body>
  446. </html>