index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <view>
  3. <view class="jiazheng-uni-list">
  4. <view>
  5. <view @click="clickAlltype">
  6. 全部类型
  7. </view>
  8. <view v-if="isOpen" v-for="(item,index) in allType" :key="index" @click="onSelectCell(item,index)">
  9. <view class="le-dropdown-cell-active-text">{{item.label}}</view>
  10. <view v-show="item.value==typeChecked" class=""></view>
  11. </view>
  12. <view>
  13. 更新时间
  14. </view>
  15. <view>
  16. 录入时间
  17. </view>
  18. <view>
  19. <view @click="toggle('top')">搜索</view>
  20. </view>
  21. </view>
  22. <view>
  23. <view>
  24. <view>王一一</view>
  25. <view>分享</view>
  26. <view>打电话</view>
  27. </view>
  28. <view>
  29. <image src="" mode=""></image>
  30. <view>
  31. <p> 1000岁|3年经验</p>
  32. <p>四川成都人</p>
  33. </view>
  34. <view>
  35. 待岗
  36. </view>
  37. </view>
  38. </view>
  39. <view>
  40. <!-- 普通弹窗 -->
  41. <uni-popup ref="popup" background-color="#fff">
  42. <view>
  43. asdfdsfadsf阿萨德发生的发的顺丰
  44. </view>
  45. </uni-popup>
  46. </view>
  47. </view>
  48. </view>
  49. </template>
  50. <script setup>
  51. import {
  52. ref
  53. } from "vue";
  54. // import {
  55. // DropdownList
  56. // } from "./data.js";
  57. // const menuList = ref(DropdownList)
  58. const allType = [{
  59. label: "由近到远",
  60. value: 0
  61. },
  62. {
  63. label: "由远到近",
  64. value: 1
  65. },
  66. {
  67. label: "由远到近",
  68. value: 2
  69. },
  70. {
  71. label: "由远到近",
  72. value: 3
  73. },
  74. ]
  75. let isOpen = ref(false)
  76. let typeChecked = ref(1)
  77. const popup = ref(null);
  78. const clickAlltype = (data) => {
  79. isOpen.value = true
  80. }
  81. const onSelectCell = (data, index) => {
  82. console.log('data', data);
  83. console.log('index', index);
  84. isOpen.value = false
  85. }
  86. const toggle = (data, index) => {
  87. popup.value.open('top')
  88. }
  89. </script>
  90. <style>
  91. .jiazheng-uni-list {
  92. display: flex;
  93. width: 100%;
  94. flex-direction: column;
  95. }
  96. .jiazheng-uni-list-left {
  97. position: relative;
  98. display: flex;
  99. flex-direction: row;
  100. justify-content: space-between;
  101. align-items: center;
  102. }
  103. </style>