导入日期、时间、多级联动picker插件

品牌规格 品牌型号 接口对接 100%

take-order/components/w-picker/linkage-picker.vue

+<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>
+

take-order/components/w-picker/region-picker.vue

+<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>
+

take-order/components/w-picker/selector-picker.vue

+<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>

take-order/components/w-picker/shortterm-picker.vue

+<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>

take-order/components/w-picker/time-picker.vue

+<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>
+

take-order/components/w-picker/w-picker.css

+.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;
+}
\ No newline at end of file

take-order/components/w-picker/w-picker.vue

+<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>

take-order/pages.json

@@ -12,7 +12,6 @@
 				"navigationBarTitleText": "完工信息"
 			}
 		},
-			
 		
 		{
 			"path": "pages/take/index",
@@ -22,7 +21,6 @@
 		},
 		
 		
-		
 		{
 			"path": "pages/take/detail",
 			"style": {

take-order/pages/take/detail.vue

@@ -228,6 +228,9 @@
 				uni.navigateTo({
 					url: '/pages/take/finish'
 					+'?orderId='+this.orderId
+					+'&categoryId='+this.orderInfo.categoryId
+					+'&brandId='+this.orderInfo.brandId
+					+'&partnerCompanyId='+this.orderInfo.partnerCompanyId
 					+'&inGuaranteePeriod='+this.orderInfo.inGuaranteePeriod
 					+'&contactName='+this.orderInfo.contactName
 					+'&contactMobilephone='+this.orderInfo.contactMobilephone

take-order/pages/take/finish.vue

@@ -84,11 +84,39 @@
 				</view>
 			</template>
 		</view>
-		
 		<view class="bottomView" @click="confirmClick()">
 			<text class="bottomTitle whiteColor">确认完工</text>
 		</view>
+		<w-picker
+			:visible.sync="is_SPECIFICATIONS_picker_show"
+			mode="selector"
+			value=""
+			default-type="label"
+			:default-props="SPECIFICATIONS_defaultProps"
+			:options="SPECIFICATIONS_list"
+			@confirm="SPECIFICATIONSonConfirm($event,'selector')"
+			@cancel="SPECIFICATIONSonCancel"
+			ref="selector" 
+		></w-picker>
+		<w-picker
+			:visible.sync="is_PRODUCT_NUMBER_picker_show"
+			mode="selector"
+			value=""
+			default-type="label"
+			:default-props="PRODUCT_NUMBER_defaultProps"
+			:options="PRODUCT_NUMBER_list"
+			@confirm="PRODUCT_NUMBERonConfirm($event,'selector')"
+			@cancel="PRODUCT_NUMBERonCancel"
+			ref="selector" 
+		></w-picker>
+		<!--template>
+			<u-select v-model="is_SPECIFICATIONS_picker_show" mode="single-column" :list="list" @confirm="confirm"></u-select>
+		</template>
+		<view class="shadowBackView" v-if="is_SPECIFICATIONS_picker_show">
+			
+		</view-->
 	</view>
+	
 </template>
 
 <script>
@@ -97,6 +125,9 @@
 			return {
 				icon_arrow_right:'',
 				orderId:'',
+				categoryId:'',
+				brandId:'',
+				partnerCompanyId:'',
 				inGuaranteePeriod:false,
 				contactName:'',
 				contactMobilephone:'',
@@ -104,6 +135,24 @@
 				inGuaranteePeriodText:'',
 				orderServiceType:'',
 				orderInfo:{},
+				is_SPECIFICATIONS_picker_show:false,
+				result:{
+					result:""
+				},
+				SPECIFICATIONS_defaultProps:{
+					label:"specificationName",
+					value:"specificationId"
+				},
+				SPECIFICATIONS_list:[],
+				current_SPECIFICATIONS_specificationId:'',
+				is_PRODUCT_NUMBER_picker_show:false,
+				PRODUCT_NUMBER_defaultProps:{
+					label:"name",
+					value:"id"
+				},
+				PRODUCT_NUMBER_list:[],
+				current_PRODUCT_NUMBER_Id:'',
+				
 			}
 		},
 		onLoad(e) {
@@ -121,6 +170,18 @@
 					this.orderId = e.orderId
 				}
 				
+				if(e && e.categoryId){
+					this.categoryId = e.categoryId
+				}
+				
+				if(e && e.brandId){
+					this.brandId = e.brandId
+				}
+				
+				if(e && e.partnerCompanyId){
+					this.partnerCompanyId = e.partnerCompanyId
+				}
+				
 				if(e && e.inGuaranteePeriod){
 					this.inGuaranteePeriod = e.inGuaranteePeriod
 				}
@@ -150,6 +211,9 @@
 				///*
 				getApp().globalData.token = 'RTOKEN9336b56cffb3c2bafec54b3687f86c38bfaa364a'
 				this.orderId = '10704464'
+				this.categoryId = '88',
+				this.brandId = '1000000171',
+				this.partnerCompanyId = '1814',
 				this.inGuaranteePeriod = true
 				this.contactName = '小青一号'
 				this.contactMobilephone = '123123123123'
@@ -238,7 +302,7 @@
 				//开关类Cell
 				//服务措施 SERVICE_MEASURES
 				if(item.fieldsType == 'SERVICE_MEASURES'){
-					this.scanCode(item)
+					
 				}
 				
 				//点击类Cell
@@ -255,12 +319,12 @@
 				
 				//产品规格 SPECIFICATIONS：
 				if(item.fieldsType == 'SPECIFICATIONS'){
-					
+					this.getSPECIFICATIONSinfo()
 				}
 				
 				//产品型号 PRODUCT_NUMBER
 				if(item.fieldsType == 'PRODUCT_NUMBER'){
-					
+					this.getPRODUCT_NUMBERinfo()
 				}
 				
 				//机器条码 MACHINE_CODE
@@ -348,6 +412,143 @@
 			
 			},
 			
+			//http://system.banshouhui.com/wxh-worker-rest/rest/specification/RTOKEN513816878fd89281eceb1e13919b92bd6953a1b9/88
+			//获取 产品规格 数据
+			getSPECIFICATIONSinfo: function () {
+				uni.request({
+					url: getApp().globalData.domain_Name
+					+'/wxh-worker-rest/rest/specification/'
+					+getApp().globalData.token
+					+'/'+this.categoryId,
+					method: 'GET',
+					data: {
+						partnerCompanyId:this.partnerCompanyId,
+						serviceType:this.orderServiceType
+					},
+					header:{
+						'Content-Type': 'application/x-www-form-urlencoded',
+					},
+					success: (res) => {
+						uni.hideLoading()
+						console.log('获取 产品规格 成功')
+						console.log(res)
+						
+						if(res.statusCode==200){
+							
+							this.SPECIFICATIONS_list=res.data
+							this.is_SPECIFICATIONS_picker_show = true
+							
+						}else{
+							uni.showToast({
+								title:res.errMsg
+							})
+							
+							
+						}
+						
+						
+					},
+					fail: (e) => {
+						uni.hideLoading()
+						console.log('获取 产品规格 失败')
+						console.log(e)
+					}
+				})
+			},
+			
+			//产品规格 确认选择
+			SPECIFICATIONSonConfirm(res,type){
+				this.result=res;
+				console.log('产品规格 确认选择')
+				console.log(res.result)
+				console.log(res.value)
+				
+				//产品规格Id 
+				this.current_SPECIFICATIONS_specificationId = res.value
+				this.updateInfo('','SPECIFICATIONS',res.result)
+				//currentIndex,currentType,newValue
+				/*
+				"fieldsOptions":"{\"specificationId\":10006,\"specificationName\":\"变频3P\"}","sort":2}
+				*/
+				     
+				
+			},
+			
+			//产品规格 取消选择
+			SPECIFICATIONSonCancel(){
+				console.log('产品规格 取消选择')
+			},
+			
+			//http://system.banshouhui.com/wxh-sts-rest/rest/productinfo/category/88/brand/320/product
+			//http://192.168.1.22/wxh-sts-rest/rest/productinfo/category/88/brand/3897/product
+			//getApp().globalData.domain_Name
+			//
+			//获取 产品型号 数据
+			getPRODUCT_NUMBERinfo: function () {
+				uni.request({
+					url: 'http://192.168.1.22'
+					+'/wxh-sts-rest/rest/productinfo/category/'
+					+this.categoryId
+					+'/brand/'+this.brandId
+					+'/product',
+					method: 'GET',
+					data: {
+						
+					},
+					header:{
+						'Content-Type': 'application/x-www-form-urlencoded',
+					},
+					success: (res) => {
+						uni.hideLoading()
+						console.log('获取 产品型号 成功')
+						console.log(res)
+						
+						if(res.statusCode==200){
+							this.PRODUCT_NUMBER_list = res.data
+							this.is_PRODUCT_NUMBER_picker_show = true
+						}else{
+							uni.showToast({
+								title:res.errMsg
+							})
+							
+							
+						}
+						
+						
+					},
+					fail: (e) => {
+						uni.hideLoading()
+						console.log('获取 产品型号 失败')
+						console.log(e)
+					}
+				})
+			},
+			
+			//产品型号 确认选择
+			PRODUCT_NUMBERonConfirm(res,type){
+				this.result=res;
+				console.log('产品型号 确认选择')
+				console.log(res.result)
+				console.log(res.value)
+				
+				//产品型号Id 
+				this.current_PRODUCT_NUMBER_Id = res.value
+				this.updateInfo('','PRODUCT_NUMBER',res.result)
+				
+				//currentIndex,currentType,newValue
+				/*
+				"fieldsOptions":"{\"specificationId\":10006,\"specificationName\":\"变频3P\"}","sort":2}
+				*/
+				     
+				
+			},
+			
+			//产品型号 取消选择
+			PRODUCT_NUMBERSonCancel(){
+				console.log('产品型号 取消选择')
+			},
+			
+			//机身条码
 			scanCode: function (item,ikey) {
 				let that = this
 				uni.scanCode({
@@ -410,7 +611,7 @@
 				
 			},
 			
-			
+			//更新完工信息
 			updateInfo: function (currentIndex,currentType,newValue) {
 				console.log('更新的选项：')
 				console.log(currentIndex)
@@ -420,13 +621,32 @@
 				{ 
 				    var item = this.orderInfo.fieldsItems[i]
 					
-					if(item.fieldsType == currentType && i == currentIndex){
+					//产品规格单独判断
+					if (item.fieldsType == 'SPECIFICATIONS' 
+					&& currentType == 'SPECIFICATIONS'){
+						item.fieldsValue = newValue
+						console.log('产品规格单独判断')
+						break
+					}
+					
+					//产品型号单独判断
+					if (item.fieldsType == 'PRODUCT_NUMBER' 
+					&& currentType == 'PRODUCT_NUMBER'){
+						item.fieldsValue = newValue
+						console.log('产品型号单独判断')
+						break
+					}
+					
+					
+					if(item.fieldsType == currentType 
+					&& i == currentIndex){
 						console.log('处理前 的 选项内容：')
 						console.log(item.fieldsValue)
 						
 						item.fieldsValue = newValue
 						console.log('处理后 的  选项内容：')
 						console.log(item.fieldsValue)
+						break
 					}
 					
 				}
@@ -806,6 +1026,17 @@
 		color: #FFFFFF;
 	}
 	
+	.shadowBackView{
+		background-color: rgba(0,0,0,0.5);
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	
 
 	
 	

take-order/pages/w-picker-demo/date.vue

+<template>
+	<view>
+		<view class="item" @tap="dateVisible1=true">日期1</view>
+		<view class="item" @tap="dateVisible2=true">日期2</view>
+		<view class="item" @tap="dateVisible3=true">日期3</view>
+		<view class="result">选择结果：{{result.result}}</view>
+		
+		<w-picker
+			:visible.sync="dateVisible1"
+			mode="date" 
+			startYear="2017" 
+			endYear="2029"
+			value="2020-04-08 16:45:45"
+			:current="false"
+			fields="second"
+			@confirm="onConfirm($event,'date1')"
+			@cancel="onCancel"
+			:disabled-after="false"
+			ref="date1"
+		></w-picker>
+		<w-picker
+			:visible.sync="dateVisible2"
+			mode="date" 
+			startYear="2017" 
+			endYear="2029"
+			value="2020-03-07 16:45:45"
+			:current="false"
+			fields="second"
+			@confirm="onConfirm($event,'date2')"
+			@cancel="onCancel"
+			:disabled-after="false"
+			ref="date2"
+		></w-picker>
+		<w-picker
+			:visible.sync="dateVisible3"
+			mode="date" 
+			startYear="2017" 
+			endYear="2029"
+			value="2018-11-07 16:25:45"
+			:current="false"
+			fields="second"
+			@confirm="onConfirm($event,'date3')"
+			@cancel="onCancel"
+			:disabled-after="false"
+			ref="date3"
+		></w-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dateVisible1:false,
+				dateVisible2:false,
+				dateVisible3:false,
+				result:{
+					result:""
+				}
+			};
+		},
+		methods:{
+			onConfirm(res,type){
+				this.result=res;
+				console.log(res)
+			},
+			onCancel(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

take-order/pages/w-picker-demo/half.vue

+<template>
+	<view>
+		<view class="item"  @tap="halfVisible=true">上下午</view>
+		<view class="result">选择结果：{{result.result}}</view>
+		
+		<w-picker
+			:visible.sync="halfVisible"
+			mode="half" 
+			startYear="2017" 
+			endYear="2030"
+			value="2018-02-11 下午"
+			:current="true"
+			@confirm="onConfirm($event,'half')"
+			@cancel="onCancel"
+			:disabled-after="false"
+			ref="half" 
+		></w-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				halfVisible:false,
+				result:{
+					result:""
+				}
+			};
+		},
+		methods:{
+			onConfirm(res,type){
+				this.result=res;
+				console.log(res)
+			},
+			onCancel(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

take-order/pages/w-picker-demo/linkage.vue

+<template>
+	<view>
+		<view class="item" @tap="linkageVisible=true">自定义多级联动</view>
+		<view class="result">选择结果：{{result.result}}</view>
+		
+		<w-picker
+			:visible.sync="linkageVisible"
+			mode="linkage"
+			:value="defaultRegion1"
+			:options="options"
+			:level="4"
+			default-type="id"
+			:default-props="defaultProps1"
+			@confirm="onConfirm($event,'linkage')"
+			@cancel="onCancel"
+			ref="linkage" 
+		></w-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				linkageVisible:false,
+				result:{
+					result:""
+				},
+				defaultProps1:{
+					label:"name",
+					value:"id",
+					children:"child"
+				},
+				defaultRegion1:["120000","120100","120101","12010102"],
+				options:[
+					{
+						id: '110000',
+						name: '北京市',
+						child: [{
+							id: "110100",
+							name: "北京市",
+							child: [{
+								id: "110101",
+								name: "东城区",
+								child:[{
+									id: "11010101",
+									name: "小区1",
+								},{
+									id: "11010102",
+									name: "小区2",
+								}]
+							}, {
+								id: "110102",
+								name: "西城区"
+							},{
+								id: "110105",
+								name: "朝阳区"
+							}, {
+								id: "110106",
+								name: "丰台区"
+							}, {
+								id: "110107",
+								name: "石景山区"
+							}, {
+								id: "110108",
+								name: "海淀区"
+							}, {
+								id: "110109",
+								name: "门头沟区"
+							}, {
+								id: "110111",
+								name: "房山区"
+							}, {
+								id: "110112",
+								name: "通州区"
+							}, {
+								id: "110113",
+								name: "顺义区"
+							}, {
+								id: "110114",
+								name: "昌平区"
+							}, {
+								id: "110115",
+								name: "大兴区"
+							}, {
+								id: "110116",
+								name: "怀柔区"
+							}, {
+								id: "110117",
+								name: "平谷区"
+							}, {
+								id: "110118",
+								name: "密云区"
+							}, {
+								id: "110119",
+								name: "延庆区"
+							}]
+						}]
+					}, {
+						id: '120000',
+						name: '天津市',
+						child: [{
+							id: "120100",
+							name: "天津市",
+							child: [{
+								id: "120101",
+								name: "和平区",
+								child:[{
+									id: "12010101",
+									name: "小区3",
+								},{
+									id: "12010102",
+									name: "小区4",
+								}]
+							}, {
+								id: "120102",
+								name: "河东区"
+							}, {
+								id: "120103",
+								name: "河西区"
+							}, {
+								id: "120104",
+								name: "南开区"
+							}, {
+								id: "120105",
+								name: "河北区"
+							}, {
+								id: "120106",
+								name: "红桥区"
+							}, {
+								id: "120110",
+								name: "东丽区"
+							}, {
+								id: "120111",
+								name: "西青区"
+							}, {
+								id: "120112",
+								name: "津南区"
+							}, {
+								id: "120113",
+								name: "北辰区"
+							}, {
+								id: "120114",
+								name: "武清区"
+							}, {
+								id: "120115",
+								name: "宝坻区"
+							}, {
+								id: "120116",
+								name: "滨海新区"
+							}, {
+								id: "120117",
+								name: "宁河区"
+							}, {
+								id: "120118",
+								name: "静海区"
+							}, {
+								id: "120119",
+								name: "蓟州区"
+							}]
+						}]
+					}
+				]
+			};
+		},
+		methods:{
+			onConfirm(res){
+				this.result=res;
+				console.log(res)
+			},
+			onCancel(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

take-order/pages/w-picker-demo/range.vue

+<template>
+	<view>
+		<view class="item" @tap="rangeVisible=true">日期区间</view>
+		<view class="result">选择结果：{{result.result}}</view>
+		
+		<w-picker
+			:visible.sync="rangeVisible"
+			mode="range" 
+			startYear="2017" 
+			endYear="2030"
+			:value="rangeVal"
+			:current="true"
+			@confirm="onConfirm($event,'range')"
+			@cancel="onCancel"
+			ref="range" 
+		></w-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				rangeVisible:false,
+				result:{
+					result:""
+				},
+				rangeVal:['2018-12-12','2020-04-02']
+			};
+		},
+		methods:{
+			onConfirm(res,type){
+				this.result=res;
+				console.log(res)
+			},
+			onCancel(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

take-order/pages/w-picker-demo/region.vue

+<template>
+	<view>
+		<view class="item" @tap="regionVisible=true">省市区三级联动</view>
+		<view class="result">选择结果：{{result.result}}</view>
+		
+		<w-picker
+			:visible.sync="regionVisible"
+			mode="region"
+			:value="defaultRegion"
+			default-type="value"
+			:hide-area="false"
+			@confirm="onConfirm($event,'region')"
+			@cancel="onCancel"
+			ref="region" 
+		></w-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				regionVisible:false,
+				result:{
+					result:""
+				},
+				defaultRegion:["150000","150100","150103"]
+			};
+		},
+		methods:{
+			onConfirm(res){
+				this.result=res;
+				console.log(res)
+			},
+			onCancel(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

take-order/pages/w-picker-demo/selector.vue

+<template>
+	<view>
+		<view class="item" @tap="selectorVisible=true">单列选择</view>
+		<view class="result">选择结果：{{result.result}}</view>
+		<w-picker
+			:visible.sync="selectorVisible"
+			mode="selector"
+			value="女"
+			default-type="name"
+			:default-props="defaultProps"
+			:options="selectorList"
+			@confirm="onConfirm($event,'selector')"
+			@cancel="onCancel"
+			ref="selector" 
+		></w-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				selectorVisible:false,
+				result:{
+					result:""
+				},
+				defaultProps:{
+					label:"name",
+					value:"id"
+				},
+				selectorList:[
+					{
+						name:"男",
+						id:"1"
+					},{
+						name:"女",
+						id:"2"
+					}
+				]
+			};
+		},
+		methods:{
+			onConfirm(res,type){
+				this.result=res;
+				console.log(res)
+			},
+			onCancel(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

take-order/pages/w-picker-demo/shortTerm.vue

+<template>
+	<view>
+		<view class="item" @tap="shortTermVisible=true">短期日期时间</view>
+		<view class="result">选择结果：{{result.result}}</view>
+		
+		<w-picker
+			:visible.sync="shortTermVisible"
+			mode="shortTerm"
+			value="2020-04-08 13:18:00"
+			:current="true"
+			expand="60"
+			@confirm="onConfirm($event,'shortTerm')"
+			@cancel="onCancel"
+			ref="shortTerm" 
+		></w-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				shortTermVisible:false,
+				result:{
+					result:""
+				}
+			};
+		},
+		methods:{
+			onConfirm(res,type){
+				this.result=res;
+				console.log(res)
+			},
+			onCancel(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

take-order/pages/w-picker-demo/time.vue

+<template>
+	<view>
+		<view class="item" @tap="timeVisible=true">选择时间</view>
+		<view class="result">选择结果：{{result.result}}</view>
+		<w-picker
+			:visible.sync="timeVisible"
+			mode="time" 
+			value="18:08:05"
+			:current="true"
+			:second="false"
+			@confirm="onConfirm"
+			@cancel="onCancel"
+			ref="time" 
+		></w-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				timeVisible:false,
+				result:{
+					result:""
+				}
+			};
+		},
+		methods:{
+			onConfirm(res){
+				this.result=res;
+				console.log(res)
+			},
+			onCancel(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

take-order/pages/w-picker-demo/w-picker-demo.vue

+<template>
+	<view class="w-picker-demo">
+		<view class="item" @tap="navLink('date')">日期</view>
+		<view class="item" @tap="navLink('time')">时间</view>
+		<view class="item" @tap="navLink('selector')">单列选择</view>
+		<view class="item" @tap="navLink('half')">上下午</view>
+		<view class="item" @tap="navLink('shortTerm')">短期日期时间</view>
+		<view class="item" @tap="navLink('range')">日期区间</view>
+		<view class="item" @tap="navLink('region')">省市区三级联动</view>
+		<view class="item" @tap="navLink('linkage')">自定义多级联动</view>
+	</view>
+</template>
+
+
+<script>
+	import wPicker from "@/components/w-picker/w-picker.vue"
+	export default {
+		components:{
+			wPicker
+		},
+		data() {
+			return {
+				selectorList1:[],
+				rangeVal:['2018-12-12','2020-04-02']
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			navLink(page){
+				uni.navigateTo({
+					url:`/pages/w-picker-demo/${page}`
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.w-picker-demo{
+		padding:30rpx 0;
+		text-align: center;
+	}
+</style>