You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

order-details-new.vue 27KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735
  1. <!-- 新办订单-订单详情 -->
  2. <template>
  3. <view class="wrapper">
  4. <!-- 只有审核中、审核不通过和待发货订单有地址信息显示 -->
  5. <template v-if="state.orderInfo.orderStatus != OrderStatus.已取消">
  6. <view class="address-box as-gravity-center-start as-layout-horizontal"
  7. v-if="state.orderInfo.orderStep == OrderStatus.待审核 || state.orderInfo.orderStep == OrderStatus.审核不通过 || state.orderInfo.orderStep == OrderStatus.待发货">
  8. <view class="avatar as-gravity-center">
  9. {{state.orderInfo.orderInfoExt.consignee != null ? state.orderInfo.orderInfoExt.consignee.charAt(0) : ''}}
  10. </view>
  11. <view class="center" style="flex:1">
  12. <view class="as-layout-horizontal">
  13. <view class="name">
  14. {{state.orderInfo.orderInfoExt.consignee ?state.orderInfo.orderInfoExt.consignee: ''}}
  15. </view>
  16. <view class="phone">
  17. {{state.orderInfo.orderInfoExt.consigneeTel ?state.orderInfo.orderInfoExt.consigneeTel: ''}}
  18. </view>
  19. </view>
  20. <view class="addr">{{state.orderInfo.orderInfoExt.region ?state.orderInfo.orderInfoExt.region: ''}}
  21. {{state.orderInfo.orderInfoExt.address ?state.orderInfo.orderInfoExt.address: ''}}
  22. </view>
  23. </view>
  24. <image :src="`${$imgUrl}applyCard/edit.png`" mode="" class="edit"
  25. @click="gotoEditAddress(state.orderInfo)"></image>
  26. </view>
  27. </template>
  28. <view class="detail-box">
  29. <view class="detail-header">
  30. <image class="d-img" :src="`${$imgUrl}order/icon-star-green.png`"></image>
  31. <text class="detail-name">{{state.orderInfo.productName ?state.orderInfo.productName: ''}}</text>
  32. </view>
  33. <view class="detail-content">
  34. <view class="base-info-box">
  35. <!-- 基础信息 -->
  36. <view class="base-info">
  37. <view class="d-row">
  38. <text class="d-label">新办单号:</text>
  39. <text class="d-value">{{state.orderInfo.orderId}}</text>
  40. </view>
  41. <view class="d-row">
  42. <text class="d-label">业务类型:</text>
  43. <text class="d-value">{{getOrderTypeName(state.orderInfo.orderType)}}</text>
  44. </view>
  45. <view class="d-row">
  46. <text class="d-label">订单车牌:</text>
  47. <text class="d-value">{{state.orderInfo.vehiclePlate}}</text>
  48. </view>
  49. <view class="d-row">
  50. <text class="d-label">所属类型:</text>
  51. <!-- PERSONAL USER:个人 UNIT_USER:单位 -->
  52. <text class="d-value">{{state.orderInfo.userType === 'UNIT_USER' ? '单位' : '个人'}}</text>
  53. </view>
  54. <view class="d-row">
  55. <text class="d-label">车辆类型:</text>
  56. <text class="d-value">{{getCarTypeName(state.orderInfo.type)}}</text>
  57. </view>
  58. <view class="d-row">
  59. <text class="d-label">订单金额:</text>
  60. <text class="d-value text-orange">¥
  61. {{state.orderInfo.amount / 100 ?state.orderInfo.amount / 100: '0.00'}}</text>
  62. </view>
  63. <view class="d-row">
  64. <text class="d-label">订单状态:</text>
  65. <text
  66. class="d-value text-green">{{state.orderInfo.orderStatus == OrderStatus.已取消 ? '已取消' : $util.getOrderStatusName(state.orderInfo.orderStep)}}</text>
  67. </view>
  68. <view class="d-row">
  69. <text class="d-label">创建时间:</text>
  70. <text class="d-value">{{getOrderTime(state.orderInfo.insertTime)}}</text>
  71. </view>
  72. </view>
  73. <!-- 已取消订单信息 -->
  74. <view v-if="state.orderInfo.orderStatus == OrderStatus.已取消">
  75. <view class="d-row" v-if="state.orderInfo.orderStep > OrderStatus.已支付">
  76. <text class="d-label">付款时间:</text>
  77. <text
  78. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
  79. </view>
  80. <view class="d-row">
  81. <text class="d-label">取消时间:</text>
  82. <text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.cancelTime)}}</text>
  83. </view>
  84. <view class="d-row" v-if="state.orderInfo.staffName">
  85. <text class="d-label">业 务 员:</text>
  86. <text class="d-value">{{state.orderInfo.staffName}}</text>
  87. </view>
  88. <view class="d-row">
  89. <text class="d-label">取消原因:</text>
  90. <text
  91. class="d-value">{{state.orderInfo.orderInfoExt.cancelReason ?state.orderInfo.orderInfoExt.cancelReason: ''}}</text>
  92. </view>
  93. </view>
  94. <view v-else>
  95. <!-- 审核中/审核不通过订单信息 -->
  96. <view
  97. v-if="state.orderInfo.orderStep == OrderStatus.审核不通过 || state.orderInfo.orderStep == OrderStatus.待审核">
  98. <view class="d-row">
  99. <text class="d-label">付款时间:</text>
  100. <text
  101. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
  102. </view>
  103. <view class="d-row" v-if="state.orderInfo.orderStep == OrderStatus.审核不通过">
  104. <text class="d-label">不通过原因:</text>
  105. <text class="d-value">{{state.orderInfo.XXX ?state.orderInfo.XXX: ''}}</text>
  106. </view>
  107. </view>
  108. <!-- 待发货 -->
  109. <view v-if="state.orderInfo.orderStep == OrderStatus.待发货">
  110. <view class="d-row">
  111. <text class="d-label">付款时间:</text>
  112. <text
  113. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
  114. </view>
  115. <view class="d-row" v-if="state.orderInfo.staffName">
  116. <text class="d-label">业 务 员:</text>
  117. <text class="d-value">{{state.orderInfo.staffName}}</text>
  118. </view>
  119. </view>
  120. <!-- 待收货/待激活/已结束/换货/退货-->
  121. <view v-if="state.orderInfo.orderStep == OrderStatus.待收货 || state.orderInfo.orderStep == OrderStatus.待激活
  122. || state.orderInfo.orderStep == OrderStatus.已结束
  123. || state.orderInfo.orderStep == OrderStatus['已申请-换货']
  124. || state.orderInfo.orderStep == OrderStatus['已申请-退货']">
  125. <view class="d-row">
  126. <text class="d-label">付款时间:</text>
  127. <text
  128. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:'')}}</text>
  129. </view>
  130. <view class="d-row">
  131. <text class="d-label">发货时间:</text>
  132. <text
  133. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.deliveryTime:"")}}</text>
  134. </view>
  135. <view class="d-row" v-if="state.orderInfo.orderStep != OrderStatus.待收货">
  136. <text class="d-label">收货时间:</text>
  137. <text
  138. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.receivingTime:"")}}</text>
  139. </view>
  140. <view class="d-row">
  141. <text class="d-label">卡 号:</text>
  142. <text class="d-value">{{state.orderInfo.cardId ?state.orderInfo.cardId: ''}}</text>
  143. </view>
  144. <view class="d-row">
  145. <text class="d-label">卡 状 态:</text>
  146. <text class="d-value">{{getETCStatusName(state.orderInfo.cardStatus)}}</text>
  147. </view>
  148. <view class="d-row">
  149. <text class="d-label">OBU 号:</text>
  150. <text class="d-value">{{state.orderInfo.obuId ?state.orderInfo.obuId: ''}}</text>
  151. </view>
  152. <view class="d-row">
  153. <text class="d-label">OBU状态:</text>
  154. <text class="d-value">{{getOBUStatusName(state.orderInfo.obuStatus)}}</text>
  155. </view>
  156. <view class="d-row" v-if="state.orderInfo.staffName">
  157. <text class="d-label">业 务 员:</text>
  158. <text class="d-value">{{state.orderInfo.staffName}}</text>
  159. </view>
  160. <view class="d-row">
  161. <text class="d-label">快递单号:</text>
  162. <text
  163. class="d-value">{{state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: ''}}</text>
  164. </view>
  165. <view class="d-row">
  166. <text class="d-label">物流公司:</text>
  167. <text
  168. class="d-value">{{state.orderInfo.courierCompany ?state.orderInfo.courierCompany: ''}}</text>
  169. </view>
  170. </view>
  171. <!-- 订单已完成 -->
  172. <view v-if="state.orderInfo.orderStep == OrderStatus.已完成">
  173. <view class="d-row">
  174. <text class="d-label">付款时间:</text>
  175. <text
  176. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
  177. </view>
  178. <view class="d-row">
  179. <text class="d-label">发货时间:</text>
  180. <text
  181. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.deliveryTime:"")}}</text>
  182. </view>
  183. <view class="d-row">
  184. <text class="d-label">收货时间:</text>
  185. <text
  186. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.receivingTime:"")}}</text>
  187. </view>
  188. <view class="d-row">
  189. <text class="d-label">激活时间:</text>
  190. <text class="d-value">{{getOrderTime(state.orderInfo.cardEnableTime)}}</text>
  191. </view>
  192. <view class="d-row">
  193. <text class="d-label">卡 号:</text>
  194. <text class="d-value">{{state.orderInfo.cardId ?state.orderInfo.cardId: ''}}</text>
  195. </view>
  196. <view class="d-row">
  197. <text class="d-label">卡 状 态:</text>
  198. <text class="d-value">{{getETCStatusName(state.orderInfo.cardStatus)}}</text>
  199. </view>
  200. <view class="d-row">
  201. <text class="d-label">OBU 号:</text>
  202. <text class="d-value">{{state.orderInfo.obuId ?state.orderInfo.obuId: ''}}</text>
  203. </view>
  204. <view class="d-row">
  205. <text class="d-label">OBU状态:</text>
  206. <text class="d-value">{{getOBUStatusName(state.orderInfo.obuStatus)}}</text>
  207. </view>
  208. <view class="d-row" v-if="state.orderInfo.staffName">
  209. <text class="d-label">业 务 员:</text>
  210. <text class="d-value">{{state.orderInfo.staffName}}</text>
  211. </view>
  212. <view class="d-row">
  213. <text class="d-label">快递单号:</text>
  214. <text
  215. class="d-value">{{state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: ''}}</text>
  216. </view>
  217. <view class="d-row">
  218. <text class="d-label">物流公司:</text>
  219. <text
  220. class="d-value">{{state.orderInfo.courierCompany ?state.orderInfo.courierCompany: ''}}</text>
  221. </view>
  222. </view>
  223. </view>
  224. <!-- 售后 -->
  225. <view class="post-sale" v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货']
  226. || state.orderInfo.orderStep == OrderStatus['已申请-退货'] || isHaveAfterSaleInfo()">
  227. <!-- 售后退货-->
  228. <view
  229. v-if="state.orderInfo.orderStep == OrderStatus['已申请-退货'] || !isBlank(state.orderInfo.orderInfoExt && state.orderInfo.orderInfoExt.returnMode)">
  230. <view class="d-row" v-if="state.orderInfo.XXX">
  231. <text class="d-label">售后单号:</text>
  232. <text class="d-value">{{state.orderInfo.XXX ?state.orderInfo.XXX: ''}}</text>
  233. </view>
  234. <view class="d-row">
  235. <text class="d-label">业务类型:</text>
  236. <text class="d-value">退货</text>
  237. </view>
  238. <view class="d-row">
  239. <text class="d-label">创建时间:</text>
  240. <text class="d-value">{{getOrderTime(state.orderInfo.XXXX)}}</text>
  241. </view>
  242. <view class="d-row">
  243. <text class="d-label">退货方式:</text>
  244. <text
  245. class="d-value">{{state.orderInfo.orderInfoExt.returnMode === 'ON_LINE' ? '线上' : '线下'}}</text>
  246. </view>
  247. <template v-if="state.orderInfo.orderInfoExt.returnMode === 'ON_LINE'">
  248. <view class="d-row">
  249. <text class="d-label">物流公司:</text>
  250. <text
  251. class="d-value">{{state.orderInfo.orderInfoExt.returnLogisticsCompany ?state.orderInfo.orderInfoExt.returnLogisticsCompany: ''}}</text>
  252. </view>
  253. <view class="d-row">
  254. <text class="d-label">快递单号:</text>
  255. <text
  256. class="d-value">{{state.orderInfo.orderInfoExt.returnLogisticsNumber ?state.orderInfo.orderInfoExt.returnLogisticsNumber: ''}}</text>
  257. </view>
  258. </template>
  259. <template v-if="state.orderInfo.orderInfoExt.returnMode === 'OFFLINE'">
  260. <view class="d-row">
  261. <text class="d-label">退货网点:</text>
  262. <text
  263. class="d-value">{{state.orderInfo.orderInfoExt.returnNetworkName ?state.orderInfo.orderInfoExt.returnNetworkName: ''}}</text>
  264. </view>
  265. </template>
  266. <view class="d-row">
  267. <text class="d-label">退货原因:</text>
  268. <text
  269. class="d-value">{{state.orderInfo.orderInfoExt.returnReason ?state.orderInfo.orderInfoExt.returnReason: ''}}</text>
  270. </view>
  271. <view class="d-row" v-if="state.orderInfo.staffName">
  272. <text class="d-label">业 务 员:</text>
  273. <text class="d-value">{{state.orderInfo.staffName}}</text>
  274. </view>
  275. </view>
  276. <!-- 售后换货 -->
  277. <view
  278. v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货'] || !isBlank(state.orderInfo.orderInfoExt.exchangeMode)">
  279. <view class="d-row" v-if="state.orderInfo.XXX">
  280. <text class="d-label">售后单号:</text>
  281. <text class="d-value">{{state.orderInfo.XXX ?state.orderInfo.XXX: ''}}</text>
  282. </view>
  283. <view class="d-row">
  284. <text class="d-label">业务类型:</text>
  285. <text class="d-value">换货</text>
  286. </view>
  287. <view class="d-row">
  288. <text class="d-label">创建时间:</text>
  289. <text class="d-value">{{getOrderTime(state.orderInfo.XXXX)}}</text>
  290. </view>
  291. <view class="d-row">
  292. <text class="d-label">退货方式:</text>
  293. <text
  294. class="d-value">{{state.orderInfo.orderInfoExt.exchangeMode === 'ON_LINE' ? '线上' : '线下'}}</text>
  295. </view>
  296. <!-- 线上 -->
  297. <template v-if="state.orderInfo.orderInfoExt.exchangeMode === 'ON_LINE'">
  298. <view class="d-row">
  299. <text class="d-label">物流公司:</text>
  300. <text
  301. class="d-value">{{state.orderInfo.orderInfoExt.exchangeLogisticsCompany ?state.orderInfo.orderInfoExt.exchangeLogisticsCompany: ''}}</text>
  302. </view>
  303. <view class="d-row">
  304. <text class="d-label">快递单号:</text>
  305. <text
  306. class="d-value">{{state.orderInfo.orderInfoExt.exchangeLogisticsNumber ?state.orderInfo.orderInfoExt.exchangeLogisticsNumber: ''}}</text>
  307. </view>
  308. <view class="d-row">
  309. <text class="d-label">收货方式:</text>
  310. <text
  311. class="d-value">{{state.orderInfo.orderInfoExt.exchangeRgMode === 'SELF' ? '营业点自提' : '邮寄'}}</text>
  312. </view>
  313. <template v-if="state.orderInfo.orderInfoExt.exchangeRgMode === 'SELF'">
  314. <view class="d-row">
  315. <text class="d-label">自提网点:</text>
  316. <text
  317. class="d-value">{{state.orderInfo.orderInfoExt.exchangeRgNetworkName ?state.orderInfo.orderInfoExt.exchangeRgNetworkName: ''}}</text>
  318. </view>
  319. </template>
  320. <template v-if="state.orderInfo.orderInfoExt.exchangeRgMode === 'MAIL'">
  321. <view class="d-row">
  322. <text class="d-label">收件人姓名:</text>
  323. <text
  324. class="d-value">{{state.orderInfo.orderInfoExt.consignee ?state.orderInfo.orderInfoExt.consignee: ''}}</text>
  325. </view>
  326. <view class="d-row">
  327. <text class="d-label">收件人电话:</text>
  328. <text
  329. class="d-value">{{state.orderInfo.orderInfoExt.consigneeTel ?state.orderInfo.orderInfoExt.consigneeTel: ''}}</text>
  330. </view>
  331. <view class="d-row">
  332. <text class="d-label">收件人地址:</text>
  333. <text
  334. class="d-value">{{state.orderInfo.orderInfoExt.region + " " + state.orderInfo.orderInfoExt.address}}</text>
  335. </view>
  336. <view class="d-row">
  337. <text class="d-label">邮政编码:</text>
  338. <text
  339. class="d-value">{{state.orderInfo.orderInfoExt.postalCode ?state.orderInfo.orderInfoExt.postalCode: ''}}</text>
  340. </view>
  341. </template>
  342. </template>
  343. <!-- 线下 -->
  344. <template v-if="state.orderInfo.orderInfoExt.exchangeMode === 'OFFLINE'">
  345. <view class="d-row">
  346. <text class="d-label">退货网点:</text>
  347. <text
  348. class="d-value">{{state.orderInfo.orderInfoExt.exchangeNetworkName ?state.orderInfo.orderInfoExt.exchangeNetworkName: ''}}</text>
  349. </view>
  350. </template>
  351. <view class="d-row">
  352. <text class="d-label">换货原因:</text>
  353. <text class="d-value">{{state.orderInfo.orderInfoExt.exchangeReason}}</text>
  354. </view>
  355. <view class="d-row" v-if="state.orderInfo.staffName">
  356. <text class="d-label">业 务 员:</text>
  357. <text class="d-value">{{state.orderInfo.staffName}}</text>
  358. </view>
  359. </view>
  360. <!-- 已完成订单的售后怎么判断 -->
  361. <!-- TODO 已完成订单存在售后信息的要显示售后信息,但是不知道用什么字段来来判断已完成订单有没有售后信息及哪一种售后信息,需走完订单所有流程在进行测试修改 -->
  362. </view>
  363. </view>
  364. <!-- 按钮区 -->
  365. <view class="btn-view" v-if="state.orderInfo.orderStatus != OrderStatus.已取消">
  366. <!-- 信息填写未完成 -->
  367. <view class="btn-status"
  368. v-if="state.orderInfo.orderStep == OrderStatus['完成个人/单位信息上传'] || state.orderInfo.orderStep == OrderStatus.完成填写基本信息 || state.orderInfo.orderStep == OrderStatus.完成车辆信息上传">
  369. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  370. <view class="btn-green" @click="gotoEditUserOrUnitInfo(state.orderInfo)">继续申请</view>
  371. </view>
  372. <!-- 审核中/审核不通过 -->
  373. <view
  374. v-if="state.orderInfo.orderStep == OrderStatus.审核不通过 || state.orderInfo.orderStep == OrderStatus.待审核"
  375. class="btn-status">
  376. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  377. <view class="btn space" v-if="state.orderInfo.orderStep == OrderStatus.审核不通过"
  378. @click="gotoEditUserOrUnitInfo(state.orderInfo)">修改资料</view>
  379. <view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view>
  380. </view>
  381. <!-- 待支付 -->
  382. <view
  383. v-if="state.orderInfo.orderStep == OrderStatus.待支付1 || state.orderInfo.orderStep == OrderStatus.待支付2 || state.orderInfo.orderStep == OrderStatus.待支付3"
  384. class="btn-status">
  385. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  386. <view class="btn-green width-num-1" @click="gotoPay(state.orderInfo)">支付</view>
  387. </view>
  388. <!-- 待发货 -->
  389. <view v-if="state.orderInfo.orderStep == OrderStatus.待发货" class="btn-status">
  390. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  391. <view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view>
  392. </view>
  393. <!-- 待收货 -->
  394. <view v-if="state.orderInfo.orderStep == OrderStatus.待收货" class="btn-status">
  395. <view class="btn space" @click="gotoCheckLogistics(state.orderInfo)">查看物流</view>
  396. <view class="btn space" @click="gotoReturnOrder(state.orderInfo)">申请退货</view>
  397. <view class="btn-green" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
  398. </view>
  399. <!-- 待激活 -->
  400. <view v-if="state.orderInfo.orderStep == OrderStatus.待激活" class="btn-status">
  401. <view class="btn space" @click="gotoReturnOrder(state.orderInfo)">申请退货</view>
  402. <view class="btn space" @click="gotoExchangeOrder(state.orderInfo)">申请换货</view>
  403. <view class="btn-green" @click="gotoActiveOrder(state.orderInfo)">去激活</view>
  404. </view>
  405. <!-- 订单已结束 -->
  406. <view v-if="state.orderInfo.orderStep == OrderStatus.已结束" class="btn-status">
  407. <view class="btn-green width-num-3" @click="state.showActiveOrder = true">重新激活订单</view>
  408. </view>
  409. <!-- 订单完成 -->
  410. <view v-if="state.orderInfo.orderStep == OrderStatus.已完成" class="btn-status">
  411. <view class="btn space"
  412. v-if="( state.orderInfo.isProduct==1 && state.orderInfo.isEquity==1 && state.orderInfo.isService==1) ">
  413. 已评价</view>
  414. <view class="btn space" v-else @click="gotoEvaluateOrder(state.orderInfo)">去评价</view>
  415. </view>
  416. <!-- 换货中 -->
  417. <view v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货']" class="btn-status">
  418. <view class="btn space" @click="gotoCheckLogistics(state.orderInfo)">查看物流</view>
  419. <view class="btn-green" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
  420. </view>
  421. </view>
  422. </view>
  423. </view>
  424. </view>
  425. <!-- 弹窗 -->
  426. <u-popup v-model="state.showActiveOrder" mode="center">
  427. <popup-active-order content="确认是否重新激活订单" @cancel="state.showActiveOrder = false"
  428. @confirm="toActiveOrder"></popup-active-order>
  429. </u-popup>
  430. </template>
  431. <script setup lang="ts">
  432. import popupActiveOrder from "@/pages/order/components/popup-active-order.vue";
  433. import { reactive } from "vue";
  434. import { onLoad, onUnload } from "@dcloudio/uni-app";
  435. import { request } from "@/utils/network/request";
  436. import { editOrderAddr, orderDetail } from "@/utils/network/api";
  437. import { stringToJson } from "@/utils/network/encryption";
  438. import useOrderSkip from "@/composables/order/useOrderSkip";
  439. import { getETCStatusName, getOBUStatusName, msg, getOrderTypeName, getCarTypeName, getOrderTime, isBlank } from "@/utils/utils";
  440. import { OrderStatus } from "@/datas/enum";
  441. const state = reactive({
  442. orderInfo: {
  443. orderInfoExt: {}
  444. } as any, //订单信息
  445. showActiveOrder: false, //激活弹窗
  446. });
  447. //按钮跳转业务逻辑
  448. const { gotoEditAddress, gotoCancelOrder, gotoEditUserOrUnitInfo,
  449. gotoConfirmReceipt, gotoCheckLogistics, gotoEvaluateOrder,
  450. gotoActiveOrder, gotoReturnOrder, gotoExchangeOrder, gotoPay } = useOrderSkip();
  451. //获取订单详情
  452. const getOrderDetails = (id, appraise) => {
  453. const options = {
  454. type: 2,
  455. data: { "id": id },
  456. method: 'POST',
  457. showLoading: true,
  458. }
  459. request(orderDetail, options).then((res) => {
  460. state.orderInfo = stringToJson(res.bizContent);
  461. state.orderInfo.appraise = appraise;
  462. console.log("获取订单详情", state.orderInfo)
  463. //测试
  464. // state.orderInfo.orderStep = OrderStatus.待激活;
  465. })
  466. }
  467. //修改订单收货地址
  468. const requestEditOrderAddr = (addr) => {
  469. const options = {
  470. type: 2, data: {
  471. "id": state.orderInfo.id,
  472. 'consignee': addr.consignee,
  473. 'consigneeTel': addr.consigneeTel,
  474. 'region': addr.region,
  475. 'address': addr.address,
  476. 'postalCode': addr.postalCode
  477. },
  478. method: 'POST',
  479. showLoading: true,
  480. }
  481. request(editOrderAddr, options).then((res) => {
  482. state.orderInfo.orderInfoExt.id = addr.id,
  483. state.orderInfo.orderInfoExt.consignee = addr.consignee;
  484. state.orderInfo.orderInfoExt.consigneeTel = addr.consigneeTel;
  485. state.orderInfo.orderInfoExt.region = addr.region;
  486. state.orderInfo.orderInfoExt.address = addr.address;
  487. state.orderInfo.orderInfoExt.postalCode = addr.postalCode;
  488. msg('收货地址修改成功');
  489. })
  490. }
  491. //激活订单
  492. const toActiveOrder = () => {
  493. gotoActiveOrder(state.orderInfo);
  494. state.showActiveOrder = false;
  495. }
  496. //是否有售后信息
  497. const isHaveAfterSaleInfo = () => {
  498. if (isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.returnMode : null) && isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.exchangeMode : null)) {
  499. return false;
  500. }
  501. return true;
  502. }
  503. onLoad((options) => {
  504. //刷新订单信息
  505. uni.$on('refreshOrder', (data) => {
  506. getOrderDetails(options.id, state.orderInfo.appraise);
  507. });
  508. //修改收货地址
  509. uni.$on('selectAddressSuccess', (addr) => {
  510. requestEditOrderAddr(addr);
  511. });
  512. console.log("optionssdsfd", options)
  513. getOrderDetails(options.id, options.appraise);
  514. })
  515. onUnload(() => {
  516. uni.$off('refreshOrder');
  517. uni.$off('selectAddressSuccess');
  518. console.log("已评价")
  519. })
  520. </script>
  521. <style>
  522. page {
  523. background: #EEF7F7;
  524. padding-bottom: 30rpx;
  525. }
  526. :deep(.u-mode-center-box) {
  527. border-radius: 20rpx;
  528. }
  529. </style>
  530. <style lang="scss" scoped>
  531. .address-box {
  532. background: #FFFFFF;
  533. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  534. border-radius: 20rpx;
  535. margin: 30rpx 30rpx 0rpx;
  536. padding: 30rpx;
  537. .avatar {
  538. background: rgba(0, 179, 139, 0.2);
  539. border-radius: 50%;
  540. color: #00B38B;
  541. font-size: 26rpx;
  542. width: 80rpx;
  543. height: 80rpx;
  544. }
  545. .center {
  546. margin-left: 20rpx;
  547. margin-right: 20rpx;
  548. display: flex;
  549. flex-direction: column;
  550. justify-content: center;
  551. .name {
  552. font-size: 30rpx;
  553. font-family: Microsoft YaHei;
  554. font-weight: 400;
  555. color: #333333;
  556. }
  557. .phone {
  558. font-size: 24rpx;
  559. font-family: Microsoft YaHei;
  560. font-weight: 400;
  561. color: #999999;
  562. margin-left: 20rpx;
  563. }
  564. .addr {
  565. margin-top: 18rpx;
  566. font-size: 26rpx;
  567. font-family: Microsoft YaHei;
  568. font-weight: 400;
  569. color: #333333;
  570. line-height: 36rpx;
  571. }
  572. }
  573. .edit {
  574. width: 60rpx;
  575. height: 55rpx;
  576. }
  577. }
  578. .detail-box {
  579. background: #FFFFFF;
  580. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  581. border-radius: 20rpx;
  582. margin: 30rpx;
  583. .detail-header {
  584. display: flex;
  585. border-bottom: 1rpx solid #DCDCDC;
  586. padding: 30rpx;
  587. align-items: center;
  588. .d-img {
  589. width: 48rpx;
  590. height: 48rpx;
  591. }
  592. .detail-name {
  593. font-size: 30rpx;
  594. font-weight: 400;
  595. color: #333333;
  596. margin-left: 12rpx;
  597. }
  598. }
  599. .detail-content {
  600. padding: 28rpx 29rpx 10rpx 29rpx;
  601. .post-sale {
  602. border-top: 1rpx solid #DCDCDC;
  603. padding-top: 38rpx
  604. }
  605. .d-row {
  606. display: flex;
  607. margin-bottom: 32rpx;
  608. .d-label {
  609. font-size: 26rpx;
  610. //width: 135rpx;
  611. color: #999999;
  612. text-align: right;
  613. }
  614. .d-value {
  615. font-size: 26rpx;
  616. color: #333333;
  617. flex: 1;
  618. overflow: hidden;
  619. }
  620. }
  621. .btn-view {
  622. .btn-status {
  623. display: flex;
  624. justify-content: flex-end;
  625. padding: 20rpx 0;
  626. border-top: 1rpx solid #DCDCDC;
  627. }
  628. .space {
  629. margin-right: 19rpx
  630. }
  631. .btn {
  632. border: 1px solid #DCDCDC;
  633. border-radius: 30rpx;
  634. color: #333333;
  635. font-size: 26rpx;
  636. height: 61rpx;
  637. width: 141rpx;
  638. display: flex;
  639. justify-content: center;
  640. align-items: center;
  641. font-size: 26rpx;
  642. }
  643. .btn-green {
  644. border: 1px solid #00B38B;
  645. border-radius: 30rpx;
  646. color: #00B38B;
  647. height: 61rpx;
  648. width: 141rpx;
  649. display: flex;
  650. justify-content: center;
  651. align-items: center;
  652. font-size: 26rpx;
  653. }
  654. .width-num-1 {
  655. width: 115rpx;
  656. }
  657. .width-num-2 {
  658. width: 221rpx;
  659. }
  660. .width-num-3 {
  661. width: 201rpx;
  662. }
  663. }
  664. }
  665. }
  666. .text-orange {
  667. color: #FF8000 !important;
  668. }
  669. .text-green {
  670. color: #00B38B !important;
  671. }
  672. </style>