w-ui-v1 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-ui-v1",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "w-ui",
   "author": "wgxshh",
   "license": "ISC",

package/utils/http.ts

@@ -1,8 +1,8 @@
 // 用promise 封装uni.request
 export default function request(options: any): Promise<any> {
-  const baseUrl = uni.getStorageSync('baseUrl') || '/'
+  const baseUrl = 'http://1.94.178.181:8082'
   const hydrocarbonProgramToken = uni.getStorageSync('hydrocarbonProgramToken') || ''
-  const token = uni.getStorageSync('token') || 'http://1.94.178.181:8082'
+  const token = uni.getStorageSync('token') || ''
   const header = options.header || {}
   return new Promise((resolve, reject) => {
     uni.request({

package/{w-table/components/foldCardTemplate.vue → w-card/w-card.vue}

@@ -14,6 +14,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  carIndex: {
+    type: Number,
+    required: true,
+  },
 })
 
 // 处理单项数据、配置
@@ -157,6 +161,11 @@ function toggleExpand() {
               v-if="getValue(item.content, item.title)?.type === '图片'" width="100rpx" height="100rpx"
               :src="getValue(item.content, item.title).url" :enable-preview="true"
             />
+            <view v-else-if="item.title === '序号'">
+              {{
+                carIndex + 1
+              }}
+            </view>
             <view v-else class="value">
               {{ getValue(item.content, item.title) }}
             </view>

package/w-select-picker/index.scss

@@ -0,0 +1,185 @@
+@import 'wot-design-uni/components/common/abstracts/variable';
+@import 'wot-design-uni/components/common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(select-picker) {
+    @include when(border) {
+      .wd-select-picker__cell {
+        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include e(cell) {
+      background-color: $-dark-background2;
+      color: $-dark-color;
+      @include when(disabled) {
+        .wd-select-picker__value {
+          color: $-dark-color3;
+        }
+      }
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+    @include e(value) {
+      color: $-dark-color;
+      @include m(placeholder) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    :deep(.wd-select-picker__arrow),
+    :deep(.wd-select-picker__close),
+    :deep(.wd-select-picker__clear) {
+      color: $-dark-color;
+    }
+
+  }
+
+}
+
+@include b(select-picker) {
+  @include when(border) {
+    .wd-select-picker__cell {
+      @include halfPixelBorder('top', $-cell-padding);
+    }
+  }
+  @include e(cell) {
+    position: relative;
+    display: flex;
+    padding: $-cell-wrapper-padding $-cell-padding;
+    align-items: flex-start;
+    background-color: $-color-white;
+    text-decoration: none;
+    color: $-cell-title-color;
+    font-size: $-cell-title-fs;
+    overflow: hidden;
+    line-height: $-cell-line-height;
+  }
+  @include e(cell) {
+    @include when(disabled) {
+      .wd-select-picker__value {
+        color: $-input-disabled-color;
+      }
+    }
+    @include when(align-right) {
+      .wd-select-picker__value {
+        text-align: right;
+      }
+    }
+    @include when(error) {
+      .wd-select-picker__value {
+        color: $-input-error-color;
+      }
+      :deep(.wd-select-picker__arrow) {
+        color: $-input-error-color;
+      }
+    }
+    @include when(large) {
+      font-size: $-cell-title-fs-large;
+
+      :deep(.wd-select-picker__arrow),
+      :deep(.wd-select-picker__clear) {
+        font-size: $-cell-icon-size-large;
+      }
+    }
+  }
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+  @include e(label) {
+    position: relative;
+    width: $-input-cell-label-width;
+    color: $-cell-title-color;
+    margin-right: $-cell-padding;
+    box-sizing: border-box;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: '*';
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+      }
+    }
+  }
+  @include e(value-wraper) {
+    display: flex;
+  }
+  @include e(value) {
+    flex: 1;
+    margin-right: 10px;
+    color: $-cell-value-color;
+    
+    @include when(ellipsis) {
+      @include lineEllipsis;
+    }
+    @include m(placeholder) {
+      color: $-input-placeholder-color;
+    }
+  }
+  @include e(body) {
+    flex: 1;
+  }
+  @include edeep(arrow, clear) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+
+  @include edeep(clear) {
+    color: $-cell-clear-color;
+  }
+ 
+  @include e(loading) {
+    position: absolute;
+    display: flex;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    background: $-picker-loading-bg;
+  }
+  // selectPiceker多出的样式
+  @include edeep(header) {
+    height: 72px;
+    line-height: 72px;
+  }
+  @include e(wrapper) {
+    padding: 0 10px;
+    position: relative;
+    max-height: 356px;
+    box-sizing: border-box;
+    overflow: auto;
+
+    @include when(filterable) {
+      height: 314px;
+      max-height: 314px;
+    }
+
+    @include when(loading) {
+      overflow: hidden;
+    }
+  }
+  @include e(text-active) {
+    color: $-color-theme;
+  }
+
+  @include e(footer) {
+    padding: 24px 15px;
+  }
+}

package/w-select-picker/types.ts

@@ -0,0 +1,105 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from 'wot-design-uni/components/common/props'
+import type { FormItemRule } from 'wot-design-uni/components/wd-form/types'
+
+export type SelectPickerType = 'checkbox' | 'radio'
+
+export const selectPickerProps = {
+  ...baseProps,
+  /** 选择器左侧文案 */
+  label: String,
+  /** 设置左侧标题宽度 */
+  labelWidth: makeStringProp('33%'),
+  /** 禁用 */
+  disabled: makeBooleanProp(false),
+  /** 只读 */
+  readonly: Boolean,
+  /** 选择器占位符 */
+  placeholder: String,
+  /** 弹出层标题 */
+  title: String,
+  /** 选择器的值靠右展示 */
+  alignRight: makeBooleanProp(false),
+  /** 是否为错误状态，错误状态时右侧内容为红色 */
+  error: makeBooleanProp(false),
+  /** 必填样式 */
+  required: makeBooleanProp(false),
+  /** 使用 label 插槽时设置该选项 */
+  useLabelSlot: makeBooleanProp(false),
+  /** 使用默认插槽时设置该选项 */
+  useDefaultSlot: makeBooleanProp(false),
+  /** 设置选择器大小 */
+  size: String,
+  /** 选中的颜色（单/复选框） */
+  checkedColor: String,
+  /** 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） */
+  min: makeNumberProp(0),
+  /** 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） */
+  max: makeNumberProp(0),
+  /** 设置 picker 内部的选项组尺寸大小 （单/复选框） */
+  selectSize: String,
+  /** 加载中 */
+  loading: makeBooleanProp(false),
+  /** 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 */
+  loadingColor: makeStringProp('#4D80F0'),
+  /** 点击遮罩是否关闭 */
+  closeOnClickModal: makeBooleanProp(true),
+  /** 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string */
+  modelValue: makeRequiredProp([String, Number, Boolean, Array] as PropType<string | number | boolean | (string | number | boolean)[]>),
+  /** 选择器数据，一维数组 */
+  columns: makeArrayProp<Record<string, any>>(),
+  /** 单复选选择器类型 */
+  type: makeStringProp<SelectPickerType>('checkbox'),
+  /** 选项对象中，value 对应的 key */
+  valueKey: makeStringProp('value'),
+  /** 选项对象中，展示的文本对应的 key */
+  labelKey: makeStringProp('label'),
+  /** 确认按钮文案 */
+  confirmButtonText: String,
+  /** 自定义展示文案的格式化函数，返回一个字符串 */
+  displayFormat: Function as PropType<SelectPickerDisplayFormat>,
+  /** 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 */
+  beforeConfirm: Function as PropType<SelectPickerBeforeConfirm>,
+  /** 弹窗层级 */
+  zIndex: makeNumberProp(15),
+  /** 弹出面板是否设置底部安全距离（iphone X 类型的机型） */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /** 可搜索（目前只支持本地搜索） */
+  filterable: makeBooleanProp(false),
+  /** 搜索框占位符 */
+  filterPlaceholder: String,
+  /** 是否超出隐藏 */
+  ellipsis: makeBooleanProp(false),
+  /** 重新打开是否滚动到选中项 */
+  scrollIntoView: makeBooleanProp(true),
+  /** 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 */
+  prop: String,
+  /** 表单验证规则，结合`wd-form`组件使用 */
+  rules: makeArrayProp<FormItemRule>(),
+  /** 自定义内容样式类 */
+  customContentClass: makeStringProp(''),
+  /** 自定义标签样式类 */
+  customLabelClass: makeStringProp(''),
+  /** 自定义值样式类 */
+  customValueClass: makeStringProp(''),
+  /** 是否显示确认按钮（radio类型生效），默认值为：true */
+  showConfirm: makeBooleanProp(true),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false)
+}
+export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
+
+export type SelectPickerDisplayFormat = (items: string | number | boolean | (string | number | boolean)[], columns: Record<string, any>[]) => string
+
+export type SelectPickerBeforeConfirm = (value: string | number | boolean | (string | number | boolean)[], resolve: (isPass: boolean) => void) => void
+
+export type SelectPickerExpose = {
+  // 打开picker弹框
+  open: () => void
+  // 关闭picker弹框
+  close: () => void
+}
+
+export type SelectPickerInstance = ComponentPublicInstance<SelectPickerExpose, SelectPickerProps>

package/w-select-picker/w-select-picker.vue

@@ -0,0 +1,440 @@
+<template>
+    <view :class="`wd-select-picker ${cell.border.value ? 'is-border' : ''} ${customClass}`" :style="customStyle">
+      <view class="wd-select-picker__field" @click="open">
+        <slot v-if="useDefaultSlot"></slot>
+        <view
+          v-else
+          :class="`wd-select-picker__cell ${disabled && 'is-disabled'} ${readonly && 'is-readonly'} ${alignRight && 'is-align-right'} ${
+            error && 'is-error'
+          } ${size && 'is-' + size}`"
+        >
+          <view
+            v-if="label || useLabelSlot"
+            :class="`wd-select-picker__label ${isRequired && 'is-required'} ${customLabelClass}`"
+            :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
+          >
+            <block v-if="label">{{ label }}</block>
+            <slot v-else name="label"></slot>
+          </view>
+          <view class="wd-select-picker__body">
+            <view class="wd-select-picker__value-wraper">
+              <view
+                :class="`wd-select-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${
+                  showValue ? '' : 'wd-select-picker__value--placeholder'
+                }`"
+              >
+                {{ showValue || placeholder || translate('placeholder') }}
+              </view>
+              <wd-icon v-if="showArrow" custom-class="wd-select-picker__arrow" name="arrow-right" />
+              <view v-else-if="showClear" @click.stop="handleClear">
+                <wd-icon custom-class="wd-select-picker__clear" name="error-fill" />
+              </view>
+            </view>
+  
+            <view v-if="errorMessage" class="wd-select-picker__error-message">{{ errorMessage }}</view>
+          </view>
+        </view>
+      </view>
+      <wd-action-sheet
+        v-model="pickerShow"
+        :duration="250"
+        :title="title || translate('title')"
+        :close-on-click-modal="closeOnClickModal"
+        :z-index="zIndex"
+        :safe-area-inset-bottom="safeAreaInsetBottom"
+        @close="close"
+        @opened="scrollIntoView ? setScrollIntoView() : ''"
+        custom-header-class="wd-select-picker__header"
+      >
+        <wd-search
+          v-if="filterable"
+          v-model="filterVal"
+          :placeholder="filterPlaceholder || translate('filterPlaceholder')"
+          hide-cancel
+          placeholder-left
+          @change="handleFilterChange"
+        />
+        <scroll-view
+          :class="`wd-select-picker__wrapper ${filterable ? 'is-filterable' : ''} ${loading ? 'is-loading' : ''} ${customContentClass}`"
+          :scroll-y="!loading"
+          :scroll-top="scrollTop"
+          :scroll-with-animation="true"
+          @scrolltolower="scrolltolower"
+        >
+          <!-- 多选 -->
+          <view v-if="type === 'checkbox' && isArray(selectList)" id="wd-checkbox-group">
+            <wd-checkbox-group v-model="selectList" cell :size="selectSize" :checked-color="checkedColor" :min="min" :max="max" @change="handleChange">
+              <view v-for="item in filterColumns" :key="item[valueKey]" :id="'check' + item[valueKey]">
+                <wd-checkbox :modelValue="item[valueKey]" :disabled="item.disabled">
+                  <block v-if="filterable && filterVal">
+                    <block v-for="text in item[labelKey]" :key="text.label">
+                      <text v-if="text.type === 'active'" class="wd-select-picker__text-active">{{ text.label }}</text>
+                      <block v-else>{{ text.label }}</block>
+                    </block>
+                  </block>
+                  <block v-else>
+                    {{ item[labelKey] }}
+                  </block>
+                </wd-checkbox>
+              </view>
+            </wd-checkbox-group>
+          </view>
+          <!-- 单选 -->
+          <view v-if="type === 'radio' && !isArray(selectList)" id="wd-radio-group">
+            <wd-radio-group v-model="selectList" cell :size="selectSize" :checked-color="checkedColor" @change="handleChange">
+              <view v-for="(item, index) in filterColumns" :key="index" :id="'radio' + item[valueKey]">
+                <wd-radio :value="item[valueKey]" :disabled="item.disabled">
+                  <block v-if="filterable && filterVal">
+                    <block v-for="text in item[labelKey]" :key="text.label">
+                      <text :class="`${text.type === 'active' ? 'wd-select-picker__text-active' : ''}`">{{ text.label }}</text>
+                    </block>
+                  </block>
+                  <block v-else>
+                    {{ item[labelKey] }}
+                  </block>
+                </wd-radio>
+              </view>
+            </wd-radio-group>
+          </view>
+          <view v-if="loading" class="wd-select-picker__loading" @touchmove="noop">
+            <wd-loading :color="loadingColor" />
+          </view>
+        </scroll-view>
+        <!-- 确认按钮 -->
+        <view v-if="showConfirm" class="wd-select-picker__footer">
+          <wd-button block size="large" @click="onConfirm" :disabled="loading">{{ confirmButtonText || translate('confirm') }}</wd-button>
+        </view>
+      </wd-action-sheet>
+    </view>
+  </template>
+  <script lang="ts" setup>
+  
+  import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed } from 'vue'
+  import { useCell } from 'wot-design-uni/components/composables/useCell'
+  import { getRect, isArray, isDef, isFunction, pause } from 'wot-design-uni/components/common/util'
+  import { useParent } from 'wot-design-uni/components/composables/useParent'
+  import { FORM_KEY, type FormItemRule } from 'wot-design-uni/components/wd-form/types'
+  import { useTranslate } from 'wot-design-uni/components/composables/useTranslate'
+  import { selectPickerProps, type SelectPickerExpose } from './types'
+  
+  const { translate } = useTranslate('select-picker')
+  
+  const props = defineProps(selectPickerProps)
+  const emit = defineEmits(['change', 'cancel', 'confirm', 'clear', 'update:modelValue', 'open', 'close'])
+  
+  const pickerShow = ref<boolean>(false)
+  const selectList = ref<Array<number | boolean | string> | number | boolean | string>([])
+  const isConfirm = ref<boolean>(false)
+  const lastSelectList = ref<Array<number | boolean | string> | number | boolean | string>([])
+  const filterVal = ref<string>('')
+  const filterColumns = ref<Array<Record<string, any>>>([])
+  const scrollTop = ref<number>(0) // 滚动位置
+  const cell = useCell()
+  
+  const showValue = computed(() => {
+    const value = valueFormat(props.modelValue)
+    let showValueTemp: string = ''
+  
+    if (props.displayFormat) {
+      showValueTemp = props.displayFormat(value, props.columns)
+    } else {
+      const { type, labelKey } = props
+      if (type === 'checkbox') {
+        const selectedItems = (isArray(value) ? value : []).map((item) => {
+          return getSelectedItem(item)
+        })
+        showValueTemp = selectedItems
+          .map((item) => {
+            return item[labelKey]
+          })
+          .join(', ')
+      } else if (type === 'radio') {
+        const selectedItem = getSelectedItem(value as string | number | boolean)
+        showValueTemp = selectedItem[labelKey]
+      } else {
+        showValueTemp = value as string
+      }
+    }
+    return showValueTemp
+  })
+  
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      if (newValue === selectList.value) return
+      selectList.value = valueFormat(newValue)
+      lastSelectList.value = valueFormat(newValue)
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  )
+  
+  watch(
+    () => props.columns,
+    (newValue) => {
+      if (props.filterable && filterVal.value) {
+        formatFilterColumns(newValue, filterVal.value)
+      } else {
+        filterColumns.value = newValue
+      }
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  )
+  
+  watch(
+    () => props.displayFormat,
+    (fn) => {
+      if (fn && !isFunction(fn)) {
+        console.error('The type of displayFormat must be Function')
+      }
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  )
+  
+  watch(
+    () => props.beforeConfirm,
+    (fn) => {
+      if (fn && !isFunction(fn)) {
+        console.error('The type of beforeConfirm must be Function')
+      }
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  )
+  
+  const { parent: form } = useParent(FORM_KEY)
+  
+  // 表单校验错误信息
+  const errorMessage = computed(() => {
+    if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+      return form.errorMessages[props.prop]
+    } else {
+      return ''
+    }
+  })
+  
+  // 是否展示必填
+  const isRequired = computed(() => {
+    let formRequired = false
+    if (form && form.props.rules) {
+      const rules = form.props.rules
+      for (const key in rules) {
+        if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+          formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+        }
+      }
+    }
+    return props.required || props.rules.some((rule) => rule.required) || formRequired
+  })
+  
+  onBeforeMount(() => {
+    selectList.value = valueFormat(props.modelValue)
+    filterColumns.value = props.columns
+  })
+  
+  const { proxy } = getCurrentInstance() as any
+  
+  async function setScrollIntoView() {
+    let wraperSelector: string = ''
+    let selectorPromise: Promise<UniApp.NodeInfo>[] = []
+    if (isDef(selectList.value) && selectList.value !== '' && !isArray(selectList.value)) {
+      wraperSelector = '#wd-radio-group'
+      selectorPromise = [getRect(`#radio${selectList.value}`, false, proxy)]
+    } else if (isArray(selectList.value) && selectList.value.length > 0) {
+      selectList.value.forEach((value) => {
+        selectorPromise.push(getRect(`#check${value}`, false, proxy))
+      })
+      wraperSelector = '#wd-checkbox-group'
+    }
+    if (wraperSelector) {
+      await pause(2000 / 30)
+      Promise.all([getRect('.wd-select-picker__wrapper', false, proxy), getRect(wraperSelector, false, proxy), ...selectorPromise]).then((res) => {
+        if (isDef(res) && isArray(res)) {
+          const scrollView = res[0]
+          const wraper = res[1]
+          const target = res.slice(2) || []
+          if (isDef(wraper) && isDef(scrollView)) {
+            const index = target.findIndex((item) => {
+              return item.bottom! > scrollView.top! && item.top! < scrollView.bottom!
+            })
+            if (index < 0) {
+              scrollTop.value = -1
+              nextTick(() => {
+                scrollTop.value = Math.max(0, target[0].top! - wraper.top! - scrollView.height! / 2)
+              })
+            }
+          }
+        }
+      })
+    }
+  }
+  
+  function noop() {}
+  
+  function getSelectedItem(value: string | number | boolean) {
+    const { valueKey, labelKey, columns } = props
+  
+    const selecteds = columns.filter((item) => {
+      return item[valueKey] === value
+    })
+  
+    if (selecteds.length > 0) {
+      return selecteds[0]
+    }
+  
+    return {
+      [valueKey]: value,
+      [labelKey]: ''
+    }
+  }
+  
+  function valueFormat(value: string | number | boolean | (string | number | boolean)[]) {
+    return props.type === 'checkbox' ? (isArray(value) ? value : []) : value
+  }
+  
+  function handleChange({ value }: { value: string | number | boolean | (string | number | boolean)[] }) {
+    selectList.value = value
+    emit('change', { value })
+    if (props.type === 'radio' && !props.showConfirm) {
+      onConfirm()
+    }
+  }
+  
+  function close() {
+    pickerShow.value = false
+    // 未确定选项时，数据还原复位
+    if (!isConfirm.value) {
+      selectList.value = valueFormat(lastSelectList.value)
+    }
+    emit('cancel')
+    emit('close')
+  }
+  
+  function open() {
+    if (props.disabled || props.readonly) return
+    selectList.value = valueFormat(props.modelValue)
+    pickerShow.value = true
+    isConfirm.value = false
+    emit('open')
+  }
+  
+  function onConfirm() {
+    if (props.loading) {
+      pickerShow.value = false
+      emit('confirm')
+      emit('close')
+      return
+    }
+    if (props.beforeConfirm) {
+      props.beforeConfirm(selectList.value, (isPass: boolean) => {
+        isPass && handleConfirm()
+      })
+    } else {
+      handleConfirm()
+    }
+  }
+  
+  function handleConfirm() {
+    isConfirm.value = true
+    pickerShow.value = false
+    lastSelectList.value = valueFormat(selectList.value)
+    let selectedItems: Record<string, any> = {}
+    if (props.type === 'checkbox') {
+      selectedItems = (isArray(lastSelectList.value) ? lastSelectList.value : []).map((item) => {
+        return getSelectedItem(item)
+      })
+    } else {
+      selectedItems = getSelectedItem(lastSelectList.value as string | number | boolean)
+    }
+    emit('update:modelValue', lastSelectList.value)
+    emit('confirm', {
+      value: lastSelectList.value,
+      selectedItems
+    })
+    emit('close')
+  }
+  
+  function getFilterText(label: string, filterVal: string) {
+    const reg = new RegExp(`(${filterVal})`, 'g')
+  
+    return label.split(reg).map((text) => {
+      return {
+        type: text === filterVal ? 'active' : 'normal',
+        label: text
+      }
+    })
+  }
+  
+  function handleFilterChange({ value }: { value: string }) {
+    if (value === '') {
+      filterColumns.value = []
+      filterVal.value = value
+      nextTick(() => {
+        filterColumns.value = props.columns
+      })
+    } else {
+      filterVal.value = value
+      formatFilterColumns(props.columns, value)
+    }
+  }
+  
+  function formatFilterColumns(columns: Record<string, any>[], filterVal: string) {
+    const filterColumnsTemp = columns.filter((item) => {
+      return item[props.labelKey].indexOf(filterVal) > -1
+    })
+  
+    const formatFilterColumns = filterColumnsTemp.map((item) => {
+      return {
+        ...item,
+        [props.labelKey]: getFilterText(item[props.labelKey], filterVal)
+      }
+    })
+    filterColumns.value = []
+    nextTick(() => {
+      filterColumns.value = formatFilterColumns
+    })
+  }
+  
+  const showConfirm = computed(() => {
+    return (props.type === 'radio' && props.showConfirm) || props.type === 'checkbox'
+  })
+  
+  // 是否展示清除按钮
+  const showClear = computed(() => {
+    return props.clearable && !props.disabled && !props.readonly && showValue.value.length
+  })
+  
+  function handleClear() {
+    emit('update:modelValue', props.type === 'checkbox' ? [] : '')
+    emit('clear')
+  }
+  
+  // 是否展示箭头
+  const showArrow = computed(() => {
+    return !props.disabled && !props.readonly && !showClear.value
+  })
+
+  //滚动事件
+  const scrolltolower = ()=>{
+    console.log('scrolltolower')
+  }
+  
+  defineExpose<SelectPickerExpose>({
+    close,
+    open
+  })
+  </script>
+  <style lang="scss" scoped>
+  @import './index.scss';
+  </style>
+  

