1.我的车库

components/uni-plate-input/uni-plate-input.less

@@ -0,0 +1,154 @@
+.so-mask {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 998;
+}
+.so-plate {
+	box-sizing: border-box;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	left: 0;
+	background: #fff;
+	padding: 25upx 25upx 0 25upx;
+	&-head {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	&-type {			
+		flex:1;
+		display:block;
+		label {
+			display: inline-block;
+			min-height: 32upx;
+			font-size: 26upx;
+			margin-right: 10upx;
+		}
+	}
+	&-body {
+		box-sizing: border-box;
+		padding: 30upx 0;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	&-word {
+		border: 1upx solid #ccc;
+		border-radius: 10upx;
+		height: 0;
+		margin: 0 5upx;
+		box-sizing: border-box;
+		padding-bottom: calc((100% - 70upx) / 7);
+		width: calc((100% - 70upx) / 7);
+		position: relative;
+		&.active {
+			border-color: #007aff;
+			box-shadow: 0 0 15upx 0 #007aff;
+		}
+		text {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translateX(-50%) translateY(-50%);
+			font-weight: 700;
+			font-size: 32upx;
+		}
+	}
+	&-dot {
+		width: 15upx;
+		height: 15upx;
+		background: #ccc;
+		border-radius: 50%;
+		margin: 0 5upx;
+	}
+	&-keyboard {
+		background: #eee;
+		margin-left: -25upx;
+		margin-right: -25upx;
+		padding: 20upx 25upx 10upx 25upx;
+		box-sizing: border-box;
+		transition: all .3s;
+		&>view{
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+		}
+	}
+	&-key {
+		display: block;
+		background: #fff;
+		border-radius: 10upx;
+		box-shadow: 0 0 8upx 0 #bbb;
+		width: 80upx;
+		height: 80upx;
+		margin: 5upx 0;
+		font-size: 32upx;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		&.hover {
+			background: #efefef;
+		}
+		&.fill-block {
+			width: 80upx;
+			height: 80upx;
+			background: none;
+			box-shadow: none;
+		}
+	}
+	&-btn {
+		display: inline-block;
+		background: #fff;
+		border-radius: 10upx;
+		box-shadow: 0 0 10upx 0 #bbb;
+		font-size: 28upx;
+		text-align: center;
+		margin:0 0 0 10upx;
+		padding:0 25upx;
+		&-group{
+			display: flex;
+			justify-content: space-between;
+			background: #eee;
+			margin-left: -25upx;
+			margin-right: -25upx;
+			box-sizing: border-box;
+			padding: 0 25upx 10upx 25upx;
+		}
+		&--cancel{
+			margin:0;
+		}
+		&--submit{
+			background:#5773f9;
+			color:#fff;
+		}
+		&--delete{
+			color:#fd6b6d;
+		}
+	}
+}
+
+
+.animation-scale-up {
+	animation-duration: .2s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: both;
+    animation-name: scale-up
+}
+@keyframes scale-up {
+    0% {
+        opacity: .8;
+        transform: scale(.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}

components/uni-plate-input/uni-plate-input.vue

@@ -0,0 +1,265 @@
+/**
+* @author minisola
+* @version 20190814
+*/
+<template>
+	<view class="so-mask">
+		<view class="so-plate animation-scale-up">
+			<view class="so-plate-head">
+				<view class="so-plate-type">
+					<radio-group @change="typeChange">
+						<label>
+							<radio value="1" :checked="type===1" />
+							普通车牌
+						</label>
+						<label>
+							<radio value="2" :checked="type===2" />
+							新能源车牌
+						</label>
+					</radio-group>
+				</view>
+			</view>
+			<view class="so-plate-body">
+				<view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch" data-index="0">
+					<text>{{ currentInputValue[0] }}</text>
+				</view>
+				<view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch" data-index="1">
+					<text>{{ currentInputValue[1] }}</text>
+				</view>
+				<view class="so-plate-dot"></view>
+				<view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch" data-index="2">
+					<text>{{ currentInputValue[2] }}</text>
+				</view>
+				<view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch" data-index="3">
+					<text>{{ currentInputValue[3] }}</text>
+				</view>
+				<view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch" data-index="4">
+					<text>{{ currentInputValue[4] }}</text>
+				</view>
+				<view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch" data-index="5">
+					<text>{{ currentInputValue[5] }}</text>
+				</view>
+				<view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch" data-index="6">
+					<text>{{ currentInputValue[6] }}</text>
+				</view>
+				<view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch" v-if="type == 2" data-index="7">
+					<text>{{ currentInputValue[7] }}</text>
+				</view>
+			</view>
+			<view class="so-plate-foot">
+				<view class="so-plate-keyboard"  :style="{height:keyboardHeight}">
+					<view id="keyboard">
+						<block v-if="inputType == 1">
+							<view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
+						</block>
+						<block v-if="inputType == 1">
+							<text class="so-plate-key fill-block"></text>
+							<text class="so-plate-key fill-block"></text>
+						</block>
+						<block v-if="inputType >= 3">
+							<view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
+						</block>
+						<block v-if="inputType >= 2">
+							<view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
+						</block>
+						<block v-if="inputType == 3">
+							<text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>
+						</block>
+						<block v-if="inputType == 4">
+							<view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
+						</block>
+							<text v-if="inputType == 4" class="so-plate-key fill-block"></text>
+					</view>
+				</view>
+				<view class="so-plate-btn-group">
+					<view>
+						<button class="so-plate-btn so-plate-btn--cancel" @tap="$emit('close')">取消</button>
+					</view>
+					<view>
+						<button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">删除</button>
+						<button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button>
+						
+					</view>
+					
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	name: 'uni-plate-input',
+	data() {
+		return {
+			type: 1, //车牌类型
+			currentInputIndex: 0, //当前编辑的输入框
+			currentInputValue: ['', '', '', '', '', '', ''],
+			fillBlock:[{num:11},{num:12},{num:13},{num:14},{num:15},{num:16}],  //避免:key报错
+			keyboardHeightInit:false,
+			keyboardHeight:'auto',
+			provinceText: [
+				'粤',
+				'京',
+				'冀',
+				'沪',
+				'津',
+				'晋',
+				'蒙',
+				'辽',
+				'吉',
+				'黑',
+				'苏',
+				'浙',
+				'皖',
+				'闽',
+				'赣',
+				'鲁',
+				'豫',
+				'鄂',
+				'湘',
+				'桂',
+				'琼',
+				'渝',
+				'川',
+				'贵',
+				'云',
+				'藏',
+				'陕',
+				'甘',
+				'青',
+				'宁',
+				'新'
+			],
+			numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+			wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
+			lastWordText: ['港', '澳', '学', '领', '警']
+		};
+	},
+	props: {
+		plate: {
+			type: String
+		}
+	},
+	computed: {
+		//输入框类型
+		inputType() {
+			switch (this.currentInputIndex) {
+				case 0:
+					return 1;
+					break;
+				case 1:
+					return 2;
+					break;
+				case 2:
+					return 3;
+					break;
+				case 3:
+					return 3;
+					break;
+				case 4:
+					return 3;
+					break;
+				case 5:
+					return 3;
+					break;
+				case 6:
+					return this.type==2 ? 3 :4 ;
+					break;
+				case 7:
+					return 4;
+					break;
+				default:
+					return 1;
+					break;
+			}
+		}
+	},
+	watch:{
+		currentInputIndex:function(n,o){
+			if(!this.keyboardHeightInit) return
+				this.$nextTick(()=>{
+					this.changeKeyboardHeight()
+				})
+		}
+	},
+	methods: {
+		//车牌类型切换
+		typeChange(e) {
+			const {value} = e.detail;
+			this.type = parseInt(value)
+			this.currentInputIndex = 0
+			if(value==1){
+				this.currentInputValue = ['','','','','','','']
+			}else{
+				this.currentInputValue = ['','','','','','','','']
+			}
+		},
+		inputSwitch(e) {
+			const { index } = e.currentTarget.dataset;
+			this.currentInputIndex = parseInt(index);
+		},
+		chooseKey(e) {
+			const { value } = e.currentTarget.dataset;
+			this.$set(this.currentInputValue, this.currentInputIndex, value);
+			if(this.type==1 && this.currentInputIndex<6){
+				this.currentInputIndex++
+			}
+			if(this.type==2 && this.currentInputIndex<7){
+				this.currentInputIndex++
+			}
+		},
+		deleteKey(){
+				this.$set(this.currentInputValue,this.currentInputIndex,'')
+				if(this.currentInputIndex!=0) this.currentInputIndex--
+		},
+		exportPlate(){
+			const plate = this.currentInputValue.join('')
+			let err = false
+			if(this.type===1&&plate.length!=7){
+				err = true
+			}else if(this.type===2&&plate.length!=8){
+				err = true
+			}
+			if(err) return uni.showToast({
+				title:'请输入完整的车牌号码',
+				icon:'none'
+			})
+			
+			this.$emit('export',plate)
+		},
+		changeKeyboardHeight(){
+			const that = this
+			const query = uni.createSelectorQuery().in(this);
+			query.select('#keyboard').boundingClientRect();
+			query.exec(function(res) {
+				if(res&&res[0]){
+					that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'
+					that.keyboardHeightInit = true
+				}
+			});
+		}
+	},
+	mounted() {
+		console.log(this.plate);
+		const plateKey = this.plate.split('')
+		if(plateKey.length===7){
+			this.type=1
+		}else if(plateKey.length===8){
+			this.type=2
+		}
+		if(plateKey.length===7 || plateKey.length===8){
+			this.currentInputValue = plateKey
+			this.currentInputIndex = plateKey.length-1
+		}
+
+		setTimeout(() => {  //在动画结束之后才开始获取
+			this.$nextTick(()=>{
+				this.changeKeyboardHeight()
+			})
+		}, 500);
+	}
+};
+</script>
+<style scoped lang="less">
+@import './uni-plate-input';
+</style>

components/w-picker/date-picker.vue

@@ -0,0 +1,742 @@
+<template>
+	<view class="w-picker-view">
+		<picker-view v-if="fields=='year'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
+			</picker-view-column>
+		</picker-view>
+		<picker-view v-if="fields=='month'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
+			</picker-view-column>
+		</picker-view>
+		<picker-view v-if="fields=='day'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
+			</picker-view-column>
+		</picker-view>
+		<picker-view v-if="fields=='hour'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
+			</picker-view-column>
+		</picker-view>
+		<picker-view v-if="fields=='minute'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
+			</picker-view-column>
+		</picker-view>
+		<picker-view v-if="fields=='second'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.seconds" :key="index">{{item}}秒</view>
+			</picker-view-column>
+		</picker-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pickVal:[],
+				range:{
+					years:[],
+					months:[],
+					days:[],
+					hours:[],
+					minutes:[],
+					seconds:[]
+				},
+				checkObj:{}
+			};
+		},
+		props:{
+			itemHeight:{
+				type:String,
+				default:"44px"
+			},
+			startYear:{
+				type:[String,Number],
+				default:""
+			},
+			endYear:{
+				type:[String,Number],
+				default:""
+			},
+			value:{
+				type:[String,Array,Number],
+				default:""
+			},
+			current:{//是否默认选中当前日期
+				type:Boolean,
+				default:false
+			},
+			disabledAfter:{//是否禁用当前之后的日期
+				type:Boolean,
+				default:false
+			},
+			fields:{
+				type:String,
+				default:"day"
+			}
+		},
+		watch:{
+			fields(val){
+				this.initData();
+			},
+			value(val){
+				this.initData();
+			}
+		},
+		created() {
+			this.initData();
+		},
+		methods:{
+			formatNum(n){
+				return (Number(n)<10?'0'+Number(n):Number(n)+'');
+			},
+			checkValue(value){
+				let strReg,example
+				switch(this.fields){
+					case "year":
+						strReg=/^\d{4}$/;
+						example="2019";
+						break;
+					case "month":
+						strReg=/^\d{4}-\d{2}$/;
+						example="2019-02";
+						break;
+					case "day":
+						strReg=/^\d{4}-\d{2}-\d{2}$/;
+						example="2019-02-01";
+						break;
+					case "hour":
+						strReg=/^\d{4}-\d{2}-\d{2} \d{2}(:\d{2}){1,2}?$/;
+						example="2019-02-01 18:00:00或2019-02-01 18";
+						break;
+					case "minute":
+						strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2}){0,1}?$/;
+						example="2019-02-01 18:06:00或2019-02-01 18:06";
+						break;
+					case "second":
+						strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
+						example="2019-02-01 18:06:01";
+						break;
+				}
+				if(!strReg.test(value)){
+					console.log(new Error("请传入与mode、fields匹配的value值，例value="+example+""))
+				}
+				return strReg.test(value);
+			},
+			resetData(year,month,day,hour,minute){
+				let curDate=this.getCurrenDate();
+				let curFlag=this.current;
+				let curYear=curDate.curYear;
+				let curMonth=curDate.curMonth;
+				let curDay=curDate.curDay;
+				let curHour=curDate.curHour;
+				let curMinute=curDate.curMinute;
+				let curSecond=curDate.curSecond;
+				let months=[],days=[],hours=[],minutes=[],seconds=[];
+				let disabledAfter=this.disabledAfter;
+				let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
+				let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
+				let daysLen=disabledAfter?((year*1<curYear||month*1<curMonth)?totalDays:curDay):totalDays;
+				let hoursLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay)?24:curHour+1):24;
+				let minutesLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay||hour*1<curHour)?60:curMinute+1):60;
+				let secondsLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay||hour*1<curHour||minute*1<curMinute)?60:curSecond+1):60;
+				for(let month=1;month<=monthsLen;month++){
+					months.push(this.formatNum(month));
+				};
+				for(let day=1;day<=daysLen;day++){
+					days.push(this.formatNum(day));
+				}
+				for(let hour=0;hour<hoursLen;hour++){
+					hours.push(this.formatNum(hour));
+				}
+				for(let minute=0;minute<minutesLen;minute++){
+					minutes.push(this.formatNum(minute));
+				}
+				for(let second=0;second<secondsLen;second++){
+					seconds.push(this.formatNum(second));
+				}
+				return{
+					months,
+					days,
+					hours,
+					minutes,
+					seconds
+				}
+			},
+			isLeapYear (Year) {
+				if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
+					return true;
+				} else { 
+					return false; 
+				}
+			},
+			getData(dVal){
+				//用来处理初始化数据
+				let curFlag=this.current;
+				let disabledAfter=this.disabledAfter;
+				let fields=this.fields;
+				let curDate=this.getCurrenDate();
+				let curYear=curDate.curYear;
+				let curMonthdays=curDate.curMonthdays;
+				let curMonth=curDate.curMonth;
+				let curDay=curDate.curDay;
+				let curHour=curDate.curHour;
+				let curMinute=curDate.curMinute;
+				let curSecond=curDate.curSecond;
+				let defaultDate=this.getDefaultDate();
+				let startYear=this.getStartDate().getFullYear();
+				let endYear=this.getEndDate().getFullYear();
+				//颗粒度，禁用当前之后日期仅对year,month,day,hour生效;分钟秒禁用没有意义,
+				let years=[],months=[],days=[],hours=[],minutes=[],seconds=[];
+				let year=dVal[0]*1;
+				let month=dVal[1]*1;
+				let day=dVal[2]*1;
+				let hour=dVal[3]*1;
+				let minute=dVal[4]*1;
+				let monthsLen=disabledAfter?(year<curYear?12:curDate.curMonth):12;
+				let daysLen=disabledAfter?((year<curYear||month<curMonth)?defaultDate.defaultDays:curDay):(curFlag?curMonthdays:defaultDate.defaultDays);
+				let hoursLen=disabledAfter?((year<curYear||month<curMonth||day<curDay)?24:curHour+1):24;
+				let minutesLen=disabledAfter?((year<curYear||month<curMonth||day<curDay||hour<curHour)?60:curMinute+1):60;
+				let secondsLen=disabledAfter?((year<curYear||month<curMonth||day<curDay||hour<curHour||minute<curMinute)?60:curSecond+1):60;
+				for(let year=startYear;year<=(disabledAfter?curYear:endYear);year++){
+					years.push(year.toString())
+				}
+				for(let month=1;month<=monthsLen;month++){
+					months.push(this.formatNum(month));
+				}
+				for(let day=1;day<=daysLen;day++){
+					days.push(this.formatNum(day));
+				}
+				for(let hour=0;hour<hoursLen;hour++){
+					hours.push(this.formatNum(hour));
+				}
+				for(let minute=0;minute<minutesLen;minute++){
+					minutes.push(this.formatNum(minute));
+				}
+				// for(let second=0;second<(disabledAfter?curDate.curSecond+1:60);second++){
+				// 	seconds.push(this.formatNum(second));
+				// }
+				for(let second=0;second<60;second++){
+					seconds.push(this.formatNum(second));
+				}
+				return {
+					years,
+					months,
+					days,
+					hours,
+					minutes,
+					seconds
+				}
+			},
+			getCurrenDate(){
+				let curDate=new Date();
+				let curYear=curDate.getFullYear();
+				let curMonth=curDate.getMonth()+1;
+				let curMonthdays=new Date(curYear,curMonth,0).getDate();
+				let curDay=curDate.getDate();
+				let curHour=curDate.getHours();
+				let curMinute=curDate.getMinutes();
+				let curSecond=curDate.getSeconds();
+				return{
+					curDate,
+					curYear,
+					curMonth,
+					curMonthdays,
+					curDay,
+					curHour,
+					curMinute,
+					curSecond
+				}
+			},
+			getDefaultDate(){
+				let value=this.value;
+				let reg=/-/g;
+				let defaultDate=value?new Date(value.replace(reg,"/")):new Date();
+				let defaultYear=defaultDate.getFullYear();
+				let defaultMonth=defaultDate.getMonth()+1;
+				let defaultDay=defaultDate.getDate();
+				let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1;
+				return{
+					defaultDate,
+					defaultYear,
+					defaultMonth,
+					defaultDay,
+					defaultDays
+				}
+			},
+			getStartDate(){
+				let start=this.startYear;
+				let startDate="";
+				let reg=/-/g;
+				if(start){
+					startDate=new Date(start+"/01/01");
+				}else{
+					startDate=new Date("1970/01/01");
+				}
+				return startDate;
+			},
+			getEndDate(){
+				let end=this.endYear;
+				let reg=/-/g;
+				let endDate="";
+				if(end){
+					endDate=new Date(end+"/12/01");
+				}else{
+					endDate=new Date();
+				}
+				return endDate;
+			},
+			getDval(){
+				let value=this.value;
+				let fields=this.fields;
+				let dVal=null;
+				let aDate=new Date();
+				let year=this.formatNum(aDate.getFullYear());
+				let month=this.formatNum(aDate.getMonth()+1);
+				let day=this.formatNum(aDate.getDate());
+				let hour=this.formatNum(aDate.getHours());
+				let minute=this.formatNum(aDate.getMinutes());
+				let second=this.formatNum(aDate.getSeconds());
+				if(value){
+					let flag=this.checkValue(value);
+					if(!flag){
+						dVal=[year,month,day,hour,minute,second]
+					}else{
+						switch(this.fields){
+							case "year":
+								dVal=value?[value]:[];	
+								break;
+							case "month":
+								dVal=value?value.split("-"):[];
+								break;
+							case "day":
+								dVal=value?value.split("-"):[];
+								break;
+							case "hour":
+								dVal=[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")];
+								break;
+							case "minute":
+								dVal=value?[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")]:[];
+								break;
+							case "second":
+								dVal=[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")];
+								break;
+						}
+					}
+				}else{
+					dVal=[year,month,day,hour,minute,second]
+				}
+				return dVal;
+			},
+			initData(){
+				let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
+				let years=[],months=[],days=[],hours=[],minutes=[],seconds=[];
+				let dVal=[],pickVal=[];
+				let value=this.value;
+				let reg=/-/g;
+				let range={};
+				let result="",full="",year,month,day,hour,minute,second,obj={};
+				let defaultDate=this.getDefaultDate();
+				let defaultYear=defaultDate.defaultYear;
+				let defaultMonth=defaultDate.defaultMonth;
+				let defaultDay=defaultDate.defaultDay;
+				let defaultDays=defaultDate.defaultDays;
+				let curFlag=this.current;
+				let disabledAfter=this.disabledAfter;
+				let curDate=this.getCurrenDate();
+				let curYear=curDate.curYear;
+				let curMonth=curDate.curMonth;
+				let curMonthdays=curDate.curMonthdays;
+				let curDay=curDate.curDay;
+				let curHour=curDate.curHour;
+				let curMinute=curDate.curMinute;
+				let curSecond=curDate.curSecond;
+				let dateData=[];
+				dVal=this.getDval();
+				
+				startDate=this.getStartDate();
+				endDate=this.getEndDate();
+				startYear=startDate.getFullYear();
+				startMonth=startDate.getMonth();
+				startDay=startDate.getDate();
+				endYear=endDate.getFullYear();
+				endMonth=endDate.getMonth();
+				endDay=endDate.getDate();
+				dateData=this.getData(dVal);
+				years=dateData.years;
+				months=dateData.months;
+				days=dateData.days;
+				hours=dateData.hours;
+				minutes=dateData.minutes;
+				seconds=dateData.seconds;
+				switch(this.fields){
+					case "year":
+						pickVal=disabledAfter?[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0
+						]:(curFlag?[
+							years.indexOf(curYear+'')
+						]:[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0
+						]);
+						range={years};
+						year=dVal[0]?dVal[0]:years[0];
+						result=full=`${year}`;
+						obj={
+							year
+						}
+						break;
+					case "month":
+						pickVal=disabledAfter?[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0
+						]:(curFlag?[
+							years.indexOf(curYear+''),
+							months.indexOf(this.formatNum(curMonth))
+						]:[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0
+						]);
+						range={years,months};
+						year=dVal[0]?dVal[0]:years[0];
+						month=dVal[1]?dVal[1]:months[0];
+						result=full=`${year+'-'+month}`;
+						obj={
+							year,
+							month
+						}
+						break;
+					case "day":
+						pickVal=disabledAfter?[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+							dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0
+						]:(curFlag?[
+							years.indexOf(curYear+''),
+							months.indexOf(this.formatNum(curMonth)),
+							days.indexOf(this.formatNum(curDay)),
+						]:[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+							dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0
+						]);
+						range={years,months,days};
+						year=dVal[0]?dVal[0]:years[0];
+						month=dVal[1]?dVal[1]:months[0];
+						day=dVal[2]?dVal[2]:days[0];
+						result=full=`${year+'-'+month+'-'+day}`;
+						obj={
+							year,
+							month,
+							day
+						}
+						break;
+					case "hour":
+						pickVal=disabledAfter?[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+							dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
+							dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0
+						]:(curFlag?[
+							years.indexOf(curYear+''),
+							months.indexOf(this.formatNum(curMonth)),
+							days.indexOf(this.formatNum(curDay)),
+							hours.indexOf(this.formatNum(curHour)),
+						]:[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+							dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
+							dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0
+						]);
+						range={years,months,days,hours};
+						year=dVal[0]?dVal[0]:years[0];
+						month=dVal[1]?dVal[1]:months[0];
+						day=dVal[2]?dVal[2]:days[0];
+						hour=dVal[3]?dVal[3]:hours[0];
+						result=`${year+'-'+month+'-'+day+' '+hour}`;
+						full=`${year+'-'+month+'-'+day+' '+hour+':00:00'}`;
+						obj={
+							year,
+							month,
+							day,
+							hour
+						}
+						break;
+					case "minute":
+						pickVal=disabledAfter?[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+							dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
+							dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
+							dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0
+						]:(curFlag?[
+							years.indexOf(curYear+''),
+							months.indexOf(this.formatNum(curMonth)),
+							days.indexOf(this.formatNum(curDay)),
+							hours.indexOf(this.formatNum(curHour)),
+							minutes.indexOf(this.formatNum(curMinute)),
+						]:[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+							dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
+							dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
+							dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0
+						]);
+						range={years,months,days,hours,minutes};
+						year=dVal[0]?dVal[0]:years[0];
+						month=dVal[1]?dVal[1]:months[0];
+						day=dVal[2]?dVal[2]:days[0];
+						hour=dVal[3]?dVal[3]:hours[0];
+						minute=dVal[4]?dVal[4]:minutes[0];
+						full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':00'}`;
+						result=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
+						obj={
+							year,
+							month,
+							day,
+							hour,
+							minute
+						}
+						break;
+					case "second":
+						pickVal=disabledAfter?[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+							dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
+							dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
+							dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0,
+							dVal[5]&&seconds.indexOf(dVal[5])!=-1?seconds.indexOf(dVal[5]):0
+						]:(curFlag?[
+							years.indexOf(curYear+''),
+							months.indexOf(this.formatNum(curMonth)),
+							days.indexOf(this.formatNum(curDay)),
+							hours.indexOf(this.formatNum(curHour)),
+							minutes.indexOf(this.formatNum(curMinute)),
+							seconds.indexOf(this.formatNum(curSecond)),
+						]:[
+							dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+							dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+							dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
+							dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
+							dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0,
+							dVal[5]&&seconds.indexOf(dVal[5])!=-1?seconds.indexOf(dVal[5]):0
+						]);
+						range={years,months,days,hours,minutes,seconds};
+						year=dVal[0]?dVal[0]:years[0];
+						month=dVal[1]?dVal[1]:months[0];
+						day=dVal[2]?dVal[2]:days[0];
+						hour=dVal[3]?dVal[3]:hours[0];
+						minute=dVal[4]?dVal[4]:minutes[0];
+						second=dVal[5]?dVal[5]:seconds[0];
+						result=full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
+						obj={
+							year,
+							month,
+							day,
+							hour,
+							minute,
+							second
+						}
+						break;
+					default:
+						range={years,months,days};
+						break;
+				}
+				this.range=range;
+				this.checkObj=obj;
+				this.$emit("change",{
+					result:result,
+					value:full,
+					obj:obj
+				});
+				this.$nextTick(()=>{
+					this.pickVal=pickVal;
+				})
+			},
+			handlerChange(e){
+				let arr=[...e.detail.value];
+				let data=this.range;
+				let year="",month="",day="",hour="",minute="",second="";
+				let result="",full="",obj={};
+				let months=null,days=null,hours=null,minutes=null,seconds=null;
+				let disabledAfter=this.disabledAfter;
+				let leapYear=false,resetData={};
+				year=(arr[0]||arr[0]==0)?data.years[arr[0]]||data.years[data.years.length-1]:"";
+				month=(arr[1]||arr[1]==0)?data.months[arr[1]]||data.months[data.months.length-1]:"";
+				day=(arr[2]||arr[2]==0)?data.days[arr[2]]||data.days[data.days.length-1]:"";
+				hour=(arr[3]||arr[3]==0)?data.hours[arr[3]]||data.hours[data.hours.length-1]:"";
+				minute=(arr[4]||arr[4]==0)?data.minutes[arr[4]]||data.minutes[data.minutes.length-1]:"";
+				second=(arr[5]||arr[5]==0)?data.seconds[arr[5]]||data.seconds[data.seconds.length-1]:"";
+				resetData=this.resetData(year,month,day,hour,minute);//重新拉取当前日期数据;
+				leapYear=this.isLeapYear(year);//判断是否为闰年;
+				switch(this.fields){
+					case "year":
+						result=full=`${year}`;
+						obj={
+							year
+						};
+						break;
+					case "month":
+						result=full=`${year+'-'+month}`;
+						if(this.disabledAfter)months=resetData.months;
+						if(months)this.range.months=months;
+						obj={
+							year,
+							month
+						}
+						break;
+					case "day":
+						result=full=`${year+'-'+month+'-'+day}`;
+						if(this.disabledAfter){
+							months=resetData.months;
+							days=resetData.days;
+						}else{
+							if(leapYear||(month!=this.checkObj.month)||month==2){
+								days=resetData.days;
+							}
+						}
+						if(months)this.range.months=months;
+						if(days)this.range.days=days;
+						obj={
+							year,
+							month,
+							day
+						}
+						break;
+					case "hour":
+						result=`${year+'-'+month+'-'+day+' '+hour}`;
+						full=`${year+'-'+month+'-'+day+' '+hour+':00:00'}`;
+						if(this.disabledAfter){
+							months=resetData.months;
+							days=resetData.days;
+							hours=resetData.hours;
+						}else{
+							if(leapYear||(month!=this.checkObj.month)||month==2){
+								days=resetData.days;
+							}
+						}
+						if(months)this.range.months=months;
+						if(days)this.range.days=days;
+						if(hours)this.range.hours=hours;
+						obj={
+							year,
+							month,
+							day,
+							hour
+						}
+						break;
+					case "minute":
+						full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':00'}`;
+						result=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
+						if(this.disabledAfter){
+							months=resetData.months;
+							days=resetData.days;
+							hours=resetData.hours;
+							minutes=resetData.minutes;
+						}else{
+							if(leapYear||(month!=this.checkObj.month)||month==2){
+								days=resetData.days;
+							}
+						}
+						if(months)this.range.months=months;
+						if(days)this.range.days=days;
+						if(hours)this.range.hours=hours;
+						if(minutes)this.range.minutes=minutes;
+						obj={
+							year,
+							month,
+							day,
+							hour,
+							minute
+						};
+						break;
+					case "second":
+						result=full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
+						if(this.disabledAfter){
+							months=resetData.months;
+							days=resetData.days;
+							hours=resetData.hours;
+							minutes=resetData.minutes;
+							//seconds=resetData.seconds;
+						}else{
+							if(leapYear||(month!=this.checkObj.month)||month==2){
+								days=resetData.days;
+							}
+						}
+						if(months)this.range.months=months;
+						if(days)this.range.days=days;
+						if(hours)this.range.hours=hours;
+						if(minutes)this.range.minutes=minutes;
+						//if(seconds)this.range.seconds=seconds;
+						obj={
+							year,
+							month,
+							day,
+							hour,
+							minute,
+							second
+						}
+						break;
+				}
+				this.checkObj=obj;
+				this.$emit("change",{
+					result:result,
+					value:full,
+					obj:obj
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "./w-picker.css";
+</style>

components/w-picker/half-picker.vue

@@ -0,0 +1,345 @@
+<template>
+	<view class="w-picker-view">
+		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.sections" :key="index">{{item}}</view>
+			</picker-view-column>
+		</picker-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pickVal:[],
+				range:{},
+				checkObj:{}
+			};
+		},
+		props:{
+			itemHeight:{
+				type:String,
+				default:"44px"
+			},
+			startYear:{
+				type:String,
+				default:""
+			},
+			endYear:{
+				type:String,
+				default:""
+			},
+			value:{
+				type:[String,Array,Number],
+				default:""
+			},
+			current:{//是否默认选中当前日期
+				type:Boolean,
+				default:false
+			},
+			disabledAfter:{//是否禁用当前之后的日期
+				type:Boolean,
+				default:false
+			}
+		},
+		watch:{
+			value(val){
+				this.initData();
+			}
+		},
+		created() {
+			this.initData();
+		},
+		methods:{
+			formatNum(n){
+				return (Number(n)<10?'0'+Number(n):Number(n)+'');
+			},
+			checkValue(value){
+				let strReg=/^\d{4}-\d{2}-\d{2} [\u4e00-\u9fa5]{2}$/,example;
+				if(!strReg.test(value)){
+					console.log(new Error("请传入与mode、fields匹配的value值，例value="+example+""))
+				}
+				return strReg.test(value);
+			},
+			resetData(year,month,day){
+				let curDate=this.getCurrenDate();
+				let curFlag=this.current;
+				let curYear=curDate.curYear;
+				let curMonth=curDate.curMonth;
+				let curDay=curDate.curDay;
+				let curHour=curDate.curHour;
+				let months=[],days=[],sections=[];
+				let disabledAfter=this.disabledAfter;
+				let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
+				let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
+				let daysLen=disabledAfter?((year*1<curYear||month*1<curMonth)?totalDays:curDay):totalDays;
+				let sectionFlag=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay)==true?false:true):(curHour>12==true?true:false);
+				sections=["上午","下午"];
+				for(let month=1;month<=monthsLen;month++){
+					months.push(this.formatNum(month));
+				};
+				for(let day=1;day<=daysLen;day++){
+					days.push(this.formatNum(day));
+				}
+				if(sectionFlag){
+					sections=["上午"];
+				}
+				return{
+					months,
+					days,
+					sections
+				}
+			},
+			getData(dVal){
+				//用来处理初始化数据
+				let curFlag=this.current;
+				let disabledAfter=this.disabledAfter;
+				let curDate=this.getCurrenDate();
+				let curYear=curDate.curYear;
+				let curMonthdays=curDate.curMonthdays;
+				let curMonth=curDate.curMonth;
+				let curDay=curDate.curDay;
+				let curHour=curDate.curHour;
+				let defaultDate=this.getDefaultDate();
+				let startYear=this.getStartDate().getFullYear();
+				let endYear=this.getEndDate().getFullYear();
+				let years=[],months=[],days=[],sections=[];
+				let year=dVal[0]*1;
+				let month=dVal[1]*1;
+				let day=dVal[2]*1;
+				let monthsLen=disabledAfter?(year<curYear?12:curDate.curMonth):12;
+				let daysLen=disabledAfter?((year<curYear||month<curMonth)?defaultDate.defaultDays:curDay):(curFlag?curMonthdays:defaultDate.defaultDays);
+				let sectionFlag=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay)==true?false:true):(curHour>12==true?true:false);
+				for(let year=startYear;year<=(disabledAfter?curYear:endYear);year++){
+					years.push(year.toString())
+				}
+				for(let month=1;month<=monthsLen;month++){
+					months.push(this.formatNum(month));
+				}
+				for(let day=1;day<=daysLen;day++){
+					days.push(this.formatNum(day));
+				}
+				if(sectionFlag){
+					sections=["下午"];
+				}else{
+					sections=["上午","下午"];
+				}
+				return {
+					years,
+					months,
+					days,
+					sections
+				}
+			},
+			getCurrenDate(){
+				let curDate=new Date();
+				let curYear=curDate.getFullYear();
+				let curMonth=curDate.getMonth()+1;
+				let curMonthdays=new Date(curYear,curMonth,0).getDate();
+				let curDay=curDate.getDate();
+				let curHour=curDate.getHours();
+				let curSection="上午";
+				if(curHour>=12){
+					curSection="下午";
+				}
+				return{
+					curDate,
+					curYear,
+					curMonth,
+					curMonthdays,
+					curDay,
+					curHour,
+					curSection
+				}
+			},
+			getDefaultDate(){
+				let value=this.value;
+				let reg=/-/g;
+				let defaultDate=value?new Date(value.split(" ")[0].replace(reg,"/")):new Date();
+				let defaultYear=defaultDate.getFullYear();
+				let defaultMonth=defaultDate.getMonth()+1;
+				let defaultDay=defaultDate.getDate();
+				let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1;
+				return{
+					defaultDate,
+					defaultYear,
+					defaultMonth,
+					defaultDay,
+					defaultDays
+				}
+			},
+			getStartDate(){
+				let start=this.startYear;
+				let startDate="";
+				let reg=/-/g;
+				if(start){
+					startDate=new Date(start+"/01/01");
+				}else{
+					startDate=new Date("1970/01/01");
+				}
+				return startDate;
+			},
+			getEndDate(){
+				let end=this.endYear;
+				let reg=/-/g;
+				let endDate="";
+				if(end){
+					endDate=new Date(end+"/12/31");
+				}else{
+					endDate=new Date();
+				}
+				return endDate;
+			},
+			getDval(){
+				let value=this.value;
+				let dVal=null;
+				let aDate=new Date();
+				let year=this.formatNum(aDate.getFullYear());
+				let month=this.formatNum(aDate.getMonth()+1);
+				let day=this.formatNum(aDate.getDate());
+				let hour=aDate.getHours();
+				let section="上午";
+				if(hour>=12)section="下午";
+				if(value){
+					let flag=this.checkValue(value);
+					if(!flag){
+						dVal=[year,month,day,section]
+					}else{
+						let v=value.split(" ");
+						dVal=[...v[0].split("-"),v[1]];
+					}
+				}else{
+					dVal=[year,month,day,section]
+				}
+				return dVal;
+			},
+			initData(){
+				let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
+				let years=[],months=[],days=[],sections=[];
+				let dVal=[],pickVal=[];
+				let value=this.value;
+				let reg=/-/g;
+				let range={};
+				let result="",full="",year,month,day,section,obj={};
+				let defaultDate=this.getDefaultDate();
+				let defaultYear=defaultDate.defaultYear;
+				let defaultMonth=defaultDate.defaultMonth;
+				let defaultDay=defaultDate.defaultDay;
+				let defaultDays=defaultDate.defaultDays;
+				let curFlag=this.current;
+				let disabledAfter=this.disabledAfter;
+				let curDate=this.getCurrenDate();
+				let curYear=curDate.curYear;
+				let curMonth=curDate.curMonth;
+				let curMonthdays=curDate.curMonthdays;
+				let curDay=curDate.curDay;
+				let curSection=curDate.curSection;
+				let dateData=[];
+				dVal=this.getDval();
+				startDate=this.getStartDate();
+				endDate=this.getEndDate();
+				startYear=startDate.getFullYear();
+				startMonth=startDate.getMonth();
+				startDay=startDate.getDate();
+				endYear=endDate.getFullYear();
+				endMonth=endDate.getMonth();
+				endDay=endDate.getDate();
+				dateData=this.getData(dVal);
+				years=dateData.years;
+				months=dateData.months;
+				days=dateData.days;
+				sections=dateData.sections;
+				pickVal=disabledAfter?[
+					dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+					dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+					dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
+					dVal[3]&&sections.indexOf(dVal[3])!=-1?sections.indexOf(dVal[3]):0
+				]:(curFlag?[
+					years.indexOf(curYear+''),
+					months.indexOf(this.formatNum(curMonth)),
+					days.indexOf(this.formatNum(curDay)),
+					sections.indexOf(curSection),
+				]:[
+					dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
+					dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
+					dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
+					dVal[3]&&sections.indexOf(dVal[3])!=-1?sections.indexOf(dVal[3]):0
+				]);
+				range={years,months,days,sections};
+				year=dVal[0]?dVal[0]:years[0];
+				month=dVal[1]?dVal[1]:months[0];
+				day=dVal[2]?dVal[2]:days[0];
+				section=dVal[3]?dVal[3]:sections[0];
+				result=full=`${year+'-'+month+'-'+day+' '+section}`;
+				obj={
+					year,
+					month,
+					day,
+					section
+				}
+				this.range=range;
+				this.checkObj=obj;
+				this.$nextTick(()=>{
+					this.pickVal=pickVal;
+				});
+				this.$emit("change",{
+					result:result,
+					value:full,
+					obj:obj
+				})
+			},
+			handlerChange(e){
+				let arr=[...e.detail.value];
+				let data=this.range;
+				let year="",month="",day="",section="";
+				let result="",full="",obj={};
+				let months=null,days=null,sections=null;
+				let disabledAfter=this.disabledAfter;
+				year=(arr[0]||arr[0]==0)?data.years[arr[0]]||data.years[data.years.length-1]:"";
+				month=(arr[1]||arr[1]==0)?data.months[arr[1]]||data.months[data.months.length-1]:"";
+				day=(arr[2]||arr[2]==0)?data.days[arr[2]]||data.days[data.days.length-1]:"";
+				section=(arr[3]||arr[3]==0)?data.sections[arr[3]]||data.sections[data.sections.length-1]:"";
+				result=full=`${year+'-'+month+'-'+day+' '+section}`;
+				let resetData=this.resetData(year,month,day);
+				if(this.disabledAfter){
+					months=resetData.months;
+					days=resetData.days;
+					sections=resetData.sections;
+				}else{
+					if(year%4==0||(month!=this.checkObj.month)){
+						days=resetData.days;
+					}
+				}
+				if(months)this.range.months=months;
+				if(days)this.range.days=days;
+				if(sections)this.range.sections=sections;
+				obj={
+					year,
+					month,
+					day,
+					section
+				}
+				this.checkObj=obj;
+				this.$emit("change",{
+					result:result,
+					value:full,
+					obj:obj
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "./w-picker.css";
+</style>

components/w-picker/linkage-picker.vue

@@ -0,0 +1,274 @@
+<template>
+	<view class="w-picker-view">
+		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column v-for="(group,gIndex) in range" :key="gIndex">
+				<view class="w-picker-item" v-for="(item,index) in group" :key="index">{{item[nodeKey]}}</view>
+			</picker-view-column>
+		</picker-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pickVal:[],
+				range:[],
+				checkObj:{}
+			};
+		},
+		props:{
+			itemHeight:{
+				type:String,
+				default:"44px"
+			},
+			value:{
+				type:[Array,String],
+				default:""
+			},
+			defaultType:{
+				type:String,
+				default:"label"
+			},
+			options:{
+				type:Array,
+				default(){
+					return []
+				}
+			},
+			defaultProps:{
+				type:Object,
+				default(){
+					return{
+						lable:"label",
+						value:"value",
+						children:"children"
+					}
+				}
+			},
+			level:{
+				//多级联动层级，表示几级联动
+				type:[Number,String],
+				default:2
+			}
+		},
+		computed:{
+			nodeKey(){
+				return this.defaultProps.label;
+			},
+			nodeVal(){
+				return this.defaultProps.value;
+			},
+			nodeChild(){
+				return this.defaultProps.children;
+			}
+		},
+		watch:{
+			value(val){
+				if(this.options.length!=0){
+					this.initData();
+				}
+			},
+			options(val){
+				this.initData();
+			}
+		},
+		created() {
+			if(this.options.length!=0){
+				this.initData();
+			}
+		},
+		methods:{
+			getData(){
+				//用来处理初始化数据
+				let options=this.options;
+				let col1={},col2={},col3={},col4={};
+				let arr1=options,arr2=[],arr3=[],arr4=[];
+				let col1Index=0,col2Index=0,col3Index=0,col4Index=0;
+				let a1="",a2="",a3="",a4="";
+				let dVal=[],obj={};
+				let value=this.value;
+				let data=[];
+				a1=value[0];
+				a2=value[1];
+				if(this.level>2){
+					a3=value[2];
+				}
+				if(this.level>3){
+					a4=value[3];
+				};
+				/*第1列*/
+				col1Index=arr1.findIndex((v)=>{
+					return v[this.defaultType]==a1
+				});
+				col1Index=value?(col1Index!=-1?col1Index:0):0;
+				col1=arr1[col1Index];
+				
+				/*第2列*/
+				arr2=arr1[col1Index][this.nodeChild];
+				col2Index=arr2.findIndex((v)=>{
+					return v[this.defaultType]==a2
+				});
+				col2Index=value?(col2Index!=-1?col2Index:0):0;
+				col2=arr2[col2Index];
+				
+				/*第3列*/
+				if(this.level>2){
+					arr3=arr2[col2Index][this.nodeChild];
+					col3Index=arr3.findIndex((v)=>{
+						return v[this.defaultType]==a3;
+					});
+					col3Index=value?(col3Index!=-1?col3Index:0):0;
+					col3=arr3[col3Index];
+				};
+				
+				
+				/*第4列*/
+				if(this.level>3){
+					arr4=arr3[col4Index][this.nodeChild];
+					col4Index=arr4.findIndex((v)=>{
+						return v[this.defaultType]==a4;
+					});
+					col4Index=value?(col4Index!=-1?col4Index:0):0;
+					col4=arr4[col4Index];
+				};
+				switch(this.level*1){
+					case 2:
+						dVal=[col1Index,col2Index];
+						obj={
+							col1,
+							col2
+						}
+						data=[arr1,arr2];
+						break;
+					case 3:
+						dVal=[col1Index,col2Index,col3Index];
+						obj={
+							col1,
+							col2,
+							col3
+						}
+						data=[arr1,arr2,arr3];
+						break;
+					case 4:
+						dVal=[col1Index,col2Index,col3Index,col4Index];
+						obj={
+							col1,
+							col2,
+							col3,
+							col4
+						}
+						data=[arr1,arr2,arr3,arr4];
+						break
+				}
+				return {
+					data,
+					dVal,
+					obj
+				}
+			},
+			initData(){
+				let dataData=this.getData();
+				let data=dataData.data;
+				let arr1=data[0];
+				let arr2=data[1];
+				let arr3=data[2]||[];
+				let arr4=data[3]||[];
+				let obj=dataData.obj;
+				let col1=obj.col1,col2=obj.col2,col3=obj.col3||{},col4=obj.col4||{};
+				let result="",value=[];
+				let range=[];
+				switch(this.level){
+					case 2:
+						value=[col1[this.nodeVal],col2[this.nodeVal]];
+						result=`${col1[this.nodeKey]+col2[this.nodeKey]}`;
+						range=[arr1,arr2];
+						break;
+					case 3:
+						value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal]];
+						result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]}`;
+						range=[arr1,arr2,arr3];
+						break;
+					case 4:
+						value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal],col4[this.nodeVal]];
+						result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]+col4[this.nodeKey]}`;
+						range=[arr1,arr2,arr3,arr4];
+						break;
+				}
+				this.range=range;
+				this.checkObj=obj;
+				this.$nextTick(()=>{
+					this.pickVal=dataData.dVal;
+				});
+				this.$emit("change",{
+					result:result,
+					value:value,
+					obj:obj
+				})
+			},
+			handlerChange(e){
+				let arr=[...e.detail.value];
+				let col1Index=arr[0],col2Index=arr[1],col3Index=arr[2]||0,col4Index=arr[3]||0;
+				let arr1=[],arr2=[],arr3=[],arr4=[];
+				let col1,col2,col3,col4,obj={};
+				let result="",value=[];
+				arr1=this.options;
+				arr2=(arr1[col1Index]&&arr1[col1Index][this.nodeChild])||arr1[arr1.length-1][this.nodeChild]||[];
+				col1=arr1[col1Index]||arr1[arr1.length-1]||{};
+				col2=arr2[col2Index]||arr2[arr2.length-1]||{};
+				if(this.level>2){
+					arr3=(arr2[col2Index]&&arr2[col2Index][this.nodeChild])||arr2[arr2.length-1][this.nodeChild];
+					col3=arr3[col3Index]||arr3[arr3.length-1]||{};
+				}
+				if(this.level>3){
+					arr4=(arr3[col3Index]&&arr3[col3Index][this.nodeChild])||arr3[arr3.length-1][this.nodeChild]||[];
+					col4=arr4[col4Index]||arr4[arr4.length-1]||{};
+				}
+				switch(this.level){
+					case 2:
+						obj={
+							col1,
+							col2
+						}
+						this.range=[arr1,arr2];
+						result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')}`;
+						value=[col1[this.nodeVal]||'',col2[this.nodeVal]||''];
+						break;
+					case 3:
+						obj={
+							col1,
+							col2,
+							col3
+						}
+						this.range=[arr1,arr2,arr3];
+						result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')}`;
+						value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||''];
+						break;
+					case 4:
+						obj={
+							col1,
+							col2,
+							col3,
+							col4
+						}
+						this.range=[arr1,arr2,arr3,arr4];
+						result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')+(col4[this.nodeKey]||'')}`;
+						value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||'',col4[this.nodeVal]||''];
+						break;
+				}
+				this.checkObj=obj;
+				this.pickVal=arr;
+				this.$emit("change",{
+					result:result,
+					value:value,
+					obj:obj
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "./w-picker.css";	
+</style>
+

components/w-picker/range-picker.vue

@@ -0,0 +1,344 @@
+<template>
+	<view class="w-picker-view">
+		<picker-view  class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column class="w-picker-flex2">
+				<view class="w-picker-item" v-for="(item,index) in range.fyears" :key="index">{{item}}年</view>
+			</picker-view-column>
+			<picker-view-column class="w-picker-flex2">
+				<view class="w-picker-item" v-for="(item,index) in range.fmonths" :key="index">{{item}}月</view>
+			</picker-view-column>
+			<picker-view-column class="w-picker-flex2">
+				<view class="w-picker-item" v-for="(item,index) in range.fdays" :key="index">{{item}}日</view>
+			</picker-view-column>
+			<picker-view-column class="w-picker-flex1">
+				<view class="w-picker-item">-</view>
+			</picker-view-column>
+			<picker-view-column class="w-picker-flex2">
+				<view class="w-picker-item" v-for="(item,index) in range.tyears" :key="index">{{item}}年</view>
+			</picker-view-column>
+			<picker-view-column class="w-picker-flex2">
+				<view class="w-picker-item" v-for="(item,index) in range.tmonths" :key="index">{{item}}月</view>
+			</picker-view-column>
+			<picker-view-column class="w-picker-flex2">
+				<view class="w-picker-item" v-for="(item,index) in range.tdays" :key="index">{{item}}日</view>
+			</picker-view-column>
+		</picker-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pickVal:[],
+				range:{},
+				checkObj:{}
+			};
+		},
+		props:{
+			itemHeight:{
+				type:String,
+				default:"44px"
+			},
+			value:{
+				type:[String,Array],
+				default(){
+					return []
+				}
+			},
+			current:{//是否默认选中当前日期
+				type:Boolean,
+				default:false
+			},
+			startYear:{
+				type:[String,Number],
+				default:1970
+			},
+			endYear:{
+				type:[String,Number],
+				default:new Date().getFullYear()
+			}
+		},
+		watch:{
+			value(val){
+				this.initData();
+			}
+		},
+		created() {
+			this.initData();
+		},
+		methods:{
+			formatNum(n){
+				return (Number(n)<10?'0'+Number(n):Number(n)+'');
+			},
+			checkValue(value){
+				let strReg=/^\d{4}-\d{2}-\d{2}$/,example="2020-04-03";
+				if(!strReg.test(value[0])||!strReg.test(value[1])){
+					console.log(new Error("请传入与mode匹配的value值，例["+example+","+example+"]"))
+				}
+				return strReg.test(value[0])&&strReg.test(value[1]);
+			},
+			resetToData(fmonth,fday,tyear,tmonth){
+				let range=this.range;
+				let tmonths=[],tdays=[];
+				let yearFlag=tyear!=range.tyears[0];
+				let monthFlag=tyear!=range.tyears[0]||tmonth!=range.tmonths[0];
+				let ttotal=new Date(tyear,tmonth,0).getDate();
+				for(let i=yearFlag?1:fmonth*1;i<=12;i++){
+					tmonths.push(this.formatNum(i))
+				}
+				for(let i=monthFlag?1:fday*1;i<=ttotal;i++){
+					tdays.push(this.formatNum(i))
+				}
+				return{
+					tmonths,
+					tdays
+				}
+			},
+			resetData(fyear,fmonth,fday,tyear,tmonth){
+				let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[];
+				let startYear=this.startYear;
+				let endYear=this.endYear;
+				let ftotal=new Date(fyear,fmonth,0).getDate();
+				let ttotal=new Date(tyear,tmonth,0).getDate();
+				for(let i=startYear*1;i<=endYear;i++){
+					fyears.push(this.formatNum(i))
+				}
+				for(let i=1;i<=12;i++){
+					fmonths.push(this.formatNum(i))
+				}
+				for(let i=1;i<=ftotal;i++){
+					fdays.push(this.formatNum(i))
+				}
+				for(let i=fyear*1;i<=endYear;i++){
+					tyears.push(this.formatNum(i))
+				}
+				for(let i=fmonth*1;i<=12;i++){
+					tmonths.push(this.formatNum(i))
+				}
+				for(let i=fday*1;i<=ttotal;i++){
+					tdays.push(this.formatNum(i))
+				}
+				return {
+					fyears,
+					fmonths,
+					fdays,
+					tyears,
+					tmonths,
+					tdays
+				}
+			},
+			getData(dVal){
+				let start=this.startYear*1;
+				let end=this.endYear*1;
+				let value=dVal;
+				let flag=this.current;
+				let aToday=new Date();
+				let tYear,tMonth,tDay,tHours,tMinutes,tSeconds,pickVal=[];
+				let initstartDate=new Date(start.toString());
+				let endDate=new Date(end.toString());
+				if(start>end){
+					initstartDate=new Date(end.toString());
+					endDate=new Date(start.toString());
+				};
+				let startYear=initstartDate.getFullYear();
+				let startMonth=initstartDate.getMonth()+1;
+				let endYear=endDate.getFullYear();
+				let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[],returnArr=[],startDVal=[],endDVal=[];
+				let curMonth=flag?value[1]*1:(startDVal[1]*1+1);
+				let curMonth1=flag?value[5][1]*1:(value[5]*1+1);
+				let totalDays=new Date(value[0],value[1],0).getDate();
+				let totalDays1=new Date(value[4],value[5],0).getDate();
+				for(let s=startYear;s<=endYear;s++){
+					fyears.push(this.formatNum(s));
+				};
+				for(let m=1;m<=12;m++){
+					fmonths.push(this.formatNum(m));
+				};
+				for(let d=1;d<=totalDays;d++){
+					fdays.push(this.formatNum(d));
+				};
+				for(let s=value[0]*1;s<=endYear;s++){
+					tyears.push(this.formatNum(s));
+				};
+				
+				if(value[4]*1>value[0]*1){
+					for(let m=1;m<=12;m++){
+						tmonths.push(this.formatNum(m));
+					};
+					for(let d=1;d<=totalDays1;d++){
+						tdays.push(this.formatNum(d));
+					};
+				}else{
+					for(let m=value[1]*1;m<=12;m++){
+						tmonths.push(this.formatNum(m));
+					};
+					for(let d=value[2]*1;d<=totalDays1;d++){
+						tdays.push(this.formatNum(d));
+					};
+				};
+				
+				pickVal=[
+					fyears.indexOf(value[0])==-1?0:fyears.indexOf(value[0]),
+					fmonths.indexOf(value[1])==-1?0:fmonths.indexOf(value[1]),
+					fdays.indexOf(value[2])==-1?0:fdays.indexOf(value[2]),
+					0,
+					tyears.indexOf(value[4])==-1?0:tyears.indexOf(value[4]),
+					tmonths.indexOf(value[5])==-1?0:tmonths.indexOf(value[5]),
+					tdays.indexOf(value[6])==-1?0:tdays.indexOf(value[6])
+				];
+				return {
+					fyears,
+					fmonths,
+					fdays,
+					tyears,
+					tmonths,
+					tdays,
+					pickVal
+				}
+			},
+			getDval(){
+				let value=this.value;
+				let fields=this.fields;
+				let dVal=null;
+				let aDate=new Date();
+				let fyear=this.formatNum(aDate.getFullYear());
+				let fmonth=this.formatNum(aDate.getMonth()+1);
+				let fday=this.formatNum(aDate.getDate());
+				let tyear=this.formatNum(aDate.getFullYear());
+				let tmonth=this.formatNum(aDate.getMonth()+1);
+				let tday=this.formatNum(aDate.getDate());
+				if(value&&value.length>0){
+					let flag=this.checkValue(value);
+					if(!flag){
+						dVal=[fyear,fmonth,fday,"-",tyear,tmonth,tday]
+					}else{
+						dVal=[...value[0].split("-"),"-",...value[1].split("-")];
+					}
+				}else{
+					dVal=[fyear,fmonth,fday,"-",tyear,tmonth,tday]
+				}
+				return dVal;
+			},
+			initData(){
+				let range=[],pickVal=[];
+				let result="",full="",obj={};
+				let dVal=this.getDval();
+				let dateData=this.getData(dVal);
+				let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[];
+				let fyear,fmonth,fday,tyear,tmonth,tday;
+				pickVal=dateData.pickVal;
+				fyears=dateData.fyears;
+				fmonths=dateData.fmonths;
+				fdays=dateData.fdays;
+				tyears=dateData.tyears;
+				tmonths=dateData.tmonths;
+				tdays=dateData.tdays;
+				range={
+					fyears,
+					fmonths,
+					fdays,
+					tyears,
+					tmonths,
+					tdays,
+				}
+				fyear=range.fyears[pickVal[0]];
+				fmonth=range.fmonths[pickVal[1]];
+				fday=range.fdays[pickVal[2]];
+				tyear=range.tyears[pickVal[4]];
+				tmonth=range.tmonths[pickVal[5]];
+				tday=range.tdays[pickVal[6]];
+				obj={
+					fyear,
+					fmonth,
+					fday,
+					tyear,
+					tmonth,
+					tday
+				}
+				result=`${fyear+'-'+fmonth+'-'+fday+'至'+tyear+'-'+tmonth+'-'+tday}`;
+				this.range=range;
+				this.checkObj=obj;
+				this.$nextTick(()=>{
+					this.pickVal=pickVal;
+				});
+				this.$emit("change",{
+					result:result,
+					value:result.split("至"),
+					obj:obj
+				})
+			},
+			handlerChange(e){
+				let arr=[...e.detail.value];
+				let result="",full="",obj={};
+				let year="",month="",day="",hour="",minute="",second="",note=[],province,city,area;
+				let checkObj=this.checkObj;
+				let days=[],months=[],endYears=[],endMonths=[],endDays=[],startDays=[];
+				let mode=this.mode;
+				let col1,col2,col3,d,a,h,m;
+				let xDate=new Date().getTime();
+				let range=this.range;
+				let fyear=range.fyears[arr[0]]||range.fyears[range.fyears.length-1];
+				let fmonth=range.fmonths[arr[1]]||range.fmonths[range.fmonths.length-1];
+				let fday=range.fdays[arr[2]]||range.fdays[range.fdays.length-1];
+				let tyear=range.tyears[arr[4]]||range.tyears[range.tyears.length-1];
+				let tmonth=range.tmonths[arr[5]]||range.tmonths[range.tmonths.length-1];
+				let tday=range.tdays[arr[6]]||range.tdays[range.tdays.length-1];
+				let resetData=this.resetData(fyear,fmonth,fday,tyear,tmonth);
+				if(fyear!=checkObj.fyear||fmonth!=checkObj.fmonth||fday!=checkObj.fday){
+					arr[4]=0;
+					arr[5]=0;
+					arr[6]=0;
+					range.tyears=resetData.tyears;
+					range.tmonths=resetData.tmonths;
+					range.tdays=resetData.tdays;
+					tyear=range.tyears[0];
+					checkObj.tyears=range.tyears[0];
+					tmonth=range.tmonths[0];
+					checkObj.tmonths=range.tmonths[0];
+					tday=range.tdays[0];
+					checkObj.tdays=range.tdays[0];
+				}
+				if(fyear!=checkObj.fyear||fmonth!=checkObj.fmonth){
+					range.fdays=resetData.fdays;
+				};
+				if(tyear!=checkObj.tyear){
+					arr[5]=0;
+					arr[6]=0;
+					let toData=this.resetToData(fmonth,fday,tyear,tmonth);
+					range.tmonths=toData.tmonths;
+					range.tdays=toData.tdays;
+					tmonth=range.tmonths[0];
+					checkObj.tmonths=range.tmonths[0];
+					tday=range.tdays[0];
+					checkObj.tdays=range.tdays[0];
+				};
+				if(tmonth!=checkObj.tmonth){
+					arr[6]=0;
+					let toData=this.resetToData(fmonth,fday,tyear,tmonth);
+					range.tdays=toData.tdays;
+					tday=range.tdays[0];
+					checkObj.tdays=range.tdays[0];
+				};
+				result=`${fyear+'-'+fmonth+'-'+fday+'至'+tyear+'-'+tmonth+'-'+tday}`;
+				obj={
+					fyear,fmonth,fday,tyear,tmonth,tday
+				}
+				this.checkObj=obj;
+				this.$nextTick(()=>{
+					this.pickVal=arr;
+				})
+				this.$emit("change",{
+					result:result,
+					value:result.split("至"),
+					obj:obj
+				})
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "./w-picker.css";
+</style>

components/w-picker/region-picker.vue

@@ -0,0 +1,183 @@
+<template>
+	<view class="w-picker-view">
+		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.provinces" :key="index">{{item.label}}</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.citys" :key="index">{{item.label}}</view>
+			</picker-view-column>
+			<picker-view-column v-if="!hideArea">
+				<view class="w-picker-item" v-for="(item,index) in range.areas" :key="index">{{item.label}}</view>
+			</picker-view-column>
+		</picker-view>
+	</view>
+</template>
+
+<script>
+	import areaData from "./areadata/areadata.js"
+	export default {
+		data() {
+			return {
+				pickVal:[],
+				range:{
+					provinces:[],
+					citys:[],
+					areas:[]
+				},
+				checkObj:{}
+			};
+		},
+		props:{
+			itemHeight:{
+				type:String,
+				default:"44px"
+			},
+			value:{
+				type:[Array,String],
+				default:""
+			},
+			defaultType:{
+				type:String,
+				default:"label"
+			},
+			hideArea:{
+				type:Boolean,
+				default:false
+			}
+		},
+		watch:{
+			value(val){
+				this.initData();
+			}
+		},
+		created() {
+			this.initData();
+		},
+		methods:{
+			getData(){
+				//用来处理初始化数据
+				let provinces=areaData;
+				let dVal=[];
+				let value=this.value;
+				let a1=value[0];//默认值省
+				let a2=value[1];//默认值市
+				let a3=value[2];//默认值区、县
+				let province,city,area;
+				let provinceIndex=provinces.findIndex((v)=>{
+					return v[this.defaultType]==a1
+				});
+				provinceIndex=value?(provinceIndex!=-1?provinceIndex:0):0;
+				let citys=provinces[provinceIndex].children;
+				let cityIndex=citys.findIndex((v)=>{
+					return v[this.defaultType]==a2
+				});
+				cityIndex=value?(cityIndex!=-1?cityIndex:0):0;
+				let areas=citys[cityIndex].children;
+				let areaIndex=areas.findIndex((v)=>{
+					return v[this.defaultType]==a3;
+				});
+				areaIndex=value?(areaIndex!=-1?areaIndex:0):0;
+				dVal=this.hideArea?[provinceIndex,cityIndex]:[provinceIndex,cityIndex,areaIndex];
+				province=provinces[provinceIndex];
+				city=citys[cityIndex];
+				area=areas[areaIndex];
+				let obj=this.hideArea?{
+					province,
+					city
+				}:{
+					province,
+					city,
+					area
+				}
+				return this.hideArea?{
+					provinces,
+					citys,
+					dVal,
+					obj
+				}:{
+					provinces,
+					citys,
+					areas,
+					dVal,
+					obj
+				}
+			},
+			initData(){
+				let dataData=this.getData();
+				let provinces=dataData.provinces;
+				let citys=dataData.citys;
+				let areas=this.hideArea?[]:dataData.areas;
+				let obj=dataData.obj;
+				let province=obj.province,city=obj.city,area=this.hideArea?{}:obj.area;
+				let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
+				let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
+				this.range=this.hideArea?{
+					provinces,
+					citys,
+				}:{
+					provinces,
+					citys,
+					areas
+				};
+				this.checkObj=obj;
+				this.$nextTick(()=>{
+					this.pickVal=dataData.dVal;
+				});
+				this.$emit("change",{
+					result:result,
+					value:value,
+					obj:obj
+				})
+			},
+			handlerChange(e){
+				let arr=[...e.detail.value];
+				let provinceIndex=arr[0],cityIndex=arr[1],areaIndex=this.hideArea?0:arr[2];
+				let provinces=areaData;
+				let citys=(provinces[provinceIndex]&&provinces[provinceIndex].children)||provinces[provinces.length-1].children||[];
+				let areas=this.hideArea?[]:((citys[cityIndex]&&citys[cityIndex].children)||citys[citys.length-1].children||[]);
+				let province=provinces[provinceIndex]||provinces[provinces.length-1],
+				city=citys[cityIndex]||[citys.length-1],
+				area=this.hideArea?{}:(areas[areaIndex]||[areas.length-1]);
+				let obj=this.hideArea?{
+					province,
+					city
+				}:{
+					province,
+					city,
+					area
+				}
+				if(this.checkObj.province.label!=province.label){
+					//当省更新的时候需要刷新市、区县的数据;
+					this.range.citys=citys;
+					if(!this.hideArea){
+						this.range.areas=areas;
+					}
+					
+				}
+				if(this.checkObj.city.label!=city.label){
+					//当市更新的时候需要刷新区县的数据;
+					if(!this.hideArea){
+						this.range.areas=areas;
+					}
+				}
+				this.checkObj=obj;
+				this.$nextTick(()=>{
+					this.pickVal=arr;
+				})
+				let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
+				let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
+				this.$emit("change",{
+					result:result,
+					value:value,
+					obj:obj
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "./w-picker.css";	
+</style>
+

components/w-picker/selector-picker.vue

@@ -0,0 +1,129 @@
+<template>
+	<view class="w-picker-view">
+		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range" :key="index">{{item[nodeKey]}}</view>
+			</picker-view-column>
+		</picker-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			itemHeight:{
+				type:String,
+				default:"44px"
+			},
+			options:{
+				type:[Array,Object],
+				default(){
+					return []
+				}
+			},
+			value:{
+				type:String,
+				default:""
+			},
+			defaultType:{
+				type:String,
+				default:"label"
+			},
+			defaultProps:{
+				type:Object,
+				default(){
+					return{
+						label:"label",
+						value:"value"
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				pickVal:[]
+			};
+		},
+		computed:{
+			nodeKey(){
+				return this.defaultProps.label;
+			},
+			nodeValue(){
+				return this.defaultProps.value;
+			},
+			range(){
+				return this.options
+			}
+		},
+		watch:{
+			value(val){
+				if(this.options.length!=0){
+					this.initData();
+				}
+			},
+			options(val){
+				this.initData();
+			}
+		},
+		created() {
+			if(this.options.length!=0){
+				this.initData();
+			}
+		},
+		methods:{
+			initData(){
+				let dVal=this.value||"";
+				let data=this.range;
+				let pickVal=[0];
+				let cur=null;
+				let label="";
+				let value,idx;
+				if(this.defaultType==this.nodeValue){
+					value=data.find((v)=>v[this.nodeValue]==dVal);
+					idx=data.findIndex((v)=>v[this.nodeValue]==dVal);
+				}else{
+					value=data.find((v)=>v[this.nodeKey]==dVal);
+					idx=data.findIndex((v)=>v[this.nodeKey]==dVal);
+				}
+				pickVal=[idx!=-1?idx:0];
+				this.$nextTick(()=>{
+					this.pickVal=pickVal;
+				});
+				if(this.defaultType==this.nodeValue){
+					this.$emit("change",{
+						result:value?value[this.nodeKey]:data[0][this.nodeKey],
+						value:dVal||data[0][this.nodeKey],
+						obj:value?value:data[0]
+					})
+				}else{
+					this.$emit("change",{
+						result:dVal||data[0][this.nodeKey],
+						value:value?value[this.nodeValue]:data[0][this.nodeValue],
+						obj:value?value:data[0]
+					})
+				}
+				
+			},
+			handlerChange(e){
+				let arr=[...e.detail.value];
+				let pickVal=[arr[0]||0];
+				let data=this.range;
+				let cur=data[arr[0]];
+				let label="";
+				let value="";
+				this.$nextTick(()=>{
+					this.pickVal=pickVal;
+				});
+				this.$emit("change",{
+					result:cur[this.nodeKey],
+					value:cur[this.nodeValue],
+					obj:cur
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "./w-picker.css";
+</style>

components/w-picker/shortterm-picker.vue

@@ -0,0 +1,250 @@
+<template>
+	<view class="w-picker-view">
+		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.dates" :key="index">{{item.label}}</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item.label}}时</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item.label}}分</view>
+			</picker-view-column>
+		</picker-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pickVal:[],
+				range:{},
+				checkObj:{}
+			};
+		},
+		props:{
+			itemHeight:{
+				type:String,
+				default:"44px"
+			},
+			value:{
+				type:[String,Array,Number],
+				default:""
+			},
+			current:{//是否默认选中当前日期
+				type:Boolean,
+				default:false
+			},
+			expand:{
+				type:[Number,String],
+				default:30
+			}
+		},
+		watch:{
+			value(val){
+				this.initData();
+			}
+		},
+		created() {
+			this.initData();
+		},
+		methods:{
+			formatNum(n){
+				return (Number(n)<10?'0'+Number(n):Number(n)+'');
+			},
+			checkValue(value){
+				let strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/,example="2019-12-12 18:05:00或者2019-12-12 18:05";
+				if(!strReg.test(value)){
+					console.log(new Error("请传入与mode、fields匹配的value值，例value="+example+""))
+				}
+				return strReg.test(value);
+			},
+			resetData(year,month,day){
+				let curDate=this.getCurrenDate();
+				let curFlag=this.current;
+				let curYear=curDate.curYear;
+				let curMonth=curDate.curMonth;
+				let curDay=curDate.curDay;
+				let curHour=curDate.curHour;
+				let months=[],days=[],sections=[];
+				let disabledAfter=this.disabledAfter;
+				let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
+				let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
+				for(let month=1;month<=monthsLen;month++){
+					months.push(this.formatNum(month));
+				};
+				for(let day=1;day<=daysLen;day++){
+					days.push(this.formatNum(day));
+				}
+				return{
+					months,
+					days,
+					sections
+				}
+			},
+			getData(dVal){
+				//用来处理初始化数据
+				let curFlag=this.current;
+				let disabledAfter=this.disabledAfter;
+				let dates=[],hours=[],minutes=[];
+				let curDate=new Date();
+				let curYear=curDate.getFullYear();
+				let curMonth=curDate.getMonth();
+				let curDay=curDate.getDate();
+				let aDate=new Date(curYear,curMonth,curDay);
+				for(let i=0;i<this.expand*1;i++){
+					aDate=new Date(curYear,curMonth,curDay+i);
+					let year=aDate.getFullYear();
+					let month=aDate.getMonth()+1;
+					let day=aDate.getDate();
+					let label=year+"-"+this.formatNum(month)+"-"+this.formatNum(day);
+					switch(i){
+						case 0:
+							label="今天";
+							break;
+						case 1:
+							label="明天";
+							break;
+						case 2:
+							label="后天";
+							break
+					}
+					dates.push({
+						label:label,
+						value:year+"-"+this.formatNum(month)+"-"+this.formatNum(day)
+					})
+				};
+				for(let i=0;i<24;i++){
+					hours.push({
+						label:this.formatNum(i),
+						value:this.formatNum(i)
+					})
+				}
+				for(let i=0;i<60;i++){
+					minutes.push({
+						label:this.formatNum(i),
+						value:this.formatNum(i)
+					})
+				}
+				return {
+					dates,
+					hours,
+					minutes
+				}
+			},
+			getDefaultDate(){
+				let value=this.value;
+				let reg=/-/g;
+				let defaultDate=value?new Date(value.replace(reg,"/")):new Date();
+				let defaultYear=defaultDate.getFullYear();
+				let defaultMonth=defaultDate.getMonth()+1;
+				let defaultDay=defaultDate.getDate();
+				let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1;
+				return{
+					defaultDate,
+					defaultYear,
+					defaultMonth,
+					defaultDay,
+					defaultDays
+				}
+			},
+			getDval(){
+				let value=this.value;
+				let dVal=null;
+				let aDate=new Date();
+				let year=this.formatNum(aDate.getFullYear());
+				let month=this.formatNum(aDate.getMonth()+1);
+				let day=this.formatNum(aDate.getDate());
+				let date=this.formatNum(year)+"-"+this.formatNum(month)+"-"+this.formatNum(day);
+				let hour=aDate.getHours();
+				let minute=aDate.getMinutes();
+				if(value){
+					let flag=this.checkValue(value);
+					if(!flag){
+						dVal=[date,hour,minute]
+					}else{
+						let v=value.split(" ");
+						dVal=[v[0],...v[1].split(":")];
+					}
+				}else{
+					dVal=[date,hour,minute]
+				}
+				return dVal;
+			},
+			initData(){
+				let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
+				let dates=[],hours=[],minutes=[];
+				let dVal=[],pickVal=[];
+				let value=this.value;
+				let reg=/-/g;
+				let range={};
+				let result="",full="",date,hour,minute,obj={};
+				let defaultDate=this.getDefaultDate();
+				let defaultYear=defaultDate.defaultYear;
+				let defaultMonth=defaultDate.defaultMonth;
+				let defaultDay=defaultDate.defaultDay;
+				let defaultDays=defaultDate.defaultDays;
+				let curFlag=this.current;
+				let disabledAfter=this.disabledAfter;
+				let dateData=[];
+				dVal=this.getDval();
+				dateData=this.getData(dVal);
+				dates=dateData.dates;
+				hours=dateData.hours;
+				minutes=dateData.minutes;
+				pickVal=[
+					dates.findIndex(n => n.value == dVal[0])!=-1?dates.findIndex(n => n.value == dVal[0]):0,
+					hours.findIndex(n => n.value == dVal[1])!=-1?hours.findIndex(n => n.value == dVal[1]):0,
+					minutes.findIndex(n => n.value == dVal[2])!=-1?minutes.findIndex(n => n.value == dVal[2]):0,
+				];
+				range={dates,hours,minutes};
+				date=dVal[0]?dVal[0]:dates[0].label;
+				hour=dVal[1]?dVal[1]:hours[0].label;
+				minute=dVal[2]?dVal[2]:minutes[0].label;
+				result=full=`${date+' '+hour+':'+minute}`;
+				obj={
+					date,
+					hour,
+					minute
+				}
+				this.range=range;
+				this.checkObj=obj;
+				this.$nextTick(()=>{
+					this.pickVal=pickVal;
+				});
+				this.$emit("change",{
+					result:result,
+					value:full,
+					obj:obj
+				})
+			},
+			handlerChange(e){
+				let arr=[...e.detail.value];
+				let data=this.range;
+				let date="",hour="",minute="";
+				let result="",full="",obj={};
+				let disabledAfter=this.disabledAfter;
+				date=(arr[0]||arr[0]==0)?data.dates[arr[0]]||data.dates[data.dates.length-1]:"";
+				hour=(arr[1]||arr[1]==0)?data.hours[arr[1]]||data.hours[data.hours.length-1]:"";
+				minute=(arr[2]||arr[2]==0)?data.minutes[arr[2]]||data.minutes[data.minutes.length-1]:"";
+				result=full=`${date.label+' '+hour.label+':'+minute.label+':00'}`;
+				obj={
+					date,
+					hour,
+					minute
+				}
+				this.checkObj=obj;
+				this.$emit("change",{
+					result:result,
+					value:full,
+					obj:obj
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "./w-picker.css";
+</style>

components/w-picker/time-picker.vue

@@ -0,0 +1,218 @@
+<template>
+	<view class="w-picker-view">
+		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
+			</picker-view-column>
+			<picker-view-column>
+				<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
+			</picker-view-column>
+			<picker-view-column v-if="second">
+				<view class="w-picker-item" v-for="(item,index) in range.seconds" :key="index">{{item}}秒</view>
+			</picker-view-column>
+		</picker-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pickVal:[],
+				range:{},
+				checkObj:{}
+			};
+		},
+		props:{
+			itemHeight:{
+				type:String,
+				default:"44px"
+			},
+			value:{
+				type:[String,Array,Number],
+				default:""
+			},
+			current:{//是否默认选中当前日期
+				type:Boolean,
+				default:false
+			},
+			second:{
+				type:Boolean,
+				default:true
+			}
+		},
+		watch:{
+			value(val){
+				this.initData();
+			}
+		},
+		created() {
+			this.initData();
+		},
+		methods:{
+			formatNum(n){
+				return (Number(n)<10?'0'+Number(n):Number(n)+'');
+			},
+			checkValue(value){
+				let strReg=/^\d{2}:\d{2}:\d{2}$/,example="18:00:05";
+				if(!strReg.test(value)){
+					console.log(new Error("请传入与mode、fields匹配的value值，例value="+example+""))
+				}
+				return strReg.test(value);
+			},
+			resetData(year,month,day,hour,minute){
+				let curDate=this.getCurrenDate();
+				let curFlag=this.current;
+				let curHour=curDate.curHour;
+				let curMinute=curDate.curMinute;
+				let curSecond=curDate.curSecond;
+				for(let hour=0;hour<24;hour++){
+					hours.push(this.formatNum(hour));
+				}
+				for(let minute=0;minute<60;minute++){
+					minutes.push(this.formatNum(minute));
+				}
+				for(let second=0;second<60;second++){
+					seconds.push(this.formatNum(second));
+				}
+				return{
+					hours,
+					minutes,
+					seconds
+				}
+			},
+			getData(curDate){
+				//用来处理初始化数据
+				let hours=[],minutes=[],seconds=[];
+				let curFlag=this.current;
+				let disabledAfter=this.disabledAfter;
+				let fields=this.fields;
+				let curHour=curDate.curHour;
+				let curMinute=curDate.curMinute;
+				let curSecond=curDate.curSecond;
+				for(let hour=0;hour<24;hour++){
+					hours.push(this.formatNum(hour));
+				}
+				for(let minute=0;minute<60;minute++){
+					minutes.push(this.formatNum(minute));
+				}
+				for(let second=0;second<60;second++){
+					seconds.push(this.formatNum(second));
+				}
+				return this.second?{
+					hours,
+					minutes,
+					seconds
+				}:{
+					hours,
+					minutes
+				}
+			},
+			getCurrenDate(){
+				let curDate=new Date();
+				let curHour=curDate.getHours();
+				let curMinute=curDate.getMinutes();
+				let curSecond=curDate.getSeconds();
+				return this.second?{
+					curHour,
+					curMinute,
+					curSecond
+				}:{
+					curHour,
+					curMinute,
+				}
+			},
+			getDval(){
+				let value=this.value;
+				let fields=this.fields;
+				let dVal=null;
+				let aDate=new Date();
+				let hour=this.formatNum(aDate.getHours());
+				let minute=this.formatNum(aDate.getMinutes());
+				let second=this.formatNum(aDate.getSeconds());
+				if(value){
+					let flag=this.checkValue(value);
+					if(!flag){
+						dVal=[hour,minute,second]
+					}else{
+						dVal=value?value.split(":"):[];
+					}
+				}else{
+					dVal=this.second?[hour,minute,second]:[hour,minute]
+				}
+				return dVal;
+			},
+			initData(){
+				let curDate=this.getCurrenDate();
+				let dateData=this.getData(curDate);
+				let pickVal=[],obj={},full="",result="",hour="",minute="",second="";
+				let dVal=this.getDval();
+				let curFlag=this.current;
+				let disabledAfter=this.disabledAfter;
+				let hours=dateData.hours;
+				let minutes=dateData.minutes;
+				let seconds=dateData.seconds;
+				let defaultArr=this.second?[
+					dVal[0]&&hours.indexOf(dVal[0])!=-1?hours.indexOf(dVal[0]):0,
+					dVal[1]&&minutes.indexOf(dVal[1])!=-1?minutes.indexOf(dVal[1]):0,
+					dVal[2]&&seconds.indexOf(dVal[2])!=-1?seconds.indexOf(dVal[2]):0
+				]:[
+					dVal[0]&&hours.indexOf(dVal[0])!=-1?hours.indexOf(dVal[0]):0,
+					dVal[1]&&minutes.indexOf(dVal[1])!=-1?minutes.indexOf(dVal[1]):0
+				];
+				pickVal=disabledAfter?defaultArr:(curFlag?(this.second?[
+					hours.indexOf(this.formatNum(curDate.curHour)),
+					minutes.indexOf(this.formatNum(curDate.curMinute)),
+					seconds.indexOf(this.formatNum(curDate.curSecond)),
+				]:[
+					hours.indexOf(this.formatNum(curDate.curHour)),
+					minutes.indexOf(this.formatNum(curDate.curMinute))
+				]):defaultArr);
+				this.range=dateData;
+				this.checkObj=obj;
+				hour=dVal[0]?dVal[0]:hours[0];
+				minute=dVal[1]?dVal[1]:minutes[0];
+				if(this.second)second=dVal[2]?dVal[0]:seconds[0];
+				result=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute}`;
+				full=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute+':00'}`;
+				this.$nextTick(()=>{
+					this.pickVal=pickVal;
+				});
+				this.$emit("change",{
+					result:result,
+					value:full,
+					obj:obj
+				})
+			},
+			handlerChange(e){
+				let arr=[...e.detail.value];
+				let data=this.range;
+				let hour="",minute="",second="",result="",full="",obj={};
+				hour=(arr[0]||arr[0]==0)?data.hours[arr[0]]||data.hours[data.hours.length-1]:"";
+				minute=(arr[1]||arr[1]==0)?data.minutes[arr[1]]||data.minutes[data.minutes.length-1]:"";
+				if(this.second)second=(arr[2]||arr[2]==0)?data.seconds[arr[2]]||data.seconds[data.seconds.length-1]:"";
+				obj=this.second?{
+					hour,
+					minute,
+					second
+				}:{
+					hour,
+					minute
+				};
+				this.checkObj=obj;
+				result=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute}`;
+				full=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute+':00'}`;
+				this.$emit("change",{
+					result:result,
+					value:full,
+					obj:obj
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "./w-picker.css";	
+</style>
+

components/w-picker/w-picker.css

@@ -0,0 +1,26 @@
+.w-picker-flex2{
+	flex:2;
+}
+.w-picker-flex1{
+	flex:1;
+}
+.w-picker-view {
+	width: 100%;
+	height: 476upx;
+	overflow: hidden;
+	background-color: rgba(255, 255, 255, 1);
+	z-index: 666;
+}
+.d-picker-view{
+	height: 100%;
+}
+
+.w-picker-item {
+  text-align: center;
+  width: 100%;
+  height: 88upx;
+  line-height: 88upx;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 30upx;
+}

components/w-picker/w-picker.vue

@@ -0,0 +1,340 @@
+<template name="w-picker">
+	<view class="w-picker" :key="createKey" :data-key="createKey">
+		<view class="mask" :class="{'visible':visible}" @tap="onCancel" @touchmove.stop.prevent catchtouchmove="true"></view>
+		<view class="w-picker-cnt" :class="{'visible':visible}">
+			<view class="w-picker-header"  @touchmove.stop.prevent catchtouchmove="true">
+				<text @tap.stop.prevent="onCancel">取消</text>
+				<slot></slot>
+				<text :style="{'color':themeColor}" @tap.stop.prevent="pickerConfirm">确定</text>
+			</view>
+			<date-picker 
+				v-if="mode=='date'" 
+				class="w-picker-wrapper"
+				:startYear="startYear"
+				:endYear="endYear"
+				:value="value"
+				:fields="fields"
+				:item-height="itemHeight"
+				:current="current"
+				:disabled-after="disabledAfter"
+				@change="handlerChange"
+				@touchstart="touchStart" 
+				@touchend="touchEnd">
+			</date-picker>
+			
+			<range-picker
+				v-if="mode=='range'" 
+				class="w-picker-wrapper"
+				:startYear="startYear"
+				:endYear="endYear"
+				:value="value"
+				:item-height="itemHeight"
+				:current="current"
+				@change="handlerChange"
+				@touchstart="touchStart" 
+				@touchend="touchEnd">
+			</range-picker>
+			
+			<half-picker
+				v-if="mode=='half'" 
+				class="w-picker-wrapper"
+				:startYear="startYear"
+				:endYear="endYear"
+				:value="value"
+				:item-height="itemHeight"
+				:current="current"
+				:disabled-after="disabledAfter"
+				@change="handlerChange"
+				@touchstart="touchStart" 
+				@touchend="touchEnd">
+			</half-picker>
+			
+			<shortterm-picker
+				v-if="mode=='shortTerm'" 
+				class="w-picker-wrapper"
+				:startYear="startYear"
+				:endYear="endYear"
+				:value="value"
+				:item-height="itemHeight"
+				:current="current"
+				expand="60"
+				:disabled-after="disabledAfter"
+				@change="handlerChange"
+				@touchstart="touchStart" 
+				@touchend="touchEnd">
+			</shortterm-picker>
+			
+			<time-picker
+				v-if="mode=='time'"
+				class="w-picker-wrapper"
+				:value="value"
+				:item-height="itemHeight"
+				:current="current"
+				:disabled-after="disabledAfter"
+				:second="second"
+				@change="handlerChange"
+				@touchstart="touchStart" 
+				@touchend="touchEnd">
+			</time-picker>
+			
+			<selector-picker
+				v-if="mode=='selector'"
+				class="w-picker-wrapper"
+				:value="value"
+				:item-height="itemHeight"
+				:options="options"
+				:default-type="defaultType"
+				:default-props="defaultProps"
+				@change="handlerChange"
+				@touchstart="touchStart" 
+				@touchend="touchEnd">
+			</selector-picker>
+			
+			<region-picker
+				v-if="mode=='region'"
+				class="w-picker-wrapper"
+				:value="value"
+				:hide-area="hideArea"
+				:default-type="defaultType"
+				:item-height="itemHeight"
+				@change="handlerChange"
+				@touchstart="touchStart" 
+				@touchend="touchEnd">
+			</region-picker>
+			
+			<linkage-picker
+				v-if="mode=='linkage'"
+				class="w-picker-wrapper"
+				:value="value"
+				:options="options"
+				:level="level"
+				:default-type="defaultType"
+				:default-props="defaultProps"
+				:item-height="itemHeight"
+				@change="handlerChange"
+				@touchstart="touchStart" 
+				@touchend="touchEnd">
+			</linkage-picker>
+		</view>
+	</view>
+</template>
+
+<script>
+	import datePicker from "./date-picker.vue"
+	import rangePicker from "./range-picker.vue"
+	import halfPicker from "./half-picker.vue"
+	import shorttermPicker from "./shortterm-picker.vue"
+	import timePicker from "./time-picker.vue"
+	import selectorPicker from "./selector-picker.vue"
+	import regionPicker from "./region-picker.vue"
+	import linkagePicker from "./linkage-picker.vue"
+	export default {
+		name:"w-picker",
+		components:{
+			datePicker,
+			rangePicker,
+			halfPicker,
+			timePicker,
+			selectorPicker,
+			shorttermPicker,
+			regionPicker,
+			linkagePicker
+		},
+		props:{
+			mode:{
+				type:String,
+				default:"date"
+			},
+			value:{//默认值
+				type:[String,Array,Number],
+				default:""
+			},
+			current:{//是否默认显示当前时间，如果是，传的默认值将失效
+				type:Boolean,
+				default:false
+			},
+			themeColor:{//确认按钮主题颜色
+				type:String,
+				default:"#f5a200"
+			},
+			fields:{//日期颗粒度:year、month、day、hour、minute、second
+				type:String,
+				default:"date"
+			},
+			disabledAfter:{//是否禁用当前之后的日期
+				type:Boolean,
+				default:false
+			},
+			second:{//time-picker是否显示秒
+				type:Boolean,
+				default:true
+			},
+			options:{//selector,region数据源
+				type:[Array,Object],
+				default(){
+					return []
+				}
+			},
+			defaultProps:{//selector,linkagle字段转换配置
+				type:Object,
+				default(){
+					return{
+						label:"label",
+						value:"value",
+						children:"children"
+					}
+				}
+			},
+			defaultType:{
+				type:String,
+				default:"label"
+			},
+			hideArea:{//mode=region时，是否隐藏区县列
+				type:Boolean,
+				default:false
+			},
+			level:{
+				//多级联动层级，表示几级联动,区间2-4;
+				type:[Number,String],
+				default:2
+			},
+			timeout:{//是否开启点击延迟,当快速滚动 还没有滚动完毕点击关闭时得到的值是不准确的
+				type:Boolean,
+				default:false
+			},
+			expand:{//mode=shortterm 默认往后拓展天数
+				type:[Number,String],
+				default:30
+			},
+			startYear:{
+				type:[String,Number],
+				default:1970
+			},
+			endYear:{
+				type:[String,Number],
+				default:new Date().getFullYear()
+			},
+			visible:{
+				type:Boolean,
+				default:false
+			}
+		},
+		created() {
+			this.createKey=Math.random()*1000;
+		},
+		data() {
+			return {
+				itemHeight:`height: ${uni.upx2px(88)}px;`,
+				result:{},
+				confirmFlag:true
+			};
+		},
+		methods:{
+			touchStart(){
+				if(this.timeout){
+					this.confirmFlag=false;
+				}
+			},
+			touchEnd(){
+				if(this.timeout){
+					setTimeout(()=>{
+						this.confirmFlag=true;
+					},500)
+				}
+			},
+			handlerChange(res){
+				let _this=this;
+				this.result={...res};
+			},
+			show(){
+				this.$emit("update:visible",true);
+			},
+			hide(){
+				this.$emit("update:visible",false);
+			},
+			onCancel(res){
+				this.$emit("update:visible",false);
+				this.$emit("cancel");
+			},
+			pickerConfirm(){
+				if(!this.confirmFlag){
+					return;
+				};
+				this.$emit("confirm",this.result);
+				this.$emit("update:visible",false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.w-picker-item {
+	  text-align: center;
+	  width: 100%;
+	  height: 88upx;
+	  line-height: 88upx;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	  font-size: 30upx;
+	}
+	.w-picker{
+		z-index: 888;
+		.mask {
+		  position: fixed;
+		  z-index: 1000;
+		  top: 0;
+		  right: 0;
+		  left: 0;
+		  bottom: 0;
+		  background: rgba(0, 0, 0, 0.6);
+		  visibility: hidden;
+		  opacity: 0;
+		  transition: all 0.3s ease;
+		}
+		.mask.visible{
+			visibility: visible;
+			opacity: 1;
+		}
+		.w-picker-cnt {
+		  position: fixed;
+		  bottom: 0;
+		  left: 0;
+		  width: 100%;
+		  transition: all 0.3s ease;
+		  transform: translateY(100%);
+		  z-index: 3000;
+		  background-color: #fff;
+		}
+		.w-picker-cnt.visible {
+		  transform: translateY(0);
+		}
+		.w-picker-header{
+		  display: flex;
+		  align-items: center;
+		  padding: 0 30upx;
+		  height: 88upx;
+		  background-color: #fff;
+		  position: relative;
+		  text-align: center;
+		  font-size: 32upx;
+		  justify-content: space-between;
+		  border-bottom: solid 1px #eee;
+		  .w-picker-btn{
+		  	font-size: 30upx;
+		  }
+		}
+		
+		.w-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);
+		}
+	}
+</style>

pages.json

@@ -180,7 +180,30 @@
                 "enablePullDownRefresh": false
             }
             
-        }
+        },
+		{
+		    "path" : "pages/user/addCar/addCar",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "添加车辆",
+		        "enablePullDownRefresh": false
+		    }
+		    
+		},
+		{
+			"path": "pages/user/addCar/carModel",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/user/addCar/cailist",
+			"style": {
+				"navigationBarTitleText": "我的车库",
+				"navigationBarBackgroundColor": "#FFFFFF"
+			}
+		}
+		
     ],
 	"tabBar": {
 		"color": "#8a8a8a",

pages/user/addCar/addCar.vue

@@ -0,0 +1,480 @@
+<template>
+	<view class="content">
+
+		<!-- 填写车辆信息 -->
+		<view class="carMessage">
+
+			<view class="mesView">
+				<view class="leftTitle">车牌号</view>
+				<input class="plateNumber" placeholder-style="color:#999999" placeholder="请输入车牌号" disabled="true"
+					@tap="plateShow=true" v-model.trim="plateNo" />
+				<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow=false" />
+
+
+			</view>
+
+			<view class="mesView" @click="goCarModel()">
+				<view class="leftTitle">车型</view>
+				<view class="carModBtn noSelectColor" v-if="!carModelInfo.value">请选择车型</view>
+				<view class="carModBtn selectColor carMod" v-else>{{carModelInfo.value}}</view>
+				<image src="../../static/img/rightArrow.png" class="rightArrow"></image>
+			</view>
+
+			<view class="mesView">
+				<view class="leftTitle">购车时间</view>
+				<picker class="timeBtn" @change="bindChange" mode="date" :end="currentdate" :value="time">
+					<view class="uni-input selectColor" v-if="time">{{time}}</view>
+					<view class="uni-input noSelectColor" v-else>请选择您的购车时间</view>
+				</picker>
+				<image src="../../static/img/rightArrow.png" class="rightArrow"></image>
+			</view>
+
+			<view class="mesView">
+				<view class="leftTitle">行驶里程</view>
+				<input class="mileageInput selectColor" type="number" v-model="mileage" placeholder="请输入"
+					placeholder-style="color:#999999" />
+				<view class="kmStr">km</view>
+			</view>
+
+
+		</view>
+
+
+		<view class="bottomView">
+			<view class="saveCar" @click="saveCar()">
+				<image src="../../static/img/icon_tianjiacheliang.png" mode=""
+					style="width: 44rpx; height: 36rpx; margin-right: 10rpx;"></image>
+				<view>保存爱车</view>
+			</view>
+		</view>
+		<view>
+			<w-picker :visible.sync="visible" mode="selector" value="2" default-type="value"
+				:default-props="defaultProps" :options="sbPlate" @confirm="onConfirm($event,'selector')"
+				@cancel="onCancel" ref="selector"></w-picker>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import plateInput from "@/components/uni-plate-input/uni-plate-input.vue"
+	import wPicker from "@/components/w-picker/w-picker.vue";
+	export default {
+		components: {
+			plateInput,
+			wPicker
+		},
+
+		data() {
+			return {
+
+				plateNo: '',
+				plateShow: false,
+				carModelInfo: '',
+				time: '',
+				mileage: '',
+				carId: '',
+				isEditCar: false,
+				currentdate: '',
+				plate_type: '',
+				sbPlate: [],
+				visible: false,
+				defaultProps: {
+					"label": "value",
+					"value": "ids"
+				},
+				vin: '',
+			}
+		},
+		onLoad(opt) {
+			uni.removeStorageSync('carModelInfo');
+
+			this.getNowFormatDate();
+
+			console.log(opt);
+			this.isEditCar = opt.isEditCar
+			this.carId = opt.id
+			if (this.isEditCar == 'true') {
+
+				this.getEditData()
+				uni.setNavigationBarTitle({
+					title: '编辑爱车'
+				})
+			}
+		},
+		onShow() {
+			var carModelInfo = uni.getStorageSync("carModelInfo");
+			if (carModelInfo) {
+				this.carModelInfo = carModelInfo;
+			}
+		},
+		methods: {
+			onConfirm(e) {
+				console.log(e)
+				this.carModelInfo = e.obj
+			},
+			onCancel() {
+				this.visible = false
+			},
+			getNowFormatDate() {
+
+				var date = new Date();
+				var seperator1 = "-";
+				var year = date.getFullYear();
+				var month = date.getMonth() + 1;
+				var day = date.getDate();
+				if (month >= 1 && month <= 9) {
+					month = "0" + month;
+				}
+				if (day >= 0 && day <= 9) {
+					day = "0" + day;
+				}
+				var currentdate = year + seperator1 + month + seperator1 + day;
+				this.currentdate = currentdate;
+			},
+			getEditData() {
+				uni.showLoading({
+					title: '加载中'
+				})
+				var carModelInfo = {
+					carModelInfo: {
+
+					}
+				}
+				this.$http('worldKeepCar/worldHome/queryMyTMemberCarDetail', {
+					id: this.carId
+				}, 'GET').then(res => {
+					uni.hideLoading();
+					carModelInfo.carModelInfo.logo = res.data.brandLogo;
+					carModelInfo.carModelInfo.brand = res.data.brand;
+					carModelInfo.carModelInfo.carSeries = res.data.series;
+					carModelInfo.carModelInfo.displacement = res.data.displacement;
+					carModelInfo.carModelInfo.transmissionType = res.data.transmissionType;
+					carModelInfo.carModelInfo.productionYear = res.data.annualmoney;
+					carModelInfo.carModelInfo.carModel = res.data.carModel;
+					carModelInfo.carModelInfo.guidePrice = res.data.guidePrice;
+					carModelInfo.carModelInfo.engineModel = res.data.engineType;
+					carModelInfo.carModelInfo.nLevelID = res.data.nLevelID;
+					carModelInfo.carModelInfo.salesName = res.data.saleName;
+
+
+					// 展示时
+					this.plateNo = res.data.plateNumber;
+					carModelInfo.value = res.data.carModel;
+					if (res.data.acarTime) {
+						this.time = res.data.acarTime.slice(0, res.data.createTime.length - 8);
+					}
+					this.mileage = res.data.milage;
+
+					this.carModelInfo = carModelInfo;
+					this.vin = res.data.vIN
+
+					console.log('this carModelInfo', this.carModelInfo);
+				})
+			},
+			goCarModel() {
+				uni.navigateTo({
+					url: 'carModel'
+				})
+			},
+			setPlate(plate) {
+				console.log(plate)
+				if (plate.length >= 7) this.plateNo = plate;
+				this.plateShow = false;
+				if (plate.length == 7) {
+					this.plate_type = 2
+				} else {
+					this.plate_type = 52
+				}
+				this.queryCarmodelByPlateNumber()
+			},
+			queryCarmodelByPlateNumber() {
+				uni.showLoading({
+					title: '加载中'
+				})
+				this.$http('worldKeepCar/worldHome/queryCarmodelByPlateNumber', {
+					license_plate: this.plateNo,
+					plate_type: this.plate_type,
+
+				}, 'GET').then(res => {
+					uni.hideLoading();
+					console.log(res);
+					if (res.data) {
+						this.vin = res.data.vin
+						if (res.data.buyTime) {
+							this.time = res.data.buyTime.slice(0, res.data.buyTime.length - 8);
+						}
+
+					}
+					if (res.data.list && res.data.list.length > 0) {
+						this.sbPlate = res.data.list
+						//this.sbPlate=this.sbPlate.concat(this.sbPlate)
+						if (this.sbPlate.length == 1) {
+							//this.carModelInfo.value=res.data[0].value
+							this.carModelInfo = res.data.list[0]
+						} else {
+							this.visible = true
+						}
+					}
+
+				})
+			},
+
+			bindChange(e) {
+				console.log(e);
+				this.time = e.target.value
+			},
+
+			saveCar() {
+				uni.showLoading({
+					title: '保存中'
+				})
+				if (this.plateNo == '') {
+					uni.showToast({
+						title: '请填写车牌号',
+						icon: 'none',
+						duration: 3000
+					});
+					return false;
+				}
+				if (this.carModelInfo == '') {
+					uni.showToast({
+						title: '请选择车型',
+						icon: 'none',
+						duration: 3000
+					});
+					return false;
+				}
+				if (this.time == '') {
+					uni.showToast({
+						title: '请选择购车时间',
+						icon: 'none',
+						duration: 3000
+					});
+					return false;
+				}
+				if (this.mileage == '') {
+					uni.showToast({
+						title: '请输入行驶里程',
+						icon: 'none',
+						duration: 3000
+					});
+					return false;
+				}
+				if (this.isEditCar == 'true') {
+					this.updateTMemberCar()
+				} else {
+					this.addTMemberCar()
+				}
+
+			},
+
+			addTMemberCar() {
+				this.$http('worldKeepCar/worldHome/addTMemberCar', {
+					plateNumber: this.plateNo,
+					milage: this.mileage,
+					brand: this.carModelInfo.carModelInfo.brand,
+					displacement: this.carModelInfo.carModelInfo.displacement,
+					series: this.carModelInfo.carModelInfo.carSeries,
+					annualmoney: this.carModelInfo.carModelInfo.productionYear,
+					carModel: this.carModelInfo.value,
+					saleName: this.carModelInfo.carModelInfo.salesName,
+					transmissionType: this.carModelInfo.carModelInfo.transmissionType,
+					model: this.carModelInfo.carModelInfo.carModel,
+					nLevelID: this.carModelInfo.carModelInfo.nLevelID,
+					engineType: this.carModelInfo.carModelInfo.engineModel,
+					brandLogo: this.carModelInfo.carModelInfo.logo,
+					acarTime: this.time,
+					guidePrice: this.carModelInfo.carModelInfo.guidePrice,
+					vIN: this.vin,
+				}, 'POST').then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						uni.showToast({
+							title: '保存成功',
+							icon: 'none',
+							duration: 3000
+						});
+						uni.removeStorageSync('carModelInfo');
+						setTimeout(function() {
+							uni.navigateBack({
+
+							})
+						}, 3000);
+
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none',
+							duration: 3000
+						});
+					}
+
+				})
+			},
+			updateTMemberCar() {
+				this.$http('worldKeepCar/worldHome/updateTMemberCar', {
+					plateNumber: this.plateNo,
+					milage: this.mileage,
+					brand: this.carModelInfo.carModelInfo.brand,
+					displacement: this.carModelInfo.carModelInfo.displacement,
+					series: this.carModelInfo.carModelInfo.carSeries,
+					annualmoney: this.carModelInfo.carModelInfo.productionYear,
+					carModel: this.carModelInfo.value,
+					saleName: this.carModelInfo.carModelInfo.salesName,
+					transmissionType: this.carModelInfo.carModelInfo.transmissionType,
+					model: this.carModelInfo.carModelInfo.carModel,
+					nLevelID: this.carModelInfo.carModelInfo.nLevelID,
+					engineType: this.carModelInfo.carModelInfo.engineModel,
+					brandLogo: this.carModelInfo.carModelInfo.logo,
+					acarTime: this.time,
+					guidePrice: this.carModelInfo.carModelInfo.guidePrice,
+					vIN: this.vin,
+					id: this.carId,
+				}, 'POST').then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						uni.showToast({
+							title: '保存成功',
+							icon: 'none',
+							duration: 3000
+						});
+						uni.removeStorageSync('carModelInfo');
+						setTimeout(function() {
+							uni.navigateBack({
+
+							})
+						}, 3000);
+
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none',
+							duration: 3000
+						});
+					}
+
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+	.content {
+		min-height: 100vh;
+		background-color: #F4F5F7;
+		padding-top: 20rpx;
+	}
+
+
+
+	.carMessage {
+		margin: 0rpx 24rpx 40rpx;
+		padding-top: 20rpx;
+		height: 500rpx;
+		background-color: #FFFFFF;
+		border-radius: 10rpx;
+	}
+
+	.mesView {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 120rpx;
+		background-color: #FFFFFF;
+	}
+
+	.leftTitle {
+		margin: 28rpx;
+		width: 120rpx;
+		font-size: 28rpx;
+		color: #666666;
+	}
+
+
+	.noSelectColor {
+		color: #999999;
+
+	}
+
+	.selectColor {
+		color: #333333;
+
+	}
+
+	.carMod {
+		text-overflow: -o-ellipsis-lastline;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.rightArrow {
+		margin-right: 28rpx;
+		width: 14rpx;
+		height: 23rpx;
+
+	}
+
+	.cityBtn {
+		width: 65%;
+		font-size: 28rpx;
+	}
+
+	.plateNumber {
+		width: 55%;
+		font-size: 28rpx;
+	}
+
+
+	.carModBtn {
+		width: 65%;
+		font-size: 28rpx;
+	}
+
+	.timeBtn {
+		width: 65%;
+		font-size: 28rpx;
+	}
+
+	.mileageInput {
+		width: 20%;
+		font-size: 28rpx;
+	}
+
+	.kmStr {
+		font-size: 28rpx;
+		color: #333333;
+
+	}
+
+	.bottomView {
+		background-color: #FFFFFF;
+		width: 100%;
+		height: 120rpx;
+		position: fixed;
+		bottom: 0rpx;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.saveCar {
+
+		background: linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
+		margin: 23rpx 30rpx;
+		height: 74rpx;
+
+		border-radius: 37rpx;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		font-weight: bold;
+
+		align-items: center;
+		display: flex;
+		justify-content: center;
+	}
+</style>

pages/user/addCar/cailist.vue

@@ -0,0 +1,320 @@
+<template>
+	<view class="box">
+		<view class="carlistBox">
+			<view class="line" v-for="(item,index) in carList" @click="itemClick(item)">
+				<view class="lineCont">
+					<view>
+						<image :src="item.brandLogo" mode="widthFix" class="brandLogo"></image>
+					</view>
+					<view style="padding-left: 29rpx;">
+						<view class="carName">
+							<span>{{item.brand}} {{item.series}}</span>
+							<view class="plateNumber">{{item.plateNumber}}</view>
+						</view>
+						<view class="carMS">{{item.carModel}}</view>
+					</view>
+				</view>
+				<view class="lineBottom">
+					<view class="lineDel" @click.stop="delCar(item.id)">删除</view>
+					<view class="lineDel" @click.stop="editCar(item.id)">编辑</view>
+					<view class="Default" v-show="item.isDefault!=1" @click.stop="defaultCar(item)">设为默认</view>
+					<view class="DefaultYES" v-show="item.isDefault==1">已设为默认</view>
+				</view>
+				<view class="DefaultIcon" v-show="item.isDefault==1">默认</view>
+			</view>
+		</view>
+		<view v-if="carList==''&&loding" class="nodataBox">
+			<image src="../../static/img/nodata.png" mode="widthFix" class="nodataImg"></image>
+			<view class="noTxt">暂无数据</view>
+		</view>
+
+
+
+		<view class="bottomView">
+			<view class="saveCar" @click="addBtn">
+				<image src="../../static/img/icon_tianjiacheliang.png" mode=""
+					style="width: 44rpx; height: 36rpx; margin-right: 10rpx;"></image>
+				<view>添加爱车</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				carList: '',
+				loding: false,
+				type: '',
+				carId: '',
+				fromMe: false,
+			}
+		},
+		onLoad(opt) {
+			this.$common.isUserId()
+			this.type = opt.type;
+			// console.log(this.type)
+			this.fromMe = opt.fromMe
+		},
+		onShow() {
+			this.getqueryMyBMemberCar();
+			this.carId = uni.getStorageSync("maintainCarData").id
+		},
+		methods: {
+			getqueryMyBMemberCar() {
+				uni.showLoading({
+					title: '加载中'
+				})
+				this.loding = false;
+				this.$http('worldKeepCar/worldHome/queryMyTMemberCar', {
+
+				}, 'GET').then(res => {
+					uni.hideLoading();
+					this.carList = res.data;
+					this.loding = true;
+				})
+			},
+			addBtn() {
+				var length = this.carList.length
+				if (length > 4) {
+					uni.showToast({
+						title: '库最多放五辆车，如果想添加，请先删除',
+						icon: 'none',
+						duration: 3000
+					});
+				} else {
+					uni.navigateTo({
+						url: 'addCar'
+					})
+				}
+
+			},
+			editCar(id) {
+
+				uni.navigateTo({
+					url: 'addCar?id=' + id + '&isEditCar=true'
+				})
+			},
+			delCar(id) {
+				var that = this;
+				uni.showModal({
+					title: '提示',
+					content: '确定要删除车辆吗',
+					success: function(res) {
+						if (res.confirm) {
+							uni.showLoading({});
+							that.$http('worldKeepCar/worldHome/deleteTMemberCar', {
+								id: id
+							}, 'POST').then(res => {
+								uni.hideLoading();
+								if (res.code == 0) {
+									if (that.carId == id) {
+										uni.removeStorageSync('maintainCarData');
+									}
+								}
+								that.getqueryMyBMemberCar()
+							})
+						} else if (res.cancel) {
+
+						}
+					}
+				});
+			},
+			defaultCar(item) {
+				var that = this;
+				uni.showLoading({
+					title: '保存中'
+				})
+				that.$http('worldKeepCar/worldHome/updateTCarIsdefault', {
+					id: item.id
+				}, 'POST').then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						uni.showToast({
+							title: '操作成功',
+							icon: 'none',
+							duration: 3000
+						});
+
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none',
+							duration: 3000
+						});
+					}
+					that.getqueryMyBMemberCar()
+				})
+			},
+			itemClick(item) {
+				if (this.fromMe == 'true') {
+					return
+				}
+				uni.setStorage({
+					key: 'maintainCarData',
+					data: item,
+					success: function() {
+						uni.navigateBack({
+							delta: 1
+						})
+
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.box {
+		min-height: 100vh;
+		background: #F4F5F7;
+	}
+
+	.nodataImg {
+		width: 400rpx;
+		padding-top: 100rpx;
+	}
+
+	.noTxt {
+		font-size: 36rpx;
+		color: #999999;
+		padding-top: 50rpx;
+	}
+
+	.nodataBox {
+		text-align: center;
+	}
+
+	.bottomView {
+		background-color: #FFFFFF;
+		width: 100%;
+		height: 120rpx;
+		position: fixed;
+		bottom: 0rpx;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.saveCar {
+
+		background: linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
+		margin: 23rpx 30rpx;
+		height: 74rpx;
+
+		border-radius: 37rpx;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		font-weight: bold;
+
+		align-items: center;
+		display: flex;
+		justify-content: center;
+	}
+
+	.carlistBox {
+		padding-bottom: 120rpx;
+	}
+
+	.carlistBox {
+		padding: 24rpx;
+		padding-bottom: 120rpx;
+	}
+
+	.brandLogo {
+		width: 63rpx;
+	}
+
+	.line {
+		background: #FFFFFF;
+		padding: 27rpx 20rpx;
+		border-radius: 10rpx;
+		margin-bottom: 20rpx;
+		position: relative;
+	}
+
+	.lineCont {
+		display: flex;
+	}
+
+	.carName {
+		color: #3C3C3C;
+		font-size: 30rpx;
+		display: flex;
+	}
+
+	.plateNumber {
+		border-radius: 4px;
+		border: 1px solid #F19D01;
+		height: 32rpx;
+		line-height: 32rpx;
+		padding: 0 10rpx;
+		color: #F19D01;
+		font-size: 22rpx;
+		margin-left: 20rpx;
+		margin-top: 5rpx;
+
+	}
+
+	.carMS {
+		color: #666666;
+		font-size: 26rpx;
+		padding-top: 5px;
+	}
+
+	.lineBottom {
+		display: flex;
+		justify-content: flex-end;
+		padding-top: 20rpx;
+	}
+
+	.lineDel {
+		width: 94rpx;
+		height: 50rpx;
+		border-radius: 25rpx;
+		border: 1px solid #DDDDDD;
+		text-align: center;
+		line-height: 50rpx;
+		font-size: 26rpx;
+		color: #3C3C3C;
+		margin-right: 29rpx;
+	}
+
+	.Default {
+		width: 148rpx;
+		height: 50rpx;
+		border-radius: 25rpx;
+		border: 1px solid #FF4F00;
+		line-height: 50rpx;
+		text-align: center;
+		color: #FF4F00;
+		font-size: 26rpx;
+	}
+
+	.DefaultYES {
+		width: 148rpx;
+		height: 50rpx;
+		border-radius: 25rpx;
+		border: 1px solid #DDDDDD;
+		line-height: 50rpx;
+		text-align: center;
+		color: #999999;
+		font-size: 26rpx;
+	}
+
+	.DefaultIcon {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 109rpx;
+		height: 40rpx;
+		background: linear-gradient(131deg, #FFA72C 0%, #FF450F 100%);
+		border-radius: 0px 10rpx 0px 10rpx;
+		text-align: center;
+		line-height: 40rpx;
+		color: #FFFFFF;
+		font-size: 22rpx;
+	}
+</style>

pages/user/addCar/carModel.vue

@@ -0,0 +1,829 @@
+<template>
+	<view class="box">
+		
+		 <!-- 自定义头部 -->
+		<view class="zdyNav">
+			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+			<view class="zdyNavCont">
+				<view class="zdyNavContLeft">
+					<image src="../../static/img/baiheiback.png" mode="" class="baiheibackImg" @click="gofhj"></image>
+					<!-- <image src="../../static/img/chahao.png" mode="" class="gaunbiIMg" @click="goback"></image> -->
+				</view>
+				<view class="zdyNavContTitle">自主选车</view>
+				<view class="zdyNavContRight"></view>
+			</view>
+		</view>
+		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+		<view style="height: 44px;"></view>
+		
+		<!-- <view class="tab">
+			<view class="tabLine" :class="{activeTab:tabIndex==1}" @click="tabIndex=1">手动选车</view>
+			<view class="tabLine" :class="{activeTab:tabIndex==2}" @click="tabIndex=2">VIN识别</view>
+		</view> -->
+		
+		<view class="tab1 " v-if="tabIndex==1">
+			 <scroll-view  class="scroll-view" :scroll-into-view="toView" scroll-y="true" >
+				<view class="brand-select">
+					<template v-for="item in carModelList">
+					  <view :id="item['首字母']" v-if="item['首字母']!='热门'">
+						<view class="brand-select-title" :id="item['首字母']+'-model'">
+						  <h5 :class="{'brand-select-titleselect':item['首字母']==toView}">{{item['首字母']}}</h5>
+						</view>
+					   
+							<view class="brand-select-wrapper">
+								<a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
+								  <img :src="item2.logo" class="brand-select-item-icon">
+								  <span>{{item2.brand||item2.name}}</span>
+								</a>
+							</view>
+					   
+					  </view>
+					  <view :id="'rm'" v-if="item['首字母']=='热门'">
+						<view class="brand-select-title" :id="item['首字母']+'-model'">
+						  <h5 :class="{'brand-select-titleselect':item['首字母']==toView}">{{item['首字母']}}</h5>
+						</view>
+   
+							<view class="brand-select-wrapper">
+								<a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
+								  <img :src="item2.logo" class="brand-select-item-icon">
+								  <span>{{item2.brand||item2.name}}</span>
+								</a>
+							</view>
+					   
+					  </view>
+					</template>
+				 </view>
+	        </scroll-view >
+			<div class="fast-navigation">
+			  <a class="fast-navigation-sel" :class="{'select':item['首字母']==toView}" v-for="item in carModelList" @tap="bindToView(item)">{{item['首字母']}}</a>
+			</div>
+			
+		</view>
+		<uni-popup ref="popup" type="right" :mask-click="true">
+			<view class="popup-content" >
+				<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+				<view style="height: 44px;"></view>
+				<h3 class="carModel-nav-title cell-logo">
+				  <img :src="selectedCarBrand.logo" class="carModel-nav-title-img">
+				  <span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }}</span>
+				</h3>
+				<scroll-view class="brandList" scroll-y="true">
+					<view v-for="item in carSeriesList" :key="item.manufactor" >
+					  <h3 class="cell-item-title">{{ item.manufactor }}</h3>
+					  <span v-for="item2 in item.carSeries" :key="item2" :title="item2" class="span-cell" @click="selectCarFactory(item.manufactor,item2)" >{{item2}}</span>
+					</view>
+				</scroll-view>
+				
+			</view>
+		</uni-popup>
+		
+		<!-- 排量 -->
+		<view class="displacementListBox" v-show="displacementListShow">
+			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+			<view style="height: 44px;"></view>
+			<h3 class="carModel-nav-title">
+			  <img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
+			  <span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }} {{ carSeries }}</span>
+			</h3>
+			<scroll-view scroll-y="true" class="brandList">
+			  <view @click="selectDisplacement(item)" v-for="item in displacementList" class="displacementListLine" >
+			    {{item}}
+			  </view>
+			</scroll-view>
+		</view>
+		
+		<!-- 离合器 -->
+		<view class="carGroupListBox" v-show="carGroupListShow">
+			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+			<view style="height: 44px;"></view>
+			<h3 class="carModel-nav-title">
+			  <img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
+			  <span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }} {{ carSeries }}{{displacement}}</span>
+			</h3>
+			<scroll-view scroll-y="true" class="brandList">
+			  <view @click="goAddCar(item)" v-for="item in carGroupList" class="displacementListLine" >
+			    {{item.title}}
+			  </view>
+			</scroll-view>
+		</view>
+		<!-- 离合器 -->
+		
+		
+		<view class="tab2" v-if="tabIndex==2">
+			<view class="vinboxone" v-if="vinboxoneShow">
+				<view class="smvin">请扫描VIN</view>
+				<view class="smvin2">扫描时请保持环境光线充足不要反光</view>
+				<view class="sltp">
+					<!-- <image src="../../static/img/vin.png" mode="" class="sltpImg" ></image> --><!-- v-if="!vinImg" -->
+					<!-- <image :src="vinImg" mode="widthFix" class="vinImg" v-if="vinImg"></image> -->
+				</view>
+				<view class="vinSc" @click="scVinIMg">上传图片</view>
+			</view>
+			<view class="vinboxTwo" v-if="vinboxtwoShow">
+				 <view class="vinboxTwoTopFh" @click="vinboxtwoShow=false"> 返回扫描 </view>
+				<view class="vinboxTwoTopVIn">车辆识别代码：{{vin}}</view>
+				<view class="vinCxNum"> 共{{vinSbList.length}}条查询结果</view>
+				<view class="vinXzBox">
+					<!-- <view class="vinXzLine">
+					 <view class="vinXzLineCx">品牌+车系+排量+变速器描述</view>
+					 <image src="../../static/img/icon_checked.png" mode="" class="loginLogo"></image>
+					</view> -->
+					<view class="vinXzLine" v-for="(vinItem,vIndex) in vinSbList" @click="ckVin(vinItem,vIndex)">
+					 <view class="vinXzLineCx">{{vinItem.title}}</view>
+					 <view class="vinXzLineyk" v-if="vinIndex!=vIndex"></view>
+					<!-- <image src="../../static/img/icon_checked.png" mode="" v-if="vinIndex==vIndex" class="loginLogo"></image> -->
+					</view>
+					<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+				</view>
+			</view>
+			<view class="vinboxTwoBottom" v-if="vinboxtwoShow" :style="{bottom:iStatusBarHeight+'px'}">
+				<view class="shoudonng" @click="shoudong">都不是，手动选车</view>
+				<view class="qrcx" @click="qrcx">确认车型</view>
+			</view>
+			
+		</view>
+		
+		
+	</view>
+</template>
+
+	
+<script>
+
+export default {
+	 components: {  
+	       
+	 },
+	data() {
+		return {
+			carList:'',
+			tabIndex:1,
+			carModelList:'',
+			toView:'',
+			type:'right',
+			brand:'',
+			carSeriesList:'',
+			selectedCarBrand:'',
+			manufactor:'',
+			carSeries:'',
+			displacementList:'',
+			displacementListShow:false,
+			selectedCarSeries:'',
+			displacement:'',
+			carGroupList:'',
+			carGroupListShow:false,
+			type:'',
+			delId:'',
+			vinImg:'',
+			file:'',
+			vin:'',
+			vinboxoneShow:true,
+			vinboxtwoShow:false,
+			addNum:'',
+			iStatusBarHeight:'',
+			popupShow:false,
+			vinSbList:[],
+			vinIndex:0,
+			vincarModelInfo:'',
+		}
+	},
+	onLoad(opt) {
+	  this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+	  if(opt.type==2){
+		  this.type=2
+	  }
+	  if(opt.add){
+		  this.addNum=opt.add
+	  }
+	  this.delId=opt.delId;
+      this.queryCarModelGroupPackage();
+	},
+	methods: {
+		ckVin(vinItem,vIndex){
+			this.vinIndex=vIndex;
+			this.vincarModelInfo=vinItem
+		},
+		qrcx(){
+			this.goAddCar(this.vincarModelInfo)
+		},
+		shoudong(){
+			this.vinboxtwoShow=false;
+			this.tabIndex=1;
+		},
+		goback(){
+			uni.navigateBack({
+				delta:1
+			})
+		},
+		gofhj(){
+			if(this.carGroupListShow){
+				this.carGroupListShow=false
+			}else if(this.displacementListShow){
+				this.displacementListShow=false
+			}else if(this.popupShow){
+				this.popupShow=false
+				this.$refs.popup.close()
+			}else{
+				uni.navigateBack({
+					delta:1
+				})
+			}
+		},
+		scVinIMg(){
+			var that = this;
+			uni.chooseImage({
+				sourceType: ['album','camera'],
+				count:1, 
+				success: (chooseImageRes) => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					that.file=tempFilePaths[0]
+					 uni.uploadFile({
+				            url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
+				            filePath: tempFilePaths[0],
+				            name: 'file',
+				            formData: {
+				                'user': 'test'
+				            },
+				            success: (uploadFileRes) => {
+				                console.log(JSON.parse(uploadFileRes.data).data );
+								//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
+								that.vinImg=JSON.parse(uploadFileRes.data).data[0];
+								that.vinScanner()
+				            }
+				        });
+			
+					/* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
+						
+					}) */
+				}
+			});
+		},
+		vinScanner(){
+			uni.showLoading({
+				title:'正在识别中'
+			});
+			/* 
+			this.$http('miniAppMyBMemberCar/vinScanner', {
+			  photo:this.file,
+			
+			 },'POST').then(res => {
+				uni.hideLoading();
+				//this.carGroupList=res.data.carGroupList
+			}) */
+			var that=this;
+			uni.uploadFile({
+			       url: that.$request.baseUrl+'miniAppMyBMemberCar/vinScanner', 
+			       filePath: that.file,
+			       name: 'photo',
+			       formData: {
+			           'user': 'test'
+			       },
+			       success: (uploadFileRes) => {
+					   uni.hideLoading();
+			           console.log(JSON.parse(uploadFileRes.data) );
+					   if(JSON.parse(uploadFileRes.data).code==0){
+						   	that.vin = JSON.parse(uploadFileRes.data).data;
+							that.queryCarModelGroupByVin()
+					   }else{
+						   uni.showToast({
+						   	title: JSON.parse(uploadFileRes.data).msg,
+						   	icon: 'none',
+						   	duration: 2000,
+						   });
+					   }
+					   	
+			       }
+			   });
+		},
+		queryCarModelGroupByVin(){
+			uni.showLoading({ });
+			this.$http('miniAppMyBMemberCar/queryCarModelGroupByVin', {
+			  vin:this.vin,
+			
+			 },'GET').then(res => {
+				uni.hideLoading();
+				if(res.code!=0){
+					uni.showToast({
+						title: res.msg,
+						icon: 'none',
+						duration: 2000,
+					});
+				}else{
+					this.vinboxtwoShow=true
+					this.vinSbList=res.data;
+					this.vincarModelInfo=this.vinSbList[0]
+				}
+				
+			})
+			
+		},
+		goAddCar(item){
+			console.log(item)
+			var carModelInfo=item;
+			var that=this;
+			uni.setStorage({
+				key: 'carModelInfo',
+				data: carModelInfo,
+				success: function () {
+					
+					
+						uni.navigateBack({
+							delta:1
+						})
+					
+					 
+				}
+			}); 
+		},
+		selectBrand(item){
+			console.log(item)
+			this.selectedCarBrand=item;
+			this.$refs.popup.open("right")
+			this.popupShow=true;
+			this.brand=item.brand
+			this.getbrand()
+		},
+		selectCarFactory(manufactor,item){
+			this.manufactor=manufactor;
+			this.carSeries=item;
+			//this.selectedCarSeries=item
+			this.displacementListShow=true;
+			this.getdisplacementList()
+		},
+		selectDisplacement(item){
+			this.displacement=item;
+			this.carGroupListShow=true;
+			this.getmodelList();
+		},
+		getmodelList(){
+			uni.showLoading({
+				title: '加载中'
+			})
+			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
+			  brand:this.brand,
+			  manufactor:this.manufactor,
+			  carSeries:this.carSeries,
+			  displacement:this.displacement
+			 },'GET').then(res => {
+				uni.hideLoading();
+				this.carGroupList=res.data.carGroupList
+			})
+		},
+		getdisplacementList(){
+			uni.showLoading({
+				title: '加载中'
+			})
+			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
+			  brand:this.brand,
+			  manufactor:this.manufactor,
+			  carSeries:this.carSeries
+			 },'GET').then(res => {
+				uni.hideLoading();
+				this.displacementList=res.data.displacementList
+			})
+		},
+		queryCarModelGroupPackage(){
+			uni.showLoading({
+				title: '加载中'
+			})
+			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
+			  
+			 },'GET').then(res => {
+				uni.hideLoading();
+				this.carModelList=res.data.brands
+			})
+		},
+		bindToView(item){
+			console.log(item)
+			if(item['首字母']=='热门'){
+					this.toView ='rm'
+			}else{
+					this.toView = item['首字母']
+			}
+		
+			console.log(this.toView)
+			//this.scrollTop = 0
+		
+		},
+       /* login(){
+			uni.navigateTo({
+				url:'../login/login'
+			})
+		} */
+		close(){
+			this.$refs.popup.close()
+		},
+		getbrand(){
+			uni.showLoading({
+				title: '加载中'
+			})
+			this.$http('worldKeepCar/worldHome/queryCarModelGroupPackage', {
+			  brand:this.brand
+			 },'GET').then(res => {
+				uni.hideLoading();
+				this.carSeriesList=res.data.carSeriesList
+			})
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.box{
+		min-height: 100vh;
+		background:#F4F5F7 ;
+	}
+	.vinboxTwoTopFh{
+		font-size: 26rpx;
+	    padding: 30rpx 24rpx;
+		color: #3F90F7;
+	}
+	.vinboxTwoBottom{
+		width: 750rpx;
+		height: 120rpx;
+		background: #FFFFFF;
+		box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		display: flex;
+		justify-content: space-around;
+	}
+	.shoudonng{
+		width: 336rpx;
+		height: 74rpx;
+		border-radius: 37rpx;
+		border: 1px solid #FF4F00;
+		line-height: 74rpx;
+		text-align: center;
+		font-size: 30rpx;
+		color: #FF4F00;
+		margin-top: 23rpx;
+	}
+	.qrcx{
+		width: 336rpx;
+		height: 74rpx;
+		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
+		border-radius: 37rpx;
+		line-height: 74rpx;
+		text-align: center;
+		font-size: 30rpx;
+		color: #FFFFFF;
+			margin-top: 23rpx;
+	}
+	.vinXzBox{
+		padding-bottom: 120rpx;
+	}
+	.loginLogo{
+		width: 28rpx;
+		height: 28rpx;
+	}
+	.vinXzLineyk{
+		width: 24rpx;
+		height: 24rpx;
+		border: 2rpx solid #999999;
+		border-radius: 50%;
+	}
+	.vinXzLine{
+		padding: 30rpx 24rpx;
+		display: flex;
+		justify-content: space-between;
+		color: #3C3C3C;
+		font-size: 28rpx;
+		line-height: 28rpx;
+		border-bottom: 1px solid #DDDDDD;
+	}
+	.vinboxTwoTopVIn{
+		font-size: 28rpx;
+		color: #666666;
+		padding-left: 24rpx;
+		padding-bottom: 30rpx;
+	}
+	.zdyNav{
+		width: 100vw;
+		background: #FFFFFF;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1111111;
+	}
+	.zdyNavCont{
+		height: 44px;
+		font-size: 28rpx;
+		// font-weight: bold;
+		display: flex;
+		justify-content: space-between;
+		line-height: 44px;
+	}
+	.vinCxNum{
+		background: #F4F5F7;
+		font-size: 26rpx;
+		padding: 18rpx 24rpx;
+		color: #999999;
+	}
+	.baiheibackImg{
+		width: 70px;
+		height: 44px;
+	}
+	.gaunbiIMg{
+		width: 20px;
+		height: 20px;
+		padding: 12px;
+	}
+	.zdyNavContLeft{
+		
+	}
+	.zdyNavContTitle{
+		color: #000000;
+		font-size: 30rpx;
+		font-weight: bold;
+	}
+	.zdyNavContRight{
+		width: 100px;
+	}
+	.smvin{
+		color: #3C3C3C;
+		font-size: 30rpx;
+	}
+	.smvin2{
+		color: #999999;
+		font-size: 26rpx;
+	}
+	.tab2{
+		padding: 30rpx 24rpx;
+		min-height: calc(100vh - 150rpx - 44px);
+		background: #FFFFFF;
+		position: relative;
+	}
+	.vinboxTwo{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 750rpx;
+		min-height: calc(100vh - 150rpx - 44px);
+		background: #FFFFFF;
+	}
+	.sltpImg{
+		width: 704rpx;
+		height: 353rpx;
+	}
+	.vinImg{
+		width: 704rpx;
+	}
+	.sltp{
+		padding-top: 20rpx;
+	}
+	.vinSc{
+		width: 690rpx;
+		height: 74rpx;
+		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
+		border-radius: 37rpx;
+		text-align: center;
+		line-height: 74rpx;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		margin-top: 70rpx;
+	}
+	.nodataImg{
+	  width: 400rpx;
+	  padding-top: 100rpx;
+	}
+	.noTxt{
+		font-size: 36rpx;
+		color: #999999;
+		padding-top: 50rpx;
+	}
+	.nodataBox{
+		text-align: center;
+	}
+	.addBtn{
+		width: 690rpx;
+		height: 74rpx;
+		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
+		border-radius: 37rpx;
+		line-height: 74rpx;
+		text-align: center;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		position: fixed;
+		bottom: 23rpx;
+		left: 30rpx;
+	}
+	.carlistBox{
+		padding-bottom: 120rpx;
+	}
+	.tab{
+		background: #FFFFFF;
+		display: flex;
+		justify-content: space-around;
+		line-height: 93rpx;
+		color: #3C3C3C;
+		font-size: 30rpx;
+		border-bottom: 1px solid #F4F5F7;
+	}
+	.activeTab{
+		color: #FF4F00;text-decoration: underline
+	}
+	/* .brand-select-title{
+		height: 80px;
+		background:rgba(247,247,247,1);
+		position: relative;
+	} */
+	.brand-select{
+	  .brand-select-title{
+	    height: 80rpx;
+	    background:rgba(247,247,247,1);
+	    position: relative;
+	    h5{
+	      position: absolute;
+	      height:40rpx;
+	      font-size:28rpx;
+	      font-weight:500;
+	      color:rgba(102,102,102,1);
+	      line-height:40rpx;
+	      top: 20rpx;
+	      left: 30rpx;
+	    }
+	  }
+	  .brand-select-wrapper{
+	    display: flex;
+	    flex-wrap: wrap;
+	    background:rgba(255,255,255,1);
+		width: 100vw;
+	    .brand-select-item{
+	      display: block;
+	      width: 80rpx;
+	      height: 100rpx;
+	      padding: 30rpx;
+	      img{
+	        display: inline-block;
+	        margin-left: 10rpx;
+	        width: 60rpx;
+	        height: 60rpx;
+	      }
+	      span{
+	        display: inline-block;
+	        text-align: center;
+	        height:33rpx;
+	        width: 90rpx;
+	        font-size:24rpx;
+	        font-weight:400;
+	        color:rgba(51,51,51,1);
+	        line-height:33rpx;
+	      }
+	    }
+	
+	  }
+	}
+	.fast-navigation{
+	  position: fixed;
+	  text-align: center;
+	  right: 16rpx;
+	  top: 360rpx;
+	  width: 23rpx;
+	  font-size:24rpx;
+	  font-weight:500;
+	  line-height:35rpx;
+	  color: rgb(153, 153, 153);
+	  a{
+	    display: block;
+	  }
+	  .select{
+	    color: #FF4F00;
+	  }
+	}
+	.scroll-view{
+		height: calc(100vh - 93rpx);
+	}
+	.popup-height {
+	
+		width: 200px;
+	}
+	.popup-content{
+		width: 590rpx;
+		background: #FFFFFF;
+		height: 100vh;
+	}
+	.carModel-nav-title{
+	  height:100rpx;
+	  background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
+	  line-height: 100rpx;
+	  display: flex;
+	  z-index: 500;
+	  &.cell-logo{
+	    position: sticky;
+	    top: 0;
+	   background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
+	  }
+	  .carModel-nav-title-box{
+	    width: 100%;
+	    display: flex;
+	  }
+	  .carModel-nav-title-img{
+	    margin: 20rpx;
+	    width: 60rpx;
+	    height: 60rpx;
+	  }
+	  .carModel-nav-title-msg{
+	    font-size:30rpx;
+	    font-weight:400;
+	    color:rgba(255,255,255,1);
+	    display: block;
+	    padding-right: 20rpx;
+	  }
+	}
+	.cell-item-title{
+	  height:60rpx;
+	  background:rgba(250,250,250,1);
+	  font-size:28rpx;
+	  font-weight:400;
+	  color:rgba(102,102,102,1);
+	  line-height:60rpx;
+	  padding-left: 26rpx;
+	}
+	.span-cell{
+	  position: relative;
+	  display: -webkit-box;
+	  display: -webkit-flex;
+	  display: flex;
+	  box-sizing: border-box;
+	  width: 100%;
+	  padding: 6rpx 30rpx;
+	  overflow: hidden;
+	  color: #323233;
+	  font-size: 3.73333vw;
+	  line-height: 82rpx;
+	  height: 82rpx;
+	  background-color: #fff;
+	  border-bottom: 1px solid #ebedf0;
+	
+	}
+	.carModel-nav-title{
+	  height:100rpx;
+	 background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
+	 line-height: 100rpx;
+	  display: flex;
+	  z-index: 500;
+	  &.cell-logo{
+	    position: sticky;
+	    top: 0;
+	    background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
+	  }
+	  .carModel-nav-title-box{
+	    width: 100%;
+	    display: flex;
+	  }
+	  .carModel-nav-title-img{
+	    margin: 20rpx;
+	    width: 60rpx;
+	    height: 60rpx;
+	  }
+	  .carModel-nav-title-msg{
+	    font-size:30rpx;
+	    font-weight:400;
+	    color:rgba(255,255,255,1);
+	    display: block;
+	    padding-right: 20px;
+	  }
+	}
+	.displacementListLine{
+		min-height: 50rpx;
+		padding: 20rpx 20rpx 20rpx 30rpx;
+		font-size:28rpx;
+		font-weight:600;
+		color:rgba(51,51,51,1);
+		line-height:50rpx;
+		border-top: 2rpx solid rgb(238, 238, 238);
+		background-color: rgb(255, 255, 255);
+	}
+	.displacementListBox{
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background:#F4F5F7 ;
+		z-index: 11111;
+		/*  #ifdef H5 */
+		top:44px;
+		/*  #endif  */
+	}
+	.carGroupListBox{
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background:#F4F5F7 ;
+		z-index: 11111;
+		/*  #ifdef H5 */
+		top:44px;
+		/*  #endif  */
+	}
+	.brandList{
+		height: calc(100vh - 250rpx);
+	}
+	.brand-select-titleselect{
+		    color: #FF4F00 !important;
+	}
+</style>

pages/user/myOrder/mallOrderDetail.vue

@@ -519,7 +519,9 @@
 
 	.goodsName {
 		padding: 20rpx 20rpx 15rpx;
-		border-top: 1rpx solid #EEEEEE;
+		border-top: 1rpx solid #EEEEEE;
+		color: #333333;
+		font-size: 26rpx;
 	}
 
 	.informationNum {

pages/user/user.vue

@@ -111,7 +111,7 @@
 			</view>
 
 
-			<view class="rowBox" @click="gonavigateTo('')">
+			<view class="rowBox" @click="gonavigateTo('./addCar/cailist')">
 				<view class="leftView">
 					<image src="../../static/img/icon_me2.png" mode="" class="liftIcon"></image>
 					<view class="rowTitle">我的车库</view>
@@ -344,7 +344,6 @@
 		width: 100vw;
 		left: 0;
 
-
 	}