Skip to content

梁建民 / wmsMin

Go to a project
Commit c80b85b9 by LJM
Options

css

parent f71b666c
Expand all
Inline Side-by-side
Showing with 2468 additions and 529 deletions
assets/css/goods/rePackageList.scss
.rePackage {
margin-top: 24rpx;
.refresh {
padding: 0 24rpx;
padding: 24rpx 24rpx 0 24rpx;
justify-content: flex-end;
background: #fff;
.icon-a-juxing12 {
font-size: 36rpx;
color: #404547;
......@@ -19,6 +19,7 @@
.uni-list-cell {
padding: 0 24rpx;
height: 73rpx;
background: #fff;
.uni-list-cell-left {
font-size: 28rpx;
color: #6e767a;
......@@ -34,10 +35,11 @@
}
}
.uni-table {
padding: 0 24rpx;
padding: 0 24rpx 120rpx 24rpx;
background: #fff;
.uni-th {
height: 62rpx;
background: #f1f4f6;
background: #fff;
border-top: 1px solid #cad9e0;
border-bottom: 1px solid #cad9e0;
text {
......@@ -52,6 +54,7 @@
}
.uni-tr {
height: 100%;
background: #fff;
border-bottom: 1px solid #cad9e0;
text {
flex: 0 0 25%;
......
assets/css/pda/exWarehouse.scss 0 → 100644
.ex-warehousing {
padding: 24rpx;
.uni-table-box {
::v-deep .uni-table-scroll {
height: 83vh;
}
::v-deep .uni-table {
min-width: 100% !important;
}
}
.scan {
position: fixed;
bottom: 104rpx;
left: 0;
right: 0;
width: 301rpx;
height: 86rpx;
background: #197adb;
box-shadow: 0px 9rpx 10rpx 0px rgba(0, 0, 0, 0.11);
border-radius: 43rpx;
margin: 0 auto;
.icon-juxing2 {
font-size: 48rpx;
color: #ffffff;
margin-right: 28rpx;
}
.tt {
font-size: 32rpx;
color: #ffffff;
}
}
.fix-info {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
.text {
padding-left: 20rpx;
.t1 {
font-size: 24rpx;
color: #6e767a;
}
.t2 {
font-size: 26rpx;
color: #f04844;
font-weight: bold;
}
}
.btn {
width: 220rpx;
height: 88rpx;
background: #197adb;
border-radius: 4rpx;
font-size: 28rpx;
color: #ffffff;
}
}
}
assets/css/pda/logisticsList.scss 0 → 100644
.rePackage {
.refresh {
padding: 24rpx 24rpx 0 24rpx;
justify-content: flex-end;
background: #fff;
.icon-a-juxing12 {
font-size: 36rpx;
color: #404547;
&.curr {
animation: spin 1s infinite linear;
}
}
.t1 {
font-size: 22rpx;
color: #404547;
margin-left: 8rpx;
}
}
.uni-list-cell {
padding: 0 24rpx;
height: 73rpx;
background: #fff;
.uni-list-cell-left {
font-size: 28rpx;
color: #6e767a;
}
.uni-input {
font-size: 28rpx;
color: #404547;
}
.iconfont {
font-size: 28rpx;
color: #6e767a;
padding-left: 5rpx;
}
}
.uni-table {
padding: 0 24rpx 120rpx 24rpx;
background: #fff;
.uni-th {
height: 62rpx;
background: #fff;
border-top: 1px solid #cad9e0;
border-bottom: 1px solid #cad9e0;
text {
flex: 0 0 25%;
font-size: 22rpx;
color: #404547;
border-right: 1px solid #cad9e0;
&:last-child {
border-right: none;
}
}
}
.uni-tr {
height: 100%;
background: #fff;
border-bottom: 1px solid #cad9e0;
text {
flex: 0 0 25%;
font-size: 22rpx;
color: #6e767a;
border-right: 1px solid #cad9e0;
padding: 8rpx 0;
&:last-child {
border-right: none;
}
&.color {
color: #0079fe;
}
}
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
assets/css/pda/warehousing.scss 0 → 100644
.warehousing {
padding: 24rpx;
.uni-table-box {
::v-deep .uni-table-scroll {
height: 83vh;
}
::v-deep .uni-table {
min-width: 100% !important;
}
}
.scan {
position: fixed;
bottom: 104rpx;
left: 0;
right: 0;
width: 301rpx;
height: 86rpx;
background: #197adb;
box-shadow: 0px 9rpx 10rpx 0px rgba(0, 0, 0, 0.11);
border-radius: 43rpx;
margin: 0 auto;
.icon-juxing2 {
font-size: 48rpx;
color: #ffffff;
margin-right: 28rpx;
}
.tt {
font-size: 32rpx;
color: #ffffff;
}
}
.fix-info {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
.text {
padding-left: 20rpx;
.t1 {
font-size: 24rpx;
color: #6e767a;
}
.t2 {
font-size: 26rpx;
color: #f04844;
font-weight: bold;
}
}
.btn {
width: 220rpx;
height: 88rpx;
background: #197adb;
border-radius: 4rpx;
font-size: 28rpx;
color: #ffffff;
}
}
}
pages.json
......@@ -104,6 +104,21 @@
"style": {
"navigationBarTitleText": "装箱复核时序蒲"
}
}, {
"path": "pages/pda/warehousing",
"style": {
"navigationBarTitleText": "深圳扫码收货"
}
}, {
"path": "pages/pda/exWarehouse",
"style": {
"navigationBarTitleText": "深圳扫码出库"
}
}, {
"path": "pages/pda/logisticsList",
"style": {
"navigationBarTitleText": "进口物流清单"
}
}],
"globalStyle": {
"navigationBarTextStyle": "black",
......
pages/goods/rePackageList.vue
......@@ -114,6 +114,7 @@ export default {
this.rePackageList = this.rePackageList.concat(res.data.data);
this.total = res.data.total;
} else {
this.total = 0;
this.is_loading = true;
}
} else {
......
pages/home/index.vue
......@@ -113,6 +113,21 @@ export default {
name: '装箱复核序簿',
iconfont: 'icon-jinggao3',
tips: ''
},
{
name: '深圳扫码收货',
iconfont: 'icon-jinggao3',
tips: ''
},
{
name: '深圳扫码出库',
iconfont: 'icon-jinggao3',
tips: ''
},
{
name: '进口物流清单',
iconfont: 'icon-jinggao3',
tips: ''
}
]
};
......@@ -190,6 +205,18 @@ export default {
uni.navigateTo({
url: '/pages/goods/rePackageList'
});
} else if (item.name == '深圳扫码收货') {
uni.navigateTo({
url: '/pages/pda/warehousing'
});
} else if (item.name == '深圳扫码出库') {
uni.navigateTo({
url: '/pages/pda/exWarehouse'
});
} else if (item.name == '进口物流清单') {
uni.navigateTo({
url: '/pages/pda/logisticsList'
});
} else {
uni.showModal({
title: '提示',
......
pages/pda/exWarehouse.vue 0 → 100644
<template>
<view class="ex-warehousing">
<view class="uni-table-box">
<uni-table type="selection" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
<uni-tr>
<uni-th align="center">入仓号</uni-th>
<uni-th align="center">车序</uni-th>
<uni-th align="center">汇总件数</uni-th>
</uni-tr>
<uni-tr>
<uni-td align="center">B00001</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00003</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00004</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00005</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00006</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00007</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00001</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00003</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00004</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00005</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00006</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00007</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
</uni-table>
</view>
<navigator class="scan row rowCenter verCenter" url="/pages/mine/login" hover-class="none">
<text class="iconfont icon-juxing2"></text>
<text class="tt">继续扫描</text>
</navigator>
<view class="fix-info row bothSide verCenter">
<view class="text row verCenter">
<text class="t1">入仓号数：</text>
<text class="t2">{{ selectedIndexs.length }}</text>
</view>
<view class="btn row rowCenter verCenter">出库单号确认</view>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {
selectedIndexs: []
};
},
onShow() {
this.getData();
},
methods: {
selectionChange(e) {
console.log(e);
this.selectedIndexs = e.detail.index;
},
getData() {
this.request(API.userInfo, 'POST', {}, false).then(res => {
if (res.err_code === 0) {
} else {
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/pda/exWarehouse.scss';
</style>
pages/pda/logisticsList.vue 0 → 100644
<template>
<view class="rePackage">
<view class="row verCenter refresh" @click="refresh()">
<text class="iconfont icon-a-juxing12" :class="{ curr: refreshTransition }"></text>
<text class="t1">刷新</text>
</view>
<view class="uni-list-cell row verCenter bothSide">
<view class="uni-list-cell-left">日期选择</view>
<view class="uni-list-cell-db row">
<picker mode="date" :value="today" :start="startDate" :end="endDate" @change="bindDateChange">
<text class="uni-input">{{ today }}</text>
<text class="iconfont icon-Chevron1"></text>
</picker>
</view>
</view>
<view class="uni-table">
<view class="uni-th row">
<text class="row verCenter rowCenter">卡板号</text>
<text class="row verCenter rowCenter">合计货物箱数</text>
<text class="row verCenter rowCenter">扫描状态</text>
<text class="row verCenter rowCenter">装载状态</text>
</view>
<template v-if="total > 0">
<view class="uni-tr row verCenter" v-for="(item, index) in rePackageList" :key="index">
<text class="row verCenter rowCenter color">{{ item.tray_name }}</text>
<text class="row verCenter rowCenter" :class="{ color: item.scan_status_cn == '全部已经扫描' }">{{ item.have_load_box_num }}</text>
<text class="row verCenter rowCenter" :class="{ color: item.scan_status_cn != '全部已经扫描' }">{{ item.scan_status_cn }}</text>
<text class="row verCenter rowCenter">{{ item.audit_status_cn || '' }}</text>
</view>
</template>
<template v-else>
<view class="uni-tr row verCenter"><text class="row verCenter rowCenter" style="flex:0 0 100%">暂无数据</text></view>
</template>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
const currentDate = this.getDate({
format: true
});
return {
today: currentDate,
total: 1,
page: 1,
limit: 1000,
is_loading: false,
loading: false,
rePackageList: [],
refreshTransition: false
};
},
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
onReachBottom() {
if (this.is_loading) return;
this.page++;
this.loading = true;
this.getData();
},
onShow() {
this.getData();
},
methods: {
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
bindDateChange(e) {
this.today = e.detail.value;
this.total = 0;
this.page = 1;
this.rePackageList = [];
this.getData();
},
refresh() {
//刷新图标交互
this.refreshTransition = true;
this.loading = true;
setTimeout(() => {
this.refreshTransition = false;
}, 3000);
this.total = 0;
this.page = 1;
this.rePackageList = [];
this.getData();
},
getData() {
this.request(API.rePackageList, 'POST', { page: this.page, limit: this.limit, today: this.today }, this.loading).then(res => {
if (res.err_code === 0) {
if (res.data.data.length > 0) {
this.is_loading = false;
this.rePackageList = this.rePackageList.concat(res.data.data);
this.total = res.data.total;
} else {
this.total = 0;
this.is_loading = true;
}
} else {
uni.showToast({
title: res.err_msg,
icon: 'error'
});
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/pda/logisticsList.scss';
</style>
pages/pda/warehousing.vue 0 → 100644
<template>
<view class="warehousing">
<view class="uni-table-box">
<uni-table type="selection" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
<uni-tr>
<uni-th align="center">入仓号</uni-th>
<uni-th align="center">车序</uni-th>
<uni-th align="center">汇总件数</uni-th>
</uni-tr>
<uni-tr>
<uni-td align="center">B00001</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00003</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00004</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00005</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00006</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00007</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00001</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00003</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00004</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00005</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00006</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00007</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
</uni-table>
</view>
<navigator class="scan row rowCenter verCenter" url="/pages/mine/login" hover-class="none">
<text class="iconfont icon-juxing2"></text>
<text class="tt">继续扫描</text>
</navigator>
<view class="fix-info row bothSide verCenter">
<view class="text row verCenter">
<text class="t1">入仓号数：</text>
<text class="t2">{{ selectedIndexs.length }}</text>
</view>
<view class="btn row rowCenter verCenter">入库单号确认</view>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {
selectedIndexs: []
};
},
onShow() {
this.getData();
},
methods: {
selectionChange(e) {
console.log(e);
this.selectedIndexs = e.detail.index;
},
getData() {
this.request(API.userInfo, 'POST', {}, false).then(res => {
if (res.err_code === 0) {
} else {
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/pda/warehousing.scss';
</style>
uni_modules/uni-datetime-picker/changelog.md
## 2.2.6（2022-06-30）
- 优化 组件样式，调整了组件图标大小、高度、颜色等，与uni-ui风格保持一致
## 2.2.5（2022-06-24）
- 修复 日历顶部年月及底部确认未国际化 bug
## 2.2.4（2022-03-31）
- 修复 Vue3 下动态赋值,单选类型未响应的 bug
## 2.2.3（2022-03-28）
- 修复 Vue3 下动态赋值未响应的 bug
## 2.2.2（2021-12-10）
- 修复 clear-icon 属性在小程序平台不生效的 bug
## 2.2.1（2021-12-10）
- 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的 bug
## 2.2.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-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
## 2.1.5（2021-11-09）
- 新增 提供组件设计资源，组件样式调整
## 2.1.4（2021-09-10）
- 修复 hide-second 在移动端的 bug
- 修复 单选赋默认值时，赋值日期未高亮的 bug
......
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
......@@ -6,7 +6,6 @@
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view class="uni-calendar-item__weeks-box-item" :class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
......@@ -15,8 +14,9 @@
'uni-calendar-item--disable':weeks.disable,
}">
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text">{{weeks.date}}</text>
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
</view>
<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view>
</view>
</template>
......@@ -61,7 +61,7 @@
}
</script>
<style lang="scss" scoped>
<style lang="scss" >
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
......@@ -70,18 +70,20 @@
flex-direction: column;
justify-content: center;
align-items: center;
margin: 3px 0;
margin: 1px 0;
position: relative;
}
.uni-calendar-item__weeks-box-text {
font-size: 12px;
// font-size: $uni-font-size-base;
// color: $uni-text-color;
font-size: 14px;
// font-family: Lato-Bold, Lato;
font-weight: bold;
color: #455997;
}
.uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm;
color: $uni-text-color;
font-size: 12px;
color: #333;
}
.uni-calendar-item__weeks-box-item {
......@@ -107,38 +109,43 @@
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $uni-color-error;
background-color: #dd524d;
}
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
color: $uni-text-color-disable;
cursor: default;
}
.uni-calendar-item__weeks-box .uni-calendar-item--isDay-text {
color: $uni-color-primary;
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1;
}
.uni-calendar-item--isDay {
background-color: $uni-color-primary;
opacity: 0.8;
color: #fff;
position: absolute;
top: 10px;
right: 17%;
background-color: #dd524d;
width:6px;
height: 6px;
border-radius: 50%;
}
.uni-calendar-item--extra {
color: $uni-color-error;
color: #dd524d;
opacity: 0.8;
}
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-color-primary;
// border-radius: 50%;
background-color: #007aff;
border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
border: 3px solid #fff;
}
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
......@@ -146,36 +153,33 @@
}
.uni-calendar-item--multiple {
background-color: #f2f6fc;
background-color: #F6F7FC;
// color: #fff;
opacity: 0.8;
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked {
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: #409eff;
color: #fff !important;
// border-radius: 50%;
border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
border: 3px solid #F6F7FC;
}
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: #409eff;;
color: #fff !important;
// border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--before-checked-x {
// border-top-left-radius: 25px;
// border-bottom-left-radius: 25px;
background-color: #f2f6fc;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
box-sizing: border-box;
background-color: #F6F7FC;
}
.uni-calendar-item--after-checked-x {
// border-top-right-radius: 25px;
// border-bottom-right-radius: 25px;
background-color: #f2f6fc;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #F6F7FC;
}
</style>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
......@@ -3,31 +3,35 @@
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
@click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content"
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
<view class="uni-calendar__header">
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
<view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre">
<view class="uni-calendar__header-btn uni-calendar--left"></view>
</view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
<text
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
</picker>
<view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next">
<view class="uni-calendar__header-btn uni-calendar--right"></view>
</view>
<!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> -->
<view v-if="!insert" class="dialog-close" @click="clean">
<view class="dialog-close-plus" data-id="close"></view>
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
</view>
<!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> -->
</view>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
</view>
<view class="uni-calendar__weeks">
<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{monText}}</text>
<text class="uni-calendar__weeks-day-text">{{MONText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
......@@ -66,22 +70,23 @@
<view class="uni-date-changed--time-start">
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
</view>
<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false" :hide-second="hideSecond"
:disabled="!tempRange.before" class="time-picker-style">
<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
</time-picker>
</view>
<uni-icons type="arrowthinright" color="#999" style="line-height: 50px;"></uni-icons>
<view class="uni-date-changed--time-end">
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false" :hide-second="hideSecond"
:disabled="!tempRange.after" class="time-picker-style">
<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
</time-picker>
</view>
</view>
<view v-if="!insert" class="uni-date-changed uni-calendar__header" @click="confirm">
<view class="uni-calendar__header-btn-box">
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
<!-- <view class="uni-calendar__header-btn-box">
<text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text>
</view>
</view> -->
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
</view>
</view>
</view>
......@@ -327,7 +332,13 @@
okText() {
return t("uni-datetime-picker.ok")
},
monText() {
yearText() {
return t("uni-datetime-picker.year")
},
monthText() {
return t("uni-datetime-picker.month")
},
MONText() {
return t("uni-calender.MON")
},
TUEText() {
......@@ -348,6 +359,9 @@
SUNText() {
return t("uni-calender.SUN")
},
confirmText() {
return t("uni-calender.confirm")
},
},
created() {
// 获取日历方法实例
......@@ -361,7 +375,6 @@
})
// 选中某一天
// this.cale.setDate(this.date)
this.init(this.date)
// this.setDay
},
......@@ -425,7 +438,6 @@
* @param {Object} date
*/
init(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date)
......@@ -591,7 +603,7 @@
}
</script>
<style lang="scss" scoped>
<style lang="scss" >
.uni-calendar {
/* #ifndef APP-NVUE */
display: flex;
......@@ -605,7 +617,7 @@
top: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
background-color: rgba(0, 0, 0, 0.4);
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
......@@ -639,6 +651,12 @@
background-color: #fff;
}
.uni-calendar__content-mobile {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
}
.uni-calendar__header {
position: relative;
/* #ifndef APP-NVUE */
......@@ -648,9 +666,11 @@
justify-content: center;
align-items: center;
height: 50px;
// border-bottom-color: $uni-border-color;
// border-bottom-style: solid;
// border-bottom-width: 1px;
}
.uni-calendar__header-mobile {
padding: 10px;
padding-bottom: 0;
}
.uni-calendar--fixed-top {
......@@ -659,14 +679,13 @@
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-color: rgba(0, 0, 0, 0.4);
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
// padding: 0 15px;
}
.uni-calendar__backtoday {
......@@ -680,21 +699,21 @@
font-size: 12px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
color: $uni-text-color;
background-color: $uni-bg-color-hover;
color: #fff;
background-color: #f1f1f1;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: $uni-font-size-base;
color: $uni-text-color;
font-size: 15px;
color: #666;
}
.uni-calendar__button-text {
text-align: center;
width: 100px;
font-size: $uni-font-size-base;
font-size: 14px;
color: #007aff;
/* #ifndef APP-NVUE */
letter-spacing: 3px;
......@@ -713,12 +732,12 @@
}
.uni-calendar__header-btn {
width: 8px;
height: 8px;
border-left-color: $uni-text-color-placeholder;
width: 9px;
height: 9px;
border-left-color: #808080;
border-left-style: solid;
border-left-width: 1px;
border-top-color: $uni-color-subtitle;
border-top-color: #555555;
border-top-style: solid;
border-top-width: 1px;
}
......@@ -760,10 +779,13 @@
.uni-calendar__weeks-day-text {
font-size: 12px;
color: #B2B2B2;
}
.uni-calendar__box {
position: relative;
// padding: 0 10px;
padding-bottom: 7px;
}
.uni-calendar__box-bg {
......@@ -782,7 +804,7 @@
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: $uni-text-color-grey;
color: #999;
opacity: 0.1;
text-align: center;
/* #ifndef APP-NVUE */
......@@ -795,12 +817,17 @@
// line-height: 50px;
text-align: center;
color: #333;
border-top-color: $uni-border-color;
border-top-color: #DCDCDC;
;
border-top-style: solid;
border-top-width: 1px;
flex: 1;
}
.uni-date-btn--ok {
padding: 20px 15px;
}
.uni-date-changed--time-start {
/* #ifndef APP-NVUE */
display: flex;
......@@ -834,4 +861,47 @@
.mr-10 {
margin-right: 10px;
}
.dialog-close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 0 25px;
margin-top: 10px;
}
.dialog-close-plus {
width: 16px;
height: 2px;
background-color: #737987;
border-radius: 2px;
transform: rotate(45deg);
}
.dialog-close-rotate {
position: absolute;
transform: rotate(-45deg);
}
.uni-datetime-picker--btn {
border-radius: 100px;
height: 40px;
line-height: 40px;
background-color: #007aff;
color: #fff;
font-size: 16px;
letter-spacing: 2px;
}
/* #ifndef APP-NVUE */
.uni-datetime-picker--btn:active {
opacity: 0.7;
}
/* #endif */
</style>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
......@@ -9,11 +9,14 @@
"uni-datetime-picker.ok": "ok",
"uni-datetime-picker.clear": "clear",
"uni-datetime-picker.cancel": "cancel",
"uni-datetime-picker.year": "-",
"uni-datetime-picker.month": "",
"uni-calender.MON": "MON",
"uni-calender.TUE": "TUE",
"uni-calender.WED": "WED",
"uni-calender.THU": "THU",
"uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN"
"uni-calender.SUN": "SUN",
"uni-calender.confirm": "confirm"
}
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json
......@@ -9,11 +9,14 @@
"uni-datetime-picker.ok": "确定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六"
"uni-calender.SAT": "六",
"uni-calender.confirm": "确认"
}
\ No newline at end of file
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json
......@@ -9,11 +9,14 @@
"uni-datetime-picker.ok": "確定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六"
"uni-calender.SAT": "六",
"uni-calender.confirm": "確認"
}
\ No newline at end of file
uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
import CALENDAR from './calendar.js'
class Calendar {
constructor({
date,
......@@ -112,7 +110,6 @@ class Calendar {
dateArr.push({
date: beforeDate,
month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true
})
}
......@@ -170,10 +167,9 @@ class Calendar {
year: full.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !(disableBefore && disableAfter),
isDay,
userChecked: false
......@@ -195,7 +191,6 @@ class Calendar {
dateArr.push({
date: i,
month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true
})
}
......@@ -244,6 +239,25 @@ class Calendar {
}
}
/**
* 比较真实起始日期
*/
isLogicBefore(currentDay, before, after) {
let logicBefore = before
if (before && after) {
logicBefore = this.dateCompare(before, after) ? before : after
}
return this.dateEqual(logicBefore, currentDay)
}
isLogicAfter(currentDay, before, after) {
let logicAfter = after
if (before && after) {
logicAfter = this.dateCompare(before, after) ? after : before
}
return this.dateEqual(logicAfter, currentDay)
}
/**
* 获取日期范围内所有日期
......@@ -266,19 +280,6 @@ class Calendar {
}
return arr
}
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/**
* 获取多选状态
......@@ -288,7 +289,6 @@ class Calendar {
before,
after
} = this.multipleStatus
if (!this.range) return
if (before && after) {
if (!this.lastHover) {
......@@ -301,9 +301,9 @@ class Calendar {
this.multipleStatus.fulldate = ''
this.lastHover = false
} else {
this.lastHover = false
if (!before) {
this.multipleStatus.before = fullDate
this.lastHover = false
} else {
this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
......@@ -313,6 +313,7 @@ class Calendar {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
.before);
}
this.lastHover = true
}
}
this._getWeek(fullDate)
......
uni_modules/uni-datetime-picker/package.json
{
"id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器",
"version": "2.1.4",
"version": "2.2.6",
"description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
"keywords": [
"uni-datetime-picker",
......@@ -42,6 +42,7 @@
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
......
uni_modules/uni-datetime-picker/readme.md
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
## DatetimePicker 时间选择器
> **组件名：uni-datetime-picker**
> 代码块： `uDatetimePicker`
......@@ -9,151 +12,10 @@
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
___点击 picker 默认值规则：___
**_点击 picker 默认值规则：_**
- 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<template>
<view class="page">
<text class="example-info">可以同时选择日期和时间的选择器</text>
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" />
</view>
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker returnType="timestamp" @change="changeLog($event)" start="2021-3-20" end="2021-5-20" />
</view>
<uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
</view>
<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" />
</view>
<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
</view>
<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" :border="false" />
</view>
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" disabled />
</view>
<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="range" type="daterange" start="2021-3-20" end="2021-5-20"
rangeSeparator="至" />
</view>
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="datetimerange" type="datetimerange"
start="2021-3-20 12:00:00" end="2021-6-20 20:00:00" rangeSeparator="至" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
single: '2021-04-3',
datetimesingle: '2021-04-3',
range: ['2021-03-8', '2021-4-20'],
datetimerange: ['2021-03-20 20:10:10', '2021-05-10 10:10:10'],
}
},
watch: {
datetimesingle(newval) {
console.log('单选:', this.datetimesingle);
},
range(newval) {
console.log('范围选:', this.range);
},
datetimerange(newval) {
console.log('范围选:', this.datetimerange);
}
},
mounted() {
setTimeout(() => {
this.datetimesingle = '2021-5-1'
this.single = '2021-5-1'
},1000)
},
methods:{
change(e) {
this.single = e
console.log('-change事件:', e);
}
}
}
</script>
<style lang="scss">
@import '@/common/uni-nvue.scss';
</style>
```
## API
### DatetimePicker Props
|属性名 |类型 |默认值 |值域 |说明 |
|:-: |:-: |:-: | |:-: |
|type |String |datetime |date/daterange/datetime/datetimerange|选择器类型 |
|value |String、Number、Array(范围选择)、Date|- |- |输入框当前值 |
|start |String、Number |- |- |最小值，可以使用日期的字符串（String）、时间戳（Number） |
|end |String、Number |- |- |最大值，可以使用日期的字符串（String）、时间戳（Number） |
|return-type |String |string |timestamp 、string、date |返回值格式 |
|border |Boolean |true | |是否有边框 |
|rangeSeparator |String |'-' |- |选择范围时的分隔符 |
|placeholder |String |- |- |非范围选择时的占位内容 |
|start-placeholder|String |- |- |范围选择时开始日期的占位内容 |
|end-placeholder |String |- |- |范围选择时结束日期的占位内容 |
|disabled |Boolean |false | |是否不可选择 |
|clear-icon |Boolean |true | |是否显示清除按钮 |
|hide-second |Boolean |false | |是否显示秒，只显示时分 |
### DatetimePicker Events
|事件名称 |说明 |返回值 |
|:-: |:-: |:-: |
|change |确定日期时间时触发的事件，参数为当前选择的日期对象 |单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
|maskClick|点击遮罩层触发 |- |
### Popup Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|show|打开弹出层|-|
|close|关闭弹出层 |-|
|clear|清除上次选中的状态和值|-|
###
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker)
\ No newline at end of file
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
uni_modules/uni-icons/changelog.md
## 1.2.1（2021-09-17）
- 新增 支持使用 css 图标库扩展组件（仅 vue 支持）
## 1.3.5（2022-01-24）
- 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4（2022-01-24）
- 优化 size 支持其他单位
## 1.3.3（2022-01-17）
- 修复 nvue 有些图标不显示的bug，兼容老版本图标
## 1.3.2（2021-12-01）
- 优化 示例可复制图标名称
## 1.3.1（2021-11-23）
- 优化 兼容旧组件 type 值
## 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-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
## 1.1.7（2021-11-08）
## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5（2021-05-12）
......
uni_modules/uni-icons/components/uni-icons/uniicons.css 0 → 100644
.uniui-color:before {
content: "\e6cf";
}
.uniui-wallet:before {
content: "\e6b1";
}
.uniui-settings-filled:before {
content: "\e6ce";
}
.uniui-auth-filled:before {
content: "\e6cc";
}
.uniui-shop-filled:before {
content: "\e6cd";
}
.uniui-staff-filled:before {
content: "\e6cb";
}
.uniui-vip-filled:before {
content: "\e6c6";
}
.uniui-plus-filled:before {
content: "\e6c7";
}
.uniui-folder-add-filled:before {
content: "\e6c8";
}
.uniui-color-filled:before {
content: "\e6c9";
}
.uniui-tune-filled:before {
content: "\e6ca";
}
.uniui-calendar-filled:before {
content: "\e6c0";
}
.uniui-notification-filled:before {
content: "\e6c1";
}
.uniui-wallet-filled:before {
content: "\e6c2";
}
.uniui-medal-filled:before {
content: "\e6c3";
}
.uniui-gift-filled:before {
content: "\e6c4";
}
.uniui-fire-filled:before {
content: "\e6c5";
}
.uniui-refreshempty:before {
content: "\e6bf";
}
.uniui-location-filled:before {
content: "\e6af";
}
.uniui-person-filled:before {
content: "\e69d";
}
.uniui-personadd-filled:before {
content: "\e698";
}
.uniui-back:before {
content: "\e6b9";
}
.uniui-forward:before {
content: "\e6ba";
}
.uniui-arrow-right:before {
content: "\e6bb";
}
.uniui-arrowthinright:before {
content: "\e6bb";
}
.uniui-arrow-left:before {
content: "\e6bc";
}
.uniui-arrowthinleft:before {
content: "\e6bc";
}
.uniui-arrow-up:before {
content: "\e6bd";
}
.uniui-arrowthinup:before {
content: "\e6bd";
}
.uniui-arrow-down:before {
content: "\e6be";
}
.uniui-arrowthindown:before {
content: "\e6be";
}
.uniui-bottom:before {
content: "\e6b8";
}
.uniui-arrowdown:before {
content: "\e6b8";
}
.uniui-right:before {
content: "\e6b5";
}
.uniui-arrowright:before {
content: "\e6b5";
}
.uniui-top:before {
content: "\e6b6";
}
.uniui-arrowup:before {
content: "\e6b6";
}
.uniui-left:before {
content: "\e6b7";
}
.uniui-arrowleft:before {
content: "\e6b7";
}
.uniui-eye:before {
content: "\e651";
}
.uniui-eye-filled:before {
content: "\e66a";
}
.uniui-eye-slash:before {
content: "\e6b3";
}
.uniui-eye-slash-filled:before {
content: "\e6b4";
}
.uniui-info-filled:before {
content: "\e649";
}
.uniui-reload:before {
content: "\e6b2";
}
.uniui-micoff-filled:before {
content: "\e6b0";
}
.uniui-map-pin-ellipse:before {
content: "\e6ac";
}
.uniui-map-pin:before {
content: "\e6ad";
}
.uniui-location:before {
content: "\e6ae";
}
.uniui-starhalf:before {
content: "\e683";
}
.uniui-star:before {
content: "\e688";
}
.uniui-star-filled:before {
content: "\e68f";
}
.uniui-calendar:before {
content: "\e6a0";
}
.uniui-fire:before {
content: "\e6a1";
}
.uniui-medal:before {
content: "\e6a2";
}
.uniui-font:before {
content: "\e6a3";
}
.uniui-gift:before {
content: "\e6a4";
}
.uniui-link:before {
content: "\e6a5";
}
.uniui-notification:before {
content: "\e6a6";
}
.uniui-staff:before {
content: "\e6a7";
}
.uniui-vip:before {
content: "\e6a8";
}
.uniui-folder-add:before {
content: "\e6a9";
}
.uniui-tune:before {
content: "\e6aa";
}
.uniui-auth:before {
content: "\e6ab";
}
.uniui-person:before {
content: "\e699";
}
.uniui-email-filled:before {
content: "\e69a";
}
.uniui-phone-filled:before {
content: "\e69b";
}
.uniui-phone:before {
content: "\e69c";
}
.uniui-email:before {
content: "\e69e";
}
.uniui-personadd:before {
content: "\e69f";
}
.uniui-chatboxes-filled:before {
content: "\e692";
}
.uniui-contact:before {
content: "\e693";
}
.uniui-chatbubble-filled:before {
content: "\e694";
}
.uniui-contact-filled:before {
content: "\e695";
}
.uniui-chatboxes:before {
content: "\e696";
}
.uniui-chatbubble:before {
content: "\e697";
}
.uniui-upload-filled:before {
content: "\e68e";
}
.uniui-upload:before {
content: "\e690";
}
.uniui-weixin:before {
content: "\e691";
}
.uniui-compose:before {
content: "\e67f";
}
.uniui-qq:before {
content: "\e680";
}
.uniui-download-filled:before {
content: "\e681";
}
.uniui-pyq:before {
content: "\e682";
}
.uniui-sound:before {
content: "\e684";
}
.uniui-trash-filled:before {
content: "\e685";
}
.uniui-sound-filled:before {
content: "\e686";
}
.uniui-trash:before {
content: "\e687";
}
.uniui-videocam-filled:before {
content: "\e689";
}
.uniui-spinner-cycle:before {
content: "\e68a";
}
.uniui-weibo:before {
content: "\e68b";
}
.uniui-videocam:before {
content: "\e68c";
}
.uniui-download:before {
content: "\e68d";
}
.uniui-help:before {
content: "\e679";
}
.uniui-navigate-filled:before {
content: "\e67a";
}
.uniui-plusempty:before {
content: "\e67b";
}
.uniui-smallcircle:before {
content: "\e67c";
}
.uniui-minus-filled:before {
content: "\e67d";
}
.uniui-micoff:before {
content: "\e67e";
}
.uniui-closeempty:before {
content: "\e66c";
}
.uniui-clear:before {
content: "\e66d";
}
.uniui-navigate:before {
content: "\e66e";
}
.uniui-minus:before {
content: "\e66f";
}
.uniui-image:before {
content: "\e670";
}
.uniui-mic:before {
content: "\e671";
}
.uniui-paperplane:before {
content: "\e672";
}
.uniui-close:before {
content: "\e673";
}
.uniui-help-filled:before {
content: "\e674";
}
.uniui-paperplane-filled:before {
content: "\e675";
}
.uniui-plus:before {
content: "\e676";
}
.uniui-mic-filled:before {
content: "\e677";
}
.uniui-image-filled:before {
content: "\e678";
}
.uniui-locked-filled:before {
content: "\e668";
}
.uniui-info:before {
content: "\e669";
}
.uniui-locked:before {
content: "\e66b";
}
.uniui-camera-filled:before {
content: "\e658";
}
.uniui-chat-filled:before {
content: "\e659";
}
.uniui-camera:before {
content: "\e65a";
}
.uniui-circle:before {
content: "\e65b";
}
.uniui-checkmarkempty:before {
content: "\e65c";
}
.uniui-chat:before {
content: "\e65d";
}
.uniui-circle-filled:before {
content: "\e65e";
}
.uniui-flag:before {
content: "\e65f";
}
.uniui-flag-filled:before {
content: "\e660";
}
.uniui-gear-filled:before {
content: "\e661";
}
.uniui-home:before {
content: "\e662";
}
.uniui-home-filled:before {
content: "\e663";
}
.uniui-gear:before {
content: "\e664";
}
.uniui-smallcircle-filled:before {
content: "\e665";
}
.uniui-map-filled:before {
content: "\e666";
}
.uniui-map:before {
content: "\e667";
}
.uniui-refresh-filled:before {
content: "\e656";
}
.uniui-refresh:before {
content: "\e657";
}
.uniui-cloud-upload:before {
content: "\e645";
}
.uniui-cloud-download-filled:before {
content: "\e646";
}
.uniui-cloud-download:before {
content: "\e647";
}
.uniui-cloud-upload-filled:before {
content: "\e648";
}
.uniui-redo:before {
content: "\e64a";
}
.uniui-images-filled:before {
content: "\e64b";
}
.uniui-undo-filled:before {
content: "\e64c";
}
.uniui-more:before {
content: "\e64d";
}
.uniui-more-filled:before {
content: "\e64e";
}
.uniui-undo:before {
content: "\e64f";
}
.uniui-images:before {
content: "\e650";
}
.uniui-paperclip:before {
content: "\e652";
}
.uniui-settings:before {
content: "\e653";
}
.uniui-search:before {
content: "\e654";
}
.uniui-redo-filled:before {
content: "\e655";
}
.uniui-list:before {
content: "\e644";
}
.uniui-mail-open-filled:before {
content: "\e63a";
}
.uniui-hand-down-filled:before {
content: "\e63c";
}
.uniui-hand-down:before {
content: "\e63d";
}
.uniui-hand-up-filled:before {
content: "\e63e";
}
.uniui-hand-up:before {
content: "\e63f";
}
.uniui-heart-filled:before {
content: "\e641";
}
.uniui-mail-open:before {
content: "\e643";
}
.uniui-heart:before {
content: "\e639";
}
.uniui-loop:before {
content: "\e633";
}
.uniui-pulldown:before {
content: "\e632";
}
.uniui-scan:before {
content: "\e62a";
}
.uniui-bars:before {
content: "\e627";
}
.uniui-cart-filled:before {
content: "\e629";
}
.uniui-checkbox:before {
content: "\e62b";
}
.uniui-checkbox-filled:before {
content: "\e62c";
}
.uniui-shop:before {
content: "\e62f";
}
.uniui-headphones:before {
content: "\e630";
}
.uniui-cart:before {
content: "\e631";
}
uni_modules/uni-icons/package.json
{
"id": "uni-icons",
"displayName": "uni-icons 图标",
"version": "1.2.1",
"version": "1.3.5",
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
"keywords": [
"uni-ui",
......@@ -11,7 +11,7 @@
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
"HBuilderX": "^3.2.14"
},
"directories": {
"example": "../../temps/example_temps"
......@@ -40,7 +40,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
......
uni_modules/uni-icons/readme.md
## Icons 图标
> **组件名：uni-icons**
> 代码块： `uIcons`
用于展示 icons 图标 。
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<uni-icons type="contact" size="30"></uni-icons>
```
### 扩展图标用法
1. 需要自行在项目 App.vue 中引入 css 图标扩展库（注意: css 图标库引用的 .ttf 文件路径是否正确）
```html
<style lang="scss">
/* 扩展图标库 */
@import '@/static/iconfont.css';
</style>
```
2. 在 ``template`` 中使用组件
```html
<uni-icons class="mr-30" type="icon-kongxincai" font-family="iconfont" color="#007AFF" size="20"></uni-icons>
```
## API
### Icons Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|size |Number |24 |图标大小 |
|type |String |- |图标图案，参考示例 |
|color |String |- |图标颜色 |
|font-family(仅 vue 支持) |String |uniicons |图标库字体家族 |
### Icons Events
|事件名 |说明 |返回值|
|:-: |:-: |:-: |
|@click|点击 Icon 触发事件|- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
\ No newline at end of file
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
uni_modules/uni-scss/changelog.md 0 → 100644
## 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
uni_modules/uni-scss/index.scss 0 → 100644
@import './styles/index.scss';
uni_modules/uni-scss/package.json 0 → 100644
{
"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"
}
}
}
}
}
uni_modules/uni-scss/readme.md 0 → 100644
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
uni_modules/uni-scss/styles/index.scss 0 → 100644
@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';
uni_modules/uni-scss/styles/setting/_border.scss 0 → 100644
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_color.scss 0 → 100644
// 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;
}
uni_modules/uni-scss/styles/setting/_radius.scss 0 → 100644
@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)
}
}
}
}
uni_modules/uni-scss/styles/setting/_space.scss 0 → 100644
@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);
}
}
}
}
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_styles.scss 0 → 100644
/* #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 */
uni_modules/uni-scss/styles/setting/_text.scss 0 → 100644
@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 */
}
uni_modules/uni-scss/styles/setting/_variables.scss 0 → 100644
// @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;
uni_modules/uni-scss/styles/tools/functions.scss 0 → 100644
// 合并 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;
};
uni_modules/uni-scss/theme.scss 0 → 100644
// 间距基础倍数
$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);
uni_modules/uni-scss/variables.scss 0 → 100644
@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);
uni_modules/uni-table/changelog.md
## 1.2.1（2022-06-06）
- 修复 微信小程序存在无使用组件的问题
## 1.2.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-table](https://uniapp.dcloud.io/component/uniui/uni-table)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-07-08）
......
uni_modules/uni-table/components/uni-table/uni-table.vue
......@@ -301,7 +301,7 @@ export default {
</script>
<style lang="scss">
$border-color: #CAD9E0;
$border-color: #ebeef5;
.uni-table-scroll {
width: 100%;
......@@ -337,8 +337,7 @@ $border-color: #CAD9E0;
}
.table--border {
border: 1rpx $border-color solid;
border-left: none;
border: 1px $border-color solid;
border-right: none;
}
......
uni_modules/uni-table/components/uni-td/uni-td.vue
......@@ -66,16 +66,16 @@ export default {
</script>
<style lang="scss">
$border-color: #CAD9E0;
$border-color: #ebeef5;
.uni-table-td {
padding-left: 24rpx;
height: 60rpx;
display: table-cell;
font-size: 22epx;
border-bottom: 1rpx $border-color solid;
vertical-align: middle;
color: #404547;
padding: 8px 10px;
font-size: 12px;
border-bottom: 1px $border-color solid;
font-weight: 400;
color: #606266;
line-height: 23px;
box-sizing: border-box;
}
......
uni_modules/uni-table/components/uni-th/filter-dropdown.vue
......@@ -144,7 +144,7 @@
}
},
watch: {
filters(newVal) {
filterData(newVal) {
this._copyFilters()
},
indeterminate(newVal) {
......
uni_modules/uni-table/components/uni-th/uni-th.vue
<template>
<!-- #ifdef H5 -->
<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
<view class="uni-table-th-row">
<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
<slot></slot>
......@@ -14,17 +14,19 @@
</th>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }"><slot></slot></view>
<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import dropdown from './filter-dropdown.vue'
// #ifdef H5
import dropdown from './filter-dropdown.vue';
// #endif
/**
* Th 表头
* @description 表格内的表头单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number} width 单元格宽度
* @property {Number | String} width 单元格宽度（支持纯数字、携带单位px或rpx）
* @property {Boolean} sortable 是否启用排序
* @property {Number} align = [left|center|right] 单元格对齐方式
* @value left 单元格文字左侧对齐
......@@ -42,9 +44,11 @@ export default {
virtualHost: true
},
components: {
// #ifdef H5
dropdown
// #endif
},
emits:['sort-change','filter-change'],
emits: ['sort-change', 'filter-change'],
props: {
width: {
type: [String, Number],
......@@ -68,12 +72,12 @@ export default {
},
filterType: {
type: String,
default: ""
default: ''
},
filterData: {
type: Array,
default () {
return []
default() {
return [];
}
}
},
......@@ -82,110 +86,135 @@ export default {
border: false,
ascending: false,
descending: false
}
};
},
computed: {
// 根据props中的width属性 自动匹配当前th的宽度(px)
customWidth() {
if (typeof this.width === 'number') {
return this.width;
} else if (typeof this.width === 'string') {
let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g);
let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g);
let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g);
if (this.width.match(regexHaveUnitPx) !== null) {
// 携带了 px
return this.width.replace('px', '');
} else if (this.width.match(regexHaveUnitRpx) !== null) {
// 携带了 rpx
let numberRpx = Number(this.width.replace('rpx', ''));
let widthCoe = uni.getSystemInfoSync().screenWidth / 750;
return Math.round(numberRpx * widthCoe);
} else if (this.width.match(regexHaveNotUnit) !== null) {
// 未携带 rpx或px 的纯数字 String
return this.width;
} else {
// 不符合格式
return '';
}
} else {
return '';
}
},
contentAlign() {
let align = 'left'
let align = 'left';
switch (this.align) {
case 'left':
align = 'flex-start'
break
align = 'flex-start';
break;
case 'center':
align = 'center'
break
align = 'center';
break;
case 'right':
align = 'flex-end'
break
align = 'flex-end';
break;
}
return align
return align;
}
},
created() {
this.root = this.getTable('uniTable')
this.rootTr = this.getTable('uniTr')
this.rootTr.minWidthUpdate(this.width ? this.width : 140)
this.border = this.root.border
this.root.thChildren.push(this)
this.root = this.getTable('uniTable');
this.rootTr = this.getTable('uniTr');
this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140);
this.border = this.root.border;
this.root.thChildren.push(this);
},
methods: {
sort() {
if (!this.sortable) return
this.clearOther()
if (!this.sortable) return;
this.clearOther();
if (!this.ascending && !this.descending) {
this.ascending = true
this.$emit('sort-change', { order: 'ascending' })
return
this.ascending = true;
this.$emit('sort-change', { order: 'ascending' });
return;
}
if (this.ascending && !this.descending) {
this.ascending = false
this.descending = true
this.$emit('sort-change', { order: 'descending' })
return
this.ascending = false;
this.descending = true;
this.$emit('sort-change', { order: 'descending' });
return;
}
if (!this.ascending && this.descending) {
this.ascending = false
this.descending = false
this.$emit('sort-change', { order: null })
this.ascending = false;
this.descending = false;
this.$emit('sort-change', { order: null });
}
},
ascendingFn() {
this.clearOther()
this.ascending = !this.ascending
this.descending = false
this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
this.clearOther();
this.ascending = !this.ascending;
this.descending = false;
this.$emit('sort-change', { order: this.ascending ? 'ascending' : null });
},
descendingFn() {
this.clearOther()
this.descending = !this.descending
this.ascending = false
this.$emit('sort-change', { order: this.descending ? 'descending' : null })
this.clearOther();
this.descending = !this.descending;
this.ascending = false;
this.$emit('sort-change', { order: this.descending ? 'descending' : null });
},
clearOther() {
this.root.thChildren.map(item => {
if (item !== this) {
item.ascending = false
item.descending = false
item.ascending = false;
item.descending = false;
}
return item
})
return item;
});
},
ondropdown(e) {
this.$emit("filter-change", e)
this.$emit('filter-change', e);
},
/**
* 获取父元素实例
*/
getTable(name) {
let parent = this.$parent
let parentName = parent.$options.name
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent
if (!parent) return false
parentName = parent.$options.name
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent
return parent;
}
}
}
};
</script>
<style lang="scss">
$border-color: #CAD9E0;
$border-color: #ebeef5;
.uni-table-th {
padding: 12px 10px;
/* #ifndef APP-NVUE */
padding-left: 24rpx;
height: 60rpx;
display: table-cell;
box-sizing: border-box;
/* #endif */
font-size: 22rpx;
color: #6E767A;
background: #F1F4F6;
font-size: 12px;
font-weight: bold;
color: #909399;
border-bottom: 1px $border-color solid;
vertical-align: middle;
}
.uni-table-th-row {
......
uni_modules/uni-table/components/uni-tr/uni-tr.vue
......@@ -74,11 +74,20 @@ export default {
this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
}
},
// #ifndef VUE3
destroyed() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
// #ifdef VUE3
unmounted() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
methods: {
minWidthUpdate(width) {
this.widthThArr.push(width)
......@@ -114,7 +123,7 @@ export default {
</script>
<style lang="scss">
$border-color: #CAD9E0;
$border-color: #ebeef5;
.uni-table-tr {
/* #ifndef APP-NVUE */
......@@ -134,7 +143,7 @@ $border-color: #CAD9E0;
/* #endif */
color: #333;
font-weight: 500;
border-bottom: 1rpx $border-color solid;
border-bottom: 1px $border-color solid;
font-size: 14px;
// text-align: center;
}
......
uni_modules/uni-table/i18n/en.json 0 → 100644
{
"filter-dropdown.reset": "Reset",
"filter-dropdown.search": "Search",
"filter-dropdown.submit": "Submit",
"filter-dropdown.filter": "Filter",
"filter-dropdown.gt": "Greater or equal to",
"filter-dropdown.lt": "Less than or equal to",
"filter-dropdown.date": "Date"
}
uni_modules/uni-table/i18n/es.json 0 → 100644
{
"filter-dropdown.reset": "Reiniciar",
"filter-dropdown.search": "Búsqueda",
"filter-dropdown.submit": "Entregar",
"filter-dropdown.filter": "Filtrar",
"filter-dropdown.gt": "Mayor o igual a",
"filter-dropdown.lt": "Menos que o igual a",
"filter-dropdown.date": "Fecha"
}
uni_modules/uni-table/i18n/fr.json 0 → 100644
{
"filter-dropdown.reset": "Réinitialiser",
"filter-dropdown.search": "Chercher",
"filter-dropdown.submit": "Soumettre",
"filter-dropdown.filter": "Filtre",
"filter-dropdown.gt": "Supérieur ou égal à",
"filter-dropdown.lt": "Inférieur ou égal à",
"filter-dropdown.date": "Date"
}
uni_modules/uni-table/i18n/index.js 0 → 100644
import en from './en.json'
import es from './es.json'
import fr from './fr.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
es,
fr,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
uni_modules/uni-table/i18n/zh-Hans.json 0 → 100644
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "确定",
"filter-dropdown.filter": "筛选",
"filter-dropdown.gt": "大于等于",
"filter-dropdown.lt": "小于等于",
"filter-dropdown.date": "日期范围"
}
uni_modules/uni-table/i18n/zh-Hant.json 0 → 100644
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "確定",
"filter-dropdown.filter": "篩選",
"filter-dropdown.gt": "大於等於",
"filter-dropdown.lt": "小於等於",
"filter-dropdown.date": "日期範圍"
}
uni_modules/uni-table/package.json
{
"id": "uni-table",
"displayName": "uni-table 表格",
"version": "1.1.0",
"version": "1.2.1",
"description": "表格组件，多用于展示多条结构类似的数据，如",
"keywords": [
"uni-ui",
......@@ -40,7 +40,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-datetime-picker"],
"dependencies": ["uni-scss","uni-datetime-picker"],
"encrypt": [],
"platforms": {
"cloud": {
......@@ -75,6 +75,10 @@
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
......
uni_modules/uni-table/readme.md
......@@ -5,144 +5,9 @@
用于展示多条结构类似的数据
### 平台差异说明
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-table)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
目前仅支持pc端
### 组件使用注意事项
为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
- 组件需要依赖 `sass` 插件 ，请自行手动安装
- 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
表格是由4个组件： `uni-table`表格组件、`uni-tr`表格行 、`uni-th` 表格头、`uni-td` 单元格组成
需要注意的是：
- `uni-table` 的根节点一定是 `uni-tr`
- `uni-tr` 的根节点一定是 `uni-th` 或者 `uni-td`
- 一个表格内理论上只能包含表头行
- 目前只能在 `uni-th` 中设置 width 属性，`uni-td` 的宽度跟随 `uni-th` 宽度变化
```html
<uni-table border stripe emptyText="暂无更多数据" >
<!-- 表头行 -->
<uni-tr>
<uni-th align="center">日期</uni-th>
<uni-th align="center">姓名</uni-th>
<uni-th align="left">地址</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr>
<uni-td>2020-10-20</uni-td>
<uni-td>Jeson</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-21</uni-td>
<uni-td>HanMeiMei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-22</uni-td>
<uni-td>LiLei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-23</uni-td>
<uni-td>Danner</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
</uni-table>
</script>
```
## API
### Table Props
|属性名 | 类型 |默认值 | 可选值 | 说明|
|:-: | :-: |:-: | :-: | :-: |
|border | Boolean | false | - | 是否带有纵向边框 |
|stripe | Boolean | false | - | 是否显示斑马线样式 |
|type | String | '' | - | 值为type="selection" 时开启多选|
|emptyText | String | 没有更多数据 | - | 空数据时显示的文本内容 |
|loading | Boolean | false | - | 显示加载中|
### Table Events
事件称名 |说明 | 返回参数
:-: |:-: | :-:
selection-change | 开启多选时，当选择项发生变化时会触发该事件 | Function(Object)
### Table Methods
**Tips: 因微信小程序框架问题，暂不支持如下方法**
|方法称名 |说明 |参数|
|:-: |:-: |:-:|
|selectionAll |选中全部行 |- |
|toggleRowSelection |用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | Function(Array:[行索引],Boolean:selected) |
|clearSelection |用于多选表格，清空用户的选择 |- |
|toggleAllSelection |用于多选表格，切换所有行的选中状态 |- |
### Th Props
|属性名 |类型 |默认值 |可选值 |说明|
|:-: |:-: |:-: | :-: |:-:|
|width |String | - |- | 单元格宽度|
|align |String | left |left/center/right | 表头对齐方式|
|filter-type |String | |search/select/range/date | 筛选类型，search关键字搜索，select类别选择|
|filter-data |Array | || 筛选数据|
|sortable |Boolean| false |- | 是否启用排序|
filter-data 示例
```json
[{
text: "", //显示
value: "" // 值
}]
```
### Th Events
|事件称名 |说明 | 返回参数 |
|:-: |:-: | :-: |
||sort-change | 点击排序时会触发该事件 | Function(Object)|
||filter-change | 筛选数据时会触发该事件 | Function(Object)|
filter-change(e) 说明
```json
e = {
filterType: "", //筛选类型 search/select/range 和传入的相同
filter: "" // 值, filterType=search字符串类型，filterType=select数组类型，filterType=range数组类型，[0]开始值， [1]结束值
}
```
### Td Props
|属性名 |类型 |默认值 |可选值 |说明|
|:-: |:-: |:-: |:-: |:-:|
|align |Boolean| left |left/center/right | 单元格对齐方式|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/table/table](https://hellouniapp.dcloud.net.cn/pages/extUI/table/table)
\ No newline at end of file
util/api.js
const API_BASE = 'https://api.ichunt.com';
//const API_BASE = 'http://api.liexin.com';
//const API_BASE = 'https://api.ichunt.com';
const API_BASE = 'http://api.liexin.com';
const API = {
/**
* 上传数据
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment