多个类型使用一个组件

src/components/createCom/XhInput - 副本.vue

+<!-- *******************  输入框  *******************  -->
+<template>
+	<view>
+		<u-input v-model="dataValue" @input="valueChange" :type="type" />
+	</view>
+</template>
+
+<script>
+	import stringMixin from './stringMixin'
+	export default {
+		name: 'XhInput', // 新建 input
+		components: {},
+		mixins: [stringMixin],
+		props: {},
+		data() {
+			return {}
+		},
+		computed: {
+			type() {
+				if (this.item && this.item.fieldsType == 'password') {
+					return this.item.fieldsType
+				} else {
+					return 'text'
+				}
+			}
+		},
+		watch: {},
+		mounted() {},
+		methods: {}
+	}
+</script>
+
+<style>
+</style>

src/components/createCom/XhPicker.vue

@@ -32,7 +32,7 @@
 		filters:{},
 		data() {
 			return {
-				showPicker:true,
+				showPicker:false,
 				settings:[
 					[1, 2, 3], 
 					[4, 5, 6]

src/pages/order/complete.vue

@@ -24,40 +24,39 @@
 							<view class="class-bd">
 								<u-form-item v-for="(item,itemIndex) in groupItem.item" :key="itemIndex"
 									label-position="top" :prop="item.fieldsName">
-									<view class="label" v-if="toLowerCase(item.fieldsType)!=='location'"
-										@click="nextStep(item)">
+									<view class="label" v-if="item.fieldsType!=='location'">
 										<text class="required" v-if="item.required">*</text>
 										{{item.fieldsTitle}}
 									</view>
 									<template v-if="item.fieldsType">
-										<xh-input v-if="['text','number'].indexOf(item.fieldsType)>=0" :groupIndex="groupIndex"
+										<xh-input v-if="typeToComponentType(item.fieldsType)==='input'" :groupIndex="groupIndex"
 											:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
 										</xh-input>
-										<xh-radio v-else-if="toLowerCase(item.fieldsType)==='radio'"
+										<xh-radio v-else-if="typeToComponentType(item.fieldsType)==='radio'"
 											:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
 											@value-change="fieldValueChange">
 										</xh-radio>
-										<xh-checkbox v-else-if="toLowerCase(item.fieldsType)==='checkbox'"
+										<xh-checkbox v-else-if="typeToComponentType(item.fieldsType)==='checkbox'"
 											:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
 											@value-change="fieldValueChange">
 										</xh-checkbox>
-										<xh-select v-else-if="toLowerCase(item.fieldsType)==='select'"
+										<xh-select v-else-if="typeToComponentType(item.fieldsType)==='select'"
 											:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
 											@value-change="fieldValueChange">
 										</xh-select>
-										<xh-files v-else-if="toLowerCase(item.fieldsType)==='file'"
+										<xh-files v-else-if="typeToComponentType(item.fieldsType)==='file'"
 											:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
 											@value-change="fieldValueChange">
 										</xh-files>
-										<xh-location v-else-if="toLowerCase(item.fieldsType)==='location'"
+										<xh-location v-else-if="typeToComponentType(item.fieldsType)==='location'"
 											:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
 											@value-change="fieldValueChange">
 										</xh-location>
-										<xh-scan v-else-if="toLowerCase(item.fieldsType)==='scan'"
+										<xh-scan v-else-if="typeToComponentType(item.fieldsType)==='scan'"
 											:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
 											@value-change="fieldValueChange">
 										</xh-scan>
-										<xh-picker v-else-if="toLowerCase(item.fieldsType)==='mutipicker'"
+										<xh-picker v-else-if="typeToComponentType(item.fieldsType)==='picker'"
 											:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
 											@value-change="fieldValueChange">
 										</xh-picker>
@@ -172,16 +171,41 @@
 				// 下一步
 				console.log(item, 'item')
 			},
-			fieldTypeStatus(type) {
-				let typeArr = ['input', 'radio', 'checkbox', 'select', 'file']
-				let fieldsType = type.toLocaleLowerCase()
-				let flag = false
-				flag = typeArr.indexOf(fieldsType) >= 0
-				return flag
-			},
-			toLowerCase(str) {
-				str = str || ''
-				return str.toLocaleLowerCase()
+			typeToComponentType(type) {
+				// 将fieldType类型统一转换为公共组件判定类型
+				let formType = ''
+				type = type.toLocaleLowerCase()
+				switch (type) {
+					case 'text':
+					case 'password':
+					case 'textarea':
+					case 'number':
+						formType = 'input'
+						break
+					case 'select':
+						formType = 'select'
+						break
+					case 'checkbox':
+						formType = 'checkbox'
+						break
+					case 'file':
+						formType = 'file'
+						break
+					case 'location':
+						formType = 'location'
+						break
+					case 'scan':
+						formType = 'scan'
+						break
+					case 'picker':
+					case 'mutipicker':
+						formType = 'picker'
+						break
+					// case 'file':
+					// 	formType = 'XhFiles'
+					// 	break
+				}
+				return formType
 			},
 			// ------------------------- 以下方法为展示滚动切换 -------------------------
 			// 点击左边的栏目切换