|
|
|
@ -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) { |
|
|
|
ElMessage.error(t('elmessage.limitExceeded')); |
|
|
|
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> |
|
|
|
|
ZhangYong
zhangrenyuan
jiangcheng