|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<script setup> |
|
|
|
import { onMounted, reactive, ref, watch } from "vue"; |
|
|
|
import { onMounted, reactive, ref, watch, computed } from "vue"; |
|
|
|
import { ElIcon, ElMessage } from "element-plus"; |
|
|
|
import moment from "moment"; |
|
|
|
import request from "@/util/http.js" |
|
|
|
@ -183,15 +183,22 @@ function validateInput() { |
|
|
|
function validateRedLimit() { |
|
|
|
const sumGold = parseFloat(addConsume.value.sumGold); |
|
|
|
const price = Number(addConsume.value.price || 0); |
|
|
|
const redMax = Number(user.value.red || 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) { |
|
|
|
if (isNaN(sumGold) || sumGold <= 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 + redMax < price) { |
|
|
|
if (sumGold + redAmount < price) { |
|
|
|
ElMessage.error(t('elmessage.limitRedAmount')); |
|
|
|
return false; |
|
|
|
} |
|
|
|
@ -277,7 +284,8 @@ const add = async function () { |
|
|
|
goodsName: addConsume.value.goodsName.value, |
|
|
|
remark: addConsume.value.remark, |
|
|
|
adminName: adminData.value.adminName, |
|
|
|
redMoney: Number(addConsume.value.redMoney) // 1-使用红包,0-不使用红包 |
|
|
|
redMoney: Number(addConsume.value.redMoney), // 1-使用红包,0-不使用红包 |
|
|
|
redIds: addConsume.value.redMoney === 1 ? selectedReds.value.map(item => item.id) : [] // 选中的红包ID数组 |
|
|
|
} |
|
|
|
}) |
|
|
|
addDisabled.value = false |
|
|
|
@ -331,6 +339,10 @@ function resetForm() { |
|
|
|
adminName: adminData.value.adminName, |
|
|
|
redMoney: 1 // 默认使用红包 |
|
|
|
} |
|
|
|
|
|
|
|
// 清空红包相关数据 |
|
|
|
selectedReds.value = [] |
|
|
|
redList.value = [] |
|
|
|
|
|
|
|
console.log("重置表单") |
|
|
|
|
|
|
|
@ -496,6 +508,11 @@ const getUser = async function (jwcode) { |
|
|
|
} |
|
|
|
// 验证输入 |
|
|
|
validateInput() |
|
|
|
|
|
|
|
// 如果当前开启了红包模式,获取红包列表 |
|
|
|
if (addConsume.value.redMoney === 1) { |
|
|
|
getRedList() |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} else if (!result.data) { |
|
|
|
@ -570,6 +587,110 @@ watch( |
|
|
|
); |
|
|
|
|
|
|
|
/* |
|
|
|
====================红包逻辑================================= |
|
|
|
*/ |
|
|
|
// 红包列表 |
|
|
|
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) { |
|
|
|
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 |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
/* |
|
|
|
====================挂载================================= |
|
|
|
*/ |
|
|
|
// 挂载 |
|
|
|
@ -608,10 +729,32 @@ onMounted(async function () { |
|
|
|
@blur="validateRedLimit()" /> |
|
|
|
</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-input v-model="addConsume.sumGold" style="width: 120px" @blur="validateRedLimit()" :disabled="addConsume.redMoney === 1" /> |
|
|
|
<el-radio v-model="addConsume.redMoney" :label="1" style="margin-left: 10px;">使用红包</el-radio> |
|
|
|
<el-radio v-model="addConsume.redMoney" :label="0">不使用红包</el-radio> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item v-if="addConsume.redMoney === 1" label="选择红包"> |
|
|
|
<el-select |
|
|
|
v-model="selectedReds" |
|
|
|
multiple |
|
|
|
placeholder="请选择红包" |
|
|
|
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;"> |
|
|
|
已抵扣: {{ totalRedAmount }} |
|
|
|
</span> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 三类金币自动计算(禁用状态,不可编辑) --> |
|
|
|
|