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

src/common/classify.data.js

-export default[
-   {
+export default [{
 		"groupName": "女装",
-      "item": [
-          {
+		"item": [{
+				"required": true,
 				"fieldsTitle": "A字裙",
-			"fieldsName":"name",
-			"fieldsType":"input",
-			"fieldsValue":"",
+				"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",
+				"fieldsTitle": "单选",
+				"fieldsName": "radio",
+				"fieldsType": "radio",
+				"settings": ['车主电', '物业电', '国电'],
 				"key": "T恤",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/1/2.jpg",
 				"cat": 10
 			},
 			{
-            "fieldsTitle": "半身裙",
+				"fieldsTitle": "多选",
+				"fieldsName": "checkbox",
+				"fieldsType": "checkbox",
+				"settings": ['车主电', '物业电', '国电'],
 				"key": "半身裙",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/1/3.jpg",
 				"cat": 10
@@ -95,8 +98,7 @@ export default[
 	},
 	{
 		"groupName": "美食",
-    "item": [
-        {
+		"item": [{
 				"fieldsTitle": "火锅",
 				"key": "火锅",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/2/1.jpg",
@@ -184,8 +186,7 @@ export default[
 	},
 	{
 		"groupName": "美妆",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "化妆刷",
 				"key": "化妆刷",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/3/1.jpg",
@@ -280,8 +281,7 @@ export default[
 	},
 	{
 		"groupName": "居家日用",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "垃圾袋",
 				"key": "垃圾袋",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/4/1.jpg",
@@ -363,8 +363,7 @@ export default[
 	},
 	{
 		"groupName": "男装",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "爸爸装",
 				"key": "爸爸装",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/5/1.jpg",
@@ -434,8 +433,7 @@ export default[
 	},
 	{
 		"groupName": "鞋品",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "单鞋",
 				"key": "单鞋",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/6/1.jpg",
@@ -505,8 +503,7 @@ export default[
 	},
 	{
 		"groupName": "数码家电",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "数据线",
 				"key": "数据线",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/7/1.jpg",
@@ -594,8 +591,7 @@ export default[
 	},
 	{
 		"groupName": "母婴",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "婴童服饰",
 				"key": "衣服",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/8/1.jpg",
@@ -683,8 +679,7 @@ export default[
 	},
 	{
 		"groupName": "箱包",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "单肩包",
 				"key": "单肩包",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/9/1.jpg",
@@ -754,8 +749,7 @@ export default[
 	},
 	{
 		"groupName": "内衣",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "袜子",
 				"key": "袜子",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/10/1.jpg",
@@ -825,8 +819,7 @@ export default[
 	},
 	{
 		"groupName": "文娱车品",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "车市车品",
 				"key": "车市车品",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/11/1.jpg",
@@ -884,8 +877,7 @@ export default[
 	},
 	{
 		"groupName": "配饰",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "太阳镜",
 				"key": "太阳镜",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/12/1.jpg",
@@ -955,8 +947,7 @@ export default[
 	},
 	{
 		"groupName": "家装家纺",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "家居饰品",
 				"key": "家居饰品",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/13/1.jpg",
@@ -1032,8 +1023,7 @@ export default[
 	},
 	{
 		"groupName": "户外运动",
-        "item": [
-            {
+		"item": [{
 				"fieldsTitle": "游泳装备",
 				"key": "游泳",
 				"icon": "https://cdn.uviewui.com/uview/common/classify/14/1.jpg",

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"
+								<u-form-item v-for="(item,itemIndex) in groupItem.item" :key="itemIndex"
 									:prop="item.fieldsName">
-									<view @click="nextStep(item)">{{item.fieldsTitle}}</view>
+									<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,11 +252,31 @@
 
 <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  ----------------------------