OrderDetailModal.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <template>
  2. <div>
  3. <a-modal
  4. title="查看详情"
  5. :footer="null"
  6. :width="1100"
  7. :destroyOnClose="true"
  8. @cancel="isShow = false"
  9. v-model="isShow">
  10. <v-select ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear v-show="false"></v-select>
  11. <div class="orderDetail-content">
  12. <a-form>
  13. <a-row :gutter="24">
  14. <a-col :span="8">
  15. <a-form-item label="下单时间" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  16. <span>{{ orderDetailData.orderTime }}</span>
  17. </a-form-item>
  18. </a-col>
  19. <a-col :span="8">
  20. <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  21. <span>{{ orderDetailData.orderNo }}</span>
  22. </a-form-item>
  23. </a-col>
  24. <a-col :span="8">
  25. <a-form-item label="门店名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  26. <span>{{ orderDetailData.storeName }}</span>
  27. </a-form-item>
  28. </a-col>
  29. </a-row>
  30. <a-row :gutter="24">
  31. <a-col :span="8">
  32. <a-form-item label="服务名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  33. <span>{{ orderDetailData.itemName }}</span>
  34. </a-form-item>
  35. </a-col>
  36. <a-col :span="8">
  37. <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  38. <span>{{ orderDetailData.customerMobile }}</span>
  39. </a-form-item>
  40. </a-col>
  41. <a-col :span="8">
  42. <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  43. <span>{{ orderDetailData.orderStatus }}</span>
  44. </a-form-item>
  45. </a-col>
  46. </a-row>
  47. <a-row :gutter="24">
  48. <a-col :span="8">
  49. <a-form-item label="应付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  50. <span>{{ orderDetailData.payableAmount }} 元</span>
  51. </a-form-item>
  52. </a-col>
  53. <a-col :span="8">
  54. <a-form-item label="实付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  55. <span v-if=" orderDetailData.payStatus == 'PAID' ">{{ orderDetailData.paymentAmount }} 元</span>
  56. <span v-if=" orderDetailData.payStatus != 'PAID' ">{{ 0 }} 元</span>
  57. </a-form-item>
  58. </a-col>
  59. <a-col :span="8">
  60. <a-form-item label="优惠(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  61. <span>{{ orderDetailData.orderCoupons ? orderDetailData.couponAmount : 0 }} 元</span>
  62. </a-form-item>
  63. </a-col>
  64. </a-row>
  65. <a-row :gutter="24">
  66. <a-col :span="8">
  67. <a-form-item label="使用优惠券" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  68. <span>{{ orderDetailData.orderCoupons ? orderDetailData.orderCoupons[0].couponTitle : '--' }}</span>
  69. </a-form-item>
  70. </a-col>
  71. <a-col :span="8">
  72. <a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  73. <div style="display: flex;">
  74. <div class="imgBox">
  75. <div>
  76. <img v-if="orderDetailData.beginImage" class="imgCar" :src="orderDetailData.beginImage" alt="" @click="isShowBeginImageModal=true">
  77. <div v-if="!orderDetailData.beginImage" class="imgCar">--</div>
  78. </div>
  79. <div>洗车前</div>
  80. </div>
  81. <div class="imgBox">
  82. <div>
  83. <img v-if="orderDetailData.endImage" class="imgCar" :src="orderDetailData.endImage" alt="" @click="isShowEndImageModal=true">
  84. <div v-if="!orderDetailData.endImage" class="imgCar">--</div>
  85. </div>
  86. <div>洗车后</div>
  87. </div>
  88. </div>
  89. </a-form-item>
  90. </a-col>
  91. </a-row>
  92. <a-row style="text-align: center;margin-top: 100px;">
  93. <a-col>
  94. <a-form-item>
  95. <a-button type="default" @click="isShow=false">返回列表</a-button>
  96. </a-form-item>
  97. </a-col>
  98. </a-row>
  99. </a-form>
  100. </div>
  101. </a-modal>
  102. <!-- 查看洗车前后照片对比 -->
  103. <a-modal
  104. class="imgModal"
  105. title="洗车前照片"
  106. :width="600"
  107. :footer="null"
  108. :destroyOnClose="true"
  109. @cancel="isShowBeginImageModal=false"
  110. v-model="isShowBeginImageModal">
  111. <img :src="orderDetailData.beginImage" class="pic" />
  112. </a-modal>
  113. <a-modal
  114. class="imgModal"
  115. title="洗车后照片"
  116. :width="600"
  117. :footer="null"
  118. :destroyOnClose="true"
  119. @cancel="isShowEndImageModal=false"
  120. v-model="isShowEndImageModal">
  121. <img :src="orderDetailData.endImage" class="pic" />
  122. </a-modal>
  123. </div>
  124. </template>
  125. <script>
  126. import {
  127. Upload,
  128. VSelect
  129. } from '@/components'
  130. import {
  131. orderDetail
  132. } from '../../api/order.js'
  133. export default {
  134. components: {
  135. Upload,
  136. VSelect
  137. },
  138. name: 'OrderDetailModal',
  139. props: {
  140. openModal: { // 弹框是否展示
  141. type: Boolean,
  142. default: false
  143. },
  144. nowId: {
  145. type: Number,
  146. default: null
  147. }
  148. },
  149. data () {
  150. return {
  151. orderDetailData: [],
  152. isShow: this.openModal,
  153. isShowBeginImageModal: false, // 洗车前图片弹窗
  154. isShowEndImageModal: false // 洗车后图片弹窗
  155. }
  156. },
  157. methods: {},
  158. watch: {
  159. // 父页面传过来的弹框状态以及当前行id
  160. openModal (newValue, oldValue) {
  161. this.isShow = newValue
  162. },
  163. nowId (newValue, oldValue) {
  164. if (newValue) {
  165. orderDetail({
  166. id: newValue
  167. }).then(res => {
  168. // console.log(res, '------------')
  169. this.orderDetailData = res.data
  170. if (res.status == 200) {
  171. setTimeout(() => {
  172. res.data.orderStatus = this.$refs.orderStatus.getNameByCode(res.data.orderStatus)
  173. }, 500)
  174. }
  175. })
  176. }
  177. },
  178. // 重定义的弹框状态
  179. isShow (val) {
  180. if (!val) {
  181. this.$emit('close')
  182. }
  183. }
  184. }
  185. }
  186. </script>
  187. <style lang="less">
  188. .orderDetail-content .ant-form-inline .ant-form-item {
  189. margin-bottom: 20px;
  190. }
  191. .imgBox {
  192. text-align: center;
  193. margin-left: 10px;
  194. .imgCar {
  195. height: 50px;
  196. width: auto;
  197. }
  198. }
  199. .pic {
  200. transform: scale(1);
  201. display: block;
  202. max-width: 100%;
  203. height: 100%;
  204. margin: 0 auto;
  205. }
  206. </style>