fix: 自测问题修复。
This commit is contained in:
tianyongbao
@@ -82,7 +82,7 @@
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="folder-add-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.name }}</text>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="staff" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.personName }}</text>
|
||||
|
||||
@@ -70,29 +70,29 @@ import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
|
||||
import { ref } from "vue";
|
||||
|
||||
const healthGridList = ref([
|
||||
{ path: '/pages/health/person/list', text: '成员管理', icon: 'staff-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'health:person:list' },
|
||||
{ path: '/pages/health/healthRecord/list', text: '健康档案', icon: 'bars', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'health:healthRecord:list' },
|
||||
{ path: '/pages/health/processRecord/list', text: '过程记录', icon: 'list', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'health:processRecord:list' },
|
||||
{ path: '/pages/health/doctorRecord/list', text: '就医记录', icon: 'medical-filled', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'health:doctorRecord:list' },
|
||||
{ path: '/pages/health/marRecord/list', text: '用药记录', icon: 'notification-filled', color: 'linear-gradient(135deg, #d38cff 0%, #9d50bb 100%)', permission: 'health:marRecord:list' },
|
||||
{ path: '/pages/health/person/list', text: '成员管理', icon: 'person-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'health:person:list' },
|
||||
{ path: '/pages/health/healthRecord/list', text: '健康档案', icon: 'folder-add-filled', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'health:healthRecord:list' },
|
||||
{ path: '/pages/health/processRecord/list', text: '过程记录', icon: 'compose', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'health:processRecord:list' },
|
||||
{ path: '/pages/health/doctorRecord/list', text: '就医记录', icon: 'heart-filled', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'health:doctorRecord:list' },
|
||||
{ path: '/pages/health/marRecord/list', text: '用药记录', icon: 'color', color: 'linear-gradient(135deg, #d38cff 0%, #9d50bb 100%)', permission: 'health:marRecord:list' },
|
||||
{ path: '/pages/health/temperatureRecord/list', text: '体温记录', icon: 'fire-filled', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)', permission: 'health:temperatureRecord:list' },
|
||||
{ path: '/pages/health/heightWeightRecord/list', text: '身高体重记录', icon: 'person-filled', color: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', permission: 'health:heightWeightRecord:list' },
|
||||
{ path: '/pages/health/heightWeightRecord/list', text: '身高体重记录', icon: 'staff', color: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', permission: 'health:heightWeightRecord:list' },
|
||||
{ path: '/pages/health/activity/list', text: '活动记录', icon: 'flag-filled', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'health:activity:list' },
|
||||
{ path: '/pages/health/medicineBasic/list', text: '药品基础信息', icon: 'folder-add-filled', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', permission: 'health:medicineBasic:list' },
|
||||
{ path: '/pages/health/medicineBasic/list', text: '药品基础信息', icon: 'locked', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', permission: 'health:medicineBasic:list' },
|
||||
{ path: '/pages/health/medicineStockIn/list', text: '药品入库清单', icon: 'download-filled', color: 'linear-gradient(135deg, #17c0eb 0%, #f368e0 100%)', permission: 'health:medicineStockIn:list' },
|
||||
{ path: '/pages/health/medicineStock/list', text: '药品实时库存', icon: 'color', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'health:medicineStockIn:list' }
|
||||
{ path: '/pages/health/medicineStock/list', text: '药品实时库存', icon: 'shop', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'health:medicineStockIn:list' }
|
||||
])
|
||||
|
||||
const babycareGridList = ref([
|
||||
{ path: '/pages/health/milkPowderRecord/list', text: '吃奶记录', icon: 'wine', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'health:milkPowderRecord:list' },
|
||||
{ path: '/pages/health/statistic/milkPowderStatistic/index', text: '吃奶量统计', icon: 'pie-chart', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)', permission: 'health:milkPowderStatistic:list' }
|
||||
{ path: '/pages/health/milkPowderRecord/list', text: '吃奶记录', icon: 'gift-filled', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'health:milkPowderRecord:list' },
|
||||
{ path: '/pages/health/statistic/milkPowderStatistic/index', text: '吃奶量统计', icon: 'bars', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)', permission: 'health:milkPowderStatistic:list' }
|
||||
])
|
||||
|
||||
const healthStaticGridList = ref([
|
||||
{ path: '/pages/health/statistic/healthStatistic/index', text: '档案统计', icon: 'map', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'health:healthRecord:list' },
|
||||
{ path: '/pages/health/statistic/doctorStatistic/index', text: '就医统计', icon: 'eye-filled', color: 'linear-gradient(135deg, #fc5c65 0%, #fd79a8 100%)', permission: 'health:doctorRecord:list' },
|
||||
{ path: '/pages/health/statistic/marStatistic/index', text: '用药统计', icon: 'heart-filled', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'health:marRecord:list' },
|
||||
{ path: '/pages/health/statistic/temperatureStatistic/index', text: '体温统计', icon: 'fire', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'health:temperatureRecord:list' }
|
||||
{ path: '/pages/health/statistic/healthStatistic/index', text: '档案统计', icon: 'paperplane-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'health:healthRecord:list' },
|
||||
{ path: '/pages/health/statistic/doctorStatistic/index', text: '就医统计', icon: 'home-filled', color: 'linear-gradient(135deg, #fc5c65 0%, #fd79a8 100%)', permission: 'health:doctorRecord:list' },
|
||||
{ path: '/pages/health/statistic/marStatistic/index', text: '用药统计', icon: 'wallet-filled', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'health:marRecord:list' },
|
||||
{ path: '/pages/health/statistic/temperatureStatistic/index', text: '体温统计', icon: 'loop', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'health:temperatureRecord:list' }
|
||||
])
|
||||
function navigateTo(path) {
|
||||
uni.navigateTo({
|
||||
|
||||
@@ -94,13 +94,15 @@
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="color" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.name }}</text>
|
||||
<text class="card-code">{{ item.dosage }} {{ dictStr(item.unit, unitList) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dosage-section">
|
||||
<text class="dosage-value">{{ item.dosage }} {{ dictStr(item.unit, unitList) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
@@ -708,26 +710,31 @@ page {
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.dosage-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
.dosage-value {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8rpx 16rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8rpx;
|
||||
letter-spacing: 0.3rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="plusempty" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="locked" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.shortName }}-{{ item.brand }}({{ item.packaging }})</text>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<view class="item-header" @click="enterDetails(item)">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="shop" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.medicineName }} - 库存{{ item.leftCount }}{{ dictStr(item.unit, unitList) }}</text>
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="arrow-down" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="download-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.medicineName }} - 入库{{ item.quantity }}{{ dictStr(item.packageUnit, packageUnitList) }}</text>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="gift-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.personName }} - {{ item.sucklesTime }}</text>
|
||||
|
||||
@@ -610,7 +610,7 @@ page {
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<view class="header-con" ref="searchHeightRef">
|
||||
<view class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="info-sum">
|
||||
<view class="title">就医次数</view>
|
||||
@@ -54,7 +54,7 @@
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
|
||||
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="info-sum">
|
||||
<view class="title">常去科室</view>
|
||||
@@ -235,20 +235,51 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<div style="margin:8px" v-show="listData.length>0 && viewMode === 'list'">
|
||||
<button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">明细</button>
|
||||
<button :type="secondType" size=mini @click="btSecondClick">医院</button>
|
||||
<button :type="thirdType" size=mini @click="btThirdClick">科室</button>
|
||||
<button :type="fourType" size=mini @click="btFourClick">大夫</button>
|
||||
<button :type="fiveType" size=mini @click="btFiveClick">费用</button>
|
||||
</div>
|
||||
<!-- 列表展示 -->
|
||||
<view class="tab-switch" v-show="listData.length>0 && viewMode === 'list'">
|
||||
<view
|
||||
:class="['tab-item', { 'active': firstTabShow }]"
|
||||
@click="btFirstClick"
|
||||
>
|
||||
<uni-icons type="list" size="14" :color="firstTabShow ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>明细</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['tab-item', { 'active': secondTabShow }]"
|
||||
@click="btSecondClick"
|
||||
>
|
||||
<uni-icons type="home" size="14" :color="secondTabShow ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>医院</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['tab-item', { 'active': thirdTabShow }]"
|
||||
@click="btThirdClick"
|
||||
>
|
||||
<uni-icons type="flag" size="14" :color="thirdTabShow ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>科室</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['tab-item', { 'active': fourTabShow }]"
|
||||
@click="btFourClick"
|
||||
>
|
||||
<uni-icons type="person" size="14" :color="fourTabShow ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>大夫</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['tab-item', { 'active': fiveTabShow }]"
|
||||
@click="btFiveClick"
|
||||
>
|
||||
<uni-icons type="wallet" size="14" :color="fiveTabShow ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>费用</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-list v-show="firstTabShow && viewMode === 'list'" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
<view class="record-name-section">
|
||||
<view class="record-icon">
|
||||
<uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="list" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="record-info">
|
||||
<text class="record-name">{{ item.hospitalName }}</text>
|
||||
@@ -295,7 +326,7 @@
|
||||
<view class="item-header">
|
||||
<view class="record-name-section">
|
||||
<view class="record-icon">
|
||||
<uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="home" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="record-info">
|
||||
<text class="record-name">{{ item.hospitalName }}</text>
|
||||
@@ -316,7 +347,7 @@
|
||||
<view class="item-header">
|
||||
<view class="record-name-section">
|
||||
<view class="record-icon">
|
||||
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="flag" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="record-info">
|
||||
<text class="record-name">{{ item.departments }}</text>
|
||||
@@ -1194,6 +1225,57 @@ page {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
overflow-x: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
min-width: fit-content;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 2rpx 12rpx rgba(102, 126, 234, 0.2);
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
@@ -232,9 +232,21 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<view style="margin:8px" v-show="listData.length>0 && viewMode === 'list'">
|
||||
<button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">档案明细</button>
|
||||
<button :type="secondType" type="primary" size=mini @click="btSecondClick">费用明细</button>
|
||||
<view class="tab-switch" v-show="listData.length>0 && viewMode === 'list'">
|
||||
<view
|
||||
:class="['tab-item', { 'active': !tabShow }]"
|
||||
@click="btFirstClick"
|
||||
>
|
||||
<uni-icons type="folder-add" size="16" :color="!tabShow ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>档案明细</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['tab-item', { 'active': tabShow }]"
|
||||
@click="btSecondClick"
|
||||
>
|
||||
<uni-icons type="wallet" size="16" :color="tabShow ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>费用明细</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-list v-show="!tabShow && viewMode === 'list'" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
@@ -242,7 +254,7 @@
|
||||
<view class="item-header">
|
||||
<view class="record-name-section">
|
||||
<view class="record-icon">
|
||||
<uni-icons type="folder-add-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="paperplane-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="record-info">
|
||||
<text class="record-name">{{ item.name }}</text>
|
||||
@@ -296,7 +308,7 @@
|
||||
<view class="item-header">
|
||||
<view class="record-name-section">
|
||||
<view class="record-icon">
|
||||
<uni-icons type="folder-add-filled" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="paperplane-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="record-info">
|
||||
<text class="record-name">{{ item.time }}</text>
|
||||
@@ -1074,11 +1086,55 @@ page {
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
width: calc(100% - 48rpx);
|
||||
height: 500rpx;
|
||||
height: 480rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
background-color: #f5f7fa;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 2rpx 12rpx rgba(102, 126, 234, 0.2);
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
@@ -339,7 +339,7 @@
|
||||
<view class="item-header">
|
||||
<view class="record-name-section">
|
||||
<view class="record-icon">
|
||||
<uni-icons type="color" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="record-info">
|
||||
<text class="record-name">{{ item.medicalName }} - {{ item.useDays || 0 }}天</text>
|
||||
@@ -370,7 +370,7 @@
|
||||
<view class="item-header">
|
||||
<view class="record-name-section">
|
||||
<view class="record-icon">
|
||||
<uni-icons type="color" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="record-info">
|
||||
<text class="record-name">{{ item.time }}</text>
|
||||
@@ -1080,7 +1080,7 @@ page {
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
width: calc(100% - 48rpx);
|
||||
height: 500rpx;
|
||||
height: 480rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -236,7 +236,7 @@
|
||||
<view class="item-header">
|
||||
<view class="record-name-section">
|
||||
<view class="record-icon">
|
||||
<uni-icons type="color" size="20" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="record-info">
|
||||
<text class="record-name">{{ item.time }}</text>
|
||||
@@ -919,10 +919,10 @@ page {
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 0 0 24rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
||||
margin: 0 0 16rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@@ -935,53 +935,63 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.record-name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.record-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.record-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
flex: 1;
|
||||
|
||||
.record-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.record-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.cost-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.cost-value {
|
||||
color: #ffffff;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.cost-label {
|
||||
font-size: 22rpx;
|
||||
color: #95a5a6;
|
||||
margin-left: 4rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -220,7 +220,7 @@
|
||||
<view class="item-header">
|
||||
<view class="header-left">
|
||||
<view class="time-badge">
|
||||
<uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="loop" size="16" color="#ffffff"></uni-icons>
|
||||
<text>{{ item.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -87,9 +87,11 @@
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.personName }}</text>
|
||||
<text class="card-time">{{ item.measureTime }}</text>
|
||||
<text class="card-code">测量体温 <text :class="getTemperatureClass(item.temperature)">{{ item.temperature }}℃</text></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="temperature-section">
|
||||
<text :class="['temperature-value', getTemperatureClass(item.temperature)]">{{ item.temperature }}℃</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
@@ -603,31 +605,38 @@ page {
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.temperature-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
.temperature-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
letter-spacing: 0.3rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10rpx;
|
||||
letter-spacing: 0.5rpx;
|
||||
|
||||
.temp-normal {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
&.temp-normal {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.temp-warning {
|
||||
&.temp-warning {
|
||||
color: #ff7875;
|
||||
background: rgba(255, 120, 117, 0.15);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.temp-danger {
|
||||
&.temp-danger {
|
||||
color: #ff4d4f;
|
||||
background: rgba(255, 77, 79, 0.15);
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,298 +0,0 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
title="储蓄账户管理"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title}}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="储蓄账户名称" prop="name" required >
|
||||
<u--input v-model="form.name" placeholder="请填写储蓄账户名称"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="储蓄账户卡号" prop="code" required >
|
||||
<u--input v-model="form.code" placeholder="请填写储蓄账户卡号"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="账户状态" required prop="statusName" @click="handleShowStatus">
|
||||
<u--input v-model="form.statusName" disabled disabledColor="#ffffff" placeholder="请选择账户状态"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-down"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="余额" required prop="balance" >
|
||||
<u--input v-model="form.balance" type="number" placeholder="请填写余额"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="储蓄账户类型" prop="debitTypeName" required @click="handleShowTeam">
|
||||
<u--input v-model="form.debitTypeName" disabled disabledColor="#ffffff" placeholder="请选择储蓄账户类型"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-down"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="开户行" prop="openingBank" >
|
||||
<u--input v-model="form.openingBank" placeholder="请填写开户行"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="开户日期" prop="activationDate" @click="selectDate(1)">
|
||||
<u--input v-model="form.activationDate" disabled disabledColor="#ffffff" placeholder="请选择开户日期" inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="有效期" prop="effectiveDate" @click="selectDate(2)">
|
||||
<u--input v-model="form.effectiveDate" disabled disabledColor="#ffffff" placeholder="请选择有效期" inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="20000" style="padding:18rpx 0;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showTeam" :columns="debitTypeList" keyName="dictLabel" @cancel="handleCancel"
|
||||
@confirm="handleConfirm"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showStatus" :columns="statusList" keyName="dictLabel" @cancel="handleStatusCancel"
|
||||
@confirm="handleStatusConfirm"></u-picker>
|
||||
<u-datetime-picker
|
||||
:show="datePickShow"
|
||||
mode="date"
|
||||
:minDate="-2209017600000"
|
||||
ref="createTimeRef"
|
||||
@cancel="datePickShow=false"
|
||||
@confirm="datePickConfirm"
|
||||
itemHeight="88"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getBankcardLend, addBankcardLend, updateBankcardLend } from '@/api/invest/bankcardlend'
|
||||
import { getDicts } from '@/api/system/dict/data.js'
|
||||
const { proxy } = getCurrentInstance()
|
||||
import dayjs from 'dayjs'
|
||||
import {onLoad,onReady} from "@dcloudio/uni-app";
|
||||
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
|
||||
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
|
||||
const datePickShow = ref(false)
|
||||
const showTeam = ref(false)
|
||||
const title = ref("储蓄账户管理")
|
||||
const debitTypeList = ref([])
|
||||
const dateType = ref(1)
|
||||
const showStatus = ref(false)
|
||||
const statusList = ref([])
|
||||
const data = reactive({
|
||||
form: {
|
||||
id: null,
|
||||
name: null,
|
||||
type: '1',
|
||||
code: null,
|
||||
openingBank: null,
|
||||
activationDate: null,
|
||||
billDate: null,
|
||||
payDate: null,
|
||||
delayPeriod: null,
|
||||
creditLimit: null,
|
||||
balance: null,
|
||||
effectiveDate: null,
|
||||
cvv: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
delFlag: null,
|
||||
remark: null,
|
||||
debitType: null,
|
||||
status: '1',
|
||||
statusName: '正常使用'
|
||||
},
|
||||
// dateType:'1',
|
||||
rules: {
|
||||
name: [{ type: 'string', required: true, message: '储蓄账户名称不能为空', trigger: ['change', 'blur'] }],
|
||||
code: [{ type: 'string', required: true, message: '储蓄账户卡号不能为空', trigger: ['change', 'blur'] }],
|
||||
balance: [{ type: 'number', required: true, message: '余额不能为空', trigger: ['change', 'blur'] }],
|
||||
statusName: [{ type: 'string', required: true, message: '账户状态不能为空', trigger: ['change', 'blur'] }],
|
||||
debitTypeName: [{ type: 'string', required: true, message: '储蓄账户类型不能为空', trigger: ['change', 'blur'] }],
|
||||
}
|
||||
})
|
||||
const { form, rules} = toRefs(data)
|
||||
|
||||
onLoad((option) => {
|
||||
form.value.id = option.id
|
||||
if(form.value.id!=null){
|
||||
title.value="储蓄账户管理-修改"
|
||||
}else{
|
||||
title.value="储蓄账户管理-新增"
|
||||
}
|
||||
getDict()
|
||||
})
|
||||
onReady(() => {
|
||||
form.value.activationDate = dayjs(new Date().getTime()).format("YYYY-MM-DD")
|
||||
form.value.effectiveDate = dayjs(new Date().getTime()).format("YYYY-MM-DD")
|
||||
})
|
||||
function getDict() {
|
||||
// 类型
|
||||
getDicts('debit_type').then(res => {
|
||||
debitTypeList.value =[res.data]
|
||||
})
|
||||
// 类型
|
||||
getDicts('account_status').then(res => {
|
||||
statusList.value =[res.data]
|
||||
})
|
||||
if(form.value.id!=null){
|
||||
getBankcardLend(form.value.id).then(res => {
|
||||
form.value = res.data
|
||||
// 类型
|
||||
getDicts('debit_type').then(result => {
|
||||
form.value.debitTypeName=dictStr(form.value.debitType, result.data)
|
||||
})
|
||||
|
||||
// 类型
|
||||
getDicts('account_status').then(result => {
|
||||
form.value.statusName=dictStr(form.value.status, result.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
function dictStr(val, arr) {
|
||||
let str = ''
|
||||
arr.map(item => {
|
||||
if (item.dictValue === val) {
|
||||
str = item.dictLabel
|
||||
}
|
||||
})
|
||||
return str
|
||||
}
|
||||
|
||||
function handleShowTeam() {
|
||||
if (debitTypeList.value[0].length === 0) {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '类型为空 ', type: 'warning'
|
||||
})
|
||||
} else {
|
||||
showTeam.value = true
|
||||
}
|
||||
}
|
||||
function handleConfirm(e) {
|
||||
form.value.debitTypeName = e.value[0].dictLabel
|
||||
form.value.debitType = e.value[0].dictValue
|
||||
showTeam.value = false
|
||||
}
|
||||
function handleCancel() {
|
||||
showTeam.value = false
|
||||
}
|
||||
function handleShowStatus() {
|
||||
if (statusList.value[0].length === 0) {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '账户状态操作为空 ', type: 'warning'
|
||||
})
|
||||
} else {
|
||||
showStatus.value = true
|
||||
}
|
||||
}
|
||||
function handleStatusConfirm(e) {
|
||||
form.value.statusName = e.value[0].dictLabel
|
||||
form.value.status = e.value[0].dictValue
|
||||
showStatus.value = false
|
||||
}
|
||||
function handleStatusCancel() {
|
||||
showStatus.value = false
|
||||
}
|
||||
|
||||
function selectDate(type) {
|
||||
dateType.value=type
|
||||
datePickShow.value = true
|
||||
proxy.$refs['createTimeRef'].innerValue = new Date().getTime()
|
||||
}
|
||||
function datePickConfirm(e) {
|
||||
if(dateType.value===1){
|
||||
form.value.activationDate = dayjs(e.value).format("YYYY-MM-DD")
|
||||
}
|
||||
if(dateType.value===2){
|
||||
form.value.effectiveDate = dayjs(e.value).format("YYYY-MM-DD")
|
||||
}
|
||||
datePickShow.value = false
|
||||
}
|
||||
function submit() {
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
if (form.value.id != null) {
|
||||
updateBankcardLend(form.value).then(res => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功', complete() {
|
||||
uni.navigateTo({ url: `/pages/work/base/debitCard/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
}else {
|
||||
addBankcardLend(form.value).then(res => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '新增成功', complete() {
|
||||
uni.navigateTo({ url: `/pages/work/base/debitCard/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,470 +0,0 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
title="储蓄卡非柜调额"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
|
||||
<u-form-item label="调整前额度" prop="beforeLimit">
|
||||
<u--input v-model="form.beforeLimit" disabled disabledColor="#ffffff" placeholder="调整前额度"
|
||||
inputAlign="right" border="none">
|
||||
<template #suffix>
|
||||
<text style="color: #909399; font-size: 28rpx;">元</text>
|
||||
</template>
|
||||
</u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="调整类型" prop="adjustTypeName" required @click="handleShowAdjustType">
|
||||
<u--input v-model="form.adjustTypeName" disabled disabledColor="#ffffff" placeholder="请选择调整类型"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-down"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="调整后额度" prop="afterLimit" required>
|
||||
<u--input v-model="form.afterLimit" type="number" placeholder="请输入调整后额度"
|
||||
inputAlign="right" border="none">
|
||||
<template #suffix>
|
||||
<text style="color: #909399; font-size: 28rpx;">元</text>
|
||||
</template>
|
||||
</u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="调整额度" prop="adjustLimit">
|
||||
<u--input v-model="adjustLimitDisplay" disabled disabledColor="#ffffff" placeholder="自动计算"
|
||||
inputAlign="right" border="none" :style="{ color: adjustLimitColor }">
|
||||
<template #suffix>
|
||||
<text style="color: #909399; font-size: 28rpx;">元</text>
|
||||
</template>
|
||||
</u--input>
|
||||
</u-form-item>
|
||||
|
||||
|
||||
<u-form-item label="生效日期" prop="effectDate" required @click="selectEffectDate">
|
||||
<u--input v-model="form.effectDate" disabled disabledColor="#ffffff" placeholder="请选择生效日期"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="截止日期" prop="deadlineDate" @click="selectDeadlineDate">
|
||||
<u--input v-model="form.deadlineDate" disabled disabledColor="#ffffff" placeholder="请选择截止日期（可选）"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="调整时间" prop="adjustTime" required @click="selectAdjustTime">
|
||||
<u--input v-model="form.adjustTime" disabled disabledColor="#ffffff" placeholder="请选择调整时间"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="padding:18rpx 0;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
|
||||
<!-- 调整类型选择器 -->
|
||||
<u-picker itemHeight="88" :show="showAdjustType" :columns="adjustTypeList" keyName="dictLabel"
|
||||
@cancel="handleAdjustTypeCancel" @confirm="handleAdjustTypeConfirm"></u-picker>
|
||||
|
||||
<!-- 生效日期选择器 -->
|
||||
<u-datetime-picker
|
||||
:show="effectDatePickShow"
|
||||
mode="date"
|
||||
:minDate="-2209017600000"
|
||||
ref="effectDateRef"
|
||||
@cancel="effectDatePickShow=false"
|
||||
@confirm="effectDateConfirm"
|
||||
itemHeight="88"
|
||||
></u-datetime-picker>
|
||||
|
||||
<!-- 截止日期选择器 -->
|
||||
<u-datetime-picker
|
||||
:show="deadlineDatePickShow"
|
||||
mode="date"
|
||||
:minDate="-2209017600000"
|
||||
ref="deadlineDateRef"
|
||||
@cancel="deadlineDatePickShow=false"
|
||||
@confirm="deadlineDateConfirm"
|
||||
itemHeight="88"
|
||||
></u-datetime-picker>
|
||||
|
||||
<!-- 调整时间选择器 -->
|
||||
<u-datetime-picker
|
||||
:show="adjustTimePickShow"
|
||||
mode="datetime"
|
||||
:minDate="-2209017600000"
|
||||
ref="adjustTimeRef"
|
||||
@cancel="adjustTimePickShow=false"
|
||||
@confirm="adjustTimeConfirm"
|
||||
itemHeight="88"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getBankcardLend } from '@/api/invest/bankcardlend'
|
||||
import { addLimitHistory, updateLimitHistory, getLimitHistory, listLimitHistory } from '@/api/invest/limitHistory'
|
||||
import { getDicts } from '@/api/system/dict/data.js'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import { onLoad, onReady } from '@dcloudio/uni-app'
|
||||
import { reactive, toRefs, ref, computed, watch } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const title = ref('储蓄卡非柜调额')
|
||||
const showAdjustType = ref(false)
|
||||
const effectDatePickShow = ref(false)
|
||||
const deadlineDatePickShow = ref(false)
|
||||
const adjustTimePickShow = ref(false)
|
||||
const adjustTypeList = ref([])
|
||||
|
||||
const data = reactive({
|
||||
form: {
|
||||
id: null,
|
||||
name: '',
|
||||
cardNumber: '',
|
||||
type: '1', // 储蓄卡类型
|
||||
bankCardLendId: null,
|
||||
beforeLimit: '',
|
||||
afterLimit: '',
|
||||
adjustLimit: 0,
|
||||
adjustType: '',
|
||||
adjustTypeName: '',
|
||||
effectDate: '',
|
||||
deadlineDate: '',
|
||||
adjustTime: '',
|
||||
remark: ''
|
||||
},
|
||||
rules: {
|
||||
afterLimit: [
|
||||
{ type: 'number', required: true, message: '调整后额度不能为空', trigger: ['change', 'blur'] }
|
||||
],
|
||||
adjustTypeName: [
|
||||
{ type: 'string', required: true, message: '调整类型不能为空', trigger: ['change', 'blur'] }
|
||||
],
|
||||
effectDate: [
|
||||
{ type: 'string', required: true, message: '生效日期不能为空', trigger: ['change', 'blur'] }
|
||||
],
|
||||
adjustTime: [
|
||||
{ type: 'string', required: true, message: '调整时间不能为空', trigger: ['change', 'blur'] }
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const { form, rules } = toRefs(data)
|
||||
|
||||
// 计算调整额度
|
||||
const adjustLimitDisplay = computed(() => {
|
||||
const before = parseFloat(form.value.beforeLimit) || 0
|
||||
const after = parseFloat(form.value.afterLimit) || 0
|
||||
const adjust = after - before
|
||||
form.value.adjustLimit = adjust
|
||||
return adjust > 0 ? `+${adjust}` : `${adjust}`
|
||||
})
|
||||
|
||||
// 调整额度颜色
|
||||
const adjustLimitColor = computed(() => {
|
||||
const adjust = form.value.adjustLimit
|
||||
if (adjust > 0) return '#52c41a'
|
||||
if (adjust < 0) return '#ff4d4f'
|
||||
return '#909399'
|
||||
})
|
||||
|
||||
onLoad((option) => {
|
||||
form.value.id = option.id || null
|
||||
form.value.bankCardLendId = option.bankCardLendId
|
||||
form.value.name = option.name
|
||||
|
||||
if (form.value.id) {
|
||||
title.value = '储蓄卡非柜调额记录-修改'
|
||||
} else {
|
||||
title.value = '储蓄卡非柜调额记录-新增'
|
||||
}
|
||||
|
||||
getDict()
|
||||
|
||||
if (form.value.id) {
|
||||
// 编辑模式：加载已有记录
|
||||
getLimitHistoryInfo()
|
||||
} else {
|
||||
// 新增模式：获取当前额度
|
||||
getCardInfo()
|
||||
}
|
||||
})
|
||||
|
||||
onReady(() => {
|
||||
// 默认调整时间为当前时间
|
||||
form.value.adjustTime = dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
|
||||
// 默认生效日期为当前日期
|
||||
form.value.effectDate = dayjs(new Date().getTime()).format('YYYY-MM-DD')
|
||||
})
|
||||
|
||||
function getDict() {
|
||||
// 调整类型
|
||||
getDicts('adjust_type').then(res => {
|
||||
adjustTypeList.value = [res.data]
|
||||
// 如果是新增模式，默认选中"调额"
|
||||
if (!form.value.id && res.data && res.data.length > 0) {
|
||||
const defaultItem = res.data.find(item => item.dictLabel === '调额')
|
||||
if (defaultItem) {
|
||||
form.value.adjustType = defaultItem.dictValue
|
||||
form.value.adjustTypeName = defaultItem.dictLabel
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getLimitHistoryInfo() {
|
||||
getLimitHistory(form.value.id).then(res => {
|
||||
form.value = { ...form.value, ...res.data }
|
||||
// 获取字典显示名称
|
||||
getDicts('adjust_type').then(result => {
|
||||
form.value.adjustTypeName = dictStr(form.value.adjustType, result.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function getCardInfo() {
|
||||
// 先获取该储蓄卡的最新一条调额记录
|
||||
listLimitHistory({
|
||||
pageSize: 1,
|
||||
pageNum: 1,
|
||||
bankCardLendId: form.value.bankCardLendId
|
||||
}).then(res => {
|
||||
if (res.rows && res.rows.length > 0) {
|
||||
// 如果有调额记录，使用最新记录的调整后额度作为调整前额度
|
||||
const afterLimit = res.rows[0].afterLimit || 0
|
||||
form.value.beforeLimit = afterLimit
|
||||
// 默认调整后额度与调整前一致
|
||||
form.value.afterLimit = afterLimit
|
||||
} else {
|
||||
// 如果没有调额记录，使用储蓄卡的当前额度
|
||||
getBankcardLend(form.value.bankCardLendId).then(cardRes => {
|
||||
const limit = cardRes.data.limit || 0
|
||||
form.value.beforeLimit = limit
|
||||
// 默认调整后额度与调整前一致
|
||||
form.value.afterLimit = limit
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
// 查询失败时，使用储蓄卡的当前额度
|
||||
getBankcardLend(form.value.bankCardLendId).then(cardRes => {
|
||||
const limit = cardRes.data.limit || 0
|
||||
form.value.beforeLimit = limit
|
||||
// 默认调整后额度与调整前一致
|
||||
form.value.afterLimit = limit
|
||||
})
|
||||
})
|
||||
|
||||
// 获取储蓄卡账号
|
||||
getBankcardLend(form.value.bankCardLendId).then(res => {
|
||||
form.value.cardNumber = res.data.cardNumber || ''
|
||||
})
|
||||
}
|
||||
|
||||
function dictStr(val, arr) {
|
||||
let str = ''
|
||||
arr.map(item => {
|
||||
if (item.dictValue === val) {
|
||||
str = item.dictLabel
|
||||
}
|
||||
})
|
||||
return str
|
||||
}
|
||||
|
||||
// 调整类型选择
|
||||
function handleShowAdjustType() {
|
||||
if (adjustTypeList.value[0].length === 0) {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '调整类型为空',
|
||||
type: 'warning'
|
||||
})
|
||||
} else {
|
||||
showAdjustType.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function handleAdjustTypeConfirm(e) {
|
||||
form.value.adjustTypeName = e.value[0].dictLabel
|
||||
form.value.adjustType = e.value[0].dictValue
|
||||
showAdjustType.value = false
|
||||
}
|
||||
|
||||
function handleAdjustTypeCancel() {
|
||||
showAdjustType.value = false
|
||||
}
|
||||
|
||||
// 生效日期选择
|
||||
function selectEffectDate() {
|
||||
effectDatePickShow.value = true
|
||||
proxy.$refs['effectDateRef'].innerValue = form.value.effectDate
|
||||
? new Date(form.value.effectDate).getTime()
|
||||
: new Date().getTime()
|
||||
}
|
||||
|
||||
function effectDateConfirm(e) {
|
||||
form.value.effectDate = dayjs(e.value).format('YYYY-MM-DD')
|
||||
effectDatePickShow.value = false
|
||||
}
|
||||
|
||||
// 截止日期选择
|
||||
function selectDeadlineDate() {
|
||||
deadlineDatePickShow.value = true
|
||||
proxy.$refs['deadlineDateRef'].innerValue = form.value.deadlineDate
|
||||
? new Date(form.value.deadlineDate).getTime()
|
||||
: new Date().getTime()
|
||||
}
|
||||
|
||||
function deadlineDateConfirm(e) {
|
||||
form.value.deadlineDate = dayjs(e.value).format('YYYY-MM-DD')
|
||||
deadlineDatePickShow.value = false
|
||||
}
|
||||
|
||||
// 调整时间选择
|
||||
function selectAdjustTime() {
|
||||
adjustTimePickShow.value = true
|
||||
proxy.$refs['adjustTimeRef'].innerValue = form.value.adjustTime
|
||||
? new Date(form.value.adjustTime).getTime()
|
||||
: new Date().getTime()
|
||||
}
|
||||
|
||||
function adjustTimeConfirm(e) {
|
||||
form.value.adjustTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
|
||||
adjustTimePickShow.value = false
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submit() {
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
const submitData = { ...form.value }
|
||||
|
||||
if (form.value.id) {
|
||||
// 修改
|
||||
updateLimitHistory(submitData).then(res => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功',
|
||||
complete() {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 新增
|
||||
addLimitHistory(submitData).then(res => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '调额成功',
|
||||
complete() {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-info {
|
||||
padding: 24rpx;
|
||||
border-bottom: 2rpx solid #f5f7fa;
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,308 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
title="储蓄账户详情"
|
||||
>
|
||||
</u-navbar>
|
||||
|
||||
<view class="detail-card">
|
||||
<view class="card-header">
|
||||
<view class="header-icon">
|
||||
<uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="card-name">{{ detailInfo.name }}<text class="card-code">({{ detailInfo.code }})</text></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-section">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>账户信息</text>
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="list-item">
|
||||
<text class="item-label">余额</text>
|
||||
<text class="item-value orange">{{ detailInfo.balance }}元</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">账户类型</text>
|
||||
<text class="item-value">{{ detailInfo.debitType }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">账户状态</text>
|
||||
<text class="item-value" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-section">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>开户信息</text>
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="list-item">
|
||||
<text class="item-label">开户行</text>
|
||||
<text class="item-value">{{ detailInfo.openingBank || '-' }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">开户日期</text>
|
||||
<text class="item-value">{{ detailInfo.activationDate }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">有效期</text>
|
||||
<text class="item-value">{{ detailInfo.effectiveDate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-section" v-if="detailInfo.remark">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>备注</text>
|
||||
</view>
|
||||
<view class="remark-content">
|
||||
<text>{{ detailInfo.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getBankcardLend} from '@/api/invest/bankcardlend'
|
||||
import { getDicts } from '@/api/system/dict/data.js'
|
||||
import {onLoad} from "@dcloudio/uni-app";
|
||||
import {reactive ,toRefs,ref,computed }from "vue";
|
||||
const id = ref('')
|
||||
const data = reactive({
|
||||
detailInfo: {}
|
||||
})
|
||||
const {detailInfo} = toRefs(data)
|
||||
|
||||
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'
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
id.value = option.id
|
||||
getInfo()
|
||||
})
|
||||
function getInfo() {
|
||||
getBankcardLend(id.value).then(res => {
|
||||
detailInfo.value = res.data
|
||||
detailInfo.value.statusText = res.data.status
|
||||
// 类型
|
||||
getDicts('debit_type').then(result => {
|
||||
detailInfo.value.debitType=dictStr(detailInfo.value.debitType, result.data)
|
||||
})
|
||||
// 类型
|
||||
getDicts('account_status').then(result => {
|
||||
detailInfo.value.statusText=dictStr(detailInfo.value.status, result.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
function dictStr(val, arr) {
|
||||
let str = ''
|
||||
arr.map(item => {
|
||||
if (item.dictValue === val) {
|
||||
str = item.dictLabel
|
||||
}
|
||||
})
|
||||
return str
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
margin: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.header-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.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: 28rpx;
|
||||
font-weight: 400;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&.status-default {
|
||||
background: #f0f0f0;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
&.status-normal {
|
||||
background: #fa8c16;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
|
||||
}
|
||||
|
||||
&.status-error {
|
||||
background: #ff4d4f;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title-icon {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
color: #7f8c8d;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
|
||||
&.orange {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.status-normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-error {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.status-default {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remark-content {
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,486 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
:title="pageTitle"
|
||||
>
|
||||
</u-navbar>
|
||||
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="header-view">
|
||||
<view class="card-info-header">
|
||||
<view class="info-item">
|
||||
<text class="info-label">卡名称：</text>
|
||||
<text class="info-value">{{ cardInfo.name || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">卡账号：</text>
|
||||
<text class="info-value">{{ cardInfo.code || '--' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add-btn" @click="handleAdd()">
|
||||
<uni-icons type="plusempty" size="18" color="#667eea"></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" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
<view class="header-left">
|
||||
<view class="adjust-icon" :class="item.adjustLimit > 0 ? 'icon-up' : 'icon-down'">
|
||||
<uni-icons :type="item.adjustLimit > 0 ? 'arrow-up' : 'arrow-down'" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="adjust-type">{{ item.adjustTypeName || dictStr(item.adjustType, adjustTypeList) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-center">
|
||||
<text class="adjust-time">{{ formatDate(item.adjustTime) }}</text>
|
||||
</view>
|
||||
<view class="adjust-amount" :class="item.adjustLimit > 0 ? 'amount-up' : 'amount-down'">
|
||||
<text>{{ item.adjustLimit > 0 ? '+' : '' }}{{ item.adjustLimit }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item">
|
||||
<text class="info-label">调整前额度</text>
|
||||
<text class="info-value">{{ item.beforeLimit }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">调整后额度</text>
|
||||
<text class="info-value orange">{{ item.afterLimit }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">生效日期</text>
|
||||
<text class="info-value">{{ item.effectDate || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.deadlineDate">
|
||||
<text class="info-label">截止日期</text>
|
||||
<text class="info-value">{{ item.deadlineDate }}</text>
|
||||
</view>
|
||||
<view class="info-item info-item-full" v-if="item.remark">
|
||||
<text class="info-label">备注</text>
|
||||
<text class="info-value">{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-edit" @click="handleEdit(item)">
|
||||
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
|
||||
<text>修改</text>
|
||||
</view>
|
||||
<view class="btn-delete" @click="handleDelete(item)">
|
||||
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view>
|
||||
</view>
|
||||
<u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||
</u-list>
|
||||
</view>
|
||||
<!-- 悬停按钮-->
|
||||
<suspend></suspend>
|
||||
<refresh></refresh>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listLimitHistory, delLimitHistory } from '@/api/invest/limitHistory'
|
||||
import { getBankcardLend } from '@/api/invest/bankcardlend'
|
||||
import { getDicts } from '@/api/system/dict/data.js'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import { reactive, toRefs, ref, computed } from 'vue'
|
||||
|
||||
const pageNum = ref(1)
|
||||
const listData = ref([])
|
||||
const isShow = ref(false)
|
||||
const status = ref('loadmore')
|
||||
const adjustTypeList = ref([])
|
||||
const bankCardLendId = ref('')
|
||||
const cardName = ref('')
|
||||
const cardInfo = ref({
|
||||
name: '',
|
||||
cardNumber: ''
|
||||
})
|
||||
|
||||
const pageTitle = computed(() => {
|
||||
return cardName.value ? `${cardName.value} - 调额记录` : '调额记录'
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
bankCardLendId: ''
|
||||
}
|
||||
})
|
||||
|
||||
const { queryParams } = toRefs(data)
|
||||
|
||||
onLoad((option) => {
|
||||
bankCardLendId.value = option.bankCardLendId
|
||||
cardName.value = option.name || ''
|
||||
queryParams.value.bankCardLendId = option.bankCardLendId
|
||||
getDict()
|
||||
getCardInfo()
|
||||
getList()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (status.value == 'loadmore') {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
function getList() {
|
||||
status.value = 'loading'
|
||||
listLimitHistory({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
|
||||
listData.value = listData.value.concat(res.rows)
|
||||
if (listData.value.length < res.total) {
|
||||
status.value = 'loadmore'
|
||||
} else {
|
||||
status.value = 'nomore'
|
||||
}
|
||||
}).catch(() => {
|
||||
status.value = 'nomore'
|
||||
})
|
||||
}
|
||||
|
||||
function getDict() {
|
||||
// 调整类型
|
||||
getDicts('adjust_type').then(res => {
|
||||
adjustTypeList.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
function getCardInfo() {
|
||||
getBankcardLend(bankCardLendId.value).then(res => {
|
||||
cardInfo.value.name = res.data.name || ''
|
||||
cardInfo.value.code = res.data.code || ''
|
||||
})
|
||||
}
|
||||
|
||||
function dictStr(val, arr) {
|
||||
let str = ''
|
||||
arr.map(item => {
|
||||
if (item.dictValue === val) {
|
||||
str = item.dictLabel
|
||||
}
|
||||
})
|
||||
return str
|
||||
}
|
||||
|
||||
function formatDate(dateTime) {
|
||||
if (!dateTime) return '--'
|
||||
// 只取日期部分 YYYY-MM-DD
|
||||
return dateTime.split(' ')[0]
|
||||
}
|
||||
|
||||
function enterDetails(item) {
|
||||
// 可以添加详情页面
|
||||
handleEdit(item)
|
||||
}
|
||||
|
||||
function handleEdit(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/work/base/debitCard/adjustLimit?id=${item.id}&bankCardLendId=${bankCardLendId.value}&name=${cardName.value}`
|
||||
})
|
||||
isShow.value = true
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/work/base/debitCard/adjustLimit?bankCardLendId=${bankCardLendId.value}&name=${cardName.value}`
|
||||
})
|
||||
isShow.value = true
|
||||
}
|
||||
|
||||
function handleDelete(item) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这条调额记录吗？',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#f5576c',
|
||||
cancelColor: '#909399',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
delLimitHistory(item.id).then(() => {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.container {
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
gap: 24rpx;
|
||||
|
||||
.card-info-header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.info-label {
|
||||
color: #667eea;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
gap: 16rpx;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.adjust-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.icon-up {
|
||||
background: rgba(82, 196, 26, 0.3);
|
||||
}
|
||||
|
||||
&.icon-down {
|
||||
background: rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.adjust-type {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.adjust-time {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 30rpx;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.adjust-amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.amount-up {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.amount-down {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 calc(50% - 12rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
|
||||
&.info-item-full {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
|
||||
&.orange {
|
||||
color: #fa8c16;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.info-item-full) .info-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16rpx 24rpx 24rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
padding: 0 24rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(245, 87, 108, 0.1);
|
||||
color: #f5576c;
|
||||
border: 1rpx solid rgba(245, 87, 108, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,688 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入账户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
</u--input>
|
||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
<view class="add-btn" @click="handleAdd()">
|
||||
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
|
||||
<text>新增</text>
|
||||
</view>
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
<view class="filter-title">储蓄账户类型</view>
|
||||
<view class="state-list">
|
||||
<view v-for="item in debitTypeList" :key="item.id" class="state-item"
|
||||
:class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn-reset" @click="resetQuery()">
|
||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
<view class="btn-confirm" @click="searchSubmit()">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</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" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.name }}</text>
|
||||
<text class="card-code" v-if="item.code">{{ item.code }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-section">
|
||||
<text class="balance-value"><text class="balance-label">余额</text>{{ item.balance }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item" v-if="dictStr(item.debitType, debitTypeList) || true">
|
||||
<text class="info-label">账户类型</text>
|
||||
<text class="info-value">{{ dictStr(item.debitType, debitTypeList) || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="dictStr(item.status, statusList) || true">
|
||||
<text class="info-label">账户状态</text>
|
||||
<text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.activationDate || true">
|
||||
<text class="info-label">开户日期</text>
|
||||
<text class="info-value">{{ item.activationDate || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.effectiveDate || true">
|
||||
<text class="info-label">有效期</text>
|
||||
<text class="info-value">{{ item.effectiveDate || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item info-item-full" v-if="item.openingBank || true">
|
||||
<text class="info-label">开户行</text>
|
||||
<text class="info-value">{{ item.openingBank || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item info-item-full" v-if="item.remark">
|
||||
<text class="info-label">备注</text>
|
||||
<text class="info-value">{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-limit" @click="handleLimitHistory(item)">
|
||||
<uni-icons type="list" size="16" color="#fa8c16"></uni-icons>
|
||||
<text>调额记录</text>
|
||||
</view>
|
||||
<view class="btn-edit" @click="handleEdit(item)">
|
||||
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
|
||||
<text>修改</text>
|
||||
</view>
|
||||
<view class="btn-delete" @click="handleDelete(item)">
|
||||
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view>
|
||||
</view>
|
||||
<u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||
</u-list>
|
||||
<u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
|
||||
@confirm="settingConfirm" @cancel="settingCancel"></u-picker>
|
||||
</view>
|
||||
<!-- 悬停按钮返回工作台-->
|
||||
<suspend></suspend>
|
||||
<refresh></refresh>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listBankcardLend,delBankcardLend} from '@/api/invest/bankcardlend'
|
||||
import { getDicts } from '@/api/system/dict/data.js'
|
||||
import {onLoad,onShow} from "@dcloudio/uni-app";
|
||||
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
|
||||
import {reactive ,toRefs,ref,computed }from "vue";
|
||||
const pageNum = ref(1)
|
||||
const listData = ref([])
|
||||
const isShow = ref(false)
|
||||
const status = ref('loadmore')
|
||||
const debitTypeList = ref([])
|
||||
const statusList = ref([])
|
||||
const settingPickShow = ref(false)
|
||||
const settingColumns = ref([])
|
||||
const data = reactive({
|
||||
filterPanel: false,
|
||||
queryParams: {
|
||||
name: null,
|
||||
type: '1',
|
||||
debitType: ''
|
||||
}
|
||||
})
|
||||
const { filterPanel, queryParams} = toRefs(data)
|
||||
const windowHeight = computed(() => {
|
||||
uni.getSystemInfoSync().windowHeight - 50
|
||||
})
|
||||
onLoad(() => {
|
||||
getDict()
|
||||
getList()
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value=[]
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
});
|
||||
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (status.value == 'loadmore') {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
function getList() {
|
||||
status.value = 'loading'
|
||||
listBankcardLend({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
|
||||
listData.value = listData.value.concat(res.rows)
|
||||
if (listData.value.length < res.total) {
|
||||
status.value = 'loadmore'
|
||||
} else {
|
||||
status.value = 'nomore'
|
||||
}
|
||||
}).catch(() => {
|
||||
status.value = 'nomore'
|
||||
})
|
||||
}
|
||||
function getDict() {
|
||||
// 类型
|
||||
getDicts('debit_type').then(res => {
|
||||
debitTypeList.value = res.data
|
||||
})
|
||||
// 账户状态
|
||||
getDicts('account_status').then(res => {
|
||||
statusList.value = res.data
|
||||
})
|
||||
}
|
||||
function settingConfirm(e) {
|
||||
queryParams.value.settingId = e.value[0].settingId
|
||||
queryParams.value.settingName = e.value[0].settingName
|
||||
settingPickShow.value = false
|
||||
}
|
||||
function settingCancel() {
|
||||
settingPickShow.value = false
|
||||
}
|
||||
function getStatusClass(status, statusText) {
|
||||
if (statusText && statusText.includes('正常')) {
|
||||
return 'status-normal'
|
||||
}
|
||||
if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
|
||||
return 'status-error'
|
||||
}
|
||||
return 'status-default'
|
||||
}
|
||||
|
||||
function dictStr(val, arr) {
|
||||
let str = ''
|
||||
arr.map(item => {
|
||||
if (item.dictValue === val) {
|
||||
str = item.dictLabel
|
||||
}
|
||||
})
|
||||
return str
|
||||
}
|
||||
|
||||
function formatCardCode(code) {
|
||||
if (!code) return ''
|
||||
// 去除所有空格和特殊字符
|
||||
const cleanCode = code.replace(/\s+/g, '')
|
||||
// 如果卡号长度小于等于4位，直接返回
|
||||
if (cleanCode.length <= 4) return code
|
||||
// 只显示后4位，前面用 XX 替代
|
||||
const suffix = cleanCode.substring(cleanCode.length - 4)
|
||||
return `${suffix}`
|
||||
}
|
||||
function selectStatus(item) {
|
||||
queryParams.value.debitType = item.dictValue
|
||||
debitTypeList.value.map(ele => {
|
||||
if (ele.dictValue == item.dictValue) {
|
||||
ele.selected = true
|
||||
Reflect.set(ele, 'selected', true)
|
||||
} else {
|
||||
Reflect.set(ele, 'selected', false)
|
||||
}
|
||||
})
|
||||
}
|
||||
function searchSubmit() {
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
filterPanel.value = false
|
||||
}
|
||||
function searchBlur() {
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
}
|
||||
function resetQuery() {
|
||||
queryParams.value.name = '',
|
||||
queryParams.value.debitType = '',
|
||||
queryParams.value.type = '1'
|
||||
debitTypeList.value.map(ele => {
|
||||
Reflect.set(ele, 'selected', false)
|
||||
})
|
||||
}
|
||||
function enterDetails(item) {
|
||||
uni.navigateTo({ url: `/pages/work/base/debitCard/details?id=${item.id}` })
|
||||
}
|
||||
function handleEdit(item) {
|
||||
uni.navigateTo({ url: `/pages/work/base/debitCard/addEdit?id=${item.id}` })
|
||||
isShow.value = true
|
||||
}
|
||||
function handleAdd() {
|
||||
uni.navigateTo({ url: `/pages/work/base/debitCard/addEdit` })
|
||||
isShow.value = true
|
||||
}
|
||||
function handleLimitHistory(item) {
|
||||
uni.navigateTo({ url: `/pages/work/base/debitCard/limitHistory?bankCardLendId=${item.id}&name=${item.name}` })
|
||||
isShow.value = true
|
||||
}
|
||||
function handleDelete(item) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这条记录吗？',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#f5576c',
|
||||
cancelColor: '#909399',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
delBankcardLend(item.id).then(() => {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.search-input {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
height: 66rpx !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 96rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
|
||||
.filter-panel-content {
|
||||
background-color: #ffffff;
|
||||
padding: 0 30rpx 30rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
.filter-title {
|
||||
color: #2c3e50;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
padding: 32rpx 0 24rpx 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 32rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 16rpx;
|
||||
|
||||
.state-item {
|
||||
padding: 0 32rpx;
|
||||
height: 68rpx;
|
||||
border: 2rpx solid #e8edf3;
|
||||
border-radius: 34rpx;
|
||||
text-align: center;
|
||||
line-height: 68rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: 2rpx solid transparent;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||
|
||||
.btn-reset,
|
||||
.btn-confirm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
text {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
flex: 1;
|
||||
background: #f5f7fa;
|
||||
border: 2rpx solid #dcdfe6;
|
||||
|
||||
text {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
flex: 1;
|
||||
background: #667eea;
|
||||
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||
border: none;
|
||||
|
||||
text {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.card-name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.balance-value {
|
||||
color: #fa8c16;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.balance-label {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 0;
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 calc(50% - 12rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
margin-bottom: -5rpx;
|
||||
|
||||
&.info-item-full {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
|
||||
&.status-normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-error {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.status-default {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.info-item-full) .info-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16rpx 24rpx 24rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
.btn-edit,
|
||||
.btn-limit,
|
||||
.btn-delete {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
padding: 0 24rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-limit {
|
||||
background: rgba(250, 140, 22, 0.1);
|
||||
color: #fa8c16;
|
||||
border: 1rpx solid rgba(250, 140, 22, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(245, 87, 108, 0.1);
|
||||
color: #f5576c;
|
||||
border: 1rpx solid rgba(245, 87, 108, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,979 +0,0 @@
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择信用卡" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
</view>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="star" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">使用率</div>
|
||||
<div class="num">{{ creditObj.creditBillRate }}<span>%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
|
||||
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">总额度</div>
|
||||
<div class="num">{{ creditObj.creditLimit }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
|
||||
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">已用额度</div>
|
||||
<div class="num">{{ creditObj.creditBalance}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
|
||||
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">可用额度</div>
|
||||
<div class="num">{{ creditObj.creditAvailableLimit }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
|
||||
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">信用卡总数</div>
|
||||
<div class="num">{{ creditObj.creditCardCount}}<span>张</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
|
||||
<uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">月平均账单金额</div>
|
||||
<div class="num">{{ creditObj.averageCreditBill }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
|
||||
<uni-icons type="list" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">累计账单金额</div>
|
||||
<div class="num">{{ creditObj.actualCreditBill}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<view class="section-title" v-show="listData.length>0">
|
||||
<view class="title-decorator"></view>
|
||||
<text class="title-text">信用卡账单统计</text>
|
||||
<view class="view-switch">
|
||||
<view
|
||||
:class="['switch-item', { 'active': viewMode === 'list' }]"
|
||||
@click="viewMode = 'list'"
|
||||
>
|
||||
<uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>列表</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['switch-item', { 'active': viewMode === 'line' }]"
|
||||
@click="viewMode = 'line'"
|
||||
>
|
||||
<uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>曲线图</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['switch-item', { 'active': viewMode === 'column' }]"
|
||||
@click="viewMode = 'column'"
|
||||
>
|
||||
<uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>柱状图</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
|
||||
<!-- 筛选面板 -->
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
<view class="filter-title">账单时间</view>
|
||||
<view class="selcet-content" style="padding: 0 24rpx">
|
||||
<u-input
|
||||
:disabled="true"
|
||||
:disabledColor="'#fff'"
|
||||
class="dateInput"
|
||||
border="surround"
|
||||
v-model="queryParams.startTime"
|
||||
placeholder="请选择开始时间"
|
||||
>
|
||||
<template v-slot:suffix>
|
||||
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
|
||||
</template>
|
||||
</u-input>
|
||||
<u-input
|
||||
:disabled="true"
|
||||
:disabledColor="'#fff'"
|
||||
class="dateInput"
|
||||
border="surround"
|
||||
v-model="queryParams.endTime"
|
||||
placeholder="请选择结束时间"
|
||||
>
|
||||
<template v-slot:suffix>
|
||||
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn-reset" @click="resetQuery()">
|
||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
<view class="btn-confirm" @click="searchSubmit()">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
|
||||
<!-- 日期选择器 -->
|
||||
<u-datetime-picker
|
||||
:closeOnClickOverlay="true"
|
||||
:show="timeShow"
|
||||
v-model="time"
|
||||
mode="year-month"
|
||||
@close="openOrCloseDate"
|
||||
@cancel="openOrCloseDate"
|
||||
@confirm="confirm"
|
||||
></u-datetime-picker>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
canvasId="creditBillLineChart"
|
||||
:chartData="chartData"
|
||||
:opts="lineChartOpts"
|
||||
:loadingType="1"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 柱状图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
|
||||
<qiun-data-charts
|
||||
type="column"
|
||||
canvasId="creditBillColumnChart"
|
||||
:chartData="chartData"
|
||||
:opts="columnChartOpts"
|
||||
:loadingType="1"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="720" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
<view class="header-left">
|
||||
<view class="time-badge">
|
||||
<uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
|
||||
<text>{{ item.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<text class="amount-label">账单金额：</text>
|
||||
<text class="amount-value">{{ item.value }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-body">
|
||||
<view class="detail-label">
|
||||
<uni-icons type="list" size="14" color="#667eea"></uni-icons>
|
||||
<text>账单明细</text>
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<text>{{ formatMultiLineData(item.detail) || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view>
|
||||
</view>
|
||||
</u-list>
|
||||
<u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
|
||||
@confirm="settingConfirm" @cancel="settingCancel"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
|
||||
@confirm="handleAccountConfirm"></u-picker>
|
||||
</view>
|
||||
<!-- 悬停按钮返回统计分析-->
|
||||
<statisticBtn></statisticBtn>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCreditAnalysis } from '@/api/invest/statisticAnalysis'
|
||||
import { getDicts } from '@/api/system/dict/data.js'
|
||||
import dayjs from 'dayjs'
|
||||
import { timeHandler } from '@/utils/common.ts'
|
||||
import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
import {onLoad,onShow} from "@dcloudio/uni-app";
|
||||
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
|
||||
import {reactive ,toRefs,ref,computed }from "vue";
|
||||
const pageNum = ref(1)
|
||||
const listData = ref([])
|
||||
const isShow = ref(false)
|
||||
const accountList = ref([])
|
||||
const accountTypeList = ref([])
|
||||
const settingPickShow = ref(false)
|
||||
const settingColumns = ref([])
|
||||
const showAccount = ref(false)
|
||||
const timeShow= ref(false)
|
||||
const time =ref( Number(new Date()))
|
||||
const flag= ref(true)
|
||||
const viewMode = ref('list') // 'list' 或 'chart'
|
||||
const creditObj = ref({
|
||||
clearedCount: '',
|
||||
clearedPrincipal: '',
|
||||
clearedTotal: '',
|
||||
totalInterest: '',
|
||||
historyList: []
|
||||
})
|
||||
const data = reactive({
|
||||
filterPanel: false,
|
||||
queryAccountParams: {
|
||||
pageNum: 1,
|
||||
type: '2',
|
||||
pageSize: 1000
|
||||
},
|
||||
queryParams: {
|
||||
type: 2,
|
||||
time: null,
|
||||
id: null
|
||||
}
|
||||
})
|
||||
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
dataPointShape: true,
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
boundaryGap: 'justify',
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
dashLength: 4,
|
||||
gridColor: '#EEEEEE',
|
||||
splitNumber: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
format: (val) => {
|
||||
if (val >= 10000) {
|
||||
return (val / 10000).toFixed(1) + 'w'
|
||||
}
|
||||
return val.toFixed(0)
|
||||
},
|
||||
data: [
|
||||
{
|
||||
min: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
line: {
|
||||
type: 'curve',
|
||||
width: 3,
|
||||
activeType: 'hollow',
|
||||
linearType: 'custom',
|
||||
linearOpacity: 0.2,
|
||||
onShadow: true,
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
if (listData.value && listData.value.length > 0) {
|
||||
const values = listData.value.map(item => parseFloat(item.value) || 0)
|
||||
const dataMin = Math.min(...values)
|
||||
const dataMax = Math.max(...values)
|
||||
|
||||
// 确保包含0轴
|
||||
minValue = Math.min(0, dataMin)
|
||||
maxValue = Math.max(0, dataMax)
|
||||
|
||||
// 给数据留出更大的上下空间
|
||||
const range = maxValue - minValue
|
||||
if (range > 0) {
|
||||
minValue = minValue - range * 0.1
|
||||
maxValue = maxValue + range * 0.2
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
boundaryGap: 'center',
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
dashLength: 4,
|
||||
gridColor: '#EEEEEE',
|
||||
splitNumber: 5,
|
||||
min: minValue,
|
||||
max: maxValue,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
showTitle: false,
|
||||
disabled: false,
|
||||
format: (val) => {
|
||||
const absVal = Math.abs(val)
|
||||
if (absVal >= 10000) {
|
||||
return (val / 10000).toFixed(1) + 'w'
|
||||
}
|
||||
return val.toFixed(0)
|
||||
}
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: 20,
|
||||
activeBgColor: '#764ba2',
|
||||
activeBgOpacity: 0.08,
|
||||
linearType: 'none',
|
||||
barBorderCircle: true,
|
||||
seriesGap: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 图表数据
|
||||
const chartData = computed(() => {
|
||||
if (!listData.value || listData.value.length === 0) {
|
||||
return {
|
||||
categories: [],
|
||||
series: []
|
||||
}
|
||||
}
|
||||
// 创建副本并反转数组，使时间从前往后排序
|
||||
const reversedData = [...listData.value].reverse()
|
||||
return {
|
||||
categories: reversedData.map(item => item.time || ''),
|
||||
series: [
|
||||
{
|
||||
name: '账单金额',
|
||||
data: reversedData.map(item => {
|
||||
const value = parseFloat(item.value)
|
||||
return isNaN(value) ? 0 : value
|
||||
}),
|
||||
color: (value) => {
|
||||
// 负数使用红色，正数使用蓝紫色
|
||||
return value < 0 ? '#ef4444' : '#667eea'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const windowHeight = computed(() => {
|
||||
uni.getSystemInfoSync().windowHeight - 50
|
||||
})
|
||||
onLoad(() => {
|
||||
getDict()
|
||||
getList()
|
||||
console.log('页面加载完成')
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value=[]
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
});
|
||||
|
||||
function formatMultiLineData(data) {
|
||||
if (data != null) {
|
||||
return data.replace(/<br\/>/g, '\n')
|
||||
}
|
||||
}
|
||||
function openOrCloseDate(data) {
|
||||
timeShow.value = !timeShow.value
|
||||
flag.value = data
|
||||
}
|
||||
function confirm(e) {
|
||||
const date = timeHandler(new Date(e.value), '-', ':')
|
||||
let formatValue = 'YYYY-MM'
|
||||
dayjs(date).format(formatValue)
|
||||
if (flag.value) {
|
||||
queryParams.value.startTime = dayjs(date).format(formatValue)
|
||||
} else {
|
||||
queryParams.value.endTime = dayjs(date).format(formatValue)
|
||||
}
|
||||
timeShow.value = false
|
||||
}
|
||||
function searchSubmit() {
|
||||
queryParams.value.time = queryParams.value.startTime+'-'+queryParams.value.endTime
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
filterPanel.value = false
|
||||
}
|
||||
function resetQuery() {
|
||||
queryParams.value.id = ''
|
||||
queryParams.value.type = 2
|
||||
queryParams.value.dataType = '2'
|
||||
let formatValue = 'YYYY-MM'
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
|
||||
const start = dayjs(end).add(-11, 'months')
|
||||
queryParams.value.startTime = dayjs(start).format(formatValue)
|
||||
queryParams.value.endTime = dayjs(end).format(formatValue)
|
||||
queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
|
||||
queryParams.value.accountName = ''
|
||||
}
|
||||
function getList() {
|
||||
getCreditAnalysis({...queryParams.value }).then(res => { creditObj.value = { ...res.data }
|
||||
listData.value = listData.value.concat(res.data.tableCreditBillList)
|
||||
console.log('listData:', listData.value)
|
||||
console.log('chartData:', chartData.value)
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
function getDict() {
|
||||
let formatValue = 'YYYY-MM'
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
|
||||
const start = dayjs(end).add(-11, 'months')
|
||||
queryParams.value.startTime = dayjs(start).format(formatValue)
|
||||
queryParams.value.endTime = dayjs(end).format(formatValue)
|
||||
queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
|
||||
listBankcardLend(queryAccountParams.value).then((response) => {
|
||||
accountList.value = [response.rows]
|
||||
})
|
||||
|
||||
}
|
||||
function settingConfirm(e) {
|
||||
queryParams.value.settingId = e.value[0].settingId
|
||||
queryParams.value.settingName = e.value[0].settingName
|
||||
settingPickShow.value = false
|
||||
}
|
||||
function settingCancel() {
|
||||
settingPickShow.value = false
|
||||
}
|
||||
function handleAccount() {
|
||||
if (accountList.value[0].length === 0) {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '信用卡为空 ', type: 'warning'
|
||||
})
|
||||
} else {
|
||||
showAccount.value = true
|
||||
}
|
||||
}
|
||||
function handleAccountConfirm(e) {
|
||||
queryParams.value.accountName = e.value[0].nameCode
|
||||
queryParams.value.id= e.value[0].id
|
||||
showAccount.value = false
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
}
|
||||
function handleAccountCancel() {
|
||||
queryParams.value.accountName = ''
|
||||
queryParams.value.id=''
|
||||
|
||||
showAccount.value = false
|
||||
listData.value = []
|
||||
getList()
|
||||
filterPanel.value = false
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
|
||||
.header-con {
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 0 16rpx 8rpx 16rpx;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
gap: 12rpx;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 16rpx;
|
||||
transition: all 0.3s ease;
|
||||
border: 2rpx solid #e8edf3;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-sum {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
color: #7f8c8d;
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #2c3e50;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
|
||||
span {
|
||||
font-size: 20rpx;
|
||||
color: #95a5a6;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 8rpx;
|
||||
display:float;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
|
||||
.title-decorator {
|
||||
width: 6rpx;
|
||||
height: 32rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
line-height: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.view-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
padding: 4rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.switch-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
text {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
width: calc(100% - 48rpx);
|
||||
height: 650rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.search-input {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
height: 66rpx !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 180rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
|
||||
.filter-panel-content {
|
||||
background-color: #ffffff;
|
||||
padding: 0 30rpx 30rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
.filter-title {
|
||||
color: #2c3e50;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
padding: 32rpx 0 24rpx 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 32rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 16rpx;
|
||||
|
||||
.state-item {
|
||||
padding: 0 32rpx;
|
||||
height: 68rpx;
|
||||
border: 2rpx solid #e8edf3;
|
||||
border-radius: 34rpx;
|
||||
text-align: center;
|
||||
line-height: 68rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: 2rpx solid transparent;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||
|
||||
.btn-reset,
|
||||
.btn-confirm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
text {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
flex: 1;
|
||||
background: #f5f7fa;
|
||||
border: 2rpx solid #dcdfe6;
|
||||
|
||||
text {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
flex: 1;
|
||||
background: #667eea;
|
||||
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||
border: none;
|
||||
|
||||
text {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 0 24rpx 16rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
|
||||
.time-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
|
||||
.amount-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-body {
|
||||
padding: 24rpx;
|
||||
|
||||
.detail-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
padding: 16rpx;
|
||||
background: #f8f9fb;
|
||||
border-radius: 12rpx;
|
||||
border-left: 4rpx solid #667eea;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
line-height: 1.8;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,219 +0,0 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
|
||||
<!-- 常用功能 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:accountDealRecord:list')">
|
||||
<text class="section-title">常用功能</text>
|
||||
</view>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:accountDealRecord:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in commonGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 账单管理 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:installmentHistory:list')">
|
||||
<text class="section-title">账单管理</text>
|
||||
</view>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:installmentHistory:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in billGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 记账管理 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:accounts:list')">
|
||||
<text class="section-title">记账管理</text>
|
||||
</view>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:accounts:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in accountGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 基础信息 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:bankcard:list')">
|
||||
<text class="section-title">基础信息</text>
|
||||
</view>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:bankcard:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in baseGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
|
||||
|
||||
// 也可以使用下面的方式
|
||||
import { ref } from "vue";
|
||||
const commonGridList=ref([
|
||||
{ path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart-filled', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'invest:heartJourney:list' },
|
||||
{ path: '/pages/work/accounts/accountDealRecord/list', text: '账户交易记录', icon: 'list', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:accountDealRecord:list' },
|
||||
{ path: '/pages/work/accounts/posadvice/list', text: 'POS刷卡推荐', icon: 'star-filled', color: 'linear-gradient(135deg, #d38cff 0%, #9d50bb 100%)', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/work/accounts/posTransferRecord/list', text: 'POS机刷卡记账', icon: 'checkmarkempty', color: 'linear-gradient(135deg, #17c0eb 0%, #f368e0 100%)', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/work/accounts/creditTransferRecord/list', text: '信用卡还款', icon: 'redo', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/work/accounts/investAccountDeal/list', text: '投资交易记录', icon: 'bars', color: 'linear-gradient(135deg, #00b4db 0%, #0083b0 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/accounts/investTransferRecord/list', text: '投资账户记账', icon: 'compose', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/accounts/debitTransferRecord/list', text: '储蓄账户转账', icon: 'loop', color: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', permission: 'invest:debitCard' },
|
||||
{ path: '/pages/work/bill/creditCardBill/list', text: '信用卡账单', icon: 'wallet-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:creditCardBill:list' },
|
||||
{ path: '/pages/work/bill/onlineLendHistory/list', text: '贷款账单', icon: 'calendar', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/bill/creditInstallmentHistory/list', text: '信用卡分期账单', icon: 'calendar-filled', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/work/bill/creditQueryRecord/list', text: '征信查询记录', icon: 'search', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', permission: 'invest:creditQueryRecord:list' }
|
||||
])
|
||||
const baseGridList=ref([
|
||||
{ path: '/pages/work/base/debitCard/list', text: '储蓄账户管理', icon: 'home-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:debitCard' },
|
||||
{ path: '/pages/work/base/creditCard/list', text: '信用卡管理', icon: 'vip-filled', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/work/base/lend/list', text: '借贷账户管理', icon: 'upload-filled', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/base/posmachine/list', text: 'pos机管理', icon: 'navigate-filled', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/work/base/financials/list', text: '理财账户管理', icon: 'star', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/base/stocks/list', text: '股票账户管理', icon: 'arrow-up', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/base/futures/list', text: '期货账户管理', icon: 'fire', color: 'linear-gradient(135deg, #fc5c65 0%, #fd79a8 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/product/productInfor/list', text: '商品信息', icon: 'gift-filled', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'invest:productInfor:list' }
|
||||
])
|
||||
const billGridList=ref([
|
||||
{ path: '/pages/work/bill/peopleLendHistory/list', text: '人情账单', icon: 'person-filled', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/bill/futuresBill/list', text: '期货账单', icon: 'chatboxes', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'invest:futureStocksBill:list' },
|
||||
{ path: '/pages/work/bill/stocksBill/list', text: '股票账单', icon: 'flag-filled', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', permission: 'invest:futureStocksBill:list' }
|
||||
])
|
||||
const accountGridList=ref([
|
||||
{ path: '/pages/work/accounts/accounts/list', text: '记账账户', icon: 'wallet', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'invest:accounts:list' },
|
||||
{ path: '/pages/work/accounts/lendTransferRecord/list', text: '借贷账户记账', icon: 'link', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/product/productPriceRecord/list', text: '物价记录', icon: 'cart-filled', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'invest:productPriceRecord:list' }
|
||||
])
|
||||
const heartJourneyGridList=ref([
|
||||
{ path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart', permission: 'invest:heartJourney:list' }
|
||||
])
|
||||
function navigateTo(path) {
|
||||
uni.navigateTo({
|
||||
url: path
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.work-container {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 12rpx 24rpx 8rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
position: relative;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.grid-body {
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.grid-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16rpx 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.grid-item:active .item-icon {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.item-text {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user