management.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  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="ovh bgcf7f7f7" style="padding:0;">
  18. <div class="management" id="app" v-cloak>
  19. <van-nav-bar class="mall_title bottom_line" title="经营数据" v-if="toptitleisshow"></van-nav-bar>
  20. <van-tabs v-model="pagetabinfo" @click="tabschange">
  21. <van-tab title="日">
  22. <div class="chosetime df bgcfff" @click="pickerisshow = true">
  23. <div class="f14 c333">选择时间</div>
  24. <div class="choseicon mr12"></div>
  25. <div class="f14">{{chosedata}}</div>
  26. </div>
  27. <div class="management-ovx-y">
  28. <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="min-height:0vh;height:100%;" :class="Daydata.length === 0 ? 'isnodata':''">
  29. <van-empty class="custom-image" image="./static/images/no-data.png" description="暂无日数据" v-if="Daydata.length === 0"> </van-empty>
  30. <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
  31. <div class="dailypanel bgcfff" v-for="item,index in Daydata" :key="index">
  32. <div class="titledate c333 f16 mb">{{item.Date}}</div>
  33. <div class="df dataitem">
  34. <div class="f12 c999">实收总金额(元)</div>
  35. <div class="f16 c333 mb"> {{item.Amount}}</div>
  36. </div>
  37. <div class="df dataitem">
  38. <div class="f12 c999">微信实收</div>
  39. <div class="f16 c333 mb">{{item.WeChatAmount}}</div>
  40. </div>
  41. <div class="df dataitem">
  42. <div class="f12 c999">支付宝实收</div>
  43. <div class="f16 c333 mb">{{item.AlipayAmount}}</div>
  44. </div>
  45. <div class="df dataitem">
  46. <div class="f12 c999">订单数</div>
  47. <div class="f16 c333 mb">{{item.OrderCount}}</div>
  48. </div>
  49. <div class="df dataitem">
  50. <div class="f12 c999">新增会员</div>
  51. <div class="f16 c333 mb">{{item.AddCount}}</div>
  52. </div>
  53. </div>
  54. </van-list>
  55. </van-pull-refresh>
  56. </div>
  57. </van-tab>
  58. <van-tab title="月">
  59. <div class="management-moth-ovx-y">
  60. <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="min-height:0vh;height:100%;" :class="Monthdata.length === 0 ? 'isnodata':''">
  61. <van-empty class="custom-image" image="./static/images/no-data.png" description="暂无月数据" v-if="Monthdata.length === 0"> </van-empty>
  62. <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
  63. <div class="dailypanel bgcfff" v-for="item,index in Monthdata" :key="index">
  64. <div class="titledate c333 f16 mb">{{item.Month}}</div>
  65. <div class="df dataitem">
  66. <div class="f12 c999">实收总金额(元)</div>
  67. <div class="f16 c333"> {{item.Amount}}</div>
  68. </div>
  69. <div class="df dataitem">
  70. <div class="f12 c999">微信实收</div>
  71. <div class="f16 c333 mb">{{item.WeChatAmount}}</div>
  72. </div>
  73. <div class="df dataitem">
  74. <div class="f12 c999">支付宝实收</div>
  75. <div class="f16 c333 mb">{{item.AlipayAmount}}</div>
  76. </div>
  77. <div class="df dataitem">
  78. <div class="f12 c999">订单数</div>
  79. <div class="f16 c333 mb">{{item.OrderCount}}</div>
  80. </div>
  81. <div class="df dataitem">
  82. <div class="f12 c999">新增会员</div>
  83. <div class="f16 c333 mb">{{item.AddCount}}</div>
  84. </div>
  85. </div>
  86. </van-list>
  87. </van-pull-refresh>
  88. </div>
  89. </van-tab>
  90. <van-tab title="总">
  91. <div class="management-ovx-y">
  92. <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="min-height:0vh;height:100%;" :class="Monthdata.length === 0 ? 'isnodata':''">
  93. <div class="dailypanel bbln bgcfff">
  94. <div class="df dataitem totledataitem">
  95. <div class="f12 c999">统计时间</div>
  96. <div class="f16 c333"> {{Alldata.CreateDate}}</div>
  97. </div>
  98. <div class="df dataitem totledataitem">
  99. <div class="f12 c999">实收总金额(元)</div>
  100. <div class="f16 c333 mb">{{Alldata.TotalActual}}</div>
  101. </div>
  102. <div class="df dataitem totledataitem">
  103. <div class="f12 c999">微信实收(元)</div>
  104. <div class="f16 c333 mb">{{Alldata.WeChatTotal}}</div>
  105. </div>
  106. <div class="df dataitem totledataitem">
  107. <div class="f12 c999">支付宝实收(元)</div>
  108. <div class="f16 c333 mb">{{Alldata.AlipayTotal}}</div>
  109. </div>
  110. <div class="df dataitem totledataitem">
  111. <div class="f12 c999">订单总数</div>
  112. <div class="f16 c333 mb">{{Alldata.TotalOrder}}</div>
  113. </div>
  114. <div class="df dataitem totledataitem">
  115. <div class="f12 c999">会员总数</div>
  116. <div class="f16 c333 mb">{{Alldata.TotalCustomer}}</div>
  117. </div>
  118. </div>
  119. </van-pull-refresh>
  120. </div>
  121. </van-tab>
  122. </van-tabs>
  123. <van-action-sheet v-model="pickerisshow">
  124. <van-datetime-picker v-model="currentDate" round type="year-month" @confirm="chosedate" @cancel="pickerisshow = false" title="选择年月" :min-date="minDate" :max-date="maxDate" :formatter="formatter"></van-datetime-picker>
  125. </van-action-sheet>
  126. <van-tabbar v-model="active" active-color="#FF502A" v-cloak v-if="tabsisshow">
  127. <van-tabbar-item icon="home-o" @click="index">工作台
  128. <template #icon="props"><img :src="props.active ? icon1.active : icon1.inactive"></template>
  129. </van-tabbar-item>
  130. <van-tabbar-item icon="search">经营数据
  131. <template #icon="props"><img :src="props.active ? icon2.active : icon2.inactive"></template>
  132. </van-tabbar-item>
  133. <van-tabbar-item icon="friends-o" @click="notice">消息
  134. <template #icon="props"><img :src="props.active ? icon3.active : icon3.inactive"></template>
  135. </van-tabbar-item>
  136. <van-tabbar-item icon="setting-o" @click="user">我的
  137. <template #icon="props"><img :src="props.active ? icon4.active : icon4.inactive"></template>
  138. </van-tabbar-item>
  139. </van-tabbar>
  140. </div>
  141. <script src="./static/js/klm-vv.min.js"></script>
  142. <script src="./static/js/klm-axios-config.js"></script>
  143. <script>
  144. function OnStart(){
  145. app.getnoticecount();
  146. };
  147. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  148. // 可以通过下面的方式手动注册
  149. Vue.use(vant.Lazyload);
  150. //- PublicLib.SetStatusBarBgColor({bgcolor:'ffffff'});
  151. // 在 #app 标签下渲染一个按钮组件
  152. let app = new Vue({
  153. el: '#app',
  154. data() {
  155. return {
  156. loading: false,
  157. finished: false,
  158. refreshing: false,
  159. pickerisshow:false,
  160. pagetabinfo:0,
  161. active: 1,
  162. toptitleisshow:false,
  163. minDate: new Date(2021, 0, 1),
  164. maxDate: new Date(),
  165. currentDate: new Date(),
  166. icon1: {
  167. active: './static/images/tab-icon1-active.png',
  168. inactive: './static/images/tab-icon1-no.png',
  169. },
  170. icon2: {
  171. active: './static/images/tab-icon2-active.png',
  172. inactive: './static/images/tab-icon2-no.png',
  173. },
  174. icon3: {
  175. active: './static/images/tab-icon3-active.png',
  176. inactive: './static/images/tab-icon3-no.png',
  177. },
  178. icon4: {
  179. active: './static/images/tab-icon4-active.png',
  180. inactive: './static/images/tab-icon4-no.png',
  181. },
  182. Daydata:[],
  183. Monthdata:[],
  184. Alldata:[],
  185. pageinfo:{
  186. PageNum:1,
  187. PageSize:10,
  188. },
  189. chosedata:'',
  190. }
  191. },
  192. created() {
  193. this.tabsisshow = false;
  194. this.getmangementdaydata();
  195. this.chosedata = this.formatter('year',new Date().getFullYear()) + this.formatter('month',new Date().getMonth() + 1);
  196. },
  197. methods: {
  198. //- 时间处理函数
  199. formattate(){
  200. return this.currentDate.getFullYear() +''+ (fillzero(this.currentDate.getMonth() + 1));
  201. },
  202. //- 获取日统计数据
  203. async getmangementdaydata(){
  204. let MerchantId = PublicLib.getCookieInfo('userId')
  205. const res = await getRequest('/api/v1/consumerorders/bydate?t='+Math.random(6),JSON.stringify({...this.pageinfo,MerchantId,Month:this.formattate()}));
  206. if(res.status !== '1') return tips(res.info);
  207. if(res.data.length < this.pageinfo.PageSize){
  208. this.finished = true;
  209. };
  210. this.Daydata.push(...res.data);
  211. this.loading = false;
  212. },
  213. //- 获取月统计数据
  214. async getmangementmonthdata(){
  215. let MerchantId = PublicLib.getCookieInfo('userId')
  216. const res = await getRequest('/api/v1/consumerorders/bymonth?t='+Math.random(6),JSON.stringify({...this.pageinfo,MerchantId}));
  217. if(res.status !== '1') return tips(res.info);
  218. if(res.data.length < this.pageinfo.PageSize){
  219. this.finished = true;
  220. };
  221. this.Monthdata.push(...res.data);
  222. this.loading = false;
  223. },
  224. //- 获取总统计数据
  225. async getmangementalldata(){
  226. let Id = PublicLib.getCookieInfo('userId')
  227. const res = await getRequest('/api/v1/merchantinfo/statdata?t='+Math.random(6),JSON.stringify({Id}));
  228. if(res.status !== '1') return tips(res.info);
  229. this.Alldata = res.data;
  230. this.Alldata.data = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`;
  231. },
  232. tabschange(index){
  233. this.finished = false;
  234. this.pageinfo.PageNum = 0;
  235. switch(index){
  236. case 0:
  237. this.Daydata = [];
  238. this.Monthdata = [];
  239. this.loading = true;
  240. this.getmangementdaydata();
  241. break;
  242. case 1:
  243. this.Daydata = [];
  244. this.Monthdata = [];
  245. this.loading = true;
  246. this.getmangementmonthdata();
  247. break;
  248. case 2:
  249. this.getmangementalldata();
  250. break;
  251. }
  252. },
  253. formatter(type, val) {
  254. if (type === 'year') {
  255. return `${val}年`;
  256. } else if (type === 'month') {
  257. return `${val}月`;
  258. }
  259. return val;
  260. },
  261. chosedate(a){
  262. this.chosedata = this.formatter('year',new Date(a).getFullYear()) + this.formatter('month',new Date(a).getMonth() + 1);
  263. this.Daydata = [];
  264. this.getmangementdaydata();
  265. this.pickerisshow = false;
  266. },
  267. onLoad() {
  268. if(this.pagetabinfo === 0){
  269. if (this.refreshing) {
  270. this.Daydata = [];
  271. this.refreshing = false;
  272. this.pageinfo.PageNum = 0;
  273. }
  274. this.pageinfo.PageNum++;
  275. this.getmangementdaydata();
  276. }else if(this.pagetabinfo === 1){
  277. if (this.refreshing) {
  278. this.Monthdata = [];
  279. this.refreshing = false;
  280. this.pageinfo.PageNum = 0;
  281. }
  282. this.pageinfo.PageNum++;
  283. this.getmangementmonthdata();
  284. }else{
  285. if (this.refreshing) {
  286. this.refreshing = false;
  287. }
  288. this.getmangementalldata();
  289. };
  290. },
  291. onRefresh() {
  292. // 清空列表数据
  293. this.finished = false;
  294. // 重新加载数据
  295. // 将 loading 设置为 true,表示处于加载状态
  296. this.loading = true;
  297. this.onLoad();
  298. },
  299. index(){
  300. PublicLib.Goto({Url:'index'});
  301. },
  302. notice(){
  303. PublicLib.Goto({Url:'notice-center'});
  304. },
  305. user(){
  306. PublicLib.Goto({Url:'user-center'});
  307. },
  308. }
  309. });
  310. </script>
  311. </body>
  312. </html>