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.
669 lines
18 KiB
669 lines
18 KiB
|
|
<script setup>
|
|
import { onMounted, 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 '@/util/http'
|
|
import moment from 'moment'
|
|
// import _ from 'lodash'
|
|
|
|
const addRe = ref({
|
|
typeR: '0'
|
|
})
|
|
|
|
|
|
|
|
//这是获取用户信息的接口
|
|
const adminData = ref({})
|
|
const getAdminData = async function () {
|
|
try {
|
|
const result = await API({ url: '/admin/userinfo', data: {} })
|
|
adminData.value = result
|
|
addRefund.value.adminId = adminData.value.id
|
|
console.log('请求成功', result)
|
|
console.log('用户信息', user.value)
|
|
} catch (error) {
|
|
console.log('请求失败', error)
|
|
}
|
|
}
|
|
// 精网号去空格
|
|
const trimJwCode = () => {
|
|
if (addRefund.value.jwcode) {
|
|
addRefund.value.jwcode = addRefund.value.jwcode.replace(/\s/g, '');
|
|
}
|
|
}
|
|
// 这是添加退款信息的表单
|
|
const addRefund = ref({
|
|
jwcode: '',
|
|
goodsName: '',
|
|
refundType: '',
|
|
refundModel: 0,
|
|
permanentGold: '',
|
|
freeGold: '',
|
|
taskGold: '',
|
|
sumGold: 0,
|
|
remark: '',
|
|
adminId: null
|
|
})
|
|
|
|
// 取消按钮
|
|
const cancel = function () {
|
|
addRefund.value = {
|
|
jwcode: '',
|
|
goodsName: '',
|
|
refundType: '',
|
|
refundModel: 0,
|
|
permanentGold: '',
|
|
freeGold: '',
|
|
taskGold: '',
|
|
sumGold: 0,
|
|
remark: '',
|
|
adminId: adminData.value.id
|
|
}
|
|
addRe.value.typeR = '0'
|
|
}
|
|
|
|
|
|
// 这是添加退款信息的接口
|
|
const add = async function () {
|
|
try {
|
|
|
|
// 更新 refundModel
|
|
addRefund.value.refundModel = parseInt(addRe.value.typeR);
|
|
|
|
|
|
// 对提交的金币数乘以 100
|
|
const processedRefund = {
|
|
...addRefund.value,
|
|
permanentGold: (Number(addRefund.value.permanentGold) || 0) * 100,
|
|
freeGold: (Number(addRefund.value.freeGold) || 0) * 100,
|
|
taskGold: (Number(addRefund.value.taskGold) || 0) * 100,
|
|
sumGold: (Number(addRefund.value.sumGold) || 0) * 100
|
|
}
|
|
|
|
// 发送POST请求
|
|
const result = await API({ url: '/refund/add',
|
|
data: processedRefund
|
|
})
|
|
if (result.code === 0) {
|
|
ElMessage.error(result.msg)
|
|
return
|
|
}
|
|
console.log('请求成功', result)
|
|
ElMessage.success('添加成功')
|
|
// 重置表单
|
|
cancel()
|
|
} 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 startChange = (val) => {}
|
|
|
|
const rules = reactive({
|
|
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
|
|
refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
|
|
goodsName: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
|
|
taskGold: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
|
|
freeGold: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
|
|
permanentGold: [
|
|
{ required: true, message: '请输入永久金币', trigger: 'blur' }
|
|
],
|
|
sumGold: [
|
|
{ required: true, message: '请选择付款方式', trigger: 'blur' },
|
|
{
|
|
validator: (rule, value) => {
|
|
if (value === 0) {
|
|
return Promise.reject(new Error('总金币不能为0'))
|
|
}
|
|
return Promise.resolve()
|
|
},
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
})
|
|
|
|
|
|
// 取消按钮
|
|
const cancelExceptJwcode = function () {
|
|
addRefund.value = {
|
|
jwcode: addRefund.value.jwcode, // 保留精网号
|
|
goodsName: '',
|
|
refundType: '',
|
|
refundModel: 0,
|
|
permanentGold: '',
|
|
freeGold: '',
|
|
taskGold: '',
|
|
sumGold: 0,
|
|
remark: '',
|
|
adminId: adminData.value.id
|
|
}
|
|
addRe.value.typeR = '0'
|
|
}
|
|
|
|
// 查找客户信息的方法
|
|
const user = ref({
|
|
firstRechargeTime: ''
|
|
})
|
|
const getUser = async function (jwcode) {
|
|
trimJwCode();
|
|
cancelExceptJwcode();
|
|
try {
|
|
// 发送POST请求
|
|
const result = await API({
|
|
url: '/user/selectUser',
|
|
data: {
|
|
jwcode: addRefund.value.jwcode
|
|
}
|
|
})
|
|
console.log('请求成功', result)
|
|
|
|
//在此处错误逻辑的提示做了注释，在后续商品查询接口返回错误时，提示信息会显示在弹窗中
|
|
if (result.code === 0) {
|
|
ElMessage.error(result.msg);
|
|
} else if (result.data === null) {
|
|
ElMessage.error("用户不存在");
|
|
addRefund.value.jwcode = ''; // 精网号清空
|
|
} else {
|
|
// 对传过来的金币数除以 100
|
|
const processedData = {
|
|
...result.data,
|
|
historySumGold: (Number(result.data.historySumGold) || 0) / 100,
|
|
nowSumGold: (Number(result.data.nowSumGold) || 0) / 100,
|
|
nowPermanentGold: (Number(result.data.nowPermanentGold) || 0) / 100,
|
|
nowFreeGold: (Number(result.data.nowFreeGold) || 0) / 100,
|
|
nowTaskGold: (Number(result.data.nowTaskGold) || 0) / 100
|
|
}
|
|
user.value = processedData;
|
|
console.log("用户信息", user.value);
|
|
ElMessage.success(result.msg);
|
|
}
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
ElMessage.error("查询失败，请检查精网号是否正确");
|
|
addRefund.value.jwcode = ''; // 精网号清空
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
// 退款类型，写死为商品退款
|
|
const refundType = ref([{ value: '商品退款', label: '商品退款' }]);
|
|
|
|
// 获取退款类型
|
|
// const getRefundTypes = async function () {
|
|
// try {
|
|
// // 发送请求获取退款类型
|
|
// const result = await API({
|
|
// url: '/refund/refundType', //这里应该写上一个退款类型的接口
|
|
// data: {} })
|
|
// console.log('退款类型请求成功', result)
|
|
// // 检查返回的数据是否为数组
|
|
// if (Array.isArray(result.data)) {
|
|
// // 将字符串数组转换为 { value, label } 格式
|
|
// refundType.value = result.data.map(item => ({ value: item, label: item }));
|
|
// } else {
|
|
// console.error('退款类型数据格式错误', result)
|
|
// ElMessage.error('退款类型数据格式错误，请联系管理员')
|
|
// }
|
|
// console.log('退款类型', refundType.value)
|
|
// } catch (error) {
|
|
// console.log('退款类型请求失败', error)
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
|
|
// 根据精网号查询商品
|
|
const goodsName = ref([])
|
|
const getGoods = async function (jwcode) {
|
|
trimJwCode();
|
|
|
|
// 只有精网号存在时才发送请求
|
|
if (!addRefund.value.jwcode) {
|
|
goodsName.value = []; // 清空商品数据
|
|
return;
|
|
}
|
|
try {
|
|
// 发送POST请求
|
|
const result = await API({
|
|
url: '/refund/selectGoods',
|
|
data: {
|
|
jwcode: addRefund.value.jwcode
|
|
}
|
|
})
|
|
console.log('请求成功', result)
|
|
// 检查返回的数据是否为数组
|
|
if (Array.isArray(result.data)) {
|
|
// 将字符串数组转换为 { value, label } 格式
|
|
goodsName.value = result.data.map(item => ({
|
|
value: item.goodsName, // 使用商品名称作为 value
|
|
label: item.goodsName,
|
|
key: item.goodsName,
|
|
// 保留其他字段
|
|
permanentGold: Math.abs(Number(item.permanentGold) || 0) / 100,
|
|
freeGold: Math.abs(Number(item.freeGold) || 0) / 100,
|
|
taskGold: Math.abs(Number(item.taskGold) || 0) / 100
|
|
}));
|
|
} else {
|
|
console.error('退款类型数据格式错误', result)
|
|
ElMessage.error('退款类型数据格式错误，请联系管理员')
|
|
}
|
|
} catch (error) {
|
|
console.log('请求失败', error)
|
|
ElMessage.error('查询商品失败，请检查精网号是否正确')
|
|
goodsName.value = []; // 请求失败时清空商品数据
|
|
}
|
|
}
|
|
|
|
// 存储选中商品的金币花费信息
|
|
const selectedGoodsGold = ref({
|
|
permanentGold: 0,
|
|
freeGold: 0,
|
|
taskGold: 0
|
|
})
|
|
|
|
// 处理退款方式切换，当部分退款切换全部退款时，退款金额应自动重新填充
|
|
const handleRefundModelChange = () =>{
|
|
if (addRe.value.typeR === '0') {
|
|
// 全部退款时
|
|
addRefund.value.permanentGold = selectedGoodsGold.value.permanentGold;
|
|
addRefund.value.freeGold = selectedGoodsGold.value.freeGold;
|
|
addRefund.value.taskGold = selectedGoodsGold.value.taskGold;
|
|
}
|
|
}
|
|
|
|
const handleSelectionChange = (selectedOption) => {
|
|
if (selectedOption) {
|
|
// 更新商品名称
|
|
addRefund.value.goodsName = selectedOption.value;
|
|
|
|
// 更新金币字段
|
|
addRefund.value.permanentGold = selectedOption.permanentGold || 0;
|
|
addRefund.value.freeGold = selectedOption.freeGold || 0;
|
|
addRefund.value.taskGold = selectedOption.taskGold || 0;
|
|
|
|
// 记录选中商品的金币花费
|
|
selectedGoodsGold.value.permanentGold = Number(selectedOption.permanentGold) || 0;
|
|
selectedGoodsGold.value.freeGold = Number(selectedOption.freeGold) || 0;
|
|
selectedGoodsGold.value.taskGold = Number(selectedOption.taskGold) || 0;
|
|
} else {
|
|
// 清空逻辑保持不变
|
|
}
|
|
console.log('选择的商品', selectedOption);
|
|
}
|
|
// 统一的输入处理函数
|
|
const handleGoldInput = (type, value) => {
|
|
// 1. 过滤非法字符（只允许数字和小数点）
|
|
let filtered = value.replace(/[^\d.]/g, '');
|
|
|
|
// 2. 防止多个小数点
|
|
const dotCount = (filtered.match(/\./g) || []).length;
|
|
if (dotCount > 1) {
|
|
// 保留第一个小数点，移除后续的小数点
|
|
const parts = filtered.split('.');
|
|
filtered = parts[0] + '.' + parts.slice(1).join('');
|
|
}
|
|
|
|
// 3. 限制小数点后两位
|
|
if (filtered.includes('.')) {
|
|
const [integer, decimal] = filtered.split('.');
|
|
if (decimal.length > 2) {
|
|
filtered = `${integer}.${decimal.slice(0, 2)}`;
|
|
}
|
|
}
|
|
|
|
// 4. 检查是否以小数点开头，如果是，在前面添加0
|
|
if (filtered.startsWith('.')) {
|
|
filtered = '0' + filtered;
|
|
}
|
|
|
|
// 5. 更新值
|
|
addRefund.value[type] = filtered;
|
|
|
|
// 6. 验证逻辑（这里直接应用修正后的值）
|
|
const maxValue = selectedGoodsGold.value[type];
|
|
const inputValue = Number(filtered || 0);
|
|
|
|
if (isNaN(inputValue)) {
|
|
return;
|
|
}
|
|
|
|
if (inputValue > maxValue) {
|
|
// 修正为最大值并设置回输入框
|
|
const correctedValue = maxValue.toFixed(2);
|
|
addRefund.value[type] = correctedValue;
|
|
ElMessage.warning('所填金额大于该类金币余额');
|
|
}
|
|
|
|
if (inputValue < 0) {
|
|
// 修正为0并设置回输入框
|
|
addRefund.value[type] = '0';
|
|
ElMessage.warning('不能输入负数');
|
|
}
|
|
}
|
|
|
|
// 使用示例
|
|
const handlePermanentGoldInput = (value) => handleGoldInput('permanentGold', value);
|
|
const handleFreeGoldInput = (value) => handleGoldInput('freeGold', value);
|
|
const handleTaskGoldInput = (value) => handleGoldInput('taskGold', value);
|
|
|
|
// 计算总金币
|
|
const calculatedRechargeGoods = computed(() => {
|
|
const permanentGold = addRefund.value.permanentGold === '' ? 0 : +addRefund.value.permanentGold;
|
|
const freeGold = addRefund.value.freeGold === '' ? 0 : +addRefund.value.freeGold;
|
|
const taskGold = addRefund.value.taskGold === '' ? 0 : +addRefund.value.taskGold;
|
|
return Number((permanentGold + freeGold + taskGold).toFixed(2));
|
|
})
|
|
|
|
watch(calculatedRechargeGoods, (newVal) => {
|
|
addRefund.value.sumGold = newVal
|
|
console.log('计算的总金币', newVal)
|
|
})
|
|
// 绑定两个数据
|
|
|
|
// 挂载
|
|
onMounted(async function () {
|
|
await getAdminData()
|
|
// await getRefundTypes()
|
|
// await getGoods()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div >
|
|
|
|
<el-form
|
|
:model="addRefund"
|
|
ref="Ref"
|
|
:rules="rules"
|
|
label-width="auto"
|
|
style="max-width: 750px"
|
|
class="form-style"
|
|
>
|
|
<el-form-item prop="jwcode" label="精网号">
|
|
<el-input
|
|
v-model="addRefund.jwcode"
|
|
style="width: 220px"
|
|
@change="getGoods(addRefund.jwcode)"
|
|
@blur="getUser(addRefund.jwcode)"
|
|
/>
|
|
<el-button
|
|
type="primary"
|
|
|
|
style="margin-left: 20px"
|
|
>查询</el-button
|
|
>
|
|
</el-form-item>
|
|
<el-form-item prop="refundType" label="退款类型">
|
|
<el-select
|
|
v-model="addRefund.refundType"
|
|
placeholder="请选择"
|
|
style="width: 300px"
|
|
>
|
|
<el-option
|
|
v-for="item in refundType"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="goodsName" label="商品名">
|
|
<el-select
|
|
v-model="addRefund.goodsName"
|
|
placeholder="请选择"
|
|
style="width: 300px"
|
|
@change="handleSelectionChange"
|
|
>
|
|
<el-option
|
|
v-for="item in goodsName"
|
|
:key="item.key"
|
|
:label="item.label"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="refundModel" label="退款方式:">
|
|
<el-radio-group v-model="addRe.typeR" @change="handleRefundModelChange">
|
|
<el-radio value="0">全部退款</el-radio>
|
|
<el-radio value="1">部分退款</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<div style="display: flex; align-items: center">
|
|
<el-form-item prop="permanentGold" label="永久金币" style="float: left">
|
|
<el-input
|
|
v-model="addRefund.permanentGold"
|
|
style="width: 100px"
|
|
:disabled="addRe.typeR === '0' ? true : false"
|
|
@input="handlePermanentGoldInput($event)"
|
|
type="number"
|
|
>
|
|
</el-input>
|
|
<p>个</p>
|
|
</el-form-item>
|
|
<el-form-item
|
|
prop="freeGold"
|
|
label="免费金币"
|
|
style="margin-left: -20px; float: left"
|
|
>
|
|
<el-input
|
|
v-model="addRefund.freeGold"
|
|
style="float: left; width: 100px"
|
|
:disabled="addRe.typeR === '0' ? true : false"
|
|
@input="handleFreeGoldInput($event)"
|
|
type="number"
|
|
/>
|
|
<p>个</p>
|
|
</el-form-item>
|
|
<el-form-item prop="taskGold" label="任务金币" style="margin-left: -20px">
|
|
<el-input
|
|
v-model="addRefund.taskGold"
|
|
style="float: left; width: 100px"
|
|
:disabled="addRe.typeR === '0' ? true : false"
|
|
@input="handleTaskGoldInput($event)"
|
|
type="number"
|
|
/>
|
|
<p>个</p>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item prop="sumGold" label="退款金币总数">
|
|
<el-input disabled v-model="addRefund.sumGold" style="width: 100px">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="remark" label="备注">
|
|
<el-input
|
|
v-model="addRefund.remark"
|
|
style="width: 300px"
|
|
:rows="2"
|
|
maxlength="100"
|
|
show-word-limit
|
|
type="textarea"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="adminName" label="提交人">
|
|
<el-input
|
|
style="width: 300px"
|
|
:value="adminData.adminName"
|
|
disabled
|
|
placeholder="提交人姓名"
|
|
/>
|
|
</el-form-item>
|
|
<el-button type="success" @click="cancel()" style="margin-left: 280px">重置</el-button>
|
|
<el-button type="primary" @click="addBefore"> 提交 </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="历史金币总数">
|
|
<p v-if="!isNaN(Number(user.historySumGold))">
|
|
{{ Number(user.historySumGold) }}
|
|
</p>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.form-style {
|
|
margin-top: 50px;
|
|
max-width: 50%;
|
|
float: left;
|
|
}
|
|
|
|
.form-style2 {
|
|
max-width: 60%;
|
|
}
|
|
|
|
p {
|
|
font-size: 13px;
|
|
transform: scale(1);
|
|
}
|
|
</style>
|