gold_vue/gold-system/src/views/refund/addRefund.vue

<script setup>
import { onMounted, reactive } from 'vue'
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import API from '@/util/http'
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.adminId
    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({
  updateType: '3',
  allCoin: 0,
  orderCode: '',
  refundGoods: '',
  freeCoin: 0,
  rechargeCoin: 0,
  taskCoin: 0
})
// 取消按钮
const cancel = function () {
  addRefund.value = {}
  addRefund.value.updateType = '3'
  addRefund.value.rechargeCoin = 0
  addRefund.value.freeCoin = 0
  addRefund.value.taskCoin = 0
  addRefund.value.allCoin = 0
  addRe.value.typeR = 0
  addRefund.value.adminId = adminData.value.adminId
}
// 这是添加退款信息的接口
const add = async function () {
  try {
    // 发送POST请求
    const result = await API({ url: '/refund/add', data: addRefund.value })
    if (result.code === 0) {
      ElMessage.error(result.msg)
      return
    }
    console.log('请求成功', result)
    ElMessage.success('添加成功')
    // 重置表单
    addRefund.value = {}
    addRefund.value.adminId = adminData.value.adminId
    addRefund.value.updateType = '3'
    addRefund.value.allCoin = 0
    addRefund.value.orderCode = ''
    addRefund.value.refundGoods = ''
    addRefund.value.freeCoin = 0
    addRefund.value.rechargeCoin = 0
    addRefund.value.taskCoin = 0
    addRefund.value.typeR = 0
    user.value = {}
  } catch (error) {
    console.log('请求失败', error)
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
}
const addBefore = () => {
  Ref.value.validate(async (valid) => {
    if (valid) {
      ElMessageBox.confirm('确认添加？')
        .then(() => {
          add()
          console.log('添加成功')
          addRefund.value.allCoin = 0
          ;(addRefund.value.freeCoin = 0),
            (addRefund.value.rechargeCoin = 0),
            (addRefund.value.taskCoin = 0),
            (addRefund.value = {})
        })
        .catch(() => {
          console.log('取消添加')
        })
    } else {
      //提示
      ElMessage({
        type: 'error',
        message: '请检查输入内容'
      })
    }
  })
}

// 表单验证
// 开始时间改变时，重新验证结束时间
const Ref = ref(null)
const startChange = (val) => {}

const rules = reactive({
  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
  refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
  orderCode: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
  taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' },
    {
      validator: (rule, value) => {
        if (value < 0) {
          return Promise.reject(new Error('任务金币至少为0'))
        }
        return Promise.resolve()
      }, 
    }
  ],
  freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' },
    {
      validator: (rule, value) => {
        if (value < 0) {
          return Promise.reject(new Error('免费金币至少为0'))
        }
        return Promise.resolve()
      }, 
    }
  ],
  rechargeCoin: [
    { required: true, message: '请输入永久金币', trigger: 'blur' },
    {
      validator: (rule, value) => {
        if (value < 0) {
          return Promise.reject(new Error('永久金币至少为0'))
        }
        return Promise.resolve()
      }, 
    }
  ],
  allCoin: [
    { required: true, message: '请选择付款方式', trigger: 'blur' },
    {
      validator: (rule, value) => {
        if (value === 0) {
          return Promise.reject(new Error('总金币不能为0'))
        }
        return Promise.resolve()
      },
      trigger: 'blur'
    }
  ]
})

