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.
1140 lines
33 KiB
1140 lines
33 KiB
<script setup>
|
|
import { reactive } from "vue";
|
|
import { ref, computed, watch } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { Plus } from "@element-plus/icons-vue";
|
|
import axios from "axios";
|
|
import { ElMessageBox } from "element-plus";
|
|
import API from "../../api/index.js";
|
|
import moment from "moment";
|
|
|
|
// 这是添加上传图片的接口
|
|
const imageUrl = ref("");
|
|
const Rate = ref();
|
|
const adminData = ref({});
|
|
const getAdminData = async function () {
|
|
try {
|
|
const result = await API.post(
|
|
"http://192.168.8.93:10010/admin/userinfo",
|
|
{}
|
|
);
|
|
adminData.value = result;
|
|
addRecharge.value.adminId = adminData.value.adminId;
|
|
addRecharge.value.area = adminData.value.area;
|
|
console.log("请求成功", result);
|
|
console.log("用户信息", user.value);
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
}
|
|
};
|
|
getAdminData();
|
|
|
|
// 这是添加充值信息的表单
|
|
const addRecharge = ref({
|
|
rechargeVoucher: "",
|
|
rechargeWay: "客服充值",
|
|
freeGold: 0,
|
|
rechargeGold: 0,
|
|
paidGold: "",
|
|
});
|
|
// 这是添加充值信息的接口
|
|
const add = async function () {
|
|
try {
|
|
console.log("开始添加充值信息", addRecharge.value);
|
|
// 发送POST请求
|
|
const result = await API.post(
|
|
"http://192.168.8.93:10010/recharge/recharge/add",
|
|
addRecharge.value
|
|
);
|
|
if (result.code === 0) {
|
|
ElMessage.error("添加失败");
|
|
return;
|
|
}
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("请求成功", result);
|
|
// 显示成功消息
|
|
ElMessage.success("添加成功");
|
|
// 重置表单
|
|
addRecharge.value = {};
|
|
addRecharge.value.adminId = adminData.value.adminId;
|
|
addRecharge.value.area = adminData.value.area;
|
|
addRecharge.value.rechargeVoucher = "";
|
|
addRecharge.value.rechargeWay = "客服充值";
|
|
addRecharge.value.freeGold = 0;
|
|
addRecharge.value.rechargeGold = 1;
|
|
addRecharge.value.paidGold = "";
|
|
imageUrl.value = "";
|
|
Rate.value = null;
|
|
user.value = {};
|
|
// addRecharge.value.adminId = adminData.value.adminId;
|
|
// addRecharge.value.area = adminData.value.area;
|
|
// addRecharge.value.rechargeVoucher = "";
|
|
// addRecharge.value.rechargeWay = "客服充值";
|
|
// addRecharge.value.freeGold = 0;
|
|
// addRecharge.value.rechargeGold = 0;
|
|
// addRecharge.value.paidGold = "";
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
const addBefore = () => {
|
|
Ref.value.validate(async (valid) => {
|
|
if (valid) {
|
|
ElMessageBox.confirm("确认添加？")
|
|
.then(() => {
|
|
add();
|
|
console.log("添加成功");
|
|
})
|
|
.catch(() => {
|
|
console.log("取消添加");
|
|
});
|
|
} else {
|
|
//提示
|
|
ElMessage({
|
|
type: "error",
|
|
message: "请检查输入内容",
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 表单验证
|
|
// 开始时间改变时，重新验证结束时间
|
|
const Ref = ref(null);
|
|
|
|
const checkFreeGoldRadio = function (rule, value, callback) {
|
|
if (value == "0" || value == null || value == "") {
|
|
callback(new Error("请输入充值金币"));
|
|
} else if (value < 0 || isNaN(value)) {
|
|
callback(new Error("请输入正确的格式"));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
const rules = reactive({
|
|
jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }],
|
|
activityId: [{ required: true, message: "请选择活动名称", trigger: "blur" }],
|
|
paidGold: [{ validator: checkFreeGoldRadio, trigger: "blur" }],
|
|
rechargeGold: [
|
|
{ required: true, message: "请输入充值金额", trigger: "blur" },
|
|
],
|
|
payWay: [{ required: true, message: "请选择付款方式", trigger: "blur" }],
|
|
rechargeTime: [
|
|
{ required: true, message: "请选择交款时间", trigger: "blur" },
|
|
],
|
|
});
|
|
|
|
// 查找客户信息的方法
|
|
const user = ref({
|
|
firstRechargeTime: "",
|
|
});
|
|
const getUser = async function (jwcode) {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await API.post("http://192.168.8.93:10010/recharge/user", {
|
|
jwcode: jwcode,
|
|
});
|
|
|
|
console.log("请求成功", result);
|
|
|
|
user.value = result.data[0];
|
|
user.value.A =
|
|
Number(user.value.pendingRechargeTimes) +
|
|
Number(user.value.pendingSpendTimes);
|
|
console.log("用户信息", user.value);
|
|
console.log("用户信息", user.value.firstRechargeDate);
|
|
if (result.data.code === 0) {
|
|
ElMessage.error(result.msg);
|
|
} else {
|
|
ElMessage.success(result.msg);
|
|
}
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
ElMessage.error("查询失败，请检查精网号是否正确");
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
|
|
// 这是查询活动的接口
|
|
const activity = ref([]);
|
|
const getActivity = async function () {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await API.post(
|
|
"http://192.168.8.93:10010/recharge/activity/select",
|
|
{}
|
|
);
|
|
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("请求成功", result);
|
|
// 存储表格数据
|
|
activity.value = result.data;
|
|
console.log("活动信息", activity.value);
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
getActivity();
|
|
|
|
// 这是查询货币的接口
|
|
const currency = ref([]);
|
|
const getCurrency = async function () {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await API.post("http://192.168.8.93:10010/rates/search", {});
|
|
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("货币请求成功", result);
|
|
// 存储表格数据
|
|
currency.value = result.data;
|
|
console.log("tableData", currency.value);
|
|
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
getCurrency();
|
|
|
|
// 上传图片成功的回调函数
|
|
const handleAvatarSuccess = (response, uploadFile) => {
|
|
imageUrl.value = URL.createObjectURL(uploadFile.raw);
|
|
console.log("图片上传成功", response, uploadFile);
|
|
addRecharge.value.rechargeVoucher = `http://192.168.8.93:10010/upload/${response.data}`;
|
|
console.log("图片名称", addRecharge.value.rechargeVoucher);
|
|
// 将图片转换为 Base64 编码
|
|
// const reader = new FileReader();
|
|
// reader.onloadend = () => {
|
|
// const base64data = reader.result;
|
|
// const data = {
|
|
// rechargeVoucher: base64data,
|
|
// };
|
|
// 发送 JSON 对象到服务器
|
|
// axios
|
|
// .post("http://192.168.8.93:10010/upload",data)
|
|
// .then((res) => {
|
|
// console.log("图片上传成功", res);
|
|
// addRecharge.value.rechargeVoucher = `http://192.168.8.93:10010/upload/${response.data}`;
|
|
// console.log("图片名称", addRecharge.value.rechargeVoucher);
|
|
// })
|
|
// .catch((error) => {
|
|
// console.error("图片上传失败", error);
|
|
// });
|
|
};
|
|
// reader.readAsDataURL(uploadFile.raw);
|
|
// imageUrl.value = URL.createObjectURL(uploadFile.raw);
|
|
// console.log("图片上传成功", response, uploadFile);
|
|
|
|
// const handleAvatarSuccess = (response, uploadFile) => {
|
|
// // 将图片转换为 Base64 编码
|
|
// const reader = new FileReader();
|
|
// reader.onloadend = () => {
|
|
// const base64data = reader.result;
|
|
// const data = {
|
|
// rechargeVoucher: base64data,
|
|
// };
|
|
// console.log("图片名称", data);
|
|
// // 发送 JSON 对象到服务器
|
|
// API.post("http://192.168.8.93:10010/upload", {})
|
|
// .then((res) => {
|
|
// console.log("图片上传成功", res);
|
|
// addRecharge.value.rechargeVoucher = `http://192.168.8.93:10010/upload/${response.data}`;
|
|
// console.log("图片名称", addRecharge.value.rechargeVoucher);
|
|
// })
|
|
// .catch((error) => {
|
|
// console.error("图片上传失败", error);
|
|
// });
|
|
// };
|
|
// reader.readAsDataURL(uploadFile.raw);
|
|
// imageUrl.value = URL.createObjectURL(uploadFile.raw);
|
|
// console.log("图片上传成功", response, uploadFile);
|
|
// };
|
|
// 上传图片之前的校验函数
|
|
// const beforeAvatarUpload = (rawFile) => {
|
|
// if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
|
|
// ElMessage.error("图片格式必须为jpg或png!");
|
|
// return false;
|
|
// } else if (rawFile.size / 1024 / 1024 > 2) {
|
|
// ElMessage.error("Avatar picture size can not exceed 2MB!");
|
|
// return false;
|
|
// }
|
|
// return true;
|
|
// };
|
|
// const beforeAvatarUpload = (file) => {
|
|
// return new Promise((resolve, reject) => {
|
|
// const reader = new FileReader();
|
|
// reader.onload = (e) => {
|
|
// const base64Data = e.target.result;
|
|
// const imgData = {
|
|
// image: base64Data,
|
|
// fileName: file.name,
|
|
// };
|
|
// const formData = new FormData();
|
|
// formData.append("imageData", JSON.stringify(imgData));
|
|
|
|
// // 使用 fetch 或者 axios 发送 formData
|
|
// fetch("http://192.168.8.93:10010/upload", {
|
|
// method: "POST",
|
|
// body: formData,
|
|
// })
|
|
// .then((response) => response.json())
|
|
// .then((data) => {
|
|
// ElMessage.success("上传成功");
|
|
// resolve();
|
|
// })
|
|
// .catch((error) => {
|
|
// ElMessage.error("上传失败");
|
|
// reject();
|
|
// });
|
|
// };
|
|
// reader.readAsDataURL(file);
|
|
// });
|
|
// };
|
|
// const handleAvatarSuccess = (response, file, fileList) => {
|
|
// // 处理上传成功的逻辑
|
|
// imageUrl.value = URL.createObjectURL(file.raw);
|
|
// };
|
|
|
|
// const beforeAvatarUpload = (file) => {
|
|
// return new Promise((resolve, reject) => {
|
|
// const reader = new FileReader();
|
|
// reader.onload = (e) => {
|
|
// const base64Data = e.target.result;
|
|
// const imgData = {
|
|
// image: base64Data,
|
|
// fileName: file.name,
|
|
// };
|
|
// const formData = new FormData();
|
|
// formData.append("imageData", JSON.stringify(imgData));
|
|
// // 使用 fetch 或者 axios 发送 formData
|
|
// fetch("http://192.168.8.93:10010/upload", {
|
|
// method: "POST",
|
|
// body: formData,
|
|
// })
|
|
// .then((response) => response.json())
|
|
// .then((data) => {
|
|
// ElMessage.success("上传成功");
|
|
// resolve();
|
|
// })
|
|
// .catch((error) => {
|
|
// ElMessage.error("上传失败");
|
|
// reject();
|
|
// });
|
|
// };
|
|
// reader.readAsDataURL(file);
|
|
// });
|
|
// };
|
|
// const beforeAvatarUpload = (file) => {
|
|
// return new Promise((resolve, reject) => {
|
|
// const reader = new FileReader();
|
|
// reader.onload = (e) => {
|
|
// const base64Data = e.target.result;
|
|
// const imgData = {
|
|
// image: base64Data,
|
|
// fileName: file.name,
|
|
// };
|
|
// // 将 imgData 转换为 JSON 字符串
|
|
// const jsonData = JSON.stringify(imgData);
|
|
// // 使用 fetch 或者 axios 发送 JSON 数据
|
|
// fetch("http://192.168.8.93:10010/upload", {
|
|
// method: "POST",
|
|
// headers: {
|
|
// "Content-Type": "application/json", // 设置请求头为 JSON
|
|
// },
|
|
// body: jsonData, // 发送 JSON 字符串
|
|
// })
|
|
// .then((response) => response.json())
|
|
// .then((data) => {
|
|
// ElMessage.success("上传成功");
|
|
// resolve();
|
|
// })
|
|
// .catch((error) => {
|
|
// ElMessage.error("上传失败");
|
|
// reject();
|
|
// });
|
|
// };
|
|
// reader.readAsDataURL(file);
|
|
// });
|
|
// };
|
|
|
|
//充值方式条目
|
|
const options = [
|
|
{
|
|
value: "微信",
|
|
label: "微信",
|
|
},
|
|
{
|
|
value: "支付宝",
|
|
label: "支付宝",
|
|
},
|
|
{
|
|
value: "银联",
|
|
label: "银联",
|
|
},
|
|
{
|
|
value: "信用卡",
|
|
label: "信用卡",
|
|
},
|
|
{
|
|
value: "借记卡",
|
|
label: "借记卡",
|
|
},
|
|
{
|
|
value: "现金充值",
|
|
label: "现金充值",
|
|
},
|
|
];
|
|
|
|
//根据活动id获取汇率
|
|
const getActivityById = async function (row) {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await API.post(
|
|
"http://192.168.8.93:10010/recharge/activity/select",
|
|
{ activity: { activityId: row } }
|
|
);
|
|
addRecharge.value.rechargeRatio = result.data[0].rechargeRatio;
|
|
console.log("看看有了吗", result.value);
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
}
|
|
};
|
|
function handleActivityChange(value) {
|
|
// 在这里执行你的逻辑，例如获取选中的值
|
|
console.log("选中的值：", value);
|
|
getActivityById(value);
|
|
console.log("看看", addRecharge.value);
|
|
}
|
|
const calculatedFreeGold = computed(() => {
|
|
if (!addRecharge.value.activityId == 0) {
|
|
const paidGold = Number(addRecharge.value.paidGold) || 0;
|
|
const activityId = Number(addRecharge.value.rechargeRatio) || 1; // 避免除以0
|
|
console.log("看看有没拿到", addRecharge.value);
|
|
return Math.ceil(paidGold / activityId);
|
|
}
|
|
});
|
|
const calculatedRechargeGold = computed(() => {
|
|
if (!Rate.value == 0) {
|
|
const paidGold = Number(addRecharge.value.paidGold) || 0;
|
|
const rate = Number(Rate.value) || 1; // 避免乘以0
|
|
return Math.ceil(paidGold * rate);
|
|
}
|
|
});
|
|
|
|
watch(calculatedFreeGold, (newVal) => {
|
|
addRecharge.value.freeGold = Number(newVal);
|
|
});
|
|
|
|
watch(calculatedRechargeGold, (newVal) => {
|
|
addRecharge.value.rechargeGold = Number(newVal);
|
|
});
|
|
|
|
//这是重置重置表单的方法
|
|
const deleteRecharge = function () {
|
|
addRecharge.value = {
|
|
adminId: adminData.value.adminId,
|
|
area: adminData.value.area,
|
|
rechargeVoucher: "",
|
|
rechargeWay: "客服充值",
|
|
freeGold: Number(0),
|
|
rechargeGold: 0,
|
|
paidGold: "",
|
|
};
|
|
imageUrl.value = "";
|
|
};
|
|
|
|
// 批量充值
|
|
// 批量充值弹窗
|
|
const batchRechargeVisible = ref(false);
|
|
const i = ref(1);
|
|
const delObj = ref({});
|
|
const batchDelObj = ref([]);
|
|
const resetObj = ref({});
|
|
// 批量充值表格数据
|
|
const batchData = ref([
|
|
{
|
|
line: 1,
|
|
showInput: true,
|
|
},
|
|
]);
|
|
|
|
// 打开批量充值弹窗
|
|
const openBatchRechargeVisible = function () {
|
|
batchRechargeVisible.value = true;
|
|
};
|
|
// 关闭批量充值弹窗
|
|
const closeBatchRechargeVisible = function () {
|
|
batchRechargeVisible.value = false;
|
|
};
|
|
// 批量充值初始化
|
|
const batchInit = function () {
|
|
openBatchRechargeVisible();
|
|
};
|
|
//
|
|
const addLine = function () {
|
|
batchData.value.unshift({
|
|
line: ++i.value,
|
|
showInput: true,
|
|
});
|
|
};
|
|
//
|
|
const handleSelectionChangebatch = function (val) {
|
|
console.log("val===", val);
|
|
batchDelObj.value = val;
|
|
console.log("大傻春");
|
|
};
|
|
//
|
|
const batchDel = function () {
|
|
ElMessageBox.confirm("确认批量删除吗？", "批量删除", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
console.log("batchDel===", batchDelObj.value);
|
|
batchData.value = batchData.value.filter((itemA) => {
|
|
return !batchDelObj.value.some((itemB) => itemB.line == itemA.line);
|
|
});
|
|
console.log("batchData===", batchData.value);
|
|
ElMessage({
|
|
type: "success",
|
|
message: "操作成功",
|
|
});
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: "info",
|
|
message: "操作撤销",
|
|
});
|
|
});
|
|
};
|
|
//
|
|
const del = function (row) {
|
|
console.log("row===", row);
|
|
delObj.value.line = row.line;
|
|
};
|
|
const delConfirm = function () {
|
|
batchData.value = batchData.value.filter(
|
|
(item) => item.line != delObj.value.line
|
|
);
|
|
console.log("batchData===", batchData.value);
|
|
};
|
|
//
|
|
const reset = function (row) {
|
|
resetObj.value.line = row.line;
|
|
};
|
|
const resetConfirm = function () {
|
|
for (let i = 0; i < batchData.value.length; i++) {
|
|
if (batchData.value[i].line == resetObj.value.line) {
|
|
batchData.value[i] = {};
|
|
batchData.value[i].line = resetObj.value.line;
|
|
batchData.value[i].showInput = true;
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
//
|
|
const cancelBatch = function () {
|
|
ElMessageBox.confirm("确认取消吗？此操作将不会保存任何数据。", "确认取消", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
batchData.value = [{ line: 1, showInput: true }];
|
|
closeBatchRechargeVisible();
|
|
ElMessage({
|
|
type: "success",
|
|
message: "操作成功",
|
|
});
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: "info",
|
|
message: "操作撤销",
|
|
});
|
|
});
|
|
};
|
|
//
|
|
const calculatedRowFreeGold = function (row) {
|
|
console.log("row===", row);
|
|
let ratio = 0;
|
|
for (let i = 0; i < activity.value.length; i++) {
|
|
if (activity.value[i].activityId == row.activityId) {
|
|
ratio = activity.value[i].ratio;
|
|
break;
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < batchData.value.length; i++) {
|
|
if (batchData.value[i].line == row.line) {
|
|
if (ratio == 0) {
|
|
batchData.value[i].freeGold = 0;
|
|
} else {
|
|
const paidGold = Number(batchData.value[i].paidGold) || 0;
|
|
batchData.value[i].freeGold = Math.ceil(paidGold / ratio);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
const calculatedRowRechargeGold = computed(() => {
|
|
if (!Rate.value == 0) {
|
|
const paidGold = Number(addRecharge.value.paidGold) || 0;
|
|
const rate = Number(Rate.value) || 1; // 避免乘以0
|
|
return Math.ceil(paidGold * rate);
|
|
}
|
|
});
|
|
|
|
// watch(calculatedRowFreeGold, (newVal) => {
|
|
// addRecharge.value.freeGold = Number(newVal);
|
|
// });
|
|
|
|
watch(calculatedRowRechargeGold, (newVal) => {
|
|
addRecharge.value.rechargeGold = Number(newVal);
|
|
});
|
|
//
|
|
const batchAdd = function () {
|
|
console.log("batchData===", batchData.value);
|
|
if (batchData.value.length == 0) {
|
|
ElMessage({
|
|
type: "error",
|
|
message: "至少需要输入一条数据！",
|
|
});
|
|
return;
|
|
}
|
|
for (let i = 0; i < batchData.value.length; i++) {
|
|
batchData.value[i].adminId = adminData.value.adminId;
|
|
batchData.value[i].area = adminData.value.area;
|
|
batchData.value[i].rechargeWay = "客服充值";
|
|
if (
|
|
batchData.value[i].jwcode == "" ||
|
|
batchData.value[i].jwcode == null ||
|
|
batchData.value[i].activityId == "" ||
|
|
batchData.value[i].activityId == null ||
|
|
batchData.value[i].paidGold == "" ||
|
|
batchData.value[i].paidGold == null ||
|
|
batchData.value[i].rechargeGold == "" ||
|
|
batchData.value[i].rechargeGold == null ||
|
|
batchData.value[i].payWay == "" ||
|
|
batchData.value[i].payWay == null ||
|
|
batchData.value[i].rechargeTime == "" ||
|
|
batchData.value[i].rechargeTime == null
|
|
) {
|
|
ElMessage({
|
|
type: "error",
|
|
message: "信息不能为空！请检查输入内容！",
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
console.log("batchData===", batchData.value);
|
|
|
|
ElMessage({
|
|
type: "success",
|
|
message: "添加成功！",
|
|
});
|
|
|
|
closeBatchRechargeVisible();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div style="display: flex">
|
|
<div style="margin-right: 20px">新增充值</div>
|
|
<!-- <el-button type="primary" plain @click="batchInit()">批量充值</el-button> -->
|
|
</div>
|
|
|
|
<el-form
|
|
:model="addRecharge"
|
|
ref="Ref"
|
|
:rules="rules"
|
|
label-width="auto"
|
|
style="max-width: 600px"
|
|
class="add-form"
|
|
>
|
|
<el-form-item prop="jwcode" label="精网号">
|
|
<el-input v-model="addRecharge.jwcode" style="width: 220px" />
|
|
<el-button
|
|
type="primary"
|
|
@click="getUser(addRecharge.jwcode)"
|
|
style="margin-left: 20px"
|
|
>查询</el-button
|
|
>
|
|
</el-form-item>
|
|
<el-form-item prop="activityId" label="活动名称">
|
|
<el-select
|
|
v-model="addRecharge.activityId"
|
|
placeholder="请选择"
|
|
style="width: 300px"
|
|
@change="handleActivityChange"
|
|
>
|
|
<el-option
|
|
v-for="item in activity"
|
|
:key="item.value"
|
|
:label="item.activityName"
|
|
:value="item.activityId"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="paidGold" label="充值金币">
|
|
<el-input v-model="addRecharge.paidGold" style="width: 100px" />
|
|
<p style="margin-right: 20px">个</p>
|
|
<p>免费金币</p>
|
|
<el-input v-model="addRecharge.freeGold" disabled style="width: 100px" />
|
|
<p>个</p>
|
|
</el-form-item>
|
|
<el-form-item prop="rechargeGold" label="充值金额">
|
|
<el-select
|
|
prop="rechargeGold"
|
|
v-model="Rate"
|
|
placeholder="货币名称"
|
|
style="width: 95px; margin-right: 5px"
|
|
>
|
|
<el-option
|
|
v-for="item in currency"
|
|
:key="item.value"
|
|
:label="item.currency"
|
|
:value="item.exchangeRate"
|
|
/>
|
|
</el-select>
|
|
<el-input
|
|
disabled
|
|
v-model="addRecharge.rechargeGold"
|
|
style="width: 200px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="payWay" label="收款方式">
|
|
<el-select
|
|
v-model="addRecharge.payWay"
|
|
placeholder="请选择"
|
|
style="width: 300px"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="rechargeTime" label="交款时间">
|
|
<el-date-picker
|
|
v-model="addRecharge.rechargeTime"
|
|
type="date"
|
|
style="width: 300px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
prop="rechargeVoucher"
|
|
label="交款凭证"
|
|
style="margin-bottom: 5px"
|
|
>
|
|
<el-upload
|
|
action="http://192.168.8.93:10010/upload"
|
|
class="avatar-uploader"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
style="width: 100px; height: 115px"
|
|
>
|
|
<img
|
|
v-if="imageUrl"
|
|
:src="imageUrl"
|
|
class="avatar"
|
|
style="width: 100px; height: 115px"
|
|
/>
|
|
<el-icon
|
|
v-else
|
|
class="avatar-uploader-icon"
|
|
style="width: 100px; height: 100px"
|
|
>
|
|
<Plus />
|
|
</el-icon>
|
|
</el-upload>
|
|
<p style="margin-left: 10px; color: rgb(177, 176, 176)">
|
|
仅支持.jpg .png格式，文件≤1MB
|
|
</p>
|
|
</el-form-item>
|
|
<el-form-item prop="remark" label="备注">
|
|
<el-input
|
|
v-model="addRecharge.remark"
|
|
style="width: 300px"
|
|
:rows="2"
|
|
maxlength="100"
|
|
show-word-limit
|
|
type="textarea"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="submitter" label="提交人">
|
|
<el-input
|
|
style="width: 300px"
|
|
:value="adminData.name"
|
|
disabled
|
|
placeholder="提交人姓名"
|
|
/>
|
|
</el-form-item>
|
|
<el-button @click="deleteRecharge" style="margin-left: 280px"
|
|
>重置</el-button
|
|
>
|
|
<el-button type="primary" @click="addBefore"> 提交 </el-button>
|
|
</el-form>
|
|
|
|
<!-- 客户信息栏 -->
|
|
<el-card
|
|
style="width: 1200px; float: right"
|
|
class="customer-info"
|
|
width="3000px"
|
|
>
|
|
<el-form
|
|
:model="user"
|
|
label-width="auto"
|
|
style="max-width: 1200px"
|
|
label-position="left"
|
|
>
|
|
<el-text size="large" style="margin-left: 20px">客户信息</el-text>
|
|
<el-row style="margin-top: 20px">
|
|
<el-col :span="10">
|
|
<el-form-item label="姓名:">
|
|
<p>{{ user.name }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-form-item label="历史金币总数">
|
|
<p>{{ user.totalRechargeGold }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<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.buyJb">{{
|
|
user.buyJb + user.free6 + user.free12 + user.coreJb
|
|
}}</span>
|
|
<span
|
|
style="display: inline; white-space: nowrap; color: #b1b1b1"
|
|
v-if="user.buyJb"
|
|
>(充值金币:{{ user.buyJb }};免费金币:{{
|
|
user.free6 + user.free12
|
|
}};任务金币:{{ user.coreJb }})</span
|
|
>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item label="首次充值日期">
|
|
<p v-if="user.firstRechargeDate">
|
|
{{ moment(user.firstRechargeDate).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.rechargeTimes }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item label="负责客服">
|
|
<p>{{ adminData.name }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-form-item label="消费次数">
|
|
<p style="color: #2fa1ff">{{ user.spendTimes }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item label="所属门店">
|
|
<p>{{ adminData.area }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-form-item label="待审核">
|
|
<p style="color: #2fa1ff">
|
|
{{ user.A }}
|
|
</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<!-- <el-dialog
|
|
v-model="batchRechargeVisible"
|
|
title="批量充值"
|
|
width="1800px"
|
|
style="height: 700px"
|
|
>
|
|
<el-row style="margin-bottom: 10px">
|
|
<el-button type="primary" @click="addLine()" style="margin-right: auto"
|
|
>新增一行</el-button
|
|
>
|
|
<el-button
|
|
type="danger"
|
|
plain
|
|
@click="batchDel()"
|
|
style="margin-right: 10px; width: 130px"
|
|
>批量删除</el-button
|
|
>
|
|
</el-row>
|
|
<el-row>
|
|
<el-table
|
|
:data="batchData"
|
|
border
|
|
max-height="540px"
|
|
style="height: 540px"
|
|
@selection-change="handleSelectionChangebatch"
|
|
>
|
|
<el-table-column type="selection" width="50px" />
|
|
<el-table-column property="index" label="序号" width="55px">
|
|
<template #default="scope">
|
|
<span>{{ scope.$index + 1 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="jwcode" label="精网号" width="150px">
|
|
<template #default="scope">
|
|
<input
|
|
type="number"
|
|
v-if="scope.row.showInput"
|
|
v-model="scope.row.jwcode"
|
|
style="width: 110px"
|
|
/>
|
|
<span v-else>{{ scope.row.jwcode }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="activityName" label="活动名称" width="150px">
|
|
<template #default="scope">
|
|
<el-select
|
|
v-if="scope.row.showInput"
|
|
filterable
|
|
clearable
|
|
v-model="scope.row.activityId"
|
|
placeholder="请选择活动名称"
|
|
@change="handleSelectionChange"
|
|
>
|
|
>
|
|
<el-option
|
|
v-for="item in activity"
|
|
:key="item.value"
|
|
:label="item.activityName"
|
|
:value="item.activityId"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<span v-else>{{ scope.row.activityName }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="paidGold" label="充值金币" width="110px">
|
|
<template #default="scope">
|
|
<input
|
|
v-if="scope.row.showInput"
|
|
v-model="scope.row.paidGold"
|
|
style="width: 70px"
|
|
/>
|
|
<span v-else>{{ scope.row.paidGold }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="freeGold" label="免费金币" width="110px">
|
|
<template #default="scope">
|
|
<el-input disabled v-model="scope.row.freeGold"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="rechargeGold" label="充值金额">
|
|
<template #default="scope">
|
|
<el-select
|
|
v-if="scope.row.showInput"
|
|
filterable
|
|
clearable
|
|
v-model="scope.row.rate"
|
|
placeholder="请选择币种"
|
|
>
|
|
<el-option
|
|
v-for="item in currency"
|
|
:key="item.value"
|
|
:label="item.currency"
|
|
:value="item.exchangeRate"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<span v-else>{{ scope.row.rate }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="rechargeGold" label="充值金额" width="110px">
|
|
<template #default="scope">
|
|
<el-input disabled v-model="scope.row.rechargeGold"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="payWay" label="收款方式" width="130px">
|
|
<template #default="scope">
|
|
<el-select
|
|
v-if="scope.row.showInput"
|
|
filterable
|
|
clearable
|
|
v-model="scope.row.payWay"
|
|
placeholder="请选择收款方式"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<span v-else>{{ scope.row.payWay }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="rechargeTime" label="交款时间" width="150px">
|
|
<template #default="scope">
|
|
<el-date-picker
|
|
v-if="scope.row.showInput"
|
|
type="date"
|
|
v-model="scope.row.rechargeTime"
|
|
style="width: 120px"
|
|
placeholder="请选择交款时间"
|
|
>
|
|
</el-date-picker>
|
|
<span v-else>{{
|
|
moment(scope.row.rechargeTime).format("YYYY-MM-DD HH:mm:ss")
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="rechargeVoucher" label="充值凭证">
|
|
<span> X </span>
|
|
<template #default="scope">
|
|
<el-upload class="avatar-uploader" :show-file-list="true" :on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload" v-if="scope.row.showInput">
|
|
<img v-if="scope.row.imageUrl" :src="scope.row.imageUrl" class="avatar" />
|
|
<el-icon v-else class="avatar-uploader-icon"></el-icon>
|
|
</el-upload>
|
|
<span v-else>{{ scope.row.rechargeVoucher }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="remark" label="备注" width="130px">
|
|
<template #default="scope">
|
|
<textarea
|
|
v-if="scope.row.showInput"
|
|
v-model="scope.row.remark"
|
|
style="max-width: 90px"
|
|
rows="1"
|
|
cols="12"
|
|
></textarea>
|
|
<span v-else>{{ scope.row.remark }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="submitter" label="提交人">
|
|
<el-input :value="adminData.name" disabled />
|
|
</el-table-column>
|
|
<el-table-column
|
|
fixed="right"
|
|
prop="operation"
|
|
label="操作"
|
|
width="150px"
|
|
>
|
|
<template #default="scope">
|
|
<div style="display: flex">
|
|
<el-popconfirm
|
|
title="确定将此条信息删除吗？"
|
|
@confirm="delConfirm"
|
|
>
|
|
<template #reference>
|
|
<el-button type="danger" text @click="del(scope.row)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
<template #actions="{ confirm, cancel }">
|
|
<el-button size="small" @click="cancel">取消</el-button>
|
|
<el-button type="primary" size="small" @click="confirm">
|
|
确定
|
|
</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
<el-popconfirm
|
|
title="确定将此条信息重置吗？"
|
|
@confirm="resetConfirm"
|
|
>
|
|
<template #reference>
|
|
<el-button type="primary" text @click="reset(scope.row)">
|
|
重置
|
|
</el-button>
|
|
</template>
|
|
<template #actions="{ confirm, cancel }">
|
|
<el-button size="small" @click="cancel">取消</el-button>
|
|
<el-button type="primary" size="small" @click="confirm">
|
|
确定
|
|
</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-row>
|
|
<el-row>
|
|
<div class="batch-btn">
|
|
<el-button @click="cancelBatch()"> 取消 </el-button>
|
|
<el-button type="primary" @click="batchAdd()"> 提交 </el-button>
|
|
</div>
|
|
</el-row>
|
|
</el-dialog> -->
|
|
</template>
|
|
|
|
<style scoped>
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
|
|
.batch-btn {
|
|
margin-top: 20px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-left: 50px;
|
|
}
|
|
|
|
/* 上传图片的格式 */
|
|
.avatar-uploader .avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
|
|
.el-icon.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 50px;
|
|
height: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
.add-form {
|
|
margin-top: 50px;
|
|
max-width: 50%;
|
|
float: left;
|
|
}
|
|
|
|
.customer-info {
|
|
max-width: 60%;
|
|
}
|
|
</style>
|