gold-vue/src/views/refund/gold/addCoinRefund.vue

<script setup>
import {computed, onMounted, reactive, ref, watch} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import API from '@/util/http.js'
import moment from 'moment'
// import _ from 'lodash'

const addRe = ref({
  typeR: '0'
})


//这是获取用户信息的接口
const adminData = ref({})
const getAdminData = async function () {
  try {
    const result = await API({url: '/admin/userinfo', data: {}})
    adminData.value = result
    addRefund.value.adminId = adminData.value.id
    console.log('请求成功', result)
    console.log('用户信息', user.value)
  } catch (error) {
    console.log('请求失败', error)
  }
}
// 精网号去空格
const trimJwCode = () => {
  if (addRefund.value.jwcode) {
    addRefund.value.jwcode = addRefund.value.jwcode.replace(/\s/g, '');
  }
}
// 这是添加退款信息的表单
const addRefund = ref({
  jwcode: '',
  goodsName: '',
  refundType: '',
  refundModel: 0,
  permanentGold: '',
  freeGold: '',
  taskGold: '',
  sumGold: 0,
  remark: '',
  adminId: null,
  orderCode: ''

})

// 取消按钮
const cancel = function () {
  addRefund.value = {
    jwcode: '',
    goodsName: '',
    refundType: '',
    refundModel: 0,
    permanentGold: '',
    freeGold: '',
    taskGold: '',
    sumGold: 0,
    remark: '',
    adminId: adminData.value.id,
    orderCode: '',
  }
  addRe.value.typeR = '0'
}


