|
|
@@ -64,18 +64,39 @@
|
|
|
<uni-popup ref="popup" background-color="#fff">
|
|
|
<view>
|
|
|
<view>
|
|
|
- <uni-section title="全部" type="line">
|
|
|
- <view class="uni-px-5 uni-pb-5">
|
|
|
- <uni-data-select v-model="value" :localdata="range"
|
|
|
- @change="change"></uni-data-select>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 下拉触发按钮 -->
|
|
|
+ <view class="select-box" @click="toggleDropdown">
|
|
|
+ <text class="selected-label">{{ selectedOption || '请选择' }}</text>
|
|
|
+ <text class="arrow" :class="{ 'rotate': isOpen }">▼</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 下拉菜单 -->
|
|
|
+ <view v-if="isOpenSelect" class="dropdown-menu">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in options"
|
|
|
+ :key="index"
|
|
|
+ class="dropdown-item"
|
|
|
+ @click="selectOption(item)"
|
|
|
+ >
|
|
|
+ <text>{{ item.label }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 点击外部关闭的遮罩层 -->
|
|
|
+ <view v-if="isOpenSelect" class="mask" @click="isOpenSelect = false"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="phone-search-box">
|
|
|
+ <input class="search-input" placeholder="请输入职业名称" v-model="zyName" />
|
|
|
+ <view class="search-icon" @click="handleSearch">
|
|
|
+ <uni-icons type="search" size="24" color="#fff"></uni-icons>
|
|
|
</view>
|
|
|
- <view class="phone-search-box">
|
|
|
- <input class="search-input" placeholder="请输入职业名称" v-model="zyName" />
|
|
|
- <view class="search-icon" @click="handleSearch">
|
|
|
- <uni-icons type="search" size="24" color="#fff"></uni-icons>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-section>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
@@ -114,6 +135,20 @@
|
|
|
let data = reactive({
|
|
|
zyName: '', // 职业名称
|
|
|
list: [], // 考试列表
|
|
|
+ list2:[
|
|
|
+ {
|
|
|
+ "value": 0,
|
|
|
+ "text": "全部",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": 1,
|
|
|
+ "text": "姓名"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": 2,
|
|
|
+ "text": "手机号"
|
|
|
+ }
|
|
|
+ ],
|
|
|
loading: false,
|
|
|
page: 0,
|
|
|
size: 10,
|
|
|
@@ -133,9 +168,28 @@
|
|
|
const allJtClass = 'select-jt-default';
|
|
|
const updataJtClass = 'saixuan-jt-default';
|
|
|
const luruJtClass = 'saixuan-jt-click';
|
|
|
+
|
|
|
+ const isOpenSelect = ref(false);
|
|
|
+ const selectedOption = ref('');
|
|
|
+ const options = ref([
|
|
|
+ { label: '全部', value: 1 },
|
|
|
+ { label: '姓名', value: 2 },
|
|
|
+ { label: '手机号', value: 3 }
|
|
|
+ ]);
|
|
|
+
|
|
|
const clickAlltype = (data) => {
|
|
|
isOpen.value = !isOpen.value;
|
|
|
}
|
|
|
+ const toggleDropdown = () => {
|
|
|
+ isOpenSelect.value = !isOpenSelect.value;
|
|
|
+ };
|
|
|
+ const selectOption = (item) => {
|
|
|
+ selectedOption.value = item.label;
|
|
|
+ isOpenSelect.value = false;
|
|
|
+ // 这里可以触发自定义事件
|
|
|
+ // uni.$emit('select-change', item.value);
|
|
|
+ };
|
|
|
+
|
|
|
const onSelectCell = (data, index) => {
|
|
|
console.log('data', data);
|
|
|
console.log('index', index);
|
wangguoyu