chubiao преди 1 година
родител
ревизия
a1e786eeb9

+ 0 - 1
App.vue

@@ -14,5 +14,4 @@
 </script>
 
 <style>
-	/*每个页面公共css */
 </style>

+ 38 - 73
api/login.js

@@ -1,89 +1,54 @@
-import request from '@/common/request.js'
-import config from '@/config.js'
-import {getAppLocal} from './app.js'
-import store from "@/store"
+import request from '@/utils/request'
 
-//发送验证码
-export const sendYzm = async  (data) => {
-	let r = await request({
-		url: config.server + '/school/api/sendSms',
-		method: 'POST',
-		encryption:true,
+// 注册方法
+export function register(data) {
+	return request({
+		url: '/business/registration',
+		method: 'post',
 		data: data
 	})
-	uni.showToast({
-		title: '验证码已经发送',
-		icon: "none",
-		duration: 2000
-	})
 }
-//验证验证码是否正确
-export const checkYzm = async  (data) => {
-	let r = await request({
-		url: config.server + '/school/api/checkCode',
-		method: 'POST',
-		encryption:true,
-		data: data
-	})
-	//1验证成功 0 未成功
-	return r
-}
-//注册用户
-export const register = async  (data) => {
-	let r = await request({
-		url: config.server + '/school/api/register',
-		method: 'POST',
-		encryption:true,
+
+// 登录方法
+export function login(username, password) {
+	const data = {
+		username,
+		password
+	}
+	return request({
+		url: '/auth/firstLogin',
+		headers: {
+			isToken: false
+		},
+		method: 'post',
 		data: data
 	})
-	//1验证成功 0 未成功
-	return r
 }
 
-
-//用户登录
-export const login = async  (data) => {
-	let user = await request({
-		url: config.server + '/school/api/login',
-		method: 'POST',
-		encryption:true,
-		data: data
+// 获取用户详细信息
+export function getInfo() {
+	return request({
+		url: '/getInfo',
+		method: 'get'
 	})
-	//登录成功初始化数据
-	
-	user.login = data
-	
-	//保存用户登录信息
-	uni.setStorage({
-	    key: 'user',
-	    data: user
-	});
-	
-
-	
-	
-	//保存用户登录信息
-	console.log('[用户信息]',uni.getStorageSync('user'))
-	
-	return true
 }
 
-//绑定用户身份
-export const bindIdentity = async  (data) => {
-	let r = await request({
-		url: config.server + '/school/api/identity/bind',
-		method: 'POST',
-		encryption:false,
-		data: data
+// 退出方法
+export function logout() {
+	return request({
+		url: '/logout',
+		method: 'post'
 	})
-	//1验证成功 0 未成功
-	return r
 }
 
-//登出
-export const logout = async  (data) => {
-	uni.clearStorageSync()
-	uni.reLaunch({
-		url: '/pages/login/pages/login.nvue'
+// 获取验证码
+export function getCodeImg() {
+	return request({
+		url: '/captchaImage',
+		headers: {
+			isToken: false
+		},
+		method: 'get',
+		timeout: 20000
 	})
 }

+ 13 - 0
common/auth.js

@@ -0,0 +1,13 @@
+const TokenKey = 'App-Token'
+
+export function getToken() {
+  return uni.getStorageSync(TokenKey)
+}
+
+export function setToken(token) {
+  return uni.setStorageSync(TokenKey, token)
+}
+
+export function removeToken() {
+  return uni.removeStorageSync(TokenKey)
+}

+ 97 - 0
common/common.js

@@ -0,0 +1,97 @@
+/**
+ * 显示消息提示框
+ * @param content 提示的标题
+ */
+export function toast(content) {
+	uni.showToast({
+		icon: 'none',
+		title: content
+	})
+}
+
+/**
+ * 显示模态弹窗
+ * @param content 提示的标题
+ */
+export function showConfirm(content) {
+	return new Promise((resolve, reject) => {
+		uni.showModal({
+			title: '提示',
+			content: content,
+			cancelText: '取消',
+			confirmText: '确定',
+			success: function(res) {
+				resolve(res)
+			}
+		})
+	})
+}
+
+/**
+ * 参数处理
+ * @param params 参数
+ */
+export function tansParams(params) {
+	let result = ''
+	for (const propName of Object.keys(params)) {
+		const value = params[propName]
+		var part = encodeURIComponent(propName) + "="
+		if (value !== null && value !== "" && typeof(value) !== "undefined") {
+			if (typeof value === 'object') {
+				for (const key of Object.keys(value)) {
+					if (value[key] !== null && value[key] !== "" && typeof(value[key]) !== 'undefined') {
+						let params = propName + '[' + key + ']'
+						var subPart = encodeURIComponent(params) + "="
+						result += subPart + encodeURIComponent(value[key]) + "&"
+					}
+				}
+			} else {
+				result += part + encodeURIComponent(value) + "&"
+			}
+		}
+	}
+	return result
+}
+
+// 返回上一页
+export function back() {
+	uni.navigateBack({
+		delta: 1
+	})
+}
+
+// 页面跳转
+export function navigateTo(url) {
+	uni.navigateTo({
+		url: url
+	})
+}
+
+// 回显数据字典
+export function selectDictLabel(datas, value) {
+	if (value === undefined) {
+		return "";
+	}
+	var actions = [];
+	Object.keys(datas).some((key) => {
+		if (datas[key].dictValue == ('' + value)) {
+			actions.push(datas[key].dictLabel);
+			return true;
+		}
+	})
+	if (actions.length === 0) {
+		actions.push(value);
+	}
+	return actions.join('');
+}
+
+// 递归遍历多维数组(未完成)
+export function traverseArray(arr, callback) {
+	if (Array.isArray(arr)) {
+		arr.forEach((element) => {
+			traverseArray(element);
+		});
+	} else {
+		callback(arr)
+	}
+}

+ 49 - 80
common/request.js

@@ -1,88 +1,57 @@
-import config from '../config.js'
-import {login} from '@/api/login.js'
-//请求
-function request (req) {
-	
-	let data = req.data
-	const method = req.method
-	const url = req.url
-	let loading = false
-	if (req.data.loading){
-		loading = data.loading
-		delete data.loading
-	}
-	
-	let header = {
-		'Content-Type': 'application/json',
-		'timestamp': Date.parse(new Date()),
-		// 'token': uni.getStorageSync('user').access_token,
-		'Authorization':'Bearer ' + uni.getStorageSync('user').access_token
-	}
-	if (loading){
-		uni.hideLoading()
-		uni.showLoading({
-		    title: '请求中',
-			mask:true
-		})
+import { getToken } from './auth.js'
+import { toast } from './common.js'
+
+const BASE_URL = 'http://121.36.73.159:807/prod-api'
+
+const request = config => {
+	config.header = config.header || {}
+	if (getToken()) {
+		config.header['Authorization'] = 'Bearer ' + getToken()
 	}
+
 	return new Promise((resolve, reject) => {
-		console.log('REQ ==>', url)
-		console.log( data )
 		uni.request({
-			url: url, 
-			data: data,
-			header: header,
-			method: method.toUpperCase(),
-			timeout:1000 * 60 * 3, //超时三分钟
-			success: async (res) => {
-				uni.hideLoading()
-				console.log("RES <==", url)
-				console.log( res )
-				
-				
-				if (res.statusCode == 200 && res.data.code == 200){
-					resolve(res.data.data)
-				}else if (res.statusCode == 401){
-					//处理token验证出错
-					console.log('Token过期')
-					if (!uni.getStorageSync('user')){
-						//其他设备登录了
-						uni.reLaunch({
-							url: '/pages/login/pages/login'
-						});
-					}else{
-						//token续租
-						let r = await login(uni.getStorageSync('user').login)
-						let result = await request (req)
-					}
-				}else{
-					console.error(res.data.msg)
-					if (res.data.msg == '登录状态已过期'){
-						uni.reLaunch({
-							url: '/pages/login/pages/login'
-						})
+			header: config.header,
+			method: config.method.toUpperCase() || 'GET',
+			dataType: 'json',
+			timeout: config.timeout || 10000,
+			url: config.baseUrl || BASE_URL + config.url,
+			data: config.data,
+		}).then((response) => {
+			let [error, res] = response
+			if (error) {
+				toast('后端接口连接异常')
+				reject('后端接口连接异常')
+				return
+			}
+			const code = res.data.code || 200
+			const msg = res.data.msg || '未知错误,请反馈给管理员'
+
+			if (code === 401) {
+				showConfirm('登录状态已过期,您可以继续留在该页面,或者重新登录').then(res => {
+					if (res.confirm) {
+						uni.reLaunch({ url: '/pages/login/login' })
 					}
-					uni.showToast({
-					    title: res.data.msg,
-						icon: "none",
-						position:"bottom",
-					    duration: 3000
-					})
-					reject(false)
-				}
-			},
-			fail: (err) => {
-				uni.hideLoading()	
-				uni.showToast({
-				    title: '服务器休息中,请稍后再试',
-					icon: "none",
-					position:"center",
-				    duration: 3000
-				});
-				console.error(url, err)
-				reject(err)
+				})
+				reject('无效的会话,或者会话已过期,请重新登录')
+			} else if (code !== 200) {
+				toast(msg)
+				reject(code)
 			}
-		});
+			
+			resolve(res.data)
+		}).catch(error => {
+			let { message } = error
+			if (message === 'Network Error') {
+				message = '后端接口连接异常'
+			} else if (message.includes('timeout')) {
+				message = '系统接口请求超时'
+			} else if (message.includes('Request failed with status code')) {
+				message = '系统接口' + message.substr(message.length - 3) + '异常'
+			}
+			toast(message)
+			reject(error)
+		})
 	})
 }
 

+ 3 - 1
config.js

@@ -1,7 +1,9 @@
+
 const build = {
 	"service" : "https://www.baidu.com",
 	"gaodeKey":"e6b77a8d407630b07f915c0f40eebd15"
 }
 
 
-export default build
+export default build
+

+ 9 - 5
main.js

@@ -1,12 +1,16 @@
+import uView from 'uview-ui'
+import "uview-ui/index.scss";
 import App from './App'
 
+Vue.use(uView)
+
 // #ifndef VUE3
 import Vue from 'vue'
 import './uni.promisify.adaptor'
 Vue.config.productionTip = false
 App.mpType = 'app'
 const app = new Vue({
-  ...App
+	...App
 })
 app.$mount()
 // #endif
@@ -14,9 +18,9 @@ app.$mount()
 // #ifdef VUE3
 import { createSSRApp } from 'vue'
 export function createApp() {
-  const app = createSSRApp(App)
-  return {
-    app
-  }
+	const app = createSSRApp(App)
+	return {
+		app
+	}
 }
 // #endif

+ 6 - 2
manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx3698a63d3e6b3652",
+        "appid" : "wx52fe622305759379",
         "setting" : {
             "urlCheck" : false,
             "es6" : true,
@@ -58,6 +58,7 @@
             "postcss" : true
         },
         "usingComponents" : true,
+
 		"requiredPrivateInfos":[
 			"getLocation",
 			"chooseLocation"
@@ -66,7 +67,10 @@
             "scope.userLocation" : {
                 "desc" : "获取您的位置信息"
             }
-        }
+        },
+
+		"libVersion": "latest"  
+
     },
     "mp-alipay" : {
         "usingComponents" : true

+ 9 - 8
package.json

@@ -1,9 +1,10 @@
 {
-  "devDependencies": {
-    "sass": "^1.69.7",
-    "sass-loader": "^10.1.1"
-  },
-  "dependencies": {
-    "@dcloudio/uni-app": "^2.0.2-3090920231225001"
-  }
-}
+	"devDependencies": {
+		"sass": "^1.69.7",
+		"sass-loader": "^10.1.1"
+	},
+	"dependencies": {
+		"@dcloudio/uni-app": "^2.0.2-3090920231225001",
+		"uview-ui": "^2.0.36"
+	}
+}

+ 13 - 2
pages.json

@@ -24,7 +24,11 @@
 			}
 		]
 	},
-
+	
+	"easycom": {
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+	},
+	
 	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
 		{
 			"path": "pages/index/index",
@@ -32,12 +36,19 @@
 				"navigationBarTitleText": "首页"
 			}
 		},
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		},
 		{
 			"path": "pages/my/index",
 			"style": {
 				"navigationBarTitleText": "个人中心",
 				"enablePullDownRefresh": true,
-				"onReachBottomDistance":100//距离底部100像素时,触发加载更多功能
+				"onReachBottomDistance": 100 //距离底部100像素时,触发加载更多功能
 			}
 		},
 		{

+ 23 - 0
pages/login/login.vue

@@ -0,0 +1,23 @@
+<template>
+	<view class="u-line-1">
+		<u-icon name="photo-fill" color="#2979ff" size="28"></u-icon>
+		<u-input v-model="value" type="number" placeholder="请输入手机号" :border="true" clearable />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: '',
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "uview-ui/index.scss";
+</style>

+ 190 - 6
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>
@@ -45,7 +45,7 @@
 					</uni-forms-item>
 					<uni-forms-item label="定位">
 						<view @click="openChooseLocation">
-							<uni-easyinput v-model="baseFormData.dw" placeholder="请选择定位" disabled/>
+							<uni-easyinput v-model="baseFormData.dw" placeholder="请选择定位" disabled />
 						</view>
 					</uni-forms-item>
 					<uni-forms-item label="监护人">
@@ -54,7 +54,34 @@
 					<uni-forms-item label="监护人手机号码">
 						<uni-easyinput v-model="baseFormData.jhrsjhm" placeholder="请输入监护人手机号码" />
 					</uni-forms-item>
-					<button type="primary" @click="add('baseForm')">提交</button>
+					<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>
@@ -74,7 +101,7 @@
 	export default {
 		data() {
 			return {
-				active: 1,
+				active: 0,
 				list: [{
 					title: '基本信息'
 				}, {
@@ -117,13 +144,28 @@
 								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: {
 					khxm: '',
 					lng: '',
 					lat: '',
-					dw: ''
+					dw: '',
+					jntcIszy:'0',
+					xqah:[],
+					jntc:[],
+					tkfl:[]
 				},
 				sexData: [{
 						value: 1,
@@ -169,6 +211,148 @@
 						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,

+ 2 - 0
uni.scss

@@ -12,6 +12,8 @@
  * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  */
 
+@import 'uview-ui/theme.scss';
+
 /* 颜色变量 */
 
 /* 行为相关颜色 */

+ 2 - 0
uni_modules/csr-tab/changelog.md

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

+ 137 - 0
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>

+ 84 - 0
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"
+        }
+      }
+    }
+  }
+}

+ 17 - 0
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	|点击事件时触发,返回对应数据|

+ 539 - 0
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;
+}

+ 239 - 0
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>

Файловите разлики са ограничени, защото са твърде много
+ 29 - 0
uni_modules/csr-tab/static/iconfont.css


BIN
uni_modules/csr-tab/static/iconfont.eot


Файловите разлики са ограничени, защото са твърде много
+ 1 - 0
uni_modules/csr-tab/static/iconfont.js


Файловите разлики са ограничени, защото са твърде много
+ 35 - 0
uni_modules/csr-tab/static/iconfont.svg


BIN
uni_modules/csr-tab/static/iconfont.ttf


BIN
uni_modules/csr-tab/static/iconfont.woff


BIN
uni_modules/csr-tab/static/iconfont.woff2


+ 45 - 0
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)
+- “暂无数据”显示居中

+ 821 - 0
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>

+ 84 - 0
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"
+        }
+      }
+    }
+  }
+}

+ 18 - 0
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