mao-mobile 0.0.1

package/ProDataPicker/README.md

@@ -0,0 +1,123 @@
+# ProDataPicker 级联选择
+
+一个级联选择组件，支持本地数据和远程数据加载。
+
+## 功能特点
+
+- 支持多级数据选择
+- 支持本地数据和远程数据加载
+- 自定义主题色
+- 本地数据支持数据回显
+- 支持自定义数据属性映射
+- 支持禁用选项
+- 支持空数据状态展示
+
+## 基础用法
+
+```vue
+<template>
+  <pro-data-picker
+    v-model="selectedValues"
+    :localdata="localData"
+    @change="handleChange"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedValues = ref([]);
+const localData = ref([
+  {
+    text: "选项1",
+    value: "1",
+    children: [
+      {
+        text: "选项1-1",
+        value: "1-1",
+      },
+    ],
+  },
+]);
+
+const handleChange = (value) => {
+  console.log("选择的值：", value);
+};
+</script>
+```
+
+## 远程数据加载
+
+```vue
+<template>
+  <pro-data-picker
+    v-model="selectedValues"
+    :level="3"
+    :lazyLoad="fetchData"
+    @change="handleChange"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedValues = ref([]);
+
+const fetchData = async (level, parent) => {
+  // 根据层级和父级数据获取下一级数据
+  const response = await fetch(
+    `/api/data?level=${level}&parent=${parent?.value}`
+  );
+  return response.data;
+};
+
+const handleChange = (value) => {
+  console.log("选择的值：", value);
+};
+</script>
+```
+
+## API
+
+### Props
+
+| 参数       | 说明                     | 类型     | 默认值    |
+| ---------- | ------------------------ | -------- | --------- |
+| modelValue | 选中的值（支持 v-model） | Array    | []        |
+| title      | 弹出层标题               | String   | ''        |
+| themeColor | 主题色                   | String   | '#0BC8C8' |
+| localdata  | 本地数据源               | Array    | []        |
+| dataprops  | 数据属性映射             | Object   | {}        |
+| level      | 远程数据层级数           | Number   | 3         |
+| lazyLoad   | 远程数据加载方法         | Function | null      |
+
+### dataprops 配置项
+
+| 参数           | 说明            | 类型   | 默认值     |
+| -------------- | --------------- | ------ | ---------- |
+| text           | 选项文本字段名  | String | 'text'     |
+| value          | 选项值字段名    | String | 'value'    |
+| children       | 子选项字段名    | String | 'children' |
+| remark         | 备注字段名      | String | 'remark'   |
+| emptyText      | 空数据提示文本  | String | '暂无数据' |
+| `level${n}Tab` | 第 n 级标签文本 | String | '请选择'   |
+
+### Events
+
+| 事件名            | 说明             | 回调参数       |
+| ----------------- | ---------------- | -------------- |
+| update:modelValue | 选中值变化时触发 | (value: Array) |
+| change            | 选择完成时触发   | (value: Array) |
+
+### 方法
+
+| 方法名 | 说明       | 参数 |
+| ------ | ---------- | ---- |
+| open   | 打开选择器 | -    |
+
+## 注意事项
+
+1. 使用本地数据时，需要提供符合数据结构的 `localdata` 数组
+2. 使用远程数据时，需要提供 `lazyLoad` 方法来加载数据
+3. 可以通过 `dataprops` 配置项来自定义数据字段的映射关系
+4. 选择器的值格式为数组，每个元素包含 `name`、`value` 和 `flag` 属性

package/ProDataPicker/index.vue

