gold_vue/gold-system/src/views/goldBeen/addGoldenBeen.vue

<template>
  <div class="add-goldenbeen">
    <div class="head-top">新增充值</div>
    <div class="add-box">
      <el-form
        :model="beenObj"
        ref="ruleFormRef"
        :rules="rules"
        label-width="auto"
        style="max-width: 600px"
        class="add-form"
      >
        <el-form-item prop="jwcode" label="精网号">
          <el-input v-model="beenObj.jwcode" style="width: 220px" />
          <el-button
            type="primary"
            @click="getUser()"
            style="margin-left: 20px"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item prop="type" label="充值类型">
          <el-radio-group v-model="beenObj.type">
            <el-radio :value="0">增加</el-radio>
            <el-radio :value="1">减少</el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="display: flex">
          <el-form-item prop="payBeean" label="付费金豆">
            <el-input-number
              v-model="beenObj.payBeean"
              :controls="false"
              :min="0"
            />
          </el-form-item>
          <el-form-item prop="freeBeean" label="免费金豆">
            <el-input-number
              v-model="beenObj.freeBeean"
              :controls="false"
              :min="0"
            />
          </el-form-item>
        </div>

        <el-form-item prop="remark" label="备注">
          <el-input
            v-model="beenObj.remark"
            style="width: 300px"
            :rows="2"
            maxlength="100"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <!-- <el-form-item prop="submitter" label="提交人">
          <el-input
            style="width: 300px"
            :value="beenObj.submitter"
            disabled
            placeholder="提交人姓名"
          />
        </el-form-item> -->
        <el-form-item>
          <div class="btn-group">
            <el-button type="success" @click="resetData(ruleFormRef)">重置</el-button>
            <el-button type="primary" @click="addBean(ruleFormRef)">
              提交
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- 客户信息栏 -->
      <el-card>
        <el-text size="large" style="margin-left: 20px">客户信息</el-text>
        <div class="custom-box">
          <el-text>姓名:{{ user.nickname }}</el-text>
          <el-text>当前付费金豆:{{ user.jinbiBuy }}</el-text>
          <el-text>精网号:{{ user.jwcode }}</el-text>
          <el-text>当前免费金豆:{{ user.jinbiFree }}</el-text>
          <!-- <el-text>负责客服:</el-text> -->
          <el-text>消费次数:{{ user.number }}</el-text>
          <el-text>所属门店:{{ user.masterShop }}</el-text>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import API from '@/util/http'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
type userType = {
  [key: string]: number | string
}
const ruleFormRef = ref<FormInstance>()
const beenObj = ref({
  jwcode: '',
  remark: '',
  type: 0, //0是加1是减
  payBeean: 0,
  freeBeean: 0
})
let user: userType = reactive({})
const rules = ref({
  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  // submitter: [{ required: true, message: '请输入提交人', trigger: 'blur' }],
  type: [{ required: true, message: '请选择充值类型', trigger: 'change' }],
  payBeean: [{ required: true, message: '请输入付费金豆', trigger: 'blur' }],
  freeBeean: [{ required: true, message: '请输入免费金豆', trigger: 'blur' }]
})
const addBean = (formEl) => {
  // 提交表单
  try {
    formEl.validate(async (valid) => {
      if (valid) {
        // 处理表单提交逻辑
        const result = await API({
          url: '/dou/add',
          data: {
            jwcode: beenObj.value.jwcode,
            content: beenObj.value.remark,
            moneyFree: Number(beenObj.value.freeBeean),
            moneyBuy: Number(beenObj.value.payBeean),
            time: Math.floor(Date.now() / 1000),
            data: beenObj.value.type
          }
        })
        if (result.code === 200) {
          ElMessage.success('充值成功')
          beenObj.value.jwcode = ''
          beenObj.value.remark = ''
          beenObj.value.payBeean = 0
          beenObj.value.freeBeean = 0
        } else if (result.code === 0) {
          ElMessage.error(result.msg)
          return
        }
        console.log('请求成功', result)
      } else {
        ElMessage.error('表单验证失败')
      }
    })
  } catch (error) {
    ElMessage.error('提交失败')
  }
}
const resetData = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
// 精网号去空格
const trimJwCode = () => {
  if (beenObj.value.jwcode) {
    beenObj.value.jwcode = beenObj.value.jwcode.replace(/\s/g, ''); 
  }
}
const getUser = async function () {
  trimJwCode();
  try {
    // 发送POST请求
    const result = await API({
      url: '/dou/search',
      data: {
        jwcode: beenObj.value.jwcode
      }
    })
    if (result.code === 0) {
      ElMessage.error(result.msg)
    } else {
      if (!result.data.jwcode) {
        ElMessage.error('精网号不存在')
        return
      }
      Object.assign(user, result.data)
    }
  } catch (error) {
    console.log('请求失败', error)
    ElMessage.error('查询失败，请检查精网号是否正确')
  }
}
</script>
<style scoped>
.add-box {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
}
.btn-group {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.custom-box {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 20px;
  box-sizing: border-box;
  .el-text {
    width: 200px;
  }
}
.el-card {
  width: 500px;
}
.head-top {
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border-radius: 5px;
}
</style>