Merge branch 'master' of http://git.cc-lotus.info/chubiao/yl-app

config.js

@@ -1,4 +1,9 @@
-// 全局公共配置
-module.exports = {
-	baseUrl: 'http://121.36.73.159:807/prod-api'
-}
+
+const build = {
+	"service" : "https://www.baidu.com",
+	"gaodeKey":"e6b77a8d407630b07f915c0f40eebd15"
+}
+
+
+export default build
+

manifest.json

@@ -23,27 +23,27 @@
             /* android打包配置 */
             "android" : {
                 "permissions" : [
-                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>"
                 ]
             },
             /* ios打包配置 */
             "ios" : {},
             /* SDK配置 */
-            "sdkConfigs" : {}
+            "sdkConfigs" : {
+                "maps" : {
+                    "amap" : {
+                        "appkey_ios" : "",
+                        "appkey_android" : ""
+                    }
+                }
+            }
         }
     },
     /* 快应用特有相关 */
@@ -52,10 +52,25 @@
     "mp-weixin" : {
         "appid" : "wx52fe622305759379",
         "setting" : {
-            "urlCheck" : false
+            "urlCheck" : false,
+            "es6" : true,
+            "minified" : true,
+            "postcss" : true
         },
         "usingComponents" : true,
-				"libVersion": "latest"  
+
+		"requiredPrivateInfos":[
+			"getLocation",
+			"chooseLocation"
+		],
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "获取您的位置信息"
+            }
+        },
+
+		"libVersion": "latest"  
+
     },
     "mp-alipay" : {
         "usingComponents" : true
@@ -69,5 +84,10 @@
     "uniStatistics" : {
         "enable" : false
     },
-    "vueVersion" : "2"
+    "vueVersion" : "2",
+    "h5" : {
+        "sdkConfigs" : {
+            "maps" : {}
+        }
+    }
 }

package.json

