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

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