orderDetails.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view class="content-orderDetails">
  3. <view class="flex justify_center align_center order-states">
  4. <u-image src="/static/order/prescription_order_icon_pay.png" width="48" height="48"></u-image>
  5. <text>已完成</text>
  6. </view>
  7. <view class="flex justify_center order-time">下单时间:2020-12-12 02:02:23</view>
  8. <view class="order-info">
  9. <view class="flex justify_between item">
  10. <text>店铺名称</text>
  11. <text>华帝金座(菜鸟驿站)</text>
  12. </view>
  13. <view class="flex justify_between item">
  14. <text>订单编号</text>
  15. <text>20202020202020</text>
  16. </view>
  17. <view class="flex justify_between item">
  18. <text>服务骑手</text>
  19. <text>张三</text>
  20. </view>
  21. </view>
  22. <view class="order-info">
  23. <view class="flex justify_between item">
  24. <text>下单用户</text>
  25. <text>18292887584</text>
  26. </view>
  27. </view>
  28. <view class="order-info">
  29. <view class="flex flex_column item type">
  30. <view>回收品类明细</view>
  31. <view></view>
  32. </view>
  33. <view class="flex justify_between item">
  34. <text>黄纸1.2元/千克</text>
  35. <text>5千克/6元</text>
  36. </view>
  37. <view class="flex justify_between item">
  38. <text>黄纸1.2元/千克</text>
  39. <text>5千克/6元</text>
  40. </view>
  41. <view class="flex justify_between item">
  42. <text>黄纸1.2元/千克</text>
  43. <text>5千克/6元</text>
  44. </view>
  45. </view>
  46. </view>
  47. </template>
  48. <script>
  49. </script>
  50. <style lang="less">
  51. .content-orderDetails{
  52. width: 100%;
  53. height: 100vh;
  54. padding: 44upx 32upx;
  55. background-color: #f5f5f5;
  56. .order-states{
  57. margin-bottom: 10upx;
  58. text{
  59. display: inline-block;
  60. margin: 0 10upx;
  61. font-size: 42upx;
  62. color: #191919;
  63. }
  64. }
  65. .order-time{
  66. margin-bottom: 30upx;
  67. }
  68. .order-info{
  69. margin-bottom: 20upx;
  70. background: #FFFFFF;
  71. border-radius: 24upx;
  72. font-weight: 400;
  73. color: #191919;
  74. .item{
  75. padding: 30upx;
  76. border-bottom: 1px soild #bbb;
  77. // &:first-child{
  78. // color: #7C7D7E;
  79. // }
  80. }
  81. .item>text:first-child{
  82. color: #7C7D7E;
  83. }
  84. .type{
  85. color: #7C7D7E;
  86. }
  87. }
  88. }
  89. </style>