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-list-item-new.vue 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427
  1. <!-- 新办订单item
  2. 新办订单状态:待支付、审核中、审核不通过、待发货、待收货、待激活、已完成、已取消、已结束、退货、换货-->
  3. <template>
  4. <view :class="item.orderStatus == OrderStatus.已取消 ? 'item finished' : 'item'"
  5. @click.stop="gotoOrderDetails(item,1)">
  6. <view class="head">
  7. <view class="name">
  8. <image :src="`${$imgUrl}order/icon-star-green.png`" class="icon" mode="aspectFill"></image>
  9. <text class="title">{{item.productName ?item.productName: ''}}</text>
  10. </view>
  11. <view class="status text-orange" v-if="item.orderStatus == OrderStatus.已取消">已取消</view>
  12. <view class="status text-green" v-else
  13. :class="{'text-orange':item.orderStep == OrderStatus.已完成 || item.orderStep == OrderStatus.已结束
  14. || item.orderStep == OrderStatus['换货-设备已回收'] || item.orderStep == OrderStatus.退款成功 || item.orderStep == OrderStatus.退货成功}">
  15. {{getOrderStatusName(item.orderStep)}}
  16. </view>
  17. </view>
  18. <view class="detail">
  19. <view class="orders">
  20. <view class="order-text">
  21. <text class="type">新办单号:</text>
  22. <text class="value">{{item.orderId}}</text>
  23. </view>
  24. <view class="order-text odd">
  25. <text class="type">业务类型:</text>
  26. <text class="value">{{getOrderTypeName(item.orderType)}}</text>
  27. </view>
  28. <view class="order-text">
  29. <text class="type">订单车牌号:</text>
  30. <text class="value">{{item.vehiclePlate}}</text>
  31. </view>
  32. <view class="order-text odd">
  33. <text class="type">订单车牌颜色:</text>
  34. <text class="value">{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
  35. </view>
  36. </view>
  37. <view class="money"><text class="cny">¥</text><text class="amount"
  38. v-if="item.amount">{{item.amount / 100}}</text><text class="amount" v-else>0.00</text>
  39. </view>
  40. </view>
  41. <!-- item.orderSource==1 app -->
  42. <view v-if="item.orderStatus != OrderStatus.已取消 && !item.orderSource">
  43. <!-- 微信小程序正常 -->
  44. <view>
  45. <!-- 信息填写未完成 -->
  46. <view class="btns"
  47. v-if="item.orderStep == OrderStatus['完成个人/单位信息上传'] || item.orderStep == OrderStatus.完成填写基本信息 || item.orderStep == OrderStatus.完成车辆信息上传 || item.orderStep == OrderStatus.待支付3">
  48. <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
  49. <view class="btn btn-primary" @click.stop="gotoEditUserOrUnitInfo(item)">继续申请</view>
  50. </view>
  51. <!-- 待支付 -->
  52. <view class="btns" v-if="item.orderStep == OrderStatus.待加购权益">
  53. <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
  54. <view class="btn btn-primary" @click.stop="gotoEditUserOrUnitInfo(item)">加购权益</view>
  55. </view>
  56. <view class="btns" v-if="item.orderStep == OrderStatus['完成车辆信息上传/待支付']">
  57. <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
  58. <view class="btn btn-primary" @click.stop="gotoOrderDetailsPay(item)">支付</view>
  59. </view>
  60. <view class="btns" v-if="item.orderStep == OrderStatus.待支付2">
  61. <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
  62. <view class="btn btn-primary" @click.stop="gotoOrderDetailsPay(item)">支付</view>
  63. </view>
  64. <view class="btns" v-if="item.orderStep == OrderStatus['已支付/待签约']">
  65. <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
  66. <view class="btn btn-primary" @click.stop="gotoOrderSign(item)">去签约</view>
  67. </view>
  68. <!-- 审核中/审核不通过 -->
  69. <view class="btns" v-if="item.orderStep == OrderStatus.待审核 || item.orderStep == OrderStatus.审核不通过">
  70. <!-- <view class="btn btn-normal" v-if="item.orderStep == OrderStatus.审核不通过"
  71. @click.stop="gotoEditUserOrUnitInfo(item)">修改资料</view> -->
  72. <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
  73. </view>
  74. <!-- 待发货 -->
  75. <view class="btns" v-else-if="item.orderStep == OrderStatus.待发货">
  76. <view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
  77. </view>
  78. <!-- 待收货 -->
  79. <view class="btns" v-else-if="item.orderStep == OrderStatus.待收货">
  80. <view class="btn btn-normal" @click.stop="gotoCheckLogistics(item)">查看物流
  81. </view>
  82. <view class="btn btn-normal" @click.stop="gotoReturnOrder(item)">申请退货
  83. </view>
  84. <view class="btn btn-primary" @click.stop="gotoConfirmReceipt(item)">确认收货</view>
  85. <view class="btn btn-primary" @click.stop="closeOrder(item)" v-if="item.finishOrder">结束订单</view>
  86. </view>
  87. <!-- 待激活 -->
  88. <view class="btns" v-else-if="item.orderStep == OrderStatus.待激活">
  89. <view class="btn btn-normal" @click.stop="gotoReturnOrder(item)" v-if="item.applyReturn">申请退货</view>
  90. <view class="btn btn-normal" @click.stop="gotoExchangeOrder(item)">申请换货</view>
  91. <view class="btn btn-normal" @click.stop="gotoReplenishmentOrder(item)" v-if="item.agencyId==agencyId">申请补货</view>
  92. <view class="btn btn-primary" @click.stop="gotoActiveOrder(item)">去激活</view>
  93. <view class="btn btn-primary" @click.stop="closeOrder(item)" v-if="item.finishOrder">结束订单</view>
  94. </view>
  95. <!-- 已完成 售后订单不允许评价产品,储值卡转记账卡除外-->
  96. <!-- 发行产品 isProduct=0; 业务员 isStaff=0; 权益 isEquity=0 业务服务 isService=0; -->
  97. <view class="btns"
  98. v-else-if="item.orderStep == OrderStatus.已完成 && (item.orderType =='ISSUE' || item.orderType =='VALUE_TO_ACCOUNT') ">
  99. <view class="btn btn-normal" v-if="( item.isProduct==1 && item.isService==1) ">
  100. 已评价
  101. </view>
  102. <view class='evaluation' v-else>
  103. <view class="btn btn-primary" v-if="item.isProduct==0 || item.isService==0"
  104. @click.stop="gotoEvaluateProduct(item)">去评价产品</view>
  105. </view>
  106. </view>
  107. <!-- 已结束 -->
  108. <view class="btns" v-else-if="item.orderStep == OrderStatus.已结束 && item.isUseAgain">
  109. <view class="btn btn-primary" @click.stop="gotoAgainUseOrder(item)">再次使用订单</view>
  110. </view>
  111. <!-- 异地-邮寄地址填写 -->
  112. <view class="btns" v-else-if="item.orderStep == OrderStatus.邮寄地址填写 && item.agencyId==agencyId">
  113. <view class="btn btn-primary" @click.stop="gotoAddressOrder(item)">邮寄地址填写</view>
  114. </view>
  115. </view>
  116. <!-- 换货中 -->
  117. <!-- '完成签约' = 5,
  118. '已申请-退货' = 13,
  119. '退款中' = 15,
  120. '退款成功' = 16,
  121. '退货成功' = 17,
  122. '换货-设备已回收' = 18, -->
  123. </view>
  124. <view v-else>
  125. <!-- 待激活 -->
  126. <view class="btns" v-if="item.orderStep == OrderStatus.待激活">
  127. <view class="btn btn-primary" @click.stop="gotoActiveOrder(item)">去激活</view>
  128. </view>
  129. </view>
  130. </view>
  131. <!-- 弹窗 -->
  132. <u-popup v-model="showActiveOrder" mode="center">
  133. <popup-active-order content="确认是否重新激活订单" @cancel="showActiveOrder = false" @confirm="toActiveOrder">
  134. </popup-active-order>
  135. </u-popup>
  136. </template>
  137. <script lang="ts" setup>
  138. import popupActiveOrder from "./popup-active-order.vue";
  139. import useOrderSkip from "@/composables/order/useOrderSkip";
  140. import { agencyId } from "@/utils/network/difference";
  141. import {
  142. getOrderStatusName,
  143. msg,
  144. getOrderTypeName
  145. } from "@/utils/utils";
  146. import {
  147. ref
  148. } from "vue";
  149. import {
  150. OrderStatus
  151. } from "@/datas/enum";
  152. import {
  153. vehiclePlateColor
  154. } from "@/datas/vehiclePlateColor";
  155. import { source } from "@/utils/network/difference";
  156. defineProps({
  157. item: {
  158. type: Object,
  159. default: () => ({}),
  160. },
  161. });
  162. //是否确认激活订单弹窗
  163. const showActiveOrder = ref(false);
  164. //办理订单按钮跳转业务逻辑
  165. const {
  166. gotoEditAddress,
  167. gotoCancelOrder,
  168. gotoEditUserOrUnitInfo,
  169. gotoConfirmReceipt,
  170. gotoCheckLogistics,
  171. gotoEvaluateOrder,
  172. gotoEvaluateProduct,
  173. gotoEvaluateSalesman,
  174. gotoActiveOrder,
  175. gotoReturnOrder,
  176. gotoExchangeOrder,
  177. gotoOrderDetailsPay,
  178. gotoOrderDetails,
  179. gotoAgainUseOrder,
  180. gotoOrderSign,
  181. closeOrder,
  182. gotoReplenishmentOrder,
  183. gotoAddressOrder
  184. } = useOrderSkip();
  185. //激活订单
  186. const toActiveOrder = (item) => {
  187. gotoActiveOrder(item);
  188. showActiveOrder.value = false;
  189. }
  190. //获取车牌颜色文字
  191. const getVehiclePlateColor = (id : number) => {
  192. const colors = vehiclePlateColor.filter(item => item.id == id);
  193. return colors[0].color
  194. }
  195. </script>
  196. <style lang="scss" scoped>
  197. .item {
  198. background: #ffffff;
  199. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  200. border-radius: 20rpx;
  201. box-sizing: border-box;
  202. display: flex;
  203. flex-direction: column;
  204. margin: 30rpx 30rpx 0rpx;
  205. }
  206. .bg-white .item {
  207. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  208. }
  209. .item .head {
  210. display: flex;
  211. justify-content: space-between;
  212. align-items: center;
  213. padding: 20rpx 28rpx;
  214. border-bottom: 1px solid #dcdcdc;
  215. }
  216. .item .head {
  217. .head-row {
  218. display: flex;
  219. width: 100%;
  220. justify-content: space-between;
  221. align-items: center;
  222. }
  223. .name {}
  224. .name>text {
  225. font-size: 26rpx;
  226. font-family: Noto Sans S Chinese;
  227. font-weight: 400;
  228. color: #999999;
  229. line-height: 36rpx;
  230. }
  231. }
  232. .item .head .icon {
  233. width: 48rpx;
  234. height: 48rpx;
  235. }
  236. .item .head .name {
  237. display: flex;
  238. align-items: center;
  239. }
  240. .text-green {
  241. font-size: 26rpx;
  242. color: #00b38b;
  243. }
  244. .text-orange {
  245. font-size: 26rpx;
  246. color: #ff8000;
  247. }
  248. .text-black {
  249. font-size: 28rpx;
  250. color: #333;
  251. font-weight: 500;
  252. }
  253. .title {
  254. font-size: 30rpx;
  255. color: #333;
  256. }
  257. .tag-green {
  258. font-size: 22rpx;
  259. height: 40rpx;
  260. line-height: 40rpx;
  261. padding: 0 12rpx;
  262. border-radius: 6rpx;
  263. background: #d9f4ee;
  264. color: #00b38b;
  265. }
  266. .tag-grey {
  267. font-size: 22rpx;
  268. height: 40rpx;
  269. line-height: 40rpx;
  270. padding: 0 12rpx;
  271. border-radius: 6rpx;
  272. background: #e8e8e8;
  273. color: #666;
  274. }
  275. .detail {
  276. display: flex;
  277. justify-content: space-between;
  278. align-items: center;
  279. padding: 30rpx 32rpx;
  280. }
  281. .detail .type {
  282. font-size: 26rpx;
  283. color: #999;
  284. }
  285. .detail .value {
  286. font-size: 26rpx;
  287. color: #333;
  288. }
  289. .finished .detail .value {
  290. color: #999;
  291. }
  292. .detail .odd {
  293. margin: 20rpx 0;
  294. }
  295. .cny {
  296. font-size: 26rpx;
  297. color: #333;
  298. }
  299. .finished .cny {
  300. color: #999;
  301. }
  302. .amount {
  303. font-size: 40rpx;
  304. font-weight: bold;
  305. }
  306. .bottom .amount {
  307. color: #ff8000;
  308. }
  309. .finished .amount {
  310. color: #999;
  311. }
  312. .btns {
  313. position: relative;
  314. display: flex;
  315. align-items: center;
  316. justify-content: flex-end;
  317. border-top: 1px solid #dcdcdc;
  318. margin: 0 30rpx;
  319. padding: 20rpx 0;
  320. }
  321. .bottom {
  322. display: flex;
  323. justify-content: space-between;
  324. align-items: center;
  325. border-top: 1px solid #dcdcdc;
  326. margin: 0 30rpx;
  327. padding: 20rpx 0;
  328. }
  329. .btn {
  330. height: 60rpx;
  331. line-height: 58rpx;
  332. border-radius: 30rpx;
  333. padding: 0 24rpx;
  334. font-size: 23rpx;
  335. box-sizing: border-box;
  336. margin-right: 12rpx;
  337. }
  338. .btns .btn:last-child {
  339. margin: 0;
  340. }
  341. .btns .state {
  342. position: absolute;
  343. left: 0;
  344. font-size: 26rpx;
  345. font-family: Noto Sans S Chinese;
  346. font-weight: 400;
  347. color: #999999;
  348. line-height: 58rpx;
  349. text {
  350. font-size: 26rpx;
  351. font-family: Noto Sans S Chinese;
  352. font-weight: 400;
  353. color: #00B38B;
  354. line-height: 58rpx;
  355. }
  356. }
  357. .btn-primary {
  358. border: 1px solid #00b38b;
  359. color: #00b38b;
  360. }
  361. .btn-disable {
  362. border: 1px solid #999;
  363. color: #999;
  364. }
  365. .btn-normal {
  366. border: 1px solid #dcdcdc;
  367. color: #333;
  368. }
  369. .evaluation {
  370. display: flex;
  371. }
  372. </style>