597 lines
24 KiB
Vue
597 lines
24 KiB
Vue
<template>
|
||
<div>
|
||
<list-layout>
|
||
<!-- 搜索区域 -->
|
||
<template #search>
|
||
<el-form :inline="true" :model="queryParams" label-width="100px">
|
||
<el-form-item label="礼金Key">
|
||
<el-input v-model="queryParams.giftCouponKey" placeholder="礼金批次ID" clearable size="small" @keyup.enter.native="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="商品SKU">
|
||
<el-input v-model="queryParams.skuId" placeholder="商品SKU ID" clearable size="small" @keyup.enter.native="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="商品名称">
|
||
<el-input v-model="queryParams.skuName" placeholder="商品名称" clearable size="small" @keyup.enter.native="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="类型">
|
||
<el-select v-model="queryParams.owner" placeholder="请选择" clearable size="small">
|
||
<el-option label="自营" value="g" />
|
||
<el-option label="POP" value="pop" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="过期状态">
|
||
<el-select v-model="queryParams.isExpired" placeholder="请选择" clearable size="small">
|
||
<el-option label="未过期" :value="0" />
|
||
<el-option label="已过期" :value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="创建时间">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="yyyy-MM-dd"
|
||
size="small"
|
||
range-separator="至"
|
||
@change="handleDateRangeChange"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||
<el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||
<el-button type="success" size="small" icon="el-icon-plus" @click="handleCreate">创建礼金</el-button>
|
||
<el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:giftcoupon:export']">导出</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
<!-- 统计信息卡片 -->
|
||
<template #statistics>
|
||
<el-row :gutter="20" style="margin-bottom: 20px;">
|
||
<el-col :span="8">
|
||
<el-card shadow="hover">
|
||
<div style="text-align: center;">
|
||
<div style="font-size: 24px; font-weight: bold; color: #409EFF;">{{ statistics.totalCount || 0 }}</div>
|
||
<div style="color: #909399; margin-top: 8px;">礼金批次总数</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card shadow="hover">
|
||
<div style="text-align: center;">
|
||
<div style="font-size: 24px; font-weight: bold; color: #67C23A;">{{ statistics.totalUseCount || 0 }}</div>
|
||
<div style="color: #909399; margin-top: 8px;">总使用次数</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card shadow="hover">
|
||
<div style="text-align: center;">
|
||
<div style="font-size: 24px; font-weight: bold; color: #E6A23C;">¥{{ formatMoney(statistics.totalOcsAmount || 0) }}</div>
|
||
<div style="color: #909399; margin-top: 8px;">总分摊金额</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
|
||
<!-- 表格区域 -->
|
||
<template #table>
|
||
<el-table :data="list" v-loading="loading" border stripe :default-sort="{prop: 'createTime', order: 'descending'}">
|
||
<el-table-column label="礼金Key" prop="giftCouponKey" width="180" sortable>
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<span style="margin-right: 8px;">{{ scope.row.giftCouponKey }}</span>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
icon="el-icon-copy-document"
|
||
@click="copyToClipboard(scope.row.giftCouponKey)"
|
||
title="复制礼金Key"
|
||
>
|
||
复制
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品SKU" prop="skuId" width="120" />
|
||
<el-table-column label="商品名称" prop="skuName" min-width="200" show-overflow-tooltip />
|
||
<el-table-column label="类型" prop="owner" width="80">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="scope.row.owner === 'g' ? 'success' : 'warning'">
|
||
{{ scope.row.owner === 'g' ? '自营' : 'POP' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="使用次数" prop="useCount" width="100" sortable />
|
||
<el-table-column label="总分摊金额" prop="totalOcsAmount" width="120" sortable>
|
||
<template slot-scope="scope">
|
||
¥{{ formatMoney(scope.row.totalOcsAmount || 0) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" prop="createTime" width="160" sortable>
|
||
<template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="过期时间" prop="expireTime" width="160">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.expireTime">{{ parseTime(scope.row.expireTime) }}</span>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="过期状态" prop="isExpired" width="100">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="scope.row.isExpired === 1 ? 'danger' : 'success'">
|
||
{{ scope.row.isExpired === 1 ? '已过期' : '未过期' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" fixed="right" width="120">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="mini" @click="handleDetail(scope.row)">
|
||
详情
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
|
||
<!-- 分页区域 -->
|
||
<template #pagination>
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
</template>
|
||
</list-layout>
|
||
|
||
<!-- 创建礼金对话框 -->
|
||
<el-dialog title="创建礼金" :visible.sync="createDialogVisible" width="500px" append-to-body>
|
||
<el-form :model="createForm" :rules="createRules" ref="createForm" label-width="120px">
|
||
<el-form-item label="商品链接/SKU" prop="materialUrl">
|
||
<el-input v-model="createForm.materialUrl" placeholder="请输入商品链接（如：https://item.jd.com/100012043978.html）或SKU ID（如：100012043978）" />
|
||
<div style="color: #909399; font-size: 12px; margin-top: 5px;">支持：京东商品链接或SKU ID（纯数字）</div>
|
||
</el-form-item>
|
||
<el-form-item label="商品名称" prop="skuName">
|
||
<el-input v-model="createForm.skuName" placeholder="商品名称（可选）" />
|
||
</el-form-item>
|
||
<el-form-item label="商品类型" prop="owner">
|
||
<el-radio-group v-model="createForm.owner">
|
||
<el-radio label="g">自营</el-radio>
|
||
<el-radio label="pop">POP</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="礼金金额(元)" prop="amount">
|
||
<el-input-number v-model="createForm.amount" :min="1" :max="50" :precision="2" :step="0.01" style="width: 100%" />
|
||
<div style="color: #909399; font-size: 12px; margin-top: 5px;">范围：1-50元（参考JD项目要求）</div>
|
||
</el-form-item>
|
||
<el-form-item label="礼金数量" prop="quantity">
|
||
<el-input-number v-model="createForm.quantity" :min="1" :max="100" style="width: 100%" />
|
||
<div style="color: #909399; font-size: 12px; margin-top: 5px;">范围：1-100</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="createDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" :loading="createLoading" @click="submitCreate">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 详情对话框 -->
|
||
<el-dialog title="礼金详情" :visible.sync="detailVisible" width="1000px" append-to-body>
|
||
<div v-if="detailData && detailData.giftCoupon">
|
||
<el-tabs v-model="activeDetailTab">
|
||
<el-tab-pane label="基本信息" name="info">
|
||
<el-descriptions :column="2" border style="margin-top: 20px;">
|
||
<el-descriptions-item label="礼金Key" :span="2">
|
||
<span style="margin-right: 10px;">{{ detailData.giftCoupon.giftCouponKey }}</span>
|
||
<el-button type="text" size="mini" icon="el-icon-copy-document" @click="copyToClipboard(detailData.giftCoupon.giftCouponKey)">复制</el-button>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="商品SKU">{{ detailData.giftCoupon.skuId }}</el-descriptions-item>
|
||
<el-descriptions-item label="商品名称" :span="2">{{ detailData.giftCoupon.skuName }}</el-descriptions-item>
|
||
<el-descriptions-item label="类型">
|
||
<el-tag :type="detailData.giftCoupon.owner === 'g' ? 'success' : 'warning'">
|
||
{{ detailData.giftCoupon.owner === 'g' ? '自营' : 'POP' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="使用次数">{{ detailData.giftCoupon.useCount }}</el-descriptions-item>
|
||
<el-descriptions-item label="总分摊金额">¥{{ formatMoney(detailData.giftCoupon.totalOcsAmount || 0) }}</el-descriptions-item>
|
||
<el-descriptions-item label="创建时间">{{ parseTime(detailData.giftCoupon.createTime) }}</el-descriptions-item>
|
||
<el-descriptions-item label="过期时间">
|
||
<span v-if="detailData.giftCoupon.expireTime">{{ parseTime(detailData.giftCoupon.expireTime) }}</span>
|
||
<span v-else>-</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="过期状态" :span="2">
|
||
<el-tag :type="detailData.giftCoupon.isExpired === 1 ? 'danger' : 'success'">
|
||
{{ detailData.giftCoupon.isExpired === 1 ? '已过期' : '未过期' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="关联订单" name="orders">
|
||
<el-table :data="detailData.orders || []" border style="margin-top: 20px;" max-height="400">
|
||
<el-table-column label="订单号" prop="orderId" width="200" />
|
||
<el-table-column label="商品名称" prop="skuName" min-width="200" show-overflow-tooltip />
|
||
<el-table-column label="商品SKU" prop="skuId" width="120" />
|
||
<el-table-column label="订单金额" prop="price" width="100">
|
||
<template slot-scope="scope">¥{{ formatMoney(scope.row.price || 0) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="礼金分摊" prop="giftCouponOcsAmount" width="100">
|
||
<template slot-scope="scope">¥{{ formatMoney(scope.row.giftCouponOcsAmount || 0) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="下单时间" prop="orderTime" width="160">
|
||
<template slot-scope="scope">{{ parseTime(scope.row.orderTime) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="短链" width="200">
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.positionId">
|
||
<a :href="getShortUrl(scope.row.positionId)" target="_blank" style="margin-right: 8px;">查看短链</a>
|
||
<el-button type="text" size="mini" icon="el-icon-copy-document" @click="copyToClipboard(getShortUrl(scope.row.positionId))">复制</el-button>
|
||
</div>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="!detailData.orders || detailData.orders.length === 0" style="text-align: center; padding: 40px; color: #909399;">
|
||
暂无关联订单
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="detailVisible = false">关 闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listGiftCoupons, getGiftCoupon, getGiftCouponStatistics, exportGiftCoupons } from '@/api/system/giftcoupon'
|
||
import { createGiftCoupon, transferWithGift } from '@/api/system/jdorder'
|
||
import ListLayout from '@/components/ListLayout'
|
||
import { parseTime } from '@/utils/ruoyi'
|
||
|
||
export default {
|
||
name: 'GiftCoupon',
|
||
components: {
|
||
ListLayout
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
list: [],
|
||
total: 0,
|
||
dateRange: [],
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 50,
|
||
giftCouponKey: undefined,
|
||
skuId: undefined,
|
||
skuName: undefined,
|
||
owner: undefined,
|
||
isExpired: undefined,
|
||
beginTime: null,
|
||
endTime: null
|
||
},
|
||
statistics: {
|
||
totalCount: 0,
|
||
totalUseCount: 0,
|
||
totalOcsAmount: 0
|
||
},
|
||
detailVisible: false,
|
||
detailData: null,
|
||
activeDetailTab: 'info',
|
||
createDialogVisible: false,
|
||
createLoading: false,
|
||
createForm: {
|
||
materialUrl: '',
|
||
skuName: '',
|
||
owner: 'g',
|
||
amount: null,
|
||
quantity: 10
|
||
},
|
||
createRules: {
|
||
materialUrl: [{ required: true, message: '请输入商品链接或SKU', trigger: 'blur' }],
|
||
amount: [{ required: true, message: '请输入礼金金额', trigger: 'blur' }],
|
||
quantity: [{ required: true, message: '请输入礼金数量', trigger: 'blur' }]
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
this.loadStatistics()
|
||
},
|
||
methods: {
|
||
/** 查询列表 */
|
||
getList() {
|
||
this.loading = true
|
||
listGiftCoupons(this.queryParams).then(res => {
|
||
this.list = (res.rows || res.data || [])
|
||
this.total = res.total || 0
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/** 加载统计信息 */
|
||
loadStatistics() {
|
||
const params = { ...this.queryParams }
|
||
// 统计信息不需要分页参数
|
||
delete params.pageNum
|
||
delete params.pageSize
|
||
getGiftCouponStatistics(params).then(res => {
|
||
if (res.code === 200 && res.data) {
|
||
this.statistics = {
|
||
totalCount: res.data.useCount || 0,
|
||
totalUseCount: res.data.useCount || 0,
|
||
totalOcsAmount: res.data.totalOcsAmount || 0
|
||
}
|
||
}
|
||
})
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1
|
||
this.getList()
|
||
this.loadStatistics()
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.dateRange = []
|
||
this.queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 50,
|
||
giftCouponKey: undefined,
|
||
skuId: undefined,
|
||
skuName: undefined,
|
||
owner: undefined,
|
||
isExpired: undefined,
|
||
beginTime: null,
|
||
endTime: null
|
||
}
|
||
this.handleQuery()
|
||
},
|
||
/** 处理日期范围变化 */
|
||
handleDateRangeChange(val) {
|
||
if (val && val.length === 2) {
|
||
this.queryParams.beginTime = val[0]
|
||
this.queryParams.endTime = val[1]
|
||
} else {
|
||
this.queryParams.beginTime = null
|
||
this.queryParams.endTime = null
|
||
}
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
const params = { ...this.queryParams }
|
||
this.$modal.confirm('是否确认导出所有礼金数据项？').then(() => {
|
||
this.exportLoading = true
|
||
return exportGiftCoupons(params)
|
||
}).then(response => {
|
||
this.$download.excel(response, '礼金数据.xlsx')
|
||
this.exportLoading = false
|
||
}).catch(() => {
|
||
this.exportLoading = false
|
||
})
|
||
},
|
||
/** 创建礼金 */
|
||
handleCreate() {
|
||
this.createForm = {
|
||
materialUrl: '',
|
||
skuName: '',
|
||
owner: 'g',
|
||
amount: null,
|
||
quantity: 10
|
||
}
|
||
this.createDialogVisible = true
|
||
},
|
||
/** 从链接中提取SKU ID */
|
||
extractSkuIdFromUrl(url) {
|
||
if (!url) return null
|
||
// 如果是纯数字，直接返回
|
||
if (/^\d+$/.test(url.trim())) {
|
||
return url.trim()
|
||
}
|
||
// 从URL中提取SKU ID
|
||
// 京东链接格式：https://item.jd.com/100012043978.html 或 jd.com/123456.html
|
||
const skuMatch = url.match(/(?:item\.jd\.com|jd\.com)\/(\d+)/i)
|
||
if (skuMatch && skuMatch[1]) {
|
||
return skuMatch[1]
|
||
}
|
||
// 如果包含skuId参数
|
||
const paramMatch = url.match(/[?&]skuId=(\d+)/i)
|
||
if (paramMatch && paramMatch[1]) {
|
||
return paramMatch[1]
|
||
}
|
||
// 无法提取，返回原链接（让后端处理）
|
||
return url.trim()
|
||
},
|
||
/** 提交创建礼金 */
|
||
async submitCreate() {
|
||
this.$refs.createForm.validate(async (valid) => {
|
||
if (!valid) return
|
||
|
||
// 金额校验：1-50元（参考JD项目中的isValidAmount方法）
|
||
if (!this.createForm.amount || this.createForm.amount < 1 || this.createForm.amount > 50) {
|
||
this.$modal.msgError('礼金金额必须在1-50元之间')
|
||
return
|
||
}
|
||
if (!this.createForm.quantity || this.createForm.quantity < 1 || this.createForm.quantity > 100) {
|
||
this.$modal.msgError('礼金数量必须在1-100之间')
|
||
return
|
||
}
|
||
|
||
// 提取SKU ID或使用materialUrl
|
||
const materialUrl = this.createForm.materialUrl.trim()
|
||
if (!materialUrl) {
|
||
this.$modal.msgError('请输入商品链接或SKU ID')
|
||
return
|
||
}
|
||
|
||
const skuId = this.extractSkuIdFromUrl(materialUrl)
|
||
const isUrl = skuId !== materialUrl
|
||
|
||
this.createLoading = true
|
||
try {
|
||
// 构建请求参数（参考JD项目的参数格式）
|
||
const params = {
|
||
amount: this.createForm.amount,
|
||
quantity: this.createForm.quantity,
|
||
owner: this.createForm.owner || 'g',
|
||
skuName: this.createForm.skuName || ''
|
||
}
|
||
|
||
// 根据提取结果设置skuId或materialUrl
|
||
if (isUrl && skuId) {
|
||
// 如果从URL中提取到了SKU ID，优先使用skuId
|
||
params.skuId = skuId
|
||
} else if (isUrl) {
|
||
// 如果提取不到SKU ID，使用原始URL
|
||
params.materialUrl = materialUrl
|
||
} else {
|
||
// 纯数字，作为SKU ID
|
||
params.skuId = skuId
|
||
}
|
||
|
||
// 调用创建礼金接口
|
||
const res = await createGiftCoupon(params)
|
||
|
||
if (res && res.code === 200) {
|
||
// 解析返回的giftCouponKey（参考xbmessage中的处理方式）
|
||
let giftKey = null
|
||
if (typeof res.data === 'string') {
|
||
giftKey = res.data
|
||
} else if (res.data) {
|
||
giftKey = res.data.giftCouponKey || res.data.giftKey || res.data.data?.giftCouponKey
|
||
}
|
||
|
||
if (giftKey) {
|
||
// 可选：自动生成短链（参考JD项目的完整流程）
|
||
try {
|
||
const transferParams = { materialUrl: materialUrl }
|
||
if (skuId && isUrl) {
|
||
transferParams.materialUrl = skuId
|
||
} else {
|
||
transferParams.materialUrl = materialUrl
|
||
}
|
||
transferParams.giftCouponKey = giftKey
|
||
|
||
const tf = await transferWithGift(transferParams)
|
||
if (tf && tf.code === 200) {
|
||
let shortUrl = ''
|
||
if (typeof tf.data === 'string') {
|
||
shortUrl = tf.data
|
||
} else if (tf.data && tf.data.shortURL) {
|
||
shortUrl = tf.data.shortURL
|
||
}
|
||
if (shortUrl) {
|
||
this.$modal.msgSuccess('礼金创建成功，短链已生成')
|
||
} else {
|
||
this.$modal.msgSuccess('礼金创建成功，礼金Key：' + giftKey)
|
||
}
|
||
} else {
|
||
this.$modal.msgSuccess('礼金创建成功，礼金Key：' + giftKey)
|
||
}
|
||
} catch (e) {
|
||
this.$modal.msgSuccess('礼金创建成功，礼金Key：' + giftKey)
|
||
}
|
||
} else {
|
||
this.$modal.msgWarning('礼金创建完成，但未返回礼金Key，请检查')
|
||
}
|
||
|
||
this.createDialogVisible = false
|
||
// 刷新列表和统计
|
||
this.getList()
|
||
this.loadStatistics()
|
||
} else {
|
||
// 错误处理
|
||
const errorMsg = res?.msg || res?.data?.msg || '创建失败'
|
||
this.$modal.msgError(errorMsg)
|
||
}
|
||
} catch (e) {
|
||
console.error('创建礼金失败', e)
|
||
this.$modal.msgError('创建失败：' + (e.message || e.msg || '未知错误'))
|
||
} finally {
|
||
this.createLoading = false
|
||
}
|
||
})
|
||
},
|
||
/** 查看详情 */
|
||
async handleDetail(row) {
|
||
this.activeDetailTab = 'info'
|
||
this.detailVisible = true
|
||
try {
|
||
const res = await getGiftCoupon(row.giftCouponKey)
|
||
if (res && res.code === 200) {
|
||
if (res.data.giftCoupon) {
|
||
this.detailData = res.data
|
||
} else {
|
||
// 兼容直接返回GiftCoupon对象的情况
|
||
this.detailData = {
|
||
giftCoupon: res.data,
|
||
orders: []
|
||
}
|
||
}
|
||
} else {
|
||
this.$modal.msgError('获取详情失败')
|
||
this.detailVisible = false
|
||
}
|
||
} catch (e) {
|
||
this.$modal.msgError('获取详情失败')
|
||
this.detailVisible = false
|
||
}
|
||
},
|
||
/** 生成短链URL */
|
||
getShortUrl(positionId) {
|
||
// 根据positionId生成短链，这里需要根据实际情况调整
|
||
if (!positionId) return ''
|
||
return `https://u.jd.com/${positionId}`
|
||
},
|
||
/** 复制到剪贴板 */
|
||
copyToClipboard(text) {
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
this.$modal.msgSuccess('复制成功')
|
||
}).catch(() => {
|
||
this.fallbackCopyToClipboard(text)
|
||
})
|
||
} else {
|
||
this.fallbackCopyToClipboard(text)
|
||
}
|
||
},
|
||
/** 降级复制方法 */
|
||
fallbackCopyToClipboard(text) {
|
||
const textArea = document.createElement('textarea')
|
||
textArea.value = text
|
||
textArea.style.position = 'fixed'
|
||
textArea.style.opacity = '0'
|
||
document.body.appendChild(textArea)
|
||
textArea.select()
|
||
try {
|
||
document.execCommand('copy')
|
||
this.$modal.msgSuccess('复制成功')
|
||
} catch (err) {
|
||
this.$modal.msgError('复制失败')
|
||
}
|
||
document.body.removeChild(textArea)
|
||
},
|
||
/** 格式化金额 */
|
||
formatMoney(amount) {
|
||
if (!amount) return '0.00'
|
||
return Number(amount).toFixed(2)
|
||
},
|
||
/** 格式化时间 */
|
||
parseTime
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-card {
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
|