<template>
|
<view class="recharge-page">
|
<PageHeader title="充值管理"
|
@back="goBack" />
|
|
<view class="hero">
|
<text class="hero-title">{{ card.cardNumber || "-" }}</text>
|
<view class="hero-balance">
|
<text class="hero-label">当前余额</text>
|
<text class="hero-value">{{ formatAmount(currentBalance) }}</text>
|
</view>
|
</view>
|
|
<view class="section">
|
<view class="section-header">
|
<text class="section-title">充值记录</text>
|
<up-button type="primary"
|
size="small"
|
text="新增充值"
|
@click="openForm" />
|
</view>
|
|
<view v-if="rechargeList.length === 0"
|
class="empty-text">
|
<text>暂无充值记录</text>
|
</view>
|
<view v-else
|
class="recharge-list">
|
<view v-for="row in rechargeList"
|
:key="row.id"
|
class="recharge-item">
|
<view class="recharge-main">
|
<text class="recharge-amount">+{{ Number(row.rechargeAmount || 0).toFixed(2) }}</text>
|
<text class="recharge-date">{{ row.rechargeDate || "-" }}</text>
|
</view>
|
<view class="recharge-meta">
|
<text v-if="row.createUserName"
|
class="recharge-user">{{ row.createUserName }}</text>
|
<text v-if="row.remark"
|
class="recharge-remark">{{ row.remark }}</text>
|
</view>
|
<view class="recharge-actions">
|
<up-button size="mini"
|
type="error"
|
plain
|
text="删除"
|
@click="handleDelete(row)" />
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<up-popup :show="showForm"
|
mode="bottom"
|
:round="16"
|
@close="showForm = false">
|
<view class="form-panel">
|
<view class="form-panel__header">
|
<text class="form-panel__title">新增充值</text>
|
<u-icon name="close"
|
size="20"
|
color="#909399"
|
@click="showForm = false"></u-icon>
|
</view>
|
<up-form ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="90"
|
input-align="right">
|
<up-form-item label="充值金额"
|
prop="rechargeAmount"
|
required>
|
<up-input v-model="form.rechargeAmount"
|
type="number"
|
placeholder="请输入充值金额"
|
clearable />
|
</up-form-item>
|
<up-form-item label="充值日期"
|
prop="rechargeDate"
|
required>
|
<up-input v-model="form.rechargeDate"
|
placeholder="请选择充值日期"
|
readonly
|
@click="showDatePicker = true" />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showDatePicker = true"></up-icon>
|
</template>
|
</up-form-item>
|
<up-form-item label="备注"
|
prop="remark">
|
<up-input v-model="form.remark"
|
placeholder="请输入备注"
|
clearable />
|
</up-form-item>
|
</up-form>
|
<view class="form-panel__footer">
|
<up-button class="form-panel__btn"
|
text="取消"
|
@click="showForm = false" />
|
<up-button class="form-panel__btn"
|
type="primary"
|
text="确定"
|
:loading="submitting"
|
@click="submitForm" />
|
</view>
|
</view>
|
</up-popup>
|
|
<up-datetime-picker :show="showDatePicker"
|
v-model="dateValue"
|
mode="datetime"
|
@confirm="onDateConfirm"
|
@cancel="showDatePicker = false" />
|
</view>
|
</template>
|
|
<script setup>
|
import { computed, ref } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import { unwrapList } from "@/utils/list";
|
import { parseTime } from "@/utils/ruoyi";
|
import {
|
addRecharge,
|
delRecharge,
|
listAllFuelCard,
|
listRecharge,
|
} from "@/api/inventoryManagement/vehicle";
|
|
const cardId = ref("");
|
const card = ref({});
|
const rechargeList = ref([]);
|
const showForm = ref(false);
|
const showDatePicker = ref(false);
|
const submitting = ref(false);
|
const formRef = ref();
|
const dateValue = ref(Date.now());
|
|
const form = ref({
|
cardId: "",
|
rechargeAmount: "",
|
rechargeDate: "",
|
remark: "",
|
});
|
|
const rules = {
|
rechargeAmount: [
|
{ required: true, message: "请输入充值金额", trigger: "blur" },
|
],
|
rechargeDate: [
|
{ required: true, message: "请选择充值日期", trigger: "change" },
|
],
|
};
|
|
// 余额由充值/加油记录在后端维护，前端只展示
|
const currentBalance = computed(() =>
|
card.value.currentBalance === undefined ? null : card.value.currentBalance
|
);
|
|
const goBack = () => uni.navigateBack();
|
|
const formatAmount = amount =>
|
amount === null || amount === undefined || amount === ""
|
? "-"
|
: `¥${Number(amount).toFixed(2)}`;
|
|
const loadCard = async () => {
|
const cached = uni.getStorageSync("fuelCardDetail");
|
if (cached && String(cached.id) === String(cardId.value)) {
|
card.value = cached;
|
}
|
try {
|
const res = await listAllFuelCard();
|
const rows = unwrapList(res);
|
const found = rows.find(item => String(item.id) === String(cardId.value));
|
if (found) card.value = found;
|
} catch (error) {
|
// 拉不到就沿用缓存
|
}
|
};
|
|
const loadRecharges = () => {
|
listRecharge({ current: -1, size: -1, cardId: cardId.value })
|
.then(res => {
|
rechargeList.value = unwrapList(res);
|
})
|
.catch(() => {
|
rechargeList.value = [];
|
});
|
};
|
|
const refresh = () => {
|
loadCard();
|
loadRecharges();
|
};
|
|
const openForm = () => {
|
form.value = {
|
cardId: cardId.value,
|
rechargeAmount: "",
|
rechargeDate: parseTime(Date.now()),
|
remark: "",
|
};
|
showForm.value = true;
|
};
|
|
const onDateConfirm = e => {
|
form.value.rechargeDate = parseTime(e.value);
|
showDatePicker.value = false;
|
};
|
|
const submitForm = async () => {
|
const valid = await formRef.value.validate().catch(() => false);
|
if (!valid) return;
|
submitting.value = true;
|
addRecharge({
|
...form.value,
|
rechargeAmount: Number(form.value.rechargeAmount || 0),
|
})
|
.then(() => {
|
uni.showToast({ title: "充值成功", icon: "success" });
|
showForm.value = false;
|
refresh();
|
})
|
.catch(() => {
|
uni.showToast({ title: "充值失败", icon: "none" });
|
})
|
.finally(() => {
|
submitting.value = false;
|
});
|
};
|
|
const handleDelete = row => {
|
if (!row?.id) return;
|
uni.showModal({
|
title: "删除确认",
|
content: "确认删除该笔充值记录吗？（删除后余额将自动扣回）",
|
success: res => {
|
if (!res.confirm) return;
|
delRecharge(row.id)
|
.then(() => {
|
uni.showToast({ title: "删除成功", icon: "success" });
|
refresh();
|
})
|
.catch(() => {
|
uni.showToast({ title: "删除失败", icon: "none" });
|
});
|
},
|
});
|
};
|
|
onLoad(options => {
|
cardId.value = options?.id || "";
|
refresh();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.recharge-page {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding: 12px 12px 24px;
|
}
|
|
.hero {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 18px;
|
border-radius: 16px;
|
background: linear-gradient(135deg, #eef6ff 0%, #ffffff 100%);
|
box-shadow: 0 6px 18px rgba(41, 121, 255, 0.08);
|
}
|
|
.hero-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #1f2d3d;
|
max-width: 55%;
|
word-break: break-all;
|
}
|
|
.hero-balance {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
}
|
|
.hero-label {
|
font-size: 12px;
|
color: #7a8599;
|
}
|
|
.hero-value {
|
font-size: 18px;
|
font-weight: 600;
|
color: #2979ff;
|
}
|
|
.section {
|
margin-top: 12px;
|
padding: 12px;
|
background: #ffffff;
|
border-radius: 12px;
|
box-shadow: 0 2px 10px rgba(15, 35, 95, 0.05);
|
}
|
|
.section-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.section-title {
|
font-size: 15px;
|
font-weight: 600;
|
color: #22324d;
|
}
|
|
.empty-text {
|
padding: 24px 0;
|
text-align: center;
|
font-size: 14px;
|
color: #909399;
|
}
|
|
.recharge-item {
|
padding: 12px 0;
|
border-bottom: 1px solid #f2f4f8;
|
}
|
|
.recharge-item:last-child {
|
border-bottom: none;
|
}
|
|
.recharge-main {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.recharge-amount {
|
font-size: 15px;
|
font-weight: 600;
|
color: #19be6b;
|
}
|
|
.recharge-date {
|
font-size: 12px;
|
color: #909399;
|
}
|
|
.recharge-meta {
|
display: flex;
|
gap: 12px;
|
margin-top: 4px;
|
}
|
|
.recharge-user,
|
.recharge-remark {
|
font-size: 12px;
|
color: #909399;
|
word-break: break-all;
|
}
|
|
.recharge-actions {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 8px;
|
}
|
|
.form-panel {
|
padding: 16px;
|
padding-bottom: calc(16px + env(safe-area-inset-bottom));
|
}
|
|
.form-panel__header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-bottom: 12px;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.form-panel__title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
.form-panel__footer {
|
display: flex;
|
gap: 12px;
|
padding-top: 16px;
|
}
|
|
.form-panel__btn {
|
flex: 1;
|
}
|
</style>
|
