選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

order-details-new.vue 28KB

1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760
  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" v-if="state.orderInfo.orderInfoExt.payTime">
  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
  106. class="d-value">{{state.orderInfo.orderInfoExt.auditReason ?state.orderInfo.orderInfoExt.auditReason: ''}}</text>
  107. </view>
  108. </view>
  109. <!-- 待发货 -->
  110. <view v-if="state.orderInfo.orderStep == OrderStatus.待发货">
  111. <view class="d-row" v-if="state.orderInfo.orderInfoExt.payTime">
  112. <text class="d-label">付款时间:</text>
  113. <text
  114. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
  115. </view>
  116. <view class="d-row" v-if="state.orderInfo.staffName">
  117. <text class="d-label">业 务 员:</text>
  118. <text class="d-value">{{state.orderInfo.staffName}}</text>
  119. </view>
  120. </view>
  121. <!-- 待收货/待激活/已结束/换货/退货-->
  122. <view v-if="state.orderInfo.orderStep == OrderStatus.待收货 || state.orderInfo.orderStep == OrderStatus.待激活
  123. || state.orderInfo.orderStep == OrderStatus.已结束
  124. || state.orderInfo.orderStep == OrderStatus['已申请-换货']
  125. || state.orderInfo.orderStep == OrderStatus['已申请-退货']">
  126. <view class="d-row" v-if="state.orderInfo.orderInfoExt.payTime">
  127. <text class="d-label">付款时间:</text>
  128. <text
  129. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:'')}}</text>
  130. </view>
  131. <view class="d-row">
  132. <text class="d-label">发货时间:</text>
  133. <text
  134. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.deliveryTime:"")}}</text>
  135. </view>
  136. <view class="d-row" v-if="state.orderInfo.orderStep != OrderStatus.待收货">
  137. <text class="d-label">收货时间:</text>
  138. <text
  139. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.receivingTime:"")}}</text>
  140. </view>
  141. <view class="d-row">
  142. <text class="d-label">卡 号:</text>
  143. <text class="d-value">{{state.orderInfo.cardId ?state.orderInfo.cardId: ''}}</text>
  144. </view>
  145. <view class="d-row">
  146. <text class="d-label">卡 状 态:</text>
  147. <text class="d-value">{{getETCStatusName(state.orderInfo.cardStatus)}}</text>
  148. </view>
  149. <view class="d-row">
  150. <text class="d-label">OBU 号:</text>
  151. <text class="d-value">{{state.orderInfo.obuId ?state.orderInfo.obuId: ''}}</text>
  152. </view>
  153. <view class="d-row">
  154. <text class="d-label">OBU状态:</text>
  155. <text class="d-value">{{getOBUStatusName(state.orderInfo.obuStatus)}}</text>
  156. </view>
  157. <view class="d-row" v-if="state.orderInfo.staffName">
  158. <text class="d-label">业 务 员:</text>
  159. <text class="d-value">{{state.orderInfo.staffName}}</text>
  160. </view>
  161. <view class="d-row">
  162. <text class="d-label">快递单号:</text>
  163. <text
  164. class="d-value">{{state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: ''}}</text>
  165. </view>
  166. <view class="d-row">
  167. <text class="d-label">物流公司:</text>
  168. <text
  169. class="d-value">{{state.orderInfo.courierCompany ?state.orderInfo.courierCompany: ''}}</text>
  170. </view>
  171. </view>
  172. <!-- 订单已完成 -->
  173. <view v-if="state.orderInfo.orderStep == OrderStatus.已完成">
  174. <view class="d-row" v-if="state.orderInfo.orderInfoExt.payTime">
  175. <text class="d-label">付款时间:</text>
  176. <text
  177. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
  178. </view>
  179. <view class="d-row">
  180. <text class="d-label">发货时间:</text>
  181. <text
  182. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.deliveryTime:"")}}</text>
  183. </view>
  184. <view class="d-row">
  185. <text class="d-label">收货时间:</text>
  186. <text
  187. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.receivingTime:"")}}</text>
  188. </view>
  189. <view class="d-row">
  190. <text class="d-label">激活时间:</text>
  191. <text class="d-value">{{getOrderTime(state.orderInfo.cardEnableTime)}}</text>
  192. </view>
  193. <view class="d-row">
  194. <text class="d-label">卡 号:</text>
  195. <text class="d-value">{{state.orderInfo.cardId ?state.orderInfo.cardId: ''}}</text>
  196. </view>
  197. <view class="d-row">
  198. <text class="d-label">卡 状 态:</text>
  199. <text class="d-value">{{getETCStatusName(state.orderInfo.cardStatus)}}</text>
  200. </view>
  201. <view class="d-row">
  202. <text class="d-label">OBU 号:</text>
  203. <text class="d-value">{{state.orderInfo.obuId ?state.orderInfo.obuId: ''}}</text>
  204. </view>
  205. <view class="d-row">
  206. <text class="d-label">OBU状态:</text>
  207. <text class="d-value">{{getOBUStatusName(state.orderInfo.obuStatus)}}</text>
  208. </view>
  209. <view class="d-row" v-if="state.orderInfo.staffName">
  210. <text class="d-label">业 务 员:</text>
  211. <text class="d-value">{{state.orderInfo.staffName}}</text>
  212. </view>
  213. <view class="d-row">
  214. <text class="d-label">快递单号:</text>
  215. <text
  216. class="d-value">{{state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: ''}}</text>
  217. </view>
  218. <view class="d-row">
  219. <text class="d-label">物流公司:</text>
  220. <text
  221. class="d-value">{{state.orderInfo.courierCompany ?state.orderInfo.courierCompany: ''}}</text>
  222. </view>
  223. </view>
  224. </view>
  225. <!-- 售后 -->
  226. <view class="post-sale" v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货']
  227. || state.orderInfo.orderStep == OrderStatus['已申请-退货'] || isHaveAfterSaleInfo()">
  228. <!-- 售后退货-->
  229. <view
  230. v-if="state.orderInfo.orderStep == OrderStatus['已申请-退货'] || !isBlank(state.orderInfo.orderInfoExt && state.orderInfo.orderInfoExt.returnMode)">
  231. <view class="d-row" v-if="state.orderInfo.XXX">
  232. <text class="d-label">售后单号:</text>
  233. <text class="d-value">{{state.orderInfo.XXX ?state.orderInfo.XXX: ''}}</text>
  234. </view>
  235. <view class="d-row">
  236. <text class="d-label">业务类型:</text>
  237. <text class="d-value">退货</text>
  238. </view>
  239. <view class="d-row" v-if="state.orderInfo.cancelTime">
  240. <text class="d-label">创建时间:</text>
  241. <text class="d-value">{{getOrderTime(state.orderInfo.cancelTime)}}</text>
  242. </view>
  243. <view class="d-row">
  244. <text class="d-label">退货方式:</text>
  245. <text
  246. class="d-value">{{state.orderInfo.orderInfoExt.returnMode === 'ON_LINE' ? '线上' : '线下'}}</text>
  247. </view>
  248. <template v-if="state.orderInfo.orderInfoExt.returnMode === 'ON_LINE'">
  249. <view class="d-row">
  250. <text class="d-label">物流公司:</text>
  251. <text
  252. class="d-value">{{state.orderInfo.orderInfoExt.returnLogisticsCompany ?state.orderInfo.orderInfoExt.returnLogisticsCompany: ''}}</text>
  253. </view>
  254. <view class="d-row">
  255. <text class="d-label">快递单号:</text>
  256. <text
  257. class="d-value">{{state.orderInfo.orderInfoExt.returnLogisticsNumber ?state.orderInfo.orderInfoExt.returnLogisticsNumber: ''}}</text>
  258. </view>
  259. </template>
  260. <template v-if="state.orderInfo.orderInfoExt.returnMode === 'OFFLINE'">
  261. <view class="d-row">
  262. <text class="d-label">退货网点:</text>
  263. <text
  264. class="d-value">{{state.orderInfo.orderInfoExt.returnNetworkName ?state.orderInfo.orderInfoExt.returnNetworkName: ''}}</text>
  265. </view>
  266. </template>
  267. <view class="d-row">
  268. <text class="d-label">退货原因:</text>
  269. <text
  270. class="d-value">{{state.orderInfo.orderInfoExt.returnReason ?state.orderInfo.orderInfoExt.returnReason: ''}}</text>
  271. </view>
  272. <view class="d-row" v-if="state.orderInfo.staffName">
  273. <text class="d-label">业 务 员:</text>
  274. <text class="d-value">{{state.orderInfo.staffName}}</text>
  275. </view>
  276. </view>
  277. <!-- 售后换货 -->
  278. <view
  279. v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货'] || !isBlank(state.orderInfo.orderInfoExt.exchangeMode)">
  280. <view class="d-row" v-if="state.orderInfo.XXX">
  281. <text class="d-label">售后单号:</text>
  282. <text class="d-value">{{state.orderInfo.XXX ?state.orderInfo.XXX: ''}}</text>
  283. </view>
  284. <view class="d-row">
  285. <text class="d-label">业务类型:</text>
  286. <text class="d-value">换货</text>
  287. </view>
  288. <view class="d-row" v-if="state.orderInfo.XXX">
  289. <text class="d-label">创建时间:</text>
  290. <text class="d-value">{{getOrderTime(state.orderInfo.XXXX)}}</text>
  291. </view>
  292. <view class="d-row">
  293. <text class="d-label">退货方式:</text>
  294. <text
  295. class="d-value">{{state.orderInfo.orderInfoExt.exchangeMode === 'ON_LINE' ? '线上' : '线下'}}</text>
  296. </view>
  297. <!-- 线上 -->
  298. <template v-if="state.orderInfo.orderInfoExt.exchangeMode === 'ON_LINE'">
  299. <view class="d-row">
  300. <text class="d-label">物流公司:</text>
  301. <text
  302. class="d-value">{{state.orderInfo.orderInfoExt.exchangeLogisticsCompany ?state.orderInfo.orderInfoExt.exchangeLogisticsCompany: ''}}</text>
  303. </view>
  304. <view class="d-row">
  305. <text class="d-label">快递单号:</text>
  306. <text
  307. class="d-value">{{state.orderInfo.orderInfoExt.exchangeLogisticsNumber ?state.orderInfo.orderInfoExt.exchangeLogisticsNumber: ''}}</text>
  308. </view>
  309. <view class="d-row">
  310. <text class="d-label">收货方式:</text>
  311. <text
  312. class="d-value">{{state.orderInfo.orderInfoExt.exchangeRgMode === 'SELF' ? '营业点自提' : '邮寄'}}</text>
  313. </view>
  314. <template v-if="state.orderInfo.orderInfoExt.exchangeRgMode === 'SELF'">
  315. <view class="d-row">
  316. <text class="d-label">自提网点:</text>
  317. <text
  318. class="d-value">{{state.orderInfo.orderInfoExt.exchangeRgNetworkName ?state.orderInfo.orderInfoExt.exchangeRgNetworkName: ''}}</text>
  319. </view>
  320. </template>
  321. <template v-if="state.orderInfo.orderInfoExt.exchangeRgMode === 'MAIL'">
  322. <view class="d-row">
  323. <text class="d-label">收件人姓名:</text>
  324. <text
  325. class="d-value">{{state.orderInfo.orderInfoExt.consignee ?state.orderInfo.orderInfoExt.consignee: ''}}</text>
  326. </view>
  327. <view class="d-row">
  328. <text class="d-label">收件人电话:</text>
  329. <text
  330. class="d-value">{{state.orderInfo.orderInfoExt.consigneeTel ?state.orderInfo.orderInfoExt.consigneeTel: ''}}</text>
  331. </view>
  332. <view class="d-row">
  333. <text class="d-label">收件人地址:</text>
  334. <text class="d-value">{{state.orderInfo.orderInfoExt.address}}</text>
  335. </view>
  336. <view class="d-row" v-if="state.orderInfo.orderInfoExt.postalCode">
  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.待支付3">
  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['完成车辆信息上传/待支付'] || state.orderInfo.orderStep == OrderStatus.待支付2 "
  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 class="btn-green width-num-1" @click="gotoOrderDetailsPay(state.orderInfo)">支付</view>
  388. </view>
  389. <!-- 待签约-->
  390. <view v-if="state.orderInfo.orderStep == OrderStatus['已支付/待签约']" class="btn-status">
  391. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  392. <view class="btn-green" @click="gotoOrderSign(state.orderInfo)">去签约</view>
  393. </view>
  394. <!-- 待发货 -->
  395. <view v-if="state.orderInfo.orderStep == OrderStatus.待发货" class="btn-status">
  396. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  397. <view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view>
  398. </view>
  399. <!-- 待收货 -->
  400. <view v-if="state.orderInfo.orderStep == OrderStatus.待收货" class="btn-status">
  401. <view class="btn space" @click="gotoCheckLogistics(state.orderInfo)">查看物流</view>
  402. <view class="btn space" @click="gotoReturnOrder(state.orderInfo)">申请退货</view>
  403. <view class="btn-green" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
  404. </view>
  405. <!-- 待激活 -->
  406. <view v-if="state.orderInfo.orderStep == OrderStatus.待激活" class="btn-status">
  407. <view class="btn space" @click="gotoReturnOrder(state.orderInfo)">申请退货</view>
  408. <view class="btn space" @click="gotoExchangeOrder(state.orderInfo)">申请换货</view>
  409. <view class="btn-green" @click="gotoActiveOrder(state.orderInfo)">去激活</view>
  410. </view>
  411. <!-- 订单已结束 -->
  412. <view v-if="state.orderInfo.orderStep == OrderStatus.已结束" class="btn-status">
  413. <view class="btn-green width-num-3" @click="state.showActiveOrder = true">重新激活订单</view>
  414. </view>
  415. <!-- 订单完成 -->
  416. <view v-if="state.isWeiXin==1">
  417. <view
  418. v-if="state.orderInfo.orderStep == OrderStatus.已完成 && (state.orderInfo.orderType =='ISSUE' || state.orderInfo.orderType =='VALUE_TO_ACCOUNT')"
  419. class="btn-status">
  420. <view class="btn space"
  421. v-if="( state.orderInfo.isProduct==1 && state.orderInfo.isService==1) ">
  422. 已评价</view>
  423. <view class="btn space" v-else @click.stop="gotoEvaluateProduct(state.orderInfo)">去评价</view>
  424. </view>
  425. </view>
  426. <view v-if="state.isWeiXin==2">
  427. <view class="btn-status" v-if="state.orderInfo.orderStep == OrderStatus.已完成">
  428. <view class="btn space" v-if="state.orderInfo.isStaff==1 && state.orderInfo.isProduct==1">
  429. 已评价
  430. </view>
  431. <view class='evaluation' v-else>
  432. <view class="btn space" @click.stop="gotoEvaluateSalesman(state.orderInfo)">去评价
  433. </view>
  434. </view>
  435. </view>
  436. </view>
  437. <!-- 换货中 -->
  438. <view v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货']" class="btn-status">
  439. <view class="btn space" @click="gotoCheckLogistics(state.orderInfo)">查看物流</view>
  440. <view class="btn-green" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
  441. </view>
  442. </view>
  443. </view>
  444. </view>
  445. </view>
  446. <!-- 弹窗 -->
  447. <u-popup v-model="state.showActiveOrder" mode="center">
  448. <popup-active-order content="确认是否重新激活订单" @cancel="state.showActiveOrder = false"
  449. @confirm="toActiveOrder"></popup-active-order>
  450. </u-popup>
  451. </template>
  452. <script setup lang="ts">
  453. import popupActiveOrder from "@/pages/order/components/popup-active-order.vue";
  454. import { reactive } from "vue";
  455. import { onLoad, onUnload } from "@dcloudio/uni-app";
  456. import { request } from "@/utils/network/request";
  457. import { editOrderAddr, orderDetail } from "@/utils/network/api";
  458. import { stringToJson } from "@/utils/network/encryption";
  459. import useOrderSkip from "@/composables/order/useOrderSkip";
  460. import { getETCStatusName, getOBUStatusName, msg, getOrderTypeName, getCarTypeName, getOrderTime, isBlank } from "@/utils/utils";
  461. import { OrderStatus } from "@/datas/enum";
  462. const state = reactive({
  463. orderInfo: {
  464. orderInfoExt: {}
  465. } as any, //订单信息
  466. showActiveOrder: false, //激活弹窗
  467. isWeiXin: 1, //1 微信 2 app
  468. });
  469. //按钮跳转业务逻辑
  470. const { gotoEditAddress, gotoCancelOrder, gotoEditUserOrUnitInfo,
  471. gotoConfirmReceipt, gotoCheckLogistics, gotoEvaluateProduct,
  472. gotoActiveOrder, gotoReturnOrder, gotoExchangeOrder, gotoPay, gotoOrderSign, gotoOrderDetailsPay, gotoEvaluateSalesman } = useOrderSkip();
  473. //获取订单详情
  474. const getOrderDetails = (id, appraise) => {
  475. const options = {
  476. type: 2,
  477. data: { "id": id },
  478. method: 'POST',
  479. showLoading: true,
  480. }
  481. request(orderDetail, options).then((res) => {
  482. state.orderInfo = stringToJson(res.bizContent);
  483. state.orderInfo.appraise = appraise;
  484. console.log("获取订单详情", state.orderInfo)
  485. //测试
  486. // state.orderInfo.orderStep = OrderStatus.待激活;
  487. })
  488. }
  489. //修改订单收货地址
  490. const requestEditOrderAddr = (addr) => {
  491. const options = {
  492. type: 2, data: {
  493. "id": state.orderInfo.id,
  494. 'consignee': addr.consignee,
  495. 'consigneeTel': addr.consigneeTel,
  496. 'region': addr.region,
  497. 'address': addr.address,
  498. 'postalCode': addr.postalCode
  499. },
  500. method: 'POST',
  501. showLoading: true,
  502. }
  503. request(editOrderAddr, options).then((res) => {
  504. state.orderInfo.orderInfoExt.id = addr.id,
  505. state.orderInfo.orderInfoExt.consignee = addr.consignee;
  506. state.orderInfo.orderInfoExt.consigneeTel = addr.consigneeTel;
  507. state.orderInfo.orderInfoExt.region = addr.region;
  508. state.orderInfo.orderInfoExt.address = addr.address;
  509. state.orderInfo.orderInfoExt.postalCode = addr.postalCode;
  510. setTimeout(() => {
  511. msg('收货地址修改成功');
  512. }, 1000)
  513. })
  514. }
  515. //激活订单
  516. const toActiveOrder = () => {
  517. gotoActiveOrder(state.orderInfo);
  518. state.showActiveOrder = false;
  519. }
  520. //是否有售后信息
  521. const isHaveAfterSaleInfo = () => {
  522. if (isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.returnMode : null) && isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.exchangeMode : null)) {
  523. return false;
  524. }
  525. return true;
  526. }
  527. onLoad((options) => {
  528. state.isWeiXin = options.isWeiXin
  529. //刷新订单信息
  530. uni.$on('refreshOrder', (data) => {
  531. getOrderDetails(options.id, state.orderInfo.appraise);
  532. });
  533. //修改收货地址
  534. uni.$on('selectAddressSuccess', (addr) => {
  535. requestEditOrderAddr(addr);
  536. });
  537. console.log("optionssdsfd", options)
  538. getOrderDetails(options.id, options.appraise);
  539. })
  540. onUnload(() => {
  541. uni.$off('refreshOrder');
  542. uni.$off('selectAddressSuccess');
  543. console.log("已评价")
  544. })
  545. </script>
  546. <style>
  547. page {
  548. background: #EEF7F7;
  549. padding-bottom: 30rpx;
  550. }
  551. :deep(.u-mode-center-box) {
  552. border-radius: 20rpx;
  553. }
  554. </style>
  555. <style lang="scss" scoped>
  556. .address-box {
  557. background: #FFFFFF;
  558. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  559. border-radius: 20rpx;
  560. margin: 30rpx 30rpx 0rpx;
  561. padding: 30rpx;
  562. .avatar {
  563. background: rgba(0, 179, 139, 0.2);
  564. border-radius: 50%;
  565. color: #00B38B;
  566. font-size: 26rpx;
  567. width: 80rpx;
  568. height: 80rpx;
  569. }
  570. .center {
  571. margin-left: 20rpx;
  572. margin-right: 20rpx;
  573. display: flex;
  574. flex-direction: column;
  575. justify-content: center;
  576. .name {
  577. font-size: 30rpx;
  578. font-family: Microsoft YaHei;
  579. font-weight: 400;
  580. color: #333333;
  581. }
  582. .phone {
  583. font-size: 24rpx;
  584. font-family: Microsoft YaHei;
  585. font-weight: 400;
  586. color: #999999;
  587. margin-left: 20rpx;
  588. }
  589. .addr {
  590. margin-top: 18rpx;
  591. font-size: 26rpx;
  592. font-family: Microsoft YaHei;
  593. font-weight: 400;
  594. color: #333333;
  595. line-height: 36rpx;
  596. }
  597. }
  598. .edit {
  599. width: 60rpx;
  600. height: 55rpx;
  601. }
  602. }
  603. .detail-box {
  604. background: #FFFFFF;
  605. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  606. border-radius: 20rpx;
  607. margin: 30rpx;
  608. .detail-header {
  609. display: flex;
  610. border-bottom: 1rpx solid #DCDCDC;
  611. padding: 30rpx;
  612. align-items: center;
  613. .d-img {
  614. width: 48rpx;
  615. height: 48rpx;
  616. }
  617. .detail-name {
  618. font-size: 30rpx;
  619. font-weight: 400;
  620. color: #333333;
  621. margin-left: 12rpx;
  622. }
  623. }
  624. .detail-content {
  625. padding: 28rpx 29rpx 10rpx 29rpx;
  626. .post-sale {
  627. border-top: 1rpx solid #DCDCDC;
  628. padding-top: 38rpx
  629. }
  630. .d-row {
  631. display: flex;
  632. margin-bottom: 32rpx;
  633. .d-label {
  634. font-size: 26rpx;
  635. //width: 135rpx;
  636. color: #999999;
  637. text-align: right;
  638. }
  639. .d-value {
  640. font-size: 26rpx;
  641. color: #333333;
  642. flex: 1;
  643. overflow: hidden;
  644. }
  645. }
  646. .btn-view {
  647. .btn-status {
  648. display: flex;
  649. justify-content: flex-end;
  650. padding: 20rpx 0;
  651. border-top: 1rpx solid #DCDCDC;
  652. }
  653. .space {
  654. margin-right: 19rpx
  655. }
  656. .btn {
  657. border: 1px solid #DCDCDC;
  658. border-radius: 30rpx;
  659. color: #333333;
  660. font-size: 26rpx;
  661. height: 61rpx;
  662. width: 141rpx;
  663. display: flex;
  664. justify-content: center;
  665. align-items: center;
  666. font-size: 26rpx;
  667. }
  668. .btn-green {
  669. border: 1px solid #00B38B;
  670. border-radius: 30rpx;
  671. color: #00B38B;
  672. height: 61rpx;
  673. width: 141rpx;
  674. display: flex;
  675. justify-content: center;
  676. align-items: center;
  677. font-size: 26rpx;
  678. }
  679. .width-num-1 {
  680. width: 115rpx;
  681. }
  682. .width-num-2 {
  683. width: 221rpx;
  684. }
  685. .width-num-3 {
  686. width: 201rpx;
  687. }
  688. }
  689. }
  690. }
  691. .text-orange {
  692. color: #FF8000 !important;
  693. }
  694. .text-green {
  695. color: #00B38B !important;
  696. }
  697. </style>