myWholesale.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754
  1. <template>
  2. <view class="content">
  3. <view class="navbar flex">
  4. <view class="nav-item" v-for="(navitem,index) in navList" :class="{'action': index == tabCurrentIndex}"
  5. @click="navClick(index)">
  6. {{navitem.tit}}
  7. </view>
  8. </view>
  9. <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="getMyPackage('tab')"
  10. :style="{'height': height}" disable-touch>
  11. <swiper-item class="tab-content" :style="{'height': height}">
  12. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="getMyPackage">
  13. <empty v-if="navList[0].loaded === true && navList[0].orderList.length === 0"></empty>
  14. <view @click="goToOrderDetail(item)" v-for="(item, index) in navList[0].orderList" :key="index"
  15. class="order-item">
  16. <view class="i-top b-b">
  17. <text class="time">订单编号:{{ item.order_id }}</text>
  18. <!-- :style="{ color: item.stateTipColor }" -->
  19. <text class="state">{{ item.status | statusTitle }}</text>
  20. <text v-if="item.status === 4" class="del-btn iconfont icondelete"
  21. @click="deleteOrder(index)"></text>
  22. </view>
  23. <view class="goods-box-single">
  24. <image class="goods-img" :src="item.whole.image" mode="scaleToFill"></image>
  25. <view class="right">
  26. <view class="flex-start" style="justify-content: space-between;">
  27. <text class="title clamp">{{ item.whole.title }}</text>
  28. <text class="price">{{ moneyNum(item.whole.price) }}</text>
  29. </view>
  30. <view class="row flex">
  31. <!-- <text class="row_title">{{ goodsItem.productInfo.attrInfo ? goodsItem.productInfo.attrInfo.suk : '' }}</text> -->
  32. <text class="attr-box"> x {{ item.whole.num }}</text>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="action-box b-t" v-if="item.status != 5">
  37. <button class="action-btn" @click.stop="lookMore(item)">查看详情</button>
  38. <button v-if="item.status == 0" class="action-btn recom"
  39. @click.stop="payNew(item)">立即支付</button>
  40. <button v-if="item.status == 2" class="action-btn recom"
  41. @click.stop="stopItem(item)">提货</button>
  42. </view>
  43. </view>
  44. <uni-load-more :status="navList[0].loadingType"></uni-load-more>
  45. </scroll-view>
  46. </swiper-item>
  47. <swiper-item class="tab-content" :style="{'height': height}">
  48. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="getMyPackage">
  49. <empty v-if="navList[1].loaded === true && navList[1].orderList.length === 0"></empty>
  50. <view class="out-wrapper" v-for="item in navList[1].orderList" :class="{'outt': item.status == 2}">
  51. <view class="out-top flex">
  52. <view class="buy-info flex">
  53. <view class="fsz">买家:</view>
  54. <image :src="item.user.avatar" mode="" class="user-logo fsz"></image>
  55. <view class="user-name fsz clamp">{{item.user.real_name}}</view>
  56. <view class="user-phone fsz" @click="call(item.user.phone)">
  57. {{item.user.phone}}
  58. </view>
  59. </view>
  60. <view class="buy-status">{{item.status | statusTitle}}</view>
  61. </view>
  62. <view class="item-info">
  63. <view class="info-data">
  64. <view class="info-tit">编号:</view>
  65. <view class="info-val">{{item.order_id}}</view>
  66. </view>
  67. <view class="info-data">
  68. <view class="info-tit">价值:</view>
  69. <view class="info-val">{{item.price}}</view>
  70. </view>
  71. </view>
  72. <view class="upimg">
  73. <view class="up-tit">
  74. 打款凭证:
  75. </view>
  76. <view class="img-wrap" v-if="item.pay_evaluation" @click="lookimg(item.pay_evaluation)">
  77. <image :src="item.pay_evaluation" mode=""></image>
  78. </view>
  79. <view class="" style="color: #0F253A;font-weight: bold;font-size: 26rpx;" v-else>
  80. 买家未上传支付凭证
  81. </view>
  82. </view>
  83. <template v-if="item.status == 1">
  84. <view class="mc-btn pass" @click="passPackage(item)">
  85. 通过
  86. </view>
  87. <!-- <view class="mc-btn fail" @click="openrefuse(item)">
  88. 拒绝
  89. </view> -->
  90. </template>
  91. </view>
  92. <uni-load-more :status="navList[1].loadingType"></uni-load-more>
  93. </scroll-view>
  94. </swiper-item>
  95. </swiper>
  96. <uni-popup ref="lookimg" type="center">
  97. <view class="pop-wrap" style="position: relative;">
  98. <movable-area class="popup-box">
  99. <movable-view class="popup-item" :scale="true" direction="all">
  100. <image :src="chooseImg" mode="aspectFit"></image>
  101. </movable-view>
  102. </movable-area>
  103. <image src="../../static/icon/close.png" mode="" class="close" style="width: 80rpx;height: 80rpx;"
  104. @click="closePup"></image>
  105. </view>
  106. </uni-popup>
  107. </view>
  108. </template>
  109. <script>
  110. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  111. import empty from '@/components/empty';
  112. import {
  113. getMyPackage,
  114. getMySellout,
  115. packageAudit,
  116. delivery
  117. } from '@/api/whole.js'
  118. export default {
  119. components: {
  120. uniLoadMore,
  121. empty
  122. },
  123. data() {
  124. return {
  125. chooseImg: '', //查看大图的图
  126. chooseItem: {},
  127. height: '',
  128. tabCurrentIndex: 0,
  129. navList: [{
  130. tit: '当天预约',
  131. orderList: [],
  132. page: 1,
  133. limit: 10,
  134. loadingType: 'more',
  135. loaded: false,
  136. day: 'today',
  137. status: -4
  138. },
  139. {
  140. tit: '转售中',
  141. orderList: [],
  142. page: 1,
  143. limit: 10,
  144. loadingType: 'more',
  145. loaded: false,
  146. day: 'today',
  147. status: 0
  148. },
  149. ],
  150. }
  151. },
  152. onReady(res) {
  153. // 初始化获取页面宽度
  154. var _this = this;
  155. uni.getSystemInfo({
  156. success: resu => {
  157. const query = uni.createSelectorQuery();
  158. query.select('.swiper-box').boundingClientRect();
  159. query.exec(function(res) {
  160. _this.height = resu.windowHeight - res[0].top + 'px';
  161. console.log('打印页面的剩余高度', _this.height);
  162. });
  163. },
  164. fail: res => {}
  165. });
  166. },
  167. onLoad() {
  168. this.getMyPackage()
  169. },
  170. filters: {
  171. statusTitle(val) {
  172. let str = ''
  173. switch (val) {
  174. case -2:
  175. str = '支付超时'
  176. break;
  177. case -1:
  178. str = '拒绝'
  179. break;
  180. case 0:
  181. str = '待支付'
  182. break;
  183. case 1:
  184. str = '待审核'
  185. break;
  186. case 2:
  187. str = '已通过'
  188. break;
  189. case 3:
  190. str = '重新发放'
  191. break;
  192. case 4:
  193. str = '完成'
  194. break;
  195. case 5:
  196. str = '已提货'
  197. break
  198. default:
  199. str = ''
  200. break
  201. }
  202. return str
  203. }
  204. },
  205. methods: {
  206. // 查看大图
  207. lookimg(src) {
  208. console.log(src, 'chooseImg++++++')
  209. this.chooseImg = src
  210. this.$refs.lookimg.open()
  211. },
  212. // 查看详情
  213. lookMore(item) {
  214. this.chooseItem = item
  215. uni.navigateTo({
  216. url: '/pages/user/buySellDetail?type=look'
  217. })
  218. },
  219. // 立即支付
  220. payNew(item) {
  221. this.chooseItem = item
  222. uni.navigateTo({
  223. url: '/pages/user/buySellDetail?type=up'
  224. })
  225. },
  226. // 转换金额为数字
  227. moneyNum(value) {
  228. return +value;
  229. },
  230. navClick(index) {
  231. this.tabCurrentIndex = index
  232. // this.getMyPackage('tab')
  233. },
  234. getMyPackage(tab) {
  235. let obj = this
  236. let index = obj.tabCurrentIndex
  237. let navItem = obj.navList[index]
  238. if (navItem.loadingType == 'noMore' || navItem.loadingType == 'loading') {
  239. return
  240. }
  241. if (tab == 'tab' && navItem.loaded) {
  242. return
  243. }
  244. navItem.loadingType == 'loading'
  245. if (index == 0) {
  246. getMyPackage({
  247. page: navItem.page,
  248. limit: navItem.limit,
  249. data: navItem.day,
  250. status: navItem.status
  251. }).then(({
  252. data
  253. }) => {
  254. navItem.orderList = navItem.orderList.concat(data.data)
  255. navItem.page++
  256. if (navItem.limit == data.data.length) {
  257. navItem.loadingType = 'more'
  258. } else {
  259. navItem.loadingType = 'noMore'
  260. }
  261. navItem.loaded = true
  262. })
  263. }
  264. if (index == 1) {
  265. getMySellout({
  266. page: navItem.page,
  267. limit: navItem.limit,
  268. }).then(({
  269. data
  270. }) => {
  271. navItem.orderList = navItem.orderList.concat(data.data)
  272. navItem.page++
  273. if (navItem.limit == data.data.length) {
  274. navItem.loadingType = 'more'
  275. } else {
  276. navItem.loadingType = 'noMore'
  277. }
  278. navItem.loaded = true
  279. })
  280. }
  281. },
  282. //添加或修改成功之后回调
  283. refreshList() {
  284. // 重新加载地址
  285. let navItem = this.navList[this.tabCurrentIndex]
  286. navItem.orderList = []
  287. navItem.page = 1
  288. navItem.loadingType = 'more'
  289. navItem.loaded = false
  290. this.getMyPackage()
  291. },
  292. // 同意
  293. passPackage(item) {
  294. let index = this.navList[1].orderList.indexOf(item)
  295. console.log(index, 'index')
  296. packageAudit({
  297. re: '',
  298. id: item.id,
  299. status: 2
  300. }).then(res => {
  301. uni.showToast({
  302. title: '审核通过',
  303. duration: 2000
  304. });
  305. console.log(res)
  306. this.navList[1].orderList[index].status = 2
  307. // this.reload()
  308. })
  309. },
  310. closePup() {
  311. this.chooseImg = ''
  312. this.$refs.lookimg.close()
  313. },
  314. // 提货
  315. stopItem(item) {
  316. let obj = this
  317. let index = obj.navList[0].orderList.indexOf(item)
  318. console.log(item)
  319. delivery({},item.id).then(res => {
  320. console.log(res)
  321. uni.showToast({
  322. title: '提货完成',
  323. duration: 2000
  324. });
  325. obj.navList[0].orderList[index].status = 5
  326. })
  327. }
  328. }
  329. }
  330. </script>
  331. <style lang="scss" scoped>
  332. .navbar {
  333. background-color: #fff;
  334. height: 40px;
  335. .nav-item {
  336. width: 50%;
  337. text-align: center;
  338. font-size: 30rpx;
  339. font-family: PingFang SC;
  340. font-weight: 500;
  341. color: #333333;
  342. }
  343. .action {
  344. font-weight: bold;
  345. position: relative;
  346. color: #FF4C4C;
  347. &::after {
  348. content: '';
  349. width: 84rpx;
  350. height: 4rpx;
  351. background: #FF4C4C;
  352. border-radius: 2px;
  353. position: absolute;
  354. bottom: -20rpx;
  355. left: 0;
  356. right: 0;
  357. margin: auto;
  358. }
  359. }
  360. }
  361. .swiper-box {
  362. padding-top: 20rpx;
  363. // height: calc(100% - 40px);
  364. // background-color: red;
  365. }
  366. .list-scroll-content {
  367. height: 100%;
  368. }
  369. .order-item {
  370. display: flex;
  371. flex-direction: column;
  372. padding-left: 30rpx;
  373. background: #fff;
  374. margin-bottom: 16rpx;
  375. .i-top {
  376. display: flex;
  377. align-items: center;
  378. height: 80rpx;
  379. padding-right: 30rpx;
  380. font-size: $font-base;
  381. color: $font-color-dark;
  382. position: relative;
  383. .time {
  384. flex: 1;
  385. }
  386. .state {
  387. color: $base-color;
  388. }
  389. .del-btn {
  390. padding: 10rpx 0 10rpx 36rpx;
  391. font-size: $font-lg;
  392. color: $font-color-light;
  393. position: relative;
  394. &:after {
  395. content: '';
  396. width: 0;
  397. height: 30rpx;
  398. border-left: 1px solid $border-color-dark;
  399. position: absolute;
  400. left: 20rpx;
  401. top: 50%;
  402. transform: translateY(-50%);
  403. }
  404. }
  405. }
  406. /* 多条商品 */
  407. .goods-box {
  408. height: 160rpx;
  409. padding: 20rpx 0;
  410. white-space: nowrap;
  411. .goods-item {
  412. width: 120rpx;
  413. height: 120rpx;
  414. display: inline-block;
  415. margin-right: 24rpx;
  416. }
  417. .goods-img {
  418. display: block;
  419. width: 100%;
  420. height: 100%;
  421. }
  422. }
  423. /* 单条商品 */
  424. .goods-box-single {
  425. display: flex;
  426. padding: 20rpx 0;
  427. .goods-img {
  428. display: block;
  429. width: 120rpx;
  430. height: 120rpx;
  431. }
  432. .right {
  433. flex: 1;
  434. display: flex;
  435. flex-direction: column;
  436. padding: 0 30rpx 0 24rpx;
  437. overflow: hidden;
  438. .row {
  439. margin-top: 10rpx;
  440. }
  441. .row_title {
  442. padding: 5rpx 10rpx;
  443. background-color: #dddddd;
  444. border-radius: 10rpx;
  445. font-size: 22rpx;
  446. color: #ffffff;
  447. }
  448. .title {
  449. font-size: $font-base + 2rpx;
  450. color: $font-color-dark;
  451. line-height: 1;
  452. width: 80%;
  453. }
  454. .attr-box {
  455. display: flex;
  456. justify-content: flex-end;
  457. font-size: $font-sm + 2rpx;
  458. color: $font-color-light;
  459. }
  460. .price {
  461. display: inline;
  462. font-size: $font-base + 2rpx;
  463. color: $font-color-dark;
  464. &:before {
  465. content: '¥';
  466. font-size: $font-sm;
  467. }
  468. }
  469. }
  470. }
  471. .price-box {
  472. display: flex;
  473. justify-content: flex-end;
  474. align-items: baseline;
  475. padding: 20rpx 30rpx;
  476. font-size: $font-sm + 2rpx;
  477. color: $font-color-light;
  478. .num {
  479. margin: 0 8rpx;
  480. color: $font-color-dark;
  481. }
  482. .price {
  483. font-size: $font-lg;
  484. color: $font-color-dark;
  485. &:before {
  486. content: '¥';
  487. font-size: $font-sm;
  488. margin: 0 2rpx 0 8rpx;
  489. }
  490. }
  491. }
  492. .action-box {
  493. display: flex;
  494. justify-content: flex-end;
  495. align-items: center;
  496. height: 100rpx;
  497. position: relative;
  498. padding-right: 30rpx;
  499. }
  500. .action-btn {
  501. width: 160rpx;
  502. height: 60rpx;
  503. margin: 0;
  504. margin-left: 24rpx;
  505. padding: 0;
  506. text-align: center;
  507. line-height: 60rpx;
  508. font-size: $font-sm + 2rpx;
  509. color: $font-color-dark;
  510. background: #fff;
  511. border-radius: 100px;
  512. &:after {
  513. border-radius: 100px;
  514. }
  515. &.recom {
  516. color: $base-color;
  517. &:after {
  518. border-color: $base-color;
  519. }
  520. }
  521. &.evaluate {
  522. color: $color-yellow;
  523. &:after {
  524. border-color: $color-yellow;
  525. }
  526. }
  527. }
  528. }
  529. .out-wrapper {
  530. width: 690rpx;
  531. // height: 392rpx;
  532. background: #FFFFFF;
  533. box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
  534. border-radius: 20rpx;
  535. margin: 0 auto 20rpx;
  536. padding: 30rpx;
  537. position: relative;
  538. .outt {
  539. height: 392rpx;
  540. }
  541. .out-top {
  542. line-height: 46rpx;
  543. justify-content: space-between;
  544. .buy-info {
  545. width: 450rpx;
  546. font-size: 32rpx;
  547. font-family: PingFang SC;
  548. font-weight: bold;
  549. color: #0F253A;
  550. justify-content: flex-start;
  551. .fsz {
  552. flex-shrink: 0;
  553. }
  554. .user-name {
  555. max-width: 180rpx;
  556. }
  557. .user-phone {
  558. padding-left: 10rpx;
  559. font-size: 24rpx;
  560. font-family: PingFang SC;
  561. font-weight: 500;
  562. color: #999999;
  563. }
  564. .user-logo {
  565. display: block;
  566. width: 46rpx;
  567. height: 46rpx;
  568. border-radius: 50%;
  569. // background-color: red;
  570. // padding-right: 10rpx;
  571. margin-right: 10rpx;
  572. }
  573. }
  574. .buy-status {
  575. font-size: 26rpx;
  576. font-family: PingFang SC;
  577. font-weight: 500;
  578. color: #6D7C88;
  579. }
  580. }
  581. .item-info {
  582. width: 100%;
  583. margin-top: 28rpx;
  584. line-height: 50rpx;
  585. font-size: 26rpx;
  586. font-family: PingFang SC;
  587. display: flex;
  588. flex-wrap: wrap;
  589. .info-data {
  590. width: 100%;
  591. display: flex;
  592. .info-tit {
  593. font-weight: 500;
  594. color: #6D7C88;
  595. }
  596. .info-val {
  597. color: #0F253A;
  598. font-weight: bold;
  599. }
  600. }
  601. }
  602. .upimg {
  603. padding-top: 10rpx;
  604. display: flex;
  605. .up-tit {
  606. display: inline-block;
  607. font-size: 26rpx;
  608. font-family: PingFang SC;
  609. font-weight: 500;
  610. color: #6D7C88;
  611. }
  612. .img-wrap {
  613. width: 153rpx;
  614. height: 152rpx;
  615. border-radius: 20rpx;
  616. image {
  617. border-radius: 20rpx;
  618. width: 153rpx;
  619. height: 152rpx;
  620. background-color: #ccc;
  621. }
  622. }
  623. }
  624. .mc-btn {
  625. width: 144rpx;
  626. line-height: 50rpx;
  627. border-radius: 25px;
  628. background: #FFFFFF;
  629. font-size: 26rpx;
  630. font-family: PingFang SC;
  631. font-weight: 500;
  632. text-align: center;
  633. position: absolute;
  634. bottom: 47rpx;
  635. }
  636. .pass {
  637. color: #FF4C4C;
  638. border: 2px solid #FF4C4C;
  639. right: 36rpx;
  640. }
  641. .fail {
  642. color: #999999;
  643. border: 2px solid #EBEBEB;
  644. right: 36rpx;
  645. }
  646. }
  647. .pop-wrap {
  648. width: 522rpx;
  649. height: 800rpx;
  650. // background-color: red;
  651. }
  652. .popup-box {
  653. width: 522rpx;
  654. height: 800rpx;
  655. border-radius: 20rpx;
  656. position: relative;
  657. overflow: hidden;
  658. background-color: #fff;
  659. .popup-item {
  660. width: 100%;
  661. height: 100%;
  662. image {
  663. width: 100%;
  664. // height: 100%;
  665. }
  666. }
  667. }
  668. .close {
  669. display: block;
  670. width: 40rpx;
  671. height: 40rpx;
  672. border: 50%;
  673. position: absolute;
  674. // background-color: red;
  675. bottom: -100rpx;
  676. left: 0;
  677. right: 0;
  678. margin: 0 auto;
  679. }
  680. </style>