表单初始化

src/common/classify.data.js

@@ -4,13 +4,16 @@ export default[
       "item": [
           {
             "fieldsTitle": "A字裙",
+			"fieldsName":"name",
 			"fieldsType":"input",
+			"fieldsValue":"",
             "key": "A字裙",
             "icon": "https://cdn.uviewui.com/uview/common/classify/1/1.jpg",
             "cat": 10
           },
           {
 			"fieldsTitle": "T恤",
+			"fieldsName":"number",
 			"fieldsType":"input",
             "key": "T恤",
             "icon": "https://cdn.uviewui.com/uview/common/classify/1/2.jpg",

src/components/createCom/XhInput.vue

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

src/components/createCom/stringMixin.js

+/** 自定义组件 共同逻辑 */
+export default {
+    data() {
+        return {
+            dataValue: ''
+        }
+    },
+    watch: {
+        value: function(val) {
+            this.dataValue = val
+        }
+    },
+    props: {
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        /** 索引值 用于更新数据 */
+        itemIndex:Number,
+		groupIndex:Number,
+        /** 包含数据源 */
+        item: Object,
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+
+    mounted() {
+    /** 如果有值以传入值为主 如果无值 已默认值为主 */
+        this.dataValue = this.value
+    },
+
+    methods: {
+    // 输入的值
+        valueChange(val) {
+            const data = {
+                groupIndex: this.groupIndex,// 左侧菜单下标
+				itemIndex:this.itemIndex,//右侧某一项下标
+                value: val
+            }
+            this.$emit('value-change', data)
+        }
+    }
+
+}

src/pages/order/complete.vue

@@ -18,16 +18,22 @@
 				@scroll="rightScroll">
 
 				<u-form :model="form" ref="uForm">
-					<template v-for="(groupItem,index) in groupList">
-						<view class="class-item" :key="index">
+					<template v-for="(groupItem,groupIndex) in groupList">
+						<view class="class-item" :key="groupIndex">
 							<view class="title">{{groupItem.groupName}}</view>
 							<view class="class-bd">
-								<u-form-item :label-width="0" :required="groupItem.required"
-									v-for="(item,itemIndex) in groupItem.item" :key="itemIndex">
-									<view>{{item.fieldsTitle}}</view>
+								<u-form-item :required="groupItem.required"
+									v-for="(item,itemIndex) in groupItem.item" :key="itemIndex"
+									 :prop="item.fieldsName">
+									<view @click="nextStep(item)">{{item.fieldsTitle}}</view>
 									<template v-if="item.fieldsType">
-										<xh-input v-if="item.fieldsType==='input'" v-model="form.fieldsName"></xh-input>
-										
+										<xh-input v-if="item.fieldsType==='input'"
+											:groupIndex="groupIndex"
+											:itemIndex="itemIndex"
+											:item="item"
+											@value-change="fieldValueChange"
+											></xh-input>
+
 									</template>
 								</u-form-item>
 							</view>
@@ -36,6 +42,7 @@
 				</u-form>
 			</scroll-view>
 		</view>
+		<view @click="nextStep">下一步</view>
 	</view>
 </template>
 <script>
@@ -50,12 +57,28 @@
 				menuHeight: 0, // 左边菜单的高度
 				menuItemHeight: 0, // 左边菜单item的高度
 				itemId: '', // 栏目右边scroll-view用于滚动的id
-				groupList: classifyData,
+				groupList: classifyData, // 基本信息、安装 、勘察（其中一项表单数据）
 				menuItemPos: [],
 				arr: [],
 				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
 				timer: null, // 定时器
-
+				form: { // 一维表单
+					name:'name'
+				},
+				rules: {
+					name: [{
+						required: true,
+						min:10,
+						message: '姓名不能少于5个字',
+						// 可以单个或者同时写两个触发验证方式 
+						trigger: ['change', 'blur'],
+					}],
+					intro: [{
+						min: 5,
+						message: '简介不能少于5个字',
+						trigger: 'change'
+					}]
+				}
 			}
 		},
 		components: {
@@ -69,12 +92,32 @@
 
 		},
 		onReady() {
+			this.$refs.uForm.setRules(this.rules);
 			// 导航栏滚动切换
 			this.getMenuItemTop()
 		},
+		updated(){
+			console.log(this.form.name,'form.name')
+		},
 		methods: {
-			
-			
+			 // 字段的值更新
+			fieldValueChange(data) {
+				// data.groupIndex data.itemIndex值下标 data.value //值
+				console.log(data,'data')
+				const groupItem = this.groupList[data.groupIndex]
+				let innerItem
+				if(groupItem.item){
+					innerItem = groupItem.item[data.itemIndex]
+				}
+				console.log(innerItem,'innerItem')
+				this.form[innerItem.fieldsName] = data.value
+				console.log(this.form,'this.form')
+			},
+			nextStep(item){
+				// 下一步
+				console.log(item,'item')
+			},
+
 			// ------------------------- 以下方法为展示滚动切换 -------------------------
 			// 点击左边的栏目切换
 			async swichMenu(index) {
@@ -186,6 +229,15 @@
 </script>
 
 <style lang="scss" scoped>
+	// ----------------------------  表单样式begin  ----------------------------
+		/deep/ .u-form-item{
+			.u-form-item__message{
+				padding-left: 0!important;
+			}
+		}
+	// ----------------------------  表单样式end  ----------------------------
+	
+	
 	.u-wrap {
 		height: calc(100vh);
 		/* #ifdef H5 */