order-sharedetails.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <template>
  2. <view class="container details clearfix">
  3. <!-- 地址选择 -->
  4. <cm-address-temp ref="orderAddress" v-if="isRequest" :addressData="addressData" />
  5. <!-- 商品 -->
  6. <cm-goods-temp ref="goods" v-if="isRequest" :shopOrderData="shopOrderData" @popupClick="hanldePopupFn" />
  7. <!-- 订单信息 -->
  8. <cm-order-temp ref="information" v-if="isRequest" :information="information" />
  9. <!-- 发票信息 -->
  10. <cm-invice-temp ref="invoice" v-if="isRequest" :orderInvoice="orderInvoice" />
  11. <!-- 支付记录 -->
  12. <cm-payment-temp ref="payment" v-if="isRequest" :discernReceiptList="discernReceiptList" :receiptAmount="receiptAmount" />
  13. <!-- 退款记录 -->
  14. <cm-refund-temp ref="refund" v-if="isRequest" :returnedPurchaseList="returnedPurchaseList" :returnedPurchaseFee="returnedPurchaseFee" />
  15. <!-- 底部button -->
  16. <view class="button-content" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  17. <view class="btn btn-query" v-if="btnState.isQuery" @click.stop="queryLogistics">查看物流</view>
  18. <view class="btn btn-cancel" v-if="btnState.isPay" @click.stop="btnConfirmPay">立即支付</view>
  19. </view>
  20. <!-- 促销活动弹窗 -->
  21. <cm-promote-popup :Promotion="handlerPros" :popupShow="popupShow" />
  22. </view>
  23. </template>
  24. <script>
  25. import cmAddressTemp from './components/details/cm-address-temp' //地址信息
  26. import cmGoodsTemp from './components/details/cm-goods-temp' //商品列表
  27. import cmOrderTemp from './components/details/cm-order-temp' //订单信息
  28. import cmInviceTemp from './components/details/cm-invice-temp' //发票信息
  29. import cmPaymentTemp from './components/details/cm-payment-temp' //支付记录
  30. import cmRefundTemp from './components/details/cm-refund-temp' //退款记录
  31. import cmVoucherTemp from './components/details/cm-voucher-temp' //支付凭证记录
  32. import cmPromotePopup from './components/details/cm-promote-popup' //促销活动弹窗
  33. export default {
  34. components: {
  35. cmAddressTemp,
  36. cmGoodsTemp,
  37. cmOrderTemp,
  38. cmInviceTemp,
  39. cmPaymentTemp,
  40. cmRefundTemp,
  41. cmVoucherTemp,
  42. cmPromotePopup
  43. },
  44. data() {
  45. return {
  46. status: '',
  47. userId: '',
  48. orderId: '',
  49. cellPhone: '', //客服电话
  50. btnStatus: 0, //按钮组件状态
  51. isRequest: false, //是否加载完成渲染子组件
  52. addressData: {}, //地址信息初始化
  53. information: {}, //订单信息初始化
  54. shopOrderData: {}, //商品信息初始化
  55. orderInvoice: {}, //发票信息初始化
  56. returnedPurchaseList: {}, //退款信息初始化
  57. discernReceiptList: {}, //支付信息初始化
  58. receiptAmount: 0, //支付金额
  59. returnedPurchaseFee: 0, //退款金额
  60. isIphoneX: this.$store.state.isIphoneX,
  61. popupShow: false,
  62. handlerPros: {},
  63. btnState: {
  64. isQuery: false,
  65. isPay:false
  66. },
  67. mapStateArr: [
  68. { label: 'isQuery', val: [4, 5, 12, 13, 33, 22, 23, 32, 77], status: true },
  69. { label: 'isPay', val: [11, 12, 13, 21, 22, 23, 111], status: true }
  70. ]
  71. }
  72. },
  73. onLoad(option) {
  74. this.orderId = option.orderId
  75. this.userId = option.userId
  76. this.initOrderDetaileData()
  77. },
  78. methods: {
  79. initOrderDetaileData() {
  80. //初始化页面数据@参数:订单ID
  81. this.OrderService.QueryOrderDetails({ orderId: this.orderId, userId: this.userId })
  82. .then(response => {
  83. let data = response.data
  84. this.status = data.order.status
  85. this.addressData = data.userInfo
  86. this.information = data.order
  87. this.shopOrderData = data.shopOrderList
  88. this.orderInvoice = data.orderInvoice
  89. this.returnedPurchaseList = data.returnedPurchaseList
  90. this.discernReceiptList = data.discernReceiptList
  91. this.receiptAmount = data.order.receiptAmount
  92. this.returnedPurchaseFee = data.order.returnedPurchaseFee
  93. this.isRequest = true
  94. this.mapStateArr.forEach(el => {
  95. el.val.forEach(value => {
  96. if (this.status === value) {
  97. this.btnState[el.label] = el.status
  98. }
  99. })
  100. })
  101. })
  102. .catch(error => {
  103. this.$util.msg(error.msg, 2000)
  104. })
  105. },
  106. hanldePopupFn(data) {
  107. //监听活动内容
  108. this.popupShow = true
  109. this.handlerPros = data
  110. },
  111. queryLogistics() {
  112. //跳转查询物流页面
  113. this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + this.orderId)
  114. },
  115. btnConfirmPay() {
  116. // 立即支付点击事件
  117. this.getOrderPaymentValidation(this.orderId)
  118. },
  119. getOrderPaymentValidation(orderId) {
  120. //监听根据付款状态做操作
  121. this.OrderService.OrderPaymentValidation({ orderId: orderId })
  122. .then(response => {
  123. if (response.data.code == -1) {
  124. this.$util.modal('', '订单已申请全部退款,无需再付款!', '确定', '', false, () => {})
  125. } else {
  126. if (response.data.onlinePayFlag === 1) {
  127. this.$api.navigateTo(`/pages/user/order/order-payunder?orderId=${orderId}`)
  128. } else {
  129. this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${orderId}`,)
  130. }
  131. }
  132. })
  133. .catch(error => {
  134. this.$util.msg(error.msg, 2000)
  135. })
  136. }
  137. },
  138. onShow() {}
  139. }
  140. </script>
  141. <style lang="scss">
  142. page {
  143. height: auto;
  144. background: #f7f7f7;
  145. }
  146. .details {
  147. padding-bottom: 180rpx;
  148. }
  149. .btn-hover {
  150. background: #ffffff;
  151. }
  152. .animation {
  153. /* transition: transform 0.3s ease;*/
  154. transition-property: transform;
  155. transition-duration: 0.3s;
  156. transition-timing-function: ease;
  157. }
  158. .invoice-balance {
  159. width: 702rpx;
  160. height: auto;
  161. padding: 0 24rpx;
  162. background: #ffffff;
  163. float: left;
  164. margin-top: 24rpx;
  165. margin-bottom: 24rpx;
  166. .balabce-t {
  167. width: 100%;
  168. height: 86rpx;
  169. line-height: 86rpx;
  170. font-size: $font-size-28;
  171. color: $text-color;
  172. float: left;
  173. .balabce-t-le {
  174. float: left;
  175. font-weight: bold;
  176. }
  177. .balabce-t-ri {
  178. float: right;
  179. display: flex;
  180. align-items: center;
  181. .money {
  182. display: flex;
  183. float: left;
  184. }
  185. .checkbox-box {
  186. display: flex;
  187. width: 60rpx;
  188. float: left;
  189. height: 100%;
  190. font-size: $font-size-24;
  191. .checkbox {
  192. width: 40rpx;
  193. text-align: right;
  194. box-sizing: border-box;
  195. text-align: center;
  196. text-decoration: none;
  197. border-radius: 0;
  198. -webkit-tap-highlight-color: transparent;
  199. overflow: hidden;
  200. }
  201. }
  202. }
  203. }
  204. .balabce-b {
  205. width: 100%;
  206. float: left;
  207. overflow: hidden;
  208. .balabce-b-text {
  209. width: 100%;
  210. line-height: 58rpx;
  211. font-size: $font-size-24;
  212. color: #ff2a2a;
  213. text-align: right;
  214. float: right;
  215. }
  216. &.balabce-b--hide {
  217. padding: 0 0;
  218. height: 0px;
  219. line-height: 0px;
  220. }
  221. }
  222. }
  223. .button-content {
  224. width: 702rpx;
  225. padding: 0 24rpx;
  226. height: auto;
  227. background: #ffffff;
  228. position: fixed;
  229. bottom: 0;
  230. left: 0;
  231. .btn {
  232. width: 160rpx;
  233. height: 64rpx;
  234. margin: 22rpx;
  235. line-height: 64rpx;
  236. font-size: $font-size-26;
  237. color: #ffffff;
  238. text-align: center;
  239. float: right;
  240. border-radius: 32rpx;
  241. }
  242. .btn-query {
  243. background: linear-gradient(135deg, rgba(255, 212, 129, 1) 0%, rgba(198, 129, 0, 1) 100%);
  244. }
  245. .btn-cancel {
  246. background: #ffffff;
  247. color: #666666;
  248. float: left;
  249. // margin: 22rpx 0;
  250. margin-right: 15rpx;
  251. border: 2rpx solid #999999;
  252. }
  253. }
  254. </style>