orderDetail.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  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 v-if="orderInfo.payType" 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 v-if="orderInfo.orderCoupons && orderInfo.orderCoupons.length" title="优惠券" :arrow="false">
  35. {{orderInfo.orderCoupons[0].couponTitle}}
  36. </u-cell-item>
  37. <u-cell-item title="实付金额" :arrow="false">
  38. <text class="order-price">¥{{orderInfo.payStatus=='paid' ? orderInfo.paymentAmount : 0}}</text>
  39. </u-cell-item>
  40. </u-cell-group>
  41. <view class="order-photo">
  42. <view v-if="orderInfo.beginImage">
  43. <view>洗车前</view>
  44. <u-image @click="showImage(orderInfo.beginImage)" width="100%" height="400rpx" mode="aspectFit" :src="orderInfo.beginImage"></u-image>
  45. </view>
  46. <view v-if="orderInfo.endImage">
  47. <view>洗车后</view>
  48. <u-image @click="showImage(orderInfo.endImage)" width="100%" height="400rpx" mode="aspectFit" :src="orderInfo.endImage"></u-image>
  49. </view>
  50. </view>
  51. </view>
  52. <view v-if="orderInfo.orderStatus=='UN_PAY'" class="footer">
  53. <u-button @click="cancleOrder" type="error" plain>取消订单</u-button>
  54. </view>
  55. </view>
  56. </template>
  57. <script>
  58. import {orderDetail, cancleOrder} from '@/api/order.js'
  59. import {getLookUpDatas} from '@/api/data.js'
  60. export default{
  61. data() {
  62. return {
  63. orderInfo: null,
  64. src: '',
  65. orderStatusList: []
  66. }
  67. },
  68. onLoad(options) {
  69. if (options.id) {
  70. console.log(options.id)
  71. this.getOrderDetail(options.id)
  72. this.orderStatusList = this.$store.state.vuex_payStatus
  73. }
  74. },
  75. methods:{
  76. getOptionName (list,val) {
  77. if(val){
  78. let p = list.find((item) => {
  79. return item.code == val
  80. })
  81. return p ? p.dispName : '-'
  82. }
  83. return '-'
  84. },
  85. // 获取订单详情
  86. getOrderDetail (id) {
  87. let payTypeList = this.$store.state.vuex_payType
  88. orderDetail({id:id}).then(res =>{
  89. if (res.status == 200) {
  90. this.orderInfo = res.data
  91. this.orderInfo.payType = this.orderInfo.payType ? this.getOptionName(payTypeList,this.orderInfo.payType) : ''
  92. } else {
  93. }
  94. })
  95. },
  96. // 取消订单
  97. cancleOrder (){
  98. cancleOrder({id:this.orderInfo.id}).then(res=>{
  99. if (res.status==200) {
  100. this.toashMsg(res.message)
  101. setTimeout(()=>{
  102. uni.navigateBack()
  103. },500)
  104. }
  105. })
  106. },
  107. // 图片预览
  108. showImage (url) {
  109. uni.previewImage({
  110. urls: [url],
  111. longPressActions: {
  112. itemList: ['发送给朋友', '保存图片', '收藏'],
  113. success: function(data) {
  114. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  115. },
  116. fail: function(err) {
  117. console.log(err.errMsg);
  118. }
  119. }
  120. });
  121. }
  122. },
  123. }
  124. </script>
  125. <style lang="scss">
  126. page {
  127. height: 100%;
  128. }
  129. .order-pages{
  130. width: 100%;
  131. height: 100%;
  132. display: flex;
  133. flex-direction: column;
  134. .order-info{
  135. width: 100%;
  136. flex: 1;
  137. overflow-y: scroll;
  138. .u-cell{
  139. padding:10rpx 32rpx;
  140. }
  141. .order-photo{
  142. padding:0 30rpx;
  143. >view{
  144. text-align: center;
  145. padding: 20rpx;
  146. }
  147. }
  148. .FINISHED{
  149. color: #00aa00;
  150. }
  151. .UN_PAY{
  152. color: #ff0000;
  153. }
  154. .CANCELED{
  155. color: #7e7b88;
  156. }
  157. .PAID{
  158. color: #00aaff;
  159. }
  160. .REFUNDING{
  161. color: #00557f;
  162. }
  163. .REFUNDED{
  164. color: #005500;
  165. }
  166. .order-price{
  167. font-size: 36rpx;
  168. color: red;
  169. }
  170. }
  171. .footer{
  172. padding: 20rpx;
  173. }
  174. }
  175. </style>