new-zx-front-admin/src/views/system/distri/consumption/ConsumptionTopUpLogMobileForm.vue

<template>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
      :class="{ 'mobile-card': mobile }"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="转账凭证附件" prop="attachment">
            <UploadImg v-model="formData.attachment" :limit="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户" prop="userId">
            <el-select
              v-model="formData.userId"
              clearable
              filterable
              remote
              reserve-keyword
              placeholder="请输入用户名称"
              :remote-method="debouncedRemoteMethod"
              :loading="UserSearchLoading"
              style="width: 240px"
            >
              <el-option
                v-for="item in UserSearchOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <div class="flex items-center">
                  <el-avatar :size="28" :src="item.avatar" />
                  <span class="m-l-2">{{ item.username }}（{{ item.mobile }}）</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="充值金额" prop="integralPoints">
            <el-input
              v-model.number="formData.integralPoints"
              placeholder="请输入充值金额"
              :disabled="!formData.userId"
              @input="(val) => (formData.integralPoints = val.replace(/[^\d]/g, ''))"
              :maxlength="9"
            />
              
            
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实到积分" prop="">
            <span style="height: 30px;line-height: 30px;">{{ consumptionPoints }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号" prop="mobile">
            <span style="height: 30px;line-height: 30px;">{{ formData.smsCodeUseReqDTO.mobile }}</span>
            <el-button
              v-if="mobileCodeTimer <= 0"
              @click="getSmsCode"
              type="primary" 
              class="m-l-2"
            >
              {{ t('login.getSmsCode') }}
            </el-button>
            <el-button :disabled="true" v-if="mobileCodeTimer > 0" class="m-l-2">
              {{ mobileCodeTimer }}秒后可重新获取
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="验证码" prop="smsCodeUseReqDTO.code">
            <el-input
              v-model.number="formData.smsCodeUseReqDTO.code"
              placeholder="请输入验证码"
              max="4"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="bottom" >
      <el-button @click="goBack"  :disabled="formLoading">返回</el-button>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确定</el-button>

    </div>
    
 
</template>
<script setup lang="ts">
import { ConsumptionTopUpLogApi, ConsumptionTopUpLogVO } from '@/api/system/distri/consumption'
import * as UserApi from '@/api/member/user'
import { getUserProfile } from '@/api/system/user/profile'
import { debounce } from 'lodash-es'
import { sendSmsCode } from '@/api/login'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
/** 平台消费分充值记录 表单 */
defineOptions({ name: 'ConsumptionTopUpLogForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { currentRoute, push } = useRouter() // 路由跳转
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const UserSearchLoading = ref(false)
const UserSearchList = ref([])
const UserSearchOptions = ref([])
const UserSearchValue = ref([])
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = reactive({
  id: undefined,
  userId: undefined,
  attachment: undefined,
  integralPoints: undefined,
  practicalConsumptionPoints: undefined,
  userName: undefined,
  smsCodeUseReqDTO: {
    mobile: '',
    scene: '10',
    code: ''
  }
})
// 初始化或重置表单数据的函数
const resetFormData = () => {
  formData.id = undefined
  // formData.userId = undefined;
  formData.attachment = undefined
  formData.integralPoints = undefined
  formData.practicalConsumptionPoints = undefined
  formData.userName = undefined
  formData.smsCodeUseReqDTO = {
    mobile: '',
    scene: '10', // 默认值
    code: ''
  }
}
const formRules = reactive({
  integralPoints: [{ required: true, message: '充值金额不能为空', trigger: 'blur' }],
  userId: [{ required: true, message: '用户不能为空', trigger: 'blur' }],
  // attachment: [{ required: true, message: '转账凭证附件不能为空', trigger: 'blur' }],
  'smsCodeUseReqDTO.code': [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

const goBack = ()=>{
  push({
    name: 'Consumption'
  })
}
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    await ConsumptionTopUpLogApi.createConsumptionTopUpLog(formData)
    message.success(t('common.createSuccess'))
    // 发送操作成功的事件
    goBack()
  } finally {
    formLoading.value = false
  }
}

// 实际请求方法
const remoteMethod = async (query: string) => {
  if (query) {
    UserSearchLoading.value = true
    try {
      const response = await UserApi.getUserListByUsername({ username: query })
      // console.log(response)
      UserSearchOptions.value = response.map((item: any) => ({
        value: item.id,
        label: item.username,
        mobile: item.mobile,
        avatar: item.avatar,
        username: item.username
      }))
    } catch (error) {
      console.error('Error fetching data:', error)
    } finally {
      UserSearchLoading.value = false
    }
  } else {
  }
}
// 使用 lodash 防抖，延迟 200ms 触发请求
const debouncedRemoteMethod = debounce(remoteMethod, 200)

const state = reactive({
  hide: true,
  isFirstConsumption: false,
  minimumConsumptionPoints: 0,
  consumptionMagnification: '',
  triggerMagnificationPoints:'',
})
// 根据 value 查找 username
const findUsernameByValue = (value) => {
  const user = UserSearchOptions.value.find((item) => item.value === value)
  return user ? user.username : null
}
async function isUserFirstRecharge(userId: number) {
  state.hide = false
  const data = await ConsumptionTopUpLogApi.isUserFirstRecharge({ userId })
  state.isFirstConsumption = data.isFirstConsumption
  state.minimumConsumptionPoints = data.minimumConsumptionPoints
  state.consumptionMagnification = data.consumptionMagnification
  state.triggerMagnificationPoints = data.triggerMagnificationPoints
}
// 监听 el-select 选项值的变化
watch(
  () => formData.userId,
  (newValue) => {
    if (!newValue) {
      return
    }
    isUserFirstRecharge(newValue)
    formData.userName = findUsernameByValue(newValue)
  }
)
const consumptionPoints = computed(() => {
  if (!formData.integralPoints) {
    return 0
  }
  let point;
  if(formData.integralPoints >= parseFloat(state.triggerMagnificationPoints)){
    point = (formData.integralPoints * parseFloat(state.consumptionMagnification)).toFixed(2)
  }else{
    point = formData.integralPoints
  }
  return point
})

const smsVO = reactive({
  smsCode: {
    mobile: '',
    scene: 10
  }
})
const mobileCodeTimer = ref(0)
const getSmsCode = async () => {
  smsVO.smsCode.mobile = formData.smsCodeUseReqDTO.mobile
  await sendSmsCode(smsVO.smsCode).then(async () => {
    message.success(t('login.SmsSendMsg'))
    // 设置倒计时
    mobileCodeTimer.value = 60
    let msgTimer = setInterval(() => {
      mobileCodeTimer.value = mobileCodeTimer.value - 1
      if (mobileCodeTimer.value <= 0) {
        clearInterval(msgTimer)
      }
    }, 1000)
  })
}

// 获取当前登录用户的手机号并且回填
const getUserInfo = async () => {
  const users = await getUserProfile()
  formData.smsCodeUseReqDTO.mobile = users.mobile
}

onMounted( async() => {
  await getUserInfo()
})
</script>
<style src="@/styles/MobileTab.css" lang="scss" scoped></style>
<style scoped>
  ::v-deep .el-form-item{
		/* border-bottom: 1px solid #ebeef5; */
		margin: 0;
    padding: 14px 0 ;
	}
  .w-31{
	flex: 1;
  font-size: 0.8rem
}
.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: white;
	padding: 1rem;
	box-sizing: border-box;
  display: flex;
	.el-button {
		flex: 1;
	}
}
</style>