// 查找客户信息的方法
const user = ref({
  firstRechargeTime: ''
})
const getUser = async function (jwcode) {
  trimJwCode();
  try {
    // 发送POST请求
    const result = await API({
      url: '/recharge/user',
      data: {
        jwcode: addRefund.value.jwcode,
        area: adminData.value.area
      }
    })
    console.log('请求成功', result)

    //在此处错误逻辑的提示做了注释，在后续商品查询接口返回错误时，提示信息会显示在弹窗中
    if (result.code === 0) {
      
      //ElMessage.error(result.msg)
    } else {
      user.value = result.data
      user.value.A =
        Number(user.value.pendingRechargeTimes) +
        Number(user.value.pendingSpendTimes)
      console.log('用户信息', user.value)
      //ElMessage.success(result.msg)
    }
  } catch (error) {
    console.log('请求失败', error)
    ElMessage.error('查询失败，请检查精网号是否正确')
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
}
const calculatedAllGold = computed(() => {
  const sum =
    Number(addRefund.value.freeCoin) +
    Number(addRefund.value.rechargeCoin) +
    Number(addRefund.value.taskCoin)
  return !isNaN(sum) ? sum : 0
})

watch(calculatedAllGold, (newVal) => {
  addRefund.value.allCoin = newVal
})

const AAA = computed(() => {
  return addRefund.value.jwcode
})

watch(AAA, (newVal) => {})

// 退款类型选项
const refundType = [
  {
    value: '退款商品',
    label: '退款商品'
  }
]

// 根据精网号查询商品
// 查什么？？？？？
const goods = ref([])
const getGoods = async function (jwcode) {
  trimJwCode();
  try {
    // 发送POST请求
    const result = await API({
      url: '/consume/getDeatil',
      data: {
        jwcode: addRefund.value.jwcode,
        area: adminData.value.area
      }
    })
    console.log('请求成功', result)

    if (result.code === 0) {
      ElMessage.error(result.msg)
    } else {
      // 存储表格数据
      goods.value = result.data
      console.log('用户信息', goods.value)
      ElMessage.success(result.msg)
    }
  } catch (error) {
    console.log('请求失败', error)
    ElMessage.error('查询失败，请检查精网号是否正确')
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
}
const calculatedRechargeGoods = computed(() => {
  return (
    +addRefund.value.freeCoin +
    +addRefund.value.rechargeCoin +
    +addRefund.value.taskCoin
  )
})
watch(calculatedRechargeGoods, (newVal) => {
  addRefund.value.allCoin = newVal
})
watch(calculatedRechargeGoods, (newVal) => {
  addRefund.value.allCoin = newVal
  console.log('计算的总金币', newVal)
})

// 绑定两个数据

// 这是根据订单号查询消费信息的方法
const getProductByOrderCode = async function (item) {
  try {
    // 发送POST请求
    const result = await API({
      url: '/refund/searchByOrderCode?orderCode=' + item,
      data: {}
    })
    addRefund.value.contactId = result.data.detailyId
    addRefund.value.refundGoods = result.data.productName
    addRefund.value.orderCode = result.data.orderCode
    addRefund.value.taskCoin = (result.data.taskCoin * -1) / 100
    addRefund.value.freeCoin = (result.data.freeCoin * -1) / 100
    addRefund.value.rechargeCoin = (result.data.rechargeCoin * -1) / 100
    addRefund.value.allCoin =
      (result.data.taskCoin * -1 +
        result.data.freeCoin * -1 +
        result.data.rechargeCoin * -1) /
      100
    console.log('请求成功', addRefund.value)
    if (result.data.code === 0) {
      ElMessage.error(result.data.msg)
    } else {
      ElMessage.success('选择成功')
    }
  } catch (error) {
    console.log('请求失败', error)
    ElMessage.error('查询失败，请检查精网号是否正确')
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
}
const handleSelectionChange = (value) => {
  getProductByOrderCode(value)
  console.log('选择的订单号', value)
  const selectedItem = goods.value.find((item) => item.detailId === value)
}
// 挂载
onMounted(async function () {
  await getAdminData()
})
</script>

<template>
  <div style="font-weight: bold">新增退款</div>

  <el-form
    :model="addRefund"
    ref="Ref"
    :rules="rules"
    label-width="auto"
    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: 300px"
      >
        <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: 300px"
        @change="handleSelectionChange"
      >
        <el-option
          v-for="item in goods"
          :key="item.value"
          :label="item.productName + item.orderCode"
          :value="item.orderCode"
        />
      </el-select>
    </el-form-item>

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

    <div style="display: flex; align-items: center">
      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
        <el-input
          v-model="addRefund.rechargeCoin"
          style="width: 100px"
          :disabled="addRe.typeR === '0' ? true : false"
        >
        </el-input>
        <p>个</p>
      </el-form-item>
      <el-form-item
        prop="freeCoin"
        label="免费金币"
        style="margin-left: -20px; float: left"
      >
        <el-input
          v-model="addRefund.freeCoin"
          style="float: left; width: 100px"
          :disabled="addRe.typeR === '0' ? true : false"
        />
        <p>个</p>
      </el-form-item>
      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
        <el-input
          v-model="addRefund.taskCoin"
          style="float: left; width: 100px"
          :disabled="addRe.typeR === '0' ? true : false"
        />
        <p>个</p>
      </el-form-item>
    </div>
    <el-form-item prop="allCoin" label="退款金币总数">
      <el-input disabled v-model="addRefund.allCoin" style="width: 100px">
      </el-input>
    </el-form-item>
    <el-form-item prop="remark" label="备注">
      <el-input
        v-model="addRefund.remark"
        style="width: 300px"
        :rows="2"
        maxlength="100"
        show-word-limit
        type="textarea"
      />
    </el-form-item>
    <el-form-item prop="commitName" label="提交人">
      <el-input
        style="width: 300px"
        :value="adminData.name"
        disabled
        placeholder="提交人姓名"
      />
    </el-form-item>
    <el-button type="success" @click="cancel()" style="margin-left: 280px">重置</el-button>
    <el-button type="primary" @click="addBefore"> 提交 </el-button>
  </el-form>

  <!-- 客户信息栏 -->
  <el-card style="width: 850px; float: right" class="customer-info">
    <el-form
      :model="user"
      label-width="auto"
      style="max-width: 1000px"
      label-position="left"
    >
      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
      <el-row style="margin-top: 20px">
        <el-col :span="10">
          <el-form-item label="姓名:">
            <p>{{ user.name }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="历史金币总数">
            <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
            <p v-if="!isNaN(Number(user.totalRechargeGold))">
              {{ Number(user.totalRechargeGold / 100) }}
            </p>
            <!-- 如果不是有效的数字，显示默认值 -->
            <p v-else></p>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="精网号">
            <p>{{ user.jwcode }}</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.buyJb !== undefined"
              >{{
                (user.buyJb + user.free6 + user.free12 + user.coreJb) / 100
              }}</span
            >
            <span
              style="display: inline; white-space: nowrap; color: #b1b1b1"
              v-if="user.buyJb !== undefined"
              >(永久金币:{{ user.buyJb / 100 }};免费金币:{{
                (user.free6 + user.free12) / 100
              }};任务金币:{{ user.coreJb / 100 }})</span
            >
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="首次充值日期">
            <p v-if="user.firstRechargeDate">
              {{ moment(user.firstRechargeDate).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.rechargeTimes }}</p>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="10">
          <el-form-item label="负责客服">
            <p>{{ adminData.name }}</p>
          </el-form-item>
        </el-col> -->
        <el-col :span="10">
          <el-form-item label="消费次数">
            <p style="color: #2fa1ff">{{ user.spendTimes }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="所属门店">
            <p>{{ adminData.area }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <!-- <el-form-item label="待审核">
            <p style="color: #2fa1ff">
              {{ user.A }}
            </p>
          </el-form-item> -->
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<style scoped>
p {
  margin: 0px;
}

.el-form-item {
  margin-left: 50px;
}

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

<style>
.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-style {
  margin-top: 50px;
  max-width: 50%;
  float: left;
}

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

p {
  font-size: 13px;
  transform: scale(1);
}
</style>