data.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
  1. <template>
  2. <view class="">
  3. <view class="box-pack-between flex-y-center bg-model-store">
  4. <view class="flex-y-center">
  5. <picker mode="selector" :range="storeList" @change="bindStore" :range-key="'title'">
  6. <view class="flex-y-center">
  7. <view class="text-1" style="max-width: 200rpx;">{{store_name}}</view>
  8. <text class="iconfont iconsanjiao"></text>
  9. </view>
  10. </picker>
  11. </view>
  12. <view class="flex-y-center" @click="getTime">
  13. {{date}}
  14. <text class="iconfont iconriqi" style="margin-left:10rpx;"></text>
  15. </view>
  16. </view>
  17. <view class="mg-24" style="padding-top: 100rpx;">
  18. <view class="bg">
  19. <image src="../static/images/dataBg.png"></image>
  20. </view>
  21. <view class="bg-model">
  22. <view class="bg-model-pa">
  23. <image class="bg-model-img" src="../static/images/bg.png"></image>
  24. </view>
  25. <card :date="date" :obj="obj1" :textCollection="textCollection" />
  26. </view>
  27. </view>
  28. <view class="mg-24">
  29. <view class="bg-model">
  30. <view class="bg-model-pa">
  31. <image class="bg-model-img" src="../static/images/bg1.png"></image>
  32. </view>
  33. <card :date="date" :obj="obj2" :textCollection="textCollection1" />
  34. </view>
  35. </view>
  36. <view class="mg-24">
  37. <view class="bg-model">
  38. <view class="bg-model-pa">
  39. <image class="bg-model-img" src="../static/images/bg2.png"></image>
  40. </view>
  41. <card :date="date" :obj="obj3" :textCollection="textCollection2" />
  42. </view>
  43. </view>
  44. <view class="mg-24">
  45. <view class="bg-model">
  46. <view class="bg-model-pa">
  47. <image class="bg-model-img" src="../static/images/bg3.png"></image>
  48. </view>
  49. <card :date="date" :obj="obj4" :textCollection="textCollection3" />
  50. </view>
  51. </view>
  52. <view class="mg-24">
  53. <view class="bg-model">
  54. <view class="bg-model-pa">
  55. <image class="bg-model-img" src="../static/images/bg4.png"></image>
  56. </view>
  57. <card :date="date" :obj="obj5" :textCollection="textCollection4" />
  58. </view>
  59. </view>
  60. <uni-popup ref="uniScroll" type="bottom">
  61. <view class="popup-content">
  62. <view class="box-pack-between ft32 flex-center popup-content-title">
  63. <text @click="close">关闭</text>
  64. <text style="color: #003A9B;" @click="confirm">确认</text>
  65. </view>
  66. <view class="flex">
  67. <scroll-view scroll-y class="popup-content-scroll">
  68. <view @click="bindCheck(index)" :class="index==check_index?'hg-act':''"
  69. class="popup-content-scroll-li flex-y-center box-pack-between"
  70. v-for="(item,index) of timeArr" :key='index'>
  71. <text>{{item.title}}</text>
  72. <view class="round flex-center" :class="index==check_index?'blue-br':''">
  73. <view class="solid" v-if="index==check_index"></view>
  74. </view>
  75. </view>
  76. <!-- <picker mode="selector" :range="storeList" @change="bindStore" :range-key="'title'">
  77. <text>{{store_name}}</text>
  78. <text class="iconfont iconsanjiao"></text>
  79. </picker> -->
  80. <view @click="bindCheck(5)" :class="5==check_index?'hg-act':''"
  81. class="popup-content-scroll-li box-pack-between flex-y-center"
  82. style="height: auto;padding: 20rpx 40rpx;">
  83. <text>自定义时间</text>
  84. <view class="">
  85. <view class="flex-y-center" style="margin-bottom: 20rpx;">
  86. <picker mode="date" @change="bindStart">
  87. <view class="flex-y-center ">
  88. <text>{{start_time}}</text>
  89. </view>
  90. </picker>
  91. <text style="margin: 0 10rpx;"> </text>
  92. <picker mode="time" @change="bindStartTime">
  93. <view class="flex-y-center">
  94. <text>{{start_time_ms}}</text>
  95. </view>
  96. </picker>
  97. <text class="iconfont icongengduo" style="font-size: 26rpx;"></text>
  98. </view>
  99. <view class="flex-y-center">
  100. <picker mode="date" @change="bindEnd">
  101. <view class="flex-y-center ">
  102. <text>{{end_time}}</text>
  103. </view>
  104. </picker>
  105. <text style="margin: 0 10rpx;"> </text>
  106. <picker mode="time" @change="bindEndTime">
  107. <view class="flex-y-center">
  108. <text>{{end_time_ms}}</text>
  109. </view>
  110. </picker>
  111. <text class="iconfont icongengduo" style="font-size: 26rpx;"></text>
  112. </view>
  113. </view>
  114. </view>
  115. </scroll-view>
  116. </view>
  117. </view>
  118. </uni-popup>
  119. </view>
  120. </template>
  121. <script>
  122. import card from '../components/card/card.vue'
  123. export default {
  124. components: {
  125. card,
  126. },
  127. data() {
  128. return {
  129. store_name: "所有门店",
  130. storeList: [],
  131. check_index: 1,
  132. date: '今日',
  133. textCollection: {
  134. title: "营业额(元)",
  135. type: 2, //'首页'
  136. wx: '微信支付',
  137. ali: '支付宝支付',
  138. money: '现金支付',
  139. menber: '会员支付',
  140. juhe: '聚合支付',
  141. },
  142. textCollection1: {
  143. title: "收入(元)",
  144. type: 2, //'首页'
  145. wx: '微信收入',
  146. ali: '支付宝收入',
  147. money: '现金收入',
  148. menber: '会员充值',
  149. juhe: '聚合收入',
  150. },
  151. textCollection2: {
  152. title: "收款笔数",
  153. type: 2, //'首页'
  154. wx: '微信收款',
  155. ali: '支付宝收款',
  156. money: '现金收款',
  157. menber: '聚合码收款',
  158. },
  159. textCollection3: {
  160. title: "退款笔数",
  161. type: 2, //'首页'
  162. wx: '微信退款',
  163. ali: '支付宝退款',
  164. money: '现金退款',
  165. },
  166. textCollection4: {
  167. title: "总订单数",
  168. type: 2, //'首页'
  169. wx: '堂食订单',
  170. ali: '外卖订单',
  171. money: '自提订单',
  172. },
  173. obj1: {},
  174. obj2: {},
  175. obj3: {},
  176. obj4: {},
  177. obj5: {},
  178. time: 'today',
  179. day: 1,
  180. store_id: "",
  181. start_time: "开始日期",
  182. start_time_ms:"开始时间",
  183. end_time: "结束日期",
  184. end_time_ms: "结束时间",
  185. timeArr: [{
  186. title: "全部时间",
  187. time: '',
  188. }, {
  189. title: "今日",
  190. time: 'today',
  191. }, {
  192. title: "昨日",
  193. time: 'yesterday',
  194. },
  195. {
  196. title: "本月",
  197. time: 'month',
  198. }, {
  199. title: "本年",
  200. time: 'year',
  201. },
  202. ]
  203. }
  204. },
  205. onLoad() {
  206. this.shop_store_index();
  207. this.http();
  208. },
  209. onPullDownRefresh() {
  210. uni.showNavigationBarLoading();
  211. this.http();
  212. setTimeout(() => {
  213. uni.hideNavigationBarLoading()
  214. uni.stopPullDownRefresh()
  215. }, 1000)
  216. },
  217. methods: {
  218. close() {
  219. this.$refs.uniScroll.close();
  220. },
  221. confirm() {
  222. if (this.check_index == 5) {
  223. this.date = this.start_time +' '+
  224. (this.start_time_ms=='开始时间'?'00:00':this.start_time_ms) + '至' +
  225. this.end_time+' '+ (this.end_time_ms=='结束时间'?'00:00':this.end_time_ms);
  226. this.time = "";
  227. this.day = 2
  228. } else {
  229. this.date = this.timeArr[this.check_index].title;
  230. this.time = this.timeArr[this.check_index].time;
  231. this.day = 1;
  232. }
  233. this.$refs.uniScroll.close();
  234. this.http();
  235. },
  236. bindCheck(index) {
  237. this.check_index = index;
  238. },
  239. bindStart(e) {
  240. this.start_time = e.detail.value;
  241. },
  242. bindStartTime(e){
  243. this.start_time_ms = e.detail.value;
  244. },
  245. bindEnd(e) {
  246. this.end_time = e.detail.value;
  247. },
  248. bindEndTime(e) {
  249. this.end_time_ms = e.detail.value;
  250. },
  251. getTime(e) {
  252. this.$refs.uniScroll.open();
  253. },
  254. bindStore(e) {
  255. console.log(e, "e")
  256. this.store_name = this.storeList[e.detail.value].title;
  257. this.store_id = this.storeList[e.detail.value].id;
  258. this.http();
  259. },
  260. shop_store_index() {
  261. let admin_id = uni.getStorageSync("admin_id");
  262. let storeinfo = uni.getStorageSync("storeinfo");
  263. this.request({
  264. url: 'Smdcshop/shop_store_index',
  265. data: {
  266. admin_id: admin_id,
  267. }
  268. }).then(res => {
  269. if (res.code == 200) {
  270. if (res.data.length > 0) {
  271. this.storeList = res.data;
  272. this.storeList.unshift({
  273. title:"所有门店",
  274. id:""
  275. })
  276. }else {
  277. this.store_id =storeinfo.id;
  278. this.store_name=storeinfo.title;
  279. this.storeList = [{
  280. title: storeinfo.title,
  281. id: storeinfo.id,
  282. }];
  283. }
  284. }
  285. })
  286. },
  287. http(e) {
  288. this.request({
  289. url: 'Smdcshop/store_search',
  290. data: {
  291. admin_id: uni.getStorageSync("admin_id"),
  292. time: this.time,
  293. day: this.day,
  294. store_id: this.store_id,
  295. start_time: this.day==2?this.start_time+' '+ (this.start_time_ms=='开始时间'?'00:00':this.start_time_ms):'',
  296. end_time: this.day==2?this.end_time+' '+ (this.end_time_ms=='结束时间'?'00:00':this.end_time_ms):'',
  297. }
  298. }).then(res => {
  299. if (res.code == 200) {
  300. this.obj1 = {
  301. total: res.data.jryye_price,
  302. wx: res.data.jr_wx,
  303. zfb: res.data.jr_zfb,
  304. cash: res.data.jrxz_order,
  305. menber: res.data.jr_hy,
  306. juhe:res.data.jh_ping_juhema1
  307. };
  308. this.obj2 = {
  309. total: res.data.jr_zong_price,
  310. wx: res.data.jr_wx,
  311. zfb: res.data.jr_zfb,
  312. cash: res.data.jrxz_order,
  313. menber: res.data.today_total,
  314. juhe:res.data.jh_ping_juhema1
  315. };
  316. this.obj3 = {
  317. total: res.data.today_num,
  318. wx: res.data.today_numwx,
  319. zfb: res.data.today_numzfb,
  320. cash: res.data.today_numxj,
  321. menber: res.data.jh_ping_num
  322. };
  323. this.obj4 = {
  324. total: res.data.total_refund,
  325. wx: res.data.wx_refund,
  326. zfb: res.data.zhf_refund,
  327. cash: res.data.xj_ping,
  328. };
  329. this.obj5 = {
  330. total: res.data.total_order_num,
  331. wx: res.data.ts_num_total,
  332. zfb: res.data.wm_num_total,
  333. cash: res.data.zt_num_total,
  334. };
  335. }
  336. }).catch((res) => {
  337. uni.showToast({
  338. title: res.message,
  339. icon: 'none'
  340. })
  341. });
  342. },
  343. }
  344. }
  345. </script>
  346. <style>
  347. page {
  348. background-color: #F4F5F7;
  349. }
  350. .mg-24 {
  351. margin-bottom: 24rpx;
  352. }
  353. .bg {
  354. position: absolute;
  355. top: 0;
  356. left: 0;
  357. width: 100%;
  358. height: 264rpx;
  359. }
  360. .bg image {
  361. width: 100%;
  362. height: 100%;
  363. }
  364. .bg-model {
  365. position: relative;
  366. width: 100%;
  367. }
  368. .bg-model-store {
  369. width: 100%;
  370. /* padding: 0 20rpx; */
  371. /* width: 690rpx; */
  372. margin: 0 auto;
  373. color: #FFFFFF;
  374. font-size: 30rpx;
  375. padding: 30rpx 25rpx;
  376. position: fixed;
  377. z-index: 2;
  378. top:0;
  379. background-color: #3387FF;
  380. }
  381. .bg-model-pa {
  382. position: absolute;
  383. left: 0;
  384. width: 100%;
  385. }
  386. .bg-model-img {
  387. width: 690rpx;
  388. height: 361rpx;
  389. display: block;
  390. margin: 0 auto;
  391. border-radius: 8rpx;
  392. box-shadow: 0px 6rpx 12rpx 0px rgba(230, 233, 240, 0.50);
  393. }
  394. .popup-content {
  395. width: 100%;
  396. height: 656rpx;
  397. background: #fff;
  398. padding: 0rpx 30rpx;
  399. border-top-left-radius: 16rpx;
  400. border-top-right-radius: 16rpx;
  401. }
  402. .popup-content-title {
  403. border-bottom: 1rpx solid #F1F1F1;
  404. padding: 20rpx 0rpx;
  405. }
  406. .popup-content-scroll {
  407. height: 590rpx;
  408. width: 100%;
  409. text-align: center;
  410. }
  411. .popup-content-scroll-li {
  412. height: 88rpx;
  413. padding: 0 20rpx;
  414. font-size: 30rpx;
  415. }
  416. .round {
  417. width: 30rpx;
  418. height: 30rpx;
  419. border: 2rpx solid #e2e2e2;
  420. border-radius: 50%;
  421. }
  422. page .hg-act {
  423. background: rgba(51, 135, 255, 0.16);
  424. border-radius: 8rpx;
  425. }
  426. page .blue-br {
  427. border: 2rpx solid #007AFF;
  428. }
  429. .solid {
  430. background: #007AFF;
  431. width: 18rpx;
  432. height: 18rpx;
  433. border-radius: 40px;
  434. }
  435. </style>