team-achievement1.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  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. .infobox::-webkit-scrollbar {
  18. display: none;
  19. }
  20. </style>
  21. </head>
  22. <body class="bgc-back pb0 h100p ovh">
  23. <div class="iphonetitle"> </div>
  24. <div class="merchant_achievement" id="app" v-cloak>
  25. <van-nav-bar class="camp_title user_title_normal titlef16 left_icon_cfff" left-arrow title="计奖交易" v-if="toptitleisshow" @click-left="goback">
  26. <template #left>
  27. <van-icon name="arrow-left" color="#333"> </van-icon>
  28. </template>
  29. </van-nav-bar>
  30. <div class="merchant_achievement_topblock"></div>
  31. <van-tabs class="toptab" v-model="active" @click="changetab" title-active-color="#FF5A32" title-inactive-color="#333" line-width="32" line-height="2">
  32. <van-tab>
  33. <template #title>
  34. <div @click="choosetime"><span>{{nowdate}}</span>
  35. <van-icon name="arrow"></van-icon>
  36. </div>
  37. </template>
  38. <van-row class="main rel" v-if="active === 0">
  39. <van-col class="bgcfff peoname abs">
  40. <van-sidebar v-model="activeKey" @change="onChange">
  41. <div class="merchant_active">
  42. <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" style="min-height: 50vh;">
  43. <van-list v-model="loading2" :finished="finished2" finished-text="" @load="onLoad2">
  44. <van-sidebar-item v-for="item in nameList" :title="item.RealName"></van-sidebar-item>
  45. </van-list>
  46. </van-pull-refresh>
  47. </div>
  48. </van-sidebar>
  49. </van-col>
  50. <van-col class="infobox">
  51. <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="height: 100%;">
  52. <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
  53. <div class="panel bgcfff" v-for="obj,index in data" :key="index">
  54. <div class="toppanel df">
  55. <div class="block"></div>
  56. <div class="f14 c333 b">{{obj.TradeDate}}</div>
  57. </div>
  58. <div class="mainpanel">
  59. <div class="title df c333 f16 flexsb">
  60. <div>总交易额</div>
  61. <div>{{obj.TradeAmount}}元</div>
  62. </div>
  63. <div class="type_panel df flexsb">
  64. <div>
  65. <div class="type c999">服务总交易额(元)</div>
  66. <div class="money f12">{{obj.CardAmount}}</div>
  67. </div>
  68. <div class="line"></div>
  69. <div>
  70. <div class="type c999">流水总交易额(元)</div>
  71. <div class="money f12 tr">{{obj.QrPayAmount}}</div>
  72. </div>
  73. </div>
  74. <div class="df c666 f12 flexsb" v-for="item in obj.ProductList">
  75. <div class="type">{{item.Name}}</div>
  76. <div class="num_personal df cm"><span>{{item.Amount}}元</span>
  77. <van-icon name="arrow"> </van-icon>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </van-list>
  83. </van-pull-refresh>
  84. </van-col>
  85. </van-row>
  86. </van-tab>
  87. <van-tab>
  88. <template #title><span>近半年</span></template>
  89. <van-row class="main ovh rel" v-if="active === 1">
  90. <van-col class="bgcfff peoname abs">
  91. <van-sidebar v-model="activeKey" @change="onChange">
  92. <div class="merchant_active">
  93. <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" style="min-height: 50vh;">
  94. <van-list v-model="loading2" :finished="finished2" finished-text="" @load="onLoad2" :immediate-check="false">
  95. <van-sidebar-item v-for="item in nameList" :title="item.RealName"></van-sidebar-item>
  96. </van-list>
  97. </van-pull-refresh>
  98. </div>
  99. </van-sidebar>
  100. </van-col>
  101. <van-col class="infobox marginleft">
  102. <div class="panel bgcfff" v-for="obj,index in data" :key="index">
  103. <div class="toppanel df">
  104. <div class="block"></div>
  105. <div class="f14 c333 b">{{obj.TradeMonth}}</div>
  106. </div>
  107. <div class="mainpanel">
  108. <div class="title df c333 f14 flexsb">
  109. <div>总交易额</div>
  110. <div>{{obj.TradeAmount}}元</div>
  111. </div>
  112. <div class="type_panel df flexsb">
  113. <div>
  114. <div class="type c999">服务总交易额(元)</div>
  115. <div class="money f12">{{obj.QrPayAmount}}</div>
  116. </div>
  117. <div class="line"></div>
  118. <div>
  119. <div class="type c999">流水总交易额(元)</div>
  120. <div class="money f12 tr">{{obj.CardAmount}}</div>
  121. </div>
  122. </div>
  123. <div class="df c666 f12 flexsb" v-for="item in obj.ProductList" @click="gotransactiondetail(obj.TradeMonth,item)">
  124. <div class="type">{{item.Name}}</div>
  125. <div class="num_personal df cm"><span>{{item.Amount}}元</span>
  126. <van-icon name="arrow"> </van-icon>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </van-col>
  132. </van-row>
  133. </van-tab>
  134. </van-tabs>
  135. <van-popup class="product_mymerchant_transaction" v-model="showDate" position="bottom" :style="{ height: '50%' }" v-cloak>
  136. <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>
  137. </van-popup>
  138. </div>
  139. <script src="./static/js/klm-vv.min.js"></script>
  140. <script src="./static/js/appfunc.min.js"></script>
  141. <script src="./static/js/klm-axios-config.js"></script>
  142. <script src="./static/js/publicfn.js"></script>
  143. <script>
  144. function OnStart(){
  145. PublicLib.SetStatusBarStyle({type:'light', isShow:1});
  146. };
  147. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  148. // 可以通过下面的方式手动注册
  149. Vue.use(vant.Lazyload);
  150. //--- PublicLib.SetStatusBarStyle({type:'light', isShow:1});
  151. // 在 #app 标签下渲染一个按钮组件
  152. let app = new Vue({
  153. el: '#app',
  154. data() {
  155. return {
  156. toptitleisshow:true,
  157. active:1,
  158. activeKey: 0,
  159. loading: false,
  160. finished: false,
  161. loading2: false,
  162. refreshing2: false,
  163. finished2: false,
  164. refreshing:false,
  165. pageinfo:{
  166. PageSize:10,
  167. PageNum:1
  168. },
  169. pageinfo2:{
  170. PageSize:10,
  171. PageNum:1
  172. },
  173. minDate: new Date(2020, 0, 1),
  174. maxDate: new Date(),
  175. currentDate: new Date(),
  176. nowdate:'',
  177. showDate: false,
  178. nameList:[
  179. {RealName:'全部',Id:''}
  180. ],
  181. data:[
  182. ],
  183. ismonth:false,
  184. merchantId:'',
  185. };
  186. },
  187. created() {
  188. this.onConfirmDate();
  189. this.getmerchantlist();
  190. },
  191. methods: {
  192. onChange(index) {
  193. const people = this.nameList.find((item,ind)=>ind === index);
  194. this.data = [];
  195. this.merchantId = people.Id;
  196. if(this.active === 0) {
  197. this.getmonthinfo(people.Id);
  198. }else{
  199. this.gethalfyearinfo(people.Id);
  200. };
  201. },
  202. onLoad() {
  203. this.pageinfo.PageNum++;
  204. this.getmonthinfo('');
  205. },
  206. onLoad2() {
  207. if(this.refreshing2){
  208. this.refreshing2 = false;
  209. this.pageinfo2.PageNum++;
  210. this.getmerchantlist();
  211. }
  212. },
  213. changetab(){
  214. this.activeKey = 0;
  215. this.nameList = [{RealName:'全部',Id:''}];
  216. this.getmerchantlist();
  217. console.log(this.ismonth)
  218. if(this.active === 0 && !this.ismonth) {
  219. console.log(9999)
  220. this.data = []
  221. this.getmonthinfo('');
  222. this.ismonth = true;
  223. }
  224. if(this.active === 1){
  225. this.data = []
  226. this.gethalfyearinfo('');
  227. this.ismonth = false;
  228. };
  229. },
  230. onRefresh() {
  231. this.refreshing = false;
  232. this.pageinfo.PageNum = 0;
  233. // 清空列表数据
  234. this.finished = false;
  235. this.data = [];
  236. // 重新加载数据
  237. // 将 loading 设置为 true,表示处于加载状态
  238. if(this.active === 1){
  239. this.gethalfyearinfo('');
  240. };
  241. },
  242. onRefresh2(){
  243. this.pageinfo2.PageNum = 0;
  244. // 清空列表数据
  245. this.finished = false;
  246. this.nameList = [];
  247. // 重新加载数据
  248. // 将 loading 设置为 true,表示处于加载状态
  249. this.onLoad2();
  250. },
  251. choosetime(e){
  252. if(this.active === 0) {
  253. e.stopPropagation();
  254. }
  255. if(this.active !== 0) return;
  256. this.showDate = true;
  257. },
  258. formatter(type, val) {
  259. if (type === 'year') {
  260. return `${val}年`;
  261. } else if (type === 'month') {
  262. return `${val}月`;
  263. } else if (type === 'day') {
  264. return `${val}日`;
  265. }
  266. return val;
  267. },
  268. onConformateDate(){
  269. return formatDate(this.currentDate.getFullYear(),this.currentDate.getMonth() + 1);
  270. },
  271. onParamsDate(date){
  272. return formatDate(new Date(date).getFullYear(),new Date(date).getMonth() + 1);
  273. },
  274. onConfirmDate() {
  275. this.data = [];
  276. this.showDate = false;
  277. this.nowdate = this.currentDate.getFullYear() + '-' + (this.currentDate.getMonth() + 1);
  278. this.gethalfyearinfo('');
  279. },
  280. async getmonthinfo(MerchantId){
  281. this.finished = false;
  282. const UserId = PublicLib.getCookieInfo('userId');
  283. const res = await getRequest('api/v1/usertradedaysummary/teamperformanceforday',JSON.stringify({...this.pageinfo,TradeMonth:this.onConformateDate(),UserId,MerchantId}));
  284. if(res.status !== '1')return tips('月计奖交易获取失败!');
  285. if(res.data.length < this.pageinfo.PageSize) {
  286. this.finished = true;
  287. };
  288. console.log(this.data)
  289. this.data.push(...res.data);
  290. this.loading = false;
  291. },
  292. async gethalfyearinfo(MerchantId){
  293. const UserId = PublicLib.getCookieInfo('userId');
  294. const res = await getRequest('api/v1/usertradedaysummary/teamperformancehalfyear',JSON.stringify({...this.pageinfo,UserId,MerchantId}));
  295. if(res.status !== '1')return tips('半年计奖交易获取失败!');
  296. this.data = res.data;
  297. },
  298. async getmerchantlist(){
  299. PublicLib.ShowLoading({Message:''});
  300. this.finished2 = false;
  301. const UserId = PublicLib.getCookieInfo('userId');
  302. const res = await getRequest('api/v1/users/mymakerlist',JSON.stringify({...this.pageinfo2,UserLevel:'',RealName:'',UserId,Sort:1}));
  303. if(res.status !== '1')return tips('创客列表获取失败!');
  304. PublicLib.HideLoading();
  305. if(res.data.length < this.pageinfo2.PageSize) {
  306. this.finished2 = true;
  307. };
  308. this.nameList = [
  309. {RealName:'全部',Id:''},
  310. ];
  311. //- this.nameList.push(...res.data);
  312. this.loading2 = false;
  313. },
  314. goback(){
  315. PublicLib.GoBack({Level:1});
  316. },
  317. gotransactiondetail(date,item){
  318. PublicLib.putCookieInfo('paramstime', this.onParamsDate(date));
  319. PublicLib.putCookieInfo('transactiontype', '计奖交易');
  320. PublicLib.putCookieInfo('topshowtimetime', date);
  321. PublicLib.putCookieInfo('merchantName', item.Name);
  322. PublicLib.putCookieInfo('merchantTypeId', item.Id);
  323. PublicLib.Goto({Url:'transaction-detail'});
  324. }
  325. }
  326. });
  327. </script>
  328. </body>
  329. </html>