nongxiaoyu/components/common/LocationPicker.vue

<template>
  <!-- <view class="form-item">	 -->
<!--   <view class="item-label">
      <text class="label-text">{{ label }}</text>
      <text v-if="required" class="required">*</text>
    </view> -->

    <!-- 编辑模式：输入框 -->
    <uni-data-picker
      v-if="mode === 'edit'"
      v-model="innerValue"
      :localdata="localData"
      :popup-title="popupTitle"
      @change="onChange"
    >
      <u-input
        :value="getLocationLabel(innerValue)"
        :placeholder="placeholder"
        readonly
        suffix-icon="arrow-down"
      >
        <!-- 清除按钮 -->
        <template #suffix>
          <view 
            v-if="innerValue"
            @click.stop="clearAddress"
            style="padding: 0 8rpx; display: flex; align-items: center;"
          >
            <uni-icons type="close" color="#999" size="20"></uni-icons>
          </view>
        </template>
      </u-input>
    </uni-data-picker>

    <!-- 展示模式：纯文本 -->
    <text v-else class="location-text">
      {{ getLocationLabel(innerValue) || "无" }}
    </text>
  <!-- </view> -->
</template>

<script setup>
import { ref, watch } from 'vue'
import cityRows from '@/utils/data.json'

// Props definition
const props = defineProps({
  mode: { // 新增模式属性
    type: String,
    default: "edit" // edit / view
  },
  value: { // v-model
    type: [String, Number],
    default: ""
  },
  label: { // 左侧文字
    type: String,
    default: "所在地"
  },
  placeholder: {
    type: String,
    default: "请选择省市区"
  },
  popupTitle: {
    type: String,
    default: "请选择省市区"
  },
  required: {
    type: Boolean,
    default: false
  }
})

// Emits definition
const emit = defineEmits(['input', 'clear'])

// Reactive data
const innerValue = ref(props.value)
const localData = ref([]) // 省市区树数据

// Watchers
watch(() => props.value, (newVal) => {
  innerValue.value = newVal
})

watch(innerValue, (newVal) => {
  emit("input", newVal)
})

// Methods
/** 点击选择后的回调 */
const onChange = (e) => {
  const lastNode = e.detail.value[e.detail.value.length - 1]
  innerValue.value = lastNode.value // 只存最底层的 code
}

/** 清空地址 */
const clearAddress = () => {
  innerValue.value = ""
  emit("clear")
}

/** 回显文字（递归找路径） */
const getLocationLabel = (value) => {
  if (!value) return ""
  let label = ""
  const traverse = (nodes) => {
    for (const node of nodes) {
      if (node.value === value) {
        label = node.text
        return true
      }
      if (node.children && traverse(node.children)) {
        label = node.text + " - " + label
        return true
      }
    }
    return false
  }
  traverse(localData.value)
  return label
}

/** 生成树数据 */
const get_city_tree = () => {
  let res = []
  if (cityRows.length) {
    res = handleTree(cityRows)
  }
  return res
}

/** 递归组装树 */
const handleTree = (data, parent_code = null) => {
  let res = []
  let keys = {
    id: "code",
    pid: "parent_code",
    children: "children",
    text: "name",
    value: "code"
  }

  for (let item of data) {
    if (parent_code === null) {
      // 顶级
      if (!item.hasOwnProperty(keys.pid) || item[keys.pid] == parent_code) {
        let node = {
          text: item[keys.text],
          value: item[keys.value],
          children: handleTree(data, item[keys.id])
        }
        res.push(node)
      }
    } else {
      // 子级
      if (item.hasOwnProperty(keys.pid) && item[keys.pid] == parent_code) {
        let node = {
          text: item[keys.text],
          value: item[keys.value],
          children: handleTree(data, item[keys.id])
        }
        res.push(node)
      }
    }
  }
  return res
}

// Initialize data (replaces created lifecycle)
localData.value = get_city_tree()
</script>

<style scoped>
.form-item {
  display: flex;
  flex-direction: column;
  /* margin-bottom: 20rpx; */
}
.item-label {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.label-text {
  font-size: 28rpx;
  color: #333;
}
.required {
  color: red;
  margin-left: 5rpx;
}
.location-text {
 /* font-size: 28rpx;
  color: #333; */
  /* padding: 16rpx 0; */	
}
</style>