package/w-table/w-table.vue

@@ -9,7 +9,8 @@ import {
   getPageKey,
   pageConfig,
 } from '../utils/apis/pageConfig'
-import foldCardTemplate from './components/foldCardTemplate.vue'
+import wCard from '../w-card/w-card.vue'
+import wSelectPicker from '../w-select-picker/w-select-picker.vue'
 
 defineOptions({
   name: 'WTable',
@@ -26,7 +27,7 @@ const pageData = ref<{
   buttons: string[]
 }>({ criterias: [], buttons: [] })
 onLoad((option: any) => {
-  sourceId.value = option.sourceId || '405889315156828169'
+  sourceId.value = option.sourceId || '405888563537551369'
   getPageConfig()
 })
 // 获取页面配置
@@ -36,28 +37,32 @@ function getPageConfig() {
   })
 }
 // 搜索菜单数据
-const menu = computed(() => {
-  const menulist = pageData.value.criterias?.map((item: any) => {
-    return {
-      content: item.title,
-      id: item.id,
-      mstrucId: item.mstrucId,
-      sourceId: item.sourceId,
-    }
-  }) || []
-  menulist.unshift({
-    content: '全部',
-    id: '',
-    mstrucId: '',
-    sourceId: '',
-  })
-  return menulist
-})
-
-// 搜索类型切换
-function changeSearchType({ item }: any) {
-  searchType.value = item.content
-  searchParams.value = `c_${item.id}=`
+// const menu = computed(() => {
+//   const menulist = pageData.value.criterias?.map((item: any) => {
+//     return {
+//       content: item.title,
+//       id: item.id,
+//       mstrucId: item.mstrucId,
+//       sourceId: item.sourceId,
+//     }
+//   }) || []
+//   menulist.unshift({
+//     content: '全部',
+//     id: '',
+//     mstrucId: '',
+//     sourceId: '',
+//   })
+//   return menulist
+// })
+
+const slider = ref()
+const dropMenu = ref()
+
+function handleOpened() {
+  slider.value?.initSlider()
+}
+function confirm() {
+  dropMenu.value.close()
 }
 
 // z-paging实例
@@ -107,6 +112,62 @@ function add() {
     url: `/pages/dynamic/dynamic?sourceId=${sourceId.value}&pageType=新增列表数据&pageTitle=`,
   })
 }
