personal-achievement.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  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. </head>
  17. <body class="bgc-back pb0 ovh">
  18. <div class="iphonetitle"> </div>
  19. <div class="merchant_achievement" id="app" v-cloak>
  20. <van-nav-bar class="camp_title user_title_normal titlef16 left_icon_cfff" left-arrow title="个人交易" v-if="toptitleisshow" @click-left="goback">
  21. <template #left>
  22. <van-icon name="arrow-left" color="#333"> </van-icon>
  23. </template>
  24. </van-nav-bar>
  25. <div class="merchant_achievement_topblock"></div>
  26. <van-tabs class="toptab" v-model="active" animated @change="changetab" swipeable title-active-color="#FF5A32" title-inactive-color="#333" line-width="32" line-height="2">
  27. <van-tab>
  28. <template #title>
  29. <div @click="choosetime"><span>{{nowdate}}</span>
  30. <van-icon name="arrow"></van-icon>
  31. </div>
  32. </template>
  33. <van-row class="main ovh rel">
  34. <van-col class="infobox infobox_personal strong_colorroll">
  35. <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  36. <van-list style="margin-left:0" v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
  37. <div class="panel bgcfff" v-for="obj,index in data" :key="index">
  38. <div class="toppanel df">
  39. <div class="block"></div>
  40. <div class="f14 c333 b">{{obj.TradeDate}}</div>
  41. </div>
  42. <div class="mainpanel">
  43. <div class="title df c333 f16 flexsb">
  44. <div>总交易额(元)</div>
  45. <div>{{abs(obj.TradeAmount)}}</div>
  46. </div>
  47. <div class="type_panel df flexsb">
  48. <div style="flex:1">
  49. <div class="type c999">POS贷记卡交易额</div>
  50. <div class="money f12">{{abs(obj.TotalPosAmount)}}</div>
  51. </div>
  52. <div style="flex:.4">
  53. <div class="line"></div>
  54. </div>
  55. <div style="flex:1">
  56. <div class="type c999">云闪付小额交易额</div>
  57. <div class="money f12">{{abs(obj.TotalCloudPayAmount)}}</div>
  58. </div>
  59. </div>
  60. <div class="type_panel df flexsb">
  61. <div style="flex:1">
  62. <div class="type c999">码牌活动交易</div>
  63. <div class="money f12">{{abs(obj.TotalActiveAmount)}}</div>
  64. </div>
  65. <div style="flex:.4">
  66. <div class="line"></div>
  67. </div>
  68. <div style="flex:1">
  69. <div class="type c999">POS借记卡交易额</div>
  70. <div class="money f12">{{abs(obj.TotalUnActiveAmount)}}</div>
  71. </div>
  72. </div>
  73. <div class="df c666 f12 flexsb" v-for="item in obj.ProductList" :key="item.Id" @click="gotransactiondetail(obj.TradeDate,item)">
  74. <div class="type">{{item.Name}}</div>
  75. <div class="num_personal df cm"><span>{{abs(item.Amount)}}</span>
  76. <van-icon name="arrow"></van-icon>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </van-list>
  82. </van-pull-refresh>
  83. </van-col>
  84. </van-row>
  85. </van-tab>
  86. <van-tab>
  87. <template #title><span>近半年</span></template>
  88. <van-row class="main ovh rel">
  89. <van-col class="infobox infobox_personal">
  90. <div class="panel bgcfff" v-for="obj in data">
  91. <div class="toppanel df">
  92. <div class="block"></div>
  93. <div class="f14 c333 b">{{obj.TradeMonth}}</div>
  94. </div>
  95. <div class="mainpanel">
  96. <div class="title df c333 f16 flexsb">
  97. <div>总交易额(元)</div>
  98. <div>{{abs(obj.TradeAmount )}}</div>
  99. </div>
  100. <div class="type_panel df flexsb">
  101. <div style="flex:1">
  102. <div class="type c999">POS贷记卡交易额</div>
  103. <div class="money f12">{{abs(obj.TotalPosAmount)}}</div>
  104. </div>
  105. <div style="flex:.4">
  106. <div class="line"></div>
  107. </div>
  108. <div style="flex:1">
  109. <div class="type c999">云闪付小额交易额</div>
  110. <div class="money f12">{{abs(obj.TotalCloudPayAmount)}}</div>
  111. </div>
  112. </div>
  113. <div class="type_panel df flexsb">
  114. <div style="flex:1">
  115. <div class="type c999">码牌活动交易</div>
  116. <div class="money f12">{{abs(obj.TotalActiveAmount)}}</div>
  117. </div>
  118. <div style="flex:.4">
  119. <div class="line"></div>
  120. </div>
  121. <div style="flex:1">
  122. <div class="type c999">POS借记卡交易额</div>
  123. <div class="money f12">{{abs(obj.TotalUnActiveAmount)}}</div>
  124. </div>
  125. </div>
  126. <div class="df c666 f12 flexsb" v-for="item in obj.ProductList" :key="item.Id" @click="gotransactiondetail(obj.TradeMonth,item)">
  127. <div class="type">{{item.Name}}</div>
  128. <div class="num_personal df cm"><span>{{abs(item.Amount)}}</span>
  129. <van-icon name="arrow"></van-icon>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </van-col>
  135. </van-row>
  136. </van-tab>
  137. </van-tabs>
  138. <van-popup class="product_mymerchant_transaction" v-model="showDate" position="bottom" :style="{ height: '50%' }" v-cloak>
  139. <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate" @cancel="showDate = false" :formatter="formatter" @confirm="onConfirmDate"></van-datetime-picker>
  140. </van-popup>
  141. </div>
  142. <script src="./static/js/klm-vv.min.js"></script>
  143. <script src="./static/js/appfunc.min.js"></script>
  144. <script src="./static/js/klm-axios-config.js"></script>
  145. <script src="./static/js/publicfn.js"></script>
  146. <script>
  147. function OnStart(){
  148. PublicLib.SetStatusBarStyle({type:'light', isShow:1});
  149. };
  150. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  151. // 可以通过下面的方式手动注册
  152. Vue.use(vant.Lazyload);
  153. //--- PublicLib.SetStatusBarStyle({type:'light', isShow:1});
  154. // 在 #app 标签下渲染一个按钮组件
  155. let app = new Vue({
  156. el: '#app',
  157. data() {
  158. return {
  159. toptitleisshow:true,
  160. active:1,
  161. activeKey: 0,
  162. loading: false,
  163. finished: false,
  164. refreshing: false,
  165. data:[
  166. ],
  167. showDate: false,
  168. minDate: new Date(2020, 0, 1),
  169. maxDate: new Date(),
  170. currentDate: new Date(),
  171. nowdate:'',
  172. pageinfo:{
  173. PageSize:10,
  174. PageNum:1
  175. },
  176. ismonth:true,
  177. };
  178. },
  179. created() {
  180. this.onConfirmDate();
  181. },
  182. watch:{
  183. },
  184. methods: {
  185. changetab(){
  186. if(this.active === 1){
  187. //- this.data = [];
  188. this.gethalfyearinfo();
  189. this.ismonth = false;
  190. };
  191. if(this.active === 0 && !this.ismonth) {
  192. //- this.data = [];
  193. this.getmonthinfo('refresh');
  194. this.ismonth = true;
  195. };
  196. },
  197. choosetime(){
  198. if(this.active !== 0) return;
  199. this.showDate = true;
  200. },
  201. onLoad() {
  202. if (this.refreshing) {
  203. //- this.data = [];
  204. this.refreshing = false;
  205. this.pageinfo.PageNum = 0;
  206. }
  207. this.pageinfo.PageNum++;
  208. this.getmonthinfo();
  209. },
  210. onRefresh() {
  211. // 清空列表数据
  212. this.finished = false;
  213. // 重新加载数据
  214. // 将 loading 设置为 true,表示处于加载状态
  215. this.loading = true;
  216. this.pageinfo.PageNum = 1;
  217. this.getmonthinfo('refresh');
  218. },
  219. goback(){
  220. PublicLib.GoBack({Level:1});
  221. },
  222. formatter(type, val) {
  223. if (type === 'year') {
  224. return `${val}年`;
  225. } else if (type === 'month') {
  226. return `${val}月`;
  227. } else if (type === 'day') {
  228. return `${val}日`;
  229. };
  230. return val;
  231. },
  232. onConformateDate(){
  233. return formatDate(this.currentDate.getFullYear(),this.currentDate.getMonth() + 1);
  234. },
  235. onParamsDate(date){
  236. if(date.length > 8){
  237. return formatDate(new Date(date).getFullYear(),new Date(date).getMonth() + 1,new Date(date).getDate());
  238. }else{
  239. return formatDate(new Date(date).getFullYear(),new Date(date).getMonth() + 1);
  240. }
  241. },
  242. onConfirmDate() {
  243. //- this.data = [];
  244. this.showDate = false;
  245. this.nowdate = this.currentDate.getFullYear() + '-' + fillzero((this.currentDate.getMonth() + 1));
  246. this.ismonth = false;
  247. this.changetab();
  248. },
  249. async getmonthinfo(type = 'onload'){
  250. const UserId = PublicLib.getCookieInfo('userId');
  251. const res = await getRequest('api/v1/usertradedaysummary/personalperformanceforday?t='+Math.random(6),JSON.stringify({...this.pageinfo,TradeMonth:this.onConformateDate(),UserId}));
  252. if(res.status !== '1')return tips('月个人交易获取失败!');
  253. if(res.data.length < this.pageinfo.PageSize - 1) {
  254. this.finished = true;
  255. };
  256. if(type === 'refresh'){
  257. this.data = res.data
  258. this.refreshing = false;
  259. }else{
  260. this.data.push(...res.data);
  261. }
  262. this.loading = false;
  263. },
  264. async gethalfyearinfo(){
  265. const UserId = PublicLib.getCookieInfo('userId');
  266. const res = await getRequest('api/v1/usertradedaysummary/personalperformancehalfyear?t='+Math.random(6),JSON.stringify({...this.pageinfo,UserId}));
  267. if(res.status !== '1')return tips('半年个人交易获取失败!');
  268. //- res.data[0].ProductList = [{Id:101,Name:'流水分润',Amount:20526541.10}];
  269. console.log(res)
  270. this.data = res.data;
  271. },
  272. gotransactiondetail(date,item){
  273. PublicLib.putCookieInfo('queryachievementid',PublicLib.getCookieInfo('userId'));
  274. PublicLib.putCookieInfo('paramstime', this.onParamsDate(date));
  275. PublicLib.putCookieInfo('transactiontype', '个人交易');
  276. PublicLib.putCookieInfo('topshowtimetime', date);
  277. PublicLib.putCookieInfo('merchantName', item.Name);
  278. PublicLib.putCookieInfo('merchantTypeId', item.Id);
  279. PublicLib.Goto({Url:'transaction-detail'});
  280. },
  281. }
  282. });
  283. </script>
  284. </body>
  285. </html>