316 lines
7.2 KiB
Vue
316 lines
7.2 KiB
Vue
<template>
|
|
<div class="mini-integral">
|
|
<div class="content">
|
|
<!-- 积分配置列表 -->
|
|
<div class="integral-list">
|
|
<el-table
|
|
:data="tableData"
|
|
stripe
|
|
style="width: 100%; margin-top: 10px"
|
|
max-height="700"
|
|
>
|
|
<el-table-column prop="functionName" label="事件" />
|
|
<el-table-column prop="" label="" />
|
|
<el-table-column prop="functionValue" label="积分" />
|
|
<el-table-column prop="" label="" />
|
|
<el-table-column label="操作">
|
|
<template #default="scope">
|
|
<el-button size="small" @click="miniIntegralEdit(scope.$index, scope.row)">
|
|
修改
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
type="danger"
|
|
@click="miniIntegralDelete(scope.$index, scope.row)"
|
|
>
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 积分配置 -->
|
|
<div class="integral-title">
|
|
<div class="add" @click="dialogVisible = true">
|
|
<img class="add-img" src="@/assets/plus2.png" alt="">
|
|
</div>
|
|
<div class="integral-text">
|
|
<div class="h1">小</div>
|
|
<div class="h1">程</div>
|
|
<div class="h1">序</div>
|
|
<div class="h1">积</div>
|
|
<div class="h1">分</div>
|
|
<div class="h1">配</div>
|
|
<div class="h1">置</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新增修改积分配置弹窗 -->
|
|
<el-drawer v-model="dialogVisible" :with-header="false" @close="dialogVisible = false, miniIntegraldeta = {}">
|
|
<div class="dialog-content">
|
|
<div class="dialog-title">事件{{miniIntegraldeta.id? '编辑' : '新增'}}</div>
|
|
<el-input
|
|
v-if="!miniIntegraldeta.id"
|
|
v-model="miniIntegraldeta.functionName"
|
|
style="width: 100%; margin-top: 20px"
|
|
:rows="3"
|
|
type="textarea"
|
|
placeholder="请输入事件名称"
|
|
/>
|
|
<el-input
|
|
v-model="miniIntegraldeta.functionValue"
|
|
style="width: 100%;height: 50px; margin-top: 20px"
|
|
type="number"
|
|
placeholder="请输入积分值"
|
|
/>
|
|
<div class="dialog-btn">
|
|
<div class="dialogSave" @click="miniIntegralAddSave">保存</div>
|
|
<div class="dialogCancel" @click="dialogVisible = false">取消</div>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
import {
|
|
getWxConfigList,
|
|
addWxConfig,
|
|
editWxConfig,
|
|
deleteWxConfig,
|
|
} from "@/api/account";
|
|
import {
|
|
ref, // 响应式基础
|
|
watch, // 侦听器
|
|
onMounted, // 组件挂载完成后执行
|
|
onUpdated, // 组件更新后执行
|
|
onUnmounted, // 组件销毁前执行
|
|
} from "vue";
|
|
const refname = ref("");
|
|
const tableData = ref([]);
|
|
const dialogVisible = ref(false);
|
|
const miniIntegraldeta = ref({});
|
|
//保存积分配置
|
|
function miniIntegralAddSave() {
|
|
if (!miniIntegraldeta.value.functionName) {
|
|
ElMessage({
|
|
type: "error",
|
|
message: "事件名称不能为空",
|
|
});
|
|
return;
|
|
}
|
|
if (!miniIntegraldeta.value.functionValue) {
|
|
ElMessage({
|
|
type: "error",
|
|
message: "积分值不能为空",
|
|
});
|
|
return;
|
|
}
|
|
if (miniIntegraldeta.value.id) {
|
|
// 修改积分配置
|
|
editWxConfig(miniIntegraldeta.value)
|
|
.then(() => {
|
|
ElMessage({
|
|
type: "success",
|
|
message: "修改成功",
|
|
});
|
|
dialogVisible.value = false;
|
|
miniIntegraldeta.value = {};
|
|
getIntegralList()
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: "error",
|
|
message: "修改失败",
|
|
});
|
|
});
|
|
} else {
|
|
// 新增积分配置
|
|
addWxConfig(miniIntegraldeta.value)
|
|
.then(() => {
|
|
ElMessage({
|
|
type: "success",
|
|
message: "新增成功",
|
|
});
|
|
dialogVisible.value = false;
|
|
miniIntegraldeta.value = {};
|
|
getIntegralList()
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: "error",
|
|
message: "新增失败",
|
|
});
|
|
});
|
|
}
|
|
}
|
|
// 新增积分配置弹窗
|
|
function miniIntegralEdit(index, row) {
|
|
dialogVisible.value = true;
|
|
miniIntegraldeta.value = row;
|
|
}
|
|
//删除积分配置
|
|
function miniIntegralDelete(index, row) {
|
|
ElMessageBox.confirm("您确认要删除这个积分配置吗？")
|
|
.then(() => {
|
|
deleteWxConfig({ id: row.id })
|
|
.then(() => {
|
|
ElMessage({
|
|
type: "success",
|
|
message: "删除成功",
|
|
});
|
|
getIntegralList()
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: "error",
|
|
message: "删除失败",
|
|
});
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
// 获取积分配置列表
|
|
function getIntegralList() {
|
|
getWxConfigList()
|
|
.then((res) => {
|
|
tableData.value = res;
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: "error",
|
|
message: "获取积分配置列表失败",
|
|
});
|
|
});
|
|
}
|
|
watch(refname, async (newQuestion, oldQuestion) => {
|
|
// 变化后执行
|
|
});
|
|
onMounted(() => {
|
|
getIntegralList();
|
|
});
|
|
onUpdated(() => {
|
|
// 组件更新后执行
|
|
});
|
|
onUnmounted(() => {
|
|
// 组件销毁前执行
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mini-integral {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.content {
|
|
width: 80%;
|
|
height: 80%;
|
|
background-color: #f5f5f5;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
|
|
padding: 40px;
|
|
}
|
|
.integral-list{
|
|
width: 87%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
border-radius: 10px;
|
|
}
|
|
.integral-title{
|
|
width: 10%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
border-radius: 10px;
|
|
}
|
|
.add{
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #c4c4c4;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
.add:hover{
|
|
background-color: #a9a9a9;
|
|
}
|
|
.add-img{
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.integral-text{
|
|
width: 100%;
|
|
height: 520px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
color: #c4c4c4;
|
|
font-size: 25px;
|
|
font-family: "SimSun", "Microsoft YaHei", sans-serif;
|
|
}
|
|
.h1{
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.dialog-title {
|
|
width: 100%;
|
|
height: 50px;
|
|
font-size: 25px;
|
|
color: #b4b4b4;
|
|
font-weight: bold;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
.dialog-btn {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.dialogSave {
|
|
width: 45%;
|
|
height: 50px;
|
|
background-color: #d6d6d6;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
.dialogSave:hover {
|
|
background-color: #b4b4b4;
|
|
}
|
|
.dialogCancel {
|
|
width: 45%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
color: #d6d6d6;
|
|
border: 1px solid #d6d6d6;
|
|
}
|
|
.dialogCancel:hover {
|
|
background-color: #e7e6e6;
|
|
color: #ffffff;
|
|
}
|
|
/* 样式定义 */
|
|
</style>
|