selectCarNo.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <view class="warp">
  3. <view class="content1">
  4. <u-search placeholder="输入车牌号" :show-action="false" v-model="inputKeyword"></u-search>
  5. </view>
  6. <view class="content2" v-if="!inputKeyword">
  7. <view class="title">编号{{contractNo}}可选车牌号如下:</view>
  8. <view class="item-contnet">
  9. <view class="item-list" v-for="(item,index) in newList" :key="index" @click="confirm(item)">
  10. {{item.carNo}}({{item.tranCarNo}})
  11. </view>
  12. </view>
  13. </view>
  14. <view class="content3" v-if="inputKeyword">
  15. <view class="search-item-list" v-for="(item,index) in filterNewList" :key="index" @click="confirm(item)">
  16. {{item.carNo}}
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import helper from '@/common/helper.js';
  23. export default {
  24. data() {
  25. return {
  26. inputKeyword: '',
  27. newList: [],
  28. filterNewList: [],
  29. compId: '',
  30. contractNo:''
  31. }
  32. },
  33. onShow() {
  34. this.newList = uni.getStorageSync('erpContractNo').tranCarInfoList
  35. console.log(this.newList,"List")
  36. this.contractNo = uni.getStorageSync('erpContractNo').contractNo
  37. },
  38. onLoad(options) {
  39. },
  40. watch: {
  41. inputKeyword(val) {
  42. this.filterNewList = this.newList.filter(function(item) {
  43. if (item.carNo.indexOf(val) > -1) {
  44. return item
  45. }
  46. })
  47. }
  48. },
  49. methods: {
  50. confirm(item){
  51. uni.setStorageSync('erpcarNo', item);
  52. uni.setStorageSync('ContractNoCar',item.carNo);
  53. uni.setStorageSync('CarFreight',item.tranPrice);
  54. uni.navigateBack({})
  55. },
  56. }
  57. }
  58. </script>
  59. <style scoped lang="scss">
  60. .content1 {
  61. background: white;
  62. padding: 20rpx;
  63. border-radius: 0 0 20rpx 20rpx;
  64. }
  65. .content2 {
  66. background: white;
  67. margin-top: 20rpx;
  68. padding: 20rpx;
  69. border-radius: 20rpx 20rpx 0 0;
  70. .title {
  71. font-size: 28rpx;
  72. font-weight: 400;
  73. color: #AFB3BF;
  74. }
  75. .item-contnet {
  76. display: flex;
  77. flex-wrap: wrap;
  78. justify-content: space-between;
  79. }
  80. .item-list {
  81. width: 45%;
  82. background: #F5F6F9;
  83. margin: 20rpx 0;
  84. padding: 10rpx 15rpx;
  85. border-radius: 30rpx;
  86. text-align: center;
  87. }
  88. }
  89. .content3 {
  90. height: calc(100vh - 192rpx);
  91. background: white;
  92. padding: 20rpx;
  93. box-sizing: border-box;
  94. }
  95. .search-item-list {
  96. margin: 20rpx;
  97. border-bottom: 1px solid #EEEEEE;
  98. padding-bottom: 20rpx;
  99. }
  100. </style>