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

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