order-service-details.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645
  1. <template>
  2. <view class="details clearfix" :style="{ paddingBottom: isIphoneX ? 130 + 68 + 'rpx' : '130rpx' }">
  3. <cu-custom :navbar-data="nvabarData"></cu-custom>
  4. <view class="container-details" :style="{ paddingTop: CustomBar + 'px' }" v-show="isRequest">
  5. <!-- 订单信息 -->
  6. <view class="information-content">
  7. <view class="info-item"
  8. ><view class="item-view"
  9. ><text class="label">供应商:{{ orderInfo.shopName ? orderInfo.shopName : '' }}</text></view
  10. ></view
  11. >
  12. <view class="info-item"
  13. ><view class="item-view"
  14. ><text class="label">订单号:{{ orderInfo.shopOrderNo }}</text></view
  15. ></view
  16. >
  17. <view class="info-item"
  18. ><view class="item-view"
  19. ><text class="label">下单时间:{{ orderInfo.orderTime }}</text></view
  20. ></view
  21. >
  22. <view class="info-item">
  23. <view class="item-view"
  24. ><text class="label"
  25. >收款状态:<text :style="{ color: setStatusText(orderInfo.receiptStatus) }">{{
  26. setStatusTextHtml(orderInfo.receiptStatus)
  27. }}</text></text
  28. ></view
  29. >
  30. <view class="item-view"
  31. ><text class="label"
  32. >结算状态:<text :style="{ color: setStatusText(orderInfo.payStatus) }">{{
  33. setStatusTextHtml1(orderInfo.payStatus)
  34. }}</text></text
  35. ></view
  36. >
  37. </view>
  38. <view class="info-item">
  39. <view class="item-view"
  40. ><text class="label"
  41. >发货状态:<text :style="{ color: setStatusText(orderInfo.sendOutStatus) }">{{
  42. setStatusTextHtml2(orderInfo.sendOutStatus)
  43. }}</text></text
  44. ></view
  45. >
  46. </view>
  47. </view>
  48. <!-- 地址信息 -->
  49. <view class="address-content">
  50. <view class="info-item"
  51. ><text class="label">收货人:{{ orderInfo.userInfo.receiver }}</text></view
  52. >
  53. <view class="info-item"
  54. ><text class="label">联系方式:{{ orderInfo.userInfo.mobile }}</text></view
  55. >
  56. <view class="info-item"
  57. ><text class="label"
  58. >收货地址:<text style="color: #666666;">{{ orderInfo.userInfo.address }}</text></text
  59. ></view
  60. >
  61. </view>
  62. <!-- 商品 -->
  63. <view class="goods-list">
  64. <view class="goods-item clearfix">
  65. <view class="productlist" v-for="(pros, idx) in orderInfo.orderProductList" :key="idx">
  66. <view class="goods-pros-t" @click="hanldOperationConfim(pros)">
  67. <view class="pros-left">
  68. <view class="pros-img"><image :src="pros.image" alt="" mode="aspectFill"/></view>
  69. </view>
  70. <view class="pros-product">
  71. <view class="producttitle">{{ pros.aliasName ? pros.aliasName : '' }}</view>
  72. <view class="productspec">规格:{{ pros.productUnit ? pros.productUnit : '' }}</view>
  73. <view class="productspec">商品编码:{{ pros.productNo ? pros.productNo : '' }}</view>
  74. <view class="product-view">
  75. <view class="view-num">数量:{{ pros.num + pros.presentNum }}</view>
  76. </view>
  77. <view class="product-view">
  78. <view class="view-num">已发货:{{ pros.shipmentsNum }}</view>
  79. <view class="view-num">未发货:{{ pros.notOutStore - pros.actualCancelNum }}</view>
  80. </view>
  81. <view class="product-view">
  82. <view class="view-num" v-if="pros.returnedNum > 0"
  83. >已退货:{{ pros.returnedNum }}</view
  84. >
  85. <view class="view-num" v-if="pros.actualCancelNum > 0"
  86. >已取消:{{ pros.actualCancelNum }}</view
  87. >
  88. </view>
  89. <text class="iconfont icon-genghuan"></text>
  90. </view>
  91. </view>
  92. </view>
  93. <view class="goods-pros-m" v-if="orderInfo.note != null || orderInfo.note != ''">
  94. <view class="m-text">留言:</view>
  95. <view class="m-input">
  96. <view class="text">{{ orderInfo.note ? orderInfo.note : '' }}</view>
  97. </view>
  98. </view>
  99. <view class="goods-pros-b">
  100. <view class="count">共{{ orderInfo.itemCount }}件商品</view>
  101. </view>
  102. </view>
  103. </view>
  104. <!-- 底部按钮 -->
  105. <view class="button-template" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
  106. <view class="button-content">
  107. <!-- #ifdef MP-WEIXIN -->
  108. <button class="btn btn-color" open-type="share" @click="onShareAppMessage">分享订单</button>
  109. <!-- #endif -->
  110. </view>
  111. </view>
  112. <!--底部选择模态层弹窗组件 -->
  113. <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
  114. <!-- 遮罩层 -->
  115. <view class="mask"></view>
  116. <view
  117. class="layer"
  118. @tap.stop="discard"
  119. :style="{ paddingBottom: isIphoneX ? '68rpx' : '36rpx', bottom: isIphoneX ? '-332rpx' : '-294rpx' }"
  120. >
  121. <view class="content">
  122. <view class="layer-title">商品显示名:</view>
  123. <view class="layer-name">{{ handleData.name }}</view>
  124. <view class="layer-text">
  125. <view class="layer-text-fl">
  126. 售价:<text style="color: #666;">¥{{ toFixedFn(handleData.discountPrice) }}</text>
  127. </view>
  128. <view class="layer-text-fr">
  129. <text style="color: #666;">共计{{ handleData.num + handleData.presentNum }}件商品</text>
  130. </view>
  131. </view>
  132. </view>
  133. </view>
  134. </view>
  135. </view>
  136. </view>
  137. </template>
  138. <script>
  139. import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
  140. import orderAddress from './components/details/orderAddress' //地址信息
  141. import goodsList from './components/details/goodsList' //商品列表
  142. import orderButton from './components/details/orderButton' //底部按钮
  143. export default {
  144. components: {
  145. headerBack,
  146. orderAddress,
  147. goodsList,
  148. orderButton
  149. },
  150. data() {
  151. return {
  152. nvabarData: {
  153. //顶部自定义导航
  154. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  155. showSearch: 0,
  156. title: '订单详情', // 导航栏 中间的标题
  157. haveBack: false,
  158. textLeft: this.$store.state.isIphone
  159. },
  160. isIphoneX: this.$store.state.isIphoneX,
  161. CustomBar: this.CustomBar, // 顶部导航栏高度
  162. specClass: '', //规格弹窗css类,控制开关动画
  163. handleData: {},
  164. state: 0,
  165. userID: '',
  166. shopOrderId: '',
  167. shareCode: '', //分享码
  168. orderInfo: {}, //订单信息
  169. payStatus: 0,
  170. btnStatus: 0, //按钮组件状态
  171. isRequest: false, //是否加载完成渲染子组件
  172. isOrderShare: false,
  173. addressData: {}, //地址信息初始化
  174. information: {} //订单信息初始化
  175. }
  176. },
  177. onLoad(option) {
  178. console.log(option)
  179. this.shopOrderId = option.shopOrderId
  180. this.initShopOrderDetails()
  181. },
  182. methods: {
  183. initShopOrderDetails() {
  184. //初始化页面数据@参数:订单ID
  185. this.ShopService.GetShopOrderDetails({ shopOrderId: this.shopOrderId })
  186. .then(res => {
  187. this.orderInfo = res.data.shopOrder
  188. this.isRequest = true
  189. })
  190. .catch(err => {
  191. this.$util.msg(err.msg, 2000)
  192. })
  193. },
  194. handButtonConfirm(data) {
  195. //监听点击时间的按钮类型并执行...
  196. this.handShowAlert(data)
  197. },
  198. setStatusTextHtml(status) {
  199. let TextHtml = ''
  200. switch (status) {
  201. case 1:
  202. TextHtml = '待付款'
  203. break
  204. case 2:
  205. TextHtml = '部分付款'
  206. break
  207. case 3:
  208. TextHtml = '已付款'
  209. break
  210. }
  211. return TextHtml
  212. },
  213. setStatusTextHtml1(status) {
  214. let TextHtml = ''
  215. switch (status) {
  216. case 1:
  217. TextHtml = '待结算'
  218. break
  219. case 2:
  220. TextHtml = '部分结算'
  221. break
  222. case 3:
  223. TextHtml = '已结算'
  224. break
  225. }
  226. return TextHtml
  227. },
  228. setStatusTextHtml2(status) {
  229. let TextHtml = ''
  230. switch (status) {
  231. case 1:
  232. TextHtml = '待发货'
  233. break
  234. case 2:
  235. TextHtml = '部分发货'
  236. break
  237. case 3:
  238. TextHtml = '已发货'
  239. break
  240. }
  241. return TextHtml
  242. },
  243. setStatusText(status) {
  244. let textColor = ''
  245. switch (status) {
  246. case 1:
  247. textColor = '#FF2A2A'
  248. break
  249. case 2:
  250. textColor = '#FF5B00'
  251. break
  252. case 3:
  253. textColor = '#38CB3D'
  254. break
  255. }
  256. return textColor
  257. },
  258. hanldOperationConfim(data) {
  259. //显示选择数量确认弹窗
  260. this.specClass = 'show'
  261. this.handleData = data
  262. },
  263. toFixedFn(text) {
  264. return Number(text).toFixed(2)
  265. },
  266. hideSpec() {
  267. //关闭选择数量确认弹窗
  268. this.specClass = 'hide'
  269. setTimeout(() => {
  270. this.specClass = 'none'
  271. }, 200)
  272. },
  273. onShareAppMessage(res) {
  274. //分享转发
  275. if (res.from === 'button') {
  276. // 来自页面内转发按钮
  277. }
  278. return {
  279. title: '您有订单待处理,请点击查看~',
  280. path: `/pages/supplier/login/share-info?authority=2&shopOrderId=${this.shopOrderId}`,
  281. imageUrl: 'https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
  282. }
  283. },
  284. discard() {
  285. //丢弃
  286. }
  287. },
  288. onPullDownRefresh() {
  289. //下拉刷新
  290. this.initShopOrderDetails()
  291. uni.stopPullDownRefresh()
  292. },
  293. onShow() {}
  294. }
  295. </script>
  296. <style lang="scss">
  297. page {
  298. height: 100%;
  299. background: #f7f7f7;
  300. }
  301. .details {
  302. padding-bottom: 130rpx;
  303. width: 100%;
  304. height: auto;
  305. }
  306. .container-details {
  307. background: #f7f7f7;
  308. }
  309. .information-content {
  310. width: 702rpx;
  311. height: auto;
  312. padding: 10rpx 24rpx;
  313. background: #ffffff;
  314. margin-bottom: 24rpx;
  315. .info-item {
  316. height: 58rpx;
  317. width: 100%;
  318. display: flex;
  319. .item-view {
  320. flex: 1;
  321. line-height: 58rpx;
  322. font-size: $font-size-28;
  323. color: #333333;
  324. }
  325. }
  326. }
  327. .address-content {
  328. width: 702rpx;
  329. height: auto;
  330. padding: 10rpx 24rpx;
  331. background: #ffffff;
  332. margin-bottom: 24rpx;
  333. .info-item {
  334. width: 100%;
  335. display: flex;
  336. line-height: 50rpx;
  337. font-size: $font-size-28;
  338. color: #333333;
  339. }
  340. }
  341. .goods-list {
  342. width: 100%;
  343. height: auto;
  344. background: #f7f7f7;
  345. .goods-item {
  346. width: 702rpx;
  347. padding: 24rpx;
  348. height: auto;
  349. background: #ffffff;
  350. margin-bottom: 24rpx;
  351. &:last-child {
  352. margin-bottom: 0;
  353. }
  354. }
  355. .productlist {
  356. width: 100%;
  357. height: auto;
  358. }
  359. .goods-pros-t {
  360. display: flex;
  361. width: 100%;
  362. height: auto;
  363. padding: 12rpx 0;
  364. .pros-left {
  365. width: 210rpx;
  366. height: 100%;
  367. margin: 0 26rpx 0 0;
  368. }
  369. .pros-img {
  370. width: 210rpx;
  371. height: 210rpx;
  372. border-radius: 10rpx;
  373. border: 1px solid #f3f3f3;
  374. image {
  375. width: 100%;
  376. height: 100%;
  377. border-radius: 10rpx;
  378. }
  379. }
  380. }
  381. .pros-product {
  382. width: 468rpx;
  383. height: 100%;
  384. line-height: 36rpx;
  385. font-size: $font-size-26;
  386. position: relative;
  387. .icon-genghuan {
  388. position: absolute;
  389. top: 50%;
  390. right: 0;
  391. font-size: $font-size-44;
  392. color: $color-system;
  393. }
  394. .product-view {
  395. width: 100%;
  396. height: auto;
  397. display: flex;
  398. .view-num {
  399. flex: 1;
  400. text-align: left;
  401. font-size: $font-size-26;
  402. color: #666666;
  403. line-height: 44rpx;
  404. }
  405. }
  406. .producttitle {
  407. width: 100%;
  408. display: inline-block;
  409. height: auto;
  410. text-overflow: ellipsis;
  411. display: -webkit-box;
  412. word-break: break-all;
  413. -webkit-box-orient: vertical;
  414. -webkit-line-clamp: 2;
  415. overflow: hidden;
  416. margin-bottom: 8rpx;
  417. }
  418. .productspec {
  419. height: 44rpx;
  420. color: #666666;
  421. line-height: 44rpx;
  422. }
  423. .productprice {
  424. height: 48rpx;
  425. position: absolute;
  426. width: 100%;
  427. bottom: 0;
  428. .price {
  429. line-height: 48rpx;
  430. font-size: $font-size-28;
  431. width: 48%;
  432. color: #ff2a2a;
  433. float: left;
  434. }
  435. .count {
  436. height: 100%;
  437. float: right;
  438. position: relative;
  439. .small {
  440. color: #666666;
  441. }
  442. }
  443. }
  444. }
  445. .goods-pros-m {
  446. width: 100%;
  447. height: auto;
  448. line-height: 76rpx;
  449. font-size: $font-size-26;
  450. color: $text-color;
  451. float: left;
  452. padding: 10rpx 0;
  453. border-top: 1px solid #f7f7f7;
  454. border-bottom: 1px solid #f7f7f7;
  455. .m-text {
  456. width: 62rpx;
  457. float: left;
  458. padding-right: 20rpx;
  459. font-weight: bold;
  460. }
  461. .m-input {
  462. display: -webkit-box;
  463. display: -webkit-flex;
  464. display: flex;
  465. -webkit-box-align: center;
  466. -webkit-align-items: center;
  467. align-items: center;
  468. position: relative;
  469. width: 620rpx;
  470. height: auto;
  471. padding: 20rpx 0 10rpx 0;
  472. background: #ffffff;
  473. .text {
  474. width: 100%;
  475. height: 100%;
  476. font-size: $font-size-26;
  477. line-height: 36rpx;
  478. color: #333333;
  479. }
  480. }
  481. }
  482. .goods-pros-b {
  483. width: 100%;
  484. height: 40rpx;
  485. margin-top: 12rpx;
  486. float: left;
  487. .count {
  488. float: right;
  489. font-size: $font-size-28;
  490. line-height: 40rpx;
  491. color: $text-color;
  492. display: flex;
  493. justify-content: flex-end;
  494. }
  495. }
  496. }
  497. .button-template {
  498. width: 100%;
  499. height: auto;
  500. position: fixed;
  501. bottom: 0;
  502. left: 0;
  503. background: #ffffff;
  504. -webkit-border-radius: 20rpx 20rpx 0 0;
  505. border-radius: 20rpx 20rpx 0 0;
  506. -webkit-box-shadow: 0px 3px 10px rgba(51, 51, 51, 0.5);
  507. box-shadow: 0px 3px 10px rgba(51, 51, 51, 0.5);
  508. .button-content {
  509. width: 702rpx;
  510. padding: 0 24rpx;
  511. height: auto;
  512. float: left;
  513. position: relative;
  514. .btn {
  515. width: 160rpx;
  516. height: 64rpx;
  517. margin: 22rpx;
  518. line-height: 64rpx;
  519. font-size: $font-size-26;
  520. color: #ffffff;
  521. text-align: center;
  522. border-radius: 10rpx;
  523. float: right;
  524. }
  525. .btn-color {
  526. background: $btn-confirm;
  527. margin: 22rpx 0 22rpx 22rpx;
  528. .tips {
  529. width: 160rpx;
  530. height: 34rpx;
  531. padding: 10rpx 10rpx;
  532. background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
  533. box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  534. border-radius: 8rpx;
  535. position: absolute;
  536. color: #ffffff;
  537. line-height: 34rpx;
  538. font-size: $font-size-24;
  539. text-align: left;
  540. right: 24rpx;
  541. top: -45rpx;
  542. &:before {
  543. content: '';
  544. width: 25rpx;
  545. height: 25rpx;
  546. background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
  547. position: absolute;
  548. bottom: -8rpx;
  549. right: 30rpx;
  550. z-index: -1;
  551. transform: rotate(45deg);
  552. }
  553. }
  554. }
  555. }
  556. }
  557. .popup {
  558. position: fixed;
  559. top: 0;
  560. width: 100%;
  561. height: 100%;
  562. z-index: 999;
  563. display: none;
  564. .mask {
  565. position: fixed;
  566. top: 0;
  567. width: 100%;
  568. height: 100%;
  569. z-index: 21;
  570. background-color: rgba(0, 0, 0, 0.6);
  571. }
  572. .layer {
  573. position: fixed;
  574. z-index: 22;
  575. bottom: -294rpx;
  576. width: 702rpx;
  577. padding: 24rpx 24rpx 36rpx 24rpx;
  578. height: 236rpx;
  579. border-radius: 20rpx 20rpx 0 0;
  580. background-color: #fff;
  581. display: flex;
  582. flex-wrap: wrap;
  583. align-content: space-between;
  584. .content {
  585. width: 100%;
  586. .layer-title {
  587. font-size: $font-size-28;
  588. color: $text-color;
  589. line-height: 58rpx;
  590. }
  591. .layer-name {
  592. width: 100%;
  593. display: inline-block;
  594. height: auto;
  595. text-overflow: ellipsis;
  596. display: -webkit-box;
  597. word-break: break-all;
  598. -webkit-box-orient: vertical;
  599. -webkit-line-clamp: 2;
  600. overflow: hidden;
  601. margin-bottom: 8rpx;
  602. font-size: $font-size-28;
  603. color: #666;
  604. }
  605. .layer-text {
  606. margin-top: 10rpx;
  607. font-size: $font-size-28;
  608. color: $text-color;
  609. line-height: 58rpx;
  610. .layer-text-fl {
  611. float: left;
  612. }
  613. .layer-text-fr {
  614. float: right;
  615. }
  616. }
  617. }
  618. }
  619. &.show {
  620. display: block;
  621. .mask {
  622. animation: showPopup 0.2s linear both;
  623. }
  624. .layer {
  625. animation: showLayer 0.2s linear both;
  626. }
  627. }
  628. &.hide {
  629. display: block;
  630. .mask {
  631. animation: hidePopup 0.2s linear both;
  632. }
  633. .layer {
  634. animation: hideLayer 0.2s linear both;
  635. }
  636. }
  637. &.none {
  638. display: none;
  639. }
  640. }
  641. </style>