order.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. <template>
  2. <view class="pagesCons">
  3. <view class="tab-body">
  4. <view class="uTabs">
  5. <u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false"
  6. swiperWidth="750"></u-tabs-swiper>
  7. </view>
  8. <swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
  9. <swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
  10. <scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
  11. <view class="check-order-list"
  12. v-if="index==current"
  13. v-for="(item,sindex) in list"
  14. :key="item.id+'-'+sindex"
  15. @click="viewRow(item)">
  16. <view class="check-row">
  17. <view class="createDate">{{item.createDate}}</view>
  18. <view >{{item.orderFlag}}</view>
  19. </view>
  20. <view class="bundle-list" v-for="row in item.itemList" :key="row.id">
  21. <view class="img-cont">
  22. <image :src="row.icon?row.icon:'../../static/goods.png'"></image>
  23. </view>
  24. <view >
  25. <view class="ellipsis-two">{{row.name}}</view>
  26. <view class="bundle-num">
  27. <view ><text class="price-num">{{row.price}}</text> <text class="price-text">乐豆</text></view>
  28. <view >X {{row.number}}</view>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="check-row">
  33. <view class="text-right">
  34. <text class="total-text">
  35. 共{{item.totalNum}}件商品
  36. </text>
  37. <text v-if="item.orderFlag=='待支付'"><text class="money-total">应付</text><text class="price-num">{{item.amount}}</text> <text class="price-text">乐豆</text></text>
  38. <text v-else><text class="money-total">实付</text><text class="price-num">{{item.payedAmount}}</text> <text class="price-text">乐豆</text></text>
  39. </view>
  40. </view>
  41. <view class="check-row">
  42. <view v-if="item.orderFlag=='待支付'" class="text-right">
  43. <text style="margin-right: 30upx;">支付剩余1天45分</text>
  44. <u-button class="btn-cont" shape="circle" type="error" size="medium">去支付</u-button>
  45. </view>
  46. <view v-if="item.orderFlag=='待发货'" class="text-right">
  47. <u-button class="btn-cont" shape="circle" size="medium">提醒发货</u-button>
  48. </view>
  49. <view v-if="item.orderFlag=='已发货'" class="text-right">
  50. <u-button @click="showLog(item)" class="btn-cont" style="margin-right: 20upx;" shape="circle" size="medium">查看物流</u-button>
  51. <u-button class="btn-cont" shape="circle" type="primary" size="medium">确认收货</u-button>
  52. </view>
  53. <view v-if="item.orderFlag=='已完成'" class="text-right">
  54. <u-button @click="showLog(item)" class="btn-cont" shape="circle" size="medium">查看物流</u-button>
  55. </view>
  56. </view>
  57. </view>
  58. <u-empty style="padding-top: 10vh;height: auto;" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'"
  59. mode="list"></u-empty>
  60. <view v-if="index==current" style="padding: 20upx;">
  61. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  62. </view>
  63. </scroll-view>
  64. </swiper-item>
  65. </swiper>
  66. </view>
  67. </view>
  68. </template>
  69. <script>
  70. import {
  71. getLookUpDatas,
  72. listLookUp
  73. } from '@/api/data'
  74. export default {
  75. components: {
  76. },
  77. data() {
  78. return {
  79. status: 'loadmore',
  80. noDataText: '暂无数据',
  81. tabList: [
  82. {
  83. dispName: '全部',
  84. typeId: 2,
  85. queryLabel: 'ALL' // tab参数
  86. },
  87. {
  88. dispName: '待支付',
  89. typeId: 1,
  90. queryLabel: 'DZF' // tab参数
  91. },
  92. {
  93. dispName: '待发货',
  94. typeId: 3,
  95. queryLabel: 'DFH' // tab参数
  96. },
  97. {
  98. dispName: '已发货',
  99. typeId: 3,
  100. queryLabel: 'YFH' // tab参数
  101. },
  102. {
  103. dispName: '已完成',
  104. typeId: 3,
  105. queryLabel: 'YWC' // tab参数
  106. },
  107. ],
  108. current: 0,
  109. swiperCurrent: 0,
  110. pageNo: 1,
  111. pageSize: 10,
  112. list: [],
  113. logData: { // 物流信息
  114. logName: '韵达快递',
  115. logNum: 12356544544
  116. },
  117. total: 0,
  118. action: 'swiperChange', // 操作类型,上划分页,或左右滑动
  119. }
  120. },
  121. onLoad() {
  122. // 监听待办处理后刷新
  123. uni.$on('refreshBl-handle', this.handleRefresh)
  124. this.pageInit()
  125. },
  126. onUnload() {
  127. uni.$off('refreshBL', this.refresh)
  128. uni.$off('refreshBl-handle', this.handleRefresh)
  129. },
  130. methods: {
  131. pageInit() {
  132. this.sortIndex = 1
  133. this.pageNo = 1
  134. this.getRow()
  135. },
  136. handleRefresh() {
  137. this.getRow()
  138. },
  139. // tabs通知swiper切换
  140. tabsChange(index) {
  141. this.swiperCurrent = index;
  142. },
  143. swiperChange(event) {
  144. this.action = 'swiperChange'
  145. this.status = 'loading'
  146. },
  147. // swiper-item左右移动,通知tabs的滑块跟随移动
  148. transition(e) {
  149. let dx = e.detail.dx;
  150. this.$refs.uTabs.setDx(dx);
  151. },
  152. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  153. // swiper滑动结束,分别设置tabs和swiper的状态
  154. animationfinish(e) {
  155. let current = e.detail.current;
  156. let isCurtab = this.current == current
  157. if (this.status != "nomore") {
  158. let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab;
  159. if (loadData) {
  160. this.$refs.uTabs.setFinishCurrent(current);
  161. this.swiperCurrent = current;
  162. this.current = current;
  163. this.resetPage();
  164. }
  165. }
  166. },
  167. // scroll-view到底部加载更多
  168. onreachBottom() {
  169. this.action = 'onreachBottom'
  170. if (this.list.length < this.total) {
  171. this.pageNo += 1
  172. this.getRow()
  173. } else {
  174. uni.showToast({
  175. title: '已经到底了',
  176. icon: 'none'
  177. });
  178. this.status = "nomore"
  179. }
  180. },
  181. // 查询列表
  182. getRow(pageNo) {
  183. this.status = "loadmore"
  184. this.list = [{
  185. createDate: "2020-10-28 11:15:59",
  186. orderFlag: "待支付",
  187. payedAmount: 0,
  188. id: 11,
  189. amount: 450,
  190. totalNum: 3,
  191. itemList: [
  192. {
  193. name: "八九箭冠",
  194. id: 76435,
  195. number: 1,
  196. price: 150,
  197. icon: ''
  198. },
  199. {
  200. name: "数据库的合法身份觉得很附近发生纠纷解决",
  201. id: 76436,
  202. number: 2,
  203. price: 150,
  204. icon: ''
  205. }
  206. ]
  207. },{
  208. createDate: "2020-10-29 11:15:59",
  209. orderFlag: "待发货",
  210. payedAmount: 300,
  211. id: 112,
  212. amount: 300,
  213. totalNum: 2,
  214. itemList: [
  215. {
  216. name: "捐款事件的看法教科书上的发货角度思考JFK就是的JFK即将开放的",
  217. id: 76440,
  218. number: 2,
  219. price: 150,
  220. icon: ''
  221. }
  222. ]
  223. },{
  224. createDate: "2020-10-29 11:15:59",
  225. orderFlag: "已发货",
  226. payedAmount: 300,
  227. id: 1112,
  228. amount: 300,
  229. totalNum: 2,
  230. itemList: [
  231. {
  232. name: "捐款事件的看法教科书上的发货角度思考JFK就是的JFK即将开放的",
  233. id: 76420,
  234. number: 2,
  235. price: 150,
  236. icon: ''
  237. }
  238. ]
  239. },{
  240. createDate: "2020-10-29 11:15:59",
  241. orderFlag: "已完成",
  242. payedAmount: 300,
  243. id: 1126,
  244. amount: 300,
  245. totalNum: 2,
  246. itemList: [
  247. {
  248. name: "捐款事件的看法教科书上的发货角度思考JFK就是的JFK即将开放的",
  249. id: 76496,
  250. number: 2,
  251. price: 150,
  252. icon: ''
  253. }
  254. ]
  255. }]
  256. return
  257. if (pageNo) {
  258. this.pageNo = pageNo
  259. }
  260. let params = {
  261. pageNo: this.pageNo,
  262. pageSize: this.pageSize,
  263. queryLabel: this.tabList[this.current].queryLabel, // tab分类
  264. }
  265. this.status = "loading"
  266. getBackLogList(params).then(res => {
  267. if (res.status == 200) {
  268. if (this.pageNo > 1) {
  269. this.list = this.list.concat(res.data.list || [])
  270. } else {
  271. this.list = res.data.list || []
  272. }
  273. this.total = res.data.count || 0
  274. } else {
  275. this.list = []
  276. this.total = 0
  277. this.noDataText = res.message
  278. }
  279. this.status = "loadmore"
  280. })
  281. },
  282. resetPage() {
  283. this.status = 'loading';
  284. // 上划分页
  285. if (this.action == 'onreachBottom') {
  286. this.getRow();
  287. }
  288. // 左右切换tab
  289. if (this.action == 'swiperChange') {
  290. this.list = [];
  291. this.getRow(1);
  292. }
  293. },
  294. // 获取查询参数 刷新列表
  295. refresh(params) {
  296. // console.log(params,'1111111111')
  297. this.searchParams = params
  298. this.getRow(1)
  299. },
  300. // 查看物流
  301. showLog (item) {
  302. console.log(item,'111111')
  303. uni.navigateTo({
  304. url: "/pages/order/LogList?id="
  305. })
  306. },
  307. // 复制运单编号
  308. copyLogNum () {
  309. // H5 不支持
  310. uni.setClipboardData({
  311. data: this.logData.logNum,
  312. success: function(res) {
  313. uni.getClipboardData({
  314. success: function(res) {
  315. uni.showToast({
  316. title: '已复制到剪贴板'
  317. });
  318. }
  319. });
  320. }
  321. })
  322. },
  323. // 详细页
  324. viewRow(item) {
  325. // if (!this.$hasPermissions('M_backlog_detail_mobile')) {
  326. // return
  327. // }
  328. // 已完成的
  329. uni.navigateTo({
  330. url: "/pages/order/orderDetail?id="
  331. })
  332. },
  333. }
  334. }
  335. </script>
  336. <style lang="scss">
  337. page {
  338. height: 100%;
  339. width: 100%;
  340. background: #F8F8F8;
  341. }
  342. .pagesCons {
  343. height: 100%;
  344. width: 100%;
  345. background: #F8F8F8;
  346. display: flex;
  347. flex-direction: column;
  348. .text-right {
  349. text-align: right;
  350. }
  351. .tab-body {
  352. flex: 1;
  353. display: flex;
  354. flex-direction: column;
  355. .uTabs {
  356. border-bottom: 1px solid #EEEEEE;
  357. box-shadow: 1px 1px 3px #eeeeee;
  358. }
  359. .check-list {
  360. flex: 1;
  361. overflow-y: scroll;
  362. .swiper-item {
  363. width: 100%;
  364. height: 100%;
  365. overflow: hidden;
  366. .scroll-view {
  367. width: 100%;
  368. height: 100%;
  369. overflow: auto;
  370. }
  371. }
  372. }
  373. // 列表样式
  374. .check-order-list {
  375. background: #ffffff;
  376. padding: 10upx 20upx;
  377. margin: 25upx;
  378. border-radius: 6upx;
  379. box-shadow: 1px 1px 3px #EEEEEE;
  380. font-size: 28upx;
  381. .check-row {
  382. display: flex;
  383. align-items: center;
  384. padding: 20upx 10upx;
  385. .icon-xian {
  386. text-align: right;
  387. width: 40upx;
  388. }
  389. &:first-child {
  390. border-bottom: 1px dashed #F8F8F8;
  391. .createDate {
  392. color: #666;
  393. font-size: 26upx;
  394. margin-left: 10upx;
  395. }
  396. }
  397. &:last-child {
  398. border-top: 1px dashed #F8F8F8;
  399. }
  400. >view {
  401. &:first-child {
  402. flex: 1;
  403. }
  404. }
  405. }
  406. // 订单中商品列表
  407. .bundle-list {
  408. display: flex;
  409. padding: 20upx 10upx;
  410. font-size: 28upx;
  411. border-bottom: 1px solid #F8F8F8;
  412. .img-cont {
  413. width: 158rpx;
  414. height: 140upx;
  415. border-radius: 15upx;
  416. overflow: hidden;
  417. >image {
  418. width: 100%;
  419. height: 100%;
  420. }
  421. }
  422. >view {
  423. &:last-child {
  424. flex: 1;
  425. margin-left: 20upx;
  426. display: flex;
  427. flex-direction: column;
  428. justify-content: space-between;
  429. }
  430. }
  431. .bundle-num {
  432. display: flex;
  433. justify-content: space-between;
  434. }
  435. }
  436. .btn-cont {
  437. width: 180upx;
  438. font-size: 30upx;
  439. }
  440. .price-text{
  441. font-size: 20upx;
  442. margin-left: 10upx;
  443. }
  444. .price-num{
  445. font-size: 32upx;
  446. color: red;
  447. }
  448. .total-text{
  449. margin-right: 50upx;
  450. }
  451. .money-total{
  452. margin-right: 10upx;
  453. }
  454. }
  455. }
  456. // 物流弹窗
  457. .slot-content {
  458. padding: 40upx 60upx;
  459. font-size: 28upx;
  460. >view{
  461. line-height: 60upx;
  462. }
  463. }
  464. }
  465. </style>