Browse Source

fix:合并

youhua/chongzhi
lihui 2 months ago
parent
commit
6a0bc7efb5
  1. 204
      src/views/consume/gold/addCoinConsume.vue

204
src/views/consume/gold/addCoinConsume.vue

@ -1,12 +1,14 @@
<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {onMounted, reactive, ref, watch} from "vue";
import {ElIcon, ElMessage, ElMessageBox} from "element-plus";
import moment from "moment";
import request from "@/util/http.js"
import Cookies from 'js-cookie';
import {useAdminStore} from "@/store/index.js";
import {storeToRefs} from "pinia";
import {WarnTriangleFilled} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { useAdminStore } from "@/store/index.js";
import { storeToRefs } from "pinia";
const adminStore = useAdminStore();
const { adminData, menuTree } = storeToRefs(adminStore);
//
@ -30,7 +32,7 @@ const addDisabled = ref(false)
====================数据=================================
*/
//
const adminData = ref({});
// const adminData = ref({});
//
const user = ref({
@ -233,7 +235,14 @@ function calculateCoins(sumGold) {
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 {
@ -245,6 +254,17 @@ const add = async function () {
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,jwcodekeyvaluejwcode1
Cookies.set(WriteCookies.value, WriteCookiesTime.value, {expires:
1, path: '/'});
addDisabled.value = true
// POST
const result = await request({
// url: "/consume/add",
@ -261,7 +281,7 @@ const add = async function () {
remark: addConsume.value.remark
}
});
addDisabled.value = false
console.log("add请求", result);
//
handleResponse(result);
@ -321,30 +341,66 @@ function resetForm() {
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) => {
if (valid) {
ElMessageBox.confirm("确认添加?")
.then(() => {
console.log("这里是jwcode", addConsume.value.jwcode)
add();
console.log("添加成功",);
addConsume.value = {};
})
.catch(() => {
console.log("取消添加");
});
} else {
//
// cookie
if (!valid) {
ElMessage({
type: "error",
message: "请检查输入内容",
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 {
@ -522,7 +578,7 @@ onMounted(async function () {
</el-form-item>
</div>
<el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button>
<el-button type="primary" @click="addBefore" style="margin-top:10px"> 提交</el-button>
<el-button type="primary" :disabled="addDisabled" @click="addBefore" style="margin-top:10px"> 提交</el-button>
</el-form>
@ -610,7 +666,79 @@ onMounted(async function () {
</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>
<!-- 金币消耗明细的布局------------------------------------------------------- -->
@ -640,4 +768,34 @@ p {
</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>
Loading…
Cancel
Save