orderList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  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==1?'act':''"
  15. @click="onTopBtnTap(1)">
  16. {{status_text}}
  17. <view class="d3" :style="'border-color:'+act_index==1?'#007AFF':''"></view>
  18. </view>
  19. <!--
  20. <view class="flex-grow-1 flex-center" data-text="2" :class="act_index==2?'act':''"
  21. @click="onTopBtnTap(2)">
  22. {{order_text}}
  23. <view class="d3" :style="'border-color:'+act_index==2?'#007AFF':''"></view>
  24. </view>
  25. <view class="flex-grow-1 flex-center" data-text="3" :class="act_index==3?'act':''"
  26. @click="onTopBtnTap(3)">
  27. {{pay_text}}
  28. <view class="d3"></view>
  29. </view> -->
  30. <view class="flex-grow-1 flex-center" data-text="4" :class="act_index==2?'act':''"
  31. @click="onTopBtnTap(2)">
  32. {{start_text}}
  33. <view class="d3"></view>
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. <uni-popup-top ref="popup" type="top" :top="top" :maskClass="maskClass">
  39. <view class="showpay">
  40. <!-- <block v-if='act_index==1'>
  41. <view class="box-li" :class="status==''?'active':''" @click="payStatus(0,'全部')" data-type=''
  42. data-text='全部'>全部
  43. </view>
  44. <view class="box-li" :class="status==1?'active':''" @click="payStatus(1,'已支付')" data-type='1'
  45. data-text='已支付'>已支付
  46. </view>
  47. <view class="box-li" :class="status==4?'active':''" @click="payStatus(4,'未支付')" data-type='4'
  48. data-text='未支付'>未支付
  49. </view>
  50. <view class="box-li" :class="status==5?'active':''" @click="payStatus(5,'已退款')" data-type='5'
  51. data-text='已退款'>已退款
  52. </view>
  53. </block> -->
  54. <block v-if='act_index==1'>
  55. <view class="box-li" :class="state==''?'active':''" @click="pay(0,'全部')" data-type=''
  56. data-text='全部'>全部
  57. </view>
  58. <view class="box-li" :class="state==1?'active':''" @click="pay(1,'快递')" data-type='1'
  59. data-text='快递'>快递
  60. </view>
  61. <view class="box-li" :class="state==2?'active':''" @click="pay(2,'自提')" data-type='2'
  62. data-text='自提'>自提
  63. </view>
  64. </block>
  65. <!--<block v-if='act_index==2'>
  66. <view class="box-li" :class="pay_type==0?'active':''" @click="payType(0,'全部')" data-text='微信'>全部
  67. </view>
  68. <view class="box-li" :class="pay_type==1?'active':''" @click="payType(1,'微信')" data-text='微信'>微信
  69. </view>
  70. <view class="box-li" :class="pay_type==2?'active':''" @click="payType(2,'支付宝')" data-text='支付宝'>支付宝
  71. </view>
  72. <view class="box-li" :class="pay_type==3?'active':''" @click="payType(3,'余额支付')" data-text='余额支付'>
  73. 余额支付
  74. </view>
  75. </block> -->
  76. <block v-if='act_index==2'>
  77. <view class="model">
  78. <view class="flex-center model-date box-pack-between">
  79. <view class="model-item" :class="time_index==1?'act':''">
  80. <picker mode='date' :value="start" :start="startDate" :end="endDate"
  81. @change="bindDateChange1" data-index="1">
  82. <view class="flex-center">
  83. <text>{{start}}</text>
  84. </view>
  85. </picker>
  86. </view>
  87. <view class="model-item" :class="time_index==2?'act':''">
  88. <picker mode='date' :value="end" :start="startDate" :end="endDate"
  89. @change="bindDateChange2" data-index="1">
  90. <view class="flex-center">
  91. <text>{{end}}</text>
  92. </view>
  93. </picker>
  94. </view>
  95. </view>
  96. <view class="flex">
  97. <view class="model-btn-close model-btn flex-center" @click="clear">
  98. 清空
  99. </view>
  100. <view class="model-btn-success flex-center model-btn" @click="sure">
  101. 确定
  102. </view>
  103. </view>
  104. </view>
  105. </block>
  106. </view>
  107. </uni-popup-top>
  108. <view class="header-hg200">
  109. </view>
  110. <view class="list">
  111. <navigator :url="`./orderDetail?id=${item.id}`" class="item" v-for="(item,index) in list" :key="index">
  112. <view class="top flex flex-y-center box-pack-between">
  113. <view class="name text-1">{{item.order_no}}</view>
  114. <view class="pay-info flex flex-y-center">
  115. <image :src="item.pay_type == 1?'../../static/images/wx.png':'../../static/images/ali.png'"
  116. class="pay-type-icon" v-if="item.is_pay == 1"></image>
  117. <view class="pay-status">
  118. <block v-if="item.state==1">
  119. {{item.order_status == 0?'待支付':item.order_status == 1?'待发货': "已完成"}}
  120. </block>
  121. <block v-if="item.state==2">
  122. {{item.hx_time == 1?'待核销':"已核销"}}
  123. </block>
  124. </view>
  125. </view>
  126. </view>
  127. <view class="content">
  128. <view class="flex-y-center">
  129. <image :src="URL+item.thumb" class="content-img"></image>
  130. <view class="flex-grow-1">
  131. <view class="cell flex flex-y-center">
  132. <view class="title">{{item.goods_name}}</view>
  133. </view>
  134. <view class="cell flex flex-y-center">
  135. <view class="title">积分:</view>
  136. <view class="desc" style="color:#FEAF44">{{item.integral}}</view>
  137. </view>
  138. <view class="cell flex flex-y-center arr-r">
  139. <view class="title">订单时间 :</view>
  140. <view class="desc">{{item.create_time}}</view>
  141. </view>
  142. </view>
  143. </view>
  144. </view>
  145. </navigator>
  146. </view>
  147. </view>
  148. </template>
  149. <script>
  150. import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
  151. export default {
  152. components: {
  153. uniPopupTop
  154. },
  155. data() {
  156. return {
  157. URL: getApp().globalData.URL,
  158. admin_id: "",
  159. list: [],
  160. page: 1,
  161. is_bottom: false,
  162. act_index: 1,
  163. time_index: 0,
  164. time_index2: 0,
  165. start: "开始时间",
  166. end: "结束时间",
  167. top: "200rpx",
  168. maskClass: {
  169. 'position': 'fixed',
  170. 'bottom': 0,
  171. 'top': "100rpx",
  172. 'left': 0,
  173. 'right': 0,
  174. 'backgroundColor': 'rgba(0, 0, 0, 0.4)'
  175. },
  176. status_text: '取货方式',
  177. // order_text: ' 取货方式',
  178. // pay_text: '支付方式',
  179. start_text: '日期查找',
  180. status: 1,
  181. }
  182. },
  183. onLoad(options) {
  184. this.admin_id = uni.getStorageSync("admin_id")
  185. },
  186. onShow() {
  187. this.getData(1)
  188. },
  189. onReachBottom() {
  190. if (!this.is_bottom) {
  191. this.getData(this.page + 1)
  192. }
  193. },
  194. methods: {
  195. // 键盘完成事件
  196. firmSeach(e) {
  197. this.serch = e.detail.value;
  198. this.getData(1);
  199. this.$refs.popup.close();
  200. },
  201. // 监听input
  202. putSeach(e) {
  203. this.serch = e.detail.value;
  204. if (!e.detail.value) {
  205. this.getData(1);
  206. }
  207. },
  208. // 搜索
  209. bindSeach(e) {
  210. this.getData(1);
  211. this.$refs.popup.close();
  212. },
  213. // // 订单状态
  214. // payStatus(e, text) {
  215. // this.status = e;
  216. // this.status_text = text;
  217. // this.getData(1);
  218. // this.$refs.popup.close();
  219. // },
  220. // 下单方式
  221. pay(e, text) {
  222. this.state = e;
  223. this.status_text = text;
  224. this.getData(1);
  225. this.$refs.popup.close();
  226. },
  227. // 支付方式搜索
  228. // payType(e, text) {
  229. // this.pay_type = e;
  230. // this.pay_text = text;
  231. // this.getData(1);
  232. // this.$refs.popup.close();
  233. // },
  234. bindDateChange1(e) {
  235. this.time_index = e.currentTarget.dataset.index;
  236. this.start = e.target.value;
  237. },
  238. bindDateChange2(e) {
  239. this.time_index2 = e.currentTarget.dataset.index;
  240. this.end = e.target.value;
  241. },
  242. sure(e) {
  243. this.getData(1);
  244. this.$refs.popup.close();
  245. this.start_text = this.end;
  246. },
  247. clear() {
  248. this.start = '开始时间';
  249. this.start_text = '日期查找';
  250. this.end = '结束时间';
  251. this.getData(1);
  252. this.$refs.popup.close();
  253. },
  254. onTopBtnTap(e) {
  255. this.act_index = e;
  256. this.$refs.popup.open();
  257. },
  258. getData(page) {
  259. if (page == 1) {
  260. this.list = []
  261. this.page = 1
  262. this.is_bottom = false
  263. }
  264. this.request({
  265. url: 'Smdcshop/jforder_index',
  266. data: {
  267. order_no:this.serch,
  268. page,
  269. limit: 10,
  270. admin_id: this.admin_id,
  271. state:this.state,
  272. start_time:this.start == '开始时间' ? '' : this.start,
  273. end_time:this.end == '结束时间' ? '' : this.end,
  274. }
  275. }).then(res => {
  276. if (res.code == 200 && res.data.length) {
  277. this.list = this.list.concat(res.data)
  278. this.page = page
  279. } else {
  280. this.is_bottom = true
  281. }
  282. })
  283. }
  284. }
  285. }
  286. </script>
  287. <style lang="scss">
  288. page {
  289. background-color: #F4F5F7;
  290. }
  291. .header-text .act {
  292. color: #FEAF44;
  293. }
  294. .header-text .act .d3 {
  295. border-color: #FEAF44 transparent transparent transparent;
  296. }
  297. .pof {
  298. position: fixed;
  299. left: 0;
  300. z-index: 999;
  301. background: #fff;
  302. width: 100%;
  303. }
  304. .search-content {
  305. width: 100%;
  306. height: 100rpx;
  307. font-size: 28rpx;
  308. top: 0;
  309. .search {
  310. width: 80%;
  311. border: 1rpx solid #F1F1F1;
  312. margin-right: 15rpx;
  313. padding: 10rpx;
  314. border-radius: 50rpx;
  315. icon {
  316. margin-right: 15rpx;
  317. }
  318. }
  319. }
  320. .model {
  321. width: 100%;
  322. z-index: 10;
  323. background: #FFFFFF;
  324. padding-bottom: 20rpx;
  325. .model-date {
  326. width: 100%;
  327. padding: 20rpx 40rpx;
  328. border-bottom: 1rpx solid #F1F1F1;
  329. .model-item {
  330. width: 270rpx;
  331. text-align: center;
  332. font-size: 28rpx;
  333. color: #999;
  334. position: relative;
  335. padding: 10rpx 0;
  336. text-align: center;
  337. border-radius: 8rpx;
  338. border: 1rpx solid #999;
  339. }
  340. .act {
  341. // color: #FFFFFF;
  342. // background: #FFBE2C;
  343. // border: 1rpx solid #FFBE2C;
  344. }
  345. }
  346. .model-btn {
  347. border-radius: 8rpx;
  348. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
  349. margin: 0 auto;
  350. margin-top: 20rpx;
  351. text-align: center;
  352. width: 41%;
  353. height: 80rpx;
  354. border-radius: none;
  355. }
  356. .model-btn-close {
  357. border: 1rpx solid #F1F1F1;
  358. color: #000;
  359. }
  360. .model-btn-success {
  361. color: #FFFFFF;
  362. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  363. }
  364. }
  365. .showpay .active {
  366. color: #FEAF44
  367. }
  368. .header-hg100 {
  369. height: 100rpx;
  370. top: 100rpx;
  371. width: 100%;
  372. }
  373. .header-hg200 {
  374. height: 200rpx;
  375. }
  376. .d3 {
  377. width: 0;
  378. height: 0;
  379. border-width: 12rpx;
  380. border-style: solid;
  381. border-color: #000 transparent transparent transparent;
  382. margin-top: 14rpx;
  383. margin-left: 6rpx;
  384. }
  385. .box-li {
  386. background-color: #fff;
  387. text-align: center;
  388. border-bottom: 1rpx solid #f1f1f1;
  389. height: 80rpx;
  390. line-height: 80rpx;
  391. font-size: 26rpx;
  392. }
  393. .header-text {
  394. text-align: center;
  395. }
  396. .list {
  397. padding: 30rpx 25rpx 0;
  398. }
  399. .list .item {
  400. background-color: #fff;
  401. border-radius: 8rpx;
  402. overflow: hidden;
  403. padding: 0 25rpx;
  404. margin-bottom: 30rpx;
  405. box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);
  406. }
  407. .list .item .top {
  408. height: 80rpx;
  409. border-bottom: 1rpx solid #f5f5f5;
  410. }
  411. .list .item .top .pay-info {
  412. flex: none;
  413. }
  414. .list .item .top .pay-type-icon {
  415. display: block;
  416. width: 28rpx;
  417. height: 28rpx;
  418. flex: none;
  419. margin-right: 8rpx;
  420. }
  421. .list .item .top .pay-status {
  422. font-size: 28rpx;
  423. color: #FEAF44;
  424. }
  425. .list .item .content {
  426. padding: 20rpx 0;
  427. }
  428. .list .content .cell {
  429. margin-bottom: 16rpx;
  430. font-size: 26rpx;
  431. color: #99A0AD;
  432. }
  433. .list .content .cell:last-child {
  434. margin-bottom: 0;
  435. }
  436. .list .content .cell .title {
  437. color: #99A0AD;
  438. }
  439. .list .content .cell .desc {
  440. color: #666;
  441. }
  442. .content-img {
  443. width: 100rpx;
  444. height: 100rpx;
  445. margin-right: 20rpx;
  446. }
  447. </style>