huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

恢复红包

jiangcheng/feature-20260326164657-金币日常优化3.0
ZhangYong 2 weeks ago
parent
0b45b31d4e
commit
7326bf0b0b
1 changed files with 209 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 215
      src/views/consume/gold/addCoinConsume.vue

215
src/views/consume/gold/addCoinConsume.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, reactive, ref, watch, nextTick } from "vue";
import { onMounted, reactive, ref, watch, computed, nextTick } from "vue";
import { ElIcon, ElMessage } from "element-plus";
import moment from "moment";
import request from "@/util/http.js"
@ -36,6 +36,7 @@ const user = ref({
jwcode: null,
name: "",
market: "",
red: null,
historySumGold: null,
historyPermanentGold: null,
historyFreeGold: null,
@ -63,7 +64,8 @@ const addConsume = ref({
taskGold: null, // 任务金币
remark: "",//备注
adminId: null,// 当前管理员id
adminName: adminData.value.adminName
adminName: adminData.value.adminName,
redMoney: 1 // 是否使用红包：1-使用，0-不使用
})
const Ref = ref(null)
const rules = reactive({
@ -75,6 +77,19 @@ const rules = reactive({
{ required: true, message: t('elmessage.noEmptySumGold'), trigger: "blur" },
{
validator: (rule, value, callback) => {
// 如果使用了红包，且红包总额抵扣完了原价，允许为0
if (addConsume.value.redMoney === 1) {
const price = Number(addConsume.value.price || 0)
const redAmount = totalRedAmount.value
if (redAmount >= price) {
// 如果红包抵扣完了，允许0
if (parseFloat(value) === 0 || value === 0) {
callback();
return;
}
}
}
// 允许0开头的小数（如0.1）但不允许单独的0
const isValid = /^(0\.\d{1,2})|([1-9]\d*(\.\d{1,2})?)$/.test(value);
@ -164,7 +179,13 @@ function validateInput() {
const totalAvailableGold = (user.value.nowSumGold)
// 校验消耗金币数是否超过可用金币数
if (user.value.jwcode && sumGold > totalAvailableGold) {
if (addConsume.value.redMoney === 1) {
ElMessage.error(t('elmessage.limitRedAmount'));
// 如果红包额不足，清空已选红包
selectedReds.value = []
} else {
ElMessage.error(t('elmessage.limitExceeded'));
}
// 将sumGold设置为null
addConsume.value.sumGold = null;
return false;
@ -173,6 +194,34 @@ function validateInput() {
return true;
}
// 仅在鼠标离开（blur）时校验：消耗金币数 + 红包抵扣金额 ≥ 原价
function validateRedLimit() {
const sumGold = parseFloat(addConsume.value.sumGold);
const price = Number(addConsume.value.price || 0);
// 优先使用选中的红包总额，如果没有选中（可能是旧逻辑），则使用user.red
const redAmount = (addConsume.value.redMoney == 1 && selectedReds.value.length > 0)
? totalRedAmount.value
: (addConsume.value.redMoney == 1 ? Number(user.value.red || 0) : 0);
if (!isNaN(price) && price > 0) {
// 如果红包足额，允许sumGold为0
const isCovered = redAmount >= price;
if (isNaN(sumGold) || (sumGold <= 0 && !isCovered)) {
ElMessage.error(t('elmessage.noEmptySumGold'));
return false;
}
// 如果勾选使用红包，才需要校验消耗金币数 + 红包抵扣金额 ≥ 原价
if (addConsume.value.redMoney == 1) {
if (sumGold + redAmount < price) {
ElMessage.error(t('elmessage.limitRedAmount'));
return false;
}
}
}
return true;
}
// 消耗金币计算函数
function calculateCoins(sumGold) {
console.log("消耗金币计算函数:计算金币", sumGold);
@ -252,7 +301,9 @@ const add = async function () {
permanentGold: addConsume.value.permanentGold * 100,
goodsName: addConsume.value.goodsName?.value || addConsume.value.goodsName,
remark: addConsume.value.remark,
adminName: adminData.value.adminName
adminName: adminData.value.adminName,
redMoney: Number(addConsume.value.redMoney), // 1-使用红包，0-不使用红包
redIds: addConsume.value.redMoney === 1 ? selectedReds.value.map(item => item.id) : [] // 选中的红包ID数组
}
})
addDisabled.value = false
@ -302,9 +353,14 @@ function resetForm() {
taskGold: null,
remark: "",
adminId: adminData.value.id,
adminName: adminData.value.adminName
adminName: adminData.value.adminName,
redMoney: 1 // 默认使用红包
}
// 清空红包相关数据
selectedReds.value = []
redList.value = []
console.log("重置表单")
user.value = {
@ -423,7 +479,7 @@ const addBefore = () => {
});
return;
}
if (!validateInput()) {
if (!validateInput() || !validateRedLimit()) {
return;
}
ReadCookies.value = `coinConsume-${addConsume.value.jwcode}-${addConsume.value.goodsName.value}`
@ -513,6 +569,11 @@ const getUser = async function (jwcode) {
if (code === 200) {
ElMessage.success(t('elmessage.searchSuccess'));
// 如果当前开启了红包模式，获取红包列表
if (addConsume.value.redMoney === 1) {
getRedList()
}
// 验证输入
validateInput()
} else {
@ -599,6 +660,108 @@ const handleGoodsChange = (val) => {
// );
/*
====================红包逻辑=================================
*/
// 红包列表
const redList = ref([])
// 选中的红包
const selectedReds = ref([])
// 获取红包列表
const getRedList = async () => {
// 必须先有查询到的用户信息
if (!user.value.jwcode) return
try {
const result = await request({
url: "/Temporary/RedList",
data: { jwcode: user.value.jwcode }
})
console.log("红包列表", result)
if (result.code === 200) {
redList.value = result.data || []
}
} catch (error) {
console.error("获取红包列表失败", error)
}
}
// 监听是否使用红包
watch(() => addConsume.value.redMoney, (val) => {
// 切换模式时，清除sumGold的验证状态，防止之前的错误提示残留
if (Ref.value) {
Ref.value.clearValidate('sumGold')
}
if (val === 1) {
if (!user.value.jwcode) {
if (addConsume.value.jwcode) {
ElMessage.warning(t('elmessage.checkUserInfo'))
}
redList.value = []
selectedReds.value = []
addConsume.value.sumGold = null
return
}
selectedReds.value = []
getRedList()
// 初始消耗金币等于原价（未选红包时）
if (addConsume.value.price) {
addConsume.value.sumGold = addConsume.value.price
} else {
addConsume.value.sumGold = null
}
} else {
selectedReds.value = []
addConsume.value.sumGold = null
}
})
// 计算已选红包总额
const totalRedAmount = computed(() => {
return selectedReds.value.reduce((sum, item) => {
// 根据实际接口返回，使用 discount 字段
const amount = Number(item.discount || 0)
return sum + amount
}, 0)
})
// 监听选中红包变化，计算剩余金币
watch(selectedReds, () => {
if (addConsume.value.redMoney === 1) {
const price = Number(addConsume.value.price || 0)
const redTotal = totalRedAmount.value
// 剩余需要消耗的金币
let remaining = price - redTotal
if (remaining < 0) remaining = 0
addConsume.value.sumGold = remaining
}
}, { deep: true })
// 判断红包选项是否禁用
const isRedOptionDisabled = (item) => {
// 如果已经选中，不禁用（允许取消）
if (selectedReds.value.some(r => r.id === item.id)) return false
const price = Number(addConsume.value.price || 0)
// 如果当前总额已经大于等于原价，则不能再选新的
if (totalRedAmount.value >= price) return true
return false
}
// 监听原价变化（比如换了商品），如果在红包模式下，需要重新计算
watch(() => addConsume.value.price, (newPrice) => {
if (addConsume.value.redMoney === 1) {
const redTotal = totalRedAmount.value
let remaining = (newPrice || 0) - redTotal
if (remaining < 0) remaining = 0
addConsume.value.sumGold = remaining
}
})
/*
====================挂载=================================
*/
// 挂载
@ -631,8 +794,41 @@ onMounted(async function () {
<el-input v-model="addConsume.price" style="width: 120px" disabled />
</el-form-item>
<!-- <el-form-item prop="sumGold" :label="t('common_add.consumeTotalGold')">
<el-input v-model="addConsume.sumGold" style="width: 120px"
@blur="validateRedLimit()" />
</el-form-item> -->
<el-form-item prop="sumGold" :label="t('common_add.consumeTotalGold')">
<el-input v-model="addConsume.sumGold" style="width: 120px" />
<div style="display: flex; align-items: flex-start;">
<el-input v-model="addConsume.sumGold" style="width: 120px; flex-shrink: 0;" @blur="validateRedLimit()"
:disabled="addConsume.redMoney === 1" />
<div style="display: flex; flex-wrap: wrap; margin-left: 10px;">
<el-radio v-model="addConsume.redMoney" :label="1">{{ t('common_add.使用红包') }}</el-radio>
<el-radio v-model="addConsume.redMoney" :label="0">{{ t('common_add.不使用红包') }}</el-radio>
</div>
</div>
</el-form-item>
<el-form-item v-if="addConsume.redMoney === 1" :label="t('common_add.选择红包')">
<el-select
v-model="selectedReds"
multiple
:placeholder="t('common_add.请选择红包')"
style="width: 200px"
value-key="id"
collapse-tags
>
<el-option
v-for="item in redList"
:key="item.id"
:label="`${item.title} (${item.discount})`"
:value="item"
:disabled="isRedOptionDisabled(item)"
/>
</el-select>
<span style="margin-left: 10px; color: #666;">
{{ t('common_add.已抵扣') }}: {{ totalRedAmount }}
</span>
</el-form-item>
@ -730,13 +926,18 @@ onMounted(async function () {
</el-row> -->
<!-- 第四行：所属门店 -->
<!-- 第四行：消费次数 + 所属门店 -->
<el-row>
<el-col :span="9">
<el-form-item :label="$t('common_add_user.store')">
<p>{{ user.market }}</p>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item :label="$t('common_add_user.maxReductionAmount')">
<p style="color: #2fa1ff">{{ user.red }} </p>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>

Write Preview
Loading…
Cancel
Save