u-picker.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676
  1. <template>
  2. <u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
  3. <view class="u-datetime-picker">
  4. <view class="u-picker-header" @touchmove.stop.prevent="">
  5. <view class="u-btn-picker u-btn-picker--tips"
  6. :style="{ color: cancelColor }"
  7. hover-class="u-opacity"
  8. :hover-stay-time="150"
  9. @tap="getResult('cancel')"
  10. >{{cancelText}}</view>
  11. <view class="u-picker__title">{{ title }}</view>
  12. <view
  13. class="u-btn-picker u-btn-picker--primary"
  14. :style="{ color: moving ? cancelColor : confirmColor }"
  15. hover-class="u-opacity"
  16. :hover-stay-time="150"
  17. @touchmove.stop=""
  18. @tap.stop="getResult('confirm')"
  19. >
  20. {{confirmText}}
  21. </view>
  22. </view>
  23. <view class="u-picker-body">
  24. <picker-view v-if="mode == 'region'" :value="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
  25. <picker-view-column v-if="!reset && params.province">
  26. <view class="u-column-item" v-for="(item, index) in provinces" :key="index">
  27. <view class="u-line-1">{{ item.label }}</view>
  28. </view>
  29. </picker-view-column>
  30. <picker-view-column v-if="!reset && params.city">
  31. <view class="u-column-item" v-for="(item, index) in citys" :key="index">
  32. <view class="u-line-1">{{ item.label }}</view>
  33. </view>
  34. </picker-view-column>
  35. <picker-view-column v-if="!reset && params.area">
  36. <view class="u-column-item" v-for="(item, index) in areas" :key="index">
  37. <view class="u-line-1">{{ item.label }}</view>
  38. </view>
  39. </picker-view-column>
  40. </picker-view>
  41. <picker-view v-else-if="mode == 'time'" :value="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
  42. <picker-view-column v-if="!reset && params.year">
  43. <view class="u-column-item" v-for="(item, index) in years" :key="index">
  44. {{ item }}
  45. <text class="u-text" v-if="showTimeTag">年</text>
  46. </view>
  47. </picker-view-column>
  48. <picker-view-column v-if="!reset && params.month">
  49. <view class="u-column-item" v-for="(item, index) in months" :key="index">
  50. {{ formatNumber(item) }}
  51. <text class="u-text" v-if="showTimeTag">月</text>
  52. </view>
  53. </picker-view-column>
  54. <picker-view-column v-if="!reset && params.day">
  55. <view class="u-column-item" v-for="(item, index) in days" :key="index">
  56. {{ formatNumber(item) }}
  57. <text class="u-text" v-if="showTimeTag">日</text>
  58. </view>
  59. </picker-view-column>
  60. <picker-view-column v-if="!reset && params.hour">
  61. <view class="u-column-item" v-for="(item, index) in hours" :key="index">
  62. {{ formatNumber(item) }}
  63. <text class="u-text" v-if="showTimeTag">时</text>
  64. </view>
  65. </picker-view-column>
  66. <picker-view-column v-if="!reset && params.minute">
  67. <view class="u-column-item" v-for="(item, index) in minutes" :key="index">
  68. {{ formatNumber(item) }}
  69. <text class="u-text" v-if="showTimeTag">分</text>
  70. </view>
  71. </picker-view-column>
  72. <picker-view-column v-if="!reset && params.second">
  73. <view class="u-column-item" v-for="(item, index) in seconds" :key="index">
  74. {{ formatNumber(item) }}
  75. <text class="u-text" v-if="showTimeTag">秒</text>
  76. </view>
  77. </picker-view-column>
  78. </picker-view>
  79. <picker-view v-else-if="mode == 'selector'" :value="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
  80. <picker-view-column v-if="!reset">
  81. <view class="u-column-item" v-for="(item, index) in range" :key="index">
  82. <view class="u-line-1">{{ getItemValue(item, 'selector') }}</view>
  83. </view>
  84. </picker-view-column>
  85. </picker-view>
  86. <picker-view v-else-if="mode == 'multiSelector'" :value="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
  87. <picker-view-column v-if="!reset" v-for="(item, index) in range" :key="index">
  88. <view class="u-column-item" v-for="(item1, index1) in item" :key="index1">
  89. <view class="u-line-1">{{ getItemValue(item1, 'multiSelector') }}</view>
  90. </view>
  91. </picker-view-column>
  92. </picker-view>
  93. </view>
  94. </view>
  95. </u-popup>
  96. </template>
  97. <script>
  98. import provinces from '../../libs/util/province.js';
  99. import citys from '../../libs/util/city.js';
  100. import areas from '../../libs/util/area.js';
  101. /**
  102. * picker picker弹出选择器
  103. * @description 此选择器有两种弹出模式:一是时间模式,可以配置年,日,月,时,分,秒参数 二是地区模式,可以配置省,市,区参数
  104. * @tutorial https://www.uviewui.com/components/picker.html
  105. * @property {Object} params 需要显示的参数,见官网说明
  106. * @property {String} mode 模式选择,region-地区类型,time-时间类型(默认time)
  107. * @property {String Number} start-year 可选的开始年份,mode=time时有效(默认1950)
  108. * @property {String Number} end-year 可选的结束年份,mode=time时有效(默认2050)
  109. * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
  110. * @property {Boolean} show-time-tag 时间模式时,是否显示后面的年月日中文提示
  111. * @property {String} cancel-color 取消按钮的颜色(默认#606266)
  112. * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
  113. * @property {String} default-time 默认选中的时间,mode=time时有效
  114. * @property {String} confirm-text 确认按钮的文字
  115. * @property {String} cancel-text 取消按钮的文字
  116. * @property {String} default-region 默认选中的地区,中文形式,mode=region时有效
  117. * @property {String} default-code 默认选中的地区,编号形式,mode=region时有效
  118. * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
  119. * @property {String Number} z-index 弹出时的z-index值(默认1075)
  120. * @property {Array} default-selector 数组形式,其中每一项表示选择了range对应项中的第几个
  121. * @property {Array} range 自定义选择的数据,mode=selector或mode=multiSelector时有效
  122. * @property {String} range-key 当range参数的元素为对象时,指定Object中的哪个key的值作为选择器显示内容
  123. * @event {Function} confirm 点击确定按钮,返回当前选择的值
  124. * @event {Function} cancel 点击取消按钮,返回当前选择的值
  125. * @example <u-picker v-model="show" mode="time"></u-picker>
  126. */
  127. export default {
  128. name: 'u-picker',
  129. props: {
  130. // picker中需要显示的参数
  131. params: {
  132. type: Object,
  133. default() {
  134. return {
  135. year: true,
  136. month: true,
  137. day: true,
  138. hour: false,
  139. minute: false,
  140. second: false,
  141. province: true,
  142. city: true,
  143. area: true,
  144. timestamp: true,
  145. };
  146. }
  147. },
  148. // 当mode=selector或者mode=multiSelector时,提供的数组
  149. range: {
  150. type: Array,
  151. default() {
  152. return [];
  153. }
  154. },
  155. // 当mode=selector或者mode=multiSelector时,提供的默认选中的下标
  156. defaultSelector: {
  157. type: Array,
  158. default() {
  159. return [0];
  160. }
  161. },
  162. // 当 range 是一个 Array<Object> 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
  163. rangeKey: {
  164. type: String,
  165. default: ''
  166. },
  167. // 模式选择,region-地区类型,time-时间类型,selector-单列模式,multiSelector-多列模式
  168. mode: {
  169. type: String,
  170. default: 'time'
  171. },
  172. // 年份开始时间
  173. startYear: {
  174. type: [String, Number],
  175. default: 1950
  176. },
  177. // 年份结束时间
  178. endYear: {
  179. type: [String, Number],
  180. default: 2050
  181. },
  182. // "取消"按钮的颜色
  183. cancelColor: {
  184. type: String,
  185. default: '#606266'
  186. },
  187. // "确定"按钮的颜色
  188. confirmColor: {
  189. type: String,
  190. default: '#2979ff'
  191. },
  192. // 默认显示的时间,2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
  193. defaultTime: {
  194. type: String,
  195. default: ''
  196. },
  197. // 默认显示的地区,可传类似["河北省", "秦皇岛市", "北戴河区"]
  198. defaultRegion: {
  199. type: Array,
  200. default() {
  201. return [];
  202. }
  203. },
  204. // 时间模式时,是否显示后面的年月日中文提示
  205. showTimeTag: {
  206. type: Boolean,
  207. default: true
  208. },
  209. // 默认显示地区的编码,defaultRegion和areaCode同时存在,areaCode优先,可传类似["13", "1303", "130304"]
  210. areaCode: {
  211. type: Array,
  212. default() {
  213. return [];
  214. }
  215. },
  216. safeAreaInsetBottom: {
  217. type: Boolean,
  218. default: false
  219. },
  220. // 是否允许通过点击遮罩关闭Picker
  221. maskCloseAble: {
  222. type: Boolean,
  223. default: true
  224. },
  225. // 通过双向绑定控制组件的弹出与收起
  226. value: {
  227. type: Boolean,
  228. default: false
  229. },
  230. // 弹出的z-index值
  231. zIndex: {
  232. type: [String, Number],
  233. default: 0
  234. },
  235. // 顶部标题
  236. title: {
  237. type: String,
  238. default: ''
  239. },
  240. // 取消按钮的文字
  241. cancelText: {
  242. type: String,
  243. default: '取消'
  244. },
  245. // 确认按钮的文字
  246. confirmText: {
  247. type: String,
  248. default: '确认'
  249. }
  250. },
  251. data() {
  252. return {
  253. years: [],
  254. months: [],
  255. days: [],
  256. hours: [],
  257. minutes: [],
  258. seconds: [],
  259. year: 0,
  260. month: 0,
  261. day: 0,
  262. hour: 0,
  263. minute: 0,
  264. second: 0,
  265. reset: false,
  266. startDate: '',
  267. endDate: '',
  268. valueArr: [],
  269. provinces: provinces,
  270. citys: citys[0],
  271. areas: areas[0][0],
  272. province: 0,
  273. city: 0,
  274. area: 0,
  275. moving: false // 列是否还在滑动中,微信小程序如果在滑动中就点确定,结果可能不准确
  276. };
  277. },
  278. mounted() {
  279. this.init();
  280. },
  281. computed: {
  282. propsChange() {
  283. // 引用这几个变量,是为了监听其变化
  284. return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${this.defaultRegion}-${this.areaCode}`;
  285. },
  286. regionChange() {
  287. // 引用这几个变量,是为了监听其变化
  288. return `${this.province}-${this.city}`;
  289. },
  290. yearAndMonth() {
  291. return `${this.year}-${this.month}`;
  292. },
  293. uZIndex() {
  294. // 如果用户有传递z-index值,优先使用
  295. return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
  296. }
  297. },
  298. watch: {
  299. propsChange() {
  300. this.reset = true;
  301. setTimeout(() => this.init(), 10);
  302. },
  303. // 如果地区发生变化,为了让picker联动起来,必须重置this.citys和this.areas
  304. regionChange(val) {
  305. this.citys = citys[this.province];
  306. this.areas = areas[this.province][this.city];
  307. },
  308. // watch监听月份的变化,实时变更日的天数,因为不同月份,天数不一样
  309. // 一个月可能有30,31天,甚至闰年2月的29天,平年2月28天
  310. yearAndMonth(val) {
  311. if (this.params.year) this.setDays();
  312. },
  313. // 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍),需要重新初始化才能显示正确的值
  314. value(n) {
  315. if (n) {
  316. this.reset = true;
  317. setTimeout(() => this.init(), 10);
  318. }
  319. }
  320. },
  321. methods: {
  322. // 标识滑动开始,只有微信小程序才有这样的事件
  323. pickstart() {
  324. // #ifdef MP-WEIXIN
  325. this.moving = true;
  326. // #endif
  327. },
  328. // 标识滑动结束
  329. pickend() {
  330. // #ifdef MP-WEIXIN
  331. this.moving = false;
  332. // #endif
  333. },
  334. // 对单列和多列形式的判断是否有传入变量的情况
  335. getItemValue(item, mode) {
  336. // 目前(2020-05-25)uni-app对微信小程序编译有错误,导致v-if为false中的内容也执行,错误导致
  337. // 单列模式或者多列模式中的getItemValue同时被执行,故在这里再加一层判断
  338. if (this.mode == mode) {
  339. return typeof item == 'object' ? item[this.rangeKey] : item;
  340. }
  341. },
  342. // 小于10前面补0,用于月份,日期,时分秒等
  343. formatNumber(num) {
  344. return +num < 10 ? '0' + num : String(num);
  345. },
  346. // 生成递进的数组
  347. generateArray: function(start, end) {
  348. // 转为数值格式,否则用户给end-year等传递字符串值时,下面的end+1会导致字符串拼接,而不是相加
  349. start = Number(start);
  350. end = Number(end);
  351. end = end > start ? end : start;
  352. // 生成数组,获取其中的索引,并剪出来
  353. return [...Array(end + 1).keys()].slice(start);
  354. },
  355. getIndex: function(arr, val) {
  356. let index = arr.indexOf(val);
  357. // 如果index为-1(即找不到index值),~(-1)=-(-1)-1=0,导致条件不成立
  358. return ~index ? index : 0;
  359. },
  360. //日期时间处理
  361. initTimeValue() {
  362. // 格式化时间,在IE浏览器(uni不存在此情况),无法识别日期间的"-"间隔符号
  363. let fdate = this.defaultTime.replace(/\-/g, '/');
  364. fdate = fdate && fdate.indexOf('/') == -1 ? `2020/01/01 ${fdate}` : fdate;
  365. let time = null;
  366. if (fdate) time = new Date(fdate);
  367. else time = new Date();
  368. // 获取年日月时分秒
  369. this.year = time.getFullYear();
  370. this.month = Number(time.getMonth()) + 1;
  371. this.day = time.getDate();
  372. this.hour = time.getHours();
  373. this.minute = time.getMinutes();
  374. this.second = time.getSeconds();
  375. },
  376. init() {
  377. this.valueArr = [];
  378. this.reset = false;
  379. if (this.mode == 'time') {
  380. this.initTimeValue();
  381. if (this.params.year) {
  382. this.valueArr.push(0);
  383. this.setYears();
  384. }
  385. if (this.params.month) {
  386. this.valueArr.push(0);
  387. this.setMonths();
  388. }
  389. if (this.params.day) {
  390. this.valueArr.push(0);
  391. this.setDays();
  392. }
  393. if (this.params.hour) {
  394. this.valueArr.push(0);
  395. this.setHours();
  396. }
  397. if (this.params.minute) {
  398. this.valueArr.push(0);
  399. this.setMinutes();
  400. }
  401. if (this.params.second) {
  402. this.valueArr.push(0);
  403. this.setSeconds();
  404. }
  405. } else if (this.mode == 'region') {
  406. if (this.params.province) {
  407. this.valueArr.push(0);
  408. this.setProvinces();
  409. }
  410. if (this.params.city) {
  411. this.valueArr.push(0);
  412. this.setCitys();
  413. }
  414. if (this.params.area) {
  415. this.valueArr.push(0);
  416. this.setAreas();
  417. }
  418. } else if (this.mode == 'selector') {
  419. this.valueArr = this.defaultSelector;
  420. } else if (this.mode == 'multiSelector') {
  421. this.valueArr = this.defaultSelector;
  422. this.multiSelectorValue = this.defaultSelector;
  423. }
  424. this.$forceUpdate();
  425. },
  426. // 设置picker的某一列值
  427. setYears() {
  428. // 获取年份集合
  429. this.years = this.generateArray(this.startYear, this.endYear);
  430. // 设置this.valueArr某一项的值,是为了让picker预选中某一个值
  431. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year));
  432. },
  433. setMonths() {
  434. this.months = this.generateArray(1, 12);
  435. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
  436. },
  437. setDays() {
  438. let totalDays = new Date(this.year, this.month, 0).getDate();
  439. this.days = this.generateArray(1, totalDays);
  440. let index = 0;
  441. // 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
  442. // 因为this.month和this.year变化时,会触发watch中的this.setDays(),导致this.valueArr.length计算有误
  443. if (this.params.year && this.params.month) index = 2;
  444. else if (this.params.month) index = 1;
  445. else if (this.params.year) index = 1;
  446. else index = 0;
  447. // 当月份变化时,会导致日期的天数也会变化,如果原来选的天数大于变化后的天数,则重置为变化后的最大值
  448. // 比如原来选中3月31日,调整为2月后,日期变为最大29,这时如果day值继续为31显然不合理,于是将其置为29(picker-column从1开始)
  449. if(this.day > this.days.length) this.day = this.days.length;
  450. this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
  451. },
  452. setHours() {
  453. this.hours = this.generateArray(0, 23);
  454. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour));
  455. },
  456. setMinutes() {
  457. this.minutes = this.generateArray(0, 59);
  458. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute));
  459. },
  460. setSeconds() {
  461. this.seconds = this.generateArray(0, 59);
  462. this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second));
  463. },
  464. setProvinces() {
  465. // 判断是否需要province参数
  466. if (!this.params.province) return;
  467. let tmp = '';
  468. let useCode = false;
  469. // 如果同时配置了defaultRegion和areaCode,优先使用areaCode参数
  470. if (this.areaCode.length) {
  471. tmp = this.areaCode[0];
  472. useCode = true;
  473. } else if (this.defaultRegion.length) tmp = this.defaultRegion[0];
  474. else tmp = 0;
  475. // 历遍省份数组匹配
  476. provinces.map((v, k) => {
  477. if (useCode ? v.value == tmp : v.label == tmp) {
  478. tmp = k;
  479. }
  480. });
  481. this.province = tmp;
  482. this.provinces = provinces;
  483. // 设置默认省份的值
  484. this.valueArr.splice(0, 1, this.province);
  485. },
  486. setCitys() {
  487. if (!this.params.city) return;
  488. let tmp = '';
  489. let useCode = false;
  490. if (this.areaCode.length) {
  491. tmp = this.areaCode[1];
  492. useCode = true;
  493. } else if (this.defaultRegion.length) tmp = this.defaultRegion[1];
  494. else tmp = 0;
  495. citys[this.province].map((v, k) => {
  496. if (useCode ? v.value == tmp : v.label == tmp) {
  497. tmp = k;
  498. }
  499. });
  500. this.city = tmp;
  501. this.citys = citys[this.province];
  502. this.valueArr.splice(1, 1, this.city);
  503. },
  504. setAreas() {
  505. if (!this.params.area) return;
  506. let tmp = '';
  507. let useCode = false;
  508. if (this.areaCode.length) {
  509. tmp = this.areaCode[2];
  510. useCode = true;
  511. } else if (this.defaultRegion.length) tmp = this.defaultRegion[2];
  512. else tmp = 0;
  513. areas[this.province][this.city].map((v, k) => {
  514. if (useCode ? v.value == tmp : v.label == tmp) {
  515. tmp = k;
  516. }
  517. });
  518. this.area = tmp;
  519. this.areas = areas[this.province][this.city];
  520. this.valueArr.splice(2, 1, this.area);
  521. },
  522. close() {
  523. this.$emit('input', false);
  524. },
  525. // 用户更改picker的列选项
  526. change(e) {
  527. this.valueArr = e.detail.value;
  528. let i = 0;
  529. if (this.mode == 'time') {
  530. // 这里使用i++,是因为this.valueArr数组的长度是不确定长度的,它根据this.params的值来配置长度
  531. // 进入if规则,i会加1,保证了能获取准确的值
  532. if (this.params.year) this.year = this.years[this.valueArr[i++]];
  533. if (this.params.month) this.month = this.months[this.valueArr[i++]];
  534. if (this.params.day) this.day = this.days[this.valueArr[i++]];
  535. if (this.params.hour) this.hour = this.hours[this.valueArr[i++]];
  536. if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]];
  537. if (this.params.second) this.second = this.seconds[this.valueArr[i++]];
  538. } else if (this.mode == 'region') {
  539. if (this.params.province) this.province = this.valueArr[i++];
  540. if (this.params.city) this.city = this.valueArr[i++];
  541. if (this.params.area) this.area = this.valueArr[i++];
  542. } else if (this.mode == 'multiSelector') {
  543. let index = null;
  544. // 对比前后两个数组,寻找变更的是哪一列,如果某一个元素不同,即可判定该列发生了变化
  545. this.defaultSelector.map((val, idx) => {
  546. if (val != e.detail.value[idx]) index = idx;
  547. });
  548. // 为了让用户对多列变化时,对动态设置其他列的变更
  549. if (index != null) {
  550. this.$emit('columnchange', {
  551. column: index,
  552. index: e.detail.value[index]
  553. });
  554. }
  555. }
  556. },
  557. // 用户点击确定按钮
  558. getResult(event = null) {
  559. // #ifdef MP-WEIXIN
  560. if (this.moving) return;
  561. // #endif
  562. let result = {};
  563. // 只返回用户在this.params中配置了为true的字段
  564. if (this.mode == 'time') {
  565. if (this.params.year) result.year = this.formatNumber(this.year || 0);
  566. if (this.params.month) result.month = this.formatNumber(this.month || 0);
  567. if (this.params.day) result.day = this.formatNumber(this.day || 0);
  568. if (this.params.hour) result.hour = this.formatNumber(this.hour || 0);
  569. if (this.params.minute) result.minute = this.formatNumber(this.minute || 0);
  570. if (this.params.second) result.second = this.formatNumber(this.second || 0);
  571. if (this.params.timestamp) result.timestamp = this.getTimestamp();
  572. } else if (this.mode == 'region') {
  573. if (this.params.province) result.province = provinces[this.province];
  574. if (this.params.city) result.city = citys[this.province][this.city];
  575. if (this.params.area) result.area = areas[this.province][this.city][this.area];
  576. } else if (this.mode == 'selector') {
  577. result = this.valueArr;
  578. } else if (this.mode == 'multiSelector') {
  579. result = this.valueArr;
  580. }
  581. if (event) this.$emit(event, result);
  582. this.close();
  583. },
  584. // 获取时间戳
  585. getTimestamp() {
  586. // yyyy-mm-dd为安卓写法,不支持iOS,需要使用"/"分隔,才能二者兼容
  587. let time = this.year + '/' + this.month + '/' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this.second;
  588. return new Date(time).getTime() / 1000;
  589. }
  590. }
  591. };
  592. </script>
  593. <style lang="scss" scoped>
  594. @import '../../libs/css/style.components.scss';
  595. .u-datetime-picker {
  596. position: relative;
  597. z-index: 999;
  598. }
  599. .u-picker-view {
  600. height: 100%;
  601. box-sizing: border-box;
  602. }
  603. .u-picker-header {
  604. width: 100%;
  605. height: 90rpx;
  606. padding: 0 40rpx;
  607. @include vue-flex;
  608. justify-content: space-between;
  609. align-items: center;
  610. box-sizing: border-box;
  611. font-size: 30rpx;
  612. background: #fff;
  613. position: relative;
  614. }
  615. .u-picker-header::after {
  616. content: '';
  617. position: absolute;
  618. border-bottom: 1rpx solid #eaeef1;
  619. -webkit-transform: scaleY(0.5);
  620. transform: scaleY(0.5);
  621. bottom: 0;
  622. right: 0;
  623. left: 0;
  624. }
  625. .u-picker__title {
  626. color: $u-content-color;
  627. }
  628. .u-picker-body {
  629. width: 100%;
  630. height: 500rpx;
  631. overflow: hidden;
  632. background-color: #fff;
  633. }
  634. .u-column-item {
  635. @include vue-flex;
  636. align-items: center;
  637. justify-content: center;
  638. font-size: 32rpx;
  639. color: $u-main-color;
  640. padding: 0 8rpx;
  641. }
  642. .u-text {
  643. font-size: 24rpx;
  644. padding-left: 8rpx;
  645. }
  646. .u-btn-picker {
  647. padding: 16rpx;
  648. box-sizing: border-box;
  649. text-align: center;
  650. text-decoration: none;
  651. }
  652. .u-opacity {
  653. opacity: 0.5;
  654. }
  655. .u-btn-picker--primary {
  656. color: $u-type-primary;
  657. }
  658. .u-btn-picker--tips {
  659. color: $u-tips-color;
  660. }
  661. </style>