feat(红包功能): 添加红包选择及相关逻辑，优化金币消耗验证

src/views/consume/gold/addCoinConsume.vue

@@ -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>
 
 
         <!-- 三类金币自动计算（禁用状态，不可编辑） -->