orderDetail.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <view class="order-pages">
  3. <view class="order-info">
  4. <u-cell-group>
  5. <u-cell-item title="订单状态" :arrow="false">
  6. <view slot="right-icon">
  7. <text :class="orderInfo.orderStatus">{{getOptionName(orderStatusList,orderInfo?orderInfo.orderStatus:'')}}</text>
  8. </view>
  9. </u-cell-item>
  10. <u-cell-item title="订单编号" :arrow="false" >
  11. {{orderInfo.orderNo}}
  12. </u-cell-item>
  13. <u-cell-item title="创建时间" :arrow="false" >
  14. {{orderInfo.orderTime}}
  15. </u-cell-item>
  16. <u-cell-item title="服务网点" :arrow="false">
  17. {{orderInfo.storeName}}
  18. </u-cell-item>
  19. <u-cell-item title="服务项目" :arrow="false">
  20. {{orderInfo.itemName}}
  21. </u-cell-item>
  22. <u-cell-item title="手机号" :arrow="false">
  23. {{orderInfo.customerMobile}}
  24. </u-cell-item>
  25. <u-cell-item title="支付方式" :arrow="false">
  26. {{orderInfo.payType}}
  27. </u-cell-item>
  28. <u-cell-item title="应付金额" :arrow="false">
  29. ¥{{orderInfo.payableAmount}}
  30. </u-cell-item>
  31. <u-cell-item title="优惠价" :arrow="false">
  32. {{orderInfo.couponAmount?orderInfo.couponAmount:0}}
  33. </u-cell-item>
  34. <u-cell-item title="实付金额" :arrow="false">
  35. <text class="order-price">¥{{orderInfo.payStatus=='paid' ? orderInfo.paymentAmount : 0}}</text>
  36. </u-cell-item>
  37. </u-cell-group>
  38. <view class="order-photo">
  39. <view v-if="orderInfo.beginImage">
  40. <view>洗车前</view>
  41. <u-image width="100%" height="400rpx" :src="orderInfo.beginImage"></u-image>
  42. </view>
  43. <view v-if="orderInfo.endImage">
  44. <view>洗车后</view>
  45. <u-image width="100%" height="400rpx" :src="orderInfo.endImage"></u-image>
  46. </view>
  47. </view>
  48. </view>
  49. <view v-if="orderInfo.orderStatus=='UN_PAY'" class="footer">
  50. <u-button @click="cancleOrder" type="error" plain>取消订单</u-button>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. import {orderDetail, cancleOrder} from '@/api/order.js'
  56. import {getLookUpDatas} from '@/api/data.js'
  57. export default{
  58. data() {
  59. return {
  60. orderInfo: null,
  61. src: '',
  62. orderStatusList: []
  63. }
  64. },
  65. onLoad(options) {
  66. if (options.id) {
  67. console.log(options.id)
  68. this.getOrderDetail(options.id)
  69. this.orderStatusList = this.$store.state.vuex_payStatus
  70. }
  71. },
  72. methods:{
  73. getOptionName (list,val) {
  74. if(val){
  75. let p = list.find((item) => {
  76. return item.code == val
  77. })
  78. return p ? p.dispName : '-'
  79. }
  80. return '-'
  81. },
  82. // 获取订单详情
  83. getOrderDetail (id) {
  84. let payTypeList = this.$store.state.vuex_payType
  85. orderDetail({id:id}).then(res =>{
  86. if (res.status == 200) {
  87. this.orderInfo = res.data
  88. this.orderInfo.payType = this.orderInfo.payType ? this.getOptionName(payTypeList,this.orderInfo.payType) : ''
  89. } else {
  90. }
  91. })
  92. },
  93. // 取消订单
  94. cancleOrder (){
  95. cancleOrder({id:this.orderInfo.id}).then(res=>{
  96. if (res.status==200) {
  97. this.toashMsg(res.message)
  98. setTimeout(()=>{
  99. uni.navigateBack()
  100. },500)
  101. }
  102. })
  103. }
  104. },
  105. }
  106. </script>
  107. <style lang="scss">
  108. page {
  109. height: 100%;
  110. }
  111. .order-pages{
  112. width: 100%;
  113. height: 100%;
  114. display: flex;
  115. flex-direction: column;
  116. .order-info{
  117. width: 100%;
  118. flex: 1;
  119. overflow-y: scroll;
  120. .u-cell{
  121. padding:10rpx 32rpx;
  122. }
  123. .order-photo{
  124. padding:0 30rpx;
  125. >view{
  126. text-align: center;
  127. padding: 20rpx;
  128. }
  129. }
  130. .FINISHED{
  131. color: #00aa00;
  132. }
  133. .UN_PAY{
  134. color: #ff0000;
  135. }
  136. .CANCELED{
  137. color: #7e7b88;
  138. }
  139. .PAID{
  140. color: #00aaff;
  141. }
  142. .REFUNDING{
  143. color: #00557f;
  144. }
  145. .REFUNDED{
  146. color: #005500;
  147. }
  148. .order-price{
  149. font-size: 36rpx;
  150. color: red;
  151. }
  152. }
  153. .footer{
  154. padding: 20rpx;
  155. }
  156. }
  157. </style>