1 line
8.9 KiB
Plaintext
1 line
8.9 KiB
Plaintext
{"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;"} |