|
@@ -1,260 +0,0 @@
|
|
-<template>
|
|
|
|
- <div class="mpvue-picker">
|
|
|
|
- <div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div>
|
|
|
|
- <div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
|
|
|
|
- <div class="mpvue-picker__hd" catchtouchmove="true">
|
|
|
|
- <div class="mpvue-picker__action" @click="pickerCancel">取消</div>
|
|
|
|
- <div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div>
|
|
|
|
- </div>
|
|
|
|
- <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
|
|
|
|
- <block>
|
|
|
|
- <picker-view-column>
|
|
|
|
- <div class="picker-item" v-for="(item,index) in ageDownLimitDataList" :key="index">{{item.label}}</div>
|
|
|
|
- </picker-view-column>
|
|
|
|
- <picker-view-column>
|
|
|
|
- <div class="picker-item" v-for="(item,index) in ageUpLimitDataList" :key="index">{{item.label}}</div>
|
|
|
|
- </picker-view-column>
|
|
|
|
- </block>
|
|
|
|
- </picker-view>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
-//import provinceData from './city-data/province.js';
|
|
|
|
-//import cityData from './city-data/city.js';
|
|
|
|
-//import areaData from './city-data/area.js';
|
|
|
|
-export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- ageData :[],
|
|
|
|
- pickerValue: [0, 0],
|
|
|
|
- ageDownLimitDataList: [],
|
|
|
|
- ageUpLimitDataList: [],
|
|
|
|
- /* 是否显示控件 */
|
|
|
|
- showPicker: false,
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- console.log('mpvueCityPicker created')
|
|
|
|
- for(let i = 18;i<=99;i++)
|
|
|
|
- {
|
|
|
|
- this.ageData.push(i);
|
|
|
|
- }
|
|
|
|
- this.init()
|
|
|
|
- },
|
|
|
|
- props: {
|
|
|
|
- /* 默认值 */
|
|
|
|
- pickerValueDefault: {
|
|
|
|
- type: Array,
|
|
|
|
- default(){
|
|
|
|
- return [0, 0]
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- /* 主题色 */
|
|
|
|
- themeColor: String
|
|
|
|
- },
|
|
|
|
- watch:{
|
|
|
|
- pickerValueDefault(){
|
|
|
|
- this.init();
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- init() {
|
|
|
|
- console.log('mpvueCityPicker init')
|
|
|
|
- if(this.pickerValueDefault.length == 0)
|
|
|
|
- this.pickerValueDefault = [0,0];
|
|
|
|
- if(this.ageDownLimitDataList.length<=0)
|
|
|
|
- {
|
|
|
|
- this.ageDownLimitDataList = [];
|
|
|
|
- for(let i = 0;i< this.ageData.length-1;i++)
|
|
|
|
- {
|
|
|
|
- let data = {value : i,label:this.ageData[i]};
|
|
|
|
- this.ageDownLimitDataList.push(data);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- if(this.ageUpLimitDataList.length<=0)
|
|
|
|
- {
|
|
|
|
- this.ageUpLimitDataList = [];
|
|
|
|
- for(let i = 1;i< this.ageData.length;i++)
|
|
|
|
- {
|
|
|
|
- let data = {value : i,label:this.ageData[i]};
|
|
|
|
- this.ageUpLimitDataList.push(data);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- //console.log('ageDownLimit'+JSON.stringify(this.ageDownLimitDataList))
|
|
|
|
- //console.log('ageUpLimit'+JSON.stringify(this.ageUpLimitDataList))
|
|
|
|
- //this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- this.pickerValue = this.pickerValueDefault;
|
|
|
|
- },
|
|
|
|
- show() {
|
|
|
|
- setTimeout(() => {
|
|
|
|
- this.showPicker = true;
|
|
|
|
- }, 0);
|
|
|
|
- },
|
|
|
|
- maskClick() {
|
|
|
|
- this.pickerCancel();
|
|
|
|
- },
|
|
|
|
- pickerCancel() {
|
|
|
|
- this.showPicker = false;
|
|
|
|
- this._$emit('onCancel');
|
|
|
|
- },
|
|
|
|
- pickerConfirm(e) {
|
|
|
|
- this.showPicker = false;
|
|
|
|
- this._$emit('onConfirm');
|
|
|
|
- },
|
|
|
|
- showPickerView() {
|
|
|
|
- this.showPicker = true;
|
|
|
|
- },
|
|
|
|
- handPickValueDefault() {
|
|
|
|
-
|
|
|
|
- //console.log('mpvueCityPicker handPickValueDefault')
|
|
|
|
- console.log('默认树'+JSON.stringify(this.pickerValueDefault))
|
|
|
|
- //console.log('省'+JSON.stringify(this.pickerValueDefault))
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- if (this.pickerValueDefault[0] > this.ageDownLimitDataList.length - 1) {
|
|
|
|
- this.pickerValueDefault[0] = this.ageDownLimitDataList.length - 1;
|
|
|
|
-
|
|
|
|
- console.log('省索引'+JSON.stringify(this.pickerValueDefault[0]))
|
|
|
|
- }
|
|
|
|
- let ageDown = this.ageDownLimitDataList[this.pickerValueDefault[0]];
|
|
|
|
- if (this.pickerValueDefault[1] > this.ageUpLimitDataList.length - 1) {
|
|
|
|
- this.pickerValueDefault[1] = this.ageUpLimitDataList.length - 1;
|
|
|
|
-
|
|
|
|
- console.log('省索引'+JSON.stringify(this.pickerValueDefault[0]))
|
|
|
|
- }
|
|
|
|
- let ageUp = this.ageUpLimitDataList[this.pickerValueDefault[1]];
|
|
|
|
- this.ageUpLimitDataList = [];
|
|
|
|
- for(let i = 0;i< this.ageData.length;i++){
|
|
|
|
- if(this.ageData[i]<=ageDown)
|
|
|
|
- continue;
|
|
|
|
- this.ageUpLimitDataList.push(this.ageData[i]);
|
|
|
|
- if(ageUp == this.ageData[i]){
|
|
|
|
- this.pickerValueDefault[1] = i;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- pickerChange(e) {
|
|
|
|
- let changePickerValue = e.mp.detail.value;
|
|
|
|
- if (this.pickerValue[0] !== changePickerValue[0]) {
|
|
|
|
- // 第一级发生滚动
|
|
|
|
- let ageDown = this.ageDownLimitDataList[changePickerValue[0]];
|
|
|
|
- console.log('ageDown'+JSON.stringify(ageDown))
|
|
|
|
- //let ageUp = this.ageUpLimitDataList[this.pickerValueDefault[1]];
|
|
|
|
- this.ageUpLimitDataList = [];
|
|
|
|
- //this.pickerValueDefault[1]
|
|
|
|
-
|
|
|
|
- for(let i = 0;i< this.ageData.length;i++){
|
|
|
|
- if(this.ageData[i]<=ageDown.label)
|
|
|
|
- continue;
|
|
|
|
- let data = {value:i,label:this.ageData[i]};
|
|
|
|
- this.ageUpLimitDataList.push(data);
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- //this.cityDataList = cityData[changePickerValue[0]];
|
|
|
|
- //this.areaDataList = areaData[changePickerValue[0]][0];
|
|
|
|
- changePickerValue[1] = 0;
|
|
|
|
- }
|
|
|
|
- /*else if (this.pickerValue[1] !== changePickerValue[1]) {
|
|
|
|
- // 第二级滚动
|
|
|
|
- this.areaDataList =
|
|
|
|
- areaData[changePickerValue[0]][changePickerValue[1]];
|
|
|
|
- changePickerValue[2] = 0;
|
|
|
|
- }*/
|
|
|
|
- this.pickerValue = changePickerValue;
|
|
|
|
- this._$emit('onChange');
|
|
|
|
- },
|
|
|
|
- _$emit(emitName) {
|
|
|
|
- let pickObj = {
|
|
|
|
- label: this._getLabel(),
|
|
|
|
- value: this.pickerValue
|
|
|
|
- };
|
|
|
|
- this.$emit(emitName, pickObj);
|
|
|
|
- },
|
|
|
|
- _getLabel() {
|
|
|
|
- let pcikerLabel =
|
|
|
|
- this.ageDownLimitDataList[this.pickerValue[0]].label +
|
|
|
|
- '-' +
|
|
|
|
- this.ageUpLimitDataList[this.pickerValue[1]].label+'岁';
|
|
|
|
- return pcikerLabel;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-};
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style>
|
|
|
|
-.pickerMask {
|
|
|
|
- position: fixed;
|
|
|
|
- z-index: 1000;
|
|
|
|
- top: 0;
|
|
|
|
- right: 0;
|
|
|
|
- left: 0;
|
|
|
|
- bottom: 0;
|
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
|
-}
|
|
|
|
-.mpvue-picker-content {
|
|
|
|
- position: fixed;
|
|
|
|
- bottom: 0;
|
|
|
|
- left: 0;
|
|
|
|
- width: 100%;
|
|
|
|
- transition: all 0.3s ease;
|
|
|
|
- transform: translateY(100%);
|
|
|
|
- z-index: 3000;
|
|
|
|
-}
|
|
|
|
-.mpvue-picker-view-show {
|
|
|
|
- transform: translateY(0);
|
|
|
|
-}
|
|
|
|
-.mpvue-picker__hd {
|
|
|
|
- display: flex;
|
|
|
|
- padding: 9px 15px;
|
|
|
|
- background-color: #fff;
|
|
|
|
- position: relative;
|
|
|
|
- text-align: center;
|
|
|
|
- font-size: 17px;
|
|
|
|
-}
|
|
|
|
-.mpvue-picker__hd:after {
|
|
|
|
- content: ' ';
|
|
|
|
- position: absolute;
|
|
|
|
- left: 0;
|
|
|
|
- bottom: 0;
|
|
|
|
- right: 0;
|
|
|
|
- height: 1px;
|
|
|
|
- border-bottom: 1px solid #e5e5e5;
|
|
|
|
- color: #e5e5e5;
|
|
|
|
- transform-origin: 0 100%;
|
|
|
|
- transform: scaleY(0.5);
|
|
|
|
-}
|
|
|
|
-.mpvue-picker__action {
|
|
|
|
- display: block;
|
|
|
|
- flex: 1;
|
|
|
|
- color: #1aad19;
|
|
|
|
-}
|
|
|
|
-.mpvue-picker__action:first-child {
|
|
|
|
- text-align: left;
|
|
|
|
- color: #888;
|
|
|
|
-}
|
|
|
|
-.mpvue-picker__action:last-child {
|
|
|
|
- text-align: right;
|
|
|
|
-}
|
|
|
|
-.picker-item {
|
|
|
|
- text-align: center;
|
|
|
|
- line-height: 40px;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- font-size: 16px;
|
|
|
|
-}
|
|
|
|
-.mpvue-picker-view {
|
|
|
|
- position: relative;
|
|
|
|
- bottom: 0;
|
|
|
|
- left: 0;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 238px;
|
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|