Skip to content

梁建民 / scmMiniprogram

Go to a project
Commit eff63fd2 by liangjianmin
Options

css

parent aeaead04
Expand all
Inline Side-by-side
Showing with 5020 additions and 0 deletions
assets/css/font.css
......@@ -11,6 +11,38 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-Chevron1:before {
content: "\e769";
}
.icon-Chevron:before {
content: "\e768";
}
.icon-a-juxing1:before {
content: "\e767";
}
.icon-juxing:before {
content: "\e766";
}
.icon-zhixian:before {
content: "\e765";
}
.icon-dingwei:before {
content: "\e764";
}
.icon-sanjiaoxing1:before {
content: "\e763";
}
.icon-jinggao3:before {
content: "\e762";
}
.icon-sanjiaoxing:before {
content: "\e761";
}
......
assets/css/order/index.scss 0 → 100644
.order-index {
padding-bottom: 50rpx;
.fix {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.search-box {
width: 100%;
background: #ffffff;
border-top: 1rpx solid #cad9e0;
.search-input {
position: relative;
height: 100rpx;
padding-left: 72rpx;
.icon-a-riqi1 {
position: absolute;
top: 32rpx;
left: 24rpx;
font-size: 36rpx;
color: #6e767a;
}
.icon-jinggao2 {
position: absolute;
top: 32rpx;
right: 179rpx;
font-size: 36rpx;
color: #9ca8ad;
z-index: 10;
}
.uni-input {
font-size: 26rpx;
color: #404547;
width: 480rpx;
&:-webkit-input-placeholder {
color: #6e767a;
}
}
.more {
padding-right: 24rpx;
transition: all 0.4s ease;
&.curr {
.t1 {
color: #197adb;
}
.iconfont {
color: #197adb;
transform: rotateX(180deg);
}
}
.t1 {
font-size: 24rpx;
color: #6e767a;
}
.iconfont {
margin-left: 16rpx;
font-size: 14rpx;
color: #9ca8ad;
}
}
}
.show-box {
padding-bottom: 30rpx;
.input-box {
margin-left: 67rpx;
height: 100rpx;
border-top: 1rpx solid #cad9e0;
border-bottom: 1rpx solid #cad9e0;
.uni-input {
font-size: 26rpx;
&:-webkit-input-placeholder {
color: #6e767a;
}
}
}
.input-time {
position: relative;
margin-left: 67rpx;
height: 100rpx;
.iconfont {
position: absolute;
right: 24rpx;
top: 44rpx;
font-size: 13rpx;
color: #9ca8ad;
}
.uni-input {
font-size: 26rpx;
&:-webkit-input-placeholder {
color: #6e767a;
}
}
}
.btn {
width: 702rpx;
height: 88rpx;
background: #197adb;
border-radius: 4rpx;
font-size: 28rpx;
color: #ffffff;
margin: 0 auto;
}
}
}
.tab {
margin-top: 100rpx;
height: 114rpx;
background-color: #f1f4f6;
padding-left: 24px;
.box {
position: relative;
font-size: 26rpx;
color: #404547;
margin-right: 44rpx;
transition: all 0.4s ease;
.t2 {
display: none;
}
&.curr {
color: #1e2021;
font-size: 32rpx;
font-weight: bold;
.t2 {
display: flex;
}
&:after {
position: absolute;
bottom: -16rpx;
left: 0;
right: 0;
width: 100%;
height: 6rpx;
background: #197adb;
border-radius: 3rpx;
content: '';
}
}
}
}
.list {
padding: 0 24rpx;
.box {
position: relative;
background: #ffffff;
border-radius: 4rpx;
padding: 24rpx 0 0 24rpx;
margin-bottom: 20rpx;
.status {
position: absolute;
right: 24rpx;
top: 26rpx;
font-size: 26rpx;
color: #197adb;
}
.orderNo {
margin-bottom: 18rpx;
.arrow {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #197adb;
}
.t1 {
margin-left: 12rpx;
font-size: 28rpx;
color: #1e2021;
}
}
.p1 {
margin-bottom: 16rpx;
.t1 {
font-size: 22rpx;
color: #6e767a;
white-space: nowrap;
}
.t2 {
margin-left: 16rpx;
font-size: 22rpx;
color: #404547;
}
.t3 {
font-size: 22rpx;
color: #1e2021;
margin-left: 16rpx;
font-weight: bold;
}
.flex-av {
flex: 0 0 50%;
}
.ml {
margin-left: 100rpx;
}
&.mb24 {
margin-bottom: 24rpx;
}
}
.bottom {
height: 80rpx;
border-top: 1rpx solid #e6edf0;
.info {
flex: 0 0 50%;
.icon-jinggao3 {
font-size: 32rpx;
color: #9ca8ad;
margin-right: 8rpx;
}
.icon-a-jinggao3 {
font-size: 32rpx;
color: #34bb47;
margin-right: 8rpx;
}
.t1 {
font-size: 24rpx;
color: #1e2021;
font-weight: bold;
margin-right: 20rpx;
}
.t2 {
font-size: 22rpx;
color: #6e767a;
}
.t3 {
font-size: 22rpx;
color: #197adb;
margin-left: 20rpx;
}
}
}
}
}
}
.shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
background: rgba(0, 0, 0, 0.5);
}
.no-data {
margin-top: 80rpx;
.iconfont {
font-size: 188rpx;
color: #f39d18;
margin-bottom: 16rpx;
}
.text {
font-size: 28rpx;
color: #1e2021;
font-weight: bold;
}
.link {
color: #197adb;
font-weight: bold;
}
.p {
margin-top: 17rpx;
font-size: 22rpx;
color: #6e767a;
}
}
assets/css/payable/detail.scss 0 → 100644
.payable-detail {
margin-top: 24rpx;
padding: 0 24rpx;
.mb {
margin-bottom: 20rpx;
}
.box {
padding: 24rpx;
background: #ffffff;
border-radius: 4rpx;
.title {
margin-bottom: 24rpx;
.arrow {
width: 12rpx;
height: 12rpx;
background: #197adb;
border-radius: 50%;
}
.text {
font-size: 32rpx;
color: #1e2021;
font-weight: bold;
margin-left: 16rpx;
}
}
.pp {
margin-bottom: 20rpx;
&.bor {
padding-bottom: 24rpx;
border-bottom: 1rpx solid #e6edf0;
}
.t1 {
font-size: 24rpx;
color: #6e767a;
white-space: nowrap;
}
.t2 {
font-size: 24rpx;
color: #404547;
margin-left: 16rpx;
}
.t3 {
font-size: 24rpx;
color: #1e2021;
font-weight: bold;
margin-left: 16rpx;
}
.address {
margin-top: 16rpx;
margin-bottom: 9rpx;
.iconfont {
font-size: 36rpx;
color: #404547;
margin-right: 16rpx;
}
.t1 {
font-size: 24rpx;
color: #1e2021;
font-weight: bold;
}
.t2 {
font-size: 24rpx;
color: #1e2021;
font-weight: bold;
margin-left: 35rpx;
}
}
.address-detail {
font-size: 24rpx;
color: #6e767a;
}
.bank {
margin-left: 16rpx;
.iconfont {
font-size: 32rpx;
color: #197adb;
}
.tt {
font-size: 24rpx;
color: #197adb;
margin-left: 8rpx;
}
}
.logistics {
margin-left: 16rpx;
.iconfont {
font-size: 32rpx;
color: #197adb;
}
.tt {
font-size: 24rpx;
color: #197adb;
margin-left: 8rpx;
}
}
}
.total {
width: 100%;
height: 62rpx;
padding-left: 25rpx;
background: #f1f4f6;
border: 1px solid #cad9e0;
border-top: none;
}
}
.btn{
height: 88rpx;
background: #FFFFFF;
.iconfont{
font-size: 40rpx;
color: #197ADB;
}
.tt{
font-size: 28rpx;
color: #197ADB;
margin-left: 16rpx;
}
}
}
assets/css/payable/index.scss 0 → 100644
.payable-index {
padding-bottom: 50rpx;
.fix {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.search-box {
width: 100%;
background: #ffffff;
border-top: 1rpx solid #cad9e0;
.search-input {
position: relative;
height: 100rpx;
padding-left: 72rpx;
.icon-a-riqi1 {
position: absolute;
top: 32rpx;
left: 24rpx;
font-size: 36rpx;
color: #6e767a;
}
.icon-jinggao2 {
position: absolute;
top: 32rpx;
right: 179rpx;
font-size: 36rpx;
color: #9ca8ad;
z-index: 10;
}
.uni-input {
font-size: 26rpx;
color: #404547;
width: 480rpx;
&:-webkit-input-placeholder {
color: #6e767a;
}
}
.more {
padding-right: 24rpx;
transition: all 0.4s ease;
&.curr {
.t1 {
color: #197adb;
}
.iconfont {
color: #197adb;
transform: rotateX(180deg);
}
}
.t1 {
font-size: 24rpx;
color: #6e767a;
}
.iconfont {
margin-left: 16rpx;
font-size: 14rpx;
color: #9ca8ad;
}
}
}
.show-box {
padding-bottom: 30rpx;
.input-box {
margin-left: 67rpx;
height: 100rpx;
border-top: 1rpx solid #cad9e0;
border-bottom: 1rpx solid #cad9e0;
.uni-input {
font-size: 26rpx;
&:-webkit-input-placeholder {
color: #6e767a;
}
}
}
.input-time {
position: relative;
margin-left: 67rpx;
height: 100rpx;
border-top: 1rpx solid #cad9e0;
.iconfont {
position: absolute;
right: 24rpx;
top: 44rpx;
font-size: 13rpx;
color: #9ca8ad;
}
.uni-input {
font-size: 26rpx;
&:-webkit-input-placeholder {
color: #6e767a;
}
}
}
.btn {
width: 702rpx;
height: 88rpx;
background: #197adb;
border-radius: 4rpx;
font-size: 28rpx;
color: #ffffff;
margin: 0 auto;
}
}
}
.list {
margin-top: 135rpx;
padding: 0 24rpx;
.box {
position: relative;
background: #ffffff;
border-radius: 4rpx;
padding: 24rpx 0 0 24rpx;
margin-bottom: 20rpx;
.status {
position: absolute;
right: 24rpx;
top: 26rpx;
.iconfont {
font-size: 33rpx;
}
.tt {
font-size: 26rpx;
color: #197adb;
font-weight: bold;
margin-left: 8rpx;
}
&.color1 {
color: #197adb;
}
}
.orderNo {
margin-bottom: 18rpx;
.arrow {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #197adb;
}
.t1 {
margin-left: 12rpx;
font-size: 28rpx;
color: #1e2021;
}
}
.p1 {
margin-bottom: 16rpx;
.t1 {
font-size: 22rpx;
color: #6e767a;
}
.t2 {
margin-left: 16rpx;
font-size: 22rpx;
color: #404547;
}
.t3 {
font-size: 22rpx;
color: #1e2021;
margin-left: 16rpx;
font-weight: bold;
}
.t4 {
font-size: 22rpx;
color: #197adb;
font-weight: bold;
}
.flex-av {
flex: 0 0 50%;
}
.ml {
margin-left: 100rpx;
}
&.mb24 {
margin-bottom: 24rpx;
}
}
}
}
}
.shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
background: rgba(0, 0, 0, 0.5);
}
.no-data {
margin-top: 306rpx;
.iconfont {
font-size: 188rpx;
color: #f39d18;
margin-bottom: 16rpx;
}
.text {
font-size: 28rpx;
color: #1e2021;
font-weight: bold;
}
.link {
color: #197adb;
font-weight: bold;
}
.p {
margin-top: 17rpx;
font-size: 22rpx;
color: #6e767a;
}
}
assets/css/payment/detail.scss 0 → 100644
.payable-detail {
margin-top: 24rpx;
padding: 0 24rpx;
.mb {
margin-bottom: 20rpx;
}
.box {
padding: 24rpx;
background: #ffffff;
border-radius: 4rpx;
.title {
margin-bottom: 24rpx;
.arrow {
width: 12rpx;
height: 12rpx;
background: #197adb;
border-radius: 50%;
}
.text {
font-size: 32rpx;
color: #1e2021;
font-weight: bold;
margin-left: 16rpx;
}
}
.pp {
margin-bottom: 20rpx;
&.bor {
padding-bottom: 24rpx;
border-bottom: 1rpx solid #e6edf0;
}
.t1 {
font-size: 24rpx;
color: #6e767a;
white-space: nowrap;
}
.t2 {
width: 530rpx;
font-size: 24rpx;
color: #404547;
margin-left: 16rpx;
}
.t3 {
font-size: 24rpx;
color: #1e2021;
font-weight: bold;
margin-left: 16rpx;
}
.address {
margin-top: 16rpx;
margin-bottom: 9rpx;
.iconfont {
font-size: 36rpx;
color: #404547;
margin-right: 16rpx;
}
.t1 {
font-size: 24rpx;
color: #1e2021;
font-weight: bold;
}
.t2 {
font-size: 24rpx;
color: #1e2021;
font-weight: bold;
margin-left: 35rpx;
}
}
.address-detail {
font-size: 24rpx;
color: #6e767a;
}
.bank {
margin-left: 16rpx;
.iconfont {
font-size: 32rpx;
color: #197adb;
}
.tt {
font-size: 24rpx;
color: #197adb;
margin-left: 8rpx;
}
}
.logistics {
margin-left: 16rpx;
.iconfont {
font-size: 32rpx;
color: #197adb;
}
.tt {
font-size: 24rpx;
color: #197adb;
margin-left: 8rpx;
}
}
}
.right-arrow {
height: 79rpx;
background-color: #ffffff;
.right-text {
font-size: 22rpx;
color: #197adb;
margin-right: 16rpx;
}
.iconfont {
font-size: 26rpx;
color: #197adb;
}
}
.total {
width: 100%;
height: 62rpx;
padding-left: 25rpx;
background: #f1f4f6;
border: 1px solid #cad9e0;
border-top: none;
}
}
}
.uni-table {
.uni-table-tr {
&:last-child {
background: #f1f4f6 !important;
.uni-table-td {
border-right: none !important;
&:nth-child(5) {
border-right: 1px #cad9e0 solid !important;
}
&:nth-child(6) {
border-right: 1px #cad9e0 solid !important;
}
&:nth-child(7) {
border-right: 1px #cad9e0 solid !important;
}
&:nth-child(8) {
border-right: 1px #cad9e0 solid !important;
}
}
}
}
}
assets/css/payment/index.scss 0 → 100644
.payment-index {
.search-box {
border-top: 1px solid #cad9e0;
padding: 0 24rpx;
height: 100rpx;
background: #ffffff;
.box {
height: 60rpx;
position: relative;
flex: 0 0 50%;
.iconfont {
position: absolute;
right: 49rpx;
top: 25rpx;
font-size: 13rpx;
color: #9ca8ad;
}
.uni-input {
font-size: 26rpx;
&:-webkit-input-placeholder {
color: #404547;
}
}
&:first-child {
border-right: 1px solid #cad9e0;
}
&.ml{
margin-left: 23rpx;
}
}
}
.list {
margin-top: 35rpx;
padding: 0 24rpx;
.box {
position: relative;
background: #ffffff;
border-radius: 4rpx;
padding: 24rpx 0 0 24rpx;
margin-bottom: 20rpx;
.status {
position: absolute;
right: 24rpx;
top: 26rpx;
.iconfont {
font-size: 33rpx;
}
.tt {
font-size: 26rpx;
color: #1e2021;
font-weight: bold;
margin-left: 8rpx;
}
&.color1 {
color: #34bb47;
}
&.color2 {
color: #399cd7;
}
}
.orderNo {
margin-bottom: 18rpx;
.arrow {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #197adb;
}
.t1 {
margin-left: 12rpx;
font-size: 28rpx;
color: #1e2021;
}
}
.p1 {
margin-bottom: 16rpx;
.t1 {
font-size: 22rpx;
color: #6e767a;
}
.t2 {
margin-left: 16rpx;
font-size: 22rpx;
color: #404547;
}
.t3 {
font-size: 22rpx;
color: #1e2021;
margin-left: 16rpx;
font-weight: bold;
}
.t4 {
font-size: 22rpx;
color: #197adb;
font-weight: bold;
}
.flex-av {
flex: 0 0 50%;
}
.ml {
margin-left: 100rpx;
}
&.mb24 {
margin-bottom: 24rpx;
}
}
}
}
}
.shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
background: rgba(0, 0, 0, 0.5);
}
.no-data {
margin-top: 80rpx;
.iconfont {
font-size: 188rpx;
color: #f39d18;
margin-bottom: 16rpx;
}
.text {
font-size: 28rpx;
color: #1e2021;
font-weight: bold;
}
.link {
color: #197adb;
font-weight: bold;
}
.p {
margin-top: 17rpx;
font-size: 22rpx;
color: #6e767a;
}
}
assets/css/waitpayment/index.scss 0 → 100644
.waitpayment-index {
padding-bottom: 50rpx;
.fix {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.search-box {
width: 100%;
background: #ffffff;
border-top: 1rpx solid #cad9e0;
.search-input {
position: relative;
height: 100rpx;
padding-left: 72rpx;
.icon-a-riqi1 {
position: absolute;
top: 32rpx;
left: 24rpx;
font-size: 36rpx;
color: #6e767a;
}
.icon-jinggao2 {
position: absolute;
top: 32rpx;
right: 179rpx;
font-size: 36rpx;
color: #9ca8ad;
z-index: 10;
}
.uni-input {
font-size: 26rpx;
color: #404547;
width: 480rpx;
&:-webkit-input-placeholder {
color: #6e767a;
}
}
.more {
padding-right: 24rpx;
transition: all 0.4s ease;
&.curr {
.t1 {
color: #197adb;
}
.iconfont {
color: #197adb;
transform: rotateX(180deg);
}
}
.t1 {
font-size: 24rpx;
color: #6e767a;
}
.iconfont {
margin-left: 16rpx;
font-size: 14rpx;
color: #9ca8ad;
}
}
}
.show-box {
padding-bottom: 30rpx;
.input-box {
margin-left: 67rpx;
height: 100rpx;
border-top: 1rpx solid #cad9e0;
border-bottom: 1rpx solid #cad9e0;
.uni-input {
font-size: 26rpx;
&:-webkit-input-placeholder {
color: #6e767a;
}
}
}
.input-time {
position: relative;
margin-left: 67rpx;
height: 100rpx;
.iconfont {
position: absolute;
right: 24rpx;
top: 44rpx;
font-size: 13rpx;
color: #9ca8ad;
}
.uni-input {
font-size: 26rpx;
&:-webkit-input-placeholder {
color: #6e767a;
}
}
}
.btn {
width: 702rpx;
height: 88rpx;
background: #197adb;
border-radius: 4rpx;
font-size: 28rpx;
color: #ffffff;
margin: 0 auto;
}
}
}
.list {
margin-top: 135rpx;
padding: 0 24rpx;
.box {
position: relative;
background: #ffffff;
border-radius: 4rpx;
padding: 24rpx 0 0 24rpx;
margin-bottom: 20rpx;
.status {
position: absolute;
right: 24rpx;
top: 26rpx;
.iconfont {
font-size: 33rpx;
}
.tt {
font-size: 26rpx;
color: #1e2021;
font-weight: bold;
margin-left: 8rpx;
}
&.color1 {
color: #f39d18;
}
&.color2 {
color: #399CD7;
}
}
.orderNo {
margin-bottom: 18rpx;
.arrow {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #197adb;
}
.t1 {
margin-left: 12rpx;
font-size: 28rpx;
color: #1e2021;
}
}
.p1 {
margin-bottom: 16rpx;
.t1 {
font-size: 22rpx;
color: #6e767a;
}
.t2 {
margin-left: 16rpx;
font-size: 22rpx;
color: #404547;
}
.t3 {
font-size: 22rpx;
color: #1e2021;
margin-left: 16rpx;
font-weight: bold;
}
.t4 {
font-size: 22rpx;
color: #197adb;
font-weight: bold;
}
.flex-av {
flex: 0 0 50%;
}
.ml {
margin-left: 100rpx;
}
&.mb24 {
margin-bottom: 24rpx;
}
}
}
}
}
.shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
background: rgba(0, 0, 0, 0.5);
}
.no-data {
margin-top: 306rpx;
.iconfont {
font-size: 188rpx;
color: #f39d18;
margin-bottom: 16rpx;
}
.text {
font-size: 28rpx;
color: #1e2021;
font-weight: bold;
}
.link {
color: #197adb;
font-weight: bold;
}
.p {
margin-top: 17rpx;
font-size: 22rpx;
color: #6e767a;
}
}
pages.json
......@@ -52,6 +52,43 @@
"style": {
"navigationBarTitleText": "操作详情"
}
}, {
"path": "pages/order/index",
"style": {
"navigationBarTitleText": "订单列表",
"enablePullDownRefresh": true
}
}, {
"path": "pages/order/detail",
"style": {
"navigationBarTitleText": "订单详情"
}
}, {
"path": "pages/waitpayment/index",
"style": {
"navigationBarTitleText": "待付汇列表",
"enablePullDownRefresh": true
}
}, {
"path": "pages/payment/index",
"style": {
"navigationBarTitleText": "付款列表"
}
}, {
"path": "pages/payment/detail",
"style": {
"navigationBarTitleText": "付款详情"
}
}, {
"path": "pages/payable/index",
"style": {
"navigationBarTitleText": "费用明细"
}
}, {
"path": "pages/payable/detail",
"style": {
"navigationBarTitleText": "费用详情"
}
}],
"globalStyle": {
"navigationBarTextStyle": "black",
......@@ -71,6 +108,12 @@
"text": "首页"
},
{
"pagePath": "pages/order/index",
"iconPath": "static/1.png",
"selectedIconPath": "static/1s.png",
"text": "订单列表"
},
{
"pagePath": "pages/question/list",
"iconPath": "static/ico1.png",
"selectedIconPath": "static/ico1_s.png",
......
pages/payable/detail.vue 0 → 100644
<template>
<view class="payable-detail">
<view class="box mb">
<view class="title row verCenter">
<text class="arrow"></text>
<text class="text">基本信息</text>
</view>
<view class="pp row verCenter">
<text class="t1">委托单号:</text>
<text class="t2">{{ applyPayment['委托单号'] }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">订单时间:</text>
<text class="t2">{{ applyPayment['订单日期'] }}</text>
</view>
<view class="pp row verCenter bor">
<text class="t1">业务类型:</text>
<text class="t2">{{ applyPayment['业务类型'] }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">订单金额:</text>
<text class="t3">{{ applyPayment['货值'] }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">币别:</text>
<text class="t2">{{ applyPayment['订单币别'] }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">货值:</text>
<text class="t3">{{ applyPayment['货值'] }}</text>
</view>
</view>
<view class="box mb">
<view class="pp row verCenter" v-for="(item, index) in detail">
<text class="t1">{{ index }}:</text>
<text class="t2">{{ item }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">合计:</text>
<text class="t3">{{ total }}</text>
</view>
</view>
<view class="btn row rowCenter verCenter">
<text class="iconfont icon-a-riqi12"></text>
<text class="tt">付款通知书</text>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {
orderNo: '',
applyPayment: {},
detail: {},
total: ''
};
},
onLoad(options) {
this.orderNo = options.orderNo;
},
onShow() {
this.getData();
},
methods: {
getData() {
this.request(API.ApplyPaymentList, 'GET', { orderNo: this.orderNo }, false).then(res => {
if (res.err_code === 0) {
this.applyPayment = res.data[0];
this.total = res.data[0]['合计代付费用'];
}
});
this.request(API.ApplyPaymentDetails, 'GET', { orderNo: this.orderNo }, false).then(res => {
if (res.err_code === 0) {
this.detail = res.data[0];
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/payable/detail.scss';
</style>
pages/payable/index.vue 0 → 100644
<template>
<view class="payable-index">
<view class="fix">
<view class="search-box">
<view class="search-input row bothSide verCenter">
<text class="iconfont icon-a-riqi1"></text>
<text class="iconfont icon-jinggao2" v-if="input_status" @click="clearInput()"></text>
<input type="text" @input="inputChange()" placeholder="请输入入仓号单号" class="uni-input" v-model="param.orderNo" />
<view class="more row verCenter" :class="{ curr: shade_flag }" @click="filterChange()">
<text class="t1">{{ shade_flag ? '更少条件' : '更多条件' }}</text>
<text class="iconfont icon-sanjiaoxing1 arrow"></text>
</view>
</view>
<view class="show-box" v-if="shade_flag">
<view class="input-time row verCenter">
<picker mode="date" :value="date" @change="bindDateChange"><input type="text" placeholder="请选择下单时间" class="uni-input" :value="date" /></picker>
<text class="iconfont icon-Chevron"></text>
</view>
<view class="btn row rowCenter verCenter" @click="submit()">查 询</view>
</view>
</view>
</view>
<view class="list" v-if="list.length > 0">
<navigator class="box column" hover-class="none" :url="'/pages/payable/detail?orderNo=' + item['委托单号']" v-for="(item, index) in list" :key="index">
<view class="status color1 row">
<text class="iconfont icon-a-riqi12"></text>
<text class="tt">付款通知书</text>
</view>
<view class="orderNo row verCenter">
<text class="arrow"></text>
<text class="t1">{{ item['委托单号'] }}</text>
</view>
<view class="p1 row verCenter">
<view class="row verCenter flex-av">
<text class="t1">订单时间:</text>
<text class="t3">{{ item['订单日期'] }}</text>
</view>
<view class="row verCenter flex-av">
<text class="t1">业务类型:</text>
<text class="t3">{{ item['业务类型'] }}</text>
</view>
</view>
<view class="p1 row verCenter">
<view class="row verCenter flex-av">
<text class="t1">币别:</text>
<text class="t3">{{ item['订单币别'] }}</text>
</view>
<view class="row verCenter flex-av">
<text class="t1">合计代付费:</text>
<text class="t3">{{ item['合计代付费用'] }}</text>
</view>
</view>
</navigator>
</view>
<template v-else>
<!-- 登录无数据-->
<view class="no-data column verCenter rowCenter" v-if="is_login">
<text class="iconfont icon-a-jinggao1"></text>
<text class="text">查找不到相关信息</text>
<text class="p">1、请输入正确的入仓单号</text>
</view>
<!-- 未登录状态 -->
<view class="no-data column verCenter rowCenter" v-else>
<text class="iconfont icon-a-jinggao1"></text>
<view class="row verCenter">
<text class="text">查找不到相关信息，请</text>
<navigator url="/pages/mine/auth" hover-class="none" class="hove link">登录</navigator>
<text class="text">后查看</text>
</view>
</view>
</template>
<!-- 遮罩 -->
<view class="shade" v-if="shade_flag" @click="shade_flag = false"></view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: { uniLoadMore },
data() {
return {
flage: false,
shade_flag: false,
input_status: false,
is_login: true,
list: [],
loading: true,
page: 1,
limit: 1000,
status: 'more',
date: '',
contentText: {
contentdown: '下拉加载更多',
contentrefresh: '加载数据中...',
contentnomore: '——— 我也是有底线的 ———'
},
param: {
orderNo: '',
begin_time: '',
end_time: ''
}
};
},
onLoad(options) {
this.getData();
},
onShow() {
this.list = [];
this.page = 1;
this.getData();
},
methods: {
clearInput() {
this.input_status = false;
this.param.erp_order_sn = '';
},
submit() {
this.list = [];
this.page = 1;
this.shade_flag = !this.shade_flag;
this.getData();
},
inputChange() {
if (this.param.erp_order_sn) {
this.input_status = true;
} else {
this.input_status = false;
}
this.reset();
this.getData();
},
reset() {
this.list = [];
this.page = 1;
},
filterChange() {
this.shade_flag = !this.shade_flag;
},
getData() {
this.request(
API.ApplyPaymentList,
'GET',
{
limit: this.limit,
page: this.page,
orderNo: this.param.orderNo,
end_time: this.param.end_time
},
this.loading
).then(res => {
if (res.err_code === 0) {
this.status = 'more';
if (res.data.length > 0) {
this.list = res.data;
} else {
this.flag = true;
this.status = 'noMore';
}
} else if (res.err_code === 20045) {
this.is_login = false;
this.flag = true;
} else if (res.err_code === 20046) {
this.flag = true;
this.status = 'noMore';
} else {
this.flag = true;
this.status = 'noMore';
}
});
},
bindDateChange(e) {
console.log('picker发送选择改变，携带值为', e.target.value);
this.date = e.target.value;
this.param.end_time = e.target.value;
this.getData();
},
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}`;
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/payable/index.scss';
</style>
pages/payment/detail.vue 0 → 100644
<template>
<view class="payable-detail">
<view class="box mb">
<view class="title row verCenter">
<text class="arrow"></text>
<text class="text">基本信息</text>
</view>
<view class="pp row verCenter">
<text class="t1">付款编号:</text>
<text class="t2">{{ detail['付款编码'] }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">付款单位:</text>
<text class="t2">{{ detail['付款单位'] }}</text>
</view>
<view class="pp row verCenter bor">
<text class="t1">交易时间:</text>
<text class="t2">{{ detail['交易时间'] }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">应付金额:</text>
<text class="t3">{{ detail['应付金额'] }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">币别:</text>
<text class="t2">{{ detail['币别'] }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">原币金额:</text>
<text class="t3">{{ detail['应付金额'] }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">汇率:</text>
<text class="t2">{{ detail['汇率'] || '--' }}</text>
</view>
<view class="pp row verCenter">
<text class="t1">订单备注:</text>
<text class="t2">{{ detail['备注'] || '暂无备注' }}</text>
</view>
</view>
<view class="box mb">
<view class="title row verCenter">
<text class="arrow"></text>
<text class="text">已收款项</text>
</view>
<uni-table border stripe emptyText="暂无更多数据">
<!-- 表头行 -->
<uni-tr>
<uni-th align="left">序号</uni-th>
<uni-th align="left">入计费项目</uni-th>
<uni-th align="left">原币币别</uni-th>
<uni-th align="left">汇率</uni-th>
<uni-th align="left">收款币别</uni-th>
<uni-th align="left">收款金额</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr v-for="(item, index) in detail['已收款项']" :key="index">
<uni-td>{{ index + 1 }}</uni-td>
<uni-td>{{ item['计费项目'] }}</uni-td>
<uni-td>{{ item['原币币别'] }}</uni-td>
<uni-td>{{ item['汇率'] }}</uni-td>
<uni-td>{{ item['收款币别'] }}</uni-td>
<uni-td>{{ item['收款金额'] }}</uni-td>
</uni-tr>
<uni-tr>
<uni-td>合计：</uni-td>
<uni-td></uni-td>
<uni-td></uni-td>
<uni-td></uni-td>
<uni-td></uni-td>
<uni-td>{{ total }}</uni-td>
</uni-tr>
</uni-table>
<view class="right-arrow row rowCenter verCenter">
<text class="right-text">向右滑动查看更多</text>
<text class="iconfont icon-zhixian"></text>
</view>
</view>
<view class="box">
<view class="title row verCenter">
<text class="arrow"></text>
<text class="text">明细</text>
</view>
<uni-table border stripe emptyText="暂无更多数据">
<!-- 表头行 -->
<uni-tr>
<uni-th align="left">序号</uni-th>
<uni-th align="left">委托单号</uni-th>
<uni-th align="left">日期</uni-th>
<uni-th align="left">计费项目</uni-th>
<uni-th align="left">原币币别</uni-th>
<uni-th align="left">原币金额</uni-th>
<uni-th align="left">本币金额</uni-th>
<uni-th align="left">结余原币金额</uni-th>
<uni-th align="left">未结余额</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr v-for="(item, index) in detail['明细']" :key="index">
<uni-td>{{ index + 1 }}</uni-td>
<uni-td>{{ item['委托单号'] }}</uni-td>
<uni-td>{{ item['日期'] }}</uni-td>
<uni-td>{{ item['计费项目'] }}</uni-td>
<uni-td>{{ item['原币币别'] }}</uni-td>
<uni-td>{{ item['原币金额'] }}</uni-td>
<uni-td>{{ item['本币金额'] }}</uni-td>
<uni-td>{{ item['结余原币金额'] }}</uni-td>
<uni-td>{{ item['未结余额'] }}</uni-td>
</uni-tr>
<uni-tr>
<uni-td>合计：</uni-td>
<uni-td></uni-td>
<uni-td></uni-td>
<uni-td></uni-td>
<uni-td></uni-td>
<uni-td>{{ amountCurrencyTotal }}</uni-td>
<uni-td>{{ localCurrencyTotal }}</uni-td>
<uni-td>{{ BalanceCurrencyTotal }}</uni-td>
<uni-td>{{ knotCurrencyTotal }}</uni-td>
</uni-tr>
</uni-table>
<view class="right-arrow row rowCenter verCenter">
<text class="right-text">向右滑动查看更多</text>
<text class="iconfont icon-zhixian"></text>
</view>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {
paymentNumber: '',
detail: {},
total: '',
amountCurrencyTotal: '',
localCurrencyTotal: '',
BalanceCurrencyTotal: '',
knotCurrencyTotal: ''
};
},
onLoad(options) {
this.paymentNumber = options.paymentNumber;
},
onShow() {
this.getData();
},
methods: {
calc(data) {
var num = 0,
amountCurrencyTotal = 0,
localCurrencyTotal = 0,
BalanceCurrencyTotal = 0,
knotCurrencyTotal = 0;
for (var i = 0; i < data['已收款项'].length; i++) {
num += data['已收款项'][i]['收款金额'];
}
for (var i = 0; i < data['明细'].length; i++) {
amountCurrencyTotal += data['明细'][i]['原币金额'];
localCurrencyTotal += data['明细'][i]['本币金额'];
BalanceCurrencyTotal += data['明细'][i]['结余原币金额'];
knotCurrencyTotal += data['明细'][i]['未结余额'];
}
this.total = num.toFixed(2);
this.amountCurrencyTotal = amountCurrencyTotal.toFixed(2);
this.localCurrencyTotal = localCurrencyTotal.toFixed(2);
this.BalanceCurrencyTotal = BalanceCurrencyTotal.toFixed(2);
this.knotCurrencyTotal = knotCurrencyTotal.toFixed(2);
},
getData() {
this.request(API.GetPaymentDetails, 'GET', { paymentNumber: this.paymentNumber }, false).then(res => {
if (res.err_code === 0) {
this.detail = res.data;
this.calc(res.data);
}
});
}
}
};
</script>
<style lang="scss">
@import '../../assets/css/payment/detail.scss';
</style>
pages/payment/index.vue 0 → 100644
<template>
<view class="payment-index">
<view class="search-box row bothSide verCenter">
<view class="box row verCenter">
<picker mode="date" :value="date" @change="bindDateChange"><input type="text" placeholder="请选择交易时间" class="uni-input" :value="date" /></picker>
<text class="iconfont icon-Chevron"></text>
</view>
<view class="box row verCenter ml">
<picker :value="index" :range="currency" @change="bindPickerChange">
<input type="text" placeholder="请选择付汇币别" class="uni-input" :value="currency[index]" />
</picker>
<text class="iconfont icon-Chevron"></text>
</view>
</view>
<view class="list" v-if="list.length > 0">
<navigator class="box column" hover-class="none" :url="'/pages/payment/detail?paymentNumber=' + item.paymentNumber" v-for="(item, index) in list" :key="index">
<view class="status color1 row verCenter">
<text class="iconfont icon-a-jinggao3"></text>
<text class="tt">{{ item.status }}</text>
</view>
<view class="orderNo row verCenter">
<text class="arrow"></text>
<text class="t1">{{ item.paymentNumber }}</text>
</view>
<view class="p1 row verCenter">
<text class="t1">来往单位名称:</text>
<text class="t2">{{ item.companyName }}</text>
</view>
<view class="p1 row verCenter">
<text class="t1">金额：</text>
<text class="t4">￥{{ item.amount }}</text>
</view>
<view class="p1 row verCenter mb24">
<view class="row verCenter flex-av">
<text class="t1">币别:</text>
<text class="t2">{{ item.currency }}</text>
</view>
<view class="row verCenter flex-av">
<text class="t1">交易时间:</text>
<text class="t2">{{ item.tradeDate }}</text>
</view>
</view>
</navigator>
</view>
<template v-else>
<!-- 登录无数据-->
<view class="no-data column verCenter rowCenter" v-if="is_login">
<text class="iconfont icon-a-jinggao1"></text>
<text class="text">查找不到相关信息</text>
<text class="p">1、请输入正确的入仓单号</text>
</view>
<!-- 未登录状态 -->
<view class="no-data column verCenter rowCenter" v-else>
<text class="iconfont icon-a-jinggao1"></text>
<view class="row verCenter">
<text class="text">查找不到相关信息，请</text>
<navigator url="/pages/mine/auth" hover-class="none" class="hove link">登录</navigator>
<text class="text">后查看</text>
</view>
</view>
</template>
</view>
</template>
<script>
import { API } from '@/util/api.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: { uniLoadMore },
data() {
return {
is_login: true,
list: [],
loading: true,
status: 'more',
date: '',
currency: [],
contentText: {
contentdown: '下拉加载更多',
contentrefresh: '加载数据中...',
contentnomore: '——— 我也是有底线的 ———'
},
param: {
currency: '',
tradeDateTo: ''
}
};
},
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
onLoad(options) {
this.getcurrency();
},
onShow() {
this.list = [];
this.page = 1;
this.getData();
},
methods: {
getcurrency() {
this.request(API.Getcurrency, 'GET', {}, false).then(res => {
if (res.err_code === 0) {
var arr = [];
for (let i in res.data) {
arr.push(res.data[i]);
}
this.currency = arr;
}
});
},
getData() {
this.request(API.GetPaymentList, 'GET', { currency: this.param.currency, tradeDateTo: this.param.tradeDateTo }, this.loading).then(res => {
if (res.err_code === 0) {
if (res.data.length > 0) {
this.list = res.data;
}
} else if (res.err_code === 20045) {
this.is_login = false;
this.flag = true;
} else if (res.err_code === 20046) {
this.flag = true;
} else {
this.flag = true;
}
});
},
reset() {
this.list = [];
this.page = 1;
},
bindPickerChange(e) {
console.log('picker发送选择改变，携带值为', e.target.value);
this.index = e.target.value;
this.param.currency = this.currency[e.target.value];
this.reset();
this.getData();
},
bindDateChange(e) {
console.log('picker发送选择改变，携带值为', e.target.value);
this.date = e.target.value;
},
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}`;
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/payment/index.scss';
</style>
pages/waitpayment/index.vue 0 → 100644
<template>
<view class="waitpayment-index">
<view class="fix">
<view class="search-box">
<view class="search-input row bothSide verCenter">
<text class="iconfont icon-a-riqi1"></text>
<text class="iconfont icon-jinggao2" v-if="input_status" @click="clearInput()"></text>
<input type="text" @input="inputChange()" placeholder="请输入入仓号单号" class="uni-input" v-model="param.entrustNumber" />
<view class="more row verCenter" :class="{ curr: shade_flag }" @click="filterChange()">
<text class="t1">{{ shade_flag ? '更少条件' : '更多条件' }}</text>
<text class="iconfont icon-sanjiaoxing1 arrow"></text>
</view>
</view>
<view class="show-box" v-if="shade_flag">
<view class="input-box row verCenter">
<picker :value="index" :range="suppliers" range-key="supplier_name" @change="bindPickerChange">
<input type="text" placeholder="请输入供应商" class="uni-input" disabled="disabled" :value="suppliers[index].supplier_name" />
</picker>
</view>
<view class="input-time row verCenter"><uni-datetime-picker v-model="datetimerange" type="daterange" rangeSeparator="至" /></view>
<view class="btn row rowCenter verCenter" @click="submit()">查 询</view>
</view>
</view>
</view>
<!-- 列表数据 -->
<view class="list" v-if="list.length > 0">
<view class="box column" v-for="(item, index) in list" :key="index">
<view class="status color2 row verCenter">
<text class="iconfont icon-jinggao3"></text>
<text class="tt">{{ item.paymentStatus }}</text>
</view>
<view class="orderNo row verCenter">
<text class="arrow"></text>
<text class="t1">{{ item.entrustBillNumber }}</text>
</view>
<view class="p1 row verCenter">
<text class="t1">供应商:</text>
<text class="t2">{{ item.supplier }}</text>
</view>
<view class="p1 row verCenter">
<text class="t1">订单币别:</text>
<text class="t2">{{ item.settlementCurrency }}</text>
</view>
<view class="p1 row verCenter mb24">
<view class="row verCenter flex-av">
<text class="t1">订单金额：</text>
<text class="t3">￥{{ item.orginAmount }}</text>
</view>
<view class="row verCenter flex-av">
<text class="t1">未结金额：</text>
<text class="t4">￥{{ item.verifiAmount }}</text>
</view>
</view>
</view>
</view>
<template v-else>
<!-- 登录无数据-->
<view class="no-data column verCenter rowCenter" v-if="is_login">
<text class="iconfont icon-a-jinggao1"></text>
<text class="text">查找不到相关信息</text>
<text class="p">1、请输入正确的入仓单号</text>
</view>
<!-- 未登录状态 -->
<view class="no-data column verCenter rowCenter" v-else>
<text class="iconfont icon-a-jinggao1"></text>
<view class="row verCenter">
<text class="text">查找不到相关信息，请</text>
<navigator url="/pages/mine/auth" hover-class="none" class="hove link">登录</navigator>
<text class="text">后查看</text>
</view>
</view>
</template>
<!-- 遮罩 -->
<view class="shade" v-if="shade_flag" @click="shade_flag = false"></view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: { uniLoadMore },
data() {
return {
flage: false,
shade_flag: false,
input_status: false,
is_login: true,
list: [],
loading: true,
index: -1,
suppliers: [],
status: 'more',
date: '',
datetimerange: ['', ''],
contentText: {
contentdown: '下拉加载更多',
contentrefresh: '加载数据中...',
contentnomore: '——— 我也是有底线的 ———'
},
param: {
entrustNumber: '',
supplierName: ''
}
};
},
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
onLoad() {
this.getUserSuppliers();
},
onShow() {
this.list = [];
this.getData();
},
methods: {
getUserSuppliers() {
this.request(API.GetUserSuppliers, 'POST', {}, false).then(res => {
if (res.err_code == 0) {
this.suppliers = res.data;
}
});
},
clearInput() {
this.input_status = false;
this.param.entrustNumber = '';
},
submit() {
this.list = [];
this.page = 1;
this.shade_flag = !this.shade_flag;
this.getData();
},
inputChange() {
if (this.param.entrustNumber) {
this.input_status = true;
} else {
this.input_status = false;
}
this.reset();
this.getData();
},
reset() {
this.list = [];
},
filterChange() {
this.shade_flag = !this.shade_flag;
},
getData() {
this.request(
API.WaitApplyPaymentList,
'GET',
{
limit: this.limit,
page: this.page,
entrustNumber: this.param.entrustNumber,
supplierName: this.param.supplierName,
dateFrom: this.datetimerange[0] || '',
dateTo: this.datetimerange[1] || ''
},
this.loading
).then(res => {
if (res.err_code === 0) {
if (res.data.length > 0) {
this.list = res.data;
} else {
this.flag = true;
}
} else if (res.err_code === 20045) {
this.is_login = false;
this.flag = true;
} else if (res.err_code === 20046) {
this.flag = true;
} else {
this.flag = true;
}
});
},
bindPickerChange(e) {
console.log('picker发送选择改变，携带值为', e.target.value);
this.index = e.target.value;
this.param.supplierName = this.suppliers[e.target.value].supplier_name;
this.reset();
this.getData();
},
bindDateChange(e) {
console.log('picker发送选择改变，携带值为', e.target.value);
this.date = e.target.value;
this.param.end_time = e.target.value;
this.getData();
},
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}`;
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/waitpayment/index.scss';
</style>
static/1.png 0 → 100644
static/1.png

880 Bytes
static/iconfont.ttf
No preview for this file type
uni_modules/uni-datetime-picker/changelog.md 0 → 100644
## 2.1.4（2021-09-10）
- 修复 hide-second 在移动端的 bug
- 修复 单选赋默认值时，赋值日期未高亮的 bug
- 修复 赋默认值时，移动端未正确显示时间的 bug
## 2.1.3（2021-09-09）
- 新增 hide-second 属性，支持只使用时分，隐藏秒
## 2.1.2（2021-09-03）
- 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
- 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
- 优化 调整字号大小，美化日历界面
- 修复 因国际化导致的 placeholder 失效的 bug
## 2.1.1（2021-08-24）
- 新增 支持国际化
- 优化 范围选择器在 pc 端过宽的问题
## 2.1.0（2021-08-09）
- 新增 适配 vue3
## 2.0.19（2021-08-09）
- 新增 支持作为 uni-forms 子组件相关功能
- 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的 bug
## 2.0.18（2021-08-05）
- 修复 type 属性动态赋值无效的 bug
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
- 修复 组件未赋值时范围选左、右日历相同的 bug
## 2.0.17（2021-08-04）
- 修复 范围选未正确显示当前值的 bug
- 修复 h5 平台（移动端）报错 'cale' of undefined 的 bug
## 2.0.16（2021-07-21）
- 新增 return-type 属性支持返回 date 日期对象
## 2.0.15（2021-07-14）
- 修复 单选日期类型，初始赋值后不在当前日历的 bug
- 新增 clearIcon 属性，显示框的清空按钮可配置显示隐藏（仅 pc 有效）
- 优化 移动端移除显示框的清空按钮，无实际用途
## 2.0.14（2021-07-14）
- 修复 组件赋值为空，界面未更新的 bug
- 修复 start 和 end 不能动态赋值的 bug
- 修复 范围选类型，用户选择后再次选择右侧日历（结束日期）显示不正确的 bug
## 2.0.13（2021-07-08）
- 修复 范围选择不能动态赋值的 bug
## 2.0.12（2021-07-08）
- 修复 范围选择的初始时间在一个月内时，造成无法选择的bug
## 2.0.11（2021-07-08）
- 优化 弹出层在超出视窗边缘定位不准确的问题
## 2.0.10（2021-07-08）
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的 bug
- 优化 弹出层在超出视窗边缘被遮盖的问题
## 2.0.9（2021-07-07）
- 新增 maskClick 事件
- 修复 特殊情况日历 rpx 布局错误的 bug，rpx -> px
- 修复 范围选择时清空返回值不合理的bug，['', ''] -> []
## 2.0.8（2021-07-07）
- 新增 日期时间显示框支持插槽
## 2.0.7（2021-07-01）
- 优化 添加 uni-icons 依赖
## 2.0.6（2021-05-22）
- 修复 图标在小程序上不显示的 bug
- 优化 重命名引用组件，避免潜在组件命名冲突
## 2.0.5（2021-05-20）
- 优化 代码目录扁平化
## 2.0.4（2021-05-12）
- 新增 组件示例地址
## 2.0.3（2021-05-10）
- 修复 ios 下不识别 '-' 日期格式的 bug
- 优化 pc 下弹出层添加边框和阴影
## 2.0.2（2021-05-08）
- 修复 在 admin 中获取弹出层定位错误的bug
## 2.0.1（2021-05-08）
- 修复 type 属性向下兼容，默认值从 date 变更为 datetime
## 2.0.0（2021-04-30）
- 支持日历形式的日期+时间的范围选择
> 注意：此版本不向后兼容，不再支持单独时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）
## 1.0.6（2021-03-18）
- 新增 hide-second 属性，时间支持仅选择时、分
- 修复 选择跟显示的日期不一样的 bug
- 修复 chang事件触发2次的 bug
- 修复 分、秒 end 范围错误的 bug
- 优化 更好的 nvue 适配
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue 0 → 100644
<template>
<view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'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,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'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>
</view>
</view>
</template>
<script>
export default {
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
lunar: {
type: Boolean,
default: false
},
checkHover: {
type: Boolean,
default: false
}
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
},
handleMousemove(weeks) {
this.$emit('handleMouse', weeks)
}
}
}
</script>
<style lang="scss" scoped>
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
margin: 3px 0;
}
.uni-calendar-item__weeks-box-text {
font-size: 12px;
// font-size: $uni-font-size-base;
// color: $uni-text-color;
}
.uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm;
color: $uni-text-color;
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $uni-color-error;
}
.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--isDay {
background-color: $uni-color-primary;
opacity: 0.8;
color: #fff;
}
.uni-calendar-item--extra {
color: $uni-color-error;
opacity: 0.8;
}
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-color-primary;
// border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
color: #333;
}
.uni-calendar-item--multiple {
background-color: #f2f6fc;
// color: #fff;
opacity: 0.8;
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked {
background-color: #409eff;
color: #fff !important;
// border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
}
.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-x {
// border-top-left-radius: 25px;
// border-bottom-left-radius: 25px;
background-color: #f2f6fc;
}
.uni-calendar-item--after-checked-x {
// border-top-right-radius: 25px;
// border-bottom-right-radius: 25px;
background-color: #f2f6fc;
}
</style>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json 0 → 100644
{
"uni-datetime-picker.selectDate": "select date",
"uni-datetime-picker.selectTime": "select time",
"uni-datetime-picker.selectDateTime": "select datetime",
"uni-datetime-picker.startDate": "start date",
"uni-datetime-picker.endDate": "end date",
"uni-datetime-picker.startTime": "start time",
"uni-datetime-picker.endTime": "end time",
"uni-datetime-picker.ok": "ok",
"uni-datetime-picker.clear": "clear",
"uni-datetime-picker.cancel": "cancel",
"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_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js 0 → 100644
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
}
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json 0 → 100644
{
"uni-datetime-picker.selectDate": "选择日期",
"uni-datetime-picker.selectTime": "选择时间",
"uni-datetime-picker.selectDateTime": "选择日期时间",
"uni-datetime-picker.startDate": "开始日期",
"uni-datetime-picker.endDate": "结束日期",
"uni-datetime-picker.startTime": "开始时间",
"uni-datetime-picker.endTime": "结束时间",
"uni-datetime-picker.ok": "确定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六"
}
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json 0 → 100644
{
"uni-datetime-picker.selectDate": "選擇日期",
"uni-datetime-picker.selectTime": "選擇時間",
"uni-datetime-picker.selectDateTime": "選擇日期時間",
"uni-datetime-picker.startDate": "開始日期",
"uni-datetime-picker.endDate": "結束日期",
"uni-datetime-picker.startTime": "開始时间",
"uni-datetime-picker.endTime": "結束时间",
"uni-datetime-picker.ok": "確定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六"
}
uni_modules/uni-datetime-picker/components/uni-datetime-picker/keypress.js 0 → 100644
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keyup', listener)
})
},
render: () => {}
}
// #endif
\ No newline at end of file
uni_modules/uni-datetime-picker/package.json 0 → 100644
{
"id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器",
"version": "2.1.4",
"description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
"keywords": [
"uni-datetime-picker",
"uni-ui",
"uniui",
"日期时间选择器",
"日期时间"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"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": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
uni_modules/uni-datetime-picker/readme.md 0 → 100644
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
## DatetimePicker 时间选择器
> **组件名：uni-datetime-picker**
> 代码块： `uDatetimePicker`
该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 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
uni_modules/uni-icons/changelog.md 0 → 100644
## 1.2.1（2021-09-17）
- 新增 支持使用 css 图标库扩展组件（仅 vue 支持）
## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5（2021-05-12）
- 新增 组件示例地址
## 1.1.4（2021-02-05）
- 调整为uni_modules目录规范
uni_modules/uni-icons/components/uni-icons/icons.js 0 → 100644
export default {
"pulldown": "\ue588",
"refreshempty": "\ue461",
"back": "\ue471",
"forward": "\ue470",
"more": "\ue507",
"more-filled": "\ue537",
"scan": "\ue612",
"qq": "\ue264",
"weibo": "\ue260",
"weixin": "\ue261",
"pengyouquan": "\ue262",
"loop": "\ue565",
"refresh": "\ue407",
"refresh-filled": "\ue437",
"arrowthindown": "\ue585",
"arrowthinleft": "\ue586",
"arrowthinright": "\ue587",
"arrowthinup": "\ue584",
"undo-filled": "\ue7d6",
"undo": "\ue406",
"redo": "\ue405",
"redo-filled": "\ue7d9",
"bars": "\ue563",
"chatboxes": "\ue203",
"camera": "\ue301",
"chatboxes-filled": "\ue233",
"camera-filled": "\ue7ef",
"cart-filled": "\ue7f4",
"cart": "\ue7f5",
"checkbox-filled": "\ue442",
"checkbox": "\ue7fa",
"arrowleft": "\ue582",
"arrowdown": "\ue581",
"arrowright": "\ue583",
"smallcircle-filled": "\ue801",
"arrowup": "\ue580",
"circle": "\ue411",
"eye-filled": "\ue568",
"eye-slash-filled": "\ue822",
"eye-slash": "\ue823",
"eye": "\ue824",
"flag-filled": "\ue825",
"flag": "\ue508",
"gear-filled": "\ue532",
"reload": "\ue462",
"gear": "\ue502",
"hand-thumbsdown-filled": "\ue83b",
"hand-thumbsdown": "\ue83c",
"hand-thumbsup-filled": "\ue83d",
"heart-filled": "\ue83e",
"hand-thumbsup": "\ue83f",
"heart": "\ue840",
"home": "\ue500",
"info": "\ue504",
"home-filled": "\ue530",
"info-filled": "\ue534",
"circle-filled": "\ue441",
"chat-filled": "\ue847",
"chat": "\ue263",
"mail-open-filled": "\ue84d",
"email-filled": "\ue231",
"mail-open": "\ue84e",
"email": "\ue201",
"checkmarkempty": "\ue472",
"list": "\ue562",
"locked-filled": "\ue856",
"locked": "\ue506",
"map-filled": "\ue85c",
"map-pin": "\ue85e",
"map-pin-ellipse": "\ue864",
"map": "\ue364",
"minus-filled": "\ue440",
"mic-filled": "\ue332",
"minus": "\ue410",
"micoff": "\ue360",
"mic": "\ue302",
"clear": "\ue434",
"smallcircle": "\ue868",
"close": "\ue404",
"closeempty": "\ue460",
"paperclip": "\ue567",
"paperplane": "\ue503",
"paperplane-filled": "\ue86e",
"person-filled": "\ue131",
"contact-filled": "\ue130",
"person": "\ue101",
"contact": "\ue100",
"images-filled": "\ue87a",
"phone": "\ue200",
"images": "\ue87b",
"image": "\ue363",
"image-filled": "\ue877",
"location-filled": "\ue333",
"location": "\ue303",
"plus-filled": "\ue439",
"plus": "\ue409",
"plusempty": "\ue468",
"help-filled": "\ue535",
"help": "\ue505",
"navigate-filled": "\ue884",
"navigate": "\ue501",
"mic-slash-filled": "\ue892",
"search": "\ue466",
"settings": "\ue560",
"sound": "\ue590",
"sound-filled": "\ue8a1",
"spinner-cycle": "\ue465",
"download-filled": "\ue8a4",
"personadd-filled": "\ue132",
"videocam-filled": "\ue8af",
"personadd": "\ue102",
"upload": "\ue402",
"upload-filled": "\ue8b1",
"starhalf": "\ue463",
"star-filled": "\ue438",
"star": "\ue408",
"trash": "\ue401",
"phone-filled": "\ue230",
"compose": "\ue400",
"videocam": "\ue300",
"trash-filled": "\ue8dc",
"download": "\ue403",
"chatbubble-filled": "\ue232",
"chatbubble": "\ue202",
"cloud-download": "\ue8e4",
"cloud-upload-filled": "\ue8e5",
"cloud-upload": "\ue8e6",
"cloud-download-filled": "\ue8e9",
"headphones":"\ue8bf",
"shop":"\ue609"
}
uni_modules/uni-icons/package.json 0 → 100644
{
"id": "uni-icons",
"displayName": "uni-icons 图标",
"version": "1.2.1",
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
"keywords": [
"uni-ui",
"uniui",
"icon",
"图标"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"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": "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"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-icons/readme.md 0 → 100644
## 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
uni_modules/uni-table/changelog.md 0 → 100644
## 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-th 支持 date 日期筛选范围
## 1.0.6（2021-07-05）
- 新增 uni-th 支持 range 筛选范围
## 1.0.5（2021-06-28）
- 新增 uni-th 筛选功能
## 1.0.4（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.3（2021-04-16）
- 新增 sortable 属性，是否开启单列排序
- 优化 表格多选逻辑
## 1.0.2（2021-03-22）
- uni-tr 添加 disabled 属性，用于 type=selection 时，设置某行是否可由全选按钮控制
## 1.0.1（2021-02-05）
- 调整为uni_modules目录规范
uni_modules/uni-table/components/uni-tbody/uni-tbody.vue 0 → 100644
<template>
<!-- #ifdef H5 -->
<tbody>
<slot></slot>
</tbody>
<!-- #endif -->
<!-- #ifndef H5 -->
<view><slot></slot></view>
<!-- #endif -->
</template>
<script>
export default {
name: 'uniBody',
options: {
virtualHost: true
},
data() {
return {
}
},
created() {},
methods: {}
}
</script>
<style>
</style>
uni_modules/uni-table/components/uni-td/uni-td.vue 0 → 100644
<template>
<!-- #ifdef H5 -->
<td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }"><slot></slot></td>
<!-- #endif -->
<!-- #ifndef H5 -->
<!-- :class="{'table--border':border}" -->
<view class="uni-table-td" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }"><slot></slot></view>
<!-- #endif -->
</template>
<script>
/**
* Td 单元格
* @description 表格中的标准单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number} align = [left|center|right] 单元格对齐方式
*/
export default {
name: 'uniTd',
options: {
virtualHost: true
},
props: {
width: {
type: [String, Number],
default: ''
},
align: {
type: String,
default: 'left'
},
rowspan: {
type: [Number, String],
default: 1
},
colspan: {
type: [Number, String],
default: 1
}
},
data() {
return {
border: false
};
},
created() {
this.root = this.getTable();
this.border = this.root.border;
},
methods: {
/**
* 获取父元素实例
*/
getTable() {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== 'uniTable') {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
}
}
};
</script>
<style lang="scss">
$border-color: #CAD9E0;
.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;
box-sizing: border-box;
}
.table--border {
border-right: 1px $border-color solid;
}
</style>
uni_modules/uni-table/components/uni-th/uni-th.vue 0 → 100644
<template>
<!-- #ifdef H5 -->
<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
<view class="uni-table-th-row">
<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
<slot></slot>
<view v-if="sortable" class="arrow-box">
<text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
<text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
</view>
</view>
<dropdown v-if="filterType || filterData.length" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
</view>
</th>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import dropdown from './filter-dropdown.vue'
/**
* Th 表头
* @description 表格内的表头单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number} width 单元格宽度
* @property {Boolean} sortable 是否启用排序
* @property {Number} align = [left|center|right] 单元格对齐方式
* @value left 单元格文字左侧对齐
* @value center 单元格文字居中
* @value right 单元格文字右侧对齐
* @property {Array} filterData 筛选数据
* @property {String} filterType [search|select] 筛选类型
* @value search 关键字搜素
* @value select 条件选择
* @event {Function} sort-change 排序触发事件
*/
export default {
name: 'uniTh',
options: {
virtualHost: true
},
components: {
dropdown
},
emits:['sort-change','filter-change'],
props: {
width: {
type: [String, Number],
default: ''
},
align: {
type: String,
default: 'left'
},
rowspan: {
type: [Number, String],
default: 1
},
colspan: {
type: [Number, String],
default: 1
},
sortable: {
type: Boolean,
default: false
},
filterType: {
type: String,
default: ""
},
filterData: {
type: Array,
default () {
return []
}
}
},
data() {
return {
border: false,
ascending: false,
descending: false
}
},
computed: {
contentAlign() {
let align = 'left'
switch (this.align) {
case 'left':
align = 'flex-start'
break
case 'center':
align = 'center'
break
case 'right':
align = 'flex-end'
break
}
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)
},
methods: {
sort() {
if (!this.sortable) return
this.clearOther()
if (!this.ascending && !this.descending) {
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
}
if (!this.ascending && this.descending) {
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 })
},
descendingFn() {
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
}
return item
})
},
ondropdown(e) {
this.$emit("filter-change", e)
},
/**
* 获取父元素实例
*/
getTable(name) {
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
}
}
}
</script>
<style lang="scss">
$border-color: #CAD9E0;
.uni-table-th {
/* #ifndef APP-NVUE */
padding-left: 24rpx;
height: 60rpx;
display: table-cell;
box-sizing: border-box;
/* #endif */
font-size: 22rpx;
color: #6E767A;
background: #F1F4F6;
border-bottom: 1px $border-color solid;
vertical-align: middle;
}
.uni-table-th-row {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.table--border {
border-right: 1px $border-color solid;
}
.uni-table-th-content {
display: flex;
align-items: center;
flex: 1;
}
.arrow-box {
}
.arrow {
display: block;
position: relative;
width: 10px;
height: 8px;
// border: 1px red solid;
left: 5px;
overflow: hidden;
cursor: pointer;
}
.down {
top: 3px;
::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 2px;
top: -5px;
transform: rotate(45deg);
background-color: #ccc;
}
&.active {
::after {
background-color: #007aff;
}
}
}
.up {
::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 2px;
top: 5px;
transform: rotate(45deg);
background-color: #ccc;
}
&.active {
::after {
background-color: #007aff;
}
}
}
</style>
uni_modules/uni-table/components/uni-thead/uni-thead.vue 0 → 100644
<template>
<!-- #ifdef H5 -->
<thead class="uni-table-thead">
<tr class="uni-table-tr">
<th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :indeterminate="indeterminate" :checked="checked" @checkboxSelected="checkboxSelected"></table-checkbox>
</th>
</tr>
<slot></slot>
</thead>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-thead"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import tableCheckbox from '../uni-tr/table-checkbox.vue'
export default {
name: 'uniThead',
components: {
tableCheckbox
},
options: {
virtualHost: true
},
data() {
return {
border: false,
selection: false,
rowspan: 1,
indeterminate: false,
checked: false
}
},
created() {
this.root = this.getTable()
// #ifdef H5
this.root.theadChildren = this
// #endif
this.border = this.root.border
this.selection = this.root.type
},
methods: {
init(self) {
this.rowspan++
},
checkboxSelected(e) {
this.indeterminate = false
const backIndexData = this.root.backIndexData
const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
if (backIndexData.length === data.length) {
this.checked = false
this.root.clearSelection()
} else {
this.checked = true
this.root.selectionAll()
}
},
/**
* 获取父元素实例
*/
getTable(name = 'uniTable') {
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
}
}
}
</script>
<style lang="scss">
$border-color: #ebeef5;
.uni-table-thead {
display: table-header-group;
}
.uni-table-tr {
/* #ifndef APP-NVUE */
display: table-row;
transition: all 0.3s;
box-sizing: border-box;
/* #endif */
border: 1px red solid;
background-color: #fafafa;
}
.checkbox {
padding: 0 8px;
width: 26px;
padding-left: 12px;
/* #ifndef APP-NVUE */
display: table-cell;
vertical-align: middle;
/* #endif */
color: #333;
font-weight: 500;
border-bottom: 1px $border-color solid;
font-size: 14px;
// text-align: center;
}
.tr-table--border {
border-right: 1px $border-color solid;
}
/* #ifndef APP-NVUE */
.uni-table-tr {
::v-deep .uni-table-th {
&.table--border:last-child {
// border-right: none;
}
}
::v-deep .uni-table-td {
&.table--border:last-child {
// border-right: none;
}
}
}
/* #endif */
</style>
uni_modules/uni-table/components/uni-tr/table-checkbox.vue 0 → 100644
<template>
<view class="uni-table-checkbox" @click="selected">
<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
<view class="checkbox__inner-icon"></view>
</view>
<view v-else class="checkbox__inner checkbox--indeterminate">
<view class="checkbox__inner-icon"></view>
</view>
</view>
</template>
<script>
export default {
name: 'TableCheckbox',
emits:['checkboxSelected'],
props: {
indeterminate: {
type: Boolean,
default: false
},
checked: {
type: [Boolean,String],
default: false
},
disabled: {
type: Boolean,
default: false
},
index: {
type: Number,
default: -1
},
cellData: {
type: Object,
default () {
return {}
}
}
},
watch:{
checked(newVal){
if(typeof this.checked === 'boolean'){
this.isChecked = newVal
}else{
this.isChecked = true
}
},
indeterminate(newVal){
this.isIndeterminate = newVal
}
},
data() {
return {
isChecked: false,
isDisabled: false,
isIndeterminate:false
}
},
created() {
if(typeof this.checked === 'boolean'){
this.isChecked = this.checked
}
this.isDisabled = this.disabled
},
methods: {
selected() {
if (this.isDisabled) return
this.isIndeterminate = false
this.isChecked = !this.isChecked
this.$emit('checkboxSelected', {
checked: this.isChecked,
data: this.cellData
})
}
}
}
</script>
<style lang="scss">
$checked-color: #007aff;
$border-color: #DCDFE6;
$disable:0.4;
.uni-table-checkbox {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
margin: 5px 0;
cursor: pointer;
// 多选样式
.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: 2px;
background-color: #fff;
z-index: 1;
.checkbox__inner-icon {
position: absolute;
/* #ifdef APP-NVUE */
top: 2px;
/* #endif */
/* #ifndef APP-NVUE */
top: 2px;
/* #endif */
left: 5px;
height: 7px;
width: 3px;
border: 1px solid #fff;
border-left: 0;
border-top: 0;
opacity: 0;
transform-origin: center;
transform: rotate(45deg);
box-sizing: content-box;
}
&.checkbox--indeterminate {
border-color: $checked-color;
background-color: $checked-color;
.checkbox__inner-icon {
position: absolute;
opacity: 1;
transform: rotate(0deg);
height: 2px;
top: 0;
bottom: 0;
margin: auto;
left: 0px;
right: 0px;
bottom: 0;
width: auto;
border: none;
border-radius: 2px;
transform: scale(0.5);
background-color: #fff;
}
}
&:hover{
border-color: $checked-color;
}
// 禁用
&.is-disable {
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
background-color: #F2F6FC;
border-color: $border-color;
}
// 选中
&.is-checked {
border-color: $checked-color;
background-color: $checked-color;
.checkbox__inner-icon {
opacity: 1;
transform: rotate(45deg);
}
// 选中禁用
&.is-disable {
opacity: $disable;
}
}
}
}
</style>
uni_modules/uni-table/components/uni-tr/uni-tr.vue 0 → 100644
<template>
<!-- #ifdef H5 -->
<tr class="uni-table-tr">
<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
</th>
<slot></slot>
<!-- <uni-th class="th-fixed">123</uni-th> -->
</tr>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-tr">
<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
</view>
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
import tableCheckbox from './table-checkbox.vue'
/**
* Tr 表格行组件
* @description 表格行组件 仅包含 th,td 组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=
*/
export default {
name: 'uniTr',
components: { tableCheckbox },
props: {
disabled: {
type: Boolean,
default: false
},
keyValue: {
type: [String, Number],
default: ''
}
},
options: {
virtualHost: true
},
data() {
return {
value: false,
border: false,
selection: false,
widthThArr: [],
ishead: true,
checked: false,
indeterminate:false
}
},
created() {
this.root = this.getTable()
this.head = this.getTable('uniThead')
if (this.head) {
this.ishead = false
this.head.init(this)
}
this.border = this.root.border
this.selection = this.root.type
this.root.trChildren.push(this)
const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
if(rowData){
this.rowData = rowData
}
this.root.isNodata()
},
mounted() {
if (this.widthThArr.length > 0) {
const selectionWidth = this.selection === 'selection' ? 50 : 0
this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
}
},
destroyed() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
methods: {
minWidthUpdate(width) {
this.widthThArr.push(width)
},
// 选中
checkboxSelected(e) {
let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
this.checked = e.checked
this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
},
change(e) {
this.root.trChildren.forEach(item => {
if (item === this) {
this.root.check(this, e.detail.value.length > 0 ? true : false)
}
})
},
/**
* 获取父元素实例
*/
getTable(name = 'uniTable') {
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
}
}
}
</script>
<style lang="scss">
$border-color: #CAD9E0;
.uni-table-tr {
/* #ifndef APP-NVUE */
display: table-row;
transition: all 0.3s;
box-sizing: border-box;
/* #endif */
}
.checkbox {
padding: 0 8px;
width: 26px;
padding-left: 12px;
/* #ifndef APP-NVUE */
display: table-cell;
vertical-align: middle;
/* #endif */
color: #333;
font-weight: 500;
border-bottom: 1rpx $border-color solid;
font-size: 14px;
// text-align: center;
}
.tr-table--border {
border-right: 1px $border-color solid;
}
/* #ifndef APP-NVUE */
.uni-table-tr {
::v-deep .uni-table-th {
&.table--border:last-child {
// border-right: none;
}
}
::v-deep .uni-table-td {
&.table--border:last-child {
// border-right: none;
}
}
}
/* #endif */
</style>
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