orderDetail.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <template>
  2. <view class="pages flex flex_column">
  3. <u-read-more toggle close-text="展开全部">
  4. <view class="uuid-list">
  5. <view v-for="item in detail.uuid" :key="item.code">
  6. <view class="flex align_center">
  7. <view class="uuid-info">
  8. <view>轮胎名称:{{item.name}}</view>
  9. <view class="uuid">轮胎唯一码:{{item.code}}</view>
  10. <view class="uuid">质保时间:2023-10-23至2026-10-23</view>
  11. </view>
  12. <view class="uuid-img">
  13. <image style="width: 100%;height: 80px;background: #eaeaea;" :src="item.img"></image>
  14. </view>
  15. </view>
  16. <view class="state" :class="item.state"></view>
  17. </view>
  18. </view>
  19. </u-read-more>
  20. <view class="forms">
  21. <view class="forms-tits">门店信息</view>
  22. <view class="flex align_center">
  23. <view class="labes">门店名称:</view>
  24. <view class="inputs">赢信汽车贸易有限公司</view>
  25. </view>
  26. <view class="flex align_center">
  27. <view class="labes">汽配经销商:</view>
  28. <view class="inputs">箭冠汽配东莞寮步店</view>
  29. </view>
  30. <view class="flex align_center">
  31. <view class="labes">姓名:</view>
  32. <view class="inputs">高山</view>
  33. </view>
  34. <view class="flex align_center">
  35. <view class="labes">电话:</view>
  36. <view class="inputs">15349286715</view>
  37. </view>
  38. </view>
  39. <view class="forms">
  40. <view class="forms-tits">车辆信息</view>
  41. <view class="flex align_center">
  42. <view class="labes">车辆品牌:</view>
  43. <view class="inputs">大众</view>
  44. </view>
  45. <view class="flex align_center">
  46. <view class="labes">车型:</view>
  47. <view class="inputs">速腾1.6L</view>
  48. </view>
  49. <view class="flex align_center">
  50. <view class="labes">里程数:</view>
  51. <view class="inputs">1600KM</view>
  52. </view>
  53. <view class="flex align_center">
  54. <view class="labes">车牌号:</view>
  55. <view class="inputs">陕A53LL9</view>
  56. </view>
  57. <view class="flex align_center">
  58. <view class="labes">客户姓名:</view>
  59. <view class="inputs">张生</view>
  60. </view>
  61. <view class="flex align_center">
  62. <view class="labes">手机号码:</view>
  63. <view class="inputs">15349286715</view>
  64. </view>
  65. </view>
  66. </view>
  67. </template>
  68. <script>
  69. export default {
  70. data() {
  71. return {
  72. detail: null
  73. }
  74. },
  75. onLoad() {
  76. this.detail = this.$store.state.vuex_uuidTempData
  77. },
  78. methods: {
  79. }
  80. }
  81. </script>
  82. <style lang="less">
  83. .pages{
  84. height: 100vh;
  85. background: #f8f8f8;
  86. padding-bottom: 6rem;
  87. overflow: auto;
  88. .uuid-list{
  89. background: #fff;
  90. text-indent: 0;
  91. line-height: normal;
  92. font-size: 28rpx;
  93. > view{
  94. justify-content: space-between;
  95. border-bottom: 1px solid #eee;
  96. padding: 0.6rem 1rem;
  97. position: relative;
  98. }
  99. .state{
  100. background-repeat: no-repeat;
  101. background-size: 100%;
  102. background-position: center center;
  103. position: absolute;
  104. width: 5rem;
  105. height: 5rem;
  106. z-index: 1000;
  107. bottom: 0.5rem;
  108. right: 1rem;
  109. }
  110. .inhand{
  111. background-image: url(/pagesA/static/inhand.png);
  112. }
  113. .outof{
  114. background-image: url(/pagesA/static/outof.png);
  115. }
  116. color: #666;
  117. .uuid-info{
  118. flex-grow: 1;
  119. padding-right: 0.5rem;
  120. line-height: 1.5rem;
  121. }
  122. .uuid{
  123. color: #333;
  124. }
  125. .uuid-img{
  126. width: 7rem;
  127. }
  128. }
  129. .buttons{
  130. padding: 1rem 2rem 2rem;
  131. position: fixed;
  132. width: 100%;
  133. bottom: 0;
  134. left: 0;
  135. background: #fff;
  136. z-index: 10000;
  137. border-top: 1px solid #eee;
  138. justify-content: space-around;
  139. /deep/ .u-btn{
  140. width: 7rem;
  141. }
  142. }
  143. }
  144. .forms{
  145. background: #fff;
  146. margin-top: 0.5rem;
  147. .forms-tits{
  148. font-weight: bold;
  149. color: #333;
  150. }
  151. > view{
  152. border-bottom: 1px solid #eee;
  153. padding: 0.6rem 1rem;
  154. }
  155. .labes{
  156. width: 6rem;
  157. padding-right: 0.6rem;
  158. text{
  159. color: red;
  160. margin-right: 5px;
  161. }
  162. }
  163. .inputs{
  164. flex-grow: 1;
  165. }
  166. }
  167. </style>