detail.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677
  1. <!-- 订单详情 -->
  2. <template>
  3. <s-layout title="订单详情" class="index-wrap" navbar="inner">
  4. <!-- 订单状态 TODO -->
  5. <view
  6. class="state-box ss-flex-col ss-col-center ss-row-right"
  7. :style="[
  8. {
  9. marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
  10. paddingTop: Number(statusBarHeight + 88) + 'rpx',
  11. },
  12. ]"
  13. >
  14. <view class="ss-flex ss-m-t-32 ss-m-b-20">
  15. <image
  16. v-if="
  17. state.orderInfo.status_code == 'unpaid' ||
  18. state.orderInfo.status === 10 || // 待发货
  19. state.orderInfo.status_code == 'nocomment'
  20. "
  21. class="state-img"
  22. :src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
  23. >
  24. </image>
  25. <image
  26. v-if="
  27. state.orderInfo.status_code == 'completed' ||
  28. state.orderInfo.status_code == 'refund_agree'
  29. "
  30. class="state-img"
  31. :src="sheep.$url.static('/static/img/shop/order/order_success.png')"
  32. >
  33. </image>
  34. <image
  35. v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
  36. class="state-img"
  37. :src="sheep.$url.static('/static/img/shop/order/order_close.png')"
  38. >
  39. </image>
  40. <image
  41. v-if="state.orderInfo.status_code == 'noget'"
  42. class="state-img"
  43. :src="sheep.$url.static('/static/img/shop/order/order_express.png')"
  44. >
  45. </image>
  46. <view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
  47. </view>
  48. <view class="ss-font-26 ss-m-x-20 ss-m-b-70">
  49. {{ formatOrderStatusDescription(state.orderInfo) }}
  50. </view>
  51. </view>
  52. <!-- 收货地址 -->
  53. <view class="order-address-box" v-if="state.orderInfo.receiverAreaId > 0">
  54. <view class="ss-flex ss-col-center">
  55. <text class="address-username">
  56. {{ state.orderInfo.receiverName }}
  57. </text>
  58. <text class="address-phone">{{ state.orderInfo.receiverMobile }}</text>
  59. </view>
  60. <view class="address-detail">
  61. {{ state.orderInfo.receiverAreaName }} {{ state.orderInfo.receiverDetailAddress }}
  62. </view>
  63. </view>
  64. <view
  65. class="detail-goods"
  66. :style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]"
  67. >
  68. <!-- 订单信 -->
  69. <view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
  70. <view class="order-card">
  71. <s-goods-item
  72. @tap="onGoodsDetail(item.spuId)"
  73. :img="item.picUrl"
  74. :title="item.spuName"
  75. :skuText="item.properties.map((property) => property.valueName).join(' ')"
  76. :price="item.price"
  77. :num="item.count"
  78. >
  79. <template #tool>
  80. <view class="ss-flex">
  81. <button
  82. class="ss-reset-button apply-btn"
  83. v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
  84. @tap.stop="
  85. sheep.$router.go('/pages/order/aftersale/apply', {
  86. orderId: state.orderInfo.id,
  87. itemId: item.id,
  88. })
  89. "
  90. >
  91. 申请售后
  92. </button>
  93. <button
  94. class="ss-reset-button apply-btn"
  95. v-if="item.afterSaleStatus === 10"
  96. @tap.stop="
  97. sheep.$router.go('/pages/order/aftersale/detail', {
  98. id: item.afterSaleId,
  99. })
  100. "
  101. >
  102. 退款中
  103. </button>
  104. <button
  105. class="ss-reset-button apply-btn"
  106. v-if="item.afterSaleStatus === 20"
  107. @tap.stop="
  108. sheep.$router.go('/pages/order/aftersale/detail', {
  109. id: item.afterSaleId,
  110. })
  111. "
  112. >
  113. 退款成功
  114. </button>
  115. </view>
  116. </template>
  117. <template #priceSuffix>
  118. <button class="ss-reset-button tag-btn" v-if="item.status_text">
  119. {{ item.status_text }}
  120. </button>
  121. </template>
  122. </s-goods-item>
  123. </view>
  124. </view>
  125. </view>
  126. <!-- 自提核销 -->
  127. <PickUpVerify
  128. :order-info="state.orderInfo"
  129. :systemStore="systemStore"
  130. ref="pickUpVerifyRef"
  131. ></PickUpVerify>
  132. <!-- 订单信息 -->
  133. <view class="notice-box">
  134. <view class="notice-box__content">
  135. <view class="notice-item--center">
  136. <view class="ss-flex ss-flex-1">
  137. <text class="title">订单编号:</text>
  138. <text class="detail">{{ state.orderInfo.no }}</text>
  139. </view>
  140. <button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
  141. </view>
  142. <view class="notice-item">
  143. <text class="title">下单时间:</text>
  144. <text class="detail">
  145. {{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
  146. </text>
  147. </view>
  148. <view class="notice-item" v-if="state.orderInfo.payTime">
  149. <text class="title">支付时间:</text>
  150. <text class="detail">
  151. {{ sheep.$helper.timeFormat(state.orderInfo.payTime, 'yyyy-mm-dd hh:MM:ss') }}
  152. </text>
  153. </view>
  154. <view class="notice-item">
  155. <text class="title">支付方式:</text>
  156. <text class="detail">{{ state.orderInfo.payChannelName || '-' }}</text>
  157. </view>
  158. <view class="notice-item">
  159. <text class="title">订单备注:</text>
  160. <text class="detail" style="color: #666;">{{ state.orderInfo.userRemark || '' }}</text>
  161. </view>
  162. </view>
  163. </view>
  164. <!-- 价格信息 -->
  165. <view class="order-price-box">
  166. <view class="notice-item ss-flex ss-row-between">
  167. <text class="title">商品总额</text>
  168. <view class="ss-flex">
  169. <text class="detail">¥{{ fen2yuan(state.orderInfo.totalPrice) }}</text>
  170. </view>
  171. </view>
  172. <view class="notice-item ss-flex ss-row-between">
  173. <text class="title">运费</text>
  174. <text class="detail">¥{{ fen2yuan(state.orderInfo.deliveryPrice) }}</text>
  175. </view>
  176. <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.couponPrice > 0">
  177. <text class="title">优惠劵金额</text>
  178. <text class="detail">-¥{{ fen2yuan(state.orderInfo.couponPrice) }}</text>
  179. </view>
  180. <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.pointPrice > 0">
  181. <text class="title">积分抵扣</text>
  182. <text class="detail">-¥{{ fen2yuan(state.orderInfo.pointPrice) }}</text>
  183. </view>
  184. <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.discountPrice > 0">
  185. <text class="title">活动优惠</text>
  186. <text class="detail">¥{{ fen2yuan(state.orderInfo.discountPrice) }}</text>
  187. </view>
  188. <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.vipPrice > 0">
  189. <text class="title">会员优惠</text>
  190. <text class="detail">-¥{{ fen2yuan(state.orderInfo.vipPrice) }}</text>
  191. </view>
  192. <view class="notice-item all-rpice-item ss-flex ss-m-t-20">
  193. <text class="title">{{ state.orderInfo.payStatus ? '已付款' : '需付款' }}</text>
  194. <text class="detail all-price">¥{{ fen2yuan(state.orderInfo.payPrice) }}</text>
  195. </view>
  196. <view
  197. class="notice-item all-rpice-item ss-flex ss-m-t-20"
  198. v-if="state.orderInfo.refundPrice > 0"
  199. >
  200. <text class="title">已退款</text>
  201. <text class="detail all-price">¥{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
  202. </view>
  203. </view>
  204. <!-- 底部按钮 -->
  205. <!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
  206. <su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
  207. <view class="footer-box ss-flex ss-col-center ss-row-right">
  208. <button
  209. class="ss-reset-button cancel-btn"
  210. v-if="state.orderInfo.buttons?.includes('cancel')"
  211. @tap="onCancel(state.orderInfo.id)"
  212. >
  213. 取消订单
  214. </button>
  215. <button
  216. class="ss-reset-button pay-btn ui-BG-Main-Gradient"
  217. v-if="state.orderInfo.buttons?.includes('pay')"
  218. @tap="onPay(state.orderInfo.payOrderId)"
  219. >
  220. 继续支付
  221. </button>
  222. <button
  223. class="ss-reset-button cancel-btn"
  224. v-if="state.orderInfo.buttons?.includes('combination')"
  225. @tap="
  226. sheep.$router.go('/pages/activity/groupon/detail', {
  227. id: state.orderInfo.combinationRecordId,
  228. })
  229. "
  230. >
  231. 拼团详情
  232. </button>
  233. <button
  234. class="ss-reset-button cancel-btn"
  235. v-if="state.orderInfo.buttons?.includes('express')"
  236. @tap="onExpress(state.orderInfo.id)"
  237. >
  238. 查看物流
  239. </button>
  240. <button
  241. class="ss-reset-button cancel-btn"
  242. v-if="state.orderInfo.buttons?.includes('confirm')"
  243. @tap="onConfirm(state.orderInfo.id)"
  244. >
  245. 确认收货
  246. </button>
  247. <button
  248. class="ss-reset-button cancel-btn"
  249. v-if="state.orderInfo.buttons?.includes('comment')"
  250. @tap="onComment(state.orderInfo.id)"
  251. >
  252. 评价
  253. </button>
  254. </view>
  255. </su-fixed>
  256. </s-layout>
  257. </template>
  258. <script setup>
  259. import sheep from '@/sheep';
  260. import { onLoad, onShow } from '@dcloudio/uni-app';
  261. import { reactive, ref } from 'vue';
  262. import { isEmpty } from 'lodash-es';
  263. import {
  264. fen2yuan,
  265. formatOrderStatus,
  266. formatOrderStatusDescription,
  267. handleOrderButtons,
  268. } from '@/sheep/hooks/useGoods';
  269. import OrderApi from '@/sheep/api/trade/order';
  270. import DeliveryApi from '@/sheep/api/trade/delivery';
  271. import PickUpVerify from '@/pages/order/pickUpVerify.vue';
  272. const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
  273. const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
  274. const state = reactive({
  275. orderInfo: {},
  276. merchantTradeNo: '', // 商户订单号
  277. comeinType: '', // 进入订单详情的来源类型
  278. });
  279. // ========== 门店自提(核销) ==========
  280. const systemStore = ref({}); // 门店信息
  281. // 复制
  282. const onCopy = () => {
  283. sheep.$helper.copyText(state.orderInfo.no);
  284. };
  285. // 去支付
  286. function onPay(payOrderId) {
  287. sheep.$router.go('/pages/pay/index', {
  288. id: payOrderId,
  289. });
  290. }
  291. // 查看商品
  292. function onGoodsDetail(id) {
  293. sheep.$router.go('/pages/goods/index', {
  294. id,
  295. });
  296. }
  297. // 取消订单
  298. async function onCancel(orderId) {
  299. uni.showModal({
  300. title: '提示',
  301. content: '确定要取消订单吗?',
  302. success: async function (res) {
  303. if (!res.confirm) {
  304. return;
  305. }
  306. const { code } = await OrderApi.cancelOrder(orderId);
  307. if (code === 0) {
  308. await getOrderDetail(orderId);
  309. }
  310. },
  311. });
  312. }
  313. // 查看物流
  314. async function onExpress(id) {
  315. sheep.$router.go('/pages/order/express/log', {
  316. id,
  317. });
  318. }
  319. // 确认收货
  320. async function onConfirm(orderId, ignore = false) {
  321. // 需开启确认收货组件
  322. // todo: 芋艿:待接入微信
  323. // 1.怎么检测是否开启了发货组件功能?如果没有开启的话就不能在这里return出去
  324. // 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
  325. let isOpenBusinessView = true;
  326. if (
  327. sheep.$platform.name === 'WechatMiniProgram' &&
  328. !isEmpty(state.orderInfo.wechat_extra_data) &&
  329. isOpenBusinessView &&
  330. !ignore
  331. ) {
  332. mpConfirm(orderId);
  333. return;
  334. }
  335. uni.showModal({
  336. title: '提示',
  337. content: '确认收货吗?',
  338. success: async function (res) {
  339. if (!res.confirm) {
  340. return;
  341. }
  342. // 正常的确认收货流程
  343. const { code } = await OrderApi.receiveOrder(orderId);
  344. if (code === 0) {
  345. await getOrderDetail(orderId);
  346. }
  347. },
  348. });
  349. }
  350. // #ifdef MP-WEIXIN
  351. // 小程序确认收货组件
  352. function mpConfirm(orderId) {
  353. if (!wx.openBusinessView) {
  354. sheep.$helper.toast(`请升级微信版本`);
  355. return;
  356. }
  357. wx.openBusinessView({
  358. businessType: 'weappOrderConfirm',
  359. extraData: {
  360. merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
  361. transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
  362. },
  363. success(response) {
  364. console.log('success:', response);
  365. if (response.errMsg === 'openBusinessView:ok') {
  366. if (response.extraData.status === 'success') {
  367. onConfirm(orderId, true);
  368. }
  369. }
  370. },
  371. fail(error) {
  372. console.log('error:', error);
  373. },
  374. complete(result) {
  375. console.log('result:', result);
  376. },
  377. });
  378. }
  379. // #endif
  380. // 评价
  381. function onComment(id) {
  382. sheep.$router.go('/pages/goods/comment/add', {
  383. id,
  384. });
  385. }
  386. const pickUpVerifyRef = ref();
  387. async function getOrderDetail(id) {
  388. // 对详情数据进行适配
  389. let res;
  390. if (state.comeinType === 'wechat') {
  391. // TODO 芋艿:微信场景下
  392. res = await OrderApi.getOrderDetail(id, {
  393. merchant_trade_no: state.merchantTradeNo,
  394. });
  395. } else {
  396. res = await OrderApi.getOrderDetail(id);
  397. }
  398. if (res.code === 0) {
  399. state.orderInfo = res.data;
  400. handleOrderButtons(state.orderInfo);
  401. // 配送方式:门店自提
  402. if (res.data.pickUpStoreId) {
  403. const { data } = await DeliveryApi.getDeliveryPickUpStore(res.data.pickUpStoreId);
  404. systemStore.value = data || {};
  405. }
  406. if (state.orderInfo.deliveryType === 2 && state.orderInfo.payStatus) {
  407. pickUpVerifyRef.value && pickUpVerifyRef.value.markCode(res.data.pickUpVerifyCode);
  408. }
  409. } else {
  410. sheep.$router.back();
  411. }
  412. }
  413. onShow(async () => {
  414. //onShow中获取订单列表,保证跳转后页面为最新状态
  415. await getOrderDetail(state.orderInfo.id);
  416. })
  417. onLoad(async (options) => {
  418. let id = 0;
  419. if (options.id) {
  420. id = options.id;
  421. }
  422. // TODO 芋艿:下面两个变量,后续接入
  423. state.comeinType = options.comein_type;
  424. if (state.comeinType === 'wechat') {
  425. state.merchantTradeNo = options.merchant_trade_no;
  426. }
  427. state.orderInfo.id = id
  428. });
  429. </script>
  430. <style lang="scss" scoped>
  431. .score-img {
  432. width: 36rpx;
  433. height: 36rpx;
  434. margin: 0 4rpx;
  435. }
  436. .apply-btn {
  437. width: 140rpx;
  438. height: 50rpx;
  439. border-radius: 25rpx;
  440. font-size: 24rpx;
  441. border: 2rpx solid #dcdcdc;
  442. line-height: normal;
  443. margin-left: 16rpx;
  444. }
  445. .state-box {
  446. color: rgba(#fff, 0.9);
  447. width: 100%;
  448. background: v-bind(headerBg) no-repeat,
  449. linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
  450. background-size: 750rpx 100%;
  451. box-sizing: border-box;
  452. .state-img {
  453. width: 60rpx;
  454. height: 60rpx;
  455. margin-right: 20rpx;
  456. }
  457. }
  458. .order-address-box {
  459. background-color: #fff;
  460. border-radius: 10rpx;
  461. margin: -50rpx 20rpx 16rpx 20rpx;
  462. padding: 44rpx 34rpx 42rpx 20rpx;
  463. font-size: 30rpx;
  464. box-sizing: border-box;
  465. font-weight: 500;
  466. color: rgba(51, 51, 51, 1);
  467. .address-username {
  468. margin-right: 20rpx;
  469. }
  470. .address-detail {
  471. font-size: 26rpx;
  472. font-weight: 500;
  473. color: rgba(153, 153, 153, 1);
  474. margin-top: 20rpx;
  475. }
  476. }
  477. .detail-goods {
  478. border-radius: 10rpx;
  479. margin: 0 20rpx 20rpx 20rpx;
  480. .order-list {
  481. margin-bottom: 20rpx;
  482. background-color: #fff;
  483. .order-card {
  484. padding: 20rpx 0;
  485. .order-sku {
  486. font-size: 24rpx;
  487. font-weight: 400;
  488. color: rgba(153, 153, 153, 1);
  489. width: 450rpx;
  490. margin-bottom: 20rpx;
  491. .order-num {
  492. margin-right: 10rpx;
  493. }
  494. }
  495. .tag-btn {
  496. margin-left: 16rpx;
  497. font-size: 24rpx;
  498. height: 36rpx;
  499. color: var(--ui-BG-Main);
  500. border: 2rpx solid var(--ui-BG-Main);
  501. border-radius: 14rpx;
  502. padding: 0 4rpx;
  503. }
  504. }
  505. }
  506. }
  507. // 订单信息。
  508. .notice-box {
  509. background: #fff;
  510. border-radius: 10rpx;
  511. margin: 0 20rpx 20rpx 20rpx;
  512. .notice-box__head {
  513. font-size: 30rpx;
  514. font-weight: 500;
  515. color: rgba(51, 51, 51, 1);
  516. line-height: 80rpx;
  517. border-bottom: 1rpx solid #dfdfdf;
  518. padding: 0 25rpx;
  519. }
  520. .notice-box__content {
  521. padding: 20rpx;
  522. .self-pickup-box {
  523. width: 100%;
  524. .self-pickup--img {
  525. width: 200rpx;
  526. height: 200rpx;
  527. margin: 40rpx 0;
  528. }
  529. }
  530. }
  531. .notice-item,
  532. .notice-item--center {
  533. display: flex;
  534. align-items: center;
  535. line-height: normal;
  536. margin-bottom: 24rpx;
  537. .title {
  538. font-size: 28rpx;
  539. color: #999;
  540. }
  541. .detail {
  542. font-size: 28rpx;
  543. color: #333;
  544. flex: 1;
  545. }
  546. }
  547. }
  548. .copy-btn {
  549. width: 100rpx;
  550. line-height: 50rpx;
  551. border-radius: 25rpx;
  552. padding: 0;
  553. background: rgba(238, 238, 238, 1);
  554. font-size: 22rpx;
  555. font-weight: 400;
  556. color: rgba(51, 51, 51, 1);
  557. }
  558. // 订单价格信息
  559. .order-price-box {
  560. background-color: #fff;
  561. border-radius: 10rpx;
  562. padding: 20rpx;
  563. margin: 0 20rpx 20rpx 20rpx;
  564. .notice-item {
  565. line-height: 70rpx;
  566. .title {
  567. font-size: 28rpx;
  568. color: #999;
  569. }
  570. .detail {
  571. font-size: 28rpx;
  572. color: #333;
  573. font-family: OPPOSANS;
  574. }
  575. }
  576. .all-rpice-item {
  577. justify-content: flex-end;
  578. align-items: center;
  579. .title {
  580. font-size: 26rpx;
  581. font-weight: 500;
  582. color: #333333;
  583. line-height: normal;
  584. }
  585. .all-price {
  586. font-size: 26rpx;
  587. font-family: OPPOSANS;
  588. line-height: normal;
  589. color: $red;
  590. }
  591. }
  592. }
  593. // 底部
  594. .footer-box {
  595. height: 100rpx;
  596. width: 100%;
  597. box-sizing: border-box;
  598. border-radius: 10rpx;
  599. padding-right: 20rpx;
  600. .cancel-btn {
  601. width: 160rpx;
  602. height: 60rpx;
  603. background: #eeeeee;
  604. border-radius: 30rpx;
  605. margin-right: 20rpx;
  606. font-size: 26rpx;
  607. font-weight: 400;
  608. color: #333333;
  609. }
  610. .pay-btn {
  611. width: 160rpx;
  612. height: 60rpx;
  613. font-size: 26rpx;
  614. border-radius: 30rpx;
  615. font-weight: 500;
  616. color: #fff;
  617. }
  618. }
  619. </style>