orderList.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709
  1. <template>
  2. <view class="container">
  3. <view class="bgf pof">
  4. <view class="flex-center search-content">
  5. <view class="search flex-y-center" style="margin-bottom: 0;">
  6. <icon type="search" size="16" />
  7. <input placeholder="请输入搜索内容" class="flex-grow-1" type="text" value="" @confirm="firmSeach"
  8. @input="putSeach" />
  9. </view>
  10. <text @click="bindSeach">搜索</text>
  11. </view>
  12. <view class="box-pack-between header-hg100 flex-y-center ">
  13. <view class="flex-y-center flex-grow-1 ft26 header-text">
  14. <view class="flex-grow-1 flex-center" data-text="1" :class="act_index==5?'act':''"
  15. @click="onTopBtnTap(5)" v-if="admin_id">
  16. <view class="store-name">{{level_text}}</view>
  17. <view class="d3" :style="'border-color:'+act_index==1?'#007AFF':''"></view>
  18. </view>
  19. <view class="flex-grow-1 flex-center" data-text="1" :class="act_index==1?'act':''"
  20. @click="onTopBtnTap(1)">
  21. {{status_text}}
  22. <view class="d3" :style="'border-color:'+act_index==1?'#007AFF':''"></view>
  23. </view>
  24. <view class="flex-grow-1 flex-center" data-text="2" :class="act_index==2?'act':''"
  25. @click="onTopBtnTap(2)">
  26. {{order_text}}
  27. <view class="d3" :style="'border-color:'+act_index==2?'#007AFF':''"></view>
  28. </view>
  29. <view class="flex-grow-1 flex-center" data-text="3" :class="act_index==3?'act':''"
  30. @click="onTopBtnTap(3)">
  31. {{pay_text}}
  32. <view class="d3"></view>
  33. </view>
  34. <view class="flex-grow-1 flex-center" data-text="4" :class="act_index==4?'act':''"
  35. @click="onTopBtnTap(4)">
  36. {{start_text}}
  37. <view class="d3"></view>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="list">
  43. <navigator :url="`/saomaDiancan/orderDetail/orderDetail?id=${item.id}`" class="item"
  44. v-for="(item,index) in list" :key="index">
  45. <view class="top flex flex-y-center box-pack-between">
  46. <view class="name text-1">{{item.order_no}}</view>
  47. <view class="pay-info flex flex-y-center">
  48. <view class="pay-status" style="color:red;">
  49. <!-- `order_status` smallint(1) NOT NULL DEFAULT '0' COMMENT '订单状态
  50. 0:待支付 1:待配送 2:配送中 3:已完成 4:已取消 5:已退款 6:部分退款 7:待自提', -->
  51. <!-- <block v-if="item.is_pay == 1"> -->
  52. <!-- {{item.cancel_status==2?'已退款':item.state==1?'堂食订单':item.state==3?'自提订单':item.state==2?(item.is_send==1?'已配送':'待配送'):''}} -->
  53. <!-- </block> -->
  54. <!-- <block v-else> -->
  55. <!-- item.order_status==0?'待支付': -->
  56. {{item.order_status==1?'待配送' :item.order_status==2?'配送中':
  57. item.order_status==3?'已完成':item.order_status==4?'已取消':item.order_status==5?'已退款':
  58. item.order_status==6?'部分退款':item.order_status==7?'待自提':''}}
  59. <!-- </block> -->
  60. </view>
  61. </view>
  62. </view>
  63. <view class="content" style="border-bottom: 1rpx solid #f1f1f1;">
  64. <view class="cell flex flex-y-center" v-if="item.state == 1">
  65. <view class="title">取单号:</view>
  66. <view class="desc flex-grow-1">
  67. <view class="flex flex-y-center box-pack-between">
  68. <text>{{item.number||item.id}}</text>
  69. <view class="qc-btn" @click.stop="onQucan(index)" v-if="item.no_meal == 1">
  70. {{item.no_meal == 1?'请取单':'再次通知取单'}}
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. <view class="box-pack-between">
  76. <view class="cell flex flex-y-center">
  77. <view class="title">支付金额:</view>
  78. <view class="desc" style="color:red">¥{{item.pay_price}}</view>
  79. </view>
  80. <view class="pay-info flex flex-y-center">
  81. <image
  82. :src="item.pay_type == 1?'../../static/images/wx.png':item.pay_type == 2?'../../static/images/ali.png':'../static/images/yu.png'"
  83. class="pay-type-icon"></image>
  84. <view class="pay-status">{{item.is_pay == 1?(item.cancel_status==2?'已退款':'支付成功'):'待支付'}}
  85. </view>
  86. </view>
  87. </view>
  88. <view class="cell flex flex-y-center" v-if="item.state == 1">
  89. <view class="title">桌号:</view>
  90. <view class="desc" style="color:red">
  91. {{item.table_name?item.table_name:'自助结账'}}
  92. </view>
  93. </view>
  94. <view class="cell flex flex-y-center" v-if="item.type!=3">
  95. <view class="title">付款方式:</view>
  96. <view class="desc" style="color:red">
  97. {{item.type == 1 ?'餐前付款':item.type ==2?'餐后付款':""}}
  98. </view>
  99. </view>
  100. <view class="cell flex flex-y-center" >
  101. <view class="title">下单方式:</view>
  102. <view class="desc" style="color:red">
  103. <template v-if="item.state==1">堂食</template>
  104. <template v-else-if="item.state == 2">外卖</template>
  105. <template v-else-if="item.state == 3">自提</template>
  106. <template v-else>快速收款</template>
  107. </view>
  108. </view>
  109. <view class="cell flex flex-y-center" v-if="item.remark">
  110. <view class="title">订单备注:</view>
  111. <view class="desc" style="color:#000">
  112. {{item.remark}}
  113. </view>
  114. </view>
  115. <view class="cell flex flex-y-center arr-r">
  116. <view class="title">订单时间 :</view>
  117. <view class="desc">{{item.create_time}}</view>
  118. </view>
  119. </view>
  120. <!-- <block v-if="item.goods_list.lenght>0"> -->
  121. <view class="goods_list flex" v-for="(items,index) of item.goods_list" :key='index'>
  122. <view class="goods_list-title flex-grow-1 box-pack-between">
  123. <view class="">
  124. {{items.name}} ×{{items.num}}
  125. </view>
  126. <view class="goods_list-price">
  127. ¥{{items.total_price}}
  128. </view>
  129. </view>
  130. </view>
  131. <!-- </block>-->
  132. </navigator>
  133. <view class="no-more" v-if="is_bottom">
  134. ---没有更多了---
  135. </view>
  136. </view>
  137. <uni-popup-top ref="popup" type="top" :top="top" :maskClass="maskClass">
  138. <view class="showpay">
  139. <block v-if='act_index==5'>
  140. <view class="box-li" :class="store_id==0?'active':''" @click="Onlevel(0,'全部')" data-text='全部'>全部
  141. </view>
  142. <scroll-view scroll-y="true" style="height: 400rpx;">
  143. <view class="box-li" v-for="(item,index) of tableTypeList" :key='index'
  144. :class="item.id==store_id?'active':''" @click="Onlevel(item.id,item.title)">
  145. {{item.title}}
  146. </view>
  147. </scroll-view>
  148. </block>
  149. <block v-if='act_index==1'>
  150. <view class="box-li" :class="status==''?'active':''" @click="payStatus(0,'全部')" data-type=''
  151. data-text='全部'>全部
  152. </view>
  153. <view class="box-li" :class="status==1?'active':''" @click="payStatus(1,'已支付')" data-type='1'
  154. data-text='已支付'>已支付
  155. </view>
  156. <view class="box-li" :class="status==4?'active':''" @click="payStatus(4,'未支付')" data-type='4'
  157. data-text='未支付'>未支付
  158. </view>
  159. <view class="box-li" :class="status==5?'active':''" @click="payStatus(5,'已退款')" data-type='5'
  160. data-text='已退款'>已退款
  161. </view>
  162. </block>
  163. <block v-if='act_index==2'>
  164. <view class="box-li" :class="state==''?'active':''" @click="pay(0,'全部')" data-type=''
  165. data-text='全部'>全部
  166. </view>
  167. <view class="box-li" :class="state==1?'active':''" @click="pay(1,'堂食')" data-type='1'
  168. data-text='堂食'>堂食
  169. </view>
  170. <view class="box-li" :class="state==2?'active':''" @click="pay(2,'外卖')" data-type='2'
  171. data-text='外卖'>外卖
  172. </view>
  173. <view class="box-li" :class="state==3?'active':''" @click="pay(3,'自提')" data-type='3'
  174. data-text='自提'>自提
  175. </view>
  176. <view class="box-li" :class="state==4?'active':''" @click="pay(4,'快速收款')" data-type='4'
  177. data-text='快速收款'>快速收款
  178. </view>
  179. </block>
  180. <block v-if='act_index==3'>
  181. <view class="box-li" :class="pay_type==0?'active':''" @click="payType(0,'全部')" data-text='微信'>全部
  182. </view>
  183. <view class="box-li" :class="pay_type==1?'active':''" @click="payType(1,'微信')" data-text='微信'>微信
  184. </view>
  185. <view class="box-li" :class="pay_type==2?'active':''" @click="payType(2,'支付宝')" data-text='支付宝'>支付宝
  186. </view>
  187. <view class="box-li" :class="pay_type==3?'active':''" @click="payType(3,'余额支付')" data-text='余额支付'>
  188. 余额支付
  189. </view>
  190. </block>
  191. <block v-if='act_index==4'>
  192. <view class="model">
  193. <view class="flex-center model-date box-pack-between">
  194. <view class="model-item" :class="time_index==1?'act':''">
  195. <picker mode='date' :value="start" :start="startDate" :end="endDate"
  196. @change="bindDateChange1" data-index="1">
  197. <view class="flex-center">
  198. <text>{{start}}</text>
  199. </view>
  200. </picker>
  201. </view>
  202. <view class="model-item" :class="time_index==2?'act':''">
  203. <picker mode='date' :value="end" :start="startDate" :end="endDate"
  204. @change="bindDateChange2" data-index="1">
  205. <view class="flex-center">
  206. <text>{{end}}</text>
  207. </view>
  208. </picker>
  209. </view>
  210. </view>
  211. <view class="flex">
  212. <view class="model-btn-close model-btn flex-center" @click="clear">
  213. 清空
  214. </view>
  215. <view class="model-btn-success flex-center model-btn" @click="sure">
  216. 确定
  217. </view>
  218. </view>
  219. </view>
  220. </block>
  221. </view>
  222. </uni-popup-top>
  223. </view>
  224. </template>
  225. <script>
  226. import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
  227. export default {
  228. components: {
  229. uniPopupTop
  230. },
  231. data() {
  232. return {
  233. state: 0,
  234. pay_type: 0,
  235. URL: getApp().globalData.URL,
  236. admin_id: "",
  237. store_id: "",
  238. list: [],
  239. page: 1,
  240. is_bottom: false,
  241. act_index: 1,
  242. time_index: 0,
  243. time_index2: 0,
  244. start: "开始时间",
  245. end: "结束时间",
  246. top: "200rpx",
  247. maskClass: {
  248. 'position': 'fixed',
  249. 'bottom': 0,
  250. 'top': "100rpx",
  251. 'left': 0,
  252. 'right': 0,
  253. 'backgroundColor': 'rgba(0, 0, 0, 0.4)'
  254. },
  255. tableTypeList: [], //门店列表
  256. level_text: '门店',
  257. status_text: '订单状态',
  258. order_text: '下单方式',
  259. pay_text: '支付方式',
  260. start_text: '日期查找',
  261. status: 1
  262. }
  263. },
  264. onLoad(options) {
  265. console.log(options)
  266. this.store_id = uni.getStorageSync("store_id");
  267. this.admin_id = uni.getStorageSync("admin_id");
  268. if (this.admin_id) {
  269. this.shop_store_index()
  270. this.act_index = 5
  271. }
  272. if (options.day) {
  273. this.end = options.day;
  274. this.start = options.day;
  275. this.start_text = options.day;
  276. }
  277. if (options.state && options.order_text) {
  278. this.order_text = options.order_text
  279. this.state = options.state
  280. }
  281. console.log(this.state)
  282. },
  283. onShow() {
  284. this.getData(1);
  285. },
  286. onReachBottom() {
  287. if (!this.is_bottom) {
  288. this.getData(this.page + 1)
  289. }
  290. },
  291. methods: {
  292. shop_store_index() {
  293. this.request({
  294. url: 'Smdcshop/shop_store_index',
  295. data: {
  296. admin_id: this.admin_id,
  297. }
  298. }).then(res => {
  299. if (res.code == 200) {
  300. if (res.data.length > 0) {
  301. this.tableTypeList = res.data;
  302. }
  303. }
  304. })
  305. },
  306. Onlevel(e, text) {
  307. this.store_id = e;
  308. this.level_text = text;
  309. this.list = [];
  310. this.getData(1);
  311. this.$refs.popup.close();
  312. },
  313. // 键盘完成事件
  314. firmSeach(e) {
  315. this.serch = e.detail.value;
  316. this.getData(1);
  317. this.$refs.popup.close();
  318. },
  319. // 监听input
  320. putSeach(e) {
  321. this.serch = e.detail.value;
  322. if (!e.detail.value) {
  323. this.getData(1);
  324. }
  325. },
  326. // 搜索
  327. bindSeach(e) {
  328. this.getData(1);
  329. this.$refs.popup.close();
  330. },
  331. // 订单状态
  332. payStatus(e, text) {
  333. this.status = e;
  334. this.status_text = text;
  335. this.getData(1);
  336. this.$refs.popup.close();
  337. },
  338. // 下单方式
  339. pay(e, text) {
  340. this.state = e;
  341. this.order_text = text;
  342. this.getData(1);
  343. this.$refs.popup.close();
  344. },
  345. // 支付方式搜索
  346. payType(e, text) {
  347. this.pay_type = e;
  348. this.pay_text = text;
  349. this.getData(1);
  350. this.$refs.popup.close();
  351. },
  352. bindDateChange1(e) {
  353. this.time_index = e.currentTarget.dataset.index;
  354. this.start = e.target.value;
  355. },
  356. bindDateChange2(e) {
  357. this.time_index2 = e.currentTarget.dataset.index;
  358. this.end = e.target.value;
  359. },
  360. sure(e) {
  361. this.getData(1);
  362. this.$refs.popup.close();
  363. this.start_text = this.end;
  364. },
  365. clear() {
  366. this.start = '开始时间';
  367. this.start_text = '日期查找';
  368. this.end = '结束时间';
  369. this.getData(1);
  370. this.$refs.popup.close();
  371. },
  372. onTopBtnTap(e) {
  373. this.act_index = e;
  374. this.$refs.popup.open();
  375. },
  376. getData(page) {
  377. if (page == 1) {
  378. this.list = []
  379. this.page = 1
  380. this.is_bottom = false
  381. }
  382. this.request({
  383. url: 'Smdcshop/order_index',
  384. data: {
  385. page,
  386. limit: 10,
  387. admin_id: this.admin_id,
  388. store_id: this.store_id,
  389. serch: this.serch,
  390. state: this.state || '', //1 堂食 2外卖 3自提
  391. // order_xdtime: this.start == '选择时间' ? '' : this.start,
  392. start: this.start == '开始时间' ? '' : this.start,
  393. end: this.end == '结束时间' ? '' : this.end,
  394. pay_type: this.pay_type || '',
  395. is_pay: this.status,
  396. }
  397. }).then(res => {
  398. if (res.code == 200 && res.data.length) {
  399. this.list = this.list.concat(res.data)
  400. this.page = page
  401. if (res.data.is_dd == 1 && res.data.is_send == 1) {
  402. this.GetDadaInfo(res.data.info.id);
  403. }
  404. } else {
  405. this.is_bottom = true
  406. }
  407. })
  408. },
  409. GetDadaInfo(id) {
  410. this.request({
  411. url: 'Smdcshop/GetDadaInfo',
  412. data: {
  413. id: id
  414. }
  415. }).then(res => {
  416. this.obj = res.data;
  417. })
  418. },
  419. //提醒取餐
  420. onQucan(index) {
  421. console.log(index)
  422. this.request({
  423. url: 'merchant/take_meal',
  424. is_agent: 'agent',
  425. data: {
  426. order_id: this.list[index].id
  427. }
  428. }).then(res => {
  429. if (res.code == 200) {
  430. uni.showModal({
  431. content: "已提醒取单",
  432. showCancel: false,
  433. success: r => {
  434. this.list[index].no_meal = 2
  435. console.log(this.list[index])
  436. }
  437. })
  438. }
  439. })
  440. }
  441. },
  442. }
  443. </script>
  444. <style lang="scss">
  445. .store-name {
  446. max-width: 150rpx;
  447. text-overflow: ellipsis;
  448. white-space: nowrap;
  449. overflow: hidden;
  450. }
  451. .header-text .act {
  452. color: red;
  453. }
  454. .header-text .act .d3 {
  455. border-color: red transparent transparent transparent;
  456. }
  457. .pof {
  458. position: fixed;
  459. left: 0;
  460. z-index: 999;
  461. background: #fff;
  462. width: 100%;
  463. }
  464. .search-content {
  465. width: 100%;
  466. height: 100rpx;
  467. font-size: 28rpx;
  468. top: 0;
  469. .search {
  470. width: 80%;
  471. border: 1rpx solid #F1F1F1;
  472. margin-right: 15rpx;
  473. padding: 10rpx;
  474. border-radius: 50rpx;
  475. icon {
  476. margin-right: 15rpx;
  477. }
  478. }
  479. }
  480. .model {
  481. width: 100%;
  482. z-index: 10;
  483. background: #FFFFFF;
  484. padding-bottom: 20rpx;
  485. .model-date {
  486. width: 100%;
  487. padding: 20rpx 80rpx;
  488. border-bottom: 1rpx solid #F1F1F1;
  489. .model-item {
  490. width: 270rpx;
  491. text-align: center;
  492. font-size: 28rpx;
  493. color: #999;
  494. position: relative;
  495. padding: 10rpx 0;
  496. text-align: center;
  497. border-radius: 8rpx;
  498. border: 1rpx solid #999;
  499. }
  500. .act {
  501. // color: #FFFFFF;
  502. // background: #FFBE2C;
  503. // border: 1rpx solid #FFBE2C;
  504. }
  505. }
  506. .model-btn {
  507. border-radius: 8rpx;
  508. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
  509. margin: 0 auto;
  510. margin-top: 20rpx;
  511. text-align: center;
  512. width: 41%;
  513. height: 80rpx;
  514. border-radius: none;
  515. }
  516. .model-btn-close {
  517. border: 1rpx solid #F1F1F1;
  518. color: #000;
  519. }
  520. .model-btn-success {
  521. color: #FFFFFF;
  522. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  523. }
  524. }
  525. page {
  526. background-color: #F4F5F7;
  527. }
  528. .showpay {
  529. width: 100%;
  530. z-index: 10;
  531. background: #FFFFFF;
  532. }
  533. .showpay .active {
  534. color: red
  535. }
  536. .header-hg100 {
  537. height: 100rpx;
  538. top: 100rpx;
  539. width: 100%;
  540. }
  541. .list {
  542. padding: 210rpx 25rpx 0;
  543. }
  544. .list .item {
  545. background-color: #fff;
  546. border-radius: 8rpx;
  547. overflow: hidden;
  548. padding: 0 25rpx;
  549. margin-bottom: 30rpx;
  550. box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);
  551. }
  552. .list .item .top {
  553. height: 80rpx;
  554. border-bottom: 1rpx solid #f5f5f5;
  555. }
  556. .list .item .top .pay-info {
  557. flex: none;
  558. }
  559. .pay-type-icon {
  560. display: block;
  561. width: 28rpx;
  562. height: 28rpx;
  563. flex: none;
  564. margin-right: 8rpx;
  565. }
  566. .pay-status {
  567. font-size: 28rpx;
  568. color: #464646;
  569. }
  570. .list .item .content {
  571. padding: 20rpx 0;
  572. }
  573. .list .content .cell {
  574. margin-bottom: 16rpx;
  575. font-size: 26rpx;
  576. color: #99A0AD;
  577. }
  578. .list .content .cell:last-child {
  579. margin-bottom: 0;
  580. }
  581. .list .content .cell .title {
  582. color: #99A0AD;
  583. }
  584. .list .content .cell .desc {
  585. color: #666;
  586. }
  587. .qc-btn {
  588. background-color: #3387FF;
  589. color: #fff;
  590. border-radius: 6rpx;
  591. height: 48rpx;
  592. line-height: 48rpx;
  593. padding: 0 20rpx;
  594. margin-left: 10rpx;
  595. }
  596. .header-text {
  597. text-align: center;
  598. }
  599. .box-li {
  600. background-color: #fff;
  601. text-align: center;
  602. border-bottom: 1rpx solid #f1f1f1;
  603. height: 80rpx;
  604. line-height: 80rpx;
  605. font-size: 26rpx;
  606. }
  607. .goods_list {
  608. font-size: 28rpx;
  609. }
  610. .goods_list-title {
  611. padding: 20rpx 0;
  612. }
  613. .goods_list-price {
  614. font-size: 26rpx;
  615. color: red;
  616. }
  617. .goods_list-num {
  618. font-size: 26rpx;
  619. }
  620. .d3 {
  621. width: 0;
  622. height: 0;
  623. border-width: 12rpx;
  624. border-style: solid;
  625. border-color: #000 transparent transparent transparent;
  626. margin-top: 14rpx;
  627. margin-left: 6rpx;
  628. }
  629. </style>