vue_zhongyou 1.0.1

package//346/226/207/344/273/266/fitler.vue

@@ -0,0 +1,455 @@
+<template>
+    <div class="filter-container">
+      <!-- 已选标签区 -->
+      <div class="selected-tags" v-if="hasSelected">
+        <div class="tag" v-for="(value, key) in selected" :key="key">
+          <span class="tag-text">
+            {{ getFilterLabel(key) }}: {{ formatValue(key, value) }}
+          </span>
+          <van-icon name="close" class="tag-close" @click.stop="handleDelete(key)" />
+        </div>
+        <button class="clear-all" @click="clearAll">清除全部</button>
+      </div>
+  
+      <!-- 筛选栏 -->
+      <div class="filter-bar">
+        <div 
+          v-for="item in filterConfig" 
+          :key="item.key" 
+          class="filter-item"
+          :class="{ active: activeKey === item.key }"
+          @click="togglePanel(item.key)"
+        >
+          <span>{{ item.label }}</span>
+          <van-icon name="arrow-down" class="filter-arrow" :rotate="activeKey === item.key ? 180 : 0" />
+        </div>
+      </div>
+  
+      <!-- 面板遮罩 -->
+      <div 
+        class="panel-mask" 
+        v-if="activeKey" 
+        @click="closePanel"
+      ></div>
+  
+      <!-- 筛选面板 -->
+      <div 
+        class="filter-panel" 
+        :class="{ show: activeKey }"
+      >
+        <!-- 面板标题 -->
+        <div class="panel-header">
+          <h3>{{ getFilterLabel(activeKey) }}</h3>
+          <button class="panel-close" @click="closePanel">完成</button>
+        </div>
+  
+        <!-- 选项列表（根据类型渲染） -->
+        <div class="panel-content">
+          <template v-if="currentFilter">
+            <!-- 单选类型（如距离、评分） -->
+            <div v-if="currentFilter.type === 'radio'">
+              <div 
+                class="option-item"
+                v-for="opt in currentFilter.options"
+                :key="opt.value"
+                :class="{ selected: selected[activeKey] === opt.value }"
+                @click="handleSelect(activeKey, opt.value)"
+              >
+                {{ opt.label }}
+                <van-icon 
+                  name="check" 
+                  class="option-check" 
+                  v-if="selected[activeKey] === opt.value" 
+                />
+              </div>
+            </div>
+  
+            <!-- 多选类型（如分类） -->
+            <div v-if="currentFilter.type === 'checkbox'">
+              <div 
+                class="option-item"
+                v-for="opt in currentFilter.options"
+                :key="opt.value"
+                :class="{ selected: selected[activeKey]?.includes(opt.value) }"
+                @click="handleMultiSelect(activeKey, opt.value)"
+              >
+                {{ opt.label }}
+                <van-icon 
+                  name="check" 
+                  class="option-check" 
+                  v-if="selected[activeKey]?.includes(opt.value)" 
+                />
+              </div>
+            </div>
+  
+            <!-- 价格区间类型 -->
+            <div v-if="currentFilter.type === 'price'">
+              <div class="price-inputs">
+                <input 
+                  type="number" 
+                  v-model="priceRange.min" 
+                  placeholder="最低" 
+                  @input="handlePriceChange"
+                >
+                <span>-</span>
+                <input 
+                  type="number" 
+                  v-model="priceRange.max" 
+                  placeholder="最高" 
+                  @input="handlePriceChange"
+                >
+                <span class="price-unit">元</span>
+              </div>
+              <div class="price-options">
+                <div 
+                  class="option-item"
+                  v-for="opt in currentFilter.options"
+                  :key="opt.value"
+                  :class="{ selected: selected[activeKey] === opt.value }"
+                  @click="handleSelect(activeKey, opt.value)"
+                >
+                  {{ opt.label }}
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, reactive, computed, watch } from 'vue';
+  import { Icon } from 'vant';
+  
+  // 接收父组件传入的筛选配置
+  const props = defineProps({
+    filterConfig: {
+      type: Array,
+      required: true,
+      // 配置项格式示例：
+      // [
+      //   { key: 'category', label: '分类', type: 'checkbox', options: [{ value: '1', label: '美食' }, ...] },
+      //   { key: 'distance', label: '距离', type: 'radio', options: [{ value: '1000', label: '1km内' }, ...] },
+      // ]
+    }
+  });
+  
+  // 状态管理
+  const activeKey = ref(''); // 当前展开的筛选项key
+  const selected = reactive({}); // 选中的值：{ category: ['1', '2'], distance: '1000' }
+  const priceRange = reactive({ min: '', max: '' }); // 价格区间临时值
+  
+  // 计算当前激活的筛选配置
+  const currentFilter = computed(() => {
+    return props.filterConfig.find(item => item.key === activeKey.value);
+  });
+  
+  // 检查是否有选中项
+  const hasSelected = computed(() => {
+    return Object.keys(selected).some(key => {
+      const value = selected[key];
+      return (Array.isArray(value) && value.length > 0) || (value !== undefined && value !== '');
+    });
+  });
+  
+  // 切换面板显示/隐藏
+  const togglePanel = (key) => {
+    if (activeKey.value === key) {
+      closePanel();
+    } else {
+      activeKey.value = key;
+      // 初始化价格区间（如果是价格类型）
+      if (key === 'price' && selected.price && !selected.price.includes('-')) {
+        const [min, max] = selected.price.split('-').map(Number);
+        priceRange.min = min || '';
+        priceRange.max = max || '';
+      }
+    }
+  };
+  
+  // 关闭面板
+  const closePanel = () => {
+    activeKey.value = '';
+    // 触发父组件筛选事件
+    emit('filterChange', { ...selected });
+  };
+  
+  // 单选/区间选择处理
+  const handleSelect = (key, value) => {
+    // 取消选择（再次点击已选项）
+    if (selected[key] === value) {
+      delete selected[key];
+    } else {
+      selected[key] = value;
+    }
+  };
+  
+  // 多选处理
+  const handleMultiSelect = (key, value) => {
+    if (!selected[key]) {
+      selected[key] = [];
+    }
+    const index = selected[key].indexOf(value);
+    if (index > -1) {
+      // 移除选中
+      selected[key].splice(index, 1);
+      // 为空时删除键
+      if (selected[key].length === 0) {
+        delete selected[key];
+      }
+    } else {
+      // 添加选中
+      selected[key].push(value);
+    }
+  };
+  
+  // 价格区间输入处理
+  const handlePriceChange = () => {
+    const { min, max } = priceRange;
+    if (min || max) {
+      selected.price = `${min || ''}-${max || ''}`;
+    } else {
+      delete selected[activeKey.value];
+    }
+  };
+  
+  // 删除单个选中项
+  const handleDelete = (key) => {
+    delete selected[key];
+    // 通知父组件更新
+    emit('filterChange', { ...selected });
+  };
+  
+  // 清除所有选中项
+  const clearAll = () => {
+    Object.keys(selected).forEach(key => {
+      delete selected[key];
+    });
+    priceRange.min = '';
+    priceRange.max = '';
+    emit('filterChange', { ...selected });
+  };
+  
+  // 获取筛选项的标签文本
+  const getFilterLabel = (key) => {
+    const item = props.filterConfig.find(i => i.key === key);
+    return item?.label || '';
+  };
+  
+  // 格式化选中值的显示文本
+  const formatValue = (key, value) => {
+    const item = props.filterConfig.find(i => i.key === key);
+    if (!item) return value;
+  
+    // 多选类型（拼接标签）
+    if (item.type === 'checkbox' && Array.isArray(value)) {
+      const labels = value.map(v => {
+        const opt = item.options.find(o => o.value === v);
+        return opt?.label || v;
+      });
+      return labels.join('、');
+    }
+  
+    // 单选/价格类型
+    if (item.type === 'radio' || item.type === 'price') {
+      const opt = item.options.find(o => o.value === value);
+      return opt?.label || value;
+    }
+  
+    return value;
+  };
+  
+  // 向父组件发射筛选变化事件
+  const emit = defineEmits(['filterChange']);
+  
+  // 监听价格面板关闭时重置临时输入
+  watch(activeKey, (newVal) => {
+    if (newVal !== 'price') {
+      priceRange.min = '';
+      priceRange.max = '';
+    }
+  });
+  </script>
+  
+  <style scoped>
+  .filter-container {
+    background-color: #fff;
+  }
+  
+  /* 已选标签区 */
+  .selected-tags {
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    border-bottom: 1px solid #f5f5f5;
+  }
+  
+  .tag {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    background-color: #f5f5f5;
+    border-radius: 16px;
+    font-size: 12px;
+  }
+  
+  .tag-text {
+    margin-right: 4px;
+  }
+  
+  .tag-close {
+    width: 14px;
+    height: 14px;
+    color: #999;
+  }
+  
+  .clear-all {
+    margin-left: auto;
+    font-size: 12px;
+    color: #666;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  
+  /* 筛选栏 */
+  .filter-bar {
+    display: flex;
+    overflow-x: auto;
+    padding: 0 16px;
+    height: 44px;
+    border-bottom: 1px solid #f5f5f5;
+  }
+  
+  .filter-item {
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    height: 100%;
+    white-space: nowrap;
+    font-size: 14px;
+    color: #333;
+    cursor: pointer;
+  }
+  
+  .filter-item.active {
+    color: #ff7d00; /* 大众点评橙色调 */
+  }
+  
+  .filter-arrow {
+    width: 16px;
+    height: 16px;
+    margin-left: 4px;
+    transition: transform 0.3s;
+  }
+  
+  /* 面板遮罩 */
+  .panel-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 100;
+  }
+  
+  /* 筛选面板 */
+  .filter-panel {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #fff;
+    border-radius: 16px 16px 0 0;
+    z-index: 101;
+    transform: translateY(100%);
+    transition: transform 0.3s;
+    max-height: 80vh;
+  }
+  
+  .filter-panel.show {
+    transform: translateY(0);
+  }
+  
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #f5f5f5;
+    position: relative;
+  }
+  
+  .panel-header h3 {
+    font-size: 16px;
+    font-weight: 500;
+  }
+  
+  .panel-close {
+    position: absolute;
+    right: 16px;
+    font-size: 14px;
+    color: #ff7d00;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .panel-content {
+    padding: 16px;
+    overflow-y: auto;
+    max-height: calc(80vh - 50px);
+  }
+  
+  /* 选项样式 */
+  .option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid #f5f5f5;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  
+  .option-item.selected {
+    color: #ff7d00;
+  }
+  
+  .option-check {
+    width: 18px;
+    height: 18px;
+    color: #ff7d00;
+  }
+  
+  /* 价格区间样式 */
+  .price-inputs {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 0;
+    border-bottom: 1px solid #f5f5f5;
+  }
+  
+  .price-inputs input {
+    flex: 1;
+    height: 36px;
+    padding: 0 8px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .price-unit {
+    color: #666;
+    font-size: 14px;
+  }
+  
+  .price-options {
+    margin-top: 16px;
+  }
+  </style>

package//346/226/207/344/273/266/useFilter.vue

@@ -0,0 +1,110 @@
+<template>
+    <div>
+      <FilterPanel 
+        :filter-config="filterConfig" 
+        @filterChange="handleFilterChange"
+      />
+      <!-- 列表内容 -->
+      <div class="list-container">
+        <div v-for="item in filteredList" :key="item.id" class="list-item">
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, computed } from 'vue';
+  import FilterPanel from './FilterPanel.vue';
+  
+  // 筛选配置（根据业务需求定义）
+  const filterConfig = [
+    {
+      key: 'category',
+      label: '分类',
+      type: 'checkbox',
+      options: [
+        { value: '1', label: '美食' },
+        { value: '2', label: '电影' },
+        { value: '3', label: '酒店' },
+        { value: '4', label: '休闲娱乐' },
+        { value: '5', label: '丽人' }
+      ]
+    },
+    {
+      key: 'distance',
+      label: '距离',
+      type: 'radio',
+      options: [
+        { value: '1000', label: '1km内' },
+        { value: '3000', label: '3km内' },
+        { value: '5000', label: '5km内' },
+        { value: '10000', label: '10km内' }
+      ]
+    },
+    {
+      key: 'price',
+      label: '价格',
+      type: 'price',
+      options: [
+        { value: '0-50', label: '50元以下' },
+        { value: '50-100', label: '50-100元' },
+        { value: '100-200', label: '100-200元' },
+        { value: '200-500', label: '200-500元' },
+        { value: '500-', label: '500元以上' }
+      ]
+    },
+    {
+      key: 'rating',
+      label: '评分',
+      type: 'radio',
+      options: [
+        { value: '4.5', label: '4.5分以上' },
+        { value: '4.0', label: '4.0分以上' },
+        { value: '3.5', label: '3.5分以上' }
+      ]
+    }
+  ];
+  
+  // 原始列表数据
+  const rawList = ref([
+    { id: 1, name: '肯德基', category: '1', distance: '800', price: '30-50', rating: '4.2' },
+    { id: 2, name: '万达影城', category: '2', distance: '2500', price: '50-100', rating: '4.5' },
+    { id: 3, name: '希尔顿酒店', category: '3', distance: '6000', price: '500-', rating: '4.7' }
+  ]);
+  
+  // 筛选后的列表
+  const filteredList = ref([...rawList.value]);
+  
+  // 处理筛选变化
+  const handleFilterChange = (filters) => {
+    // 根据筛选条件过滤列表（实际项目中可能是请求接口）
+    let result = [...rawList.value];
+    
+    // 分类筛选（多选）
+    if (filters.category?.length) {
+      result = result.filter(item => filters.category.includes(item.category));
+    }
+    
+    // 距离筛选
+    if (filters.distance) {
+      result = result.filter(item => Number(item.distance) <= Number(filters.distance));
+    }
+    
+    // 价格筛选
+    if (filters.price) {
+      const [min, max] = filters.price.split('-').map(Number);
+      result = result.filter(item => {
+        const [itemMin, itemMax] = item.price.split('-').map(Number);
+        return (min === '' || itemMin >= min) && (max === '' || itemMax <= max);
+      });
+    }
+    
+    // 评分筛选
+    if (filters.rating) {
+      result = result.filter(item => Number(item.rating) >= Number(filters.rating));
+    }
+    
+    filteredList.value = result;
+  };
+  </script>