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

fix: 储蓄卡信用，新增调额记录功能。

Browse Source
This commit is contained in:
tianyongbao
2025-11-21 10:26:21 +08:00
parent af1f11b4cf
commit 76780aca82
8 changed files with 2056 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

505
src/pages/work/base/creditCard/adjustLimit.vue Normal file
View File

@@ -0,0 +1,505 @@
<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="limitTypeName" required @click="handleShowLimitType">
<u--input v-model="form.limitTypeName" 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="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" :required="isTemporary" @click="selectDeadlineDate">
<u--input v-model="form.deadlineDate" disabled disabledColor="#ffffff" :placeholder="isTemporary ? '请选择截止日期（必填）' : '请选择截止日期（可选）'"
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-picker itemHeight="88" :show="showLimitType" :columns="limitTypeList" keyName="dictLabel"
@cancel="handleLimitTypeCancel" @confirm="handleLimitTypeConfirm"></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 showLimitType = ref(false)
const effectDatePickShow = ref(false)
const deadlineDatePickShow = ref(false)
const adjustTimePickShow = ref(false)
const adjustTypeList = ref([])
const limitTypeList = ref([])
const data = reactive({
form: {
id: null,
name: '',
code: '',
bankCardLendId: null,
beforeLimit: '',
afterLimit: '',
adjustLimit: 0,
adjustType: '',
adjustTypeName: '',
type: '',
limitTypeName: '',
effectDate: '',
deadlineDate: '',
adjustTime: '',
remark: ''
},
rules: {
afterLimit: [
{ type: 'number', required: true, message: '调整后额度不能为空', trigger: ['change', 'blur'] }
],
adjustTypeName: [
{ type: 'string', required: true, message: '调整类型不能为空', trigger: ['change', 'blur'] }
],
limitTypeName: [
{ 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'
})
// 判断是否是临时额度
const isTemporary = computed(() => {
return form.value.type === '1'
})
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
}
}
})
// 调额类型
getDicts('limit_history_type').then(res => {
limitTypeList.value = [res.data]
})
}
function getLimitHistoryInfo() {
getLimitHistory(form.value.id).then(res => {
form.value = { ...form.value, ...res.data }
// 获取字典显示名称
if (form.value.adjustType) {
getDicts('adjust_type').then(result => {
form.value.adjustTypeName = dictStr(form.value.adjustType, result.data)
})
}
if (form.value.type) {
getDicts('limit_history_type').then(result => {
form.value.limitTypeName = dictStr(form.value.type, 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.creditLimit || 0
form.value.beforeLimit = limit
// 默认调整后额度与调整前一致
form.value.afterLimit = limit
})
}
}).catch(() => {
// 查询失败时，使用信用卡的当前额度
getBankcardLend(form.value.bankCardLendId).then(cardRes => {
const limit = cardRes.data.creditLimit || 0
form.value.beforeLimit = limit
// 默认调整后额度与调整前一致
form.value.afterLimit = limit
})
})
// 获取信用卡账号
getBankcardLend(form.value.bankCardLendId).then(res => {
form.value.code = res.data.code || ''
})
}
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 handleShowLimitType() {
if (limitTypeList.value[0].length === 0) {
proxy.$refs['uToast'].show({
message: '调额类型为空',
type: 'warning'
})
} else {
showLimitType.value = true
}
}
function handleLimitTypeConfirm(e) {
form.value.limitTypeName = e.value[0].dictLabel
form.value.type = e.value[0].dictValue
showLimitType.value = false
// 如果不是临时额度，清空截止日期
if (form.value.limitTypeName !== '临时额度') {
form.value.deadlineDate = ''
}
}
function handleLimitTypeCancel() {
showLimitType.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(() => {
// 如果是临时额度，检查截止日期是否填写
if (isTemporary.value && !form.value.deadlineDate) {
proxy.$refs['uToast'].show({
message: '临时额度必须填写截止日期',
type: 'error'
})
return
}
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;
}
}
}
</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>

495
src/pages/work/base/creditCard/limitHistory.vue Normal file
View File

@@ -0,0 +1,495 @@
<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.limitTypeName || dictStr(item.type, limitTypeList) || '--' }}</text>
</view>
<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 limitTypeList = ref([])
const bankCardLendId = ref('')
const cardName = ref('')
const cardInfo = ref({
name: '',
code: ''
})
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
})
// 调额类型
getDicts('limit_history_type').then(res => {
limitTypeList.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/creditCard/adjustLimit?id=${item.id}&bankCardLendId=${bankCardLendId.value}&name=${cardName.value}`
})
isShow.value = true
}
function handleAdd() {
uni.navigateTo({
url: `/pages/work/base/creditCard/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>

15
src/pages/work/base/creditCard/list.vue
View File

@@ -80,6 +80,10 @@
</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>
@@ -248,6 +252,10 @@ function formatCardCode(code) {
uni.navigateTo({ url: `/pages/work/base/creditCard/addEdit` })
isShow.value = true
}
function handleLimitHistory(item) {
uni.navigateTo({ url: `/pages/work/base/creditCard/limitHistory?bankCardLendId=${item.id}&name=${item.name}` })
isShow.value = true
}
function handleDelete(item) {
uni.showModal({
title: '确认删除',
@@ -553,6 +561,7 @@ page {
gap: 16rpx;
padding: 16rpx 24rpx 24rpx;
.btn-limit,
.btn-edit,
.btn-delete {
display: flex;
@@ -571,6 +580,12 @@ page {
}
}
.btn-limit {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border-color: rgba(250, 140, 22, 0.3);
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;

470
src/pages/work/base/debitCard/adjustLimit.vue Normal file
View File

@@ -0,0 +1,470 @@
<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>

486
src/pages/work/base/debitCard/limitHistory.vue Normal file
View File

@@ -0,0 +1,486 @@
<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>

15
src/pages/work/base/debitCard/list.vue
View File

@@ -84,6 +84,10 @@
</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>
@@ -254,6 +258,10 @@ function selectStatus(item) {
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: '确认删除',
@@ -640,6 +648,7 @@ page {
gap: 16rpx;
.btn-edit,
.btn-limit,
.btn-delete {
display: flex;
align-items: center;
@@ -663,6 +672,12 @@ page {
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;