searchPage.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <view class="searchPage-wrap">
  3. <!-- 搜索 -->
  4. <u-search shape="square" placeholder="请输入门店名称搜索" v-model="keyword" action-text="取消" @change="change" @search="search" @custom="custom"></u-search>
  5. <!-- 列表数据 -->
  6. <view class="listData-con">
  7. <view class="listData-item" v-for="(item, index) in list" :key="index" @click="goPage(item)">
  8. <view class="listData-item-l">
  9. <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
  10. <text class="listData-item-l-name">{{item.name}}</text>
  11. </view>
  12. <view class="listData-item-r">
  13. <u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
  14. </view>
  15. </view>
  16. <u-empty :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" :margin-top="80" mode="list"></u-empty>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default{
  22. data(){
  23. return{
  24. keyword: '', // 关键字
  25. list: [ // 数据列表
  26. { name: '常青二路店' },
  27. { name: '常青二路店常青青二路店常路店' },
  28. { name: '常青二路店' },
  29. { name: '常青二路店' },
  30. { name: '常青二路店' },
  31. { name: '常青二路店' },
  32. ],
  33. noDataText: '暂无数据', // 数据异常提示
  34. }
  35. },
  36. methods: {
  37. // 用户点击右侧控件时触发
  38. custom(val){
  39. },
  40. // 输入框内容发生变化时触发
  41. change(val){
  42. let i = this.throttle(this.handle(), 1000)
  43. // console.log(i)
  44. },
  45. // 用户确定搜索时触发,用户按回车键,或者手机键盘右下角的"搜索"键时触发
  46. search(val){
  47. },
  48. // 节流throttle代码(时间戳+定时器)
  49. throttle(fn,delay){
  50. let valid = true
  51. return function() {
  52. if(!valid){
  53. //休息时间 暂不接客
  54. return false
  55. }
  56. // 工作时间,执行函数并且在间隔期内把状态位设为无效
  57. valid = false
  58. setTimeout(() => {
  59. fn()
  60. valid = true;
  61. }, delay)
  62. }
  63. },
  64. handle(){
  65. console.log(12)
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="scss" scoped>
  71. page {
  72. background-color: #f8f8f8;
  73. height: calc(100vh - 44px);
  74. }
  75. .searchPage-wrap{
  76. padding: 20upx 30upx 0;
  77. .listData-con{
  78. .listData-item{
  79. display: flex;
  80. justify-content: space-between;
  81. align-items: center;
  82. padding: 20upx 0;
  83. border-bottom: 1upx dashed #f8f8f8;
  84. &-l{
  85. flex-grow: 1;
  86. padding-right: 10upx;
  87. position: relative;
  88. padding-left: 50upx;
  89. &-icon{
  90. vertical-align: sub;
  91. padding-right: 8upx;
  92. position: absolute;
  93. left: 0;
  94. top: -4upx;
  95. }
  96. }
  97. &-r{
  98. flex-shrink: 0;
  99. }
  100. }
  101. }
  102. }
  103. </style>