|
|
@@ -0,0 +1,650 @@
|
|
|
+<template>
|
|
|
+ <div class="read-package-page">
|
|
|
+ <!-- 顶部：日期范围 + 导出 -->
|
|
|
+ <div class="top-bar">
|
|
|
+ <div class="date-range-wrap">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="createTime"
|
|
|
+ type="daterange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始"
|
|
|
+ end-placeholder="结束"
|
|
|
+ size="medium"
|
|
|
+ class="date-picker"
|
|
|
+ @change="changeTime"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ class="btn-export"
|
|
|
+ :loading="exportLoading"
|
|
|
+ @click="handleExport"
|
|
|
+ >
|
|
|
+ <i class="el-icon-download" />
|
|
|
+ 导出数据
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 统计卡片 -->
|
|
|
+ <div class="stats-row">
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-header">
|
|
|
+ <i class="el-icon-time stat-icon" />
|
|
|
+ <span>今日消耗</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-value">¥{{ todayConsumptionFormatted }}</div>
|
|
|
+ <i class="el-icon-data-line stat-chart" />
|
|
|
+ </div>
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-header">
|
|
|
+ <i class="el-icon-wallet stat-icon" />
|
|
|
+ <span>余额</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-value">¥{{ balanceFormatted }}</div>
|
|
|
+ <el-button type="danger" round class="btn-recharge" @click="handleRecharge">
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ 充值
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <div class="table-card">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="fastGptPushTokenTotalList"
|
|
|
+ class="data-table"
|
|
|
+ :max-height="500"
|
|
|
+ >
|
|
|
+ <el-table-column label="耗费金额 (元)" prop="amount" align="left" min-width="140" />
|
|
|
+ <el-table-column label="时间" prop="createDate" align="center" min-width="160" />
|
|
|
+ <el-table-column label="操作" align="center" width="120" fixed="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-button type="text" size="small" @click="openDetail(row)">详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 每日消耗详情弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="'消耗详情 - ' + (detailDate || '')"
|
|
|
+ :visible.sync="detailVisible"
|
|
|
+ width="700px"
|
|
|
+ append-to-body
|
|
|
+ class="detail-dialog"
|
|
|
+ >
|
|
|
+ <el-table
|
|
|
+ v-loading="detailLoading"
|
|
|
+ :data="detailList"
|
|
|
+ border
|
|
|
+ size="small"
|
|
|
+ max-height="400"
|
|
|
+ >
|
|
|
+ <el-table-column label="公司名称" prop="companyName" align="left" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column label="耗费金额 (元)" prop="amount" align="right" width="120" />
|
|
|
+ <el-table-column label="时间" prop="createDate" align="center" width="160" />
|
|
|
+ </el-table>
|
|
|
+ <div v-if="!detailLoading && detailList.length === 0" class="detail-empty">暂无该日期的明细数据</div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" size="small" @click="detailVisible = false">关闭</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 充值红包弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="rechargeVisible"
|
|
|
+ width="480px"
|
|
|
+ append-to-body
|
|
|
+ custom-class="recharge-dialog"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @close="onRechargeClose"
|
|
|
+ >
|
|
|
+ <div slot="title" class="recharge-dialog-title">
|
|
|
+ <i class="el-icon-coin recharge-title-icon" />
|
|
|
+ <span>充值红包</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="rechargeForm" :model="rechargeForm" :rules="rechargeRules" label-position="top" class="recharge-form">
|
|
|
+ <div class="recharge-balance">当前余额 <strong>¥{{ balanceFormatted }}</strong></div>
|
|
|
+ <el-form-item label="充值金额" prop="money">
|
|
|
+ <div class="recharge-money-wrap">
|
|
|
+ <span class="recharge-money-prefix">¥</span>
|
|
|
+ <el-input
|
|
|
+ v-model.trim="rechargeForm.money"
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入金额"
|
|
|
+ class="recharge-money-input"
|
|
|
+ @input="onMoneyInput"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="recharge-money-tip">
|
|
|
+ <i class="el-icon-info" />
|
|
|
+ 最低充值 0.01 元
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="充值备注" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="rechargeForm.remark"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="选填，请输入备注"
|
|
|
+ maxlength="200"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="recharge-dialog-footer">
|
|
|
+ <el-button type="danger" round :loading="rechargeSubmitLoading" @click="submitRecharge">确定充值</el-button>
|
|
|
+ <el-button round @click="rechargeVisible = false">取消</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="recharge-trust">
|
|
|
+ <span><i class="el-icon-wallet" /> 企业网银</span>
|
|
|
+ <span><i class="el-icon-lock" /> 安全加密</span>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <div class="footer-note">
|
|
|
+ <i class="el-icon-filter" />
|
|
|
+ 数据范围受日期筛选影响
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import { getReadPackageTotal, exportReadPackageTotal, recharge } from '@/api/course/courseRedPacketLog'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'FastgptEventLogTotal',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ createTime: this.getDefaultTimeRange(),
|
|
|
+ loading: true,
|
|
|
+ exportLoading: false,
|
|
|
+ total: 0,
|
|
|
+ fastGptPushTokenTotalList: [],
|
|
|
+ /** 红包余额，来自列表接口 response.ext.redPackageMoney */
|
|
|
+ redPackageMoney: null,
|
|
|
+ detailVisible: false,
|
|
|
+ detailDate: '',
|
|
|
+ detailList: [],
|
|
|
+ detailLoading: false,
|
|
|
+ rechargeVisible: false,
|
|
|
+ rechargeForm: {
|
|
|
+ money: '',
|
|
|
+ remark: ''
|
|
|
+ },
|
|
|
+ rechargeSubmitLoading: false,
|
|
|
+ rechargeRules: {
|
|
|
+ money: [
|
|
|
+ { required: true, message: '请输入充值金额', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (value === '' || value === null || value === undefined) {
|
|
|
+ callback(new Error('请输入充值金额'))
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const num = Number(value)
|
|
|
+ if (isNaN(num) || num <= 0) {
|
|
|
+ callback(new Error('金额必须大于 0'))
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const str = String(value)
|
|
|
+ if (/^\d+(\.\d{1,2})?$/.test(str) || str === '') {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback(new Error('金额最多两位小数'))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ beginTime: null,
|
|
|
+ endTime: null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ todayConsumptionFormatted() {
|
|
|
+ const sum = this.computeTodayConsumption()
|
|
|
+ return sum.toLocaleString('zh-CN')
|
|
|
+ },
|
|
|
+ balanceFormatted() {
|
|
|
+ const n = this.redPackageMoney
|
|
|
+ if (n === null || n === undefined) return '--'
|
|
|
+ return Number(n).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.changeTime()
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDefaultTimeRange() {
|
|
|
+ const today = new Date()
|
|
|
+ const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
|
|
|
+ const startDate = new Date(endDate)
|
|
|
+ startDate.setDate(startDate.getDate() - 6)
|
|
|
+ const formatDate = (date) => {
|
|
|
+ const y = date.getFullYear()
|
|
|
+ const m = String(date.getMonth() + 1).padStart(2, '0')
|
|
|
+ const d = String(date.getDate()).padStart(2, '0')
|
|
|
+ return `${y}-${m}-${d}`
|
|
|
+ }
|
|
|
+ return [formatDate(startDate), formatDate(endDate)]
|
|
|
+ },
|
|
|
+
|
|
|
+ changeTime() {
|
|
|
+ if (this.createTime && this.createTime.length === 2) {
|
|
|
+ const startDate = new Date(this.createTime[0])
|
|
|
+ startDate.setHours(0, 0, 0, 0)
|
|
|
+ const endDate = new Date(this.createTime[1])
|
|
|
+ endDate.setHours(23, 59, 59, 999)
|
|
|
+ this.queryParams.beginTime = this.formatDateTimeForAPI(startDate)
|
|
|
+ this.queryParams.endTime = this.formatDateTimeForAPI(endDate)
|
|
|
+ this.queryParams.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.queryParams.beginTime = null
|
|
|
+ this.queryParams.endTime = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ formatDateTimeForAPI(date) {
|
|
|
+ if (!date) return null
|
|
|
+ const y = date.getFullYear()
|
|
|
+ const m = String(date.getMonth() + 1).padStart(2, '0')
|
|
|
+ const d = String(date.getDate()).padStart(2, '0')
|
|
|
+ const h = String(date.getHours()).padStart(2, '0')
|
|
|
+ const min = String(date.getMinutes()).padStart(2, '0')
|
|
|
+ const s = String(date.getSeconds()).padStart(2, '0')
|
|
|
+ return `${y}-${m}-${d} ${h}:${min}:${s}`
|
|
|
+ },
|
|
|
+
|
|
|
+ computeTodayConsumption() {
|
|
|
+ const today = new Date()
|
|
|
+ const todayStr = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0')
|
|
|
+ let sum = 0
|
|
|
+ this.fastGptPushTokenTotalList.forEach(row => {
|
|
|
+ const rowDate = (row.createDate || '').toString().trim().slice(0, 10)
|
|
|
+ if (rowDate === todayStr && row.amount != null) {
|
|
|
+ sum += Number(row.amount)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return sum
|
|
|
+ },
|
|
|
+
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ getReadPackageTotal(this.queryParams).then(response => {
|
|
|
+ this.fastGptPushTokenTotalList = response.rows || []
|
|
|
+ this.total = response.total || 0
|
|
|
+ if (response.ext && response.ext.redPackageMoney != null) {
|
|
|
+ this.redPackageMoney = response.ext.redPackageMoney
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleExport() {
|
|
|
+ this.$confirm('是否确认导出看课包消耗统计数据?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ const loadingInstance = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: '正在导出数据，请稍候...',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
+ this.exportLoading = true
|
|
|
+ exportReadPackageTotal({
|
|
|
+ beginTime: this.queryParams.beginTime,
|
|
|
+ endTime: this.queryParams.endTime
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ if (response && response.msg) {
|
|
|
+ this.download(response.msg)
|
|
|
+ } else {
|
|
|
+ this.$message.success('导出成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.error('导出失败')
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loadingInstance.close()
|
|
|
+ this.exportLoading = false
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.info('已取消导出')
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+handleRecharge() {
|
|
|
+ this.rechargeVisible = true
|
|
|
+ },
|
|
|
+
|
|
|
+ onRechargeClose() {
|
|
|
+ this.$refs.rechargeForm && this.$refs.rechargeForm.resetFields()
|
|
|
+ this.rechargeForm.remark = ''
|
|
|
+ },
|
|
|
+
|
|
|
+ onMoneyInput(val) {
|
|
|
+ if (val === '') return
|
|
|
+ const match = String(val).match(/^\d*\.?\d{0,2}/)
|
|
|
+ if (match) {
|
|
|
+ this.rechargeForm.money = match[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ submitRecharge() {
|
|
|
+ this.$refs.rechargeForm.validate(valid => {
|
|
|
+ if (!valid) return
|
|
|
+ const { money, remark } = this.rechargeForm
|
|
|
+ const amount = Number(money)
|
|
|
+ if (isNaN(amount) || amount <= 0) {
|
|
|
+ this.$message.warning('请输入有效的充值金额')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.rechargeSubmitLoading = true
|
|
|
+ recharge({
|
|
|
+ money: amount,
|
|
|
+ remark: (remark || '').trim() || undefined
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.rechargeVisible = false
|
|
|
+ this.getList()
|
|
|
+ this.msgSuccess(res.msg || '充值成功，余额已立即生效！')
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ const msg = (err && err.msg) || (err && err.response && err.response.data && err.response.data.msg) || (err && err.message) || '充值失败，请重试'
|
|
|
+ this.$message.error(msg)
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.rechargeSubmitLoading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ openDetail(row) {
|
|
|
+ const dateStr = (row.createDate || '').toString().trim().slice(0, 10)
|
|
|
+ if (!dateStr) {
|
|
|
+ this.$message.warning('该条记录无有效日期')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.detailDate = dateStr
|
|
|
+ this.detailVisible = true
|
|
|
+ this.detailList = []
|
|
|
+ this.fetchDetailList(dateStr)
|
|
|
+ },
|
|
|
+
|
|
|
+ fetchDetailList(dateStr) {
|
|
|
+ this.detailLoading = true
|
|
|
+ const start = dateStr + ' 00:00:00'
|
|
|
+ const end = dateStr + ' 23:59:59'
|
|
|
+ getReadPackageTotal({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 500,
|
|
|
+ beginTime: start,
|
|
|
+ endTime: end
|
|
|
+ }).then(response => {
|
|
|
+ this.detailList = response.rows || []
|
|
|
+ this.detailLoading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.detailLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ .read-package-page {
|
|
|
+ padding: 20px;
|
|
|
+ background: #f5f6f8;
|
|
|
+ min-height: calc(100vh - 84px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .date-picker {
|
|
|
+ width: 280px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-export {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #c03639;
|
|
|
+ color: #c03639;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #fef0f0;
|
|
|
+ border-color: #c03639;
|
|
|
+ color: #c03639;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-card {
|
|
|
+ flex: 1;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 24px;
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
|
|
+ position: relative;
|
|
|
+ min-height: 120px;
|
|
|
+
|
|
|
+ .stat-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ .stat-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-value {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-chart {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #409eff;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-recharge {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+ padding: 8px 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px;
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .data-table {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-table {
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ ::v-deep .el-table th {
|
|
|
+ background: #fafafa;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-note {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-empty {
|
|
|
+ text-align: center;
|
|
|
+ color: #909399;
|
|
|
+ padding: 24px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .recharge-dialog {
|
|
|
+ border-radius: 20px;
|
|
|
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge-dialog-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+
|
|
|
+ .recharge-title-icon {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #d82121;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge-form {
|
|
|
+ .recharge-balance {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ strong {
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge-money-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ background: #f4f7fa;
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .recharge-money-prefix {
|
|
|
+ padding: 0 16px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge-money-input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge-money-tip {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+
|
|
|
+ .el-icon-info {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge-dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 16px;
|
|
|
+ padding-top: 8px;
|
|
|
+
|
|
|
+ .el-button--danger {
|
|
|
+ background: #d82121;
|
|
|
+ border-color: #d82121;
|
|
|
+ padding: 10px 32px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #c71f1f;
|
|
|
+ border-color: #c71f1f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--default {
|
|
|
+ background: #f4f7fa;
|
|
|
+ border-color: #e4e7ed;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge-trust {
|
|
|
+ margin-top: 16px;
|
|
|
+ padding-top: 16px;
|
|
|
+ border-top: 1px solid #ebeef5;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 24px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+
|
|
|
+ i {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