@@ -1,7 +1,7 @@
 {
 	"devDependencies": {
 		"sass": "^1.69.7",
-		"sass-loader": "^10.5.2"
+		"sass-loader": "^13.3.3"
 	},
 	"dependencies": {
 		"@dcloudio/uni-app": "^2.0.2-3090920231225001",

pages/lr/add.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
-		<view style="margin-top: 20px;">
-			<uni-steps :options="list" :active="active" />
+		<view>
+			<csr-tab :tabList="list" :value="active"></csr-tab>
 		</view>
 
 		<view class="line"></view>
@@ -11,23 +11,77 @@
 				<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules">
 					<uni-forms-item label="照片">
 						<uni-file-picker v-model="baseFormData.tx" limit="1" fileMediatype="image" @select="select"
-							@progress="progress" @success="success" @fail="fail">
-
-						</uni-file-picker>
+							@progress="progress" @success="success" @fail="fail" />
 					</uni-forms-item>
-					<uni-forms-item label="姓名" required>
-						<uni-easyinput v-model="baseFormData.khxm" placeholder="请输入客户姓名" />
+					<uni-forms-item label="姓名" required name="khxm">
+						<uni-easyinput v-model="baseFormData.khxm" placeholder="请输入姓名" />
 					</uni-forms-item>
-					<uni-forms-item label="性别" required>
+					<uni-forms-item label="性别" required name="xb">
 						<uni-data-select v-model="baseFormData.xb" placeholder="请选择性别" :localdata="sexData" />
 					</uni-forms-item>
-					<uni-forms-item label="民族" required>
+					<uni-forms-item label="民族" required name="mz">
 						<uni-data-select v-model="baseFormData.mz" placeholder="请选择民族" :localdata="mzData" />
 					</uni-forms-item>
-					<uni-forms-item label="手机号" required>
+					<uni-forms-item label="手机号" required name="sjhm">
 						<uni-easyinput v-model="baseFormData.sjhm" placeholder="请输入手机号" />
 					</uni-forms-item>
-					<button @click="submit('baseForm')">Submit</button>
+					<uni-forms-item label="出生日期">
+						<uni-datetime-picker type="data" v-model="baseFormData.csrq" placeholder="请选择出生日期" />
+					</uni-forms-item>
+					<uni-forms-item label="身高">
+						<uni-easyinput type="number" v-model="baseFormData.sg" placeholder="身高单位:cm" />
+					</uni-forms-item>
+					<uni-forms-item label="体重">
+						<uni-easyinput type="number" v-model="baseFormData.tz" placeholder="体重单位：kg" />
+					</uni-forms-item>
+					<uni-forms-item label="婚姻状况">
+						<uni-data-select v-model="baseFormData.hyzk" placeholder="请选择婚姻状况" :localdata="hyzkData" />
+					</uni-forms-item>
+					<uni-forms-item label="能力状况">
+						<uni-data-select v-model="baseFormData.nlpg" placeholder="请选择能力状况" :localdata="nlzkData" />
+					</uni-forms-item>
+					<uni-forms-item label="居住地址">
+						<uni-easyinput v-model="baseFormData.xjd" placeholder="请输入居住地址" />
+					</uni-forms-item>
+					<uni-forms-item label="定位">
+						<view @click="openChooseLocation">
+							<uni-easyinput v-model="baseFormData.dw" placeholder="请选择定位" disabled />
+						</view>
+					</uni-forms-item>
+					<uni-forms-item label="监护人">
+						<uni-easyinput v-model="baseFormData.jhr" placeholder="请输入监护人姓名" />
+					</uni-forms-item>
+					<uni-forms-item label="监护人手机号码">
+						<uni-easyinput v-model="baseFormData.jhrsjhm" placeholder="请输入监护人手机号码" />
+					</uni-forms-item>
+					<uni-forms-item label="与老人关系">
+						<uni-data-select v-model="baseFormData.jhrgx" placeholder="请选择与老人关系" :localdata="jhrgxData" />
+					</uni-forms-item>
+					<uni-forms-item label="巡访责任人">
+						<uni-easyinput v-model="baseFormData.xfzrr" placeholder="请输入巡访责任人姓名" />
+					</uni-forms-item>
+					<uni-forms-item label="巡访频次">
+						<uni-data-select v-model="baseFormData.xfpc" placeholder="请选择巡访频次" :localdata="xfpcData" />
+					</uni-forms-item>
+					<uni-forms-item label="特困老人归类">
+						<uni-data-checkbox multiple v-model="baseFormData.tkfl" :localdata="tkflData" />
+					</uni-forms-item>
+					<uni-forms-item label="兴趣爱好">
+						<uni-data-checkbox multiple v-model="baseFormData.xqah" :localdata="xqahData" />
+					</uni-forms-item>
+					<uni-forms-item label="兴趣爱好备注">
+						<uni-easyinput v-model="baseFormData.xqahbz" placeholder="请输入兴趣爱好备注" />
+					</uni-forms-item>
+					<uni-forms-item label="技能特长">
+						<uni-data-checkbox multiple v-model="baseFormData.jntc" :localdata="jntcData" />
+					</uni-forms-item>
+					<uni-forms-item label="技能特长备注">
+						<uni-easyinput v-model="baseFormData.jntcbz" placeholder="请输入技能特长备注" />
+					</uni-forms-item>
+					<uni-forms-item label="加入助老服务">
+						<uni-data-checkbox v-model="baseFormData.jntcIszy" :localdata="jntcIszyData" />
+					</uni-forms-item>
+					<button type="primary" v-if="active==0" @click="add('baseForm')">提交</button>
 				</uni-forms>
 
 			</uni-section>
@@ -41,10 +95,13 @@
 </template>
 
 <script>
+	import amapFile from "@/libs/amap-wx.130.js";
+	import config from "../../config.js";
+
 	export default {
 		data() {
 			return {
-				active: 1,
+				active: 0,
 				list: [{
 					title: '基本信息'
 				}, {
@@ -55,15 +112,61 @@
 					title: '病史记录'
 				}],
 				rules: {
-					sjhm: {
+					khxm: {
+						rules: [{
+							required: true,
+							errorMessage: '姓名不能为空'
+						}]
+					},
+					xb: {
 						rules: [{
-							format: 'number',
-							pattern: '/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/',
-							errorMessage: '请输入正确的手机号',
+							required: true,
+							errorMessage: '请选择性别'
 						}]
+					},
+					mz: {
+						rules: [{
+							required: true,
+							errorMessage: '请选择民族'
+						}]
+					},
+					sjhm: {
+						rules: [{
+								required: true,
+								errorMessage: '请输入手机号'
+							},
+							{
+								format: 'number',
+								errorMessage: '请输入正确的手机号',
+							},
+							{
+								pattern: '^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\\d{8})$',
+								errorMessage: '请输入正确的手机号',
+							}
+						]
+					},
+					jhrsjhm: {
+						rules: [{
+								format: 'number',
+								errorMessage: '请输入正确的手机号',
+							},
+							{
+								pattern: '^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\\d{8})$',
+								errorMessage: '请输入正确的手机号',
+							}
+						]
 					}
 				},
-				baseFormData: [],
+				baseFormData: {
+					khxm: '',
+					lng: '',
+					lat: '',
+					dw: '',
+					jntcIszy:'0',
+					xqah:[],
+					jntc:[],
+					tkfl:[]
+				},
 				sexData: [{
 						value: 1,
 						text: "男性"
@@ -89,15 +192,215 @@
 						value: "03",
 						text: "回族"
 					},
-				]
+				],
+				hyzkData: [{
+						value: "10",
+						text: "未婚"
+					},
+					{
+						value: "20",
+						text: "已婚"
+					}
+				],
+				nlzkData: [{
+						value: "0",
+						text: "能力完好"
+					},
+					{
+						value: "1",
+						text: "轻度失能"
+					}
+				],
+				jhrgxData: [{
+						value: "00",
+						text: "本人/户主"
+					},
+					{
+						value: "01",
+						text: "配偶"
+					}
+				],
+				xfpcData: [{
+						value: "00",
+						text: "每天"
+					},
+					{
+						value: "01",
+						text: "每周"
+					}
+				],
+				tkflData: [{
+						value: "独居老人",
+						text: "独居老人"
+					},
+					{
+						value: "分散供养特困老人",
+						text: "分散供养特困老人"
+					},
+					{
+						value: "高龄老人",
+						text: "高龄老人"
+					},
+					{
+						value: "计划生育特殊家庭老人",
+						text: "计划生育特殊家庭老人"
+					},
+					{
+						value: "空巢老人",
+						text: "空巢老人"
+					},
+					{
+						value: "农村留守老人",
+						text: "农村留守老人"
+					},
+					{
+						value: "失能老人",
+						text: "失能老人"
+					},
+					{
+						value: "重残老人",
+						text: "重残老人"
+					}
+				],
+				xqahData: [{
+					value: "棋牌",
+					text: "棋牌"
+				}, {
+					value: "户外活动",
+					text: "户外活动"
+				}, {
+					value: "旅游出行",
+					text: "旅游出行"
+				}, {
+					value: "书法",
+					text: "书法"
+				}, {
+					value: "唱歌",
+					text: "唱歌"
+				}, {
+					value: "跳舞",
+					text: "跳舞"
+				}, {
+					value: "花艺",
+					text: "花艺"
+				}, {
+					value: "女工",
+					text: "女工"
+				}, {
+					value: "其他",
+					text: "其他"
+				}],
+				jntcData: [{
+					value: "水电暖",
+					text: "水电暖"
+				}, {
+					value: "家电维修",
+					text: "家电维修"
+				}, {
+					value: "医护",
+					text: "医护"
+				}, {
+					value: "教辅",
+					text: "教辅"
+				}, {
+					value: "文体",
+					text: "文体"
+				}, {
+					value: "其他",
+					text: "其他"
+				}, ],
+				lrxqData: [{
+					value: "zc",
+					text: "助餐"
+				}, {
+					value: "zg",
+					text: "助购"
+				}, {
+					value: "zx",
+					text: "助行"
+				}, {
+					value: "zz",
+					text: "助浴"
+				}, {
+					value: "zj",
+					text: "助洁"
+				}, {
+					value: "zl",
+					text: "助乐"
+				}, {
+					value: "zy",
+					text: "助医"
+				}, {
+					value: "zi",
+					text: "助急"
+				}, {
+					value: "djfy",
+					text: "代缴费用"
+				}, {
+					value: "zyly",
+					text: "住养老院"
+				}, {
+					value: "kfxl",
+					text: "康复训练"
+				}, {
+					value: "qtxq",
+					text: "其他"
+				}, ],
+				jntcIszyData: [{
+					value: "1",
+					text: "是"
+				}, {
+					value: "0",
+					text: "否"
+				}, ],
+				myAmapFunT: '',
+				startPoint: {
+					latitude: 43.834931,
+					longitude: 125.289036
+				}
 			}
 
 		},
-		computed: {},
-		onLoad() {},
-		onReady() {},
+		onLoad() {
+			console.log("wwwwwwwwwwww", config.gaodeKey)
+			this.myAmapFunT = new amapFile.AMapWX({
+				key: config.gaodeKey
+			})
+		},
 		methods: {
-			submit(ref) {
+			async openChooseLocation(opt) {
+				let that = this
+				await uni.chooseLocation({
+					latitude: opt?.latitude || that.startPoint.latitude,
+					longitude: opt?.longitude || that.startPoint.longitude,
+					success: function(res) {
+						// console.log(res)
+						// console.log('位置名称：' + res.name);
+						// console.log('详细地址：' + res.address);
+						// console.log('纬度：' + res.latitude);
+						// console.log('经度：' + res.longitude);
+
+						that.baseFormData.dw = res.name
+						that.baseFormData.lng = res.longitude
+						that.baseFormData.lat = res.latitude
+
+
+						if (!res.name) {
+							return uni.showToast({
+								title: '请重新选择位置',
+								icon: 'none'
+							});
+						}
+
+					},
+					fail: function(info) { //失败回调
+						console.log('调取失败')
+						console.log(info)
+					},
+
+				})
+			},
+			add(ref) {
 				this.$refs[ref].validate().then(res => {
 					console.log('success', res);
 					uni.showToast({
@@ -106,113 +409,13 @@
 				}).catch(err => {
 					console.log('err', err);
 				})
-			},
+			}
 		}
 	}
 </script>
 
 
-// <script setup>
-	// 	import {
-	// 		ref,
-	// 		getCurrentInstance,
-	// 		onMounted
-	// 	} from "vue";
-
-	// 	import {onShow, onReady, onLoad} from '@dcloudio/uni-app'
 
-	// 	// 获取当前组件实例
-	// 	const { proxy }  = getCurrentInstance(); 
-	// 	const active = ref(1)
-	// 	const list = ref([{
-	// 		title: '基本信息'
-	// 	}, {
-	// 		title: '健康档案'
-	// 	}, {
-	// 		title: '家庭信息'
-	// 	}, {
-	// 		title: '病史记录'
-	// 	}])
-	// 	// const baseForm = ref(null)
-	// 	const rules = ref({
-	// 		'baseFormData.sjhm': {
-	// 			rules: [{
-	// 				format: 'number',
-	// 				pattern: '/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/',
-	// 				errorMessage: '请输入正确的手机号',
-	// 			}]
-	// 		}
-	// 	})
-	// 	const baseFormData = ref([])
-	// 	const sexData = ref([{
-	// 			value: 1,
-	// 			text: "男性"
-	// 		},
-	// 		{
-	// 			value: 2,
-	// 			text: "女性"
-	// 		},
-	// 		{
-	// 			value: 9,
-	// 			text: "未说明的性别"
-	// 		},
-	// 	])
-	// 	const mzData = ref([{
-	// 			value: "01",
-	// 			text: "汉族"
-	// 		},
-	// 		{
-	// 			value: "02",
-	// 			text: "蒙古族"
-	// 		},
-	// 		{
-	// 			value: "03",
-	// 			text: "回族"
-	// 		},
-	// 	])
-	// 	onMounted(() => {
-	// 	})
-	// 	onReady(() => {
-
-	// 	})
-	// 	function change() {
-	// 		if (active.value < list.value.length - 1) {
-	// 			active.value += 1
-	// 		} else {
-	// 			active.value = 0
-	// 		}
-	// 	}
-
-	// 	// 照片获取上传状态
-	// 	function select(e) {
-	// 		console.log('选择文件：', e)
-	// 	}
-	// 	// 照片获取上传进度
-	// 	function progress(e) {
-	// 		console.log('上传进度：', e)
-	// 	}
-
-	// 	// 照片上传成功
-	// 	function success(e) {
-	// 		console.log('上传成功')
-	// 	}
-
-	// 	// 照片上传失败
-	// 	function fail(e) {
-	// 		console.log('上传失败：', e)
-	// 	}
-
-	// 	// 表单提交
-	// 	function submit() {
-	// 		console.log('表单数据信息：',baseFormData.value);
-	// 		proxy.$refs.baseForm.validate().then(res => {
-	// 			console.log('表单数据信息：', res);
-	// 		}).catch(err => {
-	// 			console.log('表单错误信息：', err);
-	// 		})
-	// 	}
-	// 
-</script>
 
 <style lang="scss" scoped>
 	.line {
@@ -221,72 +424,37 @@
 		margin-top: 10px;
 	}
 
-	.image {
-		width: 25px;
-		height: 25px;
-	}
+	// .map_container {
+	// 	position: absolute;
+	// 	top: 0;
+	// 	bottom: 80px;
+	// 	left: 0;
+	// 	right: 0;
+	// }
 
-	.text {
-		font-size: 14px;
-		margin-top: 5px;
-	}
+	// .map {
+	// 	width: 100%;
+	// 	height: 100%;
+	// }
 
-	.example-body {
-		/* #ifndef APP-NVUE */
-		// display: block;
-		/* #endif */
-	}
-
-	.grid-dynamic-box {
-		margin-bottom: 15px;
-	}
-
-	.grid-item-box {
-		flex: 1;
-		// position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 15px 0;
-	}
-
-	.grid-item-box-row {
-		flex: 1;
-		// position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		padding: 15px 0;
-	}
-
-	.grid-dot {
-		position: absolute;
-		top: 5px;
-		right: 15px;
-	}
-
-	.swiper {
-		height: 420px;
-	}
-
-	/* #ifdef H5 */
-	@media screen and (min-width: 768px) and (max-width: 1425px) {
-		.swiper {
-			height: 630px;
-		}
-	}
+	// .map_text {
+	// 	position: absolute;
+	// 	left: 0;
+	// 	right: 0;
+	// 	bottom: 0px;
+	// 	height: 80px;
+	// 	background: #fff;
+	// 	padding: 0 15px;
+	// }
 
-	@media screen and (min-width: 1425px) {
-		.swiper {
-			height: 830px;
-		}
-	}
+	// text {
+	// 	margin: 5px 0;
+	// 	display: block;
+	// 	font-size: 12px;
+	// }
 
-	/* #endif */
+	// .h1 {
+	// 	margin: 15px 0;
+	// 	font-size: 15px;
+	// }
 </style>

pages/my/index.vue

@@ -1,5 +1,18 @@
 <template>
-
+	<view>
+		<!-- 	<view class="map_container">
+			<map class="map" ref="map" :longitude="longitude" :latitude="latitude" scale="14" show-location="true"
+				:markers="markers" @click="markertap"></map>
+		</view>
+		<view class="mapText">
+			{{address}}
+		</view> -->
+		<view class="search-box" @click="openChooseLocation">
+	
+				qqqqq1
+		
+		</view>
+	</view>
 
 </template>
 
@@ -9,15 +22,25 @@
 		onReachBottom
 	} from "@dcloudio/uni-app"
 
+	import amapFile from "@/libs/amap-wx.130.js";
+	import config from "../../config.js";
+
 	export default {
 		data() {
 			return {
-
+				myAmapFunT: '',
+				startPoint: {
+					latitude:43.834931,
+					longitude:125.289036
+				}
 			}
 
 		},
 		computed: {},
 		onLoad: function(options) {
+			this.myAmapFunT = new amapFile.AMapWX({
+				key: config.gaodeKey
+			})
 			setTimeout(function() {
 				console.log('start pulldown');
 			}, 1000);
@@ -31,9 +54,68 @@
 			}, 1000);
 		},
 		methods: {
+			openChooseLocation(opt) {
+				let that = this
+				uni.chooseLocation({
+					latitude: opt?.latitude || that.startPoint.latitude,
+					longitude: opt?.longitude || that.startPoint.longitude,
+					success: function(res) {
+						console.log(res)
+						console.log('位置名称：' + res.name);
+						console.log('详细地址：' + res.address);
+						console.log('纬度：' + res.latitude);
+						console.log('经度：' + res.longitude);
+						if (!res.name) {
+							return uni.showToast({
+								title: '请重新选择位置',
+								icon: 'none'
+							});
+						}
+
+					},
+					fail: function(info) { //失败回调
+						console.log('调取失败')
+						console.log(info)
+					},
+
+				})
+			},
 
 		}
 	}
 </script>
 <style scoped>
+	.map_container {
+		position: absolute;
+		top: 20px;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+
+	.map {
+		width: 100%;
+		height: 100%;
+	}
+
+	.mapText {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0px;
+		height: 20px;
+		background: #fff;
+		padding: 0 15px;
+	}
+
+	text {
+		margin: 5px 0;
+		display: block;
+		font-size: 12px;
+	}
+
+	.h1 {
+		margin: 15px 0;
+		font-size: 15px;
+	}
 </style>

uni_modules/csr-tab/changelog.md

@@ -0,0 +1,2 @@
+## 1.0.0（2023-07-05）
+组件发布

uni_modules/csr-tab/components/csr-tab/csr-tab.vue

@@ -0,0 +1,137 @@
+<template>
+	<view  :class="{'uni-scroll-tab': scroll === true }" class="uni-tab">
+		<view
+		v-for="(tab,index) in tabList" :key="index" 
+		:class="{ 'uni-tab-active': index === value, 'uni-tab-scroll-item': scroll === true, ' uni-tab-scroll-active': index === value && scroll === true }"
+		:style="[{color:index === value ? activeColor : defaultColor,backgroundColor: bgColor}]"
+		@tap="itemClick(index,tab)"
+		class="uni-tab-item">
+			<span v-if="tab.icon != undefined" class="iconfont mr5" :class="tab.icon"></span>
+			<text>{{rangeKey == '' ? tab : tab[rangeKey]}}</text>
+		</view>
+		<view v-if="!scroll" :style="[{ right: barRight + '%', left : barLeft + '%', borderColor: activeColor }]" class="uni-tab-bar" :class="back ? 'uni-tab-bar-backward' : 'uni-tab-bar-forward'"></view>
+	</view>
+</template>
+<script>
+	export default {
+		name: 'uni-tab',
+		data() {
+			return {
+				average: 0,
+				back: false
+			};
+		},
+		props: {
+			value: {
+				type: Number, //当前选中下标
+				default () {
+					return 0;
+				}
+			},
+			tabList: {
+				type: Array,
+				default () {
+					return [];
+				}
+			},
+			bgColor: { //背景颜色
+				type: String,
+				default () {
+					return '#FFFFFF';
+				}
+			},
+			defaultColor: { //默认未选中文字颜色
+				type: String,
+				default () {
+					return '#636363';
+				}
+			},
+			activeColor: { //选中时文字颜色 线条颜色
+				type: String,
+				default () {
+					return '#000000';
+				}
+			},
+			rangeKey: { // 当tabList为对象时 显示指定下标值
+				type: String,
+				default () {
+					return '';
+				}
+			},
+			scroll: { //横向滑动
+				type: Boolean,
+				default () {
+					return false;
+				}
+			},
+		},
+		computed:{
+			barLeft () {
+				return this.value * this.average;
+			},
+			barRight () {
+				let index = this.tabList.length - this.value - 1;
+				return index * this.average;
+			},
+		},
+		created() {
+			this.average = 100 / this.tabList.length;
+		},
+		methods: {
+			itemClick(index,tab){
+				if(this.value == index) return false;
+				if(this.value > index){
+					this.back = true;
+				}else{
+					this.back = false;
+				}
+				// this.value = index;
+				this.$emit('update:value', index);
+				this.$emit('change',{tab:tab});
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+@import "../../static/iconfont.css";
+.uni-tab{
+	position: relative;
+	display: flex;
+	font-size: 14px;
+	height: 44px;
+	line-height: 44px;
+	.uni-tab-item{
+		flex: 1;
+		height: 100%;
+		text-align: center;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+	.uni-tab-scroll-item{
+		flex: none;
+		padding: 0px 12px;
+	}
+	.uni-tab-active{
+		color: #1e9fff;
+	}
+	.uni-tab-scroll-active{
+		border-bottom: 3px solid #1e9fff;
+	}
+	.uni-tab-bar{
+		display: block;
+		height: 3px;
+		position: absolute;
+		bottom: 0;
+		border-bottom: 3px solid #1e9fff;
+	}
+	.uni-tab-bar-forward{
+		transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
+	}
+	.uni-tab-bar-backward{
+		transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+	}
+}
+.uni-scroll-tab{
+	overflow-x: scroll;
+}
+</style>

uni_modules/csr-tab/package.json

@@ -0,0 +1,84 @@
+{
+  "id": "csr-tab",
+  "displayName": "tab选项卡",
+  "version": "1.0.0",
+  "description": "兼容性好，简单、易用的选项卡 。",
+  "keywords": [
+    "选项卡",
+    "兼容",
+    "易用",
+    "简单"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "u"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

uni_modules/csr-tab/readme.md

@@ -0,0 +1,17 @@
+# csr-tab
+具体用法请下载示例查看
+# 属性
+|属性名			|类型	|默认值	|说明									|
+|:-:			|:-:	|:-:	|:-:									|
+|value			|Number	|0		|默认下标(双向绑定)						|
+|tabList		|Array	|[]		|可以是一维数组或是数组对象				|
+|bgColor		|String	|#FFFFFF|背景颜色								|
+|defaultColor	|String	|#000000|默认未选中文字颜色						|
+|activeColor	|String	|#1e9fff|选中时文字颜色 线条颜色				|
+|scroll			|Boolean|false	|横向滑动								|
+|rangeKey		|String	|''		|当tabList为数组对象时指定显示对象key	|
+
+# 事件
+|事件名	|说明						|
+|:-:	|:-:						|
+|change	|点击事件时触发,返回对应数据|

uni_modules/csr-tab/static/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

uni_modules/csr-tab/static/demo_index.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1289328" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">儿童</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">男</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64b;</span>
+                <div class="name">女</div>
+                <div class="code-name">&amp;#xe64b;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon10"></span>
+            <div class="name">
+              儿童
+            </div>
+            <div class="code-name">.icon10
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconnan"></span>
+            <div class="name">
+              男
+            </div>
+            <div class="code-name">.iconnan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconziyuan"></span>
+            <div class="name">
+              女
+            </div>
+            <div class="code-name">.iconziyuan
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon10"></use>
+                </svg>
+                <div class="name">儿童</div>
+                <div class="code-name">#icon10</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconnan"></use>
+                </svg>
+                <div class="name">男</div>
+                <div class="code-name">#iconnan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconziyuan"></use>
+                </svg>
+                <div class="name">女</div>
+                <div class="code-name">#iconziyuan</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

uni_modules/uni-data-checkbox/changelog.md

@@ -0,0 +1,45 @@
+## 1.0.3（2022-09-16）
+- 可以使用 uni-scss 控制主题色
+## 1.0.2（2022-06-30）
+- 优化 在 uni-forms 中的依赖注入方式
+## 1.0.1（2022-02-07）
+- 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+## 0.2.5（2021-08-23）
+- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
+## 0.2.4（2021-08-17）
+- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
+## 0.2.3（2021-08-11）
+- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+## 0.2.2（2021-07-30）
+- 优化 在uni-forms组件，与label不对齐的问题
+## 0.2.1（2021-07-27）
+- 修复 单选默认值为0不能选中的Bug
+## 0.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.1.11（2021-07-06）
+- 优化 删除无用日志
+## 0.1.10（2021-07-05）
+- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
+## 0.1.9（2021-07-05）
+- 修复 nvue 黑框样式问题
+## 0.1.8（2021-06-28）
+- 修复 selectedTextColor 属性不生效的Bug
+## 0.1.7（2021-06-02）
+- 新增 map 属性，可以方便映射text/value属性
+## 0.1.6（2021-05-26）
+- 修复 不关联服务空间的情况下组件报错的Bug
+## 0.1.5（2021-05-12）
+- 新增 组件示例地址
+## 0.1.4（2021-04-09）
+- 修复 nvue 下无法选中的问题
+## 0.1.3（2021-03-22）
+- 新增 disabled属性
+## 0.1.2（2021-02-24）
+- 优化 默认颜色显示
+## 0.1.1（2021-02-24）
+- 新增 支持nvue
+## 0.1.0（2021-02-18）
+- “暂无数据”显示居中

uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue

@@ -0,0 +1,821 @@
+<template>
+	<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
+		<template v-if="!isLocal">
+			<view class="uni-data-loading">
+				<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
+				<text v-else>{{mixinDatacomErrorMessage}}</text>
+			</view>
+		</template>
+		<template v-else>
+			<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
+				<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+				 :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
+					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner"  :style="item.styleIcon">
+						<view class="checkbox__inner-icon"></view>
+					</view>
+					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+						<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
+					</view>
+				</label>
+			</checkbox-group>
+			<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
+				<!-- -->
+				<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+				 :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
+					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
+					 :style="item.styleBackgroud">
+						<view class="radio__inner-icon" :style="item.styleIcon"></view>
+					</view>
+					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+						<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
+					</view>
+				</label>
+			</radio-group>
+		</template>
+	</view>
+</template>
+
+<script>
+	/**
+	 * DataChecklist 数据选择器
+	 * @description 通过数据渲染 checkbox 和 radio
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+	 * @property {String} mode = [default| list | button | tag] 显示模式
+	 * @value default  	默认横排模式
+	 * @value list		列表模式
+	 * @value button	按钮模式
+	 * @value tag 		标签模式
+	 * @property {Boolean} multiple = [true|false] 是否多选
+	 * @property {Array|String|Number} value 默认值
+	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
+	 * @property {Number|String} min 最小选择个数 ，multiple为true时生效
+	 * @property {Number|String} max 最大选择个数 ，multiple为true时生效
+	 * @property {Boolean} wrap 是否换行显示
+	 * @property {String} icon = [left|right]  list 列表模式下icon显示位置
+	 * @property {Boolean} selectedColor 选中颜色
+	 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
+	 * @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
+	 * @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
+	 * @value left 左侧显示
+	 * @value right 右侧显示
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: 'uniDataChecklist',
+		mixins: [uniCloud.mixinDatacom || {}],
+		emits:['input','update:modelValue','change'],
+		props: {
+			mode: {
+				type: String,
+				default: 'default'
+			},
+
+			multiple: {
+				type: Boolean,
+				default: false
+			},
+			value: {
+				type: [Array, String, Number],
+				default () {
+					return ''
+				}
+			},
+			// TODO vue3
+			modelValue: {
+				type: [Array, String, Number],
+				default() {
+					return '';
+				}
+			},
+			localdata: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			min: {
+				type: [Number, String],
+				default: ''
+			},
+			max: {
+				type: [Number, String],
+				default: ''
+			},
+			wrap: {
+				type: Boolean,
+				default: false
+			},
+			icon: {
+				type: String,
+				default: 'left'
+			},
+			selectedColor: {
+				type: String,
+				default: ''
+			},
+			selectedTextColor: {
+				type: String,
+				default: ''
+			},
+			emptyText:{
+				type: String,
+				default: '暂无数据'
+			},
+			disabled:{
+				type: Boolean,
+				default: false
+			},
+			map:{
+				type: Object,
+				default(){
+					return {
+						text:'text',
+						value:'value'
+					}
+				}
+			}
+		},
+		watch: {
+			localdata: {
+				handler(newVal) {
+					this.range = newVal
+					this.dataList = this.getDataList(this.getSelectedValue(newVal))
+				},
+				deep: true
+			},
+			mixinDatacomResData(newVal) {
+				this.range = newVal
+				this.dataList = this.getDataList(this.getSelectedValue(newVal))
+			},
+			value(newVal) {
+				this.dataList = this.getDataList(newVal)
+				// fix by mehaotian is_reset 在 uni-forms 中定义
+				// if(!this.is_reset){
+				// 	this.is_reset = false
+				// 	this.formItem && this.formItem.setValue(newVal)
+				// }
+			},
+			modelValue(newVal) {
+				this.dataList = this.getDataList(newVal);
+				// if(!this.is_reset){
+				// 	this.is_reset = false
+				// 	this.formItem && this.formItem.setValue(newVal)
+				// }
+			}
+		},
+		data() {
+			return {
+				dataList: [],
+				range: [],
+				contentText: {
+					contentdown: '查看更多',
+					contentrefresh: '加载中',
+					contentnomore: '没有更多'
+				},
+				isLocal:true,
+				styles: {
+					selectedColor: '#2979ff',
+					selectedTextColor: '#666',
+				},
+				isTop:0
+			};
+		},
+		computed:{
+			dataValue(){
+				if(this.value === '')return this.modelValue
+				if(this.modelValue === '') return this.value
+				return this.value
+			}
+		},
+		created() {
+			// this.form = this.getForm('uniForms')
+			// this.formItem = this.getForm('uniFormsItem')
+			// this.formItem && this.formItem.setValue(this.value)
+
+			// if (this.formItem) {
+			// 	this.isTop = 6
+			// 	if (this.formItem.name) {
+			// 		// 如果存在name添加默认值,否则formData 中不存在这个字段不校验
+			// 		if(!this.is_reset){
+			// 			this.is_reset = false
+			// 			this.formItem.setValue(this.dataValue)
+			// 		}
+			// 		this.rename = this.formItem.name
+			// 		this.form.inputChildrens.push(this)
+			// 	}
+			// }
+
+			if (this.localdata && this.localdata.length !== 0) {
+				this.isLocal = true
+				this.range = this.localdata
+				this.dataList = this.getDataList(this.getSelectedValue(this.range))
+			} else {
+				if (this.collection) {
+					this.isLocal = false
+					this.loadData()
+				}
+			}
+		},
+		methods: {
+			loadData() {
+				this.mixinDatacomGet().then(res=>{
+					this.mixinDatacomResData = res.result.data
+					if(this.mixinDatacomResData.length === 0){
+						this.isLocal = false
+						this.mixinDatacomErrorMessage = this.emptyText
+					}else{
+						this.isLocal = true
+					}
+				}).catch(err=>{
+					this.mixinDatacomErrorMessage = err.message
+				})
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniForms') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			chagne(e) {
+				const values = e.detail.value
+
+				let detail = {
+					value: [],
+					data: []
+				}
+
+				if (this.multiple) {
+					this.range.forEach(item => {
+
+						if (values.includes(item[this.map.value] + '')) {
+							detail.value.push(item[this.map.value])
+							detail.data.push(item)
+						}
+					})
+				} else {
+					const range = this.range.find(item => (item[this.map.value] + '') === values)
+					if (range) {
+						detail = {
+							value: range[this.map.value],
+							data: range
+						}
+					}
+				}
+				// this.formItem && this.formItem.setValue(detail.value)
+				// TODO 兼容 vue2
+				this.$emit('input', detail.value);
+				// // TOTO 兼容 vue3
+				this.$emit('update:modelValue', detail.value);
+				this.$emit('change', {
+					detail
+				})
+				if (this.multiple) {
+					// 如果 v-model 没有绑定 ，则走内部逻辑
+					// if (this.value.length === 0) {
+					this.dataList = this.getDataList(detail.value, true)
+					// }
+				} else {
+					this.dataList = this.getDataList(detail.value)
+				}
+			},
+
+			/**
+			 * 获取渲染的新数组
+			 * @param {Object} value 选中内容
+			 */
+			getDataList(value) {
+				// 解除引用关系，破坏原引用关系，避免污染源数据
+				let dataList = JSON.parse(JSON.stringify(this.range))
+				let list = []
+				if (this.multiple) {
+					if (!Array.isArray(value)) {
+						value = []
+					}
+				}
+				dataList.forEach((item, index) => {
+					item.disabled = item.disable || item.disabled || false
+					if (this.multiple) {
+						if (value.length > 0) {
+							let have = value.find(val => val === item[this.map.value])
+							item.selected = have !== undefined
+						} else {
+							item.selected = false
+						}
+					} else {
+						item.selected = value === item[this.map.value]
+					}
+
+					list.push(item)
+				})
+				return this.setRange(list)
+			},
+			/**
+			 * 处理最大最小值
+			 * @param {Object} list
+			 */
+			setRange(list) {
+				let selectList = list.filter(item => item.selected)
+				let min = Number(this.min) || 0
+				let max = Number(this.max) || ''
+				list.forEach((item, index) => {
+					if (this.multiple) {
+						if (selectList.length <= min) {
+							let have = selectList.find(val => val[this.map.value] === item[this.map.value])
+							if (have !== undefined) {
+								item.disabled = true
+							}
+						}
+
+						if (selectList.length >= max && max !== '') {
+							let have = selectList.find(val => val[this.map.value] === item[this.map.value])
+							if (have === undefined) {
+								item.disabled = true
+							}
+						}
+					}
+					this.setStyles(item, index)
+					list[index] = item
+				})
+				return list
+			},
+			/**
+			 * 设置 class
+			 * @param {Object} item
+			 * @param {Object} index
+			 */
+			setStyles(item, index) {
+				//  设置自定义样式
+				item.styleBackgroud = this.setStyleBackgroud(item)
+				item.styleIcon = this.setStyleIcon(item)
+				item.styleIconText = this.setStyleIconText(item)
+				item.styleRightIcon = this.setStyleRightIcon(item)
+			},
+
+			/**
+			 * 获取选中值
+			 * @param {Object} range
+			 */
+			getSelectedValue(range) {
+				if (!this.multiple) return this.dataValue
+				let selectedArr = []
+				range.forEach((item) => {
+					if (item.selected) {
+						selectedArr.push(item[this.map.value])
+					}
+				})
+				return this.dataValue.length > 0 ? this.dataValue : selectedArr
+			},
+
+			/**
+			 * 设置背景样式
+			 */
+			setStyleBackgroud(item) {
+				let styles = {}
+				let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
+				if (this.selectedColor) {
+					if (this.mode !== 'list') {
+						styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
+					}
+					if (this.mode === 'tag') {
+						styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
+					}
+				}
+				let classles = ''
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleIcon(item) {
+				let styles = {}
+				let classles = ''
+				if (this.selectedColor) {
+					let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
+					styles['background-color'] = item.selected?selectedColor:'#fff'
+					styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
+					
+					if(!item.selected && item.disabled){
+						styles['background-color'] = '#F2F6FC'
+						styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
+					}
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleIconText(item) {
+				let styles = {}
+				let classles = ''
+				if (this.selectedColor) {
+					let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
+					if (this.mode === 'tag') {
+						styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
+					} else {
+						styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
+					}
+					if(!item.selected && item.disabled){
+						styles.color = '#999'
+					}
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleRightIcon(item) {
+				let styles = {}
+				let classles = ''
+				if (this.mode === 'list') {
+					styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+
+				return classles
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #2979ff !default;
+	$border-color: #DCDFE6;
+	$disable:0.4;
+
+	@mixin flex {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+	}
+
+	.uni-data-loading {
+		@include flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 36px;
+		padding-left: 10px;
+		color: #999;
+	}
+
+	.uni-data-checklist {
+		position: relative;
+		z-index: 0;
+		flex: 1;
+		// 多选样式
+		.checklist-group {
+			@include flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+
+			&.is-list {
+				flex-direction: column;
+			}
+
+			.checklist-box {
+				@include flex;
+				flex-direction: row;
+				align-items: center;
+				position: relative;
+				margin: 5px 0;
+				margin-right: 25px;
+
+				.hidden {
+					position: absolute;
+					opacity: 0;
+				}
+
+				// 文字样式
+				.checklist-content {
+					@include flex;
+					flex: 1;
+					flex-direction: row;
+					align-items: center;
+					justify-content: space-between;
+					.checklist-text {
+						font-size: 14px;
+						color: #666;
+						margin-left: 5px;
+						line-height: 14px;
+					}
+
+					.checkobx__list {
+						border-right-width: 1px;
+						border-right-color: #007aff;
+						border-right-style: solid;
+						border-bottom-width:1px;
+						border-bottom-color: #007aff;
+						border-bottom-style: solid;
+						height: 12px;
+						width: 6px;
+						left: -5px;
+						transform-origin: center;
+						transform: rotate(45deg);
+						opacity: 0;
+					}
+				}
+
+				// 多选样式
+				.checkbox__inner {
+					/* #ifndef APP-NVUE */
+					flex-shrink: 0;
+					box-sizing: border-box;
+					/* #endif */
+					position: relative;
+					width: 16px;
+					height: 16px;
+					border: 1px solid $border-color;
+					border-radius: 4px;
+					background-color: #fff;
+					z-index: 1;
+					.checkbox__inner-icon {
+						position: absolute;
+						/* #ifdef APP-NVUE */
+						top: 2px;
+						/* #endif */
+						/* #ifndef APP-NVUE */
+						top: 1px;
+						/* #endif */
+						left: 5px;
+						height: 8px;
+						width: 4px;
+						border-right-width: 1px;
+						border-right-color: #fff;
+						border-right-style: solid;
+						border-bottom-width:1px ;
+						border-bottom-color: #fff;
+						border-bottom-style: solid;
+						opacity: 0;
+						transform-origin: center;
+						transform: rotate(40deg);
+					}
+				}
+
+				// 单选样式
+				.radio__inner {
+					@include flex;
+					/* #ifndef APP-NVUE */
+					flex-shrink: 0;
+					box-sizing: border-box;
+					/* #endif */
+					justify-content: center;
+					align-items: center;
+					position: relative;
+					width: 16px;
+					height: 16px;
+					border: 1px solid $border-color;
+					border-radius: 16px;
+					background-color: #fff;
+					z-index: 1;
+
+					.radio__inner-icon {
+						width: 8px;
+						height: 8px;
+						border-radius: 10px;
+						opacity: 0;
+					}
+				}
+
+				// 默认样式
+				&.is--default {
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.radio__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+						}
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					// 选中
+					&.is-checked {
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+						.radio__inner {
+							border-color: $uni-primary;
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+						.checklist-text {
+							color: $uni-primary;
+						}
+						// 选中禁用
+						&.is-disable {
+							.checkbox__inner {
+								opacity: $disable;
+							}
+
+							.checklist-text {
+								opacity: $disable;
+							}
+							.radio__inner {
+								opacity: $disable;
+							}
+						}
+					}
+				}
+
+				// 按钮样式
+				&.is--button {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					transition: border-color 0.2s;
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						border: 1px #eee solid;
+						opacity: $disable;
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+						.radio__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					&.is-checked {
+						border-color: $uni-primary;
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+
+						.radio__inner {
+							border-color: $uni-primary;
+
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						// 选中禁用
+						&.is-disable {
+							opacity: $disable;
+						}
+					}
+				}
+
+				// 标签样式
+				&.is--tag {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					background-color: #f5f5f5;
+
+					.checklist-text {
+						margin: 0;
+						color: #666;
+					}
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						opacity: $disable;
+					}
+
+					&.is-checked {
+						background-color: $uni-primary;
+						border-color: $uni-primary;
+
+						.checklist-text {
+							color: #fff;
+						}
+					}
+				}
+				// 列表样式
+				&.is--list {
+					/* #ifndef APP-NVUE */
+					display: flex;
+					/* #endif */
+					padding: 10px 15px;
+					padding-left: 0;
+					margin: 0;
+
+					&.is-list-border {
+						border-top: 1px #eee solid;
+					}
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					&.is-checked {
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+						.radio__inner {
+							.radio__inner-icon {
+								opacity: 1;
+							}
+						}
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						.checklist-content {
+							.checkobx__list {
+								opacity: 1;
+								border-color: $uni-primary;
+							}
+						}
+
+						// 选中禁用
+						&.is-disable {
+							.checkbox__inner {
+								opacity: $disable;
+							}
+
+							.checklist-text {
+								opacity: $disable;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

uni_modules/uni-data-checkbox/package.json

@@ -0,0 +1,84 @@
+{
+  "id": "uni-data-checkbox",
+  "displayName": "uni-data-checkbox 数据选择器",
+  "version": "1.0.3",
+  "description": "通过数据驱动的单选框和复选框",
+  "keywords": [
+    "uni-ui",
+    "checkbox",
+    "单选",
+    "多选",
+    "单选多选"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.1"
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-load-more","uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-data-checkbox/readme.md

@@ -0,0 +1,18 @@
+
+
+## DataCheckbox 数据驱动的单选复选框
+> **组件名：uni-data-checkbox**
+> 代码块： `uDataCheckbox`
+
+
+本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
+
+1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
+2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
+3. 本组件合并了单选多选
+4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
+
+在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839