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

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