{"version":3,"file":"su-region-picker.js","sources":["../../../../../../src/sheep/ui/su-region-picker/su-region-picker.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS1yZWdpb24tcGlja2VyL3N1LXJlZ2lvbi1waWNrZXIudnVl"],"sourcesContent":["<!-- 省市区选择弹窗 -->\r\n<template>\r\n  <su-popup :show=\"show\" @close=\"onCancel\" round=\"20\">\r\n    <view class=\"ui-region-picker\">\r\n      <su-toolbar\r\n        :cancelColor=\"cancelColor\"\r\n        :confirmColor=\"confirmColor\"\r\n        :cancelText=\"cancelText\"\r\n        :confirmText=\"confirmText\"\r\n        title=\"选择区域\"\r\n        @cancel=\"onCancel\"\r\n        @confirm=\"onConfirm('confirm')\"\r\n      />\r\n      <view class=\"ui-picker-body\">\r\n        <picker-view\r\n          :value=\"state.currentIndex\"\r\n          @change=\"change\"\r\n          class=\"ui-picker-view\"\r\n          @pickstart=\"pickstart\"\r\n          @pickend=\"pickend\"\r\n        >\r\n          <picker-view-column>\r\n            <view class=\"ui-column-item\" v-for=\"province in provinceList\" :key=\"province.id\">\r\n              <view :style=\"getSizeByNameLength(province.name)\">{{ province.name }}</view>\r\n            </view>\r\n          </picker-view-column>\r\n          <picker-view-column>\r\n            <view class=\"ui-column-item\" v-for=\"city in cityList\" :key=\"city.id\">\r\n              <view :style=\"getSizeByNameLength(city.name)\">{{ city.name }}</view>\r\n            </view>\r\n          </picker-view-column>\r\n          <picker-view-column>\r\n            <view class=\"ui-column-item\" v-for=\"district in districtList\" :key=\"district.id\">\r\n              <view :style=\"getSizeByNameLength(district.name)\">{{ district.name }}</view>\r\n            </view>\r\n          </picker-view-column>\r\n        </picker-view>\r\n      </view>\r\n    </view>\r\n  </su-popup>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * picker picker弹出选择器\r\n * @property {Object} params 需要显示的参\r\n * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）\r\n * @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示\r\n * @property {String} cancel-color 取消按钮的颜色\r\n * @property {String} confirm-color 确认按钮的颜色\r\n * @property {String} confirm-text 确认按钮的文字\r\n * @property {String} cancel-text 取消按钮的文字\r\n * @property {String} default-region 默认选中的地区，\r\n * @property {String} default-code 默认选中的地区\r\n * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）\r\n * @property {String Number} z-index 弹出时的z-index值（默认1075）\r\n * @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个\r\n * @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容\r\n * @event {Function} confirm 点击确定按钮，返回当前选择的值\r\n * @event {Function} cancel 点击取消按钮，返回当前选择的值\r\n */\r\nimport { computed, reactive } from 'vue'\r\nconst props = defineProps({\r\n  show: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  // \"取消\"按钮的颜色\r\n  cancelColor: {\r\n    type: String,\r\n    default: '#6666',\r\n  },\r\n  // \"确定\"按钮的颜色\r\n  confirmColor: {\r\n    type: String,\r\n    default: 'var(--ui-BG-Main)',\r\n  },\r\n  // 取消按钮的文字\r\n  cancelText: {\r\n    type: String,\r\n    default: '取消',\r\n  },\r\n  // 确认按钮的文字\r\n  confirmText: {\r\n    type: String,\r\n    default: '确认',\r\n  },\r\n})\r\nconst areaData = uni.getStorageSync('areaData')\r\n\r\nconst getSizeByNameLength = (name) => {\r\n  const length = name.length\r\n  if (length <= 7) return ''\r\n  if (length < 9) {\r\n    return 'font-size:28rpx'\r\n  } else {\r\n    return 'font-size: 24rpx'\r\n  }\r\n}\r\nconst state = reactive({\r\n  currentIndex: [0, 0, 0],\r\n  moving: false, // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确\r\n})\r\nconst emits = defineEmits(['confirm', 'cancel', 'change'])\r\n\r\nconst provinceList = areaData\r\n\r\nconst cityList = computed(() => {\r\n  return areaData[state.currentIndex[0]].children\r\n})\r\nconst districtList = computed(() => {\r\n  return cityList.value[state.currentIndex[1]]?.children\r\n})\r\n// 标识滑动开始，只有微信小程序才有这样的事件\r\nconst pickstart = () => {\r\n  // #ifdef MP-WEIXIN\r\n  state.moving = true\r\n  // #endif\r\n}\r\n\r\n// 标识滑动结束\r\nconst pickend = () => {\r\n  // #ifdef MP-WEIXIN\r\n  state.moving = false\r\n  // #endif\r\n}\r\nconst init = () => {}\r\n\r\nconst onCancel = () => {\r\n  emits('cancel')\r\n}\r\n\r\n// 用户更改picker的列选项\r\nconst change = (e) => {\r\n  if (state.currentIndex[0] === e.detail.value[0] && state.currentIndex[1] === e.detail.value[1]) {\r\n    // 不更改省市区列表\r\n    state.currentIndex[2] = e.detail.value[2]\r\n    return\r\n  } else {\r\n    // 更改省市区列表\r\n    if (state.currentIndex[0] !== e.detail.value[0]) {\r\n      e.detail.value[1] = 0\r\n    }\r\n    e.detail.value[2] = 0\r\n    state.currentIndex = e.detail.value\r\n  }\r\n  emits('change', state.currentIndex)\r\n}\r\n\r\n// 用户点击确定按钮\r\nconst onConfirm = (event = null) => {\r\n  // #ifdef MP-WEIXIN\r\n  if (state.moving) return\r\n  // #endif\r\n  const index = state.currentIndex\r\n  const province = provinceList[index[0]]\r\n  const city = cityList.value[index[1]]\r\n  const district = districtList.value[index[2]]\r\n  const result = {\r\n    province_name: province.name,\r\n    province_id: province.id,\r\n    city_name: city.name,\r\n    city_id: city.id,\r\n    district_name: district.name,\r\n    district_id: district.id,\r\n  }\r\n\r\n  if (event) emits(event, result)\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.ui-region-picker {\r\n  position: relative;\r\n  z-index: 999;\r\n}\r\n\r\n.ui-picker-view {\r\n  box-sizing: border-box;\r\n  height: 100%;\r\n}\r\n.ui-picker-header {\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  height: 90rpx;\r\n  padding: 0 40rpx;\r\n  font-size: 30rpx;\r\n  background: #fff;\r\n}\r\n\r\n.ui-picker-header::after {\r\n  position: absolute;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  content: '';\r\n  border-bottom: 1rpx solid #eaeef1;\r\n  -webkit-transform: scaleY(0.5);\r\n  transform: scaleY(0.5);\r\n}\r\n\r\n.ui-picker__title {\r\n  color: #333;\r\n}\r\n\r\n.ui-picker-body {\r\n  width: 100%;\r\n  height: 500rpx;\r\n  overflow: hidden;\r\n  background-color: #fff;\r\n}\r\n\r\n.ui-column-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 8rpx;\r\n  font-size: 32rpx;\r\n  color: #333;\r\n}\r\n\r\n.ui-btn-picker {\r\n  box-sizing: border-box;\r\n  padding: 16rpx;\r\n  text-align: center;\r\n  text-decoration: none;\r\n}\r\n\r\n.ui-opacity {\r\n  opacity: 0.5;\r\n}\r\n\r\n.ui-btn-picker--primary {\r\n  color: blue;\r\n}\r\n\r\n.ui-btn-picker--tips {\r\n  color: red;\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-region-picker/su-region-picker.vue'\nwx.createComponent(Component)"],"names":["uni","reactive","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,UAAM,WAAWA,cAAAA,MAAI,eAAe,UAAU;AAE9C,UAAM,sBAAsB,CAAC,SAAS;AACpC,YAAM,SAAS,KAAK;AACpB,UAAI,UAAU;AAAG,eAAO;AACxB,UAAI,SAAS,GAAG;AACd,eAAO;AAAA,MACX,OAAS;AACL,eAAO;AAAA,MACR;AAAA,IACH;AACA,UAAM,QAAQC,cAAAA,SAAS;AAAA,MACrB,cAAc,CAAC,GAAG,GAAG,CAAC;AAAA,MACtB,QAAQ;AAAA;AAAA,IACV,CAAC;AACD,UAAM,QAAQ;AAEd,UAAM,eAAe;AAErB,UAAM,WAAWC,cAAQ,SAAC,MAAM;AAC9B,aAAO,SAAS,MAAM,aAAa,CAAC,CAAC,EAAE;AAAA,IACzC,CAAC;AACD,UAAM,eAAeA,cAAQ,SAAC,MAAM;;AAClC,cAAO,cAAS,MAAM,MAAM,aAAa,CAAC,CAAC,MAApC,mBAAuC;AAAA,IAChD,CAAC;AAED,UAAM,YAAY,MAAM;AAEtB,YAAM,SAAS;AAAA,IAEjB;AAGA,UAAM,UAAU,MAAM;AAEpB,YAAM,SAAS;AAAA,IAEjB;AAGA,UAAM,WAAW,MAAM;AACrB,YAAM,QAAQ;AAAA,IAChB;AAGA,UAAM,SAAS,CAAC,MAAM;AACpB,UAAI,MAAM,aAAa,CAAC,MAAM,EAAE,OAAO,MAAM,CAAC,KAAK,MAAM,aAAa,CAAC,MAAM,EAAE,OAAO,MAAM,CAAC,GAAG;AAE9F,cAAM,aAAa,CAAC,IAAI,EAAE,OAAO,MAAM,CAAC;AACxC;AAAA,MACJ,OAAS;AAEL,YAAI,MAAM,aAAa,CAAC,MAAM,EAAE,OAAO,MAAM,CAAC,GAAG;AAC/C,YAAE,OAAO,MAAM,CAAC,IAAI;AAAA,QACrB;AACD,UAAE,OAAO,MAAM,CAAC,IAAI;AACpB,cAAM,eAAe,EAAE,OAAO;AAAA,MAC/B;AACD,YAAM,UAAU,MAAM,YAAY;AAAA,IACpC;AAGA,UAAM,YAAY,CAAC,QAAQ,SAAS;AAElC,UAAI,MAAM;AAAQ;AAElB,YAAM,QAAQ,MAAM;AACpB,YAAM,WAAW,aAAa,MAAM,CAAC,CAAC;AACtC,YAAM,OAAO,SAAS,MAAM,MAAM,CAAC,CAAC;AACpC,YAAM,WAAW,aAAa,MAAM,MAAM,CAAC,CAAC;AAC5C,YAAM,SAAS;AAAA,QACb,eAAe,SAAS;AAAA,QACxB,aAAa,SAAS;AAAA,QACtB,WAAW,KAAK;AAAA,QAChB,SAAS,KAAK;AAAA,QACd,eAAe,SAAS;AAAA,QACxB,aAAa,SAAS;AAAA,MACvB;AAED,UAAI;AAAO,cAAM,OAAO,MAAM;AAAA,IAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvKA,GAAG,gBAAgB,SAAS;"}