Compare commits

2 Commits

Author SHA1 Message Date
tianyongbao
570e975e55 fix: 功能样式优化完善。 2026-02-15 17:32:20 +08:00
tianyongbao
9b072ac892 fix: pos刷卡推荐,样式修改。 2026-02-15 17:16:20 +08:00
5 changed files with 305 additions and 240 deletions

View File

@@ -42,30 +42,33 @@
<u-list-item v-for="(item, index) in listData" :key="index"> <u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item" @click="enterDetails(item)"> <view class="list-item" @click="enterDetails(item)">
<view class="item-header"> <view class="item-header">
<view class="card-name-section"> <view class="header-row">
<view class="account-icon"> <view class="account-icon">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons> <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view> </view>
<view class="card-info"> <text class="card-name">{{ item.name }}</text>
<text class="card-name">{{ item.name }}</text> <text class="card-code" v-if="item.code">{{ item.code }}</text>
<text class="card-code" v-if="item.code">{{ item.code }}</text>
</view>
</view> </view>
<view class="balance-section"> <view class="info-row">
<text class="balance-value"><text class="balance-label">余额</text>{{ item.balance }}</text> <text class="account-type">{{ dictStr(item.type, accountType) || '--' }}</text>
<text class="account-status" :class="getStatusClass(item.status, dictStr(item.status, accountStatus))">{{ dictStr(item.status, accountStatus) || '--' }}</text>
<view class="balance-amount">
<text class="balance-label">余额</text>
<text class="balance-value">{{ item.balance }}</text>
</view>
</view> </view>
</view> </view>
<view class="card-body"> <view class="card-body">
<view class="info-row"> <view class="info-row">
<view class="info-item"> <!-- <view class="info-item">
<text class="info-label">账户类型</text> <text class="info-label">账户类型</text>
<text class="info-value">{{ dictStr(item.type, accountType) }}</text> <text class="info-value">{{ dictStr(item.type, accountType) }}</text>
</view> </view>
<view class="info-item"> <view class="info-item">
<text class="info-label">账户状态</text> <text class="info-label">账户状态</text>
<text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, accountStatus))">{{ dictStr(item.status, accountStatus) }}</text> <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, accountStatus))">{{ dictStr(item.status, accountStatus) }}</text>
</view> </view> -->
<view class="info-item"> <view class="info-item">
<text class="info-label">可用额度</text> <text class="info-label">可用额度</text>
<text class="info-value orange">{{ item.availableLimit }}</text> <text class="info-value orange">{{ item.availableLimit }}</text>
@@ -521,17 +524,15 @@ page {
.item-header { .item-header {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; gap: 12rpx;
padding: 16rpx 24rpx; padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section { .header-row {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; gap: 10rpx;
min-width: 0;
margin-right: 16rpx;
} }
.account-icon { .account-icon {
@@ -542,55 +543,86 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 12rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.card-info { .card-name {
font-size: 28rpx;
font-weight: 600;
color: #ffffff;
line-height: 1.3;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-code {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.5rpx;
font-family: 'Courier New', monospace;
flex-shrink: 0;
}
.info-row {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
gap: 4rpx; align-items: center;
gap: 12rpx;
padding-top: 12rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}
.account-type {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
line-height: 1.3;
flex-shrink: 0;
}
.account-status {
font-size: 24rpx;
font-weight: 500;
line-height: 1.3;
flex: 1;
text-align: center;
.card-name { &.status-normal {
color: #ffffff; color: #52c41a;
font-size: 28rpx;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.card-code { &.status-error {
color: rgba(255, 255, 255, 0.85); color: #ff4d4f;
font-size: 22rpx; }
font-weight: 400;
line-height: 1; &.status-default {
color: rgba(255, 255, 255, 0.7);
} }
} }
.balance-section { .balance-amount {
display: flex; display: flex;
align-items: center; align-items: baseline;
gap: 6rpx;
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; }
.balance-value { .balance-label {
color: #fa8c16; font-size: 22rpx;
font-size: 32rpx; color: rgba(255, 255, 255, 0.75);
font-weight: 700; font-weight: 400;
line-height: 1; }
white-space: nowrap;
.balance-value {
.balance-label { font-size: 32rpx;
color: rgba(255, 255, 255, 0.85); font-weight: 700;
font-size: 22rpx; color: #fa8c16;
font-weight: 400; line-height: 1.2;
margin-right: 8rpx;
}
}
} }
} }

View File

@@ -16,26 +16,19 @@
<u-list-item v-for="(item, index) in listData" :key="index"> <u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item"> <view class="list-item">
<view class="item-header"> <view class="item-header">
<view class="left-section"> <view class="header-row">
<view class="card-icon"> <view class="card-icon">
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons> <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
</view> </view>
<view class="header-info"> <text class="card-name">{{ item.name }}</text>
<view class="card-name-row"> <text class="bill-date-text">账单日 {{ item.billDateName }}</text>
<text class="card-name">{{ item.name }}</text> <view class="available-amount">
<view class="bill-info"> <text class="amount-label">可用</text>
<text class="limit-label">账单日</text> <text class="amount-value">{{ item.availableLimit }}</text>
<text class="bill-date">{{ item.billDateName }}</text>
</view>
</view>
<view class="card-detail-row">
<text class="card-code">{{ item.code }}</text>
</view>
</view> </view>
</view> </view>
<view class="right-section"> <view class="info-row">
<text class="limit-label-right">可用额度</text> <text class="card-code">{{ item.code }}</text>
<text class="limit-value">{{ item.availableLimit }}</text>
</view> </view>
</view> </view>
@@ -380,18 +373,15 @@ page {
.item-header { .item-header {
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between;
gap: 12rpx; gap: 12rpx;
padding: 16rpx 24rpx; padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.left-section { .header-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12rpx; gap: 10rpx;
flex: 1;
min-width: 0;
} }
.card-icon { .card-icon {
@@ -404,88 +394,64 @@ page {
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
} }
.header-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 6rpx;
min-width: 0;
}
.card-name-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12rpx;
}
.card-name { .card-name {
font-size: 30rpx; font-size: 28rpx;
font-weight: 700; font-weight: 600;
color: #ffffff; color: #ffffff;
line-height: 1.3; line-height: 1.3;
flex: 1; flex: 1;
white-space: nowrap; min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
.card-detail-row { .bill-date-text {
display: flex;
align-items: center;
}
.card-code {
font-size: 21rpx;
color: rgba(255, 255, 255, 0.85);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.5rpx;
font-family: 'Courier New', monospace;
}
.bill-info {
display: flex;
align-items: center;
gap: 6rpx;
flex-shrink: 0;
}
.limit-label {
font-size: 20rpx;
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
line-height: 1;
}
.bill-date {
font-size: 24rpx; font-size: 24rpx;
font-weight: 600; color: rgba(255, 255, 255, 0.85);
color: #ffffff; font-weight: 500;
line-height: 1; line-height: 1.3;
flex-shrink: 0;
margin-right: 12rpx;
} }
.right-section { .available-amount {
display: flex; display: flex;
flex-direction: column; align-items: baseline;
align-items: flex-end;
gap: 6rpx; gap: 6rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.limit-label-right { .amount-label {
font-size: 22rpx; font-size: 22rpx;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.75);
font-weight: 400; font-weight: 400;
line-height: 1;
} }
.limit-value { .amount-value {
font-size: 32rpx; font-size: 32rpx;
font-weight: 700; font-weight: 700;
color: #52c41a; color: #52c41a;
line-height: 1; line-height: 1.2;
}
.info-row {
display: flex;
align-items: center;
gap: 12rpx;
padding-top: 12rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}
.card-code {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.5rpx;
font-family: 'Courier New', monospace;
flex: 1;
} }
} }

View File

@@ -16,34 +16,37 @@
<u-list-item v-for="(item, index) in listData" :key="index"> <u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item" @click="enterDetails(item)"> <view class="list-item" @click="enterDetails(item)">
<view class="item-header"> <view class="item-header">
<view class="card-name-section"> <view class="header-row">
<view class="card-icon"> <view class="card-icon">
<uni-icons type="vip-filled" size="20" color="#ffffff"></uni-icons> <uni-icons type="vip-filled" size="20" color="#ffffff"></uni-icons>
</view> </view>
<view class="card-info"> <text class="card-name">{{ item.name }}</text>
<text class="card-name">{{ item.name }}</text> <text class="card-code" v-if="item.code">{{ item.code }}</text>
<text class="card-code" v-if="item.code">{{ item.code }}</text>
</view>
</view> </view>
<view class="balance-section"> <view class="info-row">
<text class="balance-value"><text class="balance-label">可用</text>{{ item.availableLimit || 0 }}</text> <text class="credit-limit">{{ item.creditLimit || 0 }}</text>
<text class="account-status" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
<view class="balance-amount">
<text class="balance-label">可用</text>
<text class="balance-value">{{ item.availableLimit || 0 }}</text>
</view>
</view> </view>
</view> </view>
<view class="card-body"> <view class="card-body">
<view class="info-row"> <view class="info-row">
<view class="info-item" v-if="item.creditLimit || true"> <!-- <view class="info-item" v-if="item.creditLimit || true">
<text class="info-label">信用额度</text> <text class="info-label">信用额度</text>
<text class="info-value primary">{{ item.creditLimit ? item.creditLimit + '元' : '--' }}</text> <text class="info-value primary">{{ item.creditLimit ? item.creditLimit + '元' : '--' }}</text>
</view> </view> -->
<view class="info-item" v-if="item.balance || true"> <view class="info-item" v-if="item.balance || true">
<text class="info-label">余额</text> <text class="info-label">余额</text>
<text class="info-value orange">{{ item.balance ? item.balance + '元' : '--' }}</text> <text class="info-value orange">{{ item.balance ? item.balance + '元' : '--' }}</text>
</view> </view>
<view class="info-item" v-if="dictStr(item.status, statusList) || true"> <!-- <view class="info-item" v-if="dictStr(item.status, statusList) || true">
<text class="info-label">账户状态</text> <text class="info-label">账户状态</text>
<text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text> <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
</view> </view> -->
<view class="info-item" v-if="item.bankName || true"> <view class="info-item" v-if="item.bankName || true">
<text class="info-label">银行</text> <text class="info-label">银行</text>
<text class="info-value">{{ item.bankName || '--' }}</text> <text class="info-value">{{ item.bankName || '--' }}</text>
@@ -445,17 +448,15 @@ page {
.item-header { .item-header {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; gap: 12rpx;
padding: 16rpx 24rpx; padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section { .header-row {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; gap: 10rpx;
min-width: 0;
margin-right: 16rpx;
} }
.card-icon { .card-icon {
@@ -466,55 +467,89 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 12rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.card-info { .card-name {
font-size: 28rpx;
font-weight: 600;
color: #ffffff;
line-height: 1.3;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-code {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.5rpx;
font-family: 'Courier New', monospace;
flex-shrink: 0;
}
.info-row {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
gap: 4rpx; align-items: center;
gap: 12rpx;
padding-top: 12rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}
.credit-limit {
font-size: 24rpx;
color: #667eea;
font-weight: 600;
line-height: 1.3;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.9);
padding: 4rpx 12rpx;
border-radius: 8rpx;
}
.account-status {
font-size: 24rpx;
font-weight: 500;
line-height: 1.3;
flex: 1;
text-align: center;
.card-name { &.status-normal {
color: #ffffff; color: #52c41a;
font-size: 28rpx;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.card-code { &.status-error {
color: rgba(255, 255, 255, 0.85); color: #ff4d4f;
font-size: 22rpx; }
font-weight: 400;
line-height: 1; &.status-default {
color: rgba(255, 255, 255, 0.7);
} }
} }
.balance-section { .balance-amount {
display: flex; display: flex;
align-items: center; align-items: baseline;
gap: 6rpx;
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; }
.balance-value { .balance-label {
color: #fa8c16; font-size: 22rpx;
font-size: 32rpx; color: rgba(255, 255, 255, 0.75);
font-weight: 700; font-weight: 400;
line-height: 1; }
white-space: nowrap;
.balance-value {
.balance-label { font-size: 32rpx;
color: rgba(255, 255, 255, 0.85); font-weight: 700;
font-size: 22rpx; color: #fa8c16;
font-weight: 400; line-height: 1.2;
margin-right: 8rpx;
}
}
} }
} }

View File

@@ -40,30 +40,33 @@
<u-list-item v-for="(item, index) in listData" :key="index"> <u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item" @click="enterDetails(item)"> <view class="list-item" @click="enterDetails(item)">
<view class="item-header"> <view class="item-header">
<view class="card-name-section"> <view class="header-row">
<view class="card-icon"> <view class="card-icon">
<uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons> <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
</view> </view>
<view class="card-info"> <text class="card-name">{{ item.name }}</text>
<text class="card-name">{{ item.name }}</text> <text class="card-code" v-if="item.code">{{ item.code }}</text>
<text class="card-code" v-if="item.code">{{ item.code }}</text>
</view>
</view> </view>
<view class="balance-section"> <view class="info-row">
<text class="balance-value"><text class="balance-label">余额</text>{{ item.balance }}</text> <text class="account-type">{{ dictStr(item.debitType, debitTypeList) || '--' }}</text>
<text class="account-status" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
<view class="balance-amount">
<text class="balance-label">余额</text>
<text class="balance-value">{{ item.balance }}</text>
</view>
</view> </view>
</view> </view>
<view class="card-body"> <view class="card-body">
<view class="info-row"> <view class="info-row">
<view class="info-item" v-if="dictStr(item.debitType, debitTypeList) || true"> <!-- <view class="info-item" v-if="dictStr(item.debitType, debitTypeList) || true">
<text class="info-label">账户类型</text> <text class="info-label">账户类型</text>
<text class="info-value">{{ dictStr(item.debitType, debitTypeList) || '--' }}</text> <text class="info-value">{{ dictStr(item.debitType, debitTypeList) || '--' }}</text>
</view> </view>
<view class="info-item" v-if="dictStr(item.status, statusList) || true"> <view class="info-item" v-if="dictStr(item.status, statusList) || true">
<text class="info-label">账户状态</text> <text class="info-label">账户状态</text>
<text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text> <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
</view> </view> -->
<view class="info-item" v-if="item.activationDate || true"> <view class="info-item" v-if="item.activationDate || true">
<text class="info-label">开户日期</text> <text class="info-label">开户日期</text>
<text class="info-value">{{ item.activationDate || '--' }}</text> <text class="info-value">{{ item.activationDate || '--' }}</text>
@@ -555,17 +558,15 @@ page {
.item-header { .item-header {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; gap: 12rpx;
padding: 16rpx 24rpx; padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section { .header-row {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; gap: 10rpx;
min-width: 0;
margin-right: 16rpx;
} }
.card-icon { .card-icon {
@@ -576,54 +577,85 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 12rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.card-info { .card-name {
font-size: 28rpx;
font-weight: 600;
color: #ffffff;
line-height: 1.3;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
display: flex; overflow: hidden;
flex-direction: column; text-overflow: ellipsis;
gap: 4rpx; white-space: nowrap;
.card-name {
color: #ffffff;
font-size: 28rpx;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-code {
color: rgba(255, 255, 255, 0.85);
font-size: 22rpx;
font-weight: 400;
line-height: 1;
}
} }
.balance-section { .card-code {
display: flex; font-size: 26rpx;
align-items: center; color: rgba(255, 255, 255, 0.75);
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.5rpx;
font-family: 'Courier New', monospace;
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; }
.balance-amount {
display: flex;
align-items: baseline;
gap: 6rpx;
flex-shrink: 0;
}
.balance-label {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
}
.balance-value {
font-size: 32rpx;
font-weight: 700;
color: #fa8c16;
line-height: 1.2;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
padding-top: 12rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}
.account-type {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
line-height: 1.3;
flex-shrink: 0;
}
.account-status {
font-size: 24rpx;
font-weight: 500;
line-height: 1.3;
flex: 1;
text-align: center;
.balance-value { &.status-normal {
color: #fa8c16; color: #52c41a;
font-size: 32rpx; }
font-weight: 700;
line-height: 1; &.status-error {
white-space: nowrap; color: #ff4d4f;
}
.balance-label {
color: rgba(255, 255, 255, 0.85); &.status-default {
font-size: 22rpx; color: rgba(255, 255, 255, 0.7);
font-weight: 400;
margin-right: 8rpx;
}
} }
} }
} }

View File

@@ -21,7 +21,7 @@
<uni-icons type="star" size="20" color="#ffffff"></uni-icons> <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
</view> </view>
<view class="card-info"> <view class="card-info">
<text class="card-name">{{ item.name }}</text> <text class="card-name">{{ item.name }}({{ item.code }})</text>
</view> </view>
</view> </view>
<view class="balance-section"> <view class="balance-section">