1
0

main.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>欢迎页</title>
  5. #parse("sys/header.html")
  6. </head>
  7. <body>
  8. <div class="wrapper-content animated fadeIn" id="rrapp">
  9. <div class="row">
  10. <div class="col-md-3 col-sm-6 col-xs-12">
  11. <div class="small-box bg-red">
  12. <div class="inner">
  13. <h3>{{orderSum}}</h3>
  14. <p>所有订单</p>
  15. </div>
  16. <div class="icon">
  17. <i class="fa fa-shopping-bag"></i>
  18. </div>
  19. <a onclick="vm.toOrderByShipStatus()" class="small-box-footer">详情 <i
  20. class="fa fa-arrow-circle-right"></i></a>
  21. </div>
  22. </div>
  23. <div class="col-md-3 col-sm-6 col-xs-12">
  24. <div class="small-box bg-yellow">
  25. <div class="inner">
  26. <h3>{{dfOrderSum}}</h3>
  27. <p>待发货</p>
  28. </div>
  29. <div class="icon">
  30. <i class="fa fa-shopping-bag"></i>
  31. </div>
  32. <a onclick="vm.toOrderByShipStatus(0)" class="small-box-footer">详情 <i
  33. class="fa fa-arrow-circle-right"></i></a>
  34. </div>
  35. </div>
  36. <div class="col-md-3 col-sm-6 col-xs-12">
  37. <div class="small-box bg-green">
  38. <div class="inner">
  39. <h3>{{yfOrderSum}}</h3>
  40. <p>已发货</p>
  41. </div>
  42. <div class="icon">
  43. <i class="fa fa-shopping-bag"></i>
  44. </div>
  45. <a onclick="vm.toOrderByShipStatus(1)" class="small-box-footer">详情 <i
  46. class="fa fa-arrow-circle-right"></i></a>
  47. </div>
  48. </div>
  49. <div class="col-md-3 col-sm-6 col-xs-12">
  50. <div class="small-box bg-light-blue">
  51. <div class="inner">
  52. <h3>{{yfkOrderSum}}</h3>
  53. <p>待付款</p>
  54. </div>
  55. <div class="icon">
  56. <i class="fa fa-shopping-bag"></i>
  57. </div>
  58. <a onclick="vm.toOrderByPayStatus(0)" class="small-box-footer">详情 <i
  59. class="fa fa-arrow-circle-right"></i></a>
  60. </div>
  61. </div>
  62. <div class="col-md-3 col-sm-6 col-xs-12">
  63. <div class="small-box bg-fuchsia">
  64. <div class="inner">
  65. <h3>{{thcOrderSum}}</h3>
  66. <p>退货</p>
  67. </div>
  68. <div class="icon">
  69. <i class="fa fa-shopping-bag"></i>
  70. </div>
  71. <a onclick="vm.toOrderByShipStatus(4)" class="small-box-footer">详情 <i
  72. class="fa fa-arrow-circle-right"></i></a>
  73. </div>
  74. </div>
  75. <div class="col-md-3 col-sm-6 col-xs-12">
  76. <div class="small-box bg-aqua">
  77. <div class="inner">
  78. <h3>{{ywcOrderSum}}</h3>
  79. <p>已完成</p>
  80. </div>
  81. <div class="icon">
  82. <i class="fa fa-shopping-bag"></i>
  83. </div>
  84. <a onclick="vm.toOrderByOrderStatus(402)" class="small-box-footer">详情 <i
  85. class="fa fa-arrow-circle-right"></i></a>
  86. </div>
  87. </div>
  88. <div class="col-md-3 col-sm-6 col-xs-12">
  89. <div class="small-box bg-red">
  90. <div class="inner">
  91. <h3>{{userSum}}</h3>
  92. <p>所有会员</p>
  93. </div>
  94. <div class="icon">
  95. <i class="fa fa-user-md"></i>
  96. </div>
  97. <a onclick="vm.toUser()" class="small-box-footer">详情 <i class="fa fa-arrow-circle-right"></i></a>
  98. </div>
  99. </div>
  100. <div class="col-md-3 col-sm-6 col-xs-12">
  101. <div class="small-box bg-red">
  102. <div class="inner">
  103. <h3>{{goodsSum}}</h3>
  104. <p>所有商品</p>
  105. </div>
  106. <div class="icon">
  107. <i class="fa fa-ship"></i>
  108. </div>
  109. <a onclick="vm.toGoods()" class="small-box-footer">详情 <i class="fa fa-arrow-circle-right"></i></a>
  110. </div>
  111. </div>
  112. </div>
  113. <table class="table table-hover table-responsive table-bordered">
  114. <tr>
  115. <th colspan="5">会员购买率:<span style="color: red;">{{hygml}}%</span>(会员购买率=已付款订单会员数÷会员总数)</th>
  116. </tr>
  117. <tr style='text-align: center;'>
  118. <th>会员总数</th>
  119. <th>已付款订单会员数</th>
  120. <th>有订单会员数</th>
  121. <th>今日订单数</th>
  122. <th>今日会员购物总额</th>
  123. </tr>
  124. <tr style='text-align: center;'>
  125. <td>{{userSum}}</td>
  126. <td>{{yfkOrderUserSum}}</td>
  127. <td>{{oderUserSum}}</td>
  128. <td>{{todayUserOrder}}</td>
  129. <td>{{todayUserSales}}</td>
  130. </tr>
  131. </table>
  132. <table class="table table-hover table-responsive table-bordered">
  133. <tr>
  134. <th colspan="3">每会员平均订单数及购物额(每会员平均订单数=有订单会员数÷会员总数)</th>
  135. </tr>
  136. <tr style='text-align: center;'>
  137. <th>总收入</th>
  138. <th>每会员订单数</th>
  139. <th>每会员购物数</th>
  140. </tr>
  141. <tr style='text-align: center;'>
  142. <td>{{incomeSum}}</td>
  143. <td>{{mhydds}}</td>
  144. <td>{{mhygws}}</td>
  145. </tr>
  146. </table>
  147. <table class="table table-hover table-responsive table-bordered">
  148. <tr>
  149. <th>总点击数:{{hitCount}}; 每千点击订单数:{{average1000}}; 每千点击购物额:{{averageSales1000}}</th>
  150. </tr>
  151. </table>
  152. </div>
  153. <script type="text/javascript">
  154. var vm = new Vue({
  155. el: '#rrapp',
  156. data: {
  157. orderSum: 0,
  158. dfOrderSum: 0,//待发货
  159. yfOrderSum: 0,//已发货
  160. yfkOrderSum: 0,//待付款
  161. ywcOrderSum: 0,//已完成
  162. thcOrderSum: 0,//退货
  163. userSum: 0,//所有会员数
  164. goodsSum: 0,//所有商品数
  165. yfkOrderUserSum: 0,//已付款订单会员数
  166. oderUserSum: 0,//有订单会员数
  167. todayUserOrder: 0,//今日订单数
  168. todayUserSales: 0,//今日会员购物总额
  169. hygml: 0,//会员购买率
  170. incomeSum: 0,//总收入
  171. payedOrderCount: 0,//已支付订单数
  172. mhydds: 0,//每会员订单数
  173. mhygws: 0,//每会员购物数
  174. hitCount: 0,//总点击数
  175. average1000: 0,//每千点击订单数
  176. averageSales1000: 0//每千点击购物额
  177. },
  178. methods: {
  179. toOrderByShipStatus: function (shippingStatus) {
  180. if (!shippingStatus && shippingStatus != 0) {
  181. openWindow({
  182. top: true,
  183. type: 2,
  184. title: '订单',
  185. content: '../shop/order.html'
  186. });
  187. return;
  188. }
  189. let url = '../shop/order.html?shippingStatus=' + shippingStatus;
  190. if (shippingStatus == 0) {//待发货
  191. url += '&orderStatus=201&payStatus=2';
  192. if (vm.dfOrderSum == 0) {
  193. iview.Message.error('没有数据!');
  194. return;
  195. }
  196. } else if (shippingStatus == 1) {//已发货
  197. if (vm.yfOrderSum == 0) {
  198. iview.Message.error('没有数据!');
  199. return;
  200. }
  201. } else if (shippingStatus == 4) {//退货
  202. if (vm.thcOrderSum == 0) {
  203. iview.Message.error('没有数据!');
  204. return;
  205. }
  206. }
  207. openWindow({
  208. top: true,
  209. type: 2,
  210. title: '订单',
  211. content: url
  212. });
  213. },
  214. toOrderByPayStatus: function (payStatus) {
  215. if (vm.yfkOrderSum == 0) {
  216. iview.Message.error('没有数据!');
  217. return;
  218. }
  219. openWindow({
  220. top: true,
  221. type: 2,
  222. title: '订单',
  223. content: '../shop/order.html?orderStatus=' + payStatus
  224. });
  225. },
  226. toOrderByOrderStatus: function (orderStatus) {
  227. if (vm.ywcOrderSum == 0) {
  228. iview.Message.error('没有数据!');
  229. return;
  230. }
  231. openWindow({
  232. top: true,
  233. type: 2,
  234. title: '订单',
  235. content: '../shop/order.html?orderStatus=' + orderStatus
  236. });
  237. },
  238. toUser: function () {
  239. openWindow({
  240. top: true,
  241. type: 2,
  242. title: '会员列表',
  243. area: ['90%', '95%'],
  244. content: '../shop/shopuser.html'
  245. });
  246. },
  247. toGoods: function () {
  248. openWindow({
  249. top: true,
  250. type: 2,
  251. title: '商品',
  252. content: '../shop/goods.html'
  253. });
  254. }
  255. },
  256. created: function () {
  257. let vue = this;
  258. $.getJSON("../order/queryTotal?isOnfiilineOrder=0", function (r) {
  259. vue.orderSum = r.sum;
  260. });
  261. $.getJSON("../order/queryTotal?orderStatus=201&payStatus=2&isOnfiilineOrder=0", function (r) {
  262. vue.dfOrderSum = r.sum;
  263. if (r.sum > 0) {
  264. iview.Notice.info({
  265. title: '您有待发货订单',
  266. desc: '<a onclick="vm.toOrderByShipStatus(0)" class="small-box-footer">查看</a>',
  267. duration: 0
  268. });
  269. let iN = new iNotify({
  270. effect: 'flash',
  271. interval: 500,
  272. message: "待发订单",
  273. audio: {
  274. file: ['../statics/audio/dforder.mp3']
  275. },
  276. notification: {
  277. title: "通知!",
  278. body: '您有待发订单'
  279. }
  280. });
  281. iN.setTitle(true).player();
  282. }
  283. });
  284. $.getJSON("../order/queryTotal?isOnfiilineOrder=0&shippingStatus=1", function (r) {
  285. vue.yfOrderSum = r.sum;
  286. });
  287. $.getJSON("../order/queryTotal?isOnfiilineOrder=0&orderStatus=0", function (r) {
  288. vue.yfkOrderSum = r.sum;
  289. });
  290. $.getJSON("../order/queryTotal?isOnfiilineOrder=0&orderStatus=402", function (r) {
  291. vue.ywcOrderSum = r.sum;
  292. });
  293. $.getJSON("../order/queryTotal?isOnfiilineOrder=0&shippingStatus=4", function (r) {
  294. vue.thcOrderSum = r.sum;
  295. });
  296. $.getJSON("../order/getUserOrderInfo?type=yfkOrderUserSum", function (r) {
  297. vue.yfkOrderUserSum = r.result;
  298. });
  299. $.getJSON("../order/getUserOrderInfo?type=oderUserSum", function (r) {
  300. vue.oderUserSum = r.result;
  301. });
  302. $.getJSON("../order/getUserOrderInfo?type=todayUserOrder", function (r) {
  303. vue.todayUserOrder = r.result;
  304. });
  305. $.getJSON("../order/getUserOrderInfo?type=todayUserSales", function (r) {
  306. vue.todayUserSales = r.result;
  307. });
  308. $.getJSON("../order/getUserOrderInfo?type=incomeSum", function (r) {
  309. vue.incomeSum = r.result;
  310. });
  311. $.getJSON("../order/getUserOrderInfo?type=payedOrderCount", function (r) {
  312. vue.payedOrderCount = r.result;
  313. });
  314. $.getJSON("../footprint/queryTotal", function (r) {
  315. vue.hitCount = r.hitCount;
  316. });
  317. $.getJSON("../user/queryTotal", function (r) {
  318. vue.userSum = r.userSum;
  319. });
  320. $.getJSON("../goods/queryTotal", function (r) {
  321. vue.goodsSum = r.goodsSum;
  322. });
  323. },
  324. updated: function () {
  325. let vue = this;
  326. vue.hygml = (vue.yfkOrderUserSum / vue.userSum * 100).toFixed(4);
  327. vue.mhydds = (vue.oderUserSum / vue.userSum).toFixed(4);
  328. vue.mhygws = (vue.payedOrderCount / vue.oderUserSum).toFixed(4);
  329. vue.average1000 = (vue.orderSum / vue.hitCount * 1000).toFixed(4);
  330. vue.averageSales1000 = (vue.incomeSum / vue.hitCount * 1000).toFixed(4);
  331. }
  332. });
  333. </script>
  334. </body>
  335. </html>