lihui
1 month ago
5 changed files with 742 additions and 3 deletions
-
6src/router/index.js
-
2src/util/request.js
-
3src/utils/menuTreePermission.js
-
723src/views/refund/gold/addNewCoinRefund.vue
-
11src/views/refund/gold/coinRefund.vue
@ -0,0 +1,723 @@ |
|||
<script setup> |
|||
import {onMounted, reactive, ref, watch} from "vue"; |
|||
import {ElMessage} from "element-plus"; |
|||
import moment from "moment"; |
|||
import request from "@/util/http.js"; |
|||
import Cookies from 'js-cookie'; |
|||
import {useAdminStore} from "@/store/index.js"; |
|||
import {storeToRefs} from "pinia"; |
|||
import {WarnTriangleFilled} from "@element-plus/icons-vue"; |
|||
import dayjs from "dayjs"; |
|||
|
|||
const adminStore = useAdminStore(); |
|||
const { adminData, menuTree } = storeToRefs(adminStore); |
|||
|
|||
const addDisabled = ref(false); |
|||
|
|||
const user = ref({ |
|||
jwcode: null, |
|||
name: "", |
|||
market: "", |
|||
historySumGold: null, |
|||
historyPermanentGold: null, |
|||
historyFreeGold: null, |
|||
historyTaskGold: null, |
|||
rechargeNum: null, |
|||
consumeNum: null, |
|||
firstRecharge: "", |
|||
nowPermanentGold: null, |
|||
nowFreeJune: null, |
|||
nowTaskGold: null, |
|||
nowFreeDecember: null, |
|||
nowFreeGold: null, |
|||
nowSumGold: null |
|||
}); |
|||
|
|||
const addConsume = ref({ |
|||
jwcode: null, |
|||
goodsName: "金币退款", |
|||
sumGold: null, |
|||
freeGold: null, |
|||
permanentGold: null, |
|||
taskGold: null, |
|||
remark: "", |
|||
refundModel: null, |
|||
adminId: adminData.value.id, |
|||
adminName: adminData.value.adminName |
|||
}); |
|||
|
|||
const Ref = ref(null); |
|||
|
|||
const rules = reactive({ |
|||
jwcode: [ |
|||
{ required: true, message: "请输入精网号", trigger: "blur" }, |
|||
], |
|||
|
|||
permanentGold: [ |
|||
{ required: true, message: "请输入永久金币数", trigger: "blur" }, |
|||
{ |
|||
validator: (rule, value, callback) => { |
|||
if (value === null || value === undefined || !Number.isInteger(value) || value < 0) { |
|||
callback(new Error("永久金币必须为非负整数")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}, |
|||
trigger: "blur" |
|||
} |
|||
], |
|||
freeGold: [ |
|||
{ required: true, message: "请输入免费金币数", trigger: "blur" }, |
|||
{ |
|||
validator: (rule, value, callback) => { |
|||
if (value === null || value === undefined || !Number.isInteger(value) || value < 0) { |
|||
callback(new Error("免费金币必须为非负整数")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}, |
|||
trigger: "blur" |
|||
} |
|||
], |
|||
taskGold: [ |
|||
{ required: true, message: "请输入任务金币数", trigger: "blur" }, |
|||
{ |
|||
validator: (rule, value, callback) => { |
|||
if (value === null || value === undefined || !Number.isInteger(value) || value < 0) { |
|||
callback(new Error("任务金币必须为非负整数")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}, |
|||
trigger: "blur" |
|||
} |
|||
], |
|||
sumGold: [ |
|||
{ |
|||
validator: (rule, value, callback) => { |
|||
if ((value || 0) <= 0) { |
|||
callback(new Error("三类金币总数必须大于0")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}, |
|||
trigger: "blur" |
|||
} |
|||
] |
|||
}); |
|||
|
|||
// watch 三类金币变化，自动计算总和 |
|||
watch( |
|||
() => [addConsume.value.freeGold, addConsume.value.permanentGold, addConsume.value.taskGold], |
|||
([free, permanent, task]) => { |
|||
const sum = (parseInt(free) || 0) + (parseInt(permanent) || 0) + (parseInt(task) || 0); |
|||
addConsume.value.sumGold = sum; |
|||
}, |
|||
{ deep: true } |
|||
); |
|||
|
|||
// 提交前校验 sumGold > 0 |
|||
function validateInputToFreeGold() { |
|||
if (!user.value.jwcode) { |
|||
ElMessage.warning("请先查询用户信息"); |
|||
resetForm() |
|||
return false; |
|||
|
|||
} |
|||
|
|||
const { freeGold, permanentGold, taskGold, sumGold } = addConsume.value; |
|||
if(freeGold > user.value.nowFreeGold){ |
|||
ElMessage.warning("该用户免费金币不足，请重新输入！"); |
|||
addConsume.value.freeGold = null; |
|||
return |
|||
} |
|||
|
|||
return true; |
|||
} |
|||
|
|||
// 提交前校验 sumGold > 0 |
|||
function validateInputToPermanentGold() { |
|||
if (!user.value.jwcode) { |
|||
ElMessage.warning("请先查询用户信息"); |
|||
resetForm() |
|||
return false; |
|||
|
|||
} |
|||
const { freeGold, permanentGold, taskGold, sumGold } = addConsume.value; |
|||
if(permanentGold > user.value.nowPermanentGold){ |
|||
ElMessage.warning("该用户永久金币不足，请重新输入！"); |
|||
addConsume.value.permanentGold = null; |
|||
return |
|||
|
|||
} |
|||
|
|||
return true; |
|||
} |
|||
|
|||
// 提交前校验 sumGold > 0 |
|||
function validateInputToTaskGold() { |
|||
if (!user.value.jwcode) { |
|||
ElMessage.warning("请先查询用户信息"); |
|||
resetForm() |
|||
return false; |
|||
|
|||
} |
|||
const { freeGold, permanentGold, taskGold, sumGold } = addConsume.value; |
|||
if(taskGold > user.value.nowTaskGold){ |
|||
ElMessage.warning("该用户任务金币不足，请重新输入！"); |
|||
addConsume.value.taskGold = null; |
|||
return |
|||
|
|||
} |
|||
|
|||
|
|||
return true; |
|||
} |
|||
|
|||
|
|||
// 提交前校验 sumGold > 0 |
|||
function validateInputTOSumGold() { |
|||
if (!user.value.jwcode) { |
|||
ElMessage.warning("请先查询用户信息"); |
|||
resetForm() |
|||
return false; |
|||
|
|||
} |
|||
const { freeGold, permanentGold, taskGold, sumGold } = addConsume.value; |
|||
|
|||
if (sumGold <= 0) { |
|||
ElMessage.warning("三类金币总数必须大于0"); |
|||
resetForm() |
|||
return false; |
|||
} |
|||
|
|||
return true; |
|||
} |
|||
|
|||
// 充值对话框显示状态 |
|||
const ConsumeDialogVisible = ref(false); |
|||
|
|||
// 关闭对话框 |
|||
const ConsumeDialogVisiblehandleClose = () => { |
|||
ConsumeDialogVisible.value = false; |
|||
// 重置表单数据 |
|||
resetForm() |
|||
user.value = {} |
|||
}; |
|||
`` |
|||
// 确认使用cookie继续充值 |
|||
const ConsumeDialogVisibleContinue = () => { |
|||
ConsumeDialogVisible.value = false; |
|||
add(); |
|||
}; |
|||
|
|||
const ConsumeDialogVisibleCancel = () => { |
|||
ConsumeDialogVisible.value = false |
|||
resetForm() |
|||
user.value = {} |
|||
}; |
|||
|
|||
// 第一次弹窗 |
|||
// 充值对话框显示状态 |
|||
const FirstConsumeDialogVisible = ref(false); |
|||
|
|||
// 关闭对话框 |
|||
const FirstConsumeDialogVisiblehandleClose = () => { |
|||
FirstConsumeDialogVisible.value = false; |
|||
// 重置表单数据 |
|||
resetForm() |
|||
user.value = {} |
|||
}; |
|||
|
|||
// 第一次消耗 |
|||
const FirstConsumeDialogVisibleContinue = () => { |
|||
FirstConsumeDialogVisible.value = false; |
|||
add(); |
|||
}; |
|||
|
|||
const FirstConsumeDialogVisibleCancel = () => { |
|||
FirstConsumeDialogVisible.value = false |
|||
resetForm() |
|||
user.value = {} |
|||
}; |
|||
|
|||
// 查询商品列表 |
|||
const goods = ref([]); |
|||
|
|||
|
|||
// 用来写的 cookie 的 key |
|||
const WriteCookies = ref(null) |
|||
// 用来写的 cookie 的 value |
|||
const WriteCookiesTime = ref(null) |
|||
// 用来读的 cookie 的 key |
|||
const ReadCookies = ref(null) |
|||
// 用来读的 cookie 的 value |
|||
const ReadCookiesTime = ref(null) |
|||
|
|||
// 添加消费 |
|||
const add = async function () { |
|||
addDisabled.value = true; |
|||
|
|||
try { |
|||
const result = await request({ |
|||
url: "/consume/addRefund", |
|||
data: { |
|||
jwcode: addConsume.value.jwcode, |
|||
adminId: adminData.value.id, |
|||
sumGold: addConsume.value.sumGold , |
|||
freeGold: addConsume.value.freeGold , |
|||
taskGold: addConsume.value.taskGold , |
|||
permanentGold: addConsume.value.permanentGold, |
|||
remark: addConsume.value.remark, |
|||
adminName: adminData.value.adminName |
|||
} |
|||
}); |
|||
|
|||
//存一下 用户的jwcode |
|||
// 拼接 jwcode:permanentGold:freeGold |
|||
WriteCookies.value = `coinRefund:${addConsume.value.jwcode}:${addConsume.value.goodsName}` |
|||
//value 为当前消耗时间 |
|||
WriteCookiesTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); |
|||
// 设置cookies,用户jwcode为key，value也是jwcode，过期时间为1天 |
|||
Cookies.set(WriteCookies.value, WriteCookiesTime.value, { |
|||
expires: |
|||
1, path: '/' |
|||
}); |
|||
addDisabled.value = false; |
|||
|
|||
if (result.code === 200) { |
|||
ElMessage.success("添加成功"); |
|||
resetForm(); |
|||
} else { |
|||
ElMessage.error(result.msg || "添加失败"); |
|||
} |
|||
} catch (err) { |
|||
console.error(err); |
|||
ElMessage.error("添加失败，请检查网络"); |
|||
addDisabled.value = false; |
|||
} |
|||
}; |
|||
|
|||
// 重置表单 |
|||
function resetForm() { |
|||
Ref.value.resetFields(); |
|||
addConsume.value.sumGold = null; |
|||
addConsume.value.freeGold = null; |
|||
addConsume.value.permanentGold = null; |
|||
addConsume.value.taskGold = null; |
|||
addConsume.value.sumGold = null; |
|||
addConsume.value.remark = ""; |
|||
addConsume.value.jwcode = null; |
|||
|
|||
user.value = { |
|||
jwcode: null, |
|||
name: "", |
|||
market: "", |
|||
historySumGold: null, |
|||
historyPermanentGold: null, |
|||
historyFreeGold: null, |
|||
historyTaskGold: null, |
|||
rechargeNum: null, |
|||
consumeNum: null, |
|||
firstRecharge: "", |
|||
nowPermanentGold: null, |
|||
nowFreeJune: null, |
|||
nowTaskGold: null, |
|||
nowFreeDecember: null, |
|||
nowFreeGold: null, |
|||
nowSumGold: null |
|||
}; |
|||
} |
|||
|
|||
// 获取商品信息 |
|||
const getGoods = async function () { |
|||
try { |
|||
const result = await request({ url: "https://api.homilychart.com/live_mall/api/product/all" }); |
|||
goods.value = result.data.map(item => ({ id: item.id, label: item.name, value: item.name })); |
|||
} catch (err) { |
|||
console.error(err); |
|||
} |
|||
} |
|||
|
|||
// 添加前验证 |
|||
const addBefore = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
// 验证cookie |
|||
if (!valid) { |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}); |
|||
return; |
|||
} |
|||
// 手动校验 sumGold > 0 |
|||
if (!validateInputTOSumGold()) return; |
|||
|
|||
ReadCookies.value = `coinRefund:${addConsume.value.jwcode}:${addConsume.value.goodsName}` |
|||
// 获取cookie |
|||
const cookie = Cookies.get(ReadCookies.value) |
|||
console.log("cookie++++++++++++++++++++++", cookie) |
|||
console.log("time", WriteCookiesTime.value) |
|||
// 格式化时间 |
|||
ReadCookiesTime.value = moment(cookie).format('YYYY-MM-DD HH:mm:ss') |
|||
console.log("cookie========", cookie) |
|||
if (cookie) { |
|||
ConsumeDialogVisible.value = true; |
|||
} else { |
|||
FirstConsumeDialogVisible.value = true; |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 查询用户 |
|||
const getUser = async function (jwcode) { |
|||
if (!jwcode || !/^\d{1,9}$/.test(jwcode)) { |
|||
ElMessage.warning("精网号不能为空或格式不正确"); |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
const result = await request({ url: "/user/selectUser", data: { jwcode } }); |
|||
|
|||
if (result.code === 200 && result.data) { |
|||
user.value = { ...result.data }; |
|||
ElMessage.success("查询成功"); |
|||
} else { |
|||
ElMessage.warning(result.msg || "用户不存在"); |
|||
} |
|||
} catch (err) { |
|||
console.error(err); |
|||
ElMessage.error("查询失败，请检查网络或精网号"); |
|||
} |
|||
}; |
|||
|
|||
onMounted(async function () { |
|||
await getGoods(); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="father1"> |
|||
<div class="left"> |
|||
<el-form :model="addConsume" ref="Ref" :rules="rules" style="min-width: 420px;" class="add-form" |
|||
label-width="auto" label-position="right"> |
|||
<el-form-item prop="jwcode" label="精网号" style="margin-top: 50px"> |
|||
<el-input v-model="addConsume.jwcode" style="width: 200px;" /> |
|||
<el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 20px">查询 |
|||
</el-button> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="goodsName" label="商品名称" > |
|||
<el-input v-model="addConsume.goodsName" disabled style="width: 120px" /> |
|||
</el-form-item> |
|||
|
|||
<!-- 三类金币可编辑 --> |
|||
<el-form-item prop="permanentGold" label="永久金币"> |
|||
<el-input v-model.number="addConsume.permanentGold" style="width: 120px" @input="validateInputToPermanentGold()"/> |
|||
<p> 个</p> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="freeGold" label="免费金币"> |
|||
<el-input v-model.number="addConsume.freeGold" style="width: 120px" @input="validateInputToFreeGold()" /> |
|||
<p> 个</p> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="taskGold" label="任务金币"> |
|||
<el-input v-model.number="addConsume.taskGold" style="width: 120px" @input="validateInputToTaskGold()" /> |
|||
<p> 个</p> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="sumGold" label="消耗金币总数"> |
|||
<el-input v-model.number="addConsume.sumGold" style="width: 120px" disabled /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input v-model="addConsume.remark" style="width: 250px" :rows="4" maxlength="100" show-word-limit |
|||
type="textarea" /> |
|||
</el-form-item> |
|||
|
|||
<el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button> |
|||
<el-button type="primary" :disabled="addDisabled" @click="addBefore" style="margin-top:10px"> 提交</el-button> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="right"> |
|||
<!-- 客户信息栏 --> |
|||
<el-card v-if="user.jwcode" style="width: 800px; float: right" class="customer-info"> |
|||
<el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left"> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
|
|||
<!-- 第一行：姓名 + 历史金币 --> |
|||
<el-row style="margin-top: 20px"> |
|||
<el-col :span="9"> |
|||
<el-form-item label="姓名"> |
|||
<p>{{ user.name }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="当前金币总数" style="width: 500px"> |
|||
<span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{ |
|||
user.nowSumGold |
|||
}}</span> |
|||
</el-form-item> |
|||
<!-- 金币详情独立显示 --> |
|||
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 --> |
|||
<span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{ |
|||
user.nowPermanentGold |
|||
}}; |
|||
免费金币:{{ user.nowFreeGold }}; |
|||
任务金币:{{ user.nowTaskGold }})</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 第二行：精网号 + 当前金币（独立行） --> |
|||
<el-row> |
|||
<el-col :span="9"> |
|||
<el-form-item label="精网号"> |
|||
<p>{{ user.jwcode }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="消费次数"> |
|||
<p style="color: #2fa1ff">{{ user.consumeNum }} </p> |
|||
</el-form-item> |
|||
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 --> |
|||
<p style="font-size: small; color: #b1b1b1">(仅统计2025-01-01后的数据)</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 第三行：首次充值日期 + 充值次数 --> |
|||
<!-- <el-row > |
|||
<el-col :span="9"> |
|||
<el-form-item label="首次充值日期"> |
|||
<p v-if="user.firstRecharge"> |
|||
{{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
</el-row> --> |
|||
|
|||
<!-- 第四行：消费次数 + 所属门店 --> |
|||
<el-row> |
|||
<el-col :span="9"> |
|||
<el-form-item label="所属门店"> |
|||
<p>{{ user.market }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
|
|||
<el-dialog v-model="FirstConsumeDialogVisible" title="操作确认" :before-close="FirstConsumeDialogVisiblehandleClose" |
|||
:close-on-click-modal="false" width="480px"> |
|||
<!-- 内容整体居中且收窄 --> |
|||
<div class="confirm-body"> |
|||
<!-- 用户信息 --> |
|||
<div> |
|||
<div class="field-label">用户信息</div> |
|||
<el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled /> |
|||
</div> |
|||
<!-- 活动名称 --> |
|||
<div class="field"> |
|||
<div class="field-label">商品名称</div> |
|||
<el-input v-model="addConsume.goodsName" disabled /> |
|||
</div> |
|||
<!--金币总数 --> |
|||
<div class="field"> |
|||
<div class="field-label">金币总数</div> |
|||
<el-input v-model="addConsume.sumGold" disabled /> |
|||
</div> |
|||
<!-- 金币详细信息（同一行左右排列） --> |
|||
<el-row :gutter="20" class="coins-row"> |
|||
<el-col :span="8"> |
|||
<div class="field"> |
|||
<div class="field-label">永久金币</div> |
|||
<el-input v-model="addConsume.permanentGold" disabled /> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="field"> |
|||
<div class="field-label">免费金币</div> |
|||
<el-input v-model="addConsume.freeGold" disabled /> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="field"> |
|||
<div class="field-label">任务金币</div> |
|||
<el-input v-model="addConsume.taskGold" disabled /> |
|||
</div> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
|
|||
<div class="field"> |
|||
<div class="field-label">备注</div> |
|||
<el-input v-model="addConsume.remark" disabled /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部按钮（居中） --> |
|||
<template #footer> |
|||
<div class="dialog-footer-center"> |
|||
<el-button @click="FirstConsumeDialogVisibleCancel">取 消</el-button> |
|||
<el-button type="primary" @click="FirstConsumeDialogVisibleContinue">确认退款</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
|
|||
<el-dialog v-model="ConsumeDialogVisible" title="操作确认" :before-close="ConsumeDialogVisiblehandleClose" |
|||
:close-on-click-modal="false" width="480px"> |
|||
<!-- 内容整体居中且收窄 --> |
|||
<div class="confirm-body"> |
|||
<!-- 用户信息 --> |
|||
<div> |
|||
<div class="field-label">用户信息</div> |
|||
<el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled /> |
|||
</div> |
|||
<!-- 活动名称 --> |
|||
<div class="field"> |
|||
<div class="field-label">商品名称</div> |
|||
<el-input v-model="addConsume.goodsName" disabled /> |
|||
</div> |
|||
<!--金币总数 --> |
|||
<div class="field"> |
|||
<div class="field-label">金币总数</div> |
|||
<el-input v-model="addConsume.sumGold" disabled /> |
|||
</div> |
|||
<!-- 金币详细信息（同一行左右排列） --> |
|||
<el-row :gutter="20" class="coins-row"> |
|||
<el-col :span="8"> |
|||
<div class="field"> |
|||
<div class="field-label">永久金币</div> |
|||
<el-input v-model="addConsume.permanentGold" disabled /> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="field"> |
|||
<div class="field-label">免费金币</div> |
|||
<el-input v-model="addConsume.freeGold" disabled /> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="field"> |
|||
<div class="field-label">任务金币</div> |
|||
<el-input v-model="addConsume.taskGold" disabled /> |
|||
</div> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<!-- 风险提示 --> |
|||
<div style="display: flex; align-items: center; margin-top: 20px;"> |
|||
<el-icon :size="24" color="#FFD700"> |
|||
<WarnTriangleFilled /> |
|||
</el-icon> |
|||
<p>重复购买风险提示</p> |
|||
</div> |
|||
<!-- 记录 + 虚线分隔 --> |
|||
<div> |
|||
<el-divider border-style="dashed" /> |
|||
<p>检测到该用户近期有相似退款记录：</p> |
|||
· {{ ReadCookiesTime }} 退款 【{{ addConsume.goodsName }}】(操作人: {{ adminData.adminName }}) |
|||
</div> |
|||
<div style="margin-top: 10px"> |
|||
<p>是否继续操作？</p> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部按钮（居中） --> |
|||
<template #footer> |
|||
<div class="dialog-footer-center"> |
|||
<el-button @click="ConsumeDialogVisibleCancel">取 消</el-button> |
|||
<el-button type="primary" @click="ConsumeDialogVisibleContinue">确认退款</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<style scoped lang="scss"> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
|
|||
/* 上传图片的格式 */ |
|||
.avatar-uploader .avatar { |
|||
width: 50px; |
|||
height: 50px; |
|||
display: block; |
|||
} |
|||
|
|||
.add-form { |
|||
width: 400px; |
|||
float: left; |
|||
} |
|||
|
|||
/* 标题居中 */ |
|||
.el-dialog__header { |
|||
text-align: center; |
|||
} |
|||
|
|||
.confirm-body { |
|||
width: 350px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
/* 字段块与标签样式 */ |
|||
.field { |
|||
margin-bottom: 14px; |
|||
} |
|||
|
|||
.field-label { |
|||
font-size: 14px; |
|||
color: #606266; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
/* 金币行紧凑 */ |
|||
.coins-row .field { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
/* 底部按钮居中 */ |
|||
.dialog-footer-center { |
|||
display: flex; |
|||
justify-content: center; |
|||
gap: 12px; |
|||
} |
|||
|
|||
.father1 { |
|||
width: 82vw; |
|||
height: 80vh; |
|||
display: flex; |
|||
|
|||
.left { |
|||
width: 500px; |
|||
float: left; |
|||
display: flex; |
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
height: 50vh; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.customer-info { |
|||
width: 300px; |
|||
margin-left: 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue