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

<script setup>
import { onMounted, reactive, ref, watch, computed } from "vue";
import { ElIcon, ElMessage } 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 { useI18n } from 'vue-i18n'
const { t } = useI18n()

const adminStore = useAdminStore();
const { adminData, menuTree } = storeToRefs(adminStore);
// 精网号去空格
const trimJwCode = () => {
  if (addConsume.value.jwcode) {
    // 去除所有空格，并尝试转换为整数
    const trimmed = addConsume.value.jwcode.toString().replace(/\s/g, '')
    const numeric = Number(trimmed)

    // 如果转换为数字成功，保存为数字，否则提示错误
    if (!isNaN(numeric)) {
      addConsume.value.jwcode = numeric
    } else {
      ElMessage.error(t('elmessage.limitDigitJwcode'))
    }
  }
}
//提交禁止重复点击
const addDisabled = ref(false)
// 通过精网号查询用户（客户）信息 表单
const user = ref({
  jwcode: null,
  name: "",
  market: "",
  red: null,
  historySumGold: null,
  historyPermanentGold: null,
  historyFreeGold: null,
  historyTaskGold: null,
  rechargeNum: null,
  consumeNum: null,
  firstRecharge: "",
  nowPermanentGold: null,
  nowFreeJune: null,
  nowTaskGold: null,
  nowFreeDecember: null,
  nowFreeGold: null,
  nowSumGold: null
})

// 这是添加消费信息的表单（金币）
const addConsume = ref({
  // jwcode 是数字
  jwcode: null, //精网号
  goodsName: "",// 商品名称
  price: null, // 原价
  sumGold: null, // 消费金币总数
  freeGold: null, // 免费金币
  permanentGold: null, // 永久金币
  taskGold: null, // 任务金币
  remark: "",//备注
  adminId: null,// 当前管理员id
  adminName: adminData.value.adminName,
  redMoney: 1 // 是否使用红包：1-使用，0-不使用
})
const Ref = ref(null)
const rules = reactive({
  jwcode: [
    { required: true, message: t('elmessage.checkJwcode'), trigger: "blur" },
  ],
  goodsName: [{ required: true, message: t('elmessage.checkGoodsName'), trigger: "change" }],
  sumGold: [
    { 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);

        if (!isValid) {
          callback(new Error(t('elmessage.limitPositiveNumber')));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
});
// 查询商品的表单
const goods = ref([])

// 输入验证函数
function validateInput() {
  const sumGold = parseFloat(addConsume.value.sumGold);
  trimJwCode();

  if (user.value.jwcode == null) {
    ElMessage.warning(t('elmessage.checkUserInfo'));
    addConsume.value.sumGold = null;
    user.value = {};
    return false;
  }

  /* 这块逻辑加到规则里面
   // 验证金币数值
    if (user.value.jwcode && (isNaN(sumGold) || sumGold <= 0)) {
      ElMessage.warning("消费金币总数必须是大于0的数字");
      // 将sumGold设置为null
      addConsume.value.sumGold = null;
      return false;
    }
    */
  // sumGold 补充0（比如.1  为0.1）
  if (addConsume.value.sumGold && addConsume.value.sumGold.toString().startsWith('.')) {
    addConsume.value.sumGold = '0' + addConsume.value.sumGold;
    // ElMessage.info('已自动补充前导0');
  }
  // 验证金币不能为负数
  if (sumGold < 0) {
    ElMessage.warning(t('elmessage.limitNegativeNumber'));
    addConsume.value.sumGold = null;
    return false;
  }

  // 小数位数限制 2位，整数位数限制 6位
  if (addConsume.value.sumGold) {
    const sumGoldStr = addConsume.value.sumGold.toString();

    // 检查整数部分长度
    if (sumGoldStr.includes('.')) {
      const integerPart = sumGoldStr.split('.')[0];
      if (integerPart.length > 6) {
        // 截断整数部分到6位并提示
        const truncatedInteger = integerPart.slice(0, 6);
        addConsume.value.sumGold = parseFloat(truncatedInteger);
        ElMessage.info(t('elmessage.limitSix'));
        return; // 直接返回，不再处理小数部分
      }
    } else {
      // 纯整数情况
      if (sumGoldStr.length > 6) {
        addConsume.value.sumGold = parseFloat(sumGoldStr.slice(0, 6));
        ElMessage.info(t('elmessage.limitSix'));
        return;
      }
    }

    // 处理小数部分
    if (sumGoldStr.includes('.')) {
      const decimalPart = sumGoldStr.split('.')[1];
      if (decimalPart.length > 2) {
        // 截断到两位小数并提示
        const truncatedValue = parseFloat(sumGoldStr.slice(0, sumGoldStr.indexOf('.') + 3));
        addConsume.value.sumGold = truncatedValue;
        ElMessage.info(t('elmessage.limitTwoDecimal'));
      }
    }
  }


  // 验证金币总和
  const totalAvailableGold = (user.value.nowSumGold)
  // 校验消耗金币数是否超过可用金币数
  if (user.value.jwcode && sumGold > totalAvailableGold) {
    if (addConsume.value.redMoney === 1) {
      ElMessage.error('红包抵扣额不足');
      // 如果红包额不足，清空已选红包
      selectedReds.value = []
    } else {
      ElMessage.error(t('elmessage.limitExceeded'));
    }
    // 将sumGold设置为null
    addConsume.value.sumGold = null;
    return false;
  }

  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);
  const parsedSumGold = parseFloat(sumGold);
  if (isNaN(parsedSumGold) || parsedSumGold <= 0 || !user.value.jwcode) {
    return { free: 0, permanent: 0, task: 0 };
  }

  const { nowFreeGold, nowPermanentGold, nowTaskGold } = user.value;
  let remaining = parsedSumGold;
  let freeUsed = 0, permanentUsed = 0, taskUsed = 0;

  // 优先消耗免费金币
  if (nowFreeGold > 0) {
    freeUsed = Math.min(parseFloat(nowFreeGold.toFixed(4)), remaining);
    remaining = parseFloat((remaining - freeUsed).toFixed(4));
  }

  // 其次消耗永久金币
  if (remaining > 0 && nowPermanentGold > 0) {
    permanentUsed = Math.min(parseFloat(nowPermanentGold.toFixed(4)), remaining);
    remaining = parseFloat((remaining - permanentUsed).toFixed(4));
  }

  // 最后消耗任务金币
  if (remaining > 0 && nowTaskGold > 0) {
    taskUsed = parseFloat(remaining.toFixed(4));
  }

  // 更新金币值
  addConsume.value.freeGold = freeUsed;
  addConsume.value.permanentGold = permanentUsed;
  addConsume.value.taskGold = taskUsed;

  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 {
    // 验证输入数据 再验证一次
    if (!validateInput()) {
      return;
    }
    // 计算金币使用情况
    calculateCoins(addConsume.value.sumGold);

    console.log("addConsume.value", addConsume.value)



    addDisabled.value = true
    // 发送POST请求
    const result = await request({
      url: "/consume/add",
      data: {
        jwcode: addConsume.value.jwcode,
        adminId: adminData.value.id,
        price: Number(addConsume.value.price || 0) * 100,
        sumGold: addConsume.value.sumGold * 100,
        freeGold: addConsume.value.freeGold * 100,
        taskGold: addConsume.value.taskGold * 100,
        permanentGold: addConsume.value.permanentGold * 100,
        goodsName: addConsume.value.goodsName.value,
        remark: addConsume.value.remark,
        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
    console.log("add请求", result);
    // 处理响应
    handleResponse(result);
    // 重置表单
    resetForm();

  } catch (error) {
    console.error("请求失败", error);
    ElMessage.error(t('elmessage.addFailed'));
  }
};

// 响应处理函数
function handleResponse(result) {
  console.log("响应结果", result)
  if (result.code === 200) {
    //存一下 用户的jwcode
    // 拼接 jwcode:permanentGold:freeGold
    WriteCookies.value = `coinConsume:${addConsume.value.jwcode}:${addConsume.value.goodsName.value}`
    //value 为当前消耗时间
    WriteCookiesTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
    // 设置cookies,用户jwcode为key，value也是jwcode，过期时间为1天
    Cookies.set(WriteCookies.value, WriteCookiesTime.value, {
      expires:
        1, path: '/'
    });
    ElMessage.success(t('elmessage.addSuccess'));
    console.log("请求成功", result);
  } else {
    ElMessage.error(result.msg || t('elmessage.addFailedUnknown'));
  }
}

// 重置表单函数
function resetForm() {
  // 清空表单数据
  Ref.value.resetFields();

  addConsume.value = {
    jwcode: null,
    goodsName: "",
    sumGold: null,
    freeGold: null,
    permanentGold: null,
    taskGold: null,
    remark: "",
    adminId: adminData.value.id,
    adminName: adminData.value.adminName,
    redMoney: 1 // 默认使用红包
  }
  
  // 清空红包相关数据
  selectedReds.value = []
  redList.value = []

  console.log("重置表单")

  user.value = {
    jwcode: null,
    name: "",
    market: "",
    historySumGold: null,
    historyPermanentGold: null,
    historyFreeGold: null,
    historyTaskGold: null,
    rechargeNum: null,
    consumeNum: null,
    firstRecharge: "",
    nowPermanentGold: null,
    nowFreeJune: null,
    nowTaskGold: null,
    nowFreeDecember: null,
    nowFreeGold: null,
    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 FirstConsumeDialogVisible = ref(false);

// 关闭对话框
const FirstConsumeDialogVisiblehandleClose = () => {
  FirstConsumeDialogVisible.value = false;
  // 重置表单数据
  resetForm()
  user.value = {}
};

// 第一次消耗
const FirstConsumeDialogVisibleContinue = () => {
  FirstConsumeDialogVisible.value = false;
  add();
};

const FirstConsumeDialogVisibleCancel = () => {
  FirstConsumeDialogVisible.value = false
  resetForm()
  user.value = {}
};

// 实际执行充值操作
// const proceedWithConsume = () => {
//   ElMessageBox.confirm('确认购买?')
//       .then(() => {
//         add();
//         console.log('添加成功');
//       })
//       .catch(() => {
//         console.log('取消添加');
//       });
// };

// 添加前验证
const addBefore = () => {
  Ref.value.validate(async (valid) => {
    // 验证cookie
    if (!valid) {
      ElMessage({
        type: 'error',
        message: t('elmessage.checkInputContent')
      });
      return;
    }
    if (!validateInput() || !validateRedLimit()) {
      return;
    }
    ReadCookies.value = `coinConsume:${addConsume.value.jwcode}:${addConsume.value.goodsName.value}`
    // 获取cookie
    const cookie = Cookies.get(ReadCookies.value)
    console.log("time", WriteCookiesTime.value)
    // 格式化时间
    ReadCookiesTime.value = moment(cookie).format('YYYY-MM-DD HH:mm:ss')
    console.log("cookie========", cookie)
    if (cookie) {
      ConsumeDialogVisible.value = true;
    } else {
      FirstConsumeDialogVisible.value = true;
    }
  });
};

// 查询客户信息（通过精网号）
const getUser = async function (jwcode) {
  try {
    // 验证精网号
    if (!jwcode) {
      ElMessage.warning(t('elmessage.noEmptyJwcode'));
      return;
    }

    // 验证精网号是否为数字
    if (!/^\d{1,9}$/.test(jwcode)) {
      ElMessage.warning(t('elmessage.limitJwcodeNine'));
      resetForm()
      return;
    }

    // 发送POST请求
    const result = await request({
      url: "/user/selectUser",
      data: { jwcode }
    });

    console.log("请求成功", result);

    if (result.code === 200 && result.data) {
      // 查询成功后，重置表单（保留精网号），防止上一个用户的数据干扰
      const currentJwcode = addConsume.value.jwcode;
      resetForm();
      addConsume.value.jwcode = currentJwcode;

      // 处理用户数据
      user.value = {
        ...result.data,
        // 统一处理所有黄金数值，除以100
        nowPermanentGold: result.data.nowPermanentGold,
        nowFreeGold: result.data.nowFreeGold,
        nowSumGold: result.data.nowSumGold,
        nowTaskGold: result.data.nowTaskGold,
        nowFreeJune: result.data.nowFreeJune,
        nowFreeDecember: result.data.nowFreeDecember,
        historySumGold: result.data.historySumGold,
        historyPermanentGold: result.data.historyPermanentGold,
        historyFreeGold: result.data.historyFreeGold,
        historyTaskGold: result.data.historyTaskGold
      };

      ElMessage.success(t('elmessage.searchSuccess'));

      // 如果当前开启了红包模式，获取红包列表
      if (addConsume.value.redMoney === 1) {
          getRedList()
      }

      // 验证输入
      validateInput()
      
    } else if (!result.data) {
      ElMessage.warning(t('elmessage.noUser'));
      user.value.jwcode = null
      addConsume.value.jwcode = null
      // resetForm(); // 重置表单
    } else {
      ElMessage.warning(result.msg || t('elmessage.checkQueryParams'));
    }
  } catch (error) {
    console.error("请求失败", error);
    ElMessage.error(t('elmessage.queryFailed'));
    resetForm(); // 重置表单
  }
};
// 获取商品信息(三楼接口)
const getGoods = async function () {
  try {
    // 发送POST请求
    const result = await request({
      // url: "/product", //
      // url: "http://39.101.133.168:8828/live_mall/api/product/all",
      url: "https://api.homilychart.com/live_mall/api/product/all",
    });
    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);
    goods.value = result.data.map(item => ({
      id: item.id,
      label: item.name,
      value: item.name,
      price: item.price
    }));
  } catch (error) {
    console.log("请求失败", error);
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
};

/*
====================监听=================================
*/

// 监听消费总金额变化，自动计算三类金币
watch(
  () => addConsume.value.sumGold,
  (newValue) => {
    const parsedNewValue = parseFloat(newValue);
    if (!isNaN(parsedNewValue) && parsedNewValue >= 0) {
      const { free, permanent, task } = calculateCoins(parsedNewValue);
      addConsume.value.freeGold = free;
      addConsume.value.permanentGold = permanent;
      addConsume.value.taskGold = task;
    } else {
      addConsume.value.freeGold = null;
      addConsume.value.permanentGold = null;
      addConsume.value.taskGold = null;
    }
  }
);

// 监听商品选择，自动展示原价
watch(
  () => addConsume.value.goodsName,
  (newGoods) => {
    if (newGoods && typeof newGoods === 'object') {
      addConsume.value.price = Number(newGoods.price || 0) || null;
    } else {
      addConsume.value.price = null;
    }
  }
);

/*
====================红包逻辑=================================
*/
// 红包列表
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
    }
})

/*
====================挂载=================================
*/
// 挂载
onMounted(async function () {
  await getGoods()
  console.log('adminData', adminData.value)
})

</script>

<template>
  <div class="father1">
    <div class="left">
      <el-form :model="addConsume" ref="Ref" :rules="rules" style="min-width: 600px;" class="add-form"
        label-width="auto" label-position="right">
        <el-form-item prop="jwcode" :label="t('common_add.jwcode')" style="margin-top: 50px">
          <el-input v-model="addConsume.jwcode" style="width: 200px;" @keyup.enter="getUser(addConsume.jwcode)" />
          <el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 20px">
            {{ t('common.search') }}
          </el-button>
        </el-form-item>

        <el-form-item prop="goodsName" :label="t('common_add.goodsName')">
          <el-select v-model="addConsume.goodsName" :placeholder="t('common_add.goodsNamePlaceholder')"
            style="width: 200px" clearable filterable>
            <el-option v-for="(item, index) in goods" :key="index" :label="item.label" :value="item" />

          </el-select>
        </el-form-item>
        <el-form-item prop="price" :label="t('common_add.price')">
          <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" @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>


        <!-- 三类金币自动计算（禁用状态，不可编辑） -->

        <el-form-item prop="permanentGold" :label="t('common_add.permanentGold')">
          <el-input v-model="addConsume.permanentGold" disabled style="width: 120px">
            <template #default="scope">{{ scope.row.permanentGold }}</template>
          </el-input>
          <p style="margin-right: 0px">&nbsp;&nbsp;{{ $t('common.个') }}</p>
        </el-form-item>

        <el-form-item prop="freeCoin" :label="t('common_add.freeGold')">
          <el-input disabled v-model="addConsume.freeGold" style="width: 120px" />
          <p style="margin-right: 0px">&nbsp;&nbsp;{{ $t('common.个') }}</p>
        </el-form-item>

        <el-form-item prop="taskGold" :label="t('common_add.taskGold')">
          <el-input disabled v-model="addConsume.taskGold" style="width: 120px" />
          <p style="margin-right: 20px">&nbsp;&nbsp;{{ $t('common.个') }}</p>
        </el-form-item>

        <el-form-item prop="remark" :label="t('common_add.remark')">
          <el-input v-model="addConsume.remark" style="width: 250px" :rows="4" maxlength="100" show-word-limit
            type="textarea" />
        </el-form-item>

        <el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">{{ t('common.reset')
        }}</el-button>
        <el-button type="primary" :disabled="addDisabled" @click="addBefore" style="margin-top:10px">{{
          t('common.submit')
        }}</el-button>
      </el-form>
    </div>

    <div class="right">
      <!-- 客户信息栏 -->
      <el-card v-if="user.jwcode" style="width: 800px; float: right" class="customer-info">
        <el-form :model="user" label-width="auto" style="max-width: 1200px" label-position="left">
          <el-text size="large" style="margin-left: 20px">{{ $t('common_add_user.customerInfo') }}</el-text>

          <!-- 第一行：姓名 + 历史金币 -->
          <el-row style="margin-top: 20px">
            <el-col :span="9">
              <el-form-item label-width="120px" :label="$t('common_add_user.name')">
                <p>{{ user.name }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item :label="$t('common_add_user.currentGoldCoinTotal')" style="width: 500px">
                <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
                  user.nowSumGold
                }}</span>
              </el-form-item>
              <!-- 金币详情独立显示 -->
              <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
                <span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">({{
                  $t('common_add_user.permanentGold') }}:{{
                    user.nowPermanentGold
                  }};
                  {{ $t('common_add_user.freeGold') }}:{{ user.nowFreeGold }};
                  {{ $t('common_add_user.taskGold') }}:{{ user.nowTaskGold }})</span>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第二行：精网号 + 当前金币（独立行） -->
          <el-row>
            <el-col :span="9">
              <el-form-item label-width="120px" :label="$t('common_add_user.jwcode')">
                <p>{{ user.jwcode }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item :label="$t('common_add_user.consumptionTimes')">
                <p style="color: #2fa1ff">{{ user.consumeNum }} </p>
              </el-form-item>
              <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
                <p style="font-size: small; color: #b1b1b1">({{ $t('common_add_user.onlyStatisticsDataAfter20250101')
                }})
                </p>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第三行：首次充值日期 + 充值次数 -->
          <!-- <el-row >
          <el-col :span="9">
            <el-form-item label="首次充值日期">
              <p v-if="user.firstRecharge">
                {{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
              </p>
            </el-form-item>
          </el-col>
       
        </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>


      <el-dialog v-model="FirstConsumeDialogVisible" :title="$t('common_add.operationConfirm')"
        :before-close="FirstConsumeDialogVisiblehandleClose" :close-on-click-modal="false" width="480px">
        <!-- 内容整体居中且收窄 -->
        <div class="confirm-body">
          <!-- 用户信息 -->
          <div>
            <div class="field-label">{{ $t('common_add.userInfo') }}</div>
            <el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled />
          </div>
          <!-- 商品名称 -->
          <div class="field">
            <div class="field-label">{{ $t('common_add.goodsName') }}</div>
            <el-input v-model="addConsume.goodsName.value" disabled />
          </div>
          <!--金币总数   -->
          <div class="field">
            <div class="field-label">{{ $t('common_add.totalGold') }}</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">{{ $t('common_add.permanentGold') }}</div>
                <el-input v-model="addConsume.permanentGold" disabled />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="field">
                <div class="field-label">{{ $t('common_add.freeGold') }}</div>
                <el-input v-model="addConsume.freeGold" disabled />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="field">
                <div class="field-label">{{ $t('common_add.taskGold') }}</div>
                <el-input v-model="addConsume.taskGold" disabled />
              </div>
            </el-col>

          </el-row>

          <div class="field">
            <div class="field-label">{{ $t('common_add.remark') }}</div>
            <el-input v-model="addConsume.remark" disabled />
          </div>
        </div>

        <!-- 底部按钮（居中） -->
        <template #footer>
          <div class="dialog-footer-center">
            <el-button @click="FirstConsumeDialogVisibleCancel">{{ $t('common.cancel') }}</el-button>
            <el-button type="primary" @click="FirstConsumeDialogVisibleContinue">{{ $t('common.confirm') }}</el-button>
          </div>
        </template>
      </el-dialog>


      <el-dialog v-model="ConsumeDialogVisible" :title="$t('common_add.operationConfirm')"
        :before-close="ConsumeDialogVisiblehandleClose" :close-on-click-modal="false" width="480px">
        <!-- 内容整体居中且收窄 -->
        <div class="confirm-body">
          <!-- 用户信息 -->
          <div>
            <div class="field-label">{{ $t('common_add.userInfo') }}</div>
            <el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled />
          </div>
          <!-- 商品名称 -->
          <div class="field">
            <div class="field-label">{{ $t('common_add.goodsName') }}</div>
            <el-input v-model="addConsume.goodsName.value" disabled />
          </div>
          <!--金币总数   -->
          <div class="field">
            <div class="field-label">{{ $t('common_add.totalGold') }}</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">{{ $t('common_add.permanentGold') }}</div>
                <el-input v-model="addConsume.permanentGold" disabled />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="field">
                <div class="field-label">{{ $t('common_add.freeGold') }}</div>
                <el-input v-model="addConsume.freeGold" disabled />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="field">
                <div class="field-label">{{ $t('common_add.taskGold') }}</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>{{ $t('common_add.prompt') }}</p>
          </div>
          <!-- 记录 + 虚线分隔 -->
          <div>
            <el-divider border-style="dashed" />
            <p>{{ $t('common_add.similarRechargeRecords') }}</p>
            · {{ ReadCookiesTime }} {{ $t('common_add.buy') }} 【{{ addConsume.goodsName.value }}】({{
              $t('common_add.operator') }}: {{ adminData.adminName }})
          </div>
          <div style="margin-top: 10px">
            <p>{{ $t('common_add.continueOperation') }}</p>

          </div>
        </div>

        <!-- 底部按钮（居中） -->
        <template #footer>
          <div class="dialog-footer-center">
            <el-button @click="ConsumeDialogVisibleCancel">{{ $t('common.cancel') }}</el-button>
            <el-button type="primary" @click="ConsumeDialogVisibleContinue">{{ $t('common.confirm') }}</el-button>
          </div>
        </template>
      </el-dialog>

    </div>
  </div>
</template>


<style scoped lang="scss">
p {
  margin: 0px;
}

/* 上传图片的格式 */
.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}

.add-form {
  width: 400px;
  float: left;
}

/* 标题居中 */
.el-dialog__header {
  text-align: center;
}

.confirm-body {
  width: 350px;
  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;
}

.father1 {
  width: 82vw;
  height: 80vh;
  display: flex;

  .left {
    width: 500px;
    float: left;
    display: flex;
  }

  .right {
    flex: 1;
    height: 50vh;
    display: flex;
    align-items: center;

    .customer-info {
      width: 300px;
      margin-left: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>