// 这是添加退款信息的接口
const add = async function () {
  try {

    // 更新 refundModel
    addRefund.value.refundModel = parseInt(addRe.value.typeR);


    // 对提交的金币数乘以 100
    const processedRefund = {
      ...addRefund.value,
      permanentGold: (Number(addRefund.value.permanentGold) || 0) * 100,
      freeGold: (Number(addRefund.value.freeGold) || 0) * 100,
      taskGold: (Number(addRefund.value.taskGold) || 0) * 100,
      sumGold: (Number(addRefund.value.sumGold) || 0) * 100
    }
    addDisabled.value = true
    // 发送POST请求
    const result = await API({
      url: '/refund/add',
      data: processedRefund
    })
    addDisabled.value = false
    if (result.code === 0) {
      ElMessage.error(result.msg)
      return
    }
    console.log('请求成功', result)
    ElMessage.success('添加成功')
    // 重置表单
    cancel()
  } catch (error) {
    console.log('请求失败', error)
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
}
//提交禁止重复点击
const addDisabled = ref(false)

// 提交退款信息前的表单验证
const addBefore = () => {
  Ref.value.validate(async (valid) => {
    if (valid) {

      // try {
      //   await getUser(addRefund.value.jwcode);
      //   if (!user.value.jwcode) {
      //     ElMessage.error('请先验证有效的精网号');
      //     return;
      //   }
      // } catch (error) {
      //   ElMessage.error('精网号验证失败');
      //   return;
      // }

      ElMessageBox.confirm('确认退款？')
          .then(() => {
            add()
            console.log('退款成功')
          })
          .catch(() => {
            console.log('取消退款')
          })
    } else {
      //提示
      ElMessage({
        type: 'error',
        message: '请检查输入内容'
      })
    }
  })
}

// 表单验证
// 开始时间改变时，重新验证结束时间
const Ref = ref(null)
const startChange = (val) => {
}
const validateJwCode = (rule, value, callback) => {
  if (!value) {
    callback(new Error('精网号不能为空'));
    return;
  }
  if (/[^0-9]/.test(value)) {
    callback(new Error('精网号只能包含数字'));
    return;
  }
  callback();
};
const rules = reactive({
  jwcode: [{required: true, validator: validateJwCode, trigger: 'blur'}],
  refundType: [{required: true, message: '请选择退款类型', trigger: 'blur'}],
  goodsName: [{required: false, message: '请选择退款商品', trigger: 'blur'}],
  // 订单号
  orderCode: [{required: true, message: '请输入订单号', trigger: 'blur'}],
  taskGold: [{required: true, message: '请输入任务金币', trigger: 'blur'}],
  freeGold: [{required: true, message: '请输入免费金币', trigger: 'blur'}],
  permanentGold: [
    {required: true, message: '请输入永久金币', trigger: 'blur'}
  ],
  sumGold: [
    {required: true, message: '请选择付款方式', trigger: 'blur'},
    {
      validator: (rule, value) => {
        if (value === 0) {
          return Promise.reject(new Error('总金币不能为0'))
        }
        return Promise.resolve()
      },
      trigger: 'blur'
    }
  ]
})


// 取消按钮
const cancelExceptJwcode = function () {
  addRefund.value = {
    jwcode: addRefund.value.jwcode, // 保留精网号
    goodsName: '',
    refundType: '',
    refundModel: 0,
    permanentGold: '',
    freeGold: '',
    taskGold: '',
    sumGold: 0,
    remark: '',
    adminId: adminData.value.id
  }
  addRe.value.typeR = '0'
}

// 查找客户信息的方法
const user = ref({
  firstRechargeTime: ''
})
const getUser = async function (jwcode) {
  trimJwCode();
  // cancelExceptJwcode();
  // 验证精网号
  if (!jwcode) {
    ElMessage.warning('精网号不能为空');
    return;
  }

  // 验证精网号是否为数字
  if (!/^\d{1,9}$/.test(jwcode)) {
    cancel()
    return;
  }
  try {
    // 发送POST请求
    const result = await API({
      url: '/user/selectUser',
      data: {
        jwcode: addRefund.value.jwcode
      }
    })
    console.log('请求成功', result)

    // 重置订单信息
    restGoods()
    //在此处错误逻辑的提示做了注释，在后续商品查询接口返回错误时，提示信息会显示在弹窗中
    if (result.code === 0) {
      ElMessage.error(result.msg);
    } else if (result.data === null) {
      ElMessage.error("用户不存在");
    } else {
      // 对传过来的金币数除以 100
      const processedData = {
        ...result.data,
        historySumGold: (Number(result.data.historySumGold) || 0) ,
        nowSumGold: (Number(result.data.nowSumGold) || 0) ,
        nowPermanentGold: (Number(result.data.nowPermanentGold) || 0) ,
        nowFreeGold: (Number(result.data.nowFreeGold) || 0) ,
        nowTaskGold: (Number(result.data.nowTaskGold) || 0) 
      }
      user.value = processedData;
      console.log("用户信息", user.value);
      //ElMessage.success(result.msg);
    }
  } catch (error) {
    console.log("请求失败", error);
    ElMessage.error("精网号错误");

  }
}


// 退款类型，写死为商品退款
const refundType = ref([{value: '商品退款', label: '商品退款'}]);

// 获取退款类型
// const getRefundTypes = async function () {
//   try {
//     // 发送请求获取退款类型
//     const result = await API({ 
//       url: '/refund/refundType', //这里应该写上一个退款类型的接口
//       data: {} })
//     console.log('退款类型请求成功', result)
//     // 检查返回的数据是否为数组
//     if (Array.isArray(result.data)) {
//       // 将字符串数组转换为 { value, label } 格式
//       refundType.value = result.data.map(item => ({ value: item, label: item }));
//     } else {
//       console.error('退款类型数据格式错误', result)
//       ElMessage.error('退款类型数据格式错误，请联系管理员')
//     }
//     console.log('退款类型', refundType.value)
//   } catch (error) {
//     console.log('退款类型请求失败', error)
//   }
// }


// 根据精网号查询商品
const goodsName = ref([]) // 存储所有商品信息
const orderCodes = ref([]) // 订单号下拉

const getGoods = async function (jwcode) {
  trimJwCode();
  if (!/^\d{1,9}$/.test(jwcode)) {
    ElMessage.warning('精网号必须为数字且不超过九位');
    return;
  }

  if (!addRefund.value.jwcode) {
    goodsName.value = []
    orderCodes.value = []
    return;
  }

  try {
    const result = await API({
      url: '/refund/selectGoods',
      data: {jwcode: addRefund.value.jwcode}
    })

    if (Array.isArray(result.data)) {
      // 存储完整商品数据
      goodsName.value = result.data.map(item => ({
        orderCode: item.orderCode,
        goodsName: item.goodsName,
        permanentGold: Math.abs(Number(item.permanentGold) || 0) ,
        freeGold: Math.abs(Number(item.freeGold) || 0) ,
        taskGold: Math.abs(Number(item.taskGold) || 0) ,
      }))

      // 转换订单号数组 [{label, value}]
      orderCodes.value = result.data.map(item => ({
        label: item.orderCode,
        value: item.orderCode
      }))
    } else {
      ElMessage.error('商品数据格式错误，请联系管理员')
    }
  } catch (error) {
    console.log('请求失败', error)
    ElMessage.error('查询商品失败，请检查精网号是否正确')
    goodsName.value = []
    orderCodes.value = []
  }
}

// 根据订单号自动带出商品名
const handleOrderChange = (orderCode) => {
  const selected = goodsName.value.find(item => item.orderCode === orderCode)
  if (selected) {
    addRefund.value.goodsName = selected.goodsName
    // 退款方式是“全部退款”时，自动填充金币
    if (addRe.value.typeR === '0') {
      addRefund.value.permanentGold = selected.permanentGold
      addRefund.value.freeGold = selected.freeGold
      addRefund.value.taskGold = selected.taskGold
    }
    // 记录选中商品金币
    selectedGoodsGold.value = {
      permanentGold: selected.permanentGold,
      freeGold: selected.freeGold,
      taskGold: selected.taskGold
    }
  } else {
    restGoods()
  }
}


// 存储选中商品的金币花费信息
const selectedGoodsGold = ref({
  permanentGold: 0,
  freeGold: 0,
  taskGold: 0
})

// 重置订单信息
const restGoods = () => {
  addRefund.value.orderCode = ''
  addRefund.value.goodsName = ''
  addRefund.value.permanentGold = ''
  addRefund.value.freeGold = ''
  addRefund.value.taskGold = ''
}



// 处理退款方式切换，当部分退款切换全部退款时，退款金额应自动重新填充
const handleRefundModelChange = () => {
  if (addRe.value.typeR === '0') {
    // 全部退款时
    addRefund.value.permanentGold = selectedGoodsGold.value.permanentGold;
    addRefund.value.freeGold = selectedGoodsGold.value.freeGold;
    addRefund.value.taskGold = selectedGoodsGold.value.taskGold;
  }
}

const handleSelectionChange = (selectedOption) => {
  if (selectedOption) {
    // 更新商品名称
    addRefund.value.goodsName = selectedOption.value;

    // 更新金币字段
    addRefund.value.permanentGold = selectedOption.permanentGold || 0;
    addRefund.value.freeGold = selectedOption.freeGold || 0;
    addRefund.value.taskGold = selectedOption.taskGold || 0;

    // 记录选中商品的金币花费
    selectedGoodsGold.value.permanentGold = Number(selectedOption.permanentGold) || 0;
    selectedGoodsGold.value.freeGold = Number(selectedOption.freeGold) || 0;
    selectedGoodsGold.value.taskGold = Number(selectedOption.taskGold) || 0;
  } else {
    // 清空逻辑保持不变
  }
  console.log('选择的商品', selectedOption);
}
// 统一的输入处理函数
const handleGoldInput = (type, value) => {
  // 1. 过滤非法字符（只允许数字和小数点）
  let filtered = value.replace(/[^\d.]/g, '');

  // 2. 防止多个小数点
  const dotCount = (filtered.match(/\./g) || []).length;
  if (dotCount > 1) {
    // 保留第一个小数点，移除后续的小数点
    const parts = filtered.split('.');
    filtered = parts[0] + '.' + parts.slice(1).join('');
  }

  // 3. 限制小数点后两位
  if (filtered.includes('.')) {
    const [integer, decimal] = filtered.split('.');
    if (decimal.length > 2) {
      filtered = `${integer}.${decimal.slice(0, 2)}`;
    }
  }

  // 4. 检查是否以小数点开头，如果是，在前面添加0
  if (filtered.startsWith('.')) {
    filtered = '0' + filtered;
  }

  // 5. 更新值
  addRefund.value[type] = filtered;

  // 6. 验证逻辑（这里直接应用修正后的值）
  const maxValue = selectedGoodsGold.value[type];
  const inputValue = Number(filtered || 0);

  if (isNaN(inputValue)) {
    return;
  }

  if (inputValue > maxValue) {
    // 修正为最大值并设置回输入框
    const correctedValue = maxValue.toFixed(2);
    addRefund.value[type] = correctedValue;
    ElMessage.warning('所填金额大于该类金币余额');
  }

  if (inputValue < 0) {
    // 修正为0并设置回输入框
    addRefund.value[type] = '0';
    ElMessage.warning('不能输入负数');
  }
}

// 使用示例
const handlePermanentGoldInput = (value) => handleGoldInput('permanentGold', value);
const handleFreeGoldInput = (value) => handleGoldInput('freeGold', value);
const handleTaskGoldInput = (value) => handleGoldInput('taskGold', value);

// 计算总金币
const calculatedRechargeGoods = computed(() => {
  const permanentGold = addRefund.value.permanentGold === '' ? 0 : +addRefund.value.permanentGold;
  const freeGold = addRefund.value.freeGold === '' ? 0 : +addRefund.value.freeGold;
  const taskGold = addRefund.value.taskGold === '' ? 0 : +addRefund.value.taskGold;
  return Number((permanentGold + freeGold + taskGold).toFixed(2));
})

watch(calculatedRechargeGoods, (newVal) => {
  addRefund.value.sumGold = newVal
  console.log('计算的总金币', newVal)
})


// 挂载
onMounted(async function () {
  await getAdminData()
  // await getRefundTypes()
  // await getGoods()
})
</script>

<template>
  <div>
    <div class="userAndForm">
      <el-form :model="addRefund" ref="Ref" :rules="rules" label-width="auto" label-position="right"
               style="max-width: 750px" class="form-style">
        <el-form-item prop="jwcode" label="精网号">
          <el-input v-model="addRefund.jwcode" style="width: 220px" @change="getGoods(addRefund.jwcode)"/>
          <el-button type="primary" @click="getUser(addRefund.jwcode)" style="margin-left: 20px">查询
          </el-button>
        </el-form-item>
        <el-form-item prop="refundType" label="退款类型">
          <el-select v-model="addRefund.refundType" placeholder="请选择" style="width: 220px">
            <el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="orderCode" label="订单号">
          <el-select
              v-model="addRefund.orderCode"
              placeholder="请选择订单号"
              style="width: 220px;"
              clearable
              filterable
              :filter-method="handleFilter"
              @change="handleOrderChange"

          >
            <el-option
                v-for="(item, index) in orderCodes"
                :key="index"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="goodsName" label="商品名">
          <el-input v-model="addRefund.goodsName" style="width: 220px" disabled/>
        </el-form-item>


        <el-form-item prop="refundModel" label="退款方式:">
          <el-radio-group v-model="addRe.typeR" @change="handleRefundModelChange">
            <el-radio value="0">全部退款</el-radio>
            <el-radio value="1">部分退款</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="permanentGold" label="永久金币">
          <el-input v-model="addRefund.permanentGold" style="width: 220px"
                    :disabled="addRe.typeR === '0' ? true : false" @input="handlePermanentGoldInput($event)"
                    type="number">
          </el-input>&nbsp;&nbsp;个
        </el-form-item>


        <el-form-item prop="freeGold" label="免费金币">
          <el-input v-model="addRefund.freeGold" style="float: left; width: 220px"
                    :disabled="addRe.typeR === '0' ? true : false" @input="handleFreeGoldInput($event)" type="number"/>
          &nbsp;&nbsp;个
        </el-form-item>

        <div>
          <el-form-item prop="taskGold" label="任务金币">
            <el-input v-model="addRefund.taskGold" style="float: left; width: 220px"
                      :disabled="addRe.typeR === '0' ? true : false" @input="handleTaskGoldInput($event)"
                      type="number"/>
            &nbsp;&nbsp;个
          </el-form-item>
        </div>
        <div>
          <el-form-item prop="sumGold" label="退款金币总数">
            <el-input disabled v-model="addRefund.sumGold" style="width: 220px">
            </el-input>
          </el-form-item>
        </div>
        <div>

          <el-form-item prop="remark" label="备注">
            <el-input v-model="addRefund.remark" style="width: 220px" :rows="3" maxlength="100" show-word-limit
                      type="textarea"/>
          </el-form-item>
        </div>

        <el-button type="success" @click="cancel()" style="margin-left: 200px">重置</el-button>
        <el-button type="primary" :disabled="addDisabled" @click="addBefore"> 提交</el-button>
      </el-form>

      <!-- 客户信息栏 -->
      <el-card v-if="user.jwcode" style="max-width: 800px" class="beautiful">
        <el-form :model="user" label-width="auto" style="max-width: 800px" label-position="left">
          <el-text size="large" style="margin-left: 20px">客户信息</el-text>

          <!-- 第一行：姓名 + 历史金币 -->
          <el-row style="margin-top: 20px">
            <el-col :span="9">
              <el-form-item label="姓名">
                <p>{{ user.name }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="当前金币总数" 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">(永久金币:{{
                    user.nowPermanentGold
                  }};
                免费金币:{{ user.nowFreeGold }};
                任务金币:{{ user.nowTaskGold }})</span>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第二行：精网号 + 当前金币（独立行） -->
          <el-row>
            <el-col :span="9">
              <el-form-item label="精网号">
                <p>{{ user.jwcode }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="充值次数">
                <p style="color: #2fa1ff">{{ user.rechargeNum }}</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-col :span="14">
              <el-form-item label="消费次数">
                <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第四行：消费次数 + 所属门店 -->
          <el-row>
            <el-col :span="9">
              <el-form-item label="所属门店">
                <p>{{ user.market }}</p>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>

</template>

<style scoped>

p {
  margin: 0px;
}

.userAndForm {
  width: 90%;
  display: flex;
  align-items: center;

}

.beautiful {
  flex: 1;
  float: right;
  margin-left: 150px;
}

.form-style {
  margin-top: 50px;
  max-width: 50%;
  float: left;
}

.el-form-item {
  margin-left: 50px;
}
</style>

<style>

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

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}


.form-style2 {
  max-width: 60%;
}


</style>