+const value = ref()
+const columns = ref([
+  {
+    value: '101',
+    label: '男装',
+    disabled: true
+  },
+  {
+    value: '102',
+    label: '奢侈品'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  },
+  {
+    value: '103',
+    label: '女装'
+  }
+])
 </script>
 
 <template>
@@ -116,14 +177,18 @@ function add() {
         <!-- 搜索框 -->
         <wd-search v-model="searchVal" cancel-txt="搜索" @cancel="search">
           <template #prefix>
-            <wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
-              <view class="search-type">
-                <text class="searchType">
-                  {{ searchType }}
-                </text>
-                <wd-icon custom-class="icon-arrow" name="fill-arrow-down" />
-              </view>
-            </wd-popover>
+            <wd-drop-menu>
+              <wd-drop-menu-item ref="dropMenu" title="筛选" icon-size="40rpx" @opened="handleOpened">
+                <view>
+                  <wSelectPicker v-model="value" label="基本用法" :columns="columns" />
+                  <wd-cell title="标题文字" value="内容" />
+                  <wd-cell title="标题文字" label="描述信息" value="内容" />
+                  <wd-button block size="large" suck @click="confirm">
+                    主要按钮
+                  </wd-button>
+                </view>
+              </wd-drop-menu-item>
+            </wd-drop-menu>
           </template>
         </wd-search>
         <view class="buttons-box">
@@ -133,7 +198,7 @@ function add() {
       </view>
     </template>
     <!-- 卡片 -->
-    <foldCardTemplate v-for="(item, index) in dataList" :key="index" :page="pageData" :item-data="item" />
+    <w-card v-for="(item, index) in dataList" :key="index" :car-index="index" :page="pageData" :item-data="item" />
   </z-paging>
 </template>