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.
371 lines
10 KiB
371 lines
10 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";
|
|
|
|
// 这是添加充值信息的表单
|
|
const addConsume = ref({});
|
|
// 这是添加充值信息的接口
|
|
const add = async function () {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await axios.post(
|
|
"http://192.168.8.93:10010/recharge/recharge/add",
|
|
addConsume.value
|
|
);
|
|
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("请求成功", result);
|
|
// 存储表格数据
|
|
console.log("用户信息", user.value);
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
const addBefore = () => {
|
|
Ref.value.validate(async (valid) => {
|
|
if (valid) {
|
|
ElMessageBox.confirm("确认添加？")
|
|
.then(() => {
|
|
add();
|
|
console.log("添加成功");
|
|
imageUrl.value = "";
|
|
addConsume.value = {};
|
|
})
|
|
.catch(() => {
|
|
console.log("取消添加");
|
|
});
|
|
} else {
|
|
//提示
|
|
ElMessage({
|
|
type: "error",
|
|
message: "请检查输入内容",
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 表单验证
|
|
// 开始时间改变时，重新验证结束时间
|
|
const Ref = ref(null);
|
|
const checkEndTime = function (rule, value, callback) {
|
|
if (value <= new Date()) {
|
|
callback(new Error("付款时间不能小于当前时间"));
|
|
}
|
|
};
|
|
const rules = reactive({
|
|
jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }],
|
|
refundGoods: [{ required: true, message: "请选择退款商品", trigger: "blur" }],
|
|
taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }],
|
|
freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }],
|
|
rechargeCoin: [
|
|
{ required: true, message: "请输入免费金币", trigger: "blur" },
|
|
],
|
|
allGold: [{ required: true, message: "请输入消费金币总数", trigger: "blur" }],
|
|
});
|
|
|
|
// 查找客户信息的方法
|
|
const user = ref({});
|
|
const getUser = async function (jwcode) {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await axios.post("http://192.168.8.93:10020/recharge/user", {
|
|
jwcode: jwcode,
|
|
});
|
|
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("请求成功", result);
|
|
// 存储表格数据
|
|
user.value = result.data.data[0];
|
|
console.log("用户信息", user.value);
|
|
if (result.data.code === 0) {
|
|
ElMessage.error(result.data.msg);
|
|
} else {
|
|
ElMessage.success(result.data.msg);
|
|
}
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
ElMessage.error("查询失败，请检查精网号是否正确");
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
|
|
// 这是查询活动的接口
|
|
const activity = ref([]);
|
|
const getActivity = async function () {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await axios.post(
|
|
"http://192.168.8.93:10010/recharge/activity/select",
|
|
{}
|
|
);
|
|
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("请求成功", result);
|
|
// 存储表格数据
|
|
activity.value = result.data.data;
|
|
console.log("活动信息", activity.value);
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
getActivity();
|
|
|
|
// 这是查询货币的接口
|
|
const currency = ref([]);
|
|
const getCurrency = async function () {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await axios.post(
|
|
"http://192.168.8.174:10010/rates/search",
|
|
{}
|
|
);
|
|
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("货币请求成功", result);
|
|
// 存储表格数据
|
|
currency.value = result.data.data;
|
|
console.log("tableData", currency.value);
|
|
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
getCurrency();
|
|
|
|
// 这是添加上传图片的接口
|
|
const imageUrl = ref("");
|
|
|
|
// 上传图片成功的回调函数
|
|
const handleAvatarSuccess = (response, uploadFile) => {
|
|
imageUrl.value = URL.createObjectURL(uploadFile.raw);
|
|
console.log("图片上传成功", response, uploadFile);
|
|
addConsume.value.rechargeVoucher =
|
|
"http://192.168.8.93:10010/upload/" + response.data;
|
|
console.log("图片名称", addConsume.value.rechargeVoucher);
|
|
};
|
|
// 上传图片之前的校验函数
|
|
const beforeAvatarUpload = (rawFile) => {
|
|
if (rawFile.type !== "image/jpeg") {
|
|
ElMessage.error("Avatar picture must be JPG format!");
|
|
return false;
|
|
} else if (rawFile.size / 1024 / 1024 > 2) {
|
|
ElMessage.error("Avatar picture size can not exceed 2MB!");
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
//充值方式条目
|
|
const options = [
|
|
{
|
|
value: "现金充值",
|
|
label: "现金充值",
|
|
},
|
|
{
|
|
value: "龙鳞卡",
|
|
label: "龙鳞卡",
|
|
},
|
|
{
|
|
value: "弘粉卡",
|
|
label: "弘粉卡",
|
|
},
|
|
];
|
|
|
|
const calculatedFreeGold = computed(() => {
|
|
return addConsume.value.paidGold * addConsume.value.activityId;
|
|
});
|
|
|
|
watch(calculatedFreeGold, (newVal) => {
|
|
addConsume.value.freeGold = newVal;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div style="margin-bottom: 20px">新增消费</div>
|
|
|
|
<el-form
|
|
:model="addConsume"
|
|
ref="Ref"
|
|
:rules="rules"
|
|
label-width="auto"
|
|
style="max-width: 750px"
|
|
>
|
|
<el-form-item prop="jwcode" label="精网号">
|
|
<el-input v-model="addConsume.jwcode" style="width: 220px" />
|
|
<el-button
|
|
type="primary"
|
|
@click="getUser(addConsume.jwcode)"
|
|
style="margin-left: 20px"
|
|
>查询</el-button
|
|
>
|
|
</el-form-item>
|
|
<el-form-item prop="goods" label="商品名称">
|
|
<el-select
|
|
v-model="addConsume.goods"
|
|
placeholder="请选择"
|
|
style="width: 300px"
|
|
>
|
|
<el-option
|
|
v-for="item in activity"
|
|
:key="item.value"
|
|
:label="item.activityName"
|
|
:value="item.rechargeRatio"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="allGold" label="消费金币总数">
|
|
<el-input v-model="addConsume.paidGold" style="width: 100px" />
|
|
</el-form-item>
|
|
<el-form-item prop="taskCoin" label="任务金币" style="float: left">
|
|
<el-input
|
|
disabled
|
|
v-model="addConsume.taskCoin"
|
|
style="width: 100px; margin-left: -5px"
|
|
/>
|
|
<p style="margin-right: 0px">个</p>
|
|
</el-form-item>
|
|
<el-form-item
|
|
prop="freeCoin"
|
|
label="免费金币"
|
|
style="float: left; margin-left: -10px; margin-right: -10px"
|
|
>
|
|
<el-input
|
|
disabled
|
|
v-model="addConsume.freeCoin"
|
|
style="width: 100px; margin-left: -5px"
|
|
/>
|
|
<p style="margin-right: 0px">个</p>
|
|
</el-form-item>
|
|
<el-form-item
|
|
prop="rechargeCoin"
|
|
label="充值金币"
|
|
style="margin-left: -20px"
|
|
>
|
|
<el-input
|
|
disabled
|
|
v-model="addConsume.rechargeCoin"
|
|
style="width: 100px; margin-left: -5px"
|
|
/>
|
|
<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="2"
|
|
maxlength="100"
|
|
show-word-limit
|
|
type="textarea"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="commitName" label="提交人">
|
|
<el-input
|
|
style="width: 300px"
|
|
value="张三"
|
|
disabled
|
|
placeholder="提交人姓名"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-button @click="closeAddActivityVisible" style="margin-left: 280px"
|
|
>取消</el-button
|
|
>
|
|
<el-button type="primary" @click="addBefore"> 提交 </el-button>
|
|
|
|
<!-- 客户信息栏 -->
|
|
<el-card
|
|
style="width: 700px; float: right; margin-top: -330px; margin-right: 100px"
|
|
>
|
|
<el-form
|
|
:model="user"
|
|
label-width="auto"
|
|
style="max-width: 600px"
|
|
label-position="left"
|
|
>
|
|
<el-text size="large" style="margin-left: 20px">客户信息</el-text>
|
|
<el-row style="margin-top: 20px">
|
|
<el-col :span="12">
|
|
<el-form-item label="姓名:">
|
|
<p>{{ user.name }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="历史金币总数"> </el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="精网号">
|
|
<p>{{ user.jwcode }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="当前金币总数"> </el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="首次充值日期"> </el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="充值次数"> </el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="负责客服"> </el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="消费次数"> </el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="所属门店"> </el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="待审核"> </el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-card>
|
|
</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;
|
|
}
|
|
</style>
|