searchOrder.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <view class="pages flex flex_column">
  3. <view class="search-box">
  4. <u-search placeholder="请输入轮胎唯一码/手机号码" v-model="keyword"></u-search>
  5. </view>
  6. <view class="uuid-list">
  7. <view v-for="item in detail.uuid" :key="item.code" @click="toDetail(item)">
  8. <view class="flex align_center">
  9. <view class="uuid-info">
  10. <view>轮胎名称:{{item.name}}</view>
  11. <view class="uuid">轮胎唯一码:{{item.code}}</view>
  12. <view class="uuid">质保时间:2023-10-23至2026-10-23</view>
  13. <view class="uuid">手机号码:15349286715</view>
  14. </view>
  15. <view class="uuid-img">
  16. <image style="width: 100%;height: 80px;background: #eaeaea;" :src="item.img"></image>
  17. </view>
  18. </view>
  19. <view class="state" :class="item.state"></view>
  20. </view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. keyword: '',
  29. detail: null
  30. }
  31. },
  32. onLoad() {
  33. this.detail = this.$store.state.vuex_uuidTempData
  34. },
  35. methods: {
  36. toDetail(item){
  37. uni.navigateTo({
  38. url: "/pagesA/qualityPolicy/orderDetail?id="+item.code
  39. })
  40. }
  41. }
  42. }
  43. </script>
  44. <style lang="less">
  45. .pages{
  46. height: 100vh;
  47. background: #f8f8f8;
  48. overflow: auto;
  49. .search-box{
  50. padding: 1rem;
  51. background: #fff;
  52. }
  53. .uuid-list{
  54. flex-grow: 1;
  55. > view{
  56. justify-content: space-between;
  57. border-bottom: 1px solid #eee;
  58. padding: 0.6rem 1rem;
  59. position: relative;
  60. background: #fff;
  61. margin-top: 0.5rem;
  62. }
  63. .state{
  64. background-repeat: no-repeat;
  65. background-size: 100%;
  66. background-position: center center;
  67. position: absolute;
  68. width: 5rem;
  69. height: 5rem;
  70. z-index: 1000;
  71. bottom: 0.5rem;
  72. right: 1rem;
  73. }
  74. .inhand{
  75. background-image: url(/pagesA/static/inhand.png);
  76. }
  77. .outof{
  78. background-image: url(/pagesA/static/outof.png);
  79. }
  80. color: #666;
  81. .uuid-info{
  82. flex-grow: 1;
  83. padding-right: 0.5rem;
  84. line-height: 1.5rem;
  85. }
  86. .uuid{
  87. color: #333;
  88. }
  89. .uuid-img{
  90. width: 7rem;
  91. }
  92. }
  93. }
  94. </style>