@@ -0,0 +1,505 @@
+<template>
+  <view>
+    <pro-popup
+      ref="dataPickerPopupRef"
+      position="bottom"
+      :title="title"
+      :is-show-header="true"
+      @change="handlePopupChange"
+    >
+      <view class="pro-data-picker">
+        <view class="pro-data-picker__tabs">
+          <view
+            v-for="item in tabs"
+            :key="item.flag"
+            :class="[
+              'pro-data-picker__tab',
+              flag === item.flag
+                ? 'pro-data-picker__tab--active'
+                : 'pro-data-picker__tab--default',
+            ]"
+            @tap="handleTabClick(item)"
+          >
+            {{ item.name }}
+            <view v-if="flag === item.flag" class="pro-data-picker__tab-line" />
+          </view>
+        </view>
+        <view class="pro-data-picker__content">
+          <view v-if="currentList.length">
+            <view
+              v-for="item in currentList"
+              :key="getItemValue(item)"
+              :class="[
+                'pro-data-picker__item',
+                isSelected(item)
+                  ? 'pro-data-picker__item--active'
+                  : 'pro-data-picker__item--default',
+                item.disable ? 'pro-data-picker__item--disabled' : '',
+              ]"
+              @tap="!item.disable && handleItemClick(item)"
+            >
+              {{ getItemText(item) }}
+              <text v-if="isSelected(item)" class="pro-data-picker__item-check"
+                >✔</text
+              >
+              <text v-else class="pro-data-picker__item-remark">{{
+                getItemRemark(item)
+              }}</text>
+            </view>
+          </view>
+          <view
+            class="pro-data-picker__item-empty"
+            v-if="!currentList.length && !loading"
+          >
+            <image
+              class="pro-data-picker__item-empty-img"
+              mode="heightFix"
+              src="https://static.wxb.com.cn/frontEnd/images/ideacome-mobile/data-picker-empty.png"
+            ></image>
+            <text class="pro-data-picker__item-empty-text">{{
+              mergeddataprops.emptyText
+            }}</text>
+          </view>
+        </view>
+      </view>
+    </pro-popup>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import ProPopup from "../ProPopup/index.vue";
+
+const props = defineProps({
+  // 弹出层标题
+  title: {
+    type: String,
+    default: "",
+  },
+  // 默认选中的值
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  // 主题色
+  themeColor: {
+    type: String,
+    default: "#0BC8C8",
+  },
+  // 本地数据源
+  localdata: {
+    type: Array,
+    default: () => [],
+  },
+  // 数据属性映射
+  dataprops: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 远程数据层级数
+  level: {
+    type: Number,
+    default: 3,
+  },
+  // 远程数据加载方法
+  lazyLoad: {
+    type: Function,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+// 弹窗引用
+const dataPickerPopupRef = ref(null);
+// 当前选中的值
+const selectedValues = ref([]);
+// 当前激活的标签页
+const flag = ref(0);
+// 标签页配置
+const tabs = ref([]);
+// 数据列表
+const dataList = ref([]);
+const levelLists = ref([]);
+const loading = ref(false);
+
+// 合并后的数据属性映射
+const mergeddataprops = computed(() => ({
+  text: "text",
+  value: "value",
+  children: "children",
+  remark: "remark",
+  emptyText: "暂无数据",
+  ...props.dataprops,
+}));
+
+// 获取选项文本
+const getItemText = (item) => item[mergeddataprops.value.text];
+
+// 获取选项备注
+const getItemRemark = (item) => item[mergeddataprops.value.remark];
+
+// 获取选项值
+const getItemValue = (item) => item[mergeddataprops.value.value];
+
+// 获取子选项
+const getItemChildren = (item) => item[mergeddataprops.value.children] || [];
+
+// 当前显示的数据列表
+const currentList = computed(() =>
+  props.localdata.length ? dataList.value : levelLists.value[flag.value] || []
+);
+
+// 判断是否选中
+const isSelected = (item) =>
+  selectedValues.value.some(
+    (val) => val.value === getItemValue(item) && val.flag === flag.value
+  );
+
+// 初始化标签页
+const initTabs = () => {
+  const tabCount = props.localdata.length
+    ? getMaxLevel(props.localdata)
+    : props.level;
+  tabs.value = Array.from({ length: tabCount }, (_, index) => ({
+    flag: index,
+    name: mergeddataprops.value[`level${index + 1}Tab`] || "请选择",
+  }));
+
+  if (!props.localdata.length) {
+    levelLists.value = Array.from({ length: tabCount }, () => []);
+  }
+};
+
+// 获取最大层级
+const getMaxLevel = (data, level = 1) => {
+  return Math.max(
+    level,
+    ...data.map((item) => {
+      const children = getItemChildren(item);
+      return children.length ? getMaxLevel(children, level + 1) : level;
+    })
+  );
+};
+
+// 更新标签页名称
+const updateTabNames = () => {
+  tabs.value = tabs.value.map((tab, index) => {
+    const selected = selectedValues.value.find((val) => val.flag === index);
+    return {
+      ...tab,
+      name: selected
+        ? selected.name
+        : mergeddataprops.value[`level${index + 1}Tab`] || "请选择",
+    };
+  });
+};
+
+// 处理选项点击
+const handleItemClick = (item) => {
+  const currentFlag = flag.value;
+  const newValue = {
+    name: getItemText(item),
+    value: getItemValue(item),
+    flag: currentFlag,
+  };
+
+  const index = selectedValues.value.findIndex(
+    (val) => val.flag === currentFlag
+  );
+  if (index > -1) {
+    selectedValues.value[index] = newValue;
+  } else {
+    selectedValues.value.push(newValue);
+  }
+
+  // 清空下级选择
+  selectedValues.value = selectedValues.value.filter(
+    (val) => val.flag <= currentFlag
+  );
+  updateTabNames();
+
+  // 判断是否需要加载下一级数据
+  if (currentFlag < tabs.value.length - 1) {
+    if (props.localdata.length) {
+      const children = getItemChildren(item);
+      if (children.length) {
+        dataList.value = children;
+        flag.value++;
+      } else {
+        completeSelection();
+      }
+    } else {
+      fetchRegionList(item);
+      flag.value++;
+    }
+  } else {
+    completeSelection();
+  }
+};
+
+// 完成选择
+const completeSelection = () => {
+  emit("update:modelValue", selectedValues.value);
+  emit("change", selectedValues.value);
+  handleClose();
+};
+
+const resetState = () => {
+  // 使用setTimeout等待动画结束后再重置数据
+  setTimeout(() => {
+    selectedValues.value = [];
+    dataList.value = [];
+    levelLists.value = [];
+    flag.value = 0;
+    tabs.value = [];
+    loading.value = false;
+  }, 300);
+};
+
+// 关闭弹窗
+const handleClose = () => {
+  dataPickerPopupRef.value.close();
+};
+
+// 打开弹窗
+const open = () => {
+  initTabs();
+
+  if (props.localdata.length) {
+    // 使用本地数据
+    dataList.value = props.localdata;
+
+    // 如果有 modelValue，进行回显处理
+    if (props.modelValue && props.modelValue.length) {
+      selectedValues.value = [...props.modelValue];
+
+      // 更新标签页名称
+      tabs.value = tabs.value.map((tab, index) => {
+        const selected = props.modelValue.find((val) => val.flag === index);
+        return {
+          ...tab,
+          name: selected
+            ? selected.name
+            : mergeddataprops.value[`level${index + 1}Tab`] || "请选择",
+        };
+      });
+
+      // 设置当前显示的数据列表和 flag
+      let currentData = props.localdata;
+      let lastFlag = 0;
+
+      // 遍历已选择的值，找到对应的数据层级
+      for (let i = 0; i < props.modelValue.length; i++) {
+        const selected = props.modelValue[i];
+        const found = currentData.find(
+          (item) => getItemValue(item) === selected.value
+        );
+        if (found) {
+          lastFlag = i;
+          if (i === props.modelValue.length - 1) {
+            // 如果是最后一级，显示当前数据
+            dataList.value = currentData;
+          } else {
+            // 否则继续查找下一级
+            currentData = getItemChildren(found);
+          }
+        }
+      }
+
+      // 设置 flag 到最后一级
+      flag.value = lastFlag;
+    }
+  } else {
+    // 使用接口数据
+    flag.value = 0;
+    selectedValues.value = [];
+    fetchRegionList();
+  }
+
+  dataPickerPopupRef.value.open();
+};
+
+// 获取地区数据
+const fetchRegionList = async (item) => {
+  if (!props.lazyLoad) {
+    console.error("未提供数据加载方法");
+    return;
+  }
+
+  try {
+    loading.value = true;
+    const list = await props.lazyLoad(flag.value, item);
+    loading.value = false;
+    levelLists.value[flag.value] = list;
+  } catch (error) {
+    console.error("获取数据失败:", error);
+  }
+};
+
+// 处理标签页点击
+const handleTabClick = (item) => {
+  if (item.flag === 0) {
+    flag.value = item.flag;
+    if (props.localdata.length) {
+      dataList.value = props.localdata;
+    }
+    return;
+  }
+
+  const prevSelected = selectedValues.value.find(
+    (val) => val.flag === item.flag - 1
+  );
+  if (prevSelected) {
+    if (props.localdata.length) {
+      // 获取上一级选中项的children作为当前列表
+      const prevItem = findItemByValue(prevSelected.value);
+      if (prevItem?.child.length) {
+        flag.value = item.flag;
+        dataList.value = getItemChildren(prevItem);
+      } else {
+        uni.showToast({
+          title: "当前项没有下级",
+          icon: "none",
+        });
+      }
+    } else {
+      flag.value = item.flag;
+    }
+  } else {
+    uni.showToast({
+      title: "请先选择上一级",
+      icon: "none",
+    });
+  }
+};
+
+// 根据值查找选项
+const findItemByValue = (value, list = props.localdata) => {
+  for (const item of list) {
+    if (getItemValue(item) === value) {
+      return item;
+    }
+    const children = getItemChildren(item);
+    if (children.length) {
+      const found = findItemByValue(value, children);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+// 处理弹窗状态变化
+const handlePopupChange = (e) => {
+  if (!e.show) {
+    resetState();
+  }
+};
+
+defineExpose({
+  open,
+});
+</script>
+
+<style lang="scss" scoped>
+.pro-data-picker {
+  font-family: PingFang SC, sans-serif;
+  height: calc(100vh * 0.618 - 174rpx);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &__tabs {
+    flex-shrink: 0;
+    padding: 0 8rpx;
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__tab {
+    flex: 1;
+    position: relative;
+    padding: 0 4rpx 24rpx 4rpx;
+    font-size: 26rpx;
+    line-height: 36rpx;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &--active {
+      font-weight: 500;
+      color: v-bind("themeColor");
+    }
+
+    &--default {
+      color: #666;
+    }
+  }
+
+  &__tab-line {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 116rpx;
+    height: 6rpx;
+    background: v-bind("themeColor");
+  }
+
+  &__content {
+    flex: 1;
+    margin-top: 32rpx;
+    padding: 0 12rpx;
+    overflow-y: auto;
+  }
+
+  &__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx 0;
+    font-size: 28rpx;
+    line-height: 40rpx;
+
+    &--active {
+      color: v-bind("themeColor");
+    }
+
+    &--default {
+      color: #212121;
+    }
+
+    &--disabled {
+      color: #888;
+      cursor: not-allowed;
+    }
+
+    &-check {
+      color: v-bind("themeColor");
+    }
+    &-empty {
+      padding-top: 114rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &-img {
+        height: 180rpx;
+      }
+      &-text {
+        margin-top: 18rpx;
+        font-size: 32rpx;
+        color: #666666;
+        line-height: 44rpx;
+      }
+    }
+  }
+
+  &__item-remark {
+    color: #888888;
+  }
+}
+</style>