You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-picker.vue 26KB

2 jaren geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895
  1. <!-- 选择器 -->
  2. <template>
  3. <u-popup
  4. :maskCloseAble="maskCloseAble"
  5. mode="bottom"
  6. :popup="false"
  7. v-model="popupValue"
  8. length="auto"
  9. :safeAreaInsetBottom="safeAreaInsetBottom"
  10. @close="close"
  11. :z-index="uZIndex"
  12. :blur="blur"
  13. >
  14. <view class="u-datetime-picker">
  15. <view class="u-picker-header" @touchmove.stop.prevent="">
  16. <view
  17. class="u-btn-picker u-btn-picker--tips"
  18. :style="{ color: cancelColor }"
  19. hover-class="u-opacity"
  20. :hover-stay-time="150"
  21. @click="getResult('cancel')"
  22. >
  23. {{ cancelText }}
  24. </view>
  25. <view class="u-picker__title">{{ title }}</view>
  26. <view
  27. class="u-btn-picker u-btn-picker--primary"
  28. :style="{ color: moving ? cancelColor : confirmColor }"
  29. hover-class="u-opacity"
  30. :hover-stay-time="150"
  31. @touchmove.stop=""
  32. @click.stop="getResult('confirm')"
  33. >
  34. {{ confirmText }}
  35. </view>
  36. </view>
  37. <view class="u-picker-body">
  38. <picker-view
  39. v-if="mode == 'region'"
  40. :value="valueArr"
  41. @change="change"
  42. class="u-picker-view"
  43. @pickstart="pickstart"
  44. @pickend="pickend"
  45. >
  46. <picker-view-column v-if="!reset && params.province">
  47. <view class="u-column-item" v-for="(item, index) in provinces" :key="index">
  48. <view class="u-line-1">{{ item.name }}</view>
  49. </view>
  50. </picker-view-column>
  51. <picker-view-column v-if="!reset && params.city">
  52. <view class="u-column-item" v-for="(item, index) in citys" :key="index">
  53. <view class="u-line-1">{{ item.name }}</view>
  54. </view>
  55. </picker-view-column>
  56. <picker-view-column v-if="!reset && params.area">
  57. <view class="u-column-item" v-for="(item, index) in areas" :key="index">
  58. <view class="u-line-1">{{ item.name }}</view>
  59. </view>
  60. </picker-view-column>
  61. </picker-view>
  62. <picker-view
  63. v-else-if="mode == 'time'"
  64. :value="valueArr"
  65. @change="change"
  66. class="u-picker-view"
  67. @pickstart="pickstart"
  68. @pickend="pickend"
  69. >
  70. <picker-view-column v-if="!reset && params.year">
  71. <view class="u-column-item" v-for="(item, index) in years" :key="index">
  72. {{ item }}
  73. <text class="u-text" v-if="showTimeTag">年</text>
  74. </view>
  75. </picker-view-column>
  76. <picker-view-column v-if="!reset && params.month">
  77. <view class="u-column-item" v-for="(item, index) in months" :key="index">
  78. {{ formatNumber(item) }}
  79. <text class="u-text" v-if="showTimeTag">月</text>
  80. </view>
  81. </picker-view-column>
  82. <picker-view-column v-if="!reset && params.day">
  83. <view class="u-column-item" v-for="(item, index) in days" :key="index">
  84. {{ formatNumber(item) }}
  85. <text class="u-text" v-if="showTimeTag">日</text>
  86. </view>
  87. </picker-view-column>
  88. <picker-view-column v-if="!reset && params.hour">
  89. <view class="u-column-item" v-for="(item, index) in hours" :key="index">
  90. {{ formatNumber(item) }}
  91. <text class="u-text" v-if="showTimeTag">时</text>
  92. </view>
  93. </picker-view-column>
  94. <picker-view-column v-if="!reset && params.minute">
  95. <view class="u-column-item" v-for="(item, index) in minutes" :key="index">
  96. {{ formatNumber(item) }}
  97. <text class="u-text" v-if="showTimeTag">分</text>
  98. </view>
  99. </picker-view-column>
  100. <picker-view-column v-if="!reset && params.second">
  101. <view class="u-column-item" v-for="(item, index) in seconds" :key="index">
  102. {{ formatNumber(item) }}
  103. <text class="u-text" v-if="showTimeTag">秒</text>
  104. </view>
  105. </picker-view-column>
  106. </picker-view>
  107. <picker-view
  108. v-else-if="mode == 'selector'"
  109. :value="valueArr"
  110. @change="change"
  111. class="u-picker-view"
  112. @pickstart="pickstart"
  113. @pickend="pickend"
  114. >
  115. <picker-view-column v-if="!reset">
  116. <view class="u-column-item" v-for="(item, index) in range" :key="index">
  117. <view class="u-line-1">{{ getItemValue(item, "selector") }}</view>
  118. </view>
  119. </picker-view-column>
  120. </picker-view>
  121. <picker-view
  122. v-else-if="mode == 'multiSelector'"
  123. :value="valueArr"
  124. @change="change"
  125. class="u-picker-view"
  126. @pickstart="pickstart"
  127. @pickend="pickend"
  128. >
  129. <picker-view-column v-if="!reset" v-for="(item, index) in range" :key="index">
  130. <view class="u-column-item" v-for="(item1, index1) in item" :key="index1">
  131. <view class="u-line-1">{{ getItemValue(item1, "multiSelector") }}</view>
  132. </view>
  133. </picker-view-column>
  134. </picker-view>
  135. </view>
  136. </view>
  137. </u-popup>
  138. </template>
  139. <script>
  140. import provinces from "../../libs/address/provinces.json";
  141. import citys from "../../libs/address/citys.json";
  142. import areas from "../../libs/address/areas.json";
  143. /**
  144. * picker picker弹出选择器
  145. * @description 此选择器有两种弹出模式:一是时间模式,可以配置年,日,月,时,分,秒参数 二是地区模式,可以配置省,市,区参数
  146. * @tutorial https://www.uviewui.com/components/picker.html
  147. * @property {Object} params 需要显示的参数,见官网说明
  148. * @property {String} mode 模式选择,region-地区类型,time-时间类型(默认time)
  149. * @property {String Number} start-year 可选的开始年份,mode=time时有效(默认1950)
  150. * @property {String Number} end-year 可选的结束年份,mode=time时有效(默认2050)
  151. * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
  152. * @property {Boolean} show-time-tag 时间模式时,是否显示后面的年月日中文提示
  153. * @property {String} cancel-color 取消按钮的颜色(默认#606266)
  154. * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
  155. * @property {String} default-time 默认选中的时间,mode=time时有效
  156. * @property {String} confirm-text 确认按钮的文字
  157. * @property {String} cancel-text 取消按钮的文字
  158. * @property {String} default-region 默认选中的地区,中文形式,mode=region时有效
  159. * @property {String} default-code 默认选中的地区,编号形式,mode=region时有效
  160. * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
  161. * @property {String Number} z-index 弹出时的z-index值(默认1075)
  162. * @property {Array} default-selector 数组形式,其中每一项表示选择了range对应项中的第几个
  163. * @property {Array} range 自定义选择的数据,mode=selector或mode=multiSelector时有效
  164. * @property {String} range-key 当range参数的元素为对象时,指定Object中的哪个key的值作为选择器显示内容
  165. * @event {Function} confirm 点击确定按钮,返回当前选择的值
  166. * @event {Function} cancel 点击取消按钮,返回当前选择的值
  167. * @example <u-picker v-model="show" mode="time"></u-picker>
  168. */
  169. export default {
  170. name: "u-picker",
  171. emits: ["update:modelValue", "input", "confirm", "cancel"],
  172. props: {
  173. // 通过双向绑定控制组件的弹出与收起
  174. value: {
  175. type: Boolean,
  176. default: false
  177. },
  178. modelValue: {
  179. type: Boolean,
  180. default: false
  181. },
  182. // picker中需要显示的参数
  183. params: {
  184. type: Object,
  185. default() {
  186. return {
  187. year: true,
  188. month: true,
  189. day: true,
  190. hour: false,
  191. minute: false,
  192. second: false,
  193. province: true,
  194. city: true,
  195. area: true,
  196. timestamp: true
  197. };
  198. }
  199. },
  200. // 当mode=selector或者mode=multiSelector时,提供的数组
  201. range: {
  202. type: Array,
  203. default() {
  204. return [];
  205. }
  206. },
  207. // 当mode=selector或者mode=multiSelector时,提供的默认选中的下标
  208. defaultSelector: {
  209. type: Array,
  210. default() {
  211. return [0];
  212. }
  213. },
  214. // 当 range 是一个 Array<Object> 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
  215. rangeKey: {
  216. type: String,
  217. default: ""
  218. },
  219. // 模式选择,region-地区类型,time-时间类型,selector-单列模式,multiSelector-多列模式
  220. mode: {
  221. type: String,
  222. default: "time"
  223. },
  224. // 年份开始时间
  225. startYear: {
  226. type: [String, Number],
  227. default: 1950
  228. },
  229. // 年份结束时间
  230. endYear: {
  231. type: [String, Number],
  232. default: 2050
  233. },
  234. // "取消"按钮的颜色
  235. cancelColor: {
  236. type: String,
  237. default: "#606266"
  238. },
  239. // "确定"按钮的颜色
  240. confirmColor: {
  241. type: String,
  242. default: "#2979ff"
  243. },
  244. // 默认显示的时间,2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
  245. defaultTime: {
  246. type: String,
  247. default: ""
  248. },
  249. // 默认显示的地区,可传类似["河北省", "秦皇岛市", "北戴河区"]
  250. defaultRegion: {
  251. type: Array,
  252. default() {
  253. return [];
  254. }
  255. },
  256. // 时间模式时,是否显示后面的年月日中文提示
  257. showTimeTag: {
  258. type: Boolean,
  259. default: true
  260. },
  261. // 默认显示地区的编码,defaultRegion和areaCode同时存在,areaCode优先,可传类似["13", "1303", "130304"]
  262. areaCode: {
  263. type: Array,
  264. default() {
  265. return [];
  266. }
  267. },
  268. safeAreaInsetBottom: {
  269. type: Boolean,
  270. default: false
  271. },
  272. // 是否允许通过点击遮罩关闭Picker
  273. maskCloseAble: {
  274. type: Boolean,
  275. default: true
  276. },
  277. // 弹出的z-index值
  278. zIndex: {
  279. type: [String, Number],
  280. default: 0
  281. },
  282. // 顶部标题
  283. title: {
  284. type: String,
  285. default: ""
  286. },
  287. // 取消按钮的文字
  288. cancelText: {
  289. type: String,
  290. default: "取消"
  291. },
  292. // 确认按钮的文字
  293. confirmText: {
  294. type: String,
  295. default: "确认"
  296. },
  297. // 遮罩的模糊度
  298. blur: {
  299. type: [String, Number],
  300. default: 0
  301. }
  302. },
  303. data() {
  304. return {
  305. popupValue: false,
  306. years: [],
  307. months: [],
  308. days: [],
  309. hours: [],
  310. minutes: [],
  311. seconds: [],
  312. year: 0,
  313. month: 0,
  314. day: 0,
  315. hour: 0,
  316. minute: 0,
  317. second: 0,
  318. reset: false,
  319. startDate: "",
  320. endDate: "",
  321. valueArr: [],
  322. provinces: provinces,
  323. citys: citys[0],
  324. areas: areas[0][0],
  325. province: 0,
  326. city: 0,
  327. area: 0,
  328. moving: false // 列是否还在滑动中,微信小程序如果在滑动中就点确定,结果可能不准确
  329. };
  330. },
  331. mounted() {
  332. this.init();
  333. },
  334. computed: {
  335. valueCom() {
  336. // #ifndef VUE3
  337. return this.value;
  338. // #endif
  339. // #ifdef VUE3
  340. return this.modelValue;
  341. // #endif
  342. },
  343. propsChange() {
  344. // 引用这几个变量,是为了监听其变化
  345. return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${
  346. this.defaultRegion
  347. }-${this.areaCode}`;
  348. },
  349. regionChange() {
  350. // 引用这几个变量,是为了监听其变化
  351. return `${this.province}-${this.city}`;
  352. },
  353. yearAndMonth() {
  354. return `${this.year}-${this.month}`;
  355. },
  356. uZIndex() {
  357. // 如果用户有传递z-index值,优先使用
  358. return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
  359. }
  360. },
  361. watch: {
  362. propsChange() {
  363. this.reset = true;
  364. setTimeout(() => this.init(), 10);
  365. },
  366. // 如果地区发生变化,为了让picker联动起来,必须重置this.citys和this.areas
  367. regionChange(val) {
  368. this.citys = citys[this.province];
  369. this.areas = areas[this.province][this.city];
  370. },
  371. // watch监听月份的变化,实时变更日的天数,因为不同月份,天数不一样
  372. // 一个月可能有30,31天,甚至闰年2月的29天,平年2月28天
  373. yearAndMonth(val) {
  374. if (this.params.year) this.setDays();
  375. },
  376. // 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍),需要重新初始化才能显示正确的值
  377. valueCom:{
  378. immediate: true,
  379. handler(n){
  380. if (n) {
  381. this.reset = true;
  382. setTimeout(() => this.init(), 10);
  383. }
  384. this.popupValue = n;
  385. }
  386. },
  387. },
  388. methods: {
  389. // 标识滑动开始,只有微信小程序才有这样的事件
  390. pickstart() {
  391. // #ifdef MP-WEIXIN
  392. this.moving = true;
  393. // #endif
  394. },
  395. // 标识滑动结束
  396. pickend() {
  397. // #ifdef MP-WEIXIN
  398. this.moving = false;
  399. // #endif
  400. },
  401. // 对单列和多列形式的判断是否有传入变量的情况
  402. getItemValue(item, mode) {
  403. // 目前(2020-05-25)uni-app对微信小程序编译有错误,导致v-if为false中的内容也执行,错误导致
  404. // 单列模式或者多列模式中的getItemValue同时被执行,故在这里再加一层判断
  405. if (this.mode == mode) {
  406. return typeof item == "object" ? item[this.rangeKey] : item;
  407. }
  408. },
  409. // 小于10前面补0,用于月份,日期,时分秒等
  410. formatNumber(num) {
  411. return +num < 10 ? "0" + num : String(num);
  412. },
  413. // 生成递进的数组
  414. generateArray: function(start, end) {
  415. // 转为数值格式,否则用户给end-year等传递字符串值时,下面的end+1会导致字符串拼接,而不是相加
  416. start = Number(start);
  417. end = Number(end);
  418. end = end > start ? end : start;
  419. // 生成数组,获取其中的索引,并剪出来
  420. return [...Array(end + 1).keys()].slice(start);
  421. },
  422. getIndex: function(arr, val) {
  423. let index = arr.indexOf(val);
  424. // 如果index为-1(即找不到index值),~(-1)=-(-1)-1=0,导致条件不成立
  425. return ~index ? index : 0;
  426. },
  427. //日期时间处理
  428. initTimeValue() {
  429. // 格式化时间,在IE浏览器(uni不存在此情况),无法识别日期间的"-"间隔符号
  430. let fdate = this.defaultTime.replace(/\-/g, "/");
  431. fdate = fdate && fdate.indexOf("/") == -1 ? `2020/01/01 ${fdate}` : fdate;
  432. let time = null;
  433. if (fdate) time = new Date(fdate);
  434. else time = new Date();
  435. // 获取年日月时分秒
  436. this.year = time.getFullYear();
  437. this.month = Number(time.getMonth()) + 1;
  438. this.day = time.getDate();
  439. this.hour = time.getHours();
  440. this.minute = time.getMinutes();
  441. this.second = time.getSeconds();
  442. },
  443. init() {
  444. this.valueArr = [];
  445. this.reset = false;
  446. if (this.mode == "time") {
  447. this.initTimeValue();
  448. if (this.params.year) {
  449. this.valueArr.push(0);
  450. this.setYears();
  451. }
  452. if (this.params.month) {
  453. this.valueArr.push(0);
  454. this.setMonths();
  455. }
  456. if (this.params.day) {
  457. this.valueArr.push(0);
  458. this.setDays();
  459. }
  460. if (this.params.hour) {
  461. this.valueArr.push(0);
  462. this.setHours();
  463. }
  464. if (this.params.minute) {
  465. this.valueArr.push(0);
  466. this.setMinutes();
  467. }
  468. if (this.params.second) {
  469. this.valueArr.push(0);
  470. this.setSeconds();
  471. }
  472. } else if (this.mode == "region") {
  473. if (this.params.province) {
  474. this.valueArr.push(0);
  475. this.setProvinces();
  476. }
  477. if (this.params.city) {
  478. this.valueArr.push(0);
  479. this.setCitys();
  480. }
  481. if (this.params.area) {
  482. this.valueArr.push(0);
  483. this.setAreas();
  484. }
  485. } else if (this.mode == "selector") {
  486. this.valueArr = this.defaultSelector;
  487. } else if (this.mode == "multiSelector") {
  488. this.valueArr = this.defaultSelector;
  489. this.multiSelectorValue = this.defaultSelector;
  490. }
  491. this.$forceUpdate();
  492. },
  493. // 设置picker的某一列值
  494. setYears() {
  495. // 获取年份集合
  496. this.years = this.generateArray(this.startYear, this.endYear);
  497. // 设置this.valueArr某一项的值,是为了让picker预选中某一个值
  498. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year));
  499. },
  500. setMonths() {
  501. this.months = this.generateArray(1, 12);
  502. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
  503. },
  504. setDays() {
  505. let totalDays = new Date(this.year, this.month, 0).getDate();
  506. this.days = this.generateArray(1, totalDays);
  507. let index = 0;
  508. // 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
  509. // 因为this.month和this.year变化时,会触发watch中的this.setDays(),导致this.valueArr.length计算有误
  510. if (this.params.year && this.params.month) index = 2;
  511. else if (this.params.month) index = 1;
  512. else if (this.params.year) index = 1;
  513. else index = 0;
  514. // 当月份变化时,会导致日期的天数也会变化,如果原来选的天数大于变化后的天数,则重置为变化后的最大值
  515. // 比如原来选中3月31日,调整为2月后,日期变为最大29,这时如果day值继续为31显然不合理,于是将其置为29(picker-column从1开始)
  516. if (this.day > this.days.length) this.day = this.days.length;
  517. this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
  518. },
  519. setHours() {
  520. this.hours = this.generateArray(0, 23);
  521. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour));
  522. },
  523. setMinutes() {
  524. this.minutes = this.generateArray(0, 59);
  525. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute));
  526. },
  527. setSeconds() {
  528. this.seconds = this.generateArray(0, 59);
  529. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second));
  530. },
  531. setProvinces() {
  532. // 判断是否需要province参数
  533. if (!this.params.province) return;
  534. let tmp = "";
  535. let useCode = false;
  536. // 如果同时配置了defaultRegion和areaCode,优先使用areaCode参数
  537. if (this.areaCode.length) {
  538. tmp = this.areaCode[0];
  539. useCode = true;
  540. } else if (this.defaultRegion.length) tmp = this.defaultRegion[0];
  541. else tmp = 0;
  542. // 历遍省份数组匹配
  543. provinces.map((v, k) => {
  544. if (useCode ? v.code == tmp : v.name == tmp) {
  545. tmp = k;
  546. }
  547. });
  548. this.province = tmp;
  549. this.provinces = provinces;
  550. // 设置默认省份的值
  551. this.valueArr.splice(0, 1, this.province);
  552. },
  553. setCitys() {
  554. if (!this.params.city) return;
  555. let tmp = "";
  556. let useCode = false;
  557. if (this.areaCode.length) {
  558. tmp = this.areaCode[1];
  559. useCode = true;
  560. } else if (this.defaultRegion.length) tmp = this.defaultRegion[1];
  561. else tmp = 0;
  562. citys[this.province].map((v, k) => {
  563. if (useCode ? v.code == tmp : v.name == tmp) {
  564. tmp = k;
  565. }
  566. });
  567. this.city = tmp;
  568. this.citys = citys[this.province];
  569. this.valueArr.splice(1, 1, this.city);
  570. },
  571. setAreas() {
  572. if (!this.params.area) return;
  573. let tmp = "";
  574. let useCode = false;
  575. if (this.areaCode.length) {
  576. tmp = this.areaCode[2];
  577. useCode = true;
  578. } else if (this.defaultRegion.length) tmp = this.defaultRegion[2];
  579. else tmp = 0;
  580. areas[this.province][this.city].map((v, k) => {
  581. if (useCode ? v.code == tmp : v.name == tmp) {
  582. tmp = k;
  583. }
  584. });
  585. this.area = tmp;
  586. this.areas = areas[this.province][this.city];
  587. this.valueArr.splice(2, 1, this.area);
  588. },
  589. close() {
  590. this.$emit("input", false);
  591. this.$emit("update:modelValue", false);
  592. },
  593. // 用户更改picker的列选项
  594. change(e) {
  595. this.valueArr = e.detail.value;
  596. let i = 0;
  597. if (this.mode == "time") {
  598. // 这里使用i++,是因为this.valueArr数组的长度是不确定长度的,它根据this.params的值来配置长度
  599. // 进入if规则,i会加1,保证了能获取准确的值
  600. if (this.params.year) this.year = this.years[this.valueArr[i++]];
  601. if (this.params.month) this.month = this.months[this.valueArr[i++]];
  602. if (this.params.day) this.day = this.days[this.valueArr[i++]];
  603. if (this.params.hour) this.hour = this.hours[this.valueArr[i++]];
  604. if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]];
  605. if (this.params.second) this.second = this.seconds[this.valueArr[i++]];
  606. } else if (this.mode == "region") {
  607. if (this.params.province) this.province = this.valueArr[i++];
  608. if (this.params.city) this.city = this.valueArr[i++];
  609. if (this.params.area) this.area = this.valueArr[i++];
  610. } else if (this.mode == "multiSelector") {
  611. let index = null;
  612. // 对比前后两个数组,寻找变更的是哪一列,如果某一个元素不同,即可判定该列发生了变化
  613. this.defaultSelector.map((val, idx) => {
  614. if (val != e.detail.value[idx]) index = idx;
  615. });
  616. // 为了让用户对多列变化时,对动态设置其他列的变更
  617. if (index != null) {
  618. this.$emit("columnchange", {
  619. column: index,
  620. index: e.detail.value[index]
  621. });
  622. }
  623. }
  624. },
  625. // 用户点击确定按钮
  626. getResult(event = null) {
  627. // #ifdef MP-WEIXIN
  628. if (this.moving) return;
  629. // #endif
  630. let result = {};
  631. // 只返回用户在this.params中配置了为true的字段
  632. if (this.mode == "time") {
  633. if (this.params.year) result.year = this.formatNumber(this.year || 0);
  634. if (this.params.month) result.month = this.formatNumber(this.month || 0);
  635. if (this.params.day) result.day = this.formatNumber(this.day || 0);
  636. if (this.params.hour) result.hour = this.formatNumber(this.hour || 0);
  637. if (this.params.minute) result.minute = this.formatNumber(this.minute || 0);
  638. if (this.params.second) result.second = this.formatNumber(this.second || 0);
  639. if (this.params.timestamp) result.timestamp = this.getTimestamp();
  640. } else if (this.mode == "region") {
  641. if (this.params.province) result.province = provinces[this.province];
  642. if (this.params.city) result.city = citys[this.province][this.city];
  643. if (this.params.area) result.area = areas[this.province][this.city][this.area];
  644. } else if (this.mode == "selector") {
  645. result = this.valueArr;
  646. } else if (this.mode == "multiSelector") {
  647. result = this.valueArr;
  648. }
  649. if (event) this.$emit(event, result);
  650. this.close();
  651. },
  652. // 获取时间戳
  653. getTimestamp() {
  654. // yyyy-mm-dd为安卓写法,不支持iOS,需要使用"/"分隔,才能二者兼容
  655. let time =
  656. this.year +
  657. "/" +
  658. this.month +
  659. "/" +
  660. this.day +
  661. " " +
  662. this.hour +
  663. ":" +
  664. this.minute +
  665. ":" +
  666. this.second;
  667. return new Date(time).getTime() / 1000;
  668. },
  669. // 获得数据源
  670. getDateSource() {
  671. return {
  672. provinces,
  673. citys,
  674. areas
  675. };
  676. },
  677. // 智能识别省市区
  678. regionDiscern(addressText){
  679. // 街道地址
  680. let address = "";
  681. // 省
  682. let province = {};
  683. // 市
  684. let city = {};
  685. // 区
  686. let area = {};
  687. if (!addressText) return { code: -1, msg: "地址文本不能为空" };
  688. addressText.trim(); // 去除前后空格
  689. // 省
  690. // 1.先找出省份,通过匹配前面两个字(中国34个省份中,前面两个字不会重复)
  691. let firstTwoKey = addressText.substring(0, 2); //字符串开始的两个字符
  692. // 所在省的下标
  693. let provinceIndex = -1;
  694. for (let i = 0; i < provinces.length; i++) {
  695. let { code, name } = provinces[i];
  696. if (name.indexOf(firstTwoKey) == 0) {
  697. province = { code, name };
  698. provinceIndex = i;
  699. break;
  700. }
  701. }
  702. if (provinceIndex == -1) return { code: -1, msg: `省份【${firstTwoKey}】没有找到,请输入正确的地址` };
  703. // 获取市
  704. let citysArr = citys[provinceIndex];
  705. // 所在市的下标
  706. let cityIndex = -1;
  707. for (let i = 0; i < citysArr.length; i++) {
  708. let { name, code } = citysArr[i];
  709. // 除去最后一个 市 字
  710. let cityName = name.substr(0, name.length - 1);
  711. // 用城市的名字去匹配 addressText 地址
  712. if (addressText.indexOf(cityName) > -1) {
  713. city = { code, name };
  714. cityIndex = i;
  715. break;
  716. }
  717. }
  718. if (cityIndex == -1) return { code: -1, msg: `地级市没有找到,请输入正确的地址` };
  719. // 区
  720. let areasArr = areas[provinceIndex][cityIndex];
  721. // 所在区的下标
  722. let areaIndex = -1;
  723. for (let i = 0; i < areasArr.length; i++) {
  724. let { code, name } = areasArr[i];
  725. // 区名(县名)一般为3个字,如江干区,有可能会简写成 江干
  726. // 区名(县名)为2个字时,不会简写,如蓉县
  727. let reg = name;
  728. if (name.length > 2) reg += `|${name.substr(0, name.length - 1)}`;
  729. // 查找地址中是否存在该区名
  730. let areaRegExp = new RegExp(reg);
  731. if (addressText.search(areaRegExp) > -1) {
  732. area = { code, name };
  733. // 详情地址
  734. address = addressText.replace(new RegExp(reg), "{{~}}").split("{{~}}")[1];
  735. areaIndex = i;
  736. break;
  737. }
  738. }
  739. if (areaIndex == -1) return { code: -1, msg: "县级市没有找到,请输入正确的地址" };
  740. let formatted_address = `${province.name}${city.name}${area.name}${address}`;
  741. let res = {
  742. code: 0,
  743. msg: "ok",
  744. data: {
  745. province, // 省
  746. city, // 市
  747. area, // 区
  748. address, // 街道地址
  749. formatted_address, // 完整格式化地址
  750. }
  751. };
  752. return res;
  753. },
  754. // 智能识别收货信息
  755. addressDiscern(text) {
  756. // 收货人姓名
  757. let name = "";
  758. // 收货人手机
  759. let mobile = "";
  760. // 街道地址
  761. let address = "";
  762. // 省
  763. let province = {};
  764. // 市
  765. let city = {};
  766. // 区
  767. let area = {};
  768. if (!text) return { code: -1, msg: "地址文本不能为空" };
  769. //let newText = text.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,' ');
  770. let textArr = text.split(/[^\u4e00-\u9fa5a-zA-Z0-9+-()()]+/g).filter(v => v.length);
  771. if (textArr.length != 3) return { code: -1, msg: "地址格式不正确,请按姓名 手机号 收货地址格式。" };
  772. // 获取姓名和手机号
  773. let temp;
  774. let addressText; // 地址原文
  775. for (let [k, v] of textArr.entries()) {
  776. if (/^1[3,4,5,6,7,8,9][0-9]{9}$/.test(v)) {
  777. mobile = v;
  778. continue;
  779. }
  780. //记录第一次出现的字符串
  781. if (!temp) {
  782. temp = v;
  783. continue;
  784. }
  785. // 当前字符串的长度和之前字符串的长度的对比,进而确定姓名和地址信息
  786. temp.length > v.length? ((addressText = temp), (name = v)): ((addressText = v), (name = temp));
  787. }
  788. let positionRes = this.regionDiscern(addressText);
  789. if (positionRes.code !== 0) return positionRes;
  790. let res = {
  791. code: 0,
  792. msg: "ok",
  793. data: {
  794. name, // 姓名
  795. mobile, // 手机号
  796. position: positionRes.data, // 省市区街道信息
  797. }
  798. };
  799. return res;
  800. }
  801. }
  802. };
  803. </script>
  804. <style lang="scss" scoped>
  805. .u-datetime-picker {
  806. position: relative;
  807. z-index: 999;
  808. }
  809. .u-picker-view {
  810. height: 100%;
  811. box-sizing: border-box;
  812. }
  813. .u-picker-header {
  814. width: 100%;
  815. height: 90rpx;
  816. padding: 0 40rpx;
  817. display: flex;
  818. justify-content: space-between;
  819. align-items: center;
  820. box-sizing: border-box;
  821. font-size: 30rpx;
  822. background: #fff;
  823. position: relative;
  824. }
  825. .u-picker-header::after {
  826. content: "";
  827. position: absolute;
  828. border-bottom: 1rpx solid #eaeef1;
  829. -webkit-transform: scaleY(0.5);
  830. transform: scaleY(0.5);
  831. bottom: 0;
  832. right: 0;
  833. left: 0;
  834. }
  835. .u-picker__title {
  836. color: $u-content-color;
  837. }
  838. .u-picker-body {
  839. width: 100%;
  840. height: 500rpx;
  841. overflow: hidden;
  842. background-color: #fff;
  843. }
  844. .u-column-item {
  845. display: flex;
  846. align-items: center;
  847. justify-content: center;
  848. font-size: 32rpx;
  849. color: $u-main-color;
  850. padding: 0 8rpx;
  851. }
  852. .u-text {
  853. font-size: 24rpx;
  854. padding-left: 8rpx;
  855. }
  856. .u-btn-picker {
  857. padding: 16rpx;
  858. box-sizing: border-box;
  859. text-align: center;
  860. text-decoration: none;
  861. }
  862. .u-opacity {
  863. opacity: 0.5;
  864. }
  865. .u-btn-picker--primary {
  866. color: $u-type-primary;
  867. }
  868. .u-btn-picker--tips {
  869. color: $u-tips-color;
  870. }
  871. </style>