You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
795 lines
24 KiB
795 lines
24 KiB
<script setup>
|
|
import {onMounted, reactive, ref, watch} from "vue";
|
|
import {ElIcon, ElMessage, ElMessageBox} from "element-plus";
|
|
import {Plus, WarnTriangleFilled} from '@element-plus/icons-vue'
|
|
|
|
import moment from "moment";
|
|
import request from "@/util/http.js"
|
|
import Cookies from 'js-cookie';
|
|
import dayjs from "dayjs";
|
|
// 精网号去空格
|
|
const trimJwCode = () => {
|
|
if (addConsume.value.jwcode) {
|
|
// 去除所有空格，并尝试转换为整数
|
|
const trimmed = addConsume.value.jwcode.toString().replace(/\s/g, '');
|
|
const numeric = Number(trimmed);
|
|
|
|
// 如果转换为数字成功，保存为数字，否则提示错误
|
|
if (!isNaN(numeric)) {
|
|
addConsume.value.jwcode = numeric;
|
|
} else {
|
|
ElMessage.error("精网号格式不正确，请输入数字");
|
|
}
|
|
}
|
|
}
|
|
//提交禁止重复点击
|
|
const addDisabled = ref(false)
|
|
/*
|
|
====================数据=================================
|
|
*/
|
|
//这是获取当前登录的用户信息
|
|
const adminData = ref({});
|
|
// 通过精网号查询用户（客户）信息 表单
|
|
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 是数字
|
|
jwcode: null, //精网号
|
|
goodsName: "",// 商品名称
|
|
sumGold: null, // 消费金币总数
|
|
freeGold: null, // 免费金币
|
|
permanentGold: null, // 永久金币
|
|
taskGold: null, // 任务金币
|
|
remark: "",//备注
|
|
adminId: null,// 当前管理员id
|
|
});
|
|
// 表单验证
|
|
const Ref = ref(null);
|
|
// 表单验证规则
|
|
const rules = reactive({
|
|
jwcode: [
|
|
{required: true, message: "请输入精网号", trigger: "blur"},
|
|
// { type: 'number', message: "精网号必须为数字", trigger: "blur" }
|
|
],
|
|
goodsName: [{required: true, message: "请选择商品", trigger: "blur"}],
|
|
sumGold: [
|
|
{required: true, message: "消耗金币总数不能为空", trigger: "blur"},
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
// 允许0开头的小数（如0.1）但不允许单独的0
|
|
const isValid = /^(0\.\d{1,2})|([1-9]\d*(\.\d{1,2})?)$/.test(value);
|
|
|
|
if (!isValid) {
|
|
callback(new Error("请输入大于0的正数（可包含最多两位小数）"));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: "blur"
|
|
}
|
|
]
|
|
});
|
|
// 查询商品的表单
|
|
const goods = ref([]);
|
|
|
|
/*
|
|
====================方法=================================
|
|
*/
|
|
const getAdminData = async function () {
|
|
try {//await 暂停函数执行，直到请求完成
|
|
const result = await request({
|
|
url: "/admin/userinfo",
|
|
data: {},
|
|
});
|
|
adminData.value = result;
|
|
addConsume.value.adminId = adminData.value.id;
|
|
|
|
addConsume.value.name = adminData.value.adminName;
|
|
|
|
console.log("请求成功", result);
|
|
console.log("用户信息", adminData.value);
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
}
|
|
};
|
|
|
|
|
|
// 输入验证函数
|
|
function validateInput() {
|
|
const sumGold = parseFloat(addConsume.value.sumGold);
|
|
trimJwCode();
|
|
|
|
if (user.value.jwcode == null) {
|
|
ElMessage.warning("请先查询用户信息");
|
|
addConsume.value.sumGold = null;
|
|
user.value = {};
|
|
return false;
|
|
}
|
|
|
|
/* 这块逻辑加到规则里面
|
|
// 验证金币数值
|
|
if (user.value.jwcode && (isNaN(sumGold) || sumGold <= 0)) {
|
|
ElMessage.warning("消费金币总数必须是大于0的数字");
|
|
// 将sumGold设置为null
|
|
addConsume.value.sumGold = null;
|
|
return false;
|
|
}
|
|
*/
|
|
// sumGold 补充0（比如.1 为0.1）
|
|
if (addConsume.value.sumGold && addConsume.value.sumGold.toString().startsWith('.')) {
|
|
addConsume.value.sumGold = '0' + addConsume.value.sumGold;
|
|
// ElMessage.info('已自动补充前导0');
|
|
}
|
|
// 验证金币不能为负数
|
|
if (sumGold < 0) {
|
|
ElMessage.warning("消耗金币总数不能为负数");
|
|
addConsume.value.sumGold = null;
|
|
return false;
|
|
}
|
|
|
|
// 小数位数限制 2位，整数位数限制 6位
|
|
if (addConsume.value.sumGold) {
|
|
const sumGoldStr = addConsume.value.sumGold.toString();
|
|
|
|
// 检查整数部分长度
|
|
if (sumGoldStr.includes('.')) {
|
|
const integerPart = sumGoldStr.split('.')[0];
|
|
if (integerPart.length > 6) {
|
|
// 截断整数部分到6位并提示
|
|
const truncatedInteger = integerPart.slice(0, 6);
|
|
addConsume.value.sumGold = parseFloat(truncatedInteger);
|
|
ElMessage.info('整数部分最多允许6位');
|
|
return; // 直接返回，不再处理小数部分
|
|
}
|
|
} else {
|
|
// 纯整数情况
|
|
if (sumGoldStr.length > 6) {
|
|
addConsume.value.sumGold = parseFloat(sumGoldStr.slice(0, 6));
|
|
ElMessage.info('整数部分最多允许6位');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 处理小数部分
|
|
if (sumGoldStr.includes('.')) {
|
|
const decimalPart = sumGoldStr.split('.')[1];
|
|
if (decimalPart.length > 2) {
|
|
// 截断到两位小数并提示
|
|
const truncatedValue = parseFloat(sumGoldStr.slice(0, sumGoldStr.indexOf('.') + 3));
|
|
addConsume.value.sumGold = truncatedValue;
|
|
ElMessage.info('最多允许输入两位小数');
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 验证金币总和
|
|
const totalAvailableGold = (user.value.nowSumGold)
|
|
if (user.value.jwcode && sumGold > totalAvailableGold) {
|
|
ElMessage.error("消耗金币总数超过可用金币总和");
|
|
// 将sumGold设置为null
|
|
addConsume.value.sumGold = null;
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
// 消耗金币计算函数
|
|
function calculateCoins(sumGold) {
|
|
console.log("消耗金币计算函数:计算金币", sumGold);
|
|
const parsedSumGold = parseFloat(sumGold);
|
|
if (isNaN(parsedSumGold) || parsedSumGold <= 0 || !user.value.jwcode) {
|
|
return {free: 0, permanent: 0, task: 0};
|
|
}
|
|
|
|
const {nowFreeGold, nowPermanentGold, nowTaskGold} = user.value;
|
|
let remaining = parsedSumGold;
|
|
let freeUsed = 0, permanentUsed = 0, taskUsed = 0;
|
|
|
|
// 优先消耗免费金币
|
|
if (nowFreeGold > 0) {
|
|
freeUsed = Math.min(parseFloat(nowFreeGold.toFixed(4)), remaining);
|
|
remaining = parseFloat((remaining - freeUsed).toFixed(4));
|
|
}
|
|
|
|
// 其次消耗永久金币
|
|
if (remaining > 0 && nowPermanentGold > 0) {
|
|
permanentUsed = Math.min(parseFloat(nowPermanentGold.toFixed(4)), remaining);
|
|
remaining = parseFloat((remaining - permanentUsed).toFixed(4));
|
|
}
|
|
|
|
// 最后消耗任务金币
|
|
if (remaining > 0 && nowTaskGold > 0) {
|
|
taskUsed = parseFloat(remaining.toFixed(4));
|
|
}
|
|
|
|
// 更新金币值
|
|
addConsume.value.freeGold = freeUsed;
|
|
addConsume.value.permanentGold = permanentUsed;
|
|
addConsume.value.taskGold = taskUsed;
|
|
|
|
return {free: freeUsed, permanent: permanentUsed, task: taskUsed};
|
|
}
|
|
|
|
// 用来写的 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 () {
|
|
try {
|
|
// 验证输入数据 再验证一次
|
|
if (!validateInput()) {
|
|
return;
|
|
}
|
|
// 计算金币使用情况
|
|
calculateCoins(addConsume.value.sumGold);
|
|
|
|
console.log("addConsume.value", addConsume.value)
|
|
//存一下 用户的jwcode
|
|
// 拼接 jwcode:permanentGold:freeGold
|
|
WriteCookies.value = `coinConsume:${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: '/'});
|
|
|
|
// 发送POST请求
|
|
addDisabled.value = true
|
|
const result = await request({
|
|
// url: "/consume/add",
|
|
url: "/consume/add",
|
|
data: {
|
|
...addConsume.value,
|
|
jwcode: addConsume.value.jwcode,
|
|
adminId: addConsume.value.adminId,
|
|
sumGold: addConsume.value.sumGold * 100,
|
|
freeGold: addConsume.value.freeGold * 100,
|
|
taskGold: addConsume.value.taskGold * 100,
|
|
permanentGold: addConsume.value.permanentGold * 100,
|
|
goodsName: addConsume.value.goodsName,
|
|
remark: addConsume.value.remark
|
|
}
|
|
});
|
|
addDisabled.value = false
|
|
console.log("add请求", result);
|
|
// 处理响应
|
|
handleResponse(result);
|
|
// 重置表单
|
|
resetForm();
|
|
|
|
} catch (error) {
|
|
console.error("请求失败", error);
|
|
ElMessage.error("添加失败，请检查网络连接或联系管理员");
|
|
}
|
|
};
|
|
|
|
// 响应处理函数
|
|
function handleResponse(result) {
|
|
console.log("响应结果", result)
|
|
if (result.code === 200) {
|
|
ElMessage.success("添加成功");
|
|
console.log("请求成功", result);
|
|
} else {
|
|
ElMessage.error(result.msg || "添加失败，未知错误");
|
|
}
|
|
}
|
|
|
|
// 重置表单函数
|
|
function resetForm() {
|
|
// 清空表单数据
|
|
addConsume.value = {
|
|
jwcode: null,
|
|
goodsName: "",
|
|
sumGold: null,
|
|
freeGold: null,
|
|
permanentGold: null,
|
|
taskGold: null,
|
|
remark: "",
|
|
adminId: adminData.value.id,
|
|
adminName: adminData.value.adminName,
|
|
};
|
|
|
|
console.log("重置表单")
|
|
|
|
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 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 proceedWithConsume = () => {
|
|
ElMessageBox.confirm('确认充值？')
|
|
.then(() => {
|
|
add();
|
|
console.log('添加成功');
|
|
})
|
|
.catch(() => {
|
|
console.log('取消添加');
|
|
});
|
|
};
|
|
|
|
// 添加前验证
|
|
const addBefore = () => {
|
|
Ref.value.validate(async (valid) => {
|
|
// 验证cookie
|
|
if (!valid) {
|
|
ElMessage({
|
|
type: 'error',
|
|
message: '请检查输入内容'
|
|
});
|
|
return;
|
|
}
|
|
ReadCookies.value = `coinConsume:${addConsume.value.jwcode}:${addConsume.value.goodsName}}`
|
|
// 获取cookie
|
|
const cookie = Cookies.get(ReadCookies.value)
|
|
console.log("time", WriteCookiesTime.value)
|
|
// 格式化时间
|
|
ReadCookiesTime.value = moment(cookie).format('YYYY-MM-DD HH:mm:ss')
|
|
if (cookie) {
|
|
ConsumeDialogVisible.value = true;
|
|
} else {
|
|
proceedWithConsume();
|
|
}
|
|
});
|
|
};
|
|
|
|
// 查询客户信息（通过精网号）
|
|
const getUser = async function (jwcode) {
|
|
try {
|
|
// 验证精网号
|
|
if (!jwcode) {
|
|
ElMessage.warning('精网号不能为空');
|
|
return;
|
|
}
|
|
|
|
// 验证精网号是否为数字
|
|
if (!/^\d{1,9}$/.test(jwcode)) {
|
|
ElMessage.warning('精网号必须为数字且不超过九位');
|
|
resetForm()
|
|
return;
|
|
}
|
|
|
|
// 发送POST请求
|
|
const result = await request({
|
|
url: "/user/selectUser",
|
|
data: {jwcode}
|
|
});
|
|
|
|
console.log("请求成功", result);
|
|
|
|
if (result.code === 200 && result.data) {
|
|
// 处理用户数据
|
|
user.value = {
|
|
...result.data,
|
|
// 统一处理所有黄金数值，除以100
|
|
nowPermanentGold: result.data.nowPermanentGold / 100,
|
|
nowFreeGold: result.data.nowFreeGold / 100,
|
|
nowSumGold: result.data.nowSumGold / 100,
|
|
nowTaskGold: result.data.nowTaskGold / 100,
|
|
nowFreeJune: result.data.nowFreeJune / 100,
|
|
nowFreeDecember: result.data.nowFreeDecember / 100,
|
|
historySumGold: result.data.historySumGold / 100,
|
|
historyPermanentGold: result.data.historyPermanentGold / 100,
|
|
historyFreeGold: result.data.historyFreeGold / 100,
|
|
historyTaskGold: result.data.historyTaskGold / 100
|
|
};
|
|
|
|
ElMessage.success("查询成功");
|
|
// 检查sumGold是否有值，如果有则重新计算金币分配
|
|
if (addConsume.value.sumGold) {
|
|
const parsedSumGold = parseFloat(addConsume.value.sumGold);
|
|
if (!isNaN(parsedSumGold) && parsedSumGold > 0) {
|
|
const {free, permanent, task} = calculateCoins(parsedSumGold);
|
|
addConsume.value.freeGold = free;
|
|
addConsume.value.permanentGold = permanent;
|
|
addConsume.value.taskGold = task;
|
|
}
|
|
}
|
|
// 验证输入
|
|
validateInput()
|
|
|
|
|
|
} else if (!result.data) {
|
|
ElMessage.warning("用户不存在");
|
|
user.value.jwcode = null
|
|
addConsume.value.jwcode = null
|
|
// resetForm(); // 重置表单
|
|
} else {
|
|
ElMessage.warning(result.msg || "请检查查询参数");
|
|
}
|
|
} catch (error) {
|
|
console.error("请求失败", error);
|
|
ElMessage.error("查询失败，请检查网络连接或精网号是否正确");
|
|
resetForm(); // 重置表单
|
|
}
|
|
};
|
|
// 获取商品信息(三楼接口)
|
|
const getGoods = async function () {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await request({
|
|
// url: "/product", //
|
|
// url: "http://39.101.133.168:8828/live_mall/api/product/all",
|
|
url: "https://api.homilychart.com/live_mall/api/product/all",
|
|
});
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("请求成功", result);
|
|
goods.value = result.data.map(item => ({
|
|
id: item.id,
|
|
label: item.name,
|
|
value: item.name
|
|
}));
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
|
|
/*
|
|
====================监听=================================
|
|
*/
|
|
|
|
// 监听消费总金额变化，自动计算三类金币
|
|
watch(
|
|
() => addConsume.value.sumGold,
|
|
(newValue) => {
|
|
const parsedNewValue = parseFloat(newValue);
|
|
if (!isNaN(parsedNewValue) && parsedNewValue > 0) {
|
|
const {free, permanent, task} = calculateCoins(parsedNewValue);
|
|
addConsume.value.freeGold = free;
|
|
addConsume.value.permanentGold = permanent;
|
|
addConsume.value.taskGold = task;
|
|
} else {
|
|
addConsume.value.freeGold = null;
|
|
addConsume.value.permanentGold = null;
|
|
addConsume.value.taskGold = null;
|
|
}
|
|
}
|
|
);
|
|
|
|
/*
|
|
====================挂载=================================
|
|
*/
|
|
// 挂载
|
|
onMounted(async function () {
|
|
await getAdminData();
|
|
await getGoods();
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<el-form :model="addConsume" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px;"
|
|
label-position="right" class="add-form">
|
|
<el-form-item prop="jwcode" label="精网号">
|
|
<el-input v-model="addConsume.jwcode" style="width: 200px"/>
|
|
<el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 10px">查询
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item prop="goodsName" label="商品名称">
|
|
<el-select v-model="addConsume.goodsName" placeholder="请选择商品" style="width: 200px">
|
|
<el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="sumGold" label="消耗金币总数">
|
|
<el-input v-model="addConsume.sumGold" style="width: 100px" @input="validateInput()"
|
|
@change="calculateCoins(addConsume.sumGold)"/>
|
|
</el-form-item>
|
|
|
|
<!-- 三类金币自动计算（禁用状态，不可编辑） -->
|
|
<el-form-item prop="permanentGold" label="永久金币">
|
|
<el-input v-model="addConsume.permanentGold" disabled style="width: 100px">
|
|
<template #default="scope">{{ scope.row.permanentGold }}</template>
|
|
</el-input>
|
|
<p style="margin-right: 0px"> 个</p>
|
|
</el-form-item>
|
|
<el-form-item prop="freeCoin" label="免费金币">
|
|
<el-input disabled v-model="addConsume.freeGold" style="width: 100px"/>
|
|
<p style="margin-right: 0px"> 个</p>
|
|
</el-form-item>
|
|
<el-form-item prop="taskGold" label="任务金币">
|
|
<el-input disabled v-model="addConsume.taskGold" style="width: 100px"/>
|
|
<p style="margin-right: 20px"> 个</p>
|
|
</el-form-item>
|
|
<el-form-item prop="remark" label="备注">
|
|
<el-input v-model="addConsume.remark" style="width: 300px" :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>
|
|
|
|
<!-- 客户信息栏 -->
|
|
<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="历史金币总数">
|
|
<!-- 检查 user.historySumGold 是否为有效的数字 -->
|
|
<p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">
|
|
{{ Number(user.historySumGold) }}
|
|
</p>
|
|
|
|
<!-- 如果不是有效的数字，显示默认值 -->
|
|
<p v-else></p>
|
|
</el-form-item>
|
|
<el-form-item style="margin-top: -23px">
|
|
<span style="display: inline; white-space: nowrap; color: #b1b1b1"
|
|
v-if="user.historyPermanentGold !== undefined">(永久金币:{{ user.historyPermanentGold }};免费金币:{{
|
|
(user.historyFreeGold)
|
|
}};任务金币:{{ user.historyTaskGold }})</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="当前金币总数" 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 style="margin-top:-23px">
|
|
<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-col :span="14">
|
|
<el-form-item label="充值次数">
|
|
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第四行：消费次数 + 所属门店 -->
|
|
<el-row>
|
|
<el-col :span="9">
|
|
<el-form-item label="消费次数">
|
|
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<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="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 v-else-if="activeTab === 'detail'"> -->
|
|
|
|
<!-- </div>
|
|
</div> -->
|
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
|
|
.add-form {
|
|
margin-top: 50px;
|
|
max-width: 50%;
|
|
float: left;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-left: 50px;
|
|
}
|
|
|
|
/* 上传图片的格式 */
|
|
.avatar-uploader .avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
display: block;
|
|
}
|
|
|
|
.customer-info {
|
|
max-width: 60%;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
/* 标题居中 */
|
|
.el-dialog__header {
|
|
text-align: center;
|
|
}
|
|
.confirm-body {
|
|
width: 420px;
|
|
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;
|
|
}
|
|
</style>
|