完工配置-单选-多选-输入框组件

src/components/createCom/XhCheckbox.vue

+<template>
+	<view class="list">
+		<view v-for="(item,index) in settings" :key="index"
+			:class="{'txt':true,'active':checkStatus(item)}"  @click="setValue(item)">{{item}}
+		</view>
+	</view>
+</template>
+
+<script>
+	import objMixin from './objMixin'
+	export default {
+		name: 'XhRadio',
+		components: {},
+		mixins: [objMixin],
+		props: {},
+		filters:{},
+		data() {
+			return {}
+		},
+		computed: {
+			settings() {
+				return this.item.settings || []
+			}
+		},
+		watch: {},
+		mounted() {},
+		methods: {
+			checkStatus(item){
+				if(!item){
+					return false
+				}
+				const dataValue = this.dataValue
+				let flag = Array.isArray(dataValue) && dataValue.indexOf(item)>-1
+				console.log(flag,'flag')
+				return flag
+			},
+			setValue(txt) {
+				const dataValue = this.dataValue || []
+				let idx = dataValue.indexOf(txt)
+				if (idx > -1) {
+					dataValue.splice(idx,1)
+				} else {
+					dataValue.push(txt)
+				}
+				this.dataValue = dataValue
+				this.valueChange(this.dataValue)
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.list {
+		display: flex;
+
+		.txt {
+			color: #666;
+			padding: 10rpx;
+
+			&.active {
+				background-color: red;
+				color: #fff;
+			}
+		}
+	}
+</style>

src/components/createCom/XhRadio.vue

+<template>
+	<view class="list">
+		<view v-for="(item,index) in settings" :key="index" :class="{'txt':true,'active':item===dataValue}" 
+		@click="setValue(item)">{{item}}</view>
+	</view>
+</template>
+
+<script>
+	import stringMixin from './stringMixin'
+	export default {
+		name: 'XhRadio',
+		components: {},
+		mixins: [stringMixin],
+		props: {},
+		data() {
+			return {}
+		},
+		computed: {
+			settings(){
+				return this.item.settings || []
+			}
+		},
+		watch: {},
+		mounted() {},
+		methods: {
+			setValue(txt){
+				this.dataValue = txt
+				this.valueChange(txt)
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.list{
+		display: flex;
+		.txt{
+			color:#666;
+			padding:10rpx;
+			&.active{
+				background-color: red;
+				color:#fff;
+			}
+		}
+	}
+</style>

src/components/createCom/objMixin.js

+/** 自定义组件 共同逻辑 */
+export default {
+	data() {
+		return {
+			dataValue:null
+		}
+	},
+	watch: {
+		value: function(val) {
+			this.dataValue = val
+		}
+	},
+	props: {
+		value: {
+			type: Object,
+			default: () => {
+				return null
+			}
+		},
+		/** 索引值 用于更新数据 */
+		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

@@ -22,18 +22,22 @@
 						<view class="class-item" :key="groupIndex">
 							<view class="title">{{groupItem.groupName}}</view>
 							<view class="class-bd">
-								<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>
+								<u-form-item v-for="(item,itemIndex) in groupItem.item" :key="itemIndex"
+									:prop="item.fieldsName">
+									<view class="label" @click="nextStep(item)">
+										<text class="required" v-if="item.required">*</text>
+										{{item.fieldsTitle}}
+									</view>
 									<template v-if="item.fieldsType">
-										<xh-input v-if="item.fieldsType==='input'"
-											:groupIndex="groupIndex"
-											:itemIndex="itemIndex"
-											:item="item"
-											@value-change="fieldValueChange"
-											></xh-input>
-
+										<xh-input v-if="item.fieldsType==='input'" :groupIndex="groupIndex"
+											:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
+										</xh-input>
+										<xh-radio v-if="item.fieldsType==='radio'" :groupIndex="groupIndex"
+											:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
+										</xh-radio>
+										<xh-checkbox v-if="item.fieldsType==='checkbox'" :groupIndex="groupIndex"
+											:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
+										</xh-checkbox>
 									</template>
 								</u-form-item>
 							</view>
@@ -48,6 +52,9 @@
 <script>
 	import classifyData from '@/common/classify.data.js';
 	import XhInput from '@/components/createCom/XhInput.vue'
+	import XhRadio from '@/components/createCom/XhRadio.vue'
+	import XhCheckbox from '@/components/createCom/XhCheckbox.vue'
+	// import XhRadio from '@/components/createCom/XhRadio.vue'
 	export default {
 		data() {
 			return {
@@ -63,26 +70,41 @@
 				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
 				timer: null, // 定时器
 				form: { // 一维表单
-					name:'name'
+					name: 'name',
+					radio: ''
 				},
 				rules: {
 					name: [{
 						required: true,
-						min:10,
-						message: '姓名不能少于5个字',
+						min: 10,
+						message: '姓名不能为空',
 						// 可以单个或者同时写两个触发验证方式 
 						trigger: ['change', 'blur'],
 					}],
-					intro: [{
-						min: 5,
-						message: '简介不能少于5个字',
-						trigger: 'change'
+					mobile: [{
+						required: true,
+						min: 10,
+						message: '姓名不能为空',
+						// 可以单个或者同时写两个触发验证方式 
+						trigger: ['change', 'blur'],
+					}, {
+						// 自定义验证函数，见上说明
+						validator: (rule, value, callback) => {
+							// 上面有说，返回true表示校验通过，返回false表示不通过
+							// this.$u.test.mobile()就是返回true或者false的
+							return this.$u.test.mobile(value);
+						},
+						message: '手机号码不正确',
+						// 触发器可以同时用blur和change
+						trigger: ['change', 'blur'],
 					}]
 				}
 			}
 		},
 		components: {
-			'xh-input': XhInput,
+			XhInput,
+			XhRadio,
+			XhCheckbox
 			// formCom
 		},
 		created() {
@@ -96,26 +118,26 @@
 			// 导航栏滚动切换
 			this.getMenuItemTop()
 		},
-		updated(){
-			console.log(this.form.name,'form.name')
+		updated() {
+			console.log(this.form.name, 'form.name')
 		},
 		methods: {
-			 // 字段的值更新
+			// 字段的值更新
 			fieldValueChange(data) {
 				// data.groupIndex data.itemIndex值下标 data.value //值
-				console.log(data,'data')
+				console.log(data, 'data')
 				const groupItem = this.groupList[data.groupIndex]
 				let innerItem
-				if(groupItem.item){
+				if (groupItem.item) {
 					innerItem = groupItem.item[data.itemIndex]
 				}
-				console.log(innerItem,'innerItem')
+				console.log(innerItem, 'innerItem')
 				this.form[innerItem.fieldsName] = data.value
-				console.log(this.form,'this.form')
+				console.log(this.form, 'this.form')
 			},
-			nextStep(item){
+			nextStep(item) {
 				// 下一步
-				console.log(item,'item')
+				console.log(item, 'item')
 			},
 
 			// ------------------------- 以下方法为展示滚动切换 -------------------------
@@ -230,14 +252,34 @@
 
 <style lang="scss" scoped>
 	// ----------------------------  表单样式begin  ----------------------------
-		/deep/ .u-form-item{
-			.u-form-item__message{
-				padding-left: 0!important;
-			}
+	/deep/ .u-form-item {
+		.u-form-item__message {
+			padding-left: 0 !important;
+		}
+
+		.u-form-item--left__content--required {
+			vertical-align: top;
+		}
+	}
+
+	.class-item {
+		.label {
+			color: #333;
+			font-size: 28rpx;
+			line-height: 40rpx;
+		}
+
+		.required {
+			padding-right: 10rpx;
+			font-size: 28rpx;
+			line-height: 40rpx;
+			color: #fa3534;
 		}
+	}
+
 	// ----------------------------  表单样式end  ----------------------------
-	
-	
+
+
 	.u-wrap {
 		height: calc(100vh);
 		/* #ifdef H5 */