merchant-active.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  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="计奖交易-激活商户" @click-left="goback" v-if="toptitleisshow">
  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 swipeable @change="changetab" 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" v-if="active === 0">
  34. <van-col class="bgcfff peoname abs">
  35. <van-sidebar v-model="activeKey" @change="onChange">
  36. <div class="merchant_active">
  37. <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" style="min-height: 50vh;">
  38. <van-list v-model="loading2" :finished="finished2" finished-text="" @load="onLoad2">
  39. <van-sidebar-item v-for="item in nameList" :title="item.RealName"></van-sidebar-item>
  40. </van-list>
  41. </van-pull-refresh>
  42. </div>
  43. </van-sidebar>
  44. </van-col>
  45. <van-col class="infobox merchant_active">
  46. <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :class="data.length === 0 ? 'isnodata':''" style="min-height: 50vh;">
  47. <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
  48. <div class="panel bgcfff" v-for="obj in data">
  49. <div class="toppanel df">
  50. <div class="block"></div>
  51. <div class="f14 c333 b">{{obj.Date}}</div>
  52. </div>
  53. <div class="mainpanel">
  54. <div class="title df c333 f14 flexsb">
  55. <div>总激活</div>
  56. <div>{{obj.ActTotal}}户</div>
  57. </div>
  58. <div class="df c666 f12 flexsb" v-for="item in obj.TypeList" @click="gotransactiondetail(obj.TradeMonth,item)">
  59. <div class="type">{{item.Brand}}</div>
  60. <div class="num">{{item.Count}}户</div>
  61. </div>
  62. </div>
  63. </div>
  64. </van-list>
  65. </van-pull-refresh>
  66. </van-col>
  67. </van-row>
  68. </van-tab>
  69. <van-tab>
  70. <template #title><span>近半年</span></template>
  71. <van-row class="main rel" v-if="active === 1">
  72. <van-col class="bgcfff peoname abs">
  73. <van-sidebar v-model="activeKey" @change="onChange">
  74. <div class="merchant_active">
  75. <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" style="min-height: 50vh;">
  76. <van-list v-model="loading2" :finished="finished2" finished-text="" @load="onLoad2" :immediate-check="false">
  77. <van-sidebar-item v-for="item in nameList" :title="item.RealName"></van-sidebar-item>
  78. </van-list>
  79. </van-pull-refresh>
  80. </div>
  81. </van-sidebar>
  82. </van-col>
  83. <van-col class="infobox marginleft merchant_active">
  84. <div class="panel bgcfff" v-for="obj in data">
  85. <div class="toppanel df">
  86. <div class="block"></div>
  87. <div class="f14 c333 b">{{obj.TradeMonth}}</div>
  88. </div>
  89. <div class="mainpanel">
  90. <div class="title df c333 f14 flexsb">
  91. <div>总激活</div>
  92. <div>{{obj.ActTotal}}户</div>
  93. </div>
  94. <div class="df c666 f12 flexsb" v-for="item in obj.TypeList" @click="gotransactiondetail(obj.TradeMonth,item)">
  95. <div class="type">{{item.Brand}}</div>
  96. <div class="num">{{item.Count}}户</div>
  97. </div>
  98. </div>
  99. </div>
  100. </van-col>
  101. </van-row>
  102. </van-tab>
  103. </van-tabs>
  104. <van-popup class="product_mymerchant_transaction" v-model="showDate" position="bottom" :style="{ height: '50%' }" v-cloak>
  105. <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>
  106. </van-popup>
  107. </div>
  108. <script src="./static/js/klm-vv.min.js"></script>
  109. <script src="./static/js/appfunc.min.js"></script>
  110. <script src="./static/js/klm-axios-config.js"></script>
  111. <script src="./static/js/publicfn.js"></script>
  112. <script>
  113. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  114. // 可以通过下面的方式手动注册
  115. Vue.use(vant.Lazyload);
  116. //--- PublicLib.SetStatusBarStyle({type:'light', isShow:1});
  117. // 在 #app 标签下渲染一个按钮组件
  118. let app = new Vue({
  119. el: '#app',
  120. data() {
  121. return {
  122. toptitleisshow:true,
  123. active:1,
  124. activeKey:0,
  125. loading: false,
  126. finished: false,
  127. refreshing: false,
  128. refreshing2: false,
  129. loading2: false,
  130. finished2: false,
  131. pageinfo:{
  132. PageSize:10,
  133. PageNum:1
  134. },
  135. pageinfo2:{
  136. PageSize:10,
  137. PageNum:1
  138. },
  139. minDate: new Date(2020, 0, 1),
  140. maxDate: new Date(),
  141. currentDate: new Date(),
  142. nowdate:'',
  143. showDate: false,
  144. nameList:[
  145. ],
  146. data:[
  147. ],
  148. ismonth:false,
  149. merchantId:'',
  150. Id:'',
  151. };
  152. },
  153. async created() {
  154. await this.getmerchantlist();
  155. this.onConfirmDate();
  156. },
  157. methods: {
  158. onChange(index) {
  159. const people = this.nameList.find((item,ind)=>ind === index);
  160. //- this.data = [];
  161. this.merchantId = people.Id;
  162. if(this.active === 0) {
  163. this.pageinfo.PageNum = 1;
  164. this.getmonthinfo('refresh',this.merchantId);
  165. }else{
  166. this.gethalfyearinfo(people.Id);
  167. };
  168. },
  169. onLoad() {
  170. if(this.refreshing){
  171. this.refreshing = false;
  172. };
  173. this.pageinfo.PageNum++;
  174. this.getmonthinfo('onload',this.Id);
  175. },
  176. onLoad2() {
  177. if(this.refreshing2){
  178. this.refreshing2 = false;
  179. }
  180. this.pageinfo2.PageNum++;
  181. this.getmerchantlist();
  182. },
  183. changetab(){
  184. this.pageinfo.PageNum = 1;
  185. this.pageinfo2.PageNum = 1;
  186. if(this.active === 0 && !this.ismonth) {
  187. //- this.data = []
  188. this.getmonthinfo('refresh',this.Id);
  189. this.ismonth = true;
  190. };
  191. if(this.active === 1){
  192. //- this.data = []
  193. this.gethalfyearinfo(this.Id);
  194. this.ismonth = false;
  195. };
  196. },
  197. onRefresh() {
  198. this.pageinfo.PageNum = 1;
  199. // 清空列表数据
  200. this.finished = false;
  201. this.getmonthinfo('refresh',this.Id);
  202. //- this.data = [];
  203. // 重新加载数据
  204. // 将 loading 设置为 true,表示处于加载状态
  205. //- this.onLoad();
  206. },
  207. onRefresh2(){
  208. this.pageinfo2.PageNum = 0;
  209. // 清空列表数据
  210. this.finished = false;
  211. //- this.nameList = [];
  212. // 重新加载数据
  213. // 将 loading 设置为 true,表示处于加载状态
  214. this.onLoad2();
  215. this.loading2 = true;
  216. },
  217. choosetime(e){
  218. if(this.active === 0) {
  219. e.stopPropagation();
  220. }
  221. if(this.active !== 0) return;
  222. this.showDate = true;
  223. },
  224. formatter(type, val) {
  225. if (type === 'year') {
  226. return `${val}年`;
  227. } else if (type === 'month') {
  228. return `${val}月`;
  229. } else if (type === 'day') {
  230. return `${val}日`;
  231. }
  232. return val;
  233. },
  234. onConformateDate(){
  235. return formatDate(this.currentDate.getFullYear(),this.currentDate.getMonth() + 1);
  236. },
  237. onParamsDate(date){
  238. return formatDate(new Date(date).getFullYear(),new Date(date).getMonth() + 1);
  239. },
  240. onConfirmDate() {
  241. //- this.data = [];
  242. this.showDate = false;
  243. this.nowdate = this.currentDate.getFullYear() + '-' + (this.currentDate.getMonth() + 1);
  244. this.ismonth = false;
  245. this.changetab();
  246. },
  247. async getmonthinfo(type,UserId){
  248. this.finished = false;
  249. //- const UserId = PublicLib.getCookieInfo('userId');
  250. const MerchantId = this.nameList[this.activeKey].Id
  251. this.Id = UserId ? UserId : PublicLib.getCookieInfo('userId');
  252. const res = await getRequest('/api/v1/pos/ActiveReward/TeamActMerchantForMonth?t='+Math.random(6),JSON.stringify({...this.pageinfo,TradeMonth:this.onConformateDate(),UserId:this.Id,MerchantId}));
  253. if(res.status !== '1')return tips('月计奖交易获取失败!');
  254. if(res.data.length < this.pageinfo.PageSize - 1) {
  255. this.finished = true;
  256. };
  257. if(type === 'refresh'){
  258. this.data = res.data
  259. this.refreshing = false;
  260. }else{
  261. this.data.push(...res.data);
  262. }
  263. this.loading = false;
  264. },
  265. async gethalfyearinfo(UserId){
  266. this.Id = UserId ? UserId : PublicLib.getCookieInfo('userId');
  267. const MerchantId = this.nameList[this.activeKey].Id;
  268. const res = await getRequest('/api/v1/pos/ActiveReward/TeamActMerchantForHalfYear?t='+Math.random(6),JSON.stringify({...this.pageinfo,UserId:this.Id,MerchantId}));
  269. if(res.status !== '1')return tips('半年计奖交易获取失败!');
  270. this.data = res.data;
  271. },
  272. async getmerchantlist(){
  273. //- PublicLib.ShowLoading({Message:''});
  274. this.finished2 = false;
  275. const UserId = PublicLib.getCookieInfo('userId');
  276. const res = await getRequest('api/v1/users/mymakerlist?t='+Math.random(6),JSON.stringify({...this.pageinfo2,UserLevel:'',RealName:'',UserId,Sort:1}));
  277. if(res.status !== '1')return tips('创客列表获取失败!');
  278. //- PublicLib.HideLoading();
  279. if(res.data.length < this.pageinfo2.PageSize) {
  280. this.finished2 = true;
  281. };
  282. if(this.pageinfo2.PageNum === 1){
  283. this.nameList = [
  284. {RealName:'总业绩',Id:''},
  285. ];
  286. };
  287. this.nameList.push(...res.data);
  288. this.nameList.forEach(item=>{
  289. if(item.Id === 31){
  290. item.RealName = '张浩';
  291. }
  292. })
  293. this.loading2 = false;
  294. },
  295. goback(){
  296. PublicLib.GoBack({Level:1});
  297. },
  298. }
  299. });
  300. </script>
  301. </body>
  302. </html>