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 35KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895
  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" v-if="getCarTypeName(state.orderInfo.type)=='货车'">
  59. <text class="d-label">牵引车:</text>
  60. <text class="d-value">{{state.orderInfo.tractorSign=='1'?'是':'否'}}</text>
  61. </view>
  62. <view class="d-row">
  63. <text class="d-label">订单金额:</text>
  64. <text class="d-value text-orange">¥
  65. {{state.orderInfo.amount / 100 ?state.orderInfo.amount / 100: '0.00'}}</text>
  66. </view>
  67. <view class="d-row">
  68. <text class="d-label">订单状态:</text>
  69. <text
  70. class="d-value text-green">{{state.orderInfo.orderStatus == OrderStatus.已取消 ? '已取消' : $util.getOrderStatusName(state.orderInfo.orderStep)}}</text>
  71. </view>
  72. <view class="d-row">
  73. <text class="d-label">创建时间:</text>
  74. <text class="d-value">{{getOrderTime(state.orderInfo.insertTime)}}</text>
  75. </view>
  76. </view>
  77. <!-- 已取消订单信息 -->
  78. <view v-if="state.orderInfo.orderStatus == OrderStatus.已取消">
  79. <view class="d-row" v-if="state.orderInfo.orderStep > OrderStatus.已支付">
  80. <text class="d-label">付款时间:</text>
  81. <text
  82. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
  83. </view>
  84. <view class="d-row">
  85. <text class="d-label">取消时间:</text>
  86. <text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.cancelTime)}}</text>
  87. </view>
  88. <view class="d-row" v-if="state.orderInfo.staffName">
  89. <text class="d-label">业 务 员:</text>
  90. <text class="d-value">{{state.orderInfo.staffName}}</text>
  91. </view>
  92. <view class="d-row">
  93. <text class="d-label">取消原因:</text>
  94. <text
  95. class="d-value">{{state.orderInfo.orderInfoExt.cancelReason ?state.orderInfo.orderInfoExt.cancelReason: ''}}</text>
  96. </view>
  97. </view>
  98. <view v-else>
  99. <!-- 审核中/审核不通过订单信息 -->
  100. <view
  101. v-if="state.orderInfo.orderStep == OrderStatus.审核不通过 || state.orderInfo.orderStep == OrderStatus.待审核">
  102. <view class="d-row" v-if="state.orderInfo.orderInfoExt.payTime">
  103. <text class="d-label">付款时间:</text>
  104. <text
  105. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
  106. </view>
  107. <view class="d-row" v-if="state.orderInfo.orderStep == OrderStatus.审核不通过">
  108. <text class="d-label">不通过原因:</text>
  109. <text
  110. class="d-value">{{state.orderInfo.orderInfoExt.auditReason ?state.orderInfo.orderInfoExt.auditReason: ''}}</text>
  111. </view>
  112. </view>
  113. <!-- 待发货 -->
  114. <view v-if="state.orderInfo.orderStep == OrderStatus.待发货">
  115. <view class="d-row" v-if="state.orderInfo.orderInfoExt.payTime">
  116. <text class="d-label">付款时间:</text>
  117. <text
  118. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
  119. </view>
  120. <view class="d-row" v-if="state.orderInfo.staffName">
  121. <text class="d-label">业 务 员:</text>
  122. <text class="d-value">{{state.orderInfo.staffName}}</text>
  123. </view>
  124. </view>
  125. <!-- 待收货/待激活/已结束/换货/退货-->
  126. <view v-if="state.orderInfo.orderStep == OrderStatus.待收货 || state.orderInfo.orderStep == OrderStatus.待激活
  127. || state.orderInfo.orderStep == OrderStatus.已结束
  128. || state.orderInfo.orderStep == OrderStatus['已申请-换货']
  129. || state.orderInfo.orderStep == OrderStatus['已申请-退货']">
  130. <view class="d-row" v-if="state.orderInfo.orderInfoExt.payTime">
  131. <text class="d-label">付款时间:</text>
  132. <text
  133. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:'')}}</text>
  134. </view>
  135. <view class="d-row">
  136. <text class="d-label">发货时间:</text>
  137. <text
  138. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.deliveryTime:"")}}</text>
  139. </view>
  140. <view class="d-row" v-if="state.orderInfo.orderStep != OrderStatus.待收货">
  141. <text class="d-label">收货时间:</text>
  142. <text
  143. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.receivingTime:"")}}</text>
  144. </view>
  145. <view class="d-row">
  146. <text class="d-label">卡 号:</text>
  147. <text class="d-value">{{state.orderInfo.cardId ?state.orderInfo.cardId: ''}}</text>
  148. </view>
  149. <view class="d-row" v-if="state.orderInfo.cardStatus">
  150. <text class="d-label">卡 状 态:</text>
  151. <text class="d-value">{{getETCStatusName(state.orderInfo.cardStatus)}}</text>
  152. </view>
  153. <view class="d-row">
  154. <text class="d-label">OBU 号:</text>
  155. <text class="d-value">{{state.orderInfo.obuId ?state.orderInfo.obuId: ''}}</text>
  156. </view>
  157. <view class="d-row" v-if="state.orderInfo.obuStatus">
  158. <text class="d-label">OBU状态:</text>
  159. <text class="d-value">{{getOBUStatusName(state.orderInfo.obuStatus)}}</text>
  160. </view>
  161. <view class="d-row" v-if="state.orderInfo.staffName">
  162. <text class="d-label">业 务 员:</text>
  163. <text class="d-value">{{state.orderInfo.staffName}}</text>
  164. </view>
  165. <view class="d-row">
  166. <text class="d-label">快递单号:</text>
  167. <text
  168. class="d-value">{{state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: ''}}</text>
  169. </view>
  170. <view class="d-row">
  171. <text class="d-label">物流公司:</text>
  172. <text
  173. class="d-value">{{state.orderInfo.courierCompany ?state.orderInfo.courierCompany: ''}}</text>
  174. </view>
  175. </view>
  176. <!-- 订单已完成 -->
  177. <view v-if="state.orderInfo.orderStep == OrderStatus.已完成">
  178. <view class="d-row" v-if="state.orderInfo.orderInfoExt.payTime">
  179. <text class="d-label">付款时间:</text>
  180. <text
  181. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</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.deliveryTime:"")}}</text>
  187. </view>
  188. <view class="d-row">
  189. <text class="d-label">收货时间:</text>
  190. <text
  191. class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.receivingTime:"")}}</text>
  192. </view>
  193. <view class="d-row">
  194. <text class="d-label">激活时间:</text>
  195. <text class="d-value">{{getOrderTime(state.orderInfo.cardEnableTime)}}</text>
  196. </view>
  197. <view class="d-row">
  198. <text class="d-label">卡 号:</text>
  199. <text class="d-value">{{state.orderInfo.cardId ?state.orderInfo.cardId: ''}}</text>
  200. </view>
  201. <view class="d-row" v-if="state.orderInfo.cardStatus">
  202. <text class="d-label">卡 状 态:</text>
  203. <text class="d-value">{{getETCStatusName(state.orderInfo.cardStatus)}}</text>
  204. </view>
  205. <view class="d-row">
  206. <text class="d-label">OBU 号:</text>
  207. <text class="d-value">{{state.orderInfo.obuId ?state.orderInfo.obuId: ''}}</text>
  208. </view>
  209. <view class="d-row" v-if="state.orderInfo.obuStatus">
  210. <text class="d-label">OBU状态:</text>
  211. <text class="d-value">{{getOBUStatusName(state.orderInfo.obuStatus)}}</text>
  212. </view>
  213. <view class="d-row" v-if="state.orderInfo.staffName">
  214. <text class="d-label">业 务 员:</text>
  215. <text class="d-value">{{state.orderInfo.staffName}}</text>
  216. </view>
  217. <view class="d-row">
  218. <text class="d-label">快递单号:</text>
  219. <text
  220. class="d-value">{{state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: ''}}</text>
  221. </view>
  222. <view class="d-row">
  223. <text class="d-label">物流公司:</text>
  224. <text
  225. class="d-value">{{state.orderInfo.courierCompany ?state.orderInfo.courierCompany: ''}}</text>
  226. </view>
  227. </view>
  228. </view>
  229. <!-- 售后 -->
  230. <view class="post-sale" v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货']
  231. || state.orderInfo.orderStep == OrderStatus['已申请-退货'] || isHaveAfterSaleInfo()">
  232. <!-- 售后退货-->
  233. <view
  234. v-if="state.orderInfo.orderStep == OrderStatus['已申请-退货'] || !isBlank(state.orderInfo.orderInfoExt && state.orderInfo.orderInfoExt.returnMode)">
  235. <view class="d-row" v-if="state.orderInfo.XXX">
  236. <text class="d-label">售后单号:</text>
  237. <text class="d-value">{{state.orderInfo.XXX ?state.orderInfo.XXX: ''}}</text>
  238. </view>
  239. <view class="d-row">
  240. <text class="d-label">业务类型:</text>
  241. <text class="d-value">退货</text>
  242. </view>
  243. <view class="d-row" v-if="state.orderInfo.cancelTime">
  244. <text class="d-label">创建时间:</text>
  245. <text class="d-value">{{getOrderTime(state.orderInfo.cancelTime)}}</text>
  246. </view>
  247. <view class="d-row">
  248. <text class="d-label">退货方式:</text>
  249. <text
  250. class="d-value">{{state.orderInfo.orderInfoExt.returnMode === 'ON_LINE' ? '线上' : '线下'}}</text>
  251. </view>
  252. <template v-if="state.orderInfo.orderInfoExt.returnMode === 'ON_LINE'">
  253. <view class="d-row">
  254. <text class="d-label">物流公司:</text>
  255. <text
  256. class="d-value">{{state.orderInfo.orderInfoExt.returnLogisticsCompany ?state.orderInfo.orderInfoExt.returnLogisticsCompany: ''}}</text>
  257. </view>
  258. <view class="d-row">
  259. <text class="d-label">快递单号:</text>
  260. <text
  261. class="d-value">{{state.orderInfo.orderInfoExt.returnLogisticsNumber ?state.orderInfo.orderInfoExt.returnLogisticsNumber: ''}}</text>
  262. </view>
  263. </template>
  264. <template v-if="state.orderInfo.orderInfoExt.returnMode === 'OFFLINE'">
  265. <view class="d-row">
  266. <text class="d-label">退货网点:</text>
  267. <text
  268. class="d-value">{{state.orderInfo.orderInfoExt.returnNetworkName ?state.orderInfo.orderInfoExt.returnNetworkName: ''}}</text>
  269. </view>
  270. </template>
  271. <view class="d-row">
  272. <text class="d-label">退货原因:</text>
  273. <text
  274. class="d-value">{{state.orderInfo.orderInfoExt.returnReason ?state.orderInfo.orderInfoExt.returnReason: ''}}</text>
  275. </view>
  276. <view class="d-row" v-if="state.orderInfo.staffName">
  277. <text class="d-label">业 务 员:</text>
  278. <text class="d-value">{{state.orderInfo.staffName}}</text>
  279. </view>
  280. </view>
  281. <!-- 售后换货 -->
  282. <view
  283. v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货'] || !isBlank(state.orderInfo.orderInfoExt.exchangeMode)">
  284. <view class="d-row" v-if="state.orderInfo.XXX">
  285. <text class="d-label">售后单号:</text>
  286. <text class="d-value">{{state.orderInfo.XXX ?state.orderInfo.XXX: ''}}</text>
  287. </view>
  288. <view class="d-row">
  289. <text class="d-label">业务类型:</text>
  290. <text class="d-value">换货</text>
  291. </view>
  292. <view class="d-row" v-if="state.orderInfo.XXX">
  293. <text class="d-label">创建时间:</text>
  294. <text class="d-value">{{getOrderTime(state.orderInfo.XXXX)}}</text>
  295. </view>
  296. <view class="d-row">
  297. <text class="d-label">退货方式:</text>
  298. <text
  299. class="d-value">{{state.orderInfo.orderInfoExt.exchangeMode === 'ON_LINE' ? '线上' : '线下'}}</text>
  300. </view>
  301. <!-- 线上 -->
  302. <template v-if="state.orderInfo.orderInfoExt.exchangeMode === 'ON_LINE'">
  303. <view class="d-row">
  304. <text class="d-label">物流公司:</text>
  305. <text
  306. class="d-value">{{state.orderInfo.orderInfoExt.exchangeLogisticsCompany ?state.orderInfo.orderInfoExt.exchangeLogisticsCompany: ''}}</text>
  307. </view>
  308. <view class="d-row">
  309. <text class="d-label">快递单号:</text>
  310. <text
  311. class="d-value">{{state.orderInfo.orderInfoExt.exchangeLogisticsNumber ?state.orderInfo.orderInfoExt.exchangeLogisticsNumber: ''}}</text>
  312. </view>
  313. <view class="d-row">
  314. <text class="d-label">收货方式:</text>
  315. <text
  316. class="d-value">{{state.orderInfo.orderInfoExt.exchangeRgMode === 'SELF' ? '营业点自提' : '邮寄'}}</text>
  317. </view>
  318. <template v-if="state.orderInfo.orderInfoExt.exchangeRgMode === 'SELF'">
  319. <view class="d-row">
  320. <text class="d-label">自提网点:</text>
  321. <text
  322. class="d-value">{{state.orderInfo.orderInfoExt.exchangeRgNetworkName ?state.orderInfo.orderInfoExt.exchangeRgNetworkName: ''}}</text>
  323. </view>
  324. </template>
  325. <template v-if="state.orderInfo.orderInfoExt.exchangeRgMode === 'MAIL'">
  326. <view class="d-row">
  327. <text class="d-label">收件人姓名:</text>
  328. <text
  329. class="d-value">{{state.orderInfo.orderInfoExt.consignee ?state.orderInfo.orderInfoExt.consignee: ''}}</text>
  330. </view>
  331. <view class="d-row">
  332. <text class="d-label">收件人电话:</text>
  333. <text
  334. class="d-value">{{state.orderInfo.orderInfoExt.consigneeTel ?state.orderInfo.orderInfoExt.consigneeTel: ''}}</text>
  335. </view>
  336. <view class="d-row">
  337. <text class="d-label">收件人地址:</text>
  338. <text class="d-value">{{state.orderInfo.orderInfoExt.address}}</text>
  339. </view>
  340. <view class="d-row" v-if="state.orderInfo.orderInfoExt.postalCode">
  341. <text class="d-label">邮政编码:</text>
  342. <text
  343. class="d-value">{{state.orderInfo.orderInfoExt.postalCode ?state.orderInfo.orderInfoExt.postalCode: ''}}</text>
  344. </view>
  345. </template>
  346. </template>
  347. <!-- 线下 -->
  348. <template v-if="state.orderInfo.orderInfoExt.exchangeMode === 'OFFLINE'">
  349. <view class="d-row">
  350. <text class="d-label">退货网点:</text>
  351. <text
  352. class="d-value">{{state.orderInfo.orderInfoExt.exchangeNetworkName ?state.orderInfo.orderInfoExt.exchangeNetworkName: ''}}</text>
  353. </view>
  354. </template>
  355. <view class="d-row">
  356. <text class="d-label">换货原因:</text>
  357. <text class="d-value">{{state.orderInfo.orderInfoExt.exchangeReason}}</text>
  358. </view>
  359. <view class="d-row" v-if="state.orderInfo.staffName">
  360. <text class="d-label">业 务 员:</text>
  361. <text class="d-value">{{state.orderInfo.staffName}}</text>
  362. </view>
  363. </view>
  364. <!-- 已完成订单的售后怎么判断 -->
  365. <!-- TODO 已完成订单存在售后信息的要显示售后信息,但是不知道用什么字段来来判断已完成订单有没有售后信息及哪一种售后信息,需走完订单所有流程在进行测试修改 -->
  366. </view>
  367. </view>
  368. <!-- orderSource类型 SERVICE_HALL app只展示待激活按钮-->
  369. <!-- WECHAT("WECHAT", "九州ETC小程序"),
  370. SERVICE_HALL("SERVICE_HALL", "线上营业厅"),
  371. WEB("WEB", "后台PC端",),
  372. H5("H5", "H5页面", ),
  373. ALI("ALI", "支付宝小程序", ) -->
  374. <!-- 按钮区 -->
  375. <view v-if="source=='WECHAT'">
  376. <view class="btn-view"
  377. v-if="state.orderInfo.orderStatus != OrderStatus.已取消 && state.orderInfo['orderSource'] !='SERVICE_HALL'">
  378. <!-- 信息填写未完成 -->
  379. <view class="btn-status"
  380. v-if="state.orderInfo.orderStep == OrderStatus['完成个人/单位信息上传'] || state.orderInfo.orderStep == OrderStatus.完成填写基本信息 || state.orderInfo.orderStep == OrderStatus.待支付3">
  381. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  382. <view class="btn-green" @click="gotoEditUserOrUnitInfo(state.orderInfo)">继续申请</view>
  383. </view>
  384. <!-- 审核中/审核不通过 -->
  385. <view
  386. v-if="state.orderInfo.orderStep == OrderStatus.审核不通过 || state.orderInfo.orderStep == OrderStatus.待审核"
  387. class="btn-status">
  388. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  389. <view class="btn space" v-if="state.orderInfo.orderStep == OrderStatus.审核不通过"
  390. @click="gotoEditUserOrUnitInfo(state.orderInfo)">修改资料</view>
  391. <view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view>
  392. </view>
  393. <!-- 待支付 -->
  394. <view
  395. v-if="state.orderInfo.orderStep == OrderStatus['完成车辆信息上传/待支付'] || state.orderInfo.orderStep == OrderStatus.待支付2 "
  396. class="btn-status">
  397. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  398. <view class="btn-green width-num-1" @click="gotoOrderDetailsPay(state.orderInfo)">支付</view>
  399. </view>
  400. <!-- 待签约-->
  401. <view v-if="state.orderInfo.orderStep == OrderStatus['已支付/待签约']" class="btn-status">
  402. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  403. <view class="btn-green" @click="gotoOrderSign(state.orderInfo)">去签约</view>
  404. </view>
  405. <!-- 待发货 -->
  406. <view v-if="state.orderInfo.orderStep == OrderStatus.待发货" class="btn-status">
  407. <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
  408. <view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view>
  409. </view>
  410. <!-- 待收货 -->
  411. <view v-if="state.orderInfo.orderStep == OrderStatus.待收货" class="btn-status">
  412. <view class="btn space" @click="gotoCheckLogistics(state.orderInfo)">查看物流</view>
  413. <view class="btn space" @click="gotoReturnOrder(state.orderInfo)">申请退货</view>
  414. <view class="btn-green space" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
  415. <view class="btn-green" @click.stop="closeOrder(state.orderInfo)"
  416. v-if="state.orderInfo.finishOrder">结束订单</view>
  417. </view>
  418. <!-- 待激活 -->
  419. <view v-if="state.orderInfo.orderStep == OrderStatus.待激活" class="btn-status">
  420. <view class="btn space" @click="gotoReturnOrder(state.orderInfo)">申请退货</view>
  421. <view class="btn space" @click="gotoExchangeOrder(state.orderInfo)">申请换货</view>
  422. <view class="btn-green space" @click="gotoActiveOrder(state.orderInfo)">去激活</view>
  423. <view class="btn-green" @click.stop="closeOrder(state.orderInfo)"
  424. v-if="state.orderInfo.finishOrder">结束订单</view>
  425. </view>
  426. <!-- 订单已结束 -->
  427. <view v-if="state.orderInfo.orderStep == OrderStatus.已结束 && state.orderInfo.isUseAgain"
  428. class="btn-status">
  429. <view class="btn-green" @click.stop="gotoAgainUseOrder(state.orderInfo)">再次使用订单</view>
  430. </view>
  431. <!-- 订单完成 -->
  432. <view v-if="state.isWeiXin==1">
  433. <view
  434. v-if="state.orderInfo.orderStep == OrderStatus.已完成 && (state.orderInfo.orderType =='ISSUE' || state.orderInfo.orderType =='VALUE_TO_ACCOUNT')"
  435. class="btn-status">
  436. <view class="btn space"
  437. v-if="( state.orderInfo.isProduct==1 && state.orderInfo.isService==1) ">
  438. 已评价</view>
  439. <view class="btn-green" v-else @click.stop="gotoEvaluateProduct(state.orderInfo)">去评价产品
  440. </view>
  441. </view>
  442. </view>
  443. <view v-if="state.isWeiXin==2">
  444. <view class="btn-status" v-if="state.orderInfo.orderStep == OrderStatus.已完成">
  445. <view class="btn space"
  446. v-if="state.orderInfo.isStaff==1 && state.orderInfo.isProduct==1">
  447. 已评价
  448. </view>
  449. <view class='evaluation' v-else>
  450. <view class="btn-green" @click.stop="gotoEvaluateSalesman(state.orderInfo)">去评价
  451. </view>
  452. </view>
  453. </view>
  454. </view>
  455. </view>
  456. <view v-else>
  457. <!-- 待激活 -->
  458. <view class="btns" v-if="state.orderInfo.orderStep == OrderStatus.待激活 ">
  459. <view class="btn btn-primary" @click.stop="gotoActiveOrder(state.orderInfo)">去激活</view>
  460. </view>
  461. </view>
  462. </view>
  463. <!-- 支付宝现在不要哪些按钮 -->
  464. <view v-else>
  465. <view class="btn-view"
  466. v-if="state.orderInfo.orderStatus != OrderStatus.已取消 && state.orderInfo['orderSource'] !='SERVICE_HALL'">
  467. <!-- 信息填写未完成 -->
  468. <view class="btn-status"
  469. v-if="state.orderInfo.orderStep == OrderStatus['完成个人/单位信息上传'] || state.orderInfo.orderStep == OrderStatus.完成填写基本信息 || state.orderInfo.orderStep == OrderStatus.待支付3">
  470. <!-- <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view> -->
  471. <view class="btn-green" @click="gotoEditUserOrUnitInfo(state.orderInfo)">继续申请</view>
  472. </view>
  473. <!-- 审核中/审核不通过 -->
  474. <view
  475. v-if="state.orderInfo.orderStep == OrderStatus.审核不通过 || state.orderInfo.orderStep == OrderStatus.待审核"
  476. class="btn-status">
  477. <!-- <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view> -->
  478. <!-- <view class="btn space" v-if="state.orderInfo.orderStep == OrderStatus.审核不通过"
  479. @click="gotoEditUserOrUnitInfo(state.orderInfo)">修改资料</view> -->
  480. <!-- <view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view> -->
  481. </view>
  482. <!-- 待支付 -->
  483. <view
  484. v-if="state.orderInfo.orderStep == OrderStatus['完成车辆信息上传/待支付'] || state.orderInfo.orderStep == OrderStatus.待支付2 "
  485. class="btn-status">
  486. <!-- <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view> -->
  487. <view class="btn-green width-num-1" @click="gotoOrderDetailsPay(state.orderInfo)">支付</view>
  488. </view>
  489. <!-- 待签约-->
  490. <view v-if="state.orderInfo.orderStep == OrderStatus['已支付/待签约']" class="btn-status">
  491. <!-- <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view> -->
  492. <view class="btn-green" @click="gotoOrderSign(state.orderInfo)">去签约</view>
  493. </view>
  494. <!-- 待发货 -->
  495. <view v-if="state.orderInfo.orderStep == OrderStatus.待发货" class="btn-status">
  496. <!-- <view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view> -->
  497. <!-- <view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view> -->
  498. </view>
  499. <!-- 待收货 -->
  500. <view v-if="state.orderInfo.orderStep == OrderStatus.待收货" class="btn-status">
  501. <view class="btn space" @click="gotoCheckLogistics(state.orderInfo)">查看物流</view>
  502. <!-- <view class="btn space" @click="gotoReturnOrder(state.orderInfo)">申请退货</view> -->
  503. <view class="btn-green space" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
  504. <!-- <view class="btn-green" @click.stop="closeOrder(state.orderInfo)" v-if="state.orderInfo.finishOrder">结束订单</view> -->
  505. </view>
  506. <!-- 待激活 -->
  507. <view v-if="state.orderInfo.orderStep == OrderStatus.待激活" class="btn-status">
  508. <!-- <view class="btn space" @click="gotoReturnOrder(state.orderInfo)">申请退货</view> -->
  509. <!-- <view class="btn space" @click="gotoExchangeOrder(state.orderInfo)">申请换货</view> -->
  510. <view class="btn-green space" @click="gotoActiveOrder(state.orderInfo)">去激活</view>
  511. <!-- <view class="btn-green" @click.stop="closeOrder(state.orderInfo)"
  512. v-if="state.orderInfo.finishOrder">结束订单</view> -->
  513. </view>
  514. <!-- 订单已结束 -->
  515. <view v-if="state.orderInfo.orderStep == OrderStatus.已结束 && state.orderInfo.isUseAgain"
  516. class="btn-status">
  517. <!-- <view class="btn-green" @click.stop="gotoAgainUseOrder(state.orderInfo)">再次使用订单</view> -->
  518. </view>
  519. <!-- 订单完成 -->
  520. <!-- <view v-if="state.isWeiXin==1">
  521. <view
  522. v-if="state.orderInfo.orderStep == OrderStatus.已完成 && (state.orderInfo.orderType =='ISSUE' || state.orderInfo.orderType =='VALUE_TO_ACCOUNT')"
  523. class="btn-status">
  524. <view class="btn space"
  525. v-if="( state.orderInfo.isProduct==1 && state.orderInfo.isService==1) ">
  526. 已评价</view>
  527. <view class="btn-green" v-else @click.stop="gotoEvaluateProduct(state.orderInfo)">去评价产品
  528. </view>
  529. </view>
  530. </view>
  531. <view v-if="state.isWeiXin==2">
  532. <view class="btn-status" v-if="state.orderInfo.orderStep == OrderStatus.已完成">
  533. <view class="btn space" v-if="state.orderInfo.isStaff==1 && state.orderInfo.isProduct==1">
  534. 已评价
  535. </view>
  536. <view class='evaluation' v-else>
  537. <view class="btn-green" @click.stop="gotoEvaluateSalesman(state.orderInfo)">去评价
  538. </view>
  539. </view>
  540. </view>
  541. </view> -->
  542. <!-- 换货中 -->
  543. <!-- <view v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货']" class="btn-status">
  544. <view class="btn space" @click="gotoCheckLogistics(state.orderInfo)">查看物流</view>
  545. <view class="btn-green" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
  546. </view> -->
  547. </view>
  548. <view v-else>
  549. <!-- 待激活 -->
  550. <view class="btns" v-if="state.orderInfo.orderStep == OrderStatus.待激活 ">
  551. <view class="btn btn-primary" @click.stop="gotoActiveOrder(state.orderInfo)">去激活</view>
  552. </view>
  553. </view>
  554. </view>
  555. </view>
  556. </view>
  557. </view>
  558. <!-- 弹窗 -->
  559. <u-popup v-model="state.showActiveOrder" mode="center">
  560. <popup-active-order content="确认是否重新激活订单" @cancel="state.showActiveOrder = false"
  561. @confirm="toActiveOrder"></popup-active-order>
  562. </u-popup>
  563. </template>
  564. <script setup lang="ts">
  565. import popupActiveOrder from "@/pages/order/components/popup-active-order.vue";
  566. import { reactive } from "vue";
  567. import { onLoad, onUnload, onShow } from "@dcloudio/uni-app";
  568. import { request } from "@/utils/network/request";
  569. import { editOrderAddr, orderDetail } from "@/utils/network/api";
  570. import { stringToJson } from "@/utils/network/encryption";
  571. import useOrderSkip from "@/composables/order/useOrderSkip";
  572. import { getETCStatusName, getOBUStatusName, msg, getOrderTypeName, getCarTypeName, getOrderTime, isBlank, timesDiff } from "@/utils/utils";
  573. import { OrderStatus } from "@/datas/enum";
  574. import { source } from "@/utils/network/difference";
  575. const state = reactive({
  576. orderInfo: {
  577. orderInfoExt: {}
  578. } as any, //订单信息
  579. showActiveOrder: false, //激活弹窗
  580. isWeiXin: 1, //1 微信 2 app
  581. appraise: "",
  582. id: ""
  583. });
  584. //按钮跳转业务逻辑
  585. const { gotoEditAddress, gotoCancelOrder, gotoEditUserOrUnitInfo,
  586. gotoConfirmReceipt, gotoCheckLogistics, gotoEvaluateProduct,
  587. gotoActiveOrder, gotoReturnOrder, gotoExchangeOrder, gotoPay, gotoOrderSign, gotoOrderDetailsPay, gotoEvaluateSalesman, closeOrder, gotoAgainUseOrder } = useOrderSkip();
  588. //获取订单详情
  589. const getOrderDetails = (id, appraise) => {
  590. const options = {
  591. type: 2,
  592. data: { "id": id },
  593. method: 'POST',
  594. showLoading: true,
  595. }
  596. request(orderDetail, options).then((res) => {
  597. state.orderInfo = stringToJson(res.bizContent);
  598. // 订单发货后未激活 30天 以后 结束订单功能 insertTime >30 算出来距离今天是负数 updateTime<30(结束订单)
  599. for (var i in state.orderInfo) {
  600. if (state.orderInfo['insertTime']) {
  601. if (timesDiff(state.orderInfo['insertTime'].replace("T", " ")).days > 30) {
  602. state.orderInfo['finishOrder'] = true //可以结束
  603. } else {
  604. state.orderInfo['finishOrder'] = false //不可以结束
  605. }
  606. }
  607. if (state.orderInfo['updateTime']) {
  608. if (timesDiff(state.orderInfo['updateTime'].replace("T", " ")).days <= 30) {
  609. state.orderInfo['isUseAgain'] = true //可以结束
  610. } else {
  611. state.orderInfo['isUseAgain'] = false //不可以结束
  612. }
  613. }
  614. }
  615. state.orderInfo.appraise = appraise;
  616. console.log("获取订单详情", state.orderInfo)
  617. })
  618. }
  619. //修改订单收货地址
  620. const requestEditOrderAddr = (addr) => {
  621. const options = {
  622. type: 2, data: {
  623. "id": state.orderInfo.id,
  624. 'consignee': addr.consignee,
  625. 'consigneeTel': addr.consigneeTel,
  626. 'region': addr.region,
  627. 'address': addr.address,
  628. 'postalCode': addr.postalCode
  629. },
  630. method: 'POST',
  631. showLoading: true,
  632. }
  633. request(editOrderAddr, options).then((res) => {
  634. state.orderInfo.orderInfoExt.id = addr.id,
  635. state.orderInfo.orderInfoExt.consignee = addr.consignee;
  636. state.orderInfo.orderInfoExt.consigneeTel = addr.consigneeTel;
  637. state.orderInfo.orderInfoExt.region = addr.region;
  638. state.orderInfo.orderInfoExt.address = addr.address;
  639. state.orderInfo.orderInfoExt.postalCode = addr.postalCode;
  640. setTimeout(() => {
  641. msg('收货地址修改成功');
  642. }, 1000)
  643. })
  644. }
  645. //激活订单
  646. const toActiveOrder = () => {
  647. gotoActiveOrder(state.orderInfo);
  648. state.showActiveOrder = false;
  649. }
  650. //是否有售后信息
  651. const isHaveAfterSaleInfo = () => {
  652. if (isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.returnMode : null) && isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.exchangeMode : null)) {
  653. return false;
  654. }
  655. return true;
  656. }
  657. onLoad((options) => {
  658. state.isWeiXin = options.isWeiXin
  659. //刷新订单信息
  660. uni.$on('refreshOrder', (data) => {
  661. getOrderDetails(options.id, state.orderInfo.appraise);
  662. });
  663. //修改收货地址
  664. uni.$on('selectAddressSuccess', (addr) => {
  665. requestEditOrderAddr(addr);
  666. });
  667. console.log("optionssdsfd", options)
  668. // getOrderDetails(options.id, options.appraise);
  669. state.id = options.id
  670. state.appraise = options.appraise
  671. })
  672. onShow(() => {
  673. getOrderDetails(state.id, state.appraise);
  674. })
  675. onUnload(() => {
  676. uni.$off('refreshOrder');
  677. uni.$off('selectAddressSuccess');
  678. console.log("已评价")
  679. })
  680. </script>
  681. <style>
  682. page {
  683. background: #EEF7F7;
  684. padding-bottom: 30rpx;
  685. }
  686. :deep(.u-mode-center-box) {
  687. border-radius: 20rpx;
  688. }
  689. </style>
  690. <style lang="scss" scoped>
  691. .address-box {
  692. background: #FFFFFF;
  693. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  694. border-radius: 20rpx;
  695. margin: 30rpx 30rpx 0rpx;
  696. padding: 30rpx;
  697. .avatar {
  698. background: rgba(0, 179, 139, 0.2);
  699. border-radius: 50%;
  700. color: #00B38B;
  701. font-size: 26rpx;
  702. width: 80rpx;
  703. height: 80rpx;
  704. }
  705. .center {
  706. margin-left: 20rpx;
  707. margin-right: 20rpx;
  708. display: flex;
  709. flex-direction: column;
  710. justify-content: center;
  711. .name {
  712. font-size: 30rpx;
  713. font-family: Microsoft YaHei;
  714. font-weight: 400;
  715. color: #333333;
  716. }
  717. .phone {
  718. font-size: 24rpx;
  719. font-family: Microsoft YaHei;
  720. font-weight: 400;
  721. color: #999999;
  722. margin-left: 20rpx;
  723. }
  724. .addr {
  725. margin-top: 18rpx;
  726. font-size: 26rpx;
  727. font-family: Microsoft YaHei;
  728. font-weight: 400;
  729. color: #333333;
  730. line-height: 36rpx;
  731. }
  732. }
  733. .edit {
  734. width: 60rpx;
  735. height: 55rpx;
  736. }
  737. }
  738. .detail-box {
  739. background: #FFFFFF;
  740. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  741. border-radius: 20rpx;
  742. margin: 30rpx;
  743. .detail-header {
  744. display: flex;
  745. border-bottom: 1rpx solid #DCDCDC;
  746. padding: 30rpx;
  747. align-items: center;
  748. .d-img {
  749. width: 48rpx;
  750. height: 48rpx;
  751. }
  752. .detail-name {
  753. font-size: 30rpx;
  754. font-weight: 400;
  755. color: #333333;
  756. margin-left: 12rpx;
  757. }
  758. }
  759. .detail-content {
  760. padding: 28rpx 29rpx 10rpx 29rpx;
  761. .post-sale {
  762. border-top: 1rpx solid #DCDCDC;
  763. padding-top: 38rpx
  764. }
  765. .d-row {
  766. display: flex;
  767. margin-bottom: 32rpx;
  768. .d-label {
  769. font-size: 26rpx;
  770. //width: 135rpx;
  771. color: #999999;
  772. text-align: right;
  773. }
  774. .d-value {
  775. font-size: 26rpx;
  776. color: #333333;
  777. flex: 1;
  778. overflow: hidden;
  779. }
  780. }
  781. .btn-view {
  782. .btn-status {
  783. display: flex;
  784. justify-content: flex-end;
  785. padding: 20rpx 0;
  786. border-top: 1rpx solid #DCDCDC;
  787. }
  788. .space {
  789. margin-right: 19rpx
  790. }
  791. .btn {
  792. border: 1px solid #DCDCDC;
  793. border-radius: 30rpx;
  794. color: #333333;
  795. font-size: 24rpx;
  796. height: 52rpx;
  797. width: 130rpx;
  798. display: flex;
  799. justify-content: center;
  800. align-items: center;
  801. }
  802. .btn-green {
  803. border: 1px solid #00B38B;
  804. border-radius: 30rpx;
  805. color: #00B38B;
  806. height: 52rpx;
  807. padding: 0 10rpx;
  808. display: flex;
  809. justify-content: center;
  810. align-items: center;
  811. font-size: 24rpx;
  812. }
  813. .width-num-1 {
  814. width: 115rpx;
  815. }
  816. .width-num-2 {
  817. width: 221rpx;
  818. }
  819. .width-num-3 {
  820. width: 201rpx;
  821. }
  822. }
  823. }
  824. }
  825. .text-orange {
  826. color: #FF8000 !important;
  827. }
  828. .text-green {
  829. color: #00B38B !important;
  830. }
  831. </style>