890 lines
27 KiB
Vue
890 lines
27 KiB
Vue
|
<template>
|
|||
|
|
<view :style="{'z-index': zIndex}" @touchmove.prevent.stop="voidFc()" @tap.prevent.stop="voidFc()">
|
|||
|
|
<view
|
|||
|
|
class="mask"
|
|||
|
|
:class="showPicker?'show':'hide'"
|
|||
|
|
:style="{'z-index': Number(zIndex) + 1}"
|
|||
|
|
@touchmove.prevent.stop="voidFc()"
|
|||
|
|
@tap.prevent.stop="hide()"></view>
|
|||
|
|
<view
|
|||
|
|
class="flex_column"
|
|||
|
|
:class="[mode||'middle', showPicker?'show':'hide']"
|
|||
|
|
:style="'z-index:' + (Number(zIndex) + 2) + ';'"
|
|||
|
|
@touchmove.prevent.stop="voidFc()"
|
|||
|
|
@tap.prevent.stop="voidFc()">
|
|||
|
|
<view class="flex_column" :class="(mode||'middle') + '_view'" :style="{'height': heightSize}">
|
|||
|
|
<block v-if="mode==='bottom'">
|
|||
|
|
<view class="flex_row_between_c width100 padding20rpx" :style="{'font-size': titleSize, 'background-color': bgColor_title||'#f8f8f8'}">
|
|||
|
|
<view class="flex_row_none_c width250rpx " :style="{'color': buttonSet.cancleColor||'#ADADAD'}" @tap="hide()">
|
|||
|
|
{{buttonSet.cancleName||'取消'}}
|
|||
|
|
</view>
|
|||
|
|
<view class="flex_row_c_c width250rpx" :style="{'color': titleColor||'#999'}">
|
|||
|
|
{{title||''}}
|
|||
|
|
</view>
|
|||
|
|
<view class="flex_row_e_c width250rpx" :style="{'color': buttonSet.confirmColor||'#3399FF'}" @tap="confirm()">
|
|||
|
|
{{buttonSet.confirmName||'确定'}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
<block v-else-if="mode==='middle'">
|
|||
|
|
<view class="flex_row_c_c width100 padding20rpx" :style="{'font-size': titleSize, 'background-color': bgColor_title||'#f8f8f8', 'color': titleColor||'#999'}" v-if="title">
|
|||
|
|
{{title||''}}
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
<picker-view :indicator-style="'height:' + wH*(lineHeight||.09) + 'px;' + indicator_style" class="width100 height100 backgroundColor_white" :style="{'font-size': contentSize, 'color': contentColor||'black'}" :value="value" @change="bindChange($event)">
|
|||
|
|
<block v-if="type==='date'">
|
|||
|
|
<picker-view-column v-if="setObj.dateMode>=1">
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in years" :key="picker_index">{{picker_item}}年</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column v-if="setObj.dateMode>=2">
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in 12" :key="picker_index">{{picker_item+1}}月</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in 12" :key="picker_index">{{picker_item}}月</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column v-if="setObj.dateMode>=3">
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in days" :key="picker_index">{{picker_item+1}}日</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in days" :key="picker_index">{{picker_item}}日</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column v-if="setObj.dateMode>=4">
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in 24" :key="picker_index">{{picker_item}}时</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in 24" :key="picker_index">{{picker_item-1}}时</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column v-if="setObj.dateMode>=5">
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in 60" :key="picker_index">{{picker_item}}分</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in 60" :key="picker_index">{{picker_item-1}}分</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column v-if="setObj.dateMode>=6">
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in 60" :key="picker_index">{{picker_item}}秒</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in 60" :key="picker_index">{{picker_item-1}}秒</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</picker-view-column>
|
|||
|
|
</block>
|
|||
|
|
<block v-else-if="type==='city'">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in provinceDataList" :key="picker_index">{{picker_item.label}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in cityDataList" :key="picker_index">{{picker_item.label}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in areaDataList" :key="picker_index">{{picker_item.label}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</block>
|
|||
|
|
<block v-else-if="type==='provincialStreet'">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in provinceDataList" :key="picker_index">{{picker_item.label}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in cityDataList" :key="picker_index">{{picker_item.label}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in areaDataList" :key="picker_index">{{picker_item.label}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(picker_item,picker_index) in streetDataList" :key="picker_index">{{picker_item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</block>
|
|||
|
|
<block v-if="type==='custom'">
|
|||
|
|
<block v-if="setObj.linkage">
|
|||
|
|
<block v-if="setObj.linkageNum===2">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemArray" :key="index">{{item[setObj.steps.step_1_value]}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemArray[value[0]][setObj.steps.step_2_item]" :key="index">{{item[setObj.steps.step_2_value]||item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</block>
|
|||
|
|
<block v-else-if="setObj.linkageNum===3">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemArray" :key="index">{{item[setObj.steps.step_1_value]}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemArray[value[0]][setObj.steps.step_2_item]" :key="index">{{item[setObj.steps.step_2_value]}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemArray[value[0]][setObj.steps.step_2_item][value[1]][setObj.steps.step_3_item]"
|
|||
|
|
:key="index">{{item[setObj.steps.step_3_value]||item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</block>
|
|||
|
|
</block>
|
|||
|
|
<block v-else>
|
|||
|
|
<picker-view-column v-for="(items, indexs) in setObj.itemArray" :key="indexs">
|
|||
|
|
<view class="flex_row_c_c" v-for="(item, index) in items" :key="index">{{setObj.steps?setObj.steps.step_1_value?item[setObj.steps.step_1_value]:item:item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</block>
|
|||
|
|
</block>
|
|||
|
|
<block v-if="type==='custom2'">
|
|||
|
|
<block v-if="setObj.linkage">
|
|||
|
|
<block v-if="setObj.linkageNum===2">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemObject.step_1" :key="index">{{setObj.steps.step_1_value?item[setObj.steps.step_1_value]:item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemObject.step_2[value[0]]" :key="index">{{setObj.steps.step_2_value?item[setObj.steps.step_2_value]:item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</block>
|
|||
|
|
<block v-else-if="setObj.linkageNum===3">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemObject.step_1" :key="index">{{setObj.steps.step_1_value?item[setObj.steps.step_1_value]:item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemObject.step_2[value[0]]" :key="index">{{setObj.steps.step_2_value?item[setObj.steps.step_2_value]:item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="flex_row_c_c" v-for="(item,index) in setObj.itemObject.step_3[value[0]][value[1]]" :key="index">{{setObj.steps.step_3_value?item[setObj.steps.step_3_value]:item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</block>
|
|||
|
|
</block>
|
|||
|
|
<block v-else>
|
|||
|
|
<picker-view-column v-for="(items, indexs) in setObj.itemArray" :key="indexs">
|
|||
|
|
<view class="flex_row_c_c" v-for="(item, index) in items" :key="index">{{setObj.steps.step_1_value?item[setObj.steps.step_1_value]:item}}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</block>
|
|||
|
|
</block>
|
|||
|
|
</picker-view>
|
|||
|
|
<block v-if="mode==='top'">
|
|||
|
|
<view class="flex_row_between_c width100 padding20rpx" :style="{'font-size': titleSize, 'background-color': bgColor_title||'#f8f8f8'}">
|
|||
|
|
<view class="flex_row_none_c width250rpx " :style="{'color': buttonSet.cancleColor||'#ADADAD'}" @tap="hide()">
|
|||
|
|
{{buttonSet.cancleName||'取消'}}
|
|||
|
|
</view>
|
|||
|
|
<view class="flex_row_c_c width250rpx" :style="{'color': titleColor||'#999'}">
|
|||
|
|
{{title||''}}
|
|||
|
|
</view>
|
|||
|
|
<view class="flex_row_e_c width250rpx" :style="{'color': buttonSet.confirmColor||'#3399FF'}" @tap="confirm()">
|
|||
|
|
{{buttonSet.confirmName||'确定'}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex_row" style="margin-top: 20px;" v-if="mode==='middle'">
|
|||
|
|
<view class="flex_row_c_c width50">
|
|||
|
|
<button :type="buttonSet.cancelType||'default'" @tap="hide()" :style="classObj.btnSize + (buttonSet.cancelStyle||'')">{{buttonSet.cancelName||'取消'}}</button>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex_row_c_c width50">
|
|||
|
|
<button :type="buttonSet.confirmType||'primary'" @tap="confirm()" :style="classObj.btnSize + (buttonSet.confirmStyle||'')">{{buttonSet.confirmName||'确定'}}</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import _app from './app.js';
|
|||
|
|
|
|||
|
|
var provinceData = {};
|
|||
|
|
var cityData = {};
|
|||
|
|
var areaData = {};
|
|||
|
|
var streetData = {};
|
|||
|
|
const Sys = uni.getSystemInfoSync();
|
|||
|
|
const wH = Sys.screenHeight;
|
|||
|
|
const wW = Sys.screenWidth;
|
|||
|
|
export default {
|
|||
|
|
name: 'QS-picker',
|
|||
|
|
props: {
|
|||
|
|
pickerId: {
|
|||
|
|
type: String,
|
|||
|
|
default: '未定义Id'
|
|||
|
|
},
|
|||
|
|
/* show: { //控制是否弹出
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}, */
|
|||
|
|
type: { //类型
|
|||
|
|
type: String,
|
|||
|
|
default: 'date'
|
|||
|
|
},
|
|||
|
|
height: { //picker高度
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
lineHeight: {
|
|||
|
|
type: Number,
|
|||
|
|
default: .09
|
|||
|
|
},
|
|||
|
|
indicator_style: { //picker单行样式
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
fontscale: { //picker内文字大小
|
|||
|
|
type: Number,
|
|||
|
|
default: .02
|
|||
|
|
},
|
|||
|
|
width: { //picker宽度
|
|||
|
|
type: Number,
|
|||
|
|
default: .8
|
|||
|
|
},
|
|||
|
|
buttonSet: { //按钮设置
|
|||
|
|
type: Object,
|
|||
|
|
default () {
|
|||
|
|
return {};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
dataSet: { //各类型携带的数据
|
|||
|
|
type: Object,
|
|||
|
|
default () {
|
|||
|
|
return {};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
showReset: { //每次显示是否重置value
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
title: { //title标题
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
mode: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'bottom'
|
|||
|
|
},
|
|||
|
|
zIndex: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 9999
|
|||
|
|
},
|
|||
|
|
bgColor_title: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#F8F8F8'
|
|||
|
|
},
|
|||
|
|
autoHide: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
titleColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#999'
|
|||
|
|
},
|
|||
|
|
contentColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'black'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showPicker: false,
|
|||
|
|
setObj: {},
|
|||
|
|
//date
|
|||
|
|
years: [],
|
|||
|
|
days: 0,
|
|||
|
|
value: [],
|
|||
|
|
//city、provincialStreet
|
|||
|
|
provinceDataList: [],
|
|||
|
|
cityDataList: [],
|
|||
|
|
areaDataList: [],
|
|||
|
|
//provincialStreet
|
|||
|
|
streetDataList: [],
|
|||
|
|
defaultValue: [],
|
|||
|
|
wH,
|
|||
|
|
classObj: {
|
|||
|
|
btnSize: 'font-size: ' + (wH * (this.fontscale + .005)) + 'px;',
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
heightSize() {
|
|||
|
|
if(this.mode==='middle') {
|
|||
|
|
return wH*(this.height||.3) + 'px';
|
|||
|
|
}else{
|
|||
|
|
return wH*(this.height||.45) + 'px';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
titleSize() {
|
|||
|
|
return (wH * (this.fontscale + .002)) + 'px';
|
|||
|
|
},
|
|||
|
|
contentSize() {
|
|||
|
|
return (wH * this.fontscale) + 'px';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
dataSet() {
|
|||
|
|
this.init();
|
|||
|
|
},
|
|||
|
|
showPicker(n, o) {
|
|||
|
|
if (n && this.showReset) {
|
|||
|
|
let defaultValue = this.defaultValue;
|
|||
|
|
switch (this.type) {
|
|||
|
|
case 'city':
|
|||
|
|
this.cityDataList = cityData[defaultValue[0]];
|
|||
|
|
this.areaDataList = areaData[defaultValue[0]][defaultValue[1]];
|
|||
|
|
break;
|
|||
|
|
case 'provincialStreet':
|
|||
|
|
this.cityDataList = cityData[defaultValue[0]];
|
|||
|
|
this.areaDataList = areaData[defaultValue[0]][defaultValue[1]];
|
|||
|
|
this.streetDataList = streetData[defaultValue[0]][defaultValue[1]][defaultValue[2]];
|
|||
|
|
break;
|
|||
|
|
case 'date':
|
|||
|
|
let data = _app.countDays(this.years[defaultValue[0]], defaultValue);
|
|||
|
|
this.days = data.days;
|
|||
|
|
this.value = data.val;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
this.value = [...defaultValue];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.init();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
init() {
|
|||
|
|
let value = [];
|
|||
|
|
let setObj = {};
|
|||
|
|
//date
|
|||
|
|
let years = [];
|
|||
|
|
let days = 0;
|
|||
|
|
// city、provincialStreet
|
|||
|
|
let provinceDataList;
|
|||
|
|
let cityDataList;
|
|||
|
|
let areaDataList;
|
|||
|
|
//provincialStreet
|
|||
|
|
let streetDataList;
|
|||
|
|
|
|||
|
|
switch (this.type) {
|
|||
|
|
case 'date': //date
|
|||
|
|
setObj = _app.creatDateObj(this.dataSet);
|
|||
|
|
console.log('setObj: ' + JSON.stringify(setObj));
|
|||
|
|
let defaultDate = setObj.defaultValue;
|
|||
|
|
years = _app.countYears(setObj.startYear || (new Date().getFullYear() - 5), setObj.endYear || (new Date().getFullYear() +
|
|||
|
|
5));
|
|||
|
|
let endYear = years[years.length - 1];
|
|||
|
|
let defaultYear = defaultDate.getFullYear(),
|
|||
|
|
defaultMonth = defaultDate.getMonth(),
|
|||
|
|
defaultDay = defaultDate.getDate(),
|
|||
|
|
defaultHour = defaultDate.getHours(),
|
|||
|
|
defaultMinute = defaultDate.getMinutes(),
|
|||
|
|
defaultSecond = defaultDate.getSeconds();
|
|||
|
|
let compareY = defaultYear > endYear;
|
|||
|
|
let year = compareY ? endYear : defaultYear;
|
|||
|
|
let month = compareY ? 11 : defaultMonth;
|
|||
|
|
defaultDate[1] = month;
|
|||
|
|
days = _app.countDays(year, defaultDate).days;
|
|||
|
|
let dm = setObj.dateMode;
|
|||
|
|
if (dm >= 1) {
|
|||
|
|
if (compareY)
|
|||
|
|
value.push(years.length - 1);
|
|||
|
|
else
|
|||
|
|
for (let i = 0; i < years.length; i++) {
|
|||
|
|
if (year == years[i]) {
|
|||
|
|
value.push(i);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (dm >= 2) value.push(compareY ? 11 : month);
|
|||
|
|
if (dm >= 3) value.push(compareY ? days : defaultDay - 1);
|
|||
|
|
if (dm >= 4) value.push(defaultHour);
|
|||
|
|
if (dm >= 5) value.push(defaultMinute);
|
|||
|
|
if (dm >= 6) value.push(defaultSecond);
|
|||
|
|
//date
|
|||
|
|
this.years = years;
|
|||
|
|
this.days = days;
|
|||
|
|
this.setObj = setObj;
|
|||
|
|
break;
|
|||
|
|
case 'city':
|
|||
|
|
value = this.dataSet.defaultValue || [0, 0, 0];
|
|||
|
|
provinceData = require('./city-data/province.js').default;
|
|||
|
|
cityData = require('./city-data/city.js').default;
|
|||
|
|
areaData = require('./city-data/area.js').default;
|
|||
|
|
provinceDataList = provinceData;
|
|||
|
|
cityDataList = cityData[value[0]];
|
|||
|
|
areaDataList = areaData[value[0]][value[1]];
|
|||
|
|
//city、provincialStreet
|
|||
|
|
this.provinceDataList = provinceDataList;
|
|||
|
|
this.cityDataList = cityDataList;
|
|||
|
|
this.areaDataList = areaDataList;
|
|||
|
|
break;
|
|||
|
|
case 'provincialStreet':
|
|||
|
|
value = this.dataSet.defaultValue || [0, 0, 0, 0];
|
|||
|
|
provinceData = require('./city-data/province.js').default;
|
|||
|
|
cityData = require('./city-data/city.js').default;
|
|||
|
|
areaData = require('./city-data/area.js').default;
|
|||
|
|
streetData = require('./city-data/streets.js').default;
|
|||
|
|
provinceDataList = provinceData;
|
|||
|
|
cityDataList = cityData[value[0]];
|
|||
|
|
areaDataList = areaData[value[0]][value[1]];
|
|||
|
|
streetDataList = streetData[value[0]][value[1]][value[2]];
|
|||
|
|
//provincialStreet
|
|||
|
|
this.provinceDataList = provinceDataList;
|
|||
|
|
this.cityDataList = cityDataList;
|
|||
|
|
this.areaDataList = areaDataList;
|
|||
|
|
this.streetDataList = streetDataList;
|
|||
|
|
break;
|
|||
|
|
case 'custom':
|
|||
|
|
setObj = _app.creatCustomObj(this.dataSet);
|
|||
|
|
if (setObj.defaultValue) {
|
|||
|
|
value = setObj.defaultValue;
|
|||
|
|
} else {
|
|||
|
|
if (setObj.linkage) {
|
|||
|
|
for (let i = 0; i < setObj.linkageNum; i++) {
|
|||
|
|
value.push(0);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
setObj.itemArray.forEach(item => {
|
|||
|
|
value.push(0);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.setObj = setObj;
|
|||
|
|
break;
|
|||
|
|
case 'custom2':
|
|||
|
|
setObj = _app.creatCustom2Obj(this.dataSet);
|
|||
|
|
if (setObj.defaultValue) {
|
|||
|
|
value = setObj.defaultValue;
|
|||
|
|
} else {
|
|||
|
|
if (setObj.linkage) {
|
|||
|
|
for (let i = 0; i < setObj.linkageNum; i++) {
|
|||
|
|
value.push(0);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
setObj.itemArray.forEach(item => {
|
|||
|
|
value.push(0);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.setObj = setObj;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
let defaultValue = [...value];
|
|||
|
|
this.value = value;
|
|||
|
|
this.defaultValue = defaultValue;
|
|||
|
|
},
|
|||
|
|
bindChange({
|
|||
|
|
detail: {
|
|||
|
|
value
|
|||
|
|
}
|
|||
|
|
}) {
|
|||
|
|
// console.log(JSON.stringify(e))
|
|||
|
|
let changevalue;
|
|||
|
|
switch (this.type) {
|
|||
|
|
case 'city':
|
|||
|
|
changevalue = value;
|
|||
|
|
if (this.value[0] !== changevalue[0]) {
|
|||
|
|
// 第一级发生滚动
|
|||
|
|
this.cityDataList = cityData[changevalue[0]];
|
|||
|
|
this.areaDataList = areaData[changevalue[0]][0];
|
|||
|
|
changevalue[1] = 0;
|
|||
|
|
changevalue[2] = 0;
|
|||
|
|
} else if (this.value[1] !== changevalue[1]) {
|
|||
|
|
// 第二级滚动
|
|||
|
|
this.areaDataList = areaData[changevalue[0]][changevalue[1]];
|
|||
|
|
changevalue[2] = 0;
|
|||
|
|
}
|
|||
|
|
this.value = changevalue;
|
|||
|
|
break;
|
|||
|
|
case 'provincialStreet':
|
|||
|
|
changevalue = value;
|
|||
|
|
if (this.value[0] !== changevalue[0]) {
|
|||
|
|
// 第一级发生滚动
|
|||
|
|
this.cityDataList = cityData[changevalue[0]];
|
|||
|
|
this.areaDataList = areaData[changevalue[0]][0];
|
|||
|
|
this.streetDataList = streetData[changevalue[0]] && streetData[changevalue[0]][0] && streetData[changevalue[0]][
|
|||
|
|
0
|
|||
|
|
][0] ? streetData[changevalue[0]][0][0] : [];
|
|||
|
|
changevalue[1] = 0;
|
|||
|
|
changevalue[2] = 0;
|
|||
|
|
changevalue[3] = 0;
|
|||
|
|
} else if (this.value[1] !== changevalue[1]) {
|
|||
|
|
// 第二级滚动
|
|||
|
|
this.areaDataList = areaData[changevalue[0]][changevalue[1]];
|
|||
|
|
this.streetDataList = streetData[changevalue[0]] && streetData[changevalue[0]][changevalue[1]] && streetData[
|
|||
|
|
changevalue[0]][changevalue[1]][0] ? streetData[changevalue[0]][changevalue[1]][0] : [];
|
|||
|
|
changevalue[2] = 0;
|
|||
|
|
changevalue[3] = 0;
|
|||
|
|
} else if (this.value[2] !== changevalue[2]) {
|
|||
|
|
this.streetDataList = streetData[changevalue[0]] && streetData[changevalue[0]][changevalue[1]] && streetData[
|
|||
|
|
changevalue[0]][changevalue[1]][changevalue[2]] ? streetData[changevalue[0]][changevalue[1]][changevalue[2]] :
|
|||
|
|
[];
|
|||
|
|
changevalue[3] = 0;
|
|||
|
|
}
|
|||
|
|
this.value = changevalue;
|
|||
|
|
break;
|
|||
|
|
case 'date':
|
|||
|
|
let data = _app.countDays(this.years[value[0]], value);
|
|||
|
|
this.days = data.days;
|
|||
|
|
this.value = data.val;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
this.value = value;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
confirm() {
|
|||
|
|
let type = this.type;
|
|||
|
|
let value = this.value;
|
|||
|
|
let obj = {
|
|||
|
|
type,
|
|||
|
|
value,
|
|||
|
|
pickerId: this.pickerId
|
|||
|
|
}
|
|||
|
|
let setObj = this.setObj;
|
|||
|
|
let data;
|
|||
|
|
switch (type) {
|
|||
|
|
case 'date':
|
|||
|
|
data = '';
|
|||
|
|
let dateFormatArray = setObj.dateFormatArray;
|
|||
|
|
console.log('dateFormatArray：' + JSON.stringify(dateFormatArray));
|
|||
|
|
for (let i = 1; i <= this.setObj.dateMode; i++) {
|
|||
|
|
if (i <= 6) {
|
|||
|
|
let j = i - 1;
|
|||
|
|
let f = i - 2;
|
|||
|
|
switch (i) {
|
|||
|
|
case 1:
|
|||
|
|
data += this.years[value[j]];
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
data += dateFormatArray[f] + (value[j] + 1);
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
data += dateFormatArray[f] + (value[j] + 1);
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
data += dateFormatArray[f] + value[j];
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'city':
|
|||
|
|
data = {
|
|||
|
|
label: this._getLabel(),
|
|||
|
|
value: this.value,
|
|||
|
|
cityCode: this._getCityCode()
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
case 'provincialStreet':
|
|||
|
|
data = {
|
|||
|
|
label: this._getprovincialStreetLabel(),
|
|||
|
|
value: this.value,
|
|||
|
|
cityCode: this._getCityCode()
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
case 'custom':
|
|||
|
|
let custom_datas = setObj.itemArray;
|
|||
|
|
data = {};
|
|||
|
|
let custom_val = this.value;
|
|||
|
|
let custom_steps = setObj.steps;
|
|||
|
|
if (setObj.linkage) {
|
|||
|
|
if (setObj.linkageNum === 2) { //二级联动
|
|||
|
|
data.steps1 = custom_datas[custom_val[0]];
|
|||
|
|
data.steps2 = custom_datas[custom_val[0]][custom_steps.step_2_item][custom_val[1]];
|
|||
|
|
} else if (setObj.linkageNum === 3) { //三级联动
|
|||
|
|
data.steps1 = custom_datas[custom_val[0]];
|
|||
|
|
if (!data.steps1)
|
|||
|
|
_app.showToast('第一列中不存在第' + custom_val[0] + '项');
|
|||
|
|
data.steps2 = data.steps1[custom_steps.step_2_item][custom_val[1]];
|
|||
|
|
if (!data.steps2)
|
|||
|
|
_app.showToast('第二列中不存在第' + custom_val[1] + '项');
|
|||
|
|
data.steps3 = data.steps2[custom_steps.step_3_item][custom_val[2]];
|
|||
|
|
if (!data.steps3)
|
|||
|
|
_app.showToast('第三列中不存在第' + custom_val[2] + '项');
|
|||
|
|
} else {
|
|||
|
|
_app.showToast('不在指定范围中');
|
|||
|
|
}
|
|||
|
|
} else { //无联动
|
|||
|
|
data = [];
|
|||
|
|
for (let i = 0; i < custom_datas.length; i++) {
|
|||
|
|
let d = custom_datas[i];
|
|||
|
|
data.push(d[custom_val[i]]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'custom2':
|
|||
|
|
let custom2_datas = setObj.linkage ? setObj.itemObject : setObj.itemArray;
|
|||
|
|
let custom2_val = this.value;
|
|||
|
|
if (setObj.linkage) {
|
|||
|
|
data = {}
|
|||
|
|
if (setObj.linkageNum === 2) { //二级联动
|
|||
|
|
data.steps1 = custom2_datas.step_1[custom2_val[0]];
|
|||
|
|
data.steps2 = custom2_datas.step_2[custom2_val[0]][custom2_val[1]];
|
|||
|
|
} else if (setObj.linkageNum === 3) { //三级联动
|
|||
|
|
data.steps1 = custom2_datas.step_1[custom2_val[0]];
|
|||
|
|
if (!data.steps1)
|
|||
|
|
_app.showToast('第一列中不存在第' + custom2_val[0] + '项');
|
|||
|
|
data.steps2 = custom2_datas.step_2[custom2_val[0]][custom2_val[1]];
|
|||
|
|
if (!data.steps2)
|
|||
|
|
_app.showToast('第二列中不存在第' + custom2_val[1] + '项');
|
|||
|
|
data.steps3 = custom2_datas.step_3[custom2_val[0]][custom2_val[1]][custom2_val[2]];
|
|||
|
|
if (!data.steps3)
|
|||
|
|
_app.showToast('第三列中不存在第' + custom2_val[2] + '项');
|
|||
|
|
} else {
|
|||
|
|
_app.showToast('不在指定范围中');
|
|||
|
|
}
|
|||
|
|
} else { //无联动
|
|||
|
|
data = [];
|
|||
|
|
for (let i = 0; i < custom2_datas.length; i++) {
|
|||
|
|
let d = custom2_datas[i];
|
|||
|
|
data.push(d[custom2_val[i]]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
obj.data = data;
|
|||
|
|
this.$emit('confirm', obj);
|
|||
|
|
console.log(this.autoHide)
|
|||
|
|
if(this.autoHide)
|
|||
|
|
this.hide();
|
|||
|
|
},
|
|||
|
|
_getprovincialStreetLabel() {
|
|||
|
|
let pcikerLabel =
|
|||
|
|
this.provinceDataList[this.value[0]].label +
|
|||
|
|
'-' +
|
|||
|
|
this.cityDataList[this.value[1]].label +
|
|||
|
|
'-' +
|
|||
|
|
this.areaDataList[this.value[2]].label +
|
|||
|
|
|
|||
|
|
(this.streetDataList[this.value[3]] ? '-' + this.streetDataList[this.value[3]] : '');
|
|||
|
|
return pcikerLabel;
|
|||
|
|
},
|
|||
|
|
_getLabel() {
|
|||
|
|
let pcikerLabel =
|
|||
|
|
this.provinceDataList[this.value[0]].label +
|
|||
|
|
'-' +
|
|||
|
|
this.cityDataList[this.value[1]].label +
|
|||
|
|
'-' +
|
|||
|
|
this.areaDataList[this.value[2]].label;
|
|||
|
|
return pcikerLabel;
|
|||
|
|
},
|
|||
|
|
_getCityCode() {
|
|||
|
|
return this.areaDataList[this.value[2]].value;
|
|||
|
|
},
|
|||
|
|
show() {
|
|||
|
|
this.showPicker = true;
|
|||
|
|
this.$emit('showQSPicker', {
|
|||
|
|
pickerId: this.pickerId,
|
|||
|
|
type: this.type
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
hide() {
|
|||
|
|
this.showPicker = false;
|
|||
|
|
this.$emit('hideQSPicker', {
|
|||
|
|
pickerId: this.pickerId,
|
|||
|
|
type: this.type
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
voidFc() {}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* middle */
|
|||
|
|
.middle{
|
|||
|
|
position: fixed;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
perspective: 2500upx;
|
|||
|
|
transition: all .3s ease-in-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.middle.show{
|
|||
|
|
transition-delay: .3s;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
pointer-events: auto;
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.middle.hide{
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.middle_view{
|
|||
|
|
background-color: #FFF;
|
|||
|
|
border-radius: 15upx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
width: 80vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* bottom */
|
|||
|
|
.bottom{
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
perspective: 2500upx;
|
|||
|
|
transition: all .3s ease-in-out;
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom.show{
|
|||
|
|
transform: translateY(0);
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom.hide{
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom_view{
|
|||
|
|
width: 100vw;
|
|||
|
|
background-color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* top */
|
|||
|
|
.top{
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
perspective: 2500upx;
|
|||
|
|
transition: all .3s ease-in-out;
|
|||
|
|
transform: translateY(-100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top.show{
|
|||
|
|
transform: translateY(0);
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top.hide{
|
|||
|
|
transform: translateY(-100%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top_view{
|
|||
|
|
width: 100vw;
|
|||
|
|
background-color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* mask */
|
|||
|
|
.mask{
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
height: 100vh;
|
|||
|
|
width: 100vw;
|
|||
|
|
opacity: 0;
|
|||
|
|
background-color: rgba(0,0,0,.6);
|
|||
|
|
transition: all .3s ease-in-out;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.mask.show{
|
|||
|
|
opacity: 1;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
.mask.hide{
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: all .3s ease-in-out .3s;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_column_c_c {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_align_center {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* flex */
|
|||
|
|
.flex_1 {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_column {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_row_e_none {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_column_c_c {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_row {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_row_none_c {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_row_e_c {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_row_c_c {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_row_between_c {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* width height */
|
|||
|
|
.width50 {
|
|||
|
|
width: 50%;
|
|||
|
|
}
|
|||
|
|
.width100 {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.width250rpx{
|
|||
|
|
width: 250rpx;
|
|||
|
|
}
|
|||
|
|
.height100 {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* padding */
|
|||
|
|
.padding20rpx{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
view, block, botton, text, picker, picker-view picker-view-column {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.backgroundColor_white{
|
|||
|
|
background-color: white;
|
|||
|
|
}
|
|||
|
|
</style>
|