juheOrder.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734
  1. <template>
  2. <view class="container">
  3. <view class="search-user flex-y-center ">
  4. <view class="search-content flex-y-center">
  5. <icon type="search" size="18" />
  6. <input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch" class="flex-grow-1"
  7. type="text" placeholder-style="font-size:26rpx" placeholder="请输入订单编号" />
  8. <view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
  9. <icon type="clear" size="18" />
  10. </view>
  11. </view>
  12. <view class="search-btn" @click="search">
  13. 搜索
  14. </view>
  15. </view>
  16. <view class="box-pack-between headerScreen flex-y-center ">
  17. <view class="flex-y-center flex-grow-1 ft26 header-text">
  18. <view style="width: 50%;" class="flex-grow-1 flex-center " data-text="1" :class="act_index==1?'act':''"
  19. @click="onTopBtnTap(1)">
  20. <view class="text-1" style="width: auto; max-width: 300rpx;">
  21. {{level_text}}
  22. </view>
  23. <view class="d3"></view>
  24. </view>
  25. <view style="width: 50%;" class="flex-grow-1 flex-center text-1" data-text="2"
  26. :class="act_index==2?'act':''" @click="onTopBtnTap(2)">
  27. <view class="text-1" style="width: auto; max-width: 300rpx;">
  28. {{type_text}}
  29. </view>
  30. <view class="d3"></view>
  31. </view>
  32. <view style="width: 50%;" class="flex-grow-1 flex-center text-1" data-text="2"
  33. :class="act_index==3?'act':''" @click="onTopBtnTap(3)">
  34. <view class="text-1" style="width: auto; max-width: 300rpx;">
  35. {{store_text}}
  36. </view>
  37. <view class="d3"></view>
  38. </view>
  39. <view style="width: 50%;" class="flex-grow-1 flex-center text-1" data-text="2"
  40. :class="act_index==4?'act':''" @click="onTopBtnTap(4)">
  41. <view class="text-1" style="width: auto; max-width: 300rpx;">
  42. {{time_text}}
  43. </view>
  44. <view class="d3"></view>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="header-hg200"></view>
  49. <view class="flex table-header ft28">
  50. <view class="flex-grow-1" @click="bindTab(1)" :class="tab_index==1?'act':''">
  51. 数据统计
  52. </view>
  53. <view class="flex-grow-1" @click="bindTab(2)" :class="tab_index==2?'act':''">
  54. 数据列表
  55. </view>
  56. </view>
  57. <uni-popup-top ref="popup" type="top" :top="top" :maskClass="maskClass">
  58. <view class="showpay">
  59. <block v-if='act_index==1'>
  60. <view class="box-li" :class="index_id==0?'active':''" @click="Onlevel(0,'全部')" data-text='全部'>全部
  61. </view>
  62. <scroll-view scroll-y="true" style="height: 400rpx;">
  63. <view class="box-li" v-for="(item,index) of tableTypeList" :key='index'
  64. :class="item.type==index_id?'active':''" @click="Onlevel(item.type,item.title)">
  65. {{item.title}}
  66. </view>
  67. </scroll-view>
  68. </block>
  69. <block v-if='act_index==2'>
  70. <view class="box-li" :class="status==0?'active':''" @click="onStatus(0,'全部')" data-text='全部'>全部
  71. </view>
  72. <view class="box-li" :class="status==1?'active':''" @click="onStatus(1,'微信')" data-text='微信'>微信
  73. </view>
  74. <view class="box-li" :class="status==2?'active':''" @click="onStatus(2,'支付宝')" data-text='支付宝'>支付宝
  75. </view>
  76. </block>
  77. <block v-if='act_index==3'>
  78. <view class="box-li" v-if="type==1" :class="storeIndex==0?'active':''" @click="bindStore(0,'全部')"
  79. data-text='全部'>全部
  80. </view>
  81. <scroll-view scroll-y="true" style="height: 400rpx;">
  82. <view class="box-li" v-for="(item,index) of storeArr" :key='index'
  83. :class="item.id==storeIndex?'active':''" @click="bindStore(item.id,item.title)">
  84. {{item.title}}
  85. </view>
  86. </scroll-view>
  87. </block>
  88. <block v-if='act_index==4'>
  89. <view class="model">
  90. <view class="flex-center model-date box-pack-between">
  91. <view class="model-item" :class="time_index==1?'act':''">
  92. <picker mode='date' :value="start"
  93. @change="bindDateChange1" data-index="1">
  94. <view class="flex-center">
  95. <text>{{start}}</text>
  96. </view>
  97. </picker>
  98. </view>
  99. <view class="model-item" :class="time_index==2?'act':''">
  100. <picker mode='date' :value="end"
  101. @change="bindDateChange2" data-index="1">
  102. <view class="flex-center">
  103. <text>{{end}}</text>
  104. </view>
  105. </picker>
  106. </view>
  107. </view>
  108. <view class="flex">
  109. <view class="model-btn-close model-btn flex-center" @click="clear">
  110. 清空
  111. </view>
  112. <view class="model-btn-success flex-center model-btn" @click="sure">
  113. 确定
  114. </view>
  115. </view>
  116. </view>
  117. </block>
  118. </view>
  119. </uni-popup-top>
  120. <block v-if="tab_index==1">
  121. <view class="list">
  122. <view class="flex table-total ft30">
  123. <view class="flex-grow-1">
  124. <text>{{obj.jr_zon_shoukuan}}</text>
  125. <view class="list-title">
  126. 今日总的金额
  127. </view>
  128. </view>
  129. <view class="flex-grow-1">
  130. <text>{{obj.jr_zon_tuikuan}}</text>
  131. <view class="list-title">
  132. 今日总的退款
  133. </view>
  134. </view>
  135. <view class="flex-grow-1">
  136. <text>{{obj.jr_wx}}</text>
  137. <view class="list-title">
  138. 今日总的微信
  139. </view>
  140. </view>
  141. </view>
  142. <view class="flex table-total ft28">
  143. <view class="flex-grow-1">
  144. <text>{{obj.jr_yhk}}</text>
  145. <view class="list-title">
  146. 今日总的银行卡
  147. </view>
  148. </view>
  149. <view class="flex-grow-1">
  150. <text>{{obj.jr_zfb}}</text>
  151. <view class="list-title">
  152. 今日总的支付宝
  153. </view>
  154. </view>
  155. <view class="flex-grow-1">
  156. <text>{{obj.jr_xz}}</text>
  157. <view class="list-title">
  158. 今日总的现金
  159. </view>
  160. </view>
  161. </view>
  162. <view class="flex table-total ft28">
  163. <view class="flex-grow-1">
  164. <text>{{obj.zon_shoukuan}}</text>
  165. <view class="list-title">
  166. 总的金额
  167. </view>
  168. </view>
  169. <view class="flex-grow-1">
  170. <text>{{obj.zon_tuikuan}}</text>
  171. <view class="list-title">
  172. 总的退款
  173. </view>
  174. </view>
  175. <view class="flex-grow-1">
  176. <text>{{obj.zon_wx}}</text>
  177. <view class="list-title">
  178. 总的微信
  179. </view>
  180. </view>
  181. </view>
  182. <view class="flex table-total ft28">
  183. <view class="flex-grow-1">
  184. <text>{{obj.zon_yhk}}</text>
  185. <view class="list-title">
  186. 总的银行卡
  187. </view>
  188. </view>
  189. <view class="flex-grow-1">
  190. <text>{{obj.zon_zfb}}</text>
  191. <view class="list-title">
  192. 总的支付宝
  193. </view>
  194. </view>
  195. <view class="flex-grow-1">
  196. <text>{{obj.zon_xj}}</text>
  197. <view class="list-title">
  198. 总的现金
  199. </view>
  200. </view>
  201. </view>
  202. </view>
  203. </block>
  204. <block v-if="tab_index==2">
  205. <no-none v-if='list.length<=0'></no-none>
  206. <view class="list" v-else>
  207. <view class="item" style="border: none;" v-for="(item,index) in list" :key="index">
  208. <view class="box-pack-between">
  209. <view class="name box-pack-between flex-grow-1">
  210. <text>{{item.out_trade_no}}</text>
  211. <view class="flex-center ft28" style="padding-right: 20rpx;color: #247EFF;">
  212. {{item.status==1?'已支付':item.status==0?'待支付':item.status==2?'已退款':item.status==3?'部分退款':
  213. '其他'}}
  214. </view>
  215. </view>
  216. </view>
  217. <view class="content">
  218. <view class="flex flex-y-center">
  219. <view class="cell flex flex-y-center">
  220. <view class="title">支付金额:</view>
  221. <view class="desc">{{item.pay_price}}</view>
  222. </view>
  223. </view>
  224. <view class="flex flex-y-center" style="margin-top: 16rpx;">
  225. <view class="cell flex flex-y-center " style="width:100%">
  226. <view class="title">退款金额:</view>
  227. <view class="desc">{{item.refund_price}}</view>
  228. </view>
  229. </view>
  230. <view class="flex flex-y-center" style="margin-top: 16rpx;">
  231. <view class="cell flex flex-y-center " style="width:100%">
  232. <view class="title">支付方式:</view>
  233. <view class="desc">{{item.pay_type==1?'微信':item.pay_type==2?'支付宝':'其他'}}</view>
  234. </view>
  235. </view>
  236. <view class="flex flex-y-center" style="margin-top: 16rpx;">
  237. <view class="cell flex flex-y-center " style="width:100%">
  238. <view class="title">订单类型:</view>
  239. <view class="desc">
  240. {{
  241. item.order_type==1?'聚合码-H5':
  242. item.order_type==2?'聚合码-小程序':
  243. item.order_type==3?'微收银':
  244. item.order_type==4?'如意':
  245. item.order_type==5?'POS':
  246. item.order_type==6?'商米D2':
  247. item.order_type==7?'IOT-蜻蜓':
  248. item.order_type==8?'IOT-青蛙':'其他'
  249. }}
  250. </view>
  251. </view>
  252. </view>
  253. <view class="flex flex-y-center" style="margin-top: 16rpx;">
  254. <view class="cell flex flex-y-center " style="width:100%">
  255. <view class="title">所属门店:</view>
  256. <view class="desc">{{item.title}}</view>
  257. </view>
  258. </view>
  259. <view class="flex flex-y-center" style="margin-top: 16rpx;">
  260. <view class="cell flex flex-y-center " style="width:100%">
  261. <view class="title"> 下单时间:</view>
  262. <view class="desc">{{item.pay_time}}</view>
  263. </view>
  264. </view>
  265. </view>
  266. </view>
  267. </view>
  268. </block>
  269. </view>
  270. </template>
  271. <script>
  272. import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
  273. export default {
  274. components: {
  275. uniPopupTop
  276. },
  277. data() {
  278. return {
  279. act_index: 1,
  280. type_text: '支付方式',
  281. level_text: '订单类型',
  282. store_text: "门店",
  283. time_text:'日期筛选',
  284. store_id: "",
  285. admin_id: '',
  286. list: [],
  287. page: 1,
  288. is_bottom: false,
  289. keywords: "",
  290. status: 0,
  291. type: 2,
  292. tableTypeList: [{
  293. title: "聚合码-H5",
  294. type: 1,
  295. },
  296. {
  297. title: "聚合码-小程序",
  298. type: 2,
  299. },
  300. {
  301. title: "微收银",
  302. type: 3,
  303. },
  304. {
  305. title: "如意",
  306. type: 4,
  307. },
  308. {
  309. title: "POS",
  310. type: 5,
  311. },
  312. {
  313. title: "商米D2",
  314. type: 6,
  315. },
  316. {
  317. title: "IOT-蜻蜓",
  318. type: 7,
  319. }, {
  320. title: "IOT-青蛙",
  321. type: 8,
  322. },
  323. ],
  324. top: "200rpx",
  325. maskClass: {
  326. 'position': 'fixed',
  327. 'bottom': 0,
  328. 'top': "100rpx",
  329. 'left': 0,
  330. 'right': 0,
  331. 'backgroundColor': 'rgba(0, 0, 0, 0.4)'
  332. },
  333. index_id: null,
  334. storeArr: [],
  335. storeIndex: 0,
  336. tab_index: 1,
  337. obj:{},
  338. start: "开始时间",
  339. end: "结束时间",
  340. time_index: 0,
  341. time_index2: 0,
  342. }
  343. },
  344. onLoad(e) {
  345. this.type = e.type || 2;
  346. this.store_id = e.type == 1 ? '' : uni.getStorageSync("store_id");
  347. this.admin_id = uni.getStorageSync("admin_id");
  348. this.shop_store_index();
  349. },
  350. onShow() {
  351. this.getData(1)
  352. },
  353. onReachBottom() {
  354. if (!this.is_bottom) {
  355. this.getData(this.page + 1)
  356. }
  357. },
  358. methods: {
  359. bindDateChange1(e) {
  360. this.time_index = e.currentTarget.dataset.index;
  361. this.start = e.target.value;
  362. },
  363. bindDateChange2(e) {
  364. this.time_index2 = e.currentTarget.dataset.index;
  365. this.end = e.target.value;
  366. },
  367. sure(e) {
  368. this.getData(1);
  369. this.$refs.popup.close();
  370. this.start_text = this.end;
  371. },
  372. clear() {
  373. this.start = '开始时间';
  374. this.start_text = '日期查找';
  375. this.end = '结束时间';
  376. this.getData(1);
  377. this.$refs.popup.close();
  378. },
  379. bindTab(index) {
  380. this.tab_index = index;
  381. },
  382. shop_store_index() {
  383. let storeinfo = uni.getStorageSync("storeinfo");
  384. this.request({
  385. url: 'Smdcshop/shop_store_index',
  386. data: {
  387. admin_id: this.admin_id,
  388. }
  389. }).then(res => {
  390. if (res.code == 200) {
  391. if (res.data.length > 0) {
  392. this.storeArr = res.data;
  393. } else {
  394. this.storeArr = [{
  395. title: storeinfo.title,
  396. id: storeinfo.id,
  397. }];
  398. this.store_text = storeinfo.title;
  399. }
  400. }
  401. })
  402. },
  403. onStatus(e, text) {
  404. this.status = e;
  405. this.type_text = text;
  406. this.list = [];
  407. this.getData(1);
  408. this.$refs.popup.close();
  409. },
  410. Onlevel(e, text) {
  411. this.index_id = e;
  412. this.level_text = text;
  413. this.list = [];
  414. this.getData(1);
  415. this.$refs.popup.close();
  416. },
  417. bindStore(e, text) {
  418. this.storeIndex = e;
  419. this.store_id = e;
  420. this.store_text = text;
  421. this.list = [];
  422. this.getData(1);
  423. this.$refs.popup.close();
  424. },
  425. getSearch(e) {
  426. if (!e.detail.value) {
  427. this.page = 1;
  428. this.list = [];
  429. this.keywords = "";
  430. this.getData(1);
  431. }
  432. this.keywords = e.detail.value;
  433. },
  434. onDel() {
  435. this.seTval = '';
  436. this.page = 1;
  437. this.list = [];
  438. this.keywords = "";
  439. this.getData(1);
  440. },
  441. confirm(e) {
  442. this.page = 1;
  443. this.list = [];
  444. this.keywords = e.detail.value;
  445. this.getData(1);
  446. },
  447. search(e) {
  448. this.page = 1;
  449. this.list = [];
  450. this.getData(1);
  451. },
  452. onTopBtnTap(e) {
  453. this.act_index = e;
  454. this.$refs.popup.open();
  455. },
  456. getData(page) {
  457. if (page == 1) {
  458. this.list = []
  459. this.page = 1
  460. this.is_bottom = false
  461. }
  462. this.request({
  463. url: 'Smdcshop/getOrderList',
  464. data: {
  465. page,
  466. limit: 10,
  467. pay_type: this.status,
  468. keywords: this.keywords,
  469. admin_id: this.admin_id,
  470. order_type: this.index_id,
  471. store_id: this.store_id,
  472. start: this.start == '开始时间' ? '' : this.start,
  473. end: this.end == '结束时间' ? '' : this.end,
  474. }
  475. }).then(res => {
  476. this.obj=res.data;
  477. if (res.code == 200 && res.data.list.length) {
  478. this.list = this.list.concat(res.data.list);
  479. this.page = page;
  480. } else {
  481. this.is_bottom = true
  482. }
  483. })
  484. }
  485. }
  486. }
  487. </script>
  488. <style lang="scss">
  489. @import url("../static/css/common.css");
  490. page {
  491. background-color: #F4F5F7;
  492. }
  493. .model {
  494. width: 100%;
  495. z-index: 10;
  496. background: #FFFFFF;
  497. padding-bottom: 20rpx;
  498. .model-date {
  499. width: 100%;
  500. padding: 20rpx 80rpx;
  501. border-bottom: 1rpx solid #F1F1F1;
  502. .model-item {
  503. width: 270rpx;
  504. text-align: center;
  505. font-size: 28rpx;
  506. color: #999;
  507. position: relative;
  508. padding: 10rpx 0;
  509. text-align: center;
  510. border-radius: 8rpx;
  511. border: 1rpx solid #999;
  512. }
  513. .act {
  514. // color: #FFFFFF;
  515. // background: #FFBE2C;
  516. // border: 1rpx solid #FFBE2C;
  517. }
  518. }
  519. .model-btn {
  520. border-radius: 8rpx;
  521. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
  522. margin: 0 auto;
  523. margin-top: 20rpx;
  524. text-align: center;
  525. width: 41%;
  526. height: 80rpx;
  527. border-radius: none;
  528. }
  529. .model-btn-close {
  530. border: 1rpx solid #F1F1F1;
  531. color: #000;
  532. }
  533. .model-btn-success {
  534. color: #FFFFFF;
  535. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  536. }
  537. }
  538. .table-header {
  539. padding: 20rpx 0;
  540. text-align: center;
  541. position: fixed;
  542. left: 0;
  543. background: #fff;
  544. top: 200rpx;
  545. width: 100%;
  546. color: #999999;
  547. }
  548. .table-header .act {
  549. color: #000;
  550. font-weight: 700;
  551. }
  552. .table-total {
  553. padding: 60rpx 0;
  554. text-align: center;
  555. background: #FFFFFF;
  556. border-bottom: 1rpx solid #F1F1F1;
  557. }
  558. .list-title{
  559. font-size: 26rpx;
  560. margin-top: 20rpx;
  561. }
  562. .list {
  563. padding: 10rpx 25rpx;
  564. }
  565. .list .item {
  566. border-radius: 8rpx;
  567. overflow: hidden;
  568. padding-left: 30rpx;
  569. border-left: 8rpx solid #247EFF;
  570. background-color: #fff;
  571. margin-bottom: 30rpx;
  572. }
  573. .list .item .name {
  574. height: 80rpx;
  575. border-bottom: 1rpx solid #f5f5f5;
  576. font-size: 30rpx;
  577. line-height: 80rpx;
  578. font-weight: bold;
  579. }
  580. .list .item .content {
  581. padding: 20rpx 0 24rpx;
  582. }
  583. .list .item .content .cell {
  584. /* flex: none; */
  585. /* width: 50%; */
  586. box-sizing: border-box;
  587. padding-right: 30rpx;
  588. font-size: 26rpx;
  589. line-height: 37rpx;
  590. color: #666;
  591. }
  592. .list .item .content .cell .title {
  593. color: #99A0AD;
  594. }
  595. .headerScreen {
  596. height: 100rpx;
  597. position: fixed;
  598. top: 100rpx;
  599. width: 100%;
  600. z-index: 999;
  601. background: #fff;
  602. border-bottom: 1rpx solid #F1F1F1;
  603. }
  604. .header-hg200 {
  605. height: 290rpx;
  606. }
  607. .header-text {
  608. text-align: center;
  609. }
  610. .d3 {
  611. width: 0;
  612. height: 0;
  613. border-width: 12rpx;
  614. border-style: solid;
  615. border-color: #000 transparent transparent transparent;
  616. margin-top: 14rpx;
  617. margin-left: 6rpx;
  618. }
  619. .showpay {
  620. width: 100%;
  621. z-index: 10;
  622. background: #FFFFFF;
  623. }
  624. .search-user {
  625. z-index: 999;
  626. position: fixed;
  627. left: 0;
  628. width: 100%;
  629. height: 100rpx;
  630. background: #FFFFFF;
  631. padding-left: 15rpx;
  632. margin: 0;
  633. }
  634. .search-user .search-content {
  635. width: 83%;
  636. height: 70rpx;
  637. background: #F1F1F1;
  638. border-radius: 100rpx;
  639. padding: 0 20rpx;
  640. }
  641. .search-user .search-content icon {
  642. margin-right: 10rpx;
  643. }
  644. .search-user .search-btn {
  645. margin-left: 20rpx;
  646. font-size: 28rpx;
  647. }
  648. .box-li {
  649. background-color: #fff;
  650. text-align: center;
  651. border-bottom: 1rpx solid #f1f1f1;
  652. height: 80rpx;
  653. line-height: 80rpx;
  654. font-size: 26rpx;
  655. }
  656. page .active {
  657. color: #007AFF;
  658. }
  659. </style>