parent
7156a3adc6
commit
8fb9de3ac6
37 changed files with 3052 additions and 658 deletions
@ -0,0 +1,391 @@ |
||||
<template> |
||||
<view class="page-box"> |
||||
<view class="page-header-txt">科研医疗建筑运维平台</view> |
||||
<scroll-view class="wxaSortPickerList" scroll-y="true"> </scroll-view> |
||||
<view class="page-search-top"> |
||||
<betone-new-input v-model="searchInfo.requirementCode" |
||||
:placeholder="dataType == 1 ? '搜索维修单单号' : '搜索维修单单号或单位名称'" icon="search" style="margin-bottom: 32rpx" |
||||
@changevalue="searchData()" /> |
||||
<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="changeTab" |
||||
bg-color="rgba(248, 248, 248, 1)"></u-tabs> |
||||
</view> |
||||
<view class="order-box"> |
||||
<view class="order-item" v-for="(item, index) in orderData" :key="index" @click="goPage(item, 'details')"> |
||||
<view class="item-top"> |
||||
<view class="item-left" v-if="dataType == 1"> |
||||
<text class="item-orderNo">单号：{{ item.requirementCode }}</text> |
||||
<text class="item-time"> {{ item.fillingTime }}</text> |
||||
</view> |
||||
<view class="item-left" v-else> |
||||
<text class="item-orderNo">{{ item.reportUnit }}</text> |
||||
<text class="item-time"> 单号：{{ item.requirementCode }} {{ item.fillingTime }}</text> |
||||
</view> |
||||
<view class="item-right"> |
||||
<u-tag :text="statusName(item.status)" type="success" mode="dark" shape="circle" |
||||
:bg-color="tagColor[statusName(item.status)]" /> |
||||
</view> |
||||
</view> |
||||
<view class="item-con"> |
||||
<view class="con-left"> |
||||
<image src="@/static/images/pic-default.png" alt="" /> |
||||
</view> |
||||
<view class="con-right"> |
||||
<text class="con-title">提报类型：{{ item.faultType }}</text> |
||||
<view class="con-content"> |
||||
<text>{{ item.faultDescribe }}</text> |
||||
</view> |
||||
<view class="con-btn"> |
||||
<!-- 所有状态都有 --> |
||||
<u-button size="mini" plain style="margin-right: 32rpx" |
||||
@click.stop="goPage(item, 'breakdownView')">查看</u-button> |
||||
<!-- 待提报 --提报 修改--> |
||||
<block v-if="item.status == -1"> |
||||
<u-button size="mini" :plain="true" style="margin-right: 32rpx" :hair-line="true" |
||||
type="primary" @click="subOrder(item)">提报</u-button> |
||||
<u-button size="mini" :plain="true" style="margin-right: 32rpx" :hair-line="true" |
||||
type="primary" @click="goPage(item, 'breakdownUpdate')">修改</u-button> |
||||
</block> |
||||
<!-- 待维修 -- 查看位置--> |
||||
<block v-if="(item.status == 1 || item.status == 2 || item.status == 3)"> |
||||
<u-button size="mini" :plain="true" style="margin-right: 32rpx" :hair-line="true" |
||||
type="primary">查看位置</u-button> |
||||
</block> |
||||
|
||||
<block v-if="item.status == 5"> |
||||
<u-button size="mini" :plain="true" style="margin-right: 32rpx" :hair-line="true" |
||||
type="primary" @click="goPage(item, 'evaluate')">评价</u-button> |
||||
|
||||
</block> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<u-loadmore margin-top="10" margin-bottom="40" :status="loadingState" /> |
||||
|
||||
<betone-loading ref="BetLoading" /> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
tabList: { |
||||
type: Array, |
||||
default: [] |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
searchInfo: { |
||||
requirementCode: "", |
||||
type: '',//状态 |
||||
reportUnit: '',//提报单位 |
||||
}, |
||||
tagColor: { |
||||
维修中: "#3A62D7", |
||||
待确认: "#81B337", |
||||
待维修: "#3A62D7", |
||||
待提报: "#81B337", |
||||
已完成: "#CECECE", |
||||
待维修: '#E99D42' |
||||
}, |
||||
|
||||
current: 0, |
||||
loadingState: "loadmore", |
||||
isNomore: false, |
||||
noDataFlag: false, |
||||
|
||||
orderData: [], |
||||
page: { |
||||
currentPage: 1, |
||||
pageSize: 3, |
||||
}, |
||||
|
||||
dataType: this.$store.state.dataType |
||||
}; |
||||
}, |
||||
computed: { |
||||
noData() { |
||||
return this.orderData && this.orderData.length == 0; |
||||
}, |
||||
}, |
||||
|
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.getRecordsList() |
||||
// 触底触发 |
||||
uni.$on('onReachBottom', () => { |
||||
if (this.isNomore) { |
||||
return; |
||||
} |
||||
this.page.currentPage++; |
||||
this.getRecordsList(); |
||||
}) |
||||
// 下拉刷新 |
||||
uni.$on('onPullDownRefresh', () => { |
||||
this.isNomore = false |
||||
this.page.currentPage = 1; |
||||
this.getRecordsList(); |
||||
uni.stopPullDownRefresh(); |
||||
}); |
||||
}); |
||||
}, |
||||
methods: { |
||||
getRecordsList() { |
||||
this.$refs.BetLoading.show(); |
||||
this.loadingState = "loading"; |
||||
let query = { |
||||
current: this.page.currentPage, //页数 |
||||
size: this.page.pageSize, //条数 |
||||
dataType: this.dataType,//数据权限 |
||||
// ...this.searchInfo |
||||
reportUnit: this.searchInfo.reportUnit |
||||
} |
||||
|
||||
this.$u.api.getWorkOrderRecords(query).then(res => { |
||||
if (res.code == 200) { |
||||
|
||||
var totalPage = res.data.total; |
||||
var newOrders = res.data.records; |
||||
if (this.page.currentPage == 1) { |
||||
this.orderData = []; |
||||
} |
||||
|
||||
this.orderData = [...this.orderData, ...(res.data.records || [])]; |
||||
if (newOrders.length == 0) { |
||||
this.loadingState = "nomore"; |
||||
this.isNomore = true; |
||||
} |
||||
if (totalPage == this.orderData.length) { |
||||
this.loadingState = "nomore"; |
||||
this.isNomore = true; |
||||
} |
||||
this.$refs.BetLoading.hide(); |
||||
} |
||||
}).catch(err => { |
||||
|
||||
}) |
||||
}, |
||||
// 搜索 单号 |
||||
searchData() { |
||||
if (this.dataType != 1) { |
||||
// 非管理员和客户 不传提报单位 |
||||
this.searchInfo.reportUnit = this.searchInfo.requirementCode |
||||
} else { |
||||
this.searchInfo.reportUnit = '' |
||||
} |
||||
this.isNomore = false |
||||
this.page.currentPage = 1; |
||||
this.getRecordsList() |
||||
}, |
||||
// tab切换 |
||||
changeTab(index) { |
||||
this.current = index; |
||||
this.searchInfo.type = this.tabList[index].key == '9999' ? '' : this.tabList[index].key |
||||
this.isNomore = false |
||||
this.page.currentPage = 1; |
||||
this.getRecordsList() |
||||
}, |
||||
// 获取状态信息 |
||||
statusName(item) { |
||||
if (item == -1) { |
||||
return '待提报' |
||||
} |
||||
if (item == 0) { |
||||
return '待接单' |
||||
} |
||||
if (item == 1 || item == 2 || item == 3) { |
||||
return '待维修' |
||||
} |
||||
if (item == 4 || item == 5 || item == 6) { |
||||
return '已完成' |
||||
} |
||||
}, |
||||
refreshData() { |
||||
this.page.currentPage = 1; |
||||
this.orderData = []; |
||||
this.loadingState = "loading"; |
||||
this.getRecordsList(); |
||||
}, |
||||
// 提报按钮 |
||||
subOrder(row) { |
||||
let query_ = [row] |
||||
this.$u.api.workOrderSave(query_).then(res => { |
||||
this.$refs.BetLoading.hide(); |
||||
if (res.code == 200) { |
||||
uni.navigateBack({ |
||||
delta: 1 // 默认值是1，表示返回的页面层数 |
||||
}) |
||||
} |
||||
}).catch(err => { |
||||
this.$refs.BetLoading.hide(); |
||||
}) |
||||
}, |
||||
// 跳转详情 |
||||
goPage(item, type) { |
||||
if (type == 'details') { |
||||
uni.navigateTo({ |
||||
url: "/pages/submission/recordsdetails?id=" + item.id, |
||||
}); |
||||
} |
||||
|
||||
if (type == 'breakdownView') { |
||||
let param = { |
||||
id: item.id, |
||||
type: type |
||||
} |
||||
uni.navigateTo({ |
||||
url: `/pages/submission/submissionDetails${this.$u.queryParams(param)}`, |
||||
}); |
||||
} |
||||
if (type == 'breakdownUpdate') { |
||||
let param = { |
||||
id: item.id, |
||||
type: type |
||||
} |
||||
uni.navigateTo({ |
||||
url: `/pages/submission/submissionDetails${this.$u.queryParams(param)}`, |
||||
}); |
||||
} |
||||
if (type == 'evaluate') { |
||||
let param = { |
||||
id: item.id, |
||||
} |
||||
uni.navigateTo({ |
||||
url: `/pages/submission/evaluate${this.$u.queryParams(param)}`, |
||||
}); |
||||
} |
||||
}, |
||||
|
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.page-box { |
||||
padding: 0; |
||||
|
||||
.page-search-top { |
||||
height: 210rpx; |
||||
background-color: rgba(248, 248, 248, 1); |
||||
padding: 0 40rpx 0; |
||||
} |
||||
|
||||
.order-box { |
||||
margin-top: 20rpx; |
||||
|
||||
.order-item { |
||||
height: 414rpx; |
||||
margin: 0 24rpx 20rpx; |
||||
border-radius: 20rpx; |
||||
background: #fff; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.item-top { |
||||
height: 114rpx; |
||||
border-bottom: 1px solid rgba(239, 239, 239, 1); |
||||
display: flex; |
||||
flex-direction: row; |
||||
width: 100%; |
||||
|
||||
.item-left { |
||||
flex: 1; |
||||
|
||||
text { |
||||
display: block; |
||||
} |
||||
|
||||
.item-orderNo { |
||||
color: rgba(51, 51, 51, 1); |
||||
font-size: 28rpx; |
||||
padding: 12rpx 0 0 26rpx; |
||||
} |
||||
|
||||
.item-time { |
||||
color: rgba(190, 190, 190, 1); |
||||
font-size: 24rpx; |
||||
padding: 12rpx 0 0 26rpx; |
||||
} |
||||
} |
||||
|
||||
.item-right { |
||||
width: 132rpx; |
||||
height: 48rpx; |
||||
margin: 36rpx 24rpx 0 0; |
||||
} |
||||
} |
||||
|
||||
.item-con { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: row; |
||||
|
||||
.con-left { |
||||
width: 150rpx; |
||||
height: 150rpx; |
||||
margin: 24rpx 28rpx 0 28rpx; |
||||
|
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.con-right { |
||||
flex: 1; |
||||
margin-right: 24rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
text { |
||||
display: block; |
||||
} |
||||
|
||||
.con-title { |
||||
margin-top: 12rpx; |
||||
line-height: 60rpx; |
||||
color: rgba(0, 0, 0, 1); |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
.con-content { |
||||
|
||||
color: rgba(108, 108, 108, 1); |
||||
font-size: 24rpx; |
||||
// line-height: 36rpx; |
||||
margin-top: 14rpx; |
||||
flex: 1; |
||||
|
||||
text { |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
line-height: 1.5em; |
||||
/* 这个值根据你的需求调整，这里假设为1.5倍行高 */ |
||||
max-height: 3em; |
||||
/* 3行的高度 */ |
||||
width: 100%; |
||||
/* 根据需要设置宽度 */ |
||||
word-wrap: break-word; |
||||
/* 允许在单词内换行 */ |
||||
word-break: break-all; |
||||
/* 允许在任意字符处换行 */ |
||||
} |
||||
} |
||||
|
||||
.con-btn { |
||||
margin-top: 56rpx; |
||||
margin-bottom: 32rpx; |
||||
display: inline-block; |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,51 @@ |
||||
## 1.0.6（2024-10-22） |
||||
- 新增 当 multiple 为 false 且传递的 value 为 数组时，使用数组第一项用作反显 |
||||
## 1.0.5（2024-03-20） |
||||
- 修复 单选模式下选中样式不生效的bug |
||||
## 1.0.4（2024-01-27） |
||||
- 修复 修复错别字chagne为change |
||||
## 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） |
||||
- “暂无数据”显示居中 |
||||
@ -0,0 +1,316 @@ |
||||
|
||||
const events = { |
||||
load: 'load', |
||||
error: 'error' |
||||
} |
||||
const pageMode = { |
||||
add: 'add', |
||||
replace: 'replace' |
||||
} |
||||
|
||||
const attrs = [ |
||||
'pageCurrent', |
||||
'pageSize', |
||||
'collection', |
||||
'action', |
||||
'field', |
||||
'getcount', |
||||
'orderby', |
||||
'where' |
||||
] |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
listData: this.getone ? {} : [], |
||||
paginationInternal: { |
||||
current: this.pageCurrent, |
||||
size: this.pageSize, |
||||
count: 0 |
||||
}, |
||||
errorMessage: '' |
||||
} |
||||
}, |
||||
created() { |
||||
let db = null; |
||||
let dbCmd = null; |
||||
|
||||
if(this.collection){ |
||||
this.db = uniCloud.database(); |
||||
this.dbCmd = this.db.command; |
||||
} |
||||
|
||||
this._isEnded = false |
||||
|
||||
this.$watch(() => { |
||||
let al = [] |
||||
attrs.forEach(key => { |
||||
al.push(this[key]) |
||||
}) |
||||
return al |
||||
}, (newValue, oldValue) => { |
||||
this.paginationInternal.pageSize = this.pageSize |
||||
|
||||
let needReset = false |
||||
for (let i = 2; i < newValue.length; i++) { |
||||
if (newValue[i] != oldValue[i]) { |
||||
needReset = true |
||||
break |
||||
} |
||||
} |
||||
if (needReset) { |
||||
this.clear() |
||||
this.reset() |
||||
} |
||||
if (newValue[0] != oldValue[0]) { |
||||
this.paginationInternal.current = this.pageCurrent |
||||
} |
||||
|
||||
this._execLoadData() |
||||
}) |
||||
|
||||
// #ifdef H5
|
||||
if (process.env.NODE_ENV === 'development') { |
||||
this._debugDataList = [] |
||||
if (!window.unidev) { |
||||
window.unidev = { |
||||
clientDB: { |
||||
data: [] |
||||
} |
||||
} |
||||
} |
||||
unidev.clientDB.data.push(this._debugDataList) |
||||
} |
||||
// #endif
|
||||
|
||||
// #ifdef MP-TOUTIAO
|
||||
let changeName |
||||
let events = this.$scope.dataset.eventOpts |
||||
for (let i = 0; i < events.length; i++) { |
||||
let event = events[i] |
||||
if (event[0].includes('^load')) { |
||||
changeName = event[1][0][0] |
||||
} |
||||
} |
||||
if (changeName) { |
||||
let parent = this.$parent |
||||
let maxDepth = 16 |
||||
this._changeDataFunction = null |
||||
while (parent && maxDepth > 0) { |
||||
let fun = parent[changeName] |
||||
if (fun && typeof fun === 'function') { |
||||
this._changeDataFunction = fun |
||||
maxDepth = 0 |
||||
break |
||||
} |
||||
parent = parent.$parent |
||||
maxDepth--; |
||||
} |
||||
} |
||||
// #endif
|
||||
|
||||
// if (!this.manual) {
|
||||
// this.loadData()
|
||||
// }
|
||||
}, |
||||
// #ifdef H5
|
||||
beforeDestroy() { |
||||
if (process.env.NODE_ENV === 'development' && window.unidev) { |
||||
let cd = this._debugDataList |
||||
let dl = unidev.clientDB.data |
||||
for (let i = dl.length - 1; i >= 0; i--) { |
||||
if (dl[i] === cd) { |
||||
dl.splice(i, 1) |
||||
break |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
// #endif
|
||||
methods: { |
||||
loadData(args1, args2) { |
||||
let callback = null |
||||
if (typeof args1 === 'object') { |
||||
if (args1.clear) { |
||||
this.clear() |
||||
this.reset() |
||||
} |
||||
if (args1.current !== undefined) { |
||||
this.paginationInternal.current = args1.current |
||||
} |
||||
if (typeof args2 === 'function') { |
||||
callback = args2 |
||||
} |
||||
} else if (typeof args1 === 'function') { |
||||
callback = args1 |
||||
} |
||||
|
||||
this._execLoadData(callback) |
||||
}, |
||||
loadMore() { |
||||
if (this._isEnded) { |
||||
return |
||||
} |
||||
this._execLoadData() |
||||
}, |
||||
refresh() { |
||||
this.clear() |
||||
this._execLoadData() |
||||
}, |
||||
clear() { |
||||
this._isEnded = false |
||||
this.listData = [] |
||||
}, |
||||
reset() { |
||||
this.paginationInternal.current = 1 |
||||
}, |
||||
remove(id, { |
||||
action, |
||||
callback, |
||||
confirmTitle, |
||||
confirmContent |
||||
} = {}) { |
||||
if (!id || !id.length) { |
||||
return |
||||
} |
||||
uni.showModal({ |
||||
title: confirmTitle || '提示', |
||||
content: confirmContent || '是否删除该数据', |
||||
showCancel: true, |
||||
success: (res) => { |
||||
if (!res.confirm) { |
||||
return |
||||
} |
||||
this._execRemove(id, action, callback) |
||||
} |
||||
}) |
||||
}, |
||||
_execLoadData(callback) { |
||||
if (this.loading) { |
||||
return |
||||
} |
||||
this.loading = true |
||||
this.errorMessage = '' |
||||
|
||||
this._getExec().then((res) => { |
||||
this.loading = false |
||||
const { |
||||
data, |
||||
count |
||||
} = res.result |
||||
this._isEnded = data.length < this.pageSize |
||||
|
||||
callback && callback(data, this._isEnded) |
||||
this._dispatchEvent(events.load, data) |
||||
|
||||
if (this.getone) { |
||||
this.listData = data.length ? data[0] : undefined |
||||
} else if (this.pageData === pageMode.add) { |
||||
this.listData.push(...data) |
||||
if (this.listData.length) { |
||||
this.paginationInternal.current++ |
||||
} |
||||
} else if (this.pageData === pageMode.replace) { |
||||
this.listData = data |
||||
this.paginationInternal.count = count |
||||
} |
||||
|
||||
// #ifdef H5
|
||||
if (process.env.NODE_ENV === 'development') { |
||||
this._debugDataList.length = 0 |
||||
this._debugDataList.push(...JSON.parse(JSON.stringify(this.listData))) |
||||
} |
||||
// #endif
|
||||
}).catch((err) => { |
||||
this.loading = false |
||||
this.errorMessage = err |
||||
callback && callback() |
||||
this.$emit(events.error, err) |
||||
}) |
||||
}, |
||||
_getExec() { |
||||
let exec = this.db |
||||
if (this.action) { |
||||
exec = exec.action(this.action) |
||||
} |
||||
|
||||
exec = exec.collection(this.collection) |
||||
|
||||
if (!(!this.where || !Object.keys(this.where).length)) { |
||||
exec = exec.where(this.where) |
||||
} |
||||
if (this.field) { |
||||
exec = exec.field(this.field) |
||||
} |
||||
if (this.orderby) { |
||||
exec = exec.orderBy(this.orderby) |
||||
} |
||||
|
||||
const { |
||||
current, |
||||
size |
||||
} = this.paginationInternal |
||||
exec = exec.skip(size * (current - 1)).limit(size).get({ |
||||
getCount: this.getcount |
||||
}) |
||||
|
||||
return exec |
||||
}, |
||||
_execRemove(id, action, callback) { |
||||
if (!this.collection || !id) { |
||||
return |
||||
} |
||||
|
||||
const ids = Array.isArray(id) ? id : [id] |
||||
if (!ids.length) { |
||||
return |
||||
} |
||||
|
||||
uni.showLoading({ |
||||
mask: true |
||||
}) |
||||
|
||||
let exec = this.db |
||||
if (action) { |
||||
exec = exec.action(action) |
||||
} |
||||
|
||||
exec.collection(this.collection).where({ |
||||
_id: dbCmd.in(ids) |
||||
}).remove().then((res) => { |
||||
callback && callback(res.result) |
||||
if (this.pageData === pageMode.replace) { |
||||
this.refresh() |
||||
} else { |
||||
this.removeData(ids) |
||||
} |
||||
}).catch((err) => { |
||||
uni.showModal({ |
||||
content: err.message, |
||||
showCancel: false |
||||
}) |
||||
}).finally(() => { |
||||
uni.hideLoading() |
||||
}) |
||||
}, |
||||
removeData(ids) { |
||||
let il = ids.slice(0) |
||||
let dl = this.listData |
||||
for (let i = dl.length - 1; i >= 0; i--) { |
||||
let index = il.indexOf(dl[i]._id) |
||||
if (index >= 0) { |
||||
dl.splice(i, 1) |
||||
il.splice(index, 1) |
||||
} |
||||
} |
||||
}, |
||||
_dispatchEvent(type, data) { |
||||
if (this._changeDataFunction) { |
||||
this._changeDataFunction(data, this._isEnded) |
||||
} else { |
||||
this.$emit(type, data, this._isEnded) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,853 @@ |
||||
<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="change"> |
||||
<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="change"> |
||||
<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; |
||||
}, |
||||
change(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 = [] |
||||
} |
||||
} else { |
||||
if (Array.isArray(value) && value.length) { |
||||
value = value[0] |
||||
} |
||||
} |
||||
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 { |
||||
border-color: $uni-primary; |
||||
.radio__inner-icon { |
||||
opacity: 1; |
||||
background-color: $uni-primary; |
||||
} |
||||
} |
||||
|
||||
.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> |
||||
@ -0,0 +1,87 @@ |
||||
{ |
||||
"id": "uni-data-checkbox", |
||||
"displayName": "uni-data-checkbox 数据选择器", |
||||
"version": "1.0.6", |
||||
"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", |
||||
"alipay": "n" |
||||
}, |
||||
"client": { |
||||
"App": { |
||||
"app-vue": "y", |
||||
"app-nvue": "y", |
||||
"app-harmony": "u", |
||||
"app-uvue": "u" |
||||
}, |
||||
"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" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -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 |
||||
@ -0,0 +1,25 @@ |
||||
## 1.3.6（2024-10-15） |
||||
- 修复 微信小程序中的getSystemInfo警告 |
||||
## 1.3.5（2024-10-12） |
||||
- 修复 微信小程序中的getSystemInfo警告 |
||||
## 1.3.4（2024-10-12） |
||||
- 修复 微信小程序中的getSystemInfo警告 |
||||
## 1.3.3（2022-01-20） |
||||
- 新增 showText属性 ，是否显示文本 |
||||
## 1.3.2（2022-01-19） |
||||
- 修复 nvue 平台下不显示文本的bug |
||||
## 1.3.1（2022-01-19） |
||||
- 修复 微信小程序平台样式选择器报警告的问题 |
||||
## 1.3.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-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more) |
||||
## 1.2.1（2021-08-24） |
||||
- 新增 支持国际化 |
||||
## 1.2.0（2021-07-30） |
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||
## 1.1.8（2021-05-12） |
||||
- 新增 组件示例地址 |
||||
## 1.1.7（2021-03-30） |
||||
- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug |
||||
## 1.1.6（2021-02-05） |
||||
- 调整为uni_modules目录规范 |
||||
@ -0,0 +1,5 @@ |
||||
{ |
||||
"uni-load-more.contentdown": "Pull up to show more", |
||||
"uni-load-more.contentrefresh": "loading...", |
||||
"uni-load-more.contentnomore": "No more data" |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
import en from './en.json' |
||||
import zhHans from './zh-Hans.json' |
||||
import zhHant from './zh-Hant.json' |
||||
export default { |
||||
en, |
||||
'zh-Hans': zhHans, |
||||
'zh-Hant': zhHant |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
{ |
||||
"uni-load-more.contentdown": "上拉显示更多", |
||||
"uni-load-more.contentrefresh": "正在加载...", |
||||
"uni-load-more.contentnomore": "没有更多数据了" |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
{ |
||||
"uni-load-more.contentdown": "上拉顯示更多", |
||||
"uni-load-more.contentrefresh": "正在加載...", |
||||
"uni-load-more.contentnomore": "沒有更多數據了" |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,84 @@ |
||||
{ |
||||
"id": "uni-load-more", |
||||
"displayName": "uni-load-more 加载更多", |
||||
"version": "1.3.6", |
||||
"description": "LoadMore 组件，常用在列表里面，做滚动加载使用。", |
||||
"keywords": [ |
||||
"uni-ui", |
||||
"uniui", |
||||
"加载更多", |
||||
"load-more" |
||||
], |
||||
"repository": "https://github.com/dcloudio/uni-ui", |
||||
"engines": { |
||||
"HBuilderX": "" |
||||
}, |
||||
"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-scss"], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y", |
||||
"alipay": "n" |
||||
}, |
||||
"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" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
|
||||
|
||||
### LoadMore 加载更多 |
||||
> **组件名：uni-load-more** |
||||
> 代码块： `uLoadMore` |
||||
|
||||
|
||||
用于列表中，做滚动加载使用，展示 loading 的各种状态。 |
||||
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more) |
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
|
||||
|
||||
@ -0,0 +1,8 @@ |
||||
## 1.0.3（2022-01-21） |
||||
- 优化 组件示例 |
||||
## 1.0.2（2021-11-22） |
||||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
||||
## 1.0.1（2021-11-22） |
||||
- 修复 vue3中scss语法兼容问题 |
||||
## 1.0.0（2021-11-18） |
||||
- init |
||||
@ -0,0 +1 @@ |
||||
@import './styles/index.scss'; |
||||
@ -0,0 +1,82 @@ |
||||
{ |
||||
"id": "uni-scss", |
||||
"displayName": "uni-scss 辅助样式", |
||||
"version": "1.0.3", |
||||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", |
||||
"keywords": [ |
||||
"uni-scss", |
||||
"uni-ui", |
||||
"辅助样式" |
||||
], |
||||
"repository": "https://github.com/dcloudio/uni-ui", |
||||
"engines": { |
||||
"HBuilderX": "^3.1.0" |
||||
}, |
||||
"dcloudext": { |
||||
"category": [ |
||||
"JS SDK", |
||||
"通用 SDK" |
||||
], |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "无", |
||||
"permissions": "无" |
||||
}, |
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": [], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"App": { |
||||
"app-vue": "y", |
||||
"app-nvue": "u" |
||||
}, |
||||
"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" |
||||
}, |
||||
"快应用": { |
||||
"华为": "n", |
||||
"联盟": "n" |
||||
}, |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。 |
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) |
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
@ -0,0 +1,7 @@ |
||||
@import './setting/_variables.scss'; |
||||
@import './setting/_border.scss'; |
||||
@import './setting/_color.scss'; |
||||
@import './setting/_space.scss'; |
||||
@import './setting/_radius.scss'; |
||||
@import './setting/_text.scss'; |
||||
@import './setting/_styles.scss'; |
||||
@ -0,0 +1,3 @@ |
||||
.uni-border { |
||||
border: 1px $uni-border-1 solid; |
||||
} |
||||
@ -0,0 +1,66 @@ |
||||
|
||||
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 |
||||
// @mixin get-styles($k,$c) { |
||||
// @if $k == size or $k == weight{ |
||||
// font-#{$k}:#{$c} |
||||
// }@else{ |
||||
// #{$k}:#{$c} |
||||
// } |
||||
// } |
||||
$uni-ui-color:( |
||||
// 主色 |
||||
primary: $uni-primary, |
||||
primary-disable: $uni-primary-disable, |
||||
primary-light: $uni-primary-light, |
||||
// 辅助色 |
||||
success: $uni-success, |
||||
success-disable: $uni-success-disable, |
||||
success-light: $uni-success-light, |
||||
warning: $uni-warning, |
||||
warning-disable: $uni-warning-disable, |
||||
warning-light: $uni-warning-light, |
||||
error: $uni-error, |
||||
error-disable: $uni-error-disable, |
||||
error-light: $uni-error-light, |
||||
info: $uni-info, |
||||
info-disable: $uni-info-disable, |
||||
info-light: $uni-info-light, |
||||
// 中性色 |
||||
main-color: $uni-main-color, |
||||
base-color: $uni-base-color, |
||||
secondary-color: $uni-secondary-color, |
||||
extra-color: $uni-extra-color, |
||||
// 背景色 |
||||
bg-color: $uni-bg-color, |
||||
// 边框颜色 |
||||
border-1: $uni-border-1, |
||||
border-2: $uni-border-2, |
||||
border-3: $uni-border-3, |
||||
border-4: $uni-border-4, |
||||
// 黑色 |
||||
black:$uni-black, |
||||
// 白色 |
||||
white:$uni-white, |
||||
// 透明 |
||||
transparent:$uni-transparent |
||||
) !default; |
||||
@each $key, $child in $uni-ui-color { |
||||
.uni-#{"" + $key} { |
||||
color: $child; |
||||
} |
||||
.uni-#{"" + $key}-bg { |
||||
background-color: $child; |
||||
} |
||||
} |
||||
.uni-shadow-sm { |
||||
box-shadow: $uni-shadow-sm; |
||||
} |
||||
.uni-shadow-base { |
||||
box-shadow: $uni-shadow-base; |
||||
} |
||||
.uni-shadow-lg { |
||||
box-shadow: $uni-shadow-lg; |
||||
} |
||||
.uni-mask { |
||||
background-color:$uni-mask; |
||||
} |
||||
@ -0,0 +1,55 @@ |
||||
@mixin radius($r,$d:null ,$important: false){ |
||||
$radius-value:map-get($uni-radius, $r) if($important, !important, null); |
||||
// Key exists within the $uni-radius variable |
||||
@if (map-has-key($uni-radius, $r) and $d){ |
||||
@if $d == t { |
||||
border-top-left-radius:$radius-value; |
||||
border-top-right-radius:$radius-value; |
||||
}@else if $d == r { |
||||
border-top-right-radius:$radius-value; |
||||
border-bottom-right-radius:$radius-value; |
||||
}@else if $d == b { |
||||
border-bottom-left-radius:$radius-value; |
||||
border-bottom-right-radius:$radius-value; |
||||
}@else if $d == l { |
||||
border-top-left-radius:$radius-value; |
||||
border-bottom-left-radius:$radius-value; |
||||
}@else if $d == tl { |
||||
border-top-left-radius:$radius-value; |
||||
}@else if $d == tr { |
||||
border-top-right-radius:$radius-value; |
||||
}@else if $d == br { |
||||
border-bottom-right-radius:$radius-value; |
||||
}@else if $d == bl { |
||||
border-bottom-left-radius:$radius-value; |
||||
} |
||||
}@else{ |
||||
border-radius:$radius-value; |
||||
} |
||||
} |
||||
|
||||
@each $key, $child in $uni-radius { |
||||
@if($key){ |
||||
.uni-radius-#{"" + $key} { |
||||
@include radius($key) |
||||
} |
||||
}@else{ |
||||
.uni-radius { |
||||
@include radius($key) |
||||
} |
||||
} |
||||
} |
||||
|
||||
@each $direction in t, r, b, l,tl, tr, br, bl { |
||||
@each $key, $child in $uni-radius { |
||||
@if($key){ |
||||
.uni-radius-#{"" + $direction}-#{"" + $key} { |
||||
@include radius($key,$direction,false) |
||||
} |
||||
}@else{ |
||||
.uni-radius-#{$direction} { |
||||
@include radius($key,$direction,false) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,56 @@ |
||||
|
||||
@mixin fn($space,$direction,$size,$n) { |
||||
@if $n { |
||||
#{$space}-#{$direction}: #{$size*$uni-space-root}px |
||||
} @else { |
||||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px |
||||
} |
||||
} |
||||
@mixin get-styles($direction,$i,$space,$n){ |
||||
@if $direction == t { |
||||
@include fn($space, top,$i,$n); |
||||
} |
||||
@if $direction == r { |
||||
@include fn($space, right,$i,$n); |
||||
} |
||||
@if $direction == b { |
||||
@include fn($space, bottom,$i,$n); |
||||
} |
||||
@if $direction == l { |
||||
@include fn($space, left,$i,$n); |
||||
} |
||||
@if $direction == x { |
||||
@include fn($space, left,$i,$n); |
||||
@include fn($space, right,$i,$n); |
||||
} |
||||
@if $direction == y { |
||||
@include fn($space, top,$i,$n); |
||||
@include fn($space, bottom,$i,$n); |
||||
} |
||||
@if $direction == a { |
||||
@if $n { |
||||
#{$space}:#{$i*$uni-space-root}px; |
||||
} @else { |
||||
#{$space}:#{-$i*$uni-space-root}px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@each $orientation in m,p { |
||||
$space: margin; |
||||
@if $orientation == m { |
||||
$space: margin; |
||||
} @else { |
||||
$space: padding; |
||||
} |
||||
@for $i from 0 through 16 { |
||||
@each $direction in t, r, b, l, x, y, a { |
||||
.uni-#{$orientation}#{$direction}-#{$i} { |
||||
@include get-styles($direction,$i,$space,true); |
||||
} |
||||
.uni-#{$orientation}#{$direction}-n#{$i} { |
||||
@include get-styles($direction,$i,$space,false); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,167 @@ |
||||
/* #ifndef APP-NVUE */ |
||||
|
||||
$-color-white:#fff; |
||||
$-color-black:#000; |
||||
@mixin base-style($color) { |
||||
color: #fff; |
||||
background-color: $color; |
||||
border-color: mix($-color-black, $color, 8%); |
||||
&:not([hover-class]):active { |
||||
background: mix($-color-black, $color, 10%); |
||||
border-color: mix($-color-black, $color, 20%); |
||||
color: $-color-white; |
||||
outline: none; |
||||
} |
||||
} |
||||
@mixin is-color($color) { |
||||
@include base-style($color); |
||||
&[loading] { |
||||
@include base-style($color); |
||||
&::before { |
||||
margin-right:5px; |
||||
} |
||||
} |
||||
&[disabled] { |
||||
&, |
||||
&[loading], |
||||
&:not([hover-class]):active { |
||||
color: $-color-white; |
||||
border-color: mix(darken($color,10%), $-color-white); |
||||
background-color: mix($color, $-color-white); |
||||
} |
||||
} |
||||
|
||||
} |
||||
@mixin base-plain-style($color) { |
||||
color:$color; |
||||
background-color: mix($-color-white, $color, 90%); |
||||
border-color: mix($-color-white, $color, 70%); |
||||
&:not([hover-class]):active { |
||||
background: mix($-color-white, $color, 80%); |
||||
color: $color; |
||||
outline: none; |
||||
border-color: mix($-color-white, $color, 50%); |
||||
} |
||||
} |
||||
@mixin is-plain($color){ |
||||
&[plain] { |
||||
@include base-plain-style($color); |
||||
&[loading] { |
||||
@include base-plain-style($color); |
||||
&::before { |
||||
margin-right:5px; |
||||
} |
||||
} |
||||
&[disabled] { |
||||
&, |
||||
&:active { |
||||
color: mix($-color-white, $color, 40%); |
||||
background-color: mix($-color-white, $color, 90%); |
||||
border-color: mix($-color-white, $color, 80%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.uni-btn { |
||||
margin: 5px; |
||||
color: #393939; |
||||
border:1px solid #ccc; |
||||
font-size: 16px; |
||||
font-weight: 200; |
||||
background-color: #F9F9F9; |
||||
// TODO 暂时处理边框隐藏一边的问题 |
||||
overflow: visible; |
||||
&::after{ |
||||
border: none; |
||||
} |
||||
|
||||
&:not([type]),&[type=default] { |
||||
color: #999; |
||||
&[loading] { |
||||
background: none; |
||||
&::before { |
||||
margin-right:5px; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
&[disabled]{ |
||||
color: mix($-color-white, #999, 60%); |
||||
&, |
||||
&[loading], |
||||
&:active { |
||||
color: mix($-color-white, #999, 60%); |
||||
background-color: mix($-color-white,$-color-black , 98%); |
||||
border-color: mix($-color-white, #999, 85%); |
||||
} |
||||
} |
||||
|
||||
&[plain] { |
||||
color: #999; |
||||
background: none; |
||||
border-color: $uni-border-1; |
||||
&:not([hover-class]):active { |
||||
background: none; |
||||
color: mix($-color-white, $-color-black, 80%); |
||||
border-color: mix($-color-white, $-color-black, 90%); |
||||
outline: none; |
||||
} |
||||
&[disabled]{ |
||||
&, |
||||
&[loading], |
||||
&:active { |
||||
background: none; |
||||
color: mix($-color-white, #999, 60%); |
||||
border-color: mix($-color-white, #999, 85%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:not([hover-class]):active { |
||||
color: mix($-color-white, $-color-black, 50%); |
||||
} |
||||
|
||||
&[size=mini] { |
||||
font-size: 16px; |
||||
font-weight: 200; |
||||
border-radius: 8px; |
||||
} |
||||
|
||||
|
||||
|
||||
&.uni-btn-small { |
||||
font-size: 14px; |
||||
} |
||||
&.uni-btn-mini { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
&.uni-btn-radius { |
||||
border-radius: 999px; |
||||
} |
||||
&[type=primary] { |
||||
@include is-color($uni-primary); |
||||
@include is-plain($uni-primary) |
||||
} |
||||
&[type=success] { |
||||
@include is-color($uni-success); |
||||
@include is-plain($uni-success) |
||||
} |
||||
&[type=error] { |
||||
@include is-color($uni-error); |
||||
@include is-plain($uni-error) |
||||
} |
||||
&[type=warning] { |
||||
@include is-color($uni-warning); |
||||
@include is-plain($uni-warning) |
||||
} |
||||
&[type=info] { |
||||
@include is-color($uni-info); |
||||
@include is-plain($uni-info) |
||||
} |
||||
} |
||||
/* #endif */ |
||||
@ -0,0 +1,24 @@ |
||||
@mixin get-styles($k,$c) { |
||||
@if $k == size or $k == weight{ |
||||
font-#{$k}:#{$c} |
||||
}@else{ |
||||
#{$k}:#{$c} |
||||
} |
||||
} |
||||
|
||||
@each $key, $child in $uni-headings { |
||||
/* #ifndef APP-NVUE */ |
||||
.uni-#{$key} { |
||||
@each $k, $c in $child { |
||||
@include get-styles($k,$c) |
||||
} |
||||
} |
||||
/* #endif */ |
||||
/* #ifdef APP-NVUE */ |
||||
.container .uni-#{$key} { |
||||
@each $k, $c in $child { |
||||
@include get-styles($k,$c) |
||||
} |
||||
} |
||||
/* #endif */ |
||||
} |
||||
@ -0,0 +1,146 @@ |
||||
// @use "sass:math"; |
||||
@import '../tools/functions.scss'; |
||||
// 间距基础倍数 |
||||
$uni-space-root: 2 !default; |
||||
// 边框半径默认值 |
||||
$uni-radius-root:5px !default; |
||||
$uni-radius: () !default; |
||||
// 边框半径断点 |
||||
$uni-radius: map-deep-merge( |
||||
( |
||||
0: 0, |
||||
// TODO 当前版本暂时不支持 sm 属性 |
||||
// 'sm': math.div($uni-radius-root, 2), |
||||
null: $uni-radius-root, |
||||
'lg': $uni-radius-root * 2, |
||||
'xl': $uni-radius-root * 6, |
||||
'pill': 9999px, |
||||
'circle': 50% |
||||
), |
||||
$uni-radius |
||||
); |
||||
// 字体家族 |
||||
$body-font-family: 'Roboto', sans-serif !default; |
||||
// 文本 |
||||
$heading-font-family: $body-font-family !default; |
||||
$uni-headings: () !default; |
||||
$letterSpacing: -0.01562em; |
||||
$uni-headings: map-deep-merge( |
||||
( |
||||
'h1': ( |
||||
size: 32px, |
||||
weight: 300, |
||||
line-height: 50px, |
||||
// letter-spacing:-0.01562em |
||||
), |
||||
'h2': ( |
||||
size: 28px, |
||||
weight: 300, |
||||
line-height: 40px, |
||||
// letter-spacing: -0.00833em |
||||
), |
||||
'h3': ( |
||||
size: 24px, |
||||
weight: 400, |
||||
line-height: 32px, |
||||
// letter-spacing: normal |
||||
), |
||||
'h4': ( |
||||
size: 20px, |
||||
weight: 400, |
||||
line-height: 30px, |
||||
// letter-spacing: 0.00735em |
||||
), |
||||
'h5': ( |
||||
size: 16px, |
||||
weight: 400, |
||||
line-height: 24px, |
||||
// letter-spacing: normal |
||||
), |
||||
'h6': ( |
||||
size: 14px, |
||||
weight: 500, |
||||
line-height: 18px, |
||||
// letter-spacing: 0.0125em |
||||
), |
||||
'subtitle': ( |
||||
size: 12px, |
||||
weight: 400, |
||||
line-height: 20px, |
||||
// letter-spacing: 0.00937em |
||||
), |
||||
'body': ( |
||||
font-size: 14px, |
||||
font-weight: 400, |
||||
line-height: 22px, |
||||
// letter-spacing: 0.03125em |
||||
), |
||||
'caption': ( |
||||
'size': 12px, |
||||
'weight': 400, |
||||
'line-height': 20px, |
||||
// 'letter-spacing': 0.03333em, |
||||
// 'text-transform': false |
||||
) |
||||
), |
||||
$uni-headings |
||||
); |
||||
|
||||
|
||||
|
||||
// 主色 |
||||
$uni-primary: #2979ff !default; |
||||
$uni-primary-disable:lighten($uni-primary,20%) !default; |
||||
$uni-primary-light: lighten($uni-primary,25%) !default; |
||||
|
||||
// 辅助色 |
||||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||
$uni-success: #18bc37 !default; |
||||
$uni-success-disable:lighten($uni-success,20%) !default; |
||||
$uni-success-light: lighten($uni-success,25%) !default; |
||||
|
||||
$uni-warning: #f3a73f !default; |
||||
$uni-warning-disable:lighten($uni-warning,20%) !default; |
||||
$uni-warning-light: lighten($uni-warning,25%) !default; |
||||
|
||||
$uni-error: #e43d33 !default; |
||||
$uni-error-disable:lighten($uni-error,20%) !default; |
||||
$uni-error-light: lighten($uni-error,25%) !default; |
||||
|
||||
$uni-info: #8f939c !default; |
||||
$uni-info-disable:lighten($uni-info,20%) !default; |
||||
$uni-info-light: lighten($uni-info,25%) !default; |
||||
|
||||
// 中性色 |
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||
$uni-main-color: #3a3a3a !default; // 主要文字 |
||||
$uni-base-color: #6a6a6a !default; // 常规文字 |
||||
$uni-secondary-color: #909399 !default; // 次要文字 |
||||
$uni-extra-color: #c7c7c7 !default; // 辅助说明 |
||||
|
||||
// 边框颜色 |
||||
$uni-border-1: #F0F0F0 !default; |
||||
$uni-border-2: #EDEDED !default; |
||||
$uni-border-3: #DCDCDC !default; |
||||
$uni-border-4: #B9B9B9 !default; |
||||
|
||||
// 常规色 |
||||
$uni-black: #000000 !default; |
||||
$uni-white: #ffffff !default; |
||||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; |
||||
|
||||
// 背景色 |
||||
$uni-bg-color: #f7f7f7 !default; |
||||
|
||||
/* 水平间距 */ |
||||
$uni-spacing-sm: 8px !default; |
||||
$uni-spacing-base: 15px !default; |
||||
$uni-spacing-lg: 30px !default; |
||||
|
||||
// 阴影 |
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; |
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; |
||||
|
||||
// 蒙版 |
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
||||
@ -0,0 +1,19 @@ |
||||
// 合并 map |
||||
@function map-deep-merge($parent-map, $child-map){ |
||||
$result: $parent-map; |
||||
@each $key, $child in $child-map { |
||||
$parent-has-key: map-has-key($result, $key); |
||||
$parent-value: map-get($result, $key); |
||||
$parent-type: type-of($parent-value); |
||||
$child-type: type-of($child); |
||||
$parent-is-map: $parent-type == map; |
||||
$child-is-map: $child-type == map; |
||||
|
||||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ |
||||
$result: map-merge($result, ( $key: $child )); |
||||
}@else { |
||||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); |
||||
} |
||||
} |
||||
@return $result; |
||||
}; |
||||
@ -0,0 +1,31 @@ |
||||
// 间距基础倍数 |
||||
$uni-space-root: 2; |
||||
// 边框半径默认值 |
||||
$uni-radius-root:5px; |
||||
// 主色 |
||||
$uni-primary: #2979ff; |
||||
// 辅助色 |
||||
$uni-success: #4cd964; |
||||
// 警告色 |
||||
$uni-warning: #f0ad4e; |
||||
// 错误色 |
||||
$uni-error: #dd524d; |
||||
// 描述色 |
||||
$uni-info: #909399; |
||||
// 中性色 |
||||
$uni-main-color: #303133; |
||||
$uni-base-color: #606266; |
||||
$uni-secondary-color: #909399; |
||||
$uni-extra-color: #C0C4CC; |
||||
// 背景色 |
||||
$uni-bg-color: #f5f5f5; |
||||
// 边框颜色 |
||||
$uni-border-1: #DCDFE6; |
||||
$uni-border-2: #E4E7ED; |
||||
$uni-border-3: #EBEEF5; |
||||
$uni-border-4: #F2F6FC; |
||||
|
||||
// 常规色 |
||||
$uni-black: #000000; |
||||
$uni-white: #ffffff; |
||||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||
@ -0,0 +1,62 @@ |
||||
@import './styles/setting/_variables.scss'; |
||||
// 间距基础倍数 |
||||
$uni-space-root: 2; |
||||
// 边框半径默认值 |
||||
$uni-radius-root:5px; |
||||
|
||||
// 主色 |
||||
$uni-primary: #2979ff; |
||||
$uni-primary-disable:mix(#fff,$uni-primary,50%); |
||||
$uni-primary-light: mix(#fff,$uni-primary,80%); |
||||
|
||||
// 辅助色 |
||||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||
$uni-success: #18bc37; |
||||
$uni-success-disable:mix(#fff,$uni-success,50%); |
||||
$uni-success-light: mix(#fff,$uni-success,80%); |
||||
|
||||
$uni-warning: #f3a73f; |
||||
$uni-warning-disable:mix(#fff,$uni-warning,50%); |
||||
$uni-warning-light: mix(#fff,$uni-warning,80%); |
||||
|
||||
$uni-error: #e43d33; |
||||
$uni-error-disable:mix(#fff,$uni-error,50%); |
||||
$uni-error-light: mix(#fff,$uni-error,80%); |
||||
|
||||
$uni-info: #8f939c; |
||||
$uni-info-disable:mix(#fff,$uni-info,50%); |
||||
$uni-info-light: mix(#fff,$uni-info,80%); |
||||
|
||||
// 中性色 |
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||
$uni-main-color: #3a3a3a; // 主要文字 |
||||
$uni-base-color: #6a6a6a; // 常规文字 |
||||
$uni-secondary-color: #909399; // 次要文字 |
||||
$uni-extra-color: #c7c7c7; // 辅助说明 |
||||
|
||||
// 边框颜色 |
||||
$uni-border-1: #F0F0F0; |
||||
$uni-border-2: #EDEDED; |
||||
$uni-border-3: #DCDCDC; |
||||
$uni-border-4: #B9B9B9; |
||||
|
||||
// 常规色 |
||||
$uni-black: #000000; |
||||
$uni-white: #ffffff; |
||||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||
|
||||
// 背景色 |
||||
$uni-bg-color: #f7f7f7; |
||||
|
||||
/* 水平间距 */ |
||||
$uni-spacing-sm: 8px; |
||||
$uni-spacing-base: 15px; |
||||
$uni-spacing-lg: 30px; |
||||
|
||||
// 阴影 |
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); |
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); |
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); |
||||
|
||||
// 蒙版 |
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4); |
||||
Loading…
Reference in new issue