orderDetail.vue 4.5 KB

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