qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 界面功能优化，完成基础信息和心路历程优化。

Browse Source
This commit is contained in:
tianyongbao
2025-11-13 02:05:38 +08:00
parent 6231c2494f
commit f4b0366a39
29 changed files with 4327 additions and 1651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

340
src/pages/work/base/financials/list.vue
View File

@@ -5,45 +5,65 @@
<u--input v-model="queryParams.name" border="false" placeholder="请输入理财账户名称" class="search-input"
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
</u--input>
<u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
<view class="add-btn" @click="handleAdd()">
<uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
<text>新增</text>
</view>
</view>
</u-sticky>
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="item-header" @click="enterDetails(item)">
<u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
:text="item.name+'-'+item.code " size="30rpx" color="#333333" :bold="true"></u--text>
<view class="card" @click="enterDetails(item)">
<view class="card-header">
<view class="card-title">
<uni-icons type="wallet" size="20" color="#fff"></uni-icons>
<text class="card-name">{{ item.name }}</text>
</view>
<view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
<text>{{ dictStr(item.status, statusList) }}</text>
</view>
</view>
<view class="item-row">
<text class="row-label">账户状态：</text>
<text class="row-value">{{ dictStr(item.status, statusList) }}</text>
<view class="card-content">
<view class="info-row">
<view class="info-item">
<text class="info-label">余额</text>
<text class="info-value orange">{{ item.balance || '0' }}</text>
</view>
<view class="info-item">
<text class="info-label">佣金费率</text>
<text class="info-value orange">{{ item.commission || '-' }}</text>
</view>
</view>
<view class="info-row">
<view class="info-item">
<text class="info-label">关联储蓄卡</text>
<text class="info-value">{{ item.bankNameCode || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">开户日期</text>
<text class="info-value">{{ item.activationDate || '-' }}</text>
</view>
</view>
<view class="info-row" v-if="item.remark">
<view class="info-item full-width">
<text class="info-label">备注</text>
<text class="info-value">{{ item.remark }}</text>
</view>
</view>
</view>
<view class="item-row">
<text class="row-label">余额：</text>
<text class="row-value">{{ item.balance }}</text>
</view>
<view class="item-row">
<text class="row-label">关联储蓄卡：</text>
<text class="row-value">{{ item.bankNameCode }}</text>
</view>
<view class="item-row">
<text class="row-label">佣金费率：</text>
<text class="row-value">{{ item.commission }}</text>
</view>
<view class="item-row">
<text class="row-label">开户日期：</text>
<text class="row-value">{{ item.activationDate}}</text>
</view>
<view class="item-row">
<text class="row-label">备注：</text>
<text class="row-value">{{ item.remark}}</text>
</view>
<view class="operate" >
<!-- <view class="btn filling" @click="enterDetails(item)">查看</view > -->
<view class="btn filling" @click="handleEdit(item)">修改</view>
<view class="btn filling" @click="handleDelete(item)">删除</view>
<view class="card-footer">
<view class="action-btn edit-btn" @click.stop="handleEdit(item)">
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
<text>编辑</text>
</view>
<view class="action-btn delete-btn" @click.stop="handleDelete(item)">
<uni-icons type="trash" size="16" color="#ff4d4f"></uni-icons>
<text>删除</text>
</view>
</view>
</view>
</u-list-item>
@@ -134,6 +154,26 @@ function dictStr(val, arr) {
})
return str
}
function getStatusClass(status, statusText) {
// 优先根据状态文字判断
if (statusText && statusText.includes('正常')) {
return 'status-normal'
}
if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
return 'status-error'
}
// 备用：根据状态值判断
const statusStr = String(status)
if (statusStr === '2') {
return 'status-normal'
}
if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
return 'status-error'
}
return 'status-default'
}
function searchBlur() {
pageNum.value = 1
listData.value = []
@@ -194,155 +234,157 @@ function dictStr(val, arr) {
margin-bottom: 24rpx;
.search-input {
background: #F5F5F5;
background: #f5f7fa;
color: #333333;
margin-right: 36rpx;
flex: 1;
margin-right: 16rpx;
border-radius: 24rpx;
border: 1rpx solid #e8edf3;
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
.filter-panel-content {
background-color: #ffff;
padding: 0 30rpx 30rpx;
.filter-title {
color: #000000;
font-size: 30rpx;
font-weight: 500;
padding: 30rpx 0;
}
.state-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
font-size: 28rpx;
color: #000000;
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
}
}
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 24rpx;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
margin-left: 10rpx;
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}
.btn-box {
display: flex;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
text {
color: #ffffff;
font-size: 28rpx;
font-weight: 600;
}
}
}
.list-item {
.card {
margin: 0 24rpx 24rpx;
padding: 32rpx;
background-color: #fff;
border-radius: 12rpx;
overflow: hidden;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
.item-header {
.card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 24rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
.status {
.status-item {
width: 120rpx;
height: 44rpx;
text-align: center;
line-height: 44rpx;
border-radius: 4rpx;
font-size: 24rpx;
.card-title {
display: flex;
align-items: center;
gap: 12rpx;
.card-name {
color: #fff;
font-size: 32rpx;
font-weight: bold;
}
}
.status-badge {
padding: 8rpx 20rpx;
border-radius: 24rpx;
font-size: 24rpx;
font-weight: 600;
&.status-default {
background: #f0f0f0;
color: #666666;
}
.status1 {
background: #F0F0F0;
color: #8C8C8C;
&.status-normal {
background: #fa8c16;
color: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
}
.status2 {
background: rgba(38, 129, 255, 0.2);
color: #2681FF;
}
.status3 {
background: #F7F7F7;
color: #2681FF;
}
.status4 {
background: rgba(255, 85, 51, 0.2);
color: #FF5533;
}
.status5 {
background: #F7F7F7;
color: rgba(0, 0, 0, 0.85);
}
.status7 {
background: rgba(255, 129, 51, 0.2);
color: #FF8133;
}
.status8 {
background: rgba(65, 217, 165, 0.2);
color: #41D9A5;
&.status-error {
background: #ff4d4f;
color: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
}
}
}
.item-row {
padding: 16rpx 0;
.card-content {
padding: 24rpx 32rpx;
.row-label {
color: rgba(0, 0, 0, 0.55);
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.row-value {
color: rgba(0, 0, 0, 0.85)
&:last-child {
margin-bottom: 0;
}
.info-item {
flex: 1;
display: flex;
flex-direction: column;
gap: 8rpx;
&.full-width {
flex: none;
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #999;
}
.info-value {
font-size: 28rpx;
color: #333;
font-weight: 500;
&.orange {
color: #fa8c16;
font-weight: bold;
}
}
}
}
}
.operate {
.card-footer {
display: flex;
justify-content: flex-end;
gap: 24rpx;
padding: 20rpx 32rpx;
border-top: 1rpx solid #f0f0f0;
.btn {
width: 146rpx;
height: 56rpx;
line-height: 56rpx;
.action-btn {
display: flex;
align-items: center;
gap: 8rpx;
padding: 12rpx 24rpx;
border-radius: 8rpx;
margin-left: 5rpx;
text-align: center;
}
font-size: 28rpx;
transition: all 0.3s;
.circulation {
background: rgba(0, 0, 0, 0.04);
margin-right: 24rpx;
color: rgba(0, 0, 0, 0.85);
}
&.edit-btn {
background-color: rgba(102, 126, 234, 0.1);
color: #667eea;
}
.filling {
background: #2681FF;
border-radius: 8rpx;
color: #FFFFFF;
&.delete-btn {
background-color: rgba(255, 77, 79, 0.1);
color: #ff4d4f;
}
}
}
}