新增业主,奖品列表添加无限制中奖数和保底改路

This commit is contained in:
Leo_Ding 2025-09-02 16:22:33 +08:00
parent 8874a219ad
commit a71957bfe8
4 changed files with 228 additions and 15 deletions

View File

@ -13,23 +13,43 @@
</a-select>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'奖品类型'" name="type">
<a-select ref="select" v-model:value="formData.type">
<a-select-option v-for="item in lotteryTypes" :value="item.id">{{
item.name }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'奖品名称'" name="name">
<a-input :placeholder="'请输入奖品名称'" v-model:value="formData.name"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'最大中奖数'" name="maxNum">
<a-input-number :placeholder="'请输入最大中奖数'"
v-model:value="formData.maxNum" style="width: 100%;"></a-input-number>
<a-col :span="12">
<a-form-item :label="'中奖数无限制'" name="">
<a-checkbox v-model:checked="numChecked"></a-checkbox>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'中奖率'" name="probability">
<a-col :span="12">
<a-form-item :label="'保底概率'" name="">
<a-checkbox v-model:checked="probabilityChecked"></a-checkbox>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'最大中奖数'" name="maxNum" v-if="!numChecked">
<a-input-number :placeholder="'请输入最大中奖数'" v-model:value="formData.maxNum"
style="width: 100%;"></a-input-number>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'中奖率'" name="probability" v-if="!probabilityChecked">
<a-input-number :placeholder="'请输入中奖率'" v-model:value="formData.probability"
addon-after="%" style="width: 100%;"></a-input-number>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'状态'" name="status">
<a-radio-group v-model:value="formData.status" :options="[
@ -66,8 +86,15 @@ const { spining, showSpining, hideSpining } = useSpining()
const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm'))
const listData = ref([])
const lotteryTypes=ref([
{ id: 'point', name: '积分奖品' },
{ id: 'product', name: '实体奖品' },
{ id: 'none', name: '谢谢惠顾' },
])
const numChecked = ref(false)
const probabilityChecked = ref(false)
formRules.value = {
raffleId: { required: true, message: '请选择规则' },
type: { required: true, message: '请选择奖品类型' },
name: { required: true, message: '请输入奖品名称' },
maxNum: { required: true, message: '请输入最大中奖数' },
probability: { required: true, message: '请中奖率', trigger: 'change' },
@ -117,9 +144,11 @@ async function handleEdit(record = {}) {
hideSpining()
formData.value = {
...data,
probability:data.probability*100,
imgList:data.img?[config('http.apiBasic')+data.img]:[]
probability: data.probability * 100,
imgList: data.img ? [config('http.apiBasic') + data.img] : []
}
numChecked.value = data.maxNum < 0?true:false
probabilityChecked.value = data.probability < 0?true:false
} catch (error) {
message.error({ content: error.message })
hideSpining()
@ -135,8 +164,9 @@ function handleOk() {
showLoading()
const params = {
...values,
probability:formData.value.probability/100,
img:formData.value.imgList && spliceUrl(formData.value.imgList[0]),
probability:probabilityChecked.value ?-1: formData.value.probability / 100,
img: formData.value.imgList && spliceUrl(formData.value.imgList[0]),
maxNum: numChecked.value ? -1 : formData.value.maxNum,
}
let result = null
switch (modal.value.type) {

View File

@ -48,6 +48,15 @@
<template v-if="column.dataIndex === 'img'">
<a-image :width="60" :src="config('http.apiBasic') + record.img || $imageErr.imgErr" />
</template>
<template v-if="column.dataIndex === 'maxNum'">
<span v-if="record.maxNum>0">{{ record.maxNum }}</span>
<span v-if="record.maxNum<0">无限制</span>
</template>
<template v-if="column.dataIndex === 'probability'">
<span v-if="record.probability>0">{{ record.probability * 100 }}%</span>
<span v-if="record.probability<0">保底概率</span>
</template>
<template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>

View File

@ -0,0 +1,161 @@
<template>
<a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
<a-spin :spinning="spining">
<a-form ref="formRef" :model="formData" :rules="formRules">
<a-card class="mb-8-2">
<a-row :gutter="12">
<a-col :span="24">
<a-form-item :label="'联系电话'" name="phone">
<a-input :placeholder="'请输入联系电话'" v-model:value="formData.phone"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'积分'" name="point">
<a-input-number :placeholder="'请输入积分'" v-model:value="formData.point"
style="width: 100%;"></a-input-number>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'添加原因'" name="reason">
<a-textarea v-model:value="formData.reason" placeholder="输入原因"
auto-size />
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-spin>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { ref, onBeforeMount } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal, useSpining } from '@/hooks'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import GxUpload from '@/components/GxUpload/index.vue'
import { customersEnum, areaEnum } from "@/enums/useEnum"
const emit = defineEmits(['ok'])
const { t } = useI18n() // t
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { spining, showSpining, hideSpining } = useSpining()
const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm'))
const fileList = ref([])
formRules.value = {
phone: [{ required: true, message: '请输入联系电话' }],
reason: [{ required: true, message: '请输入添加原因' }],
point: [{ required: true, message: '请输入积分' }]
}
/**
* 新建
*/
function handleCreate() {
showModal({
type: 'create',
title: '新增业主',
})
}
/**
* 编辑
*/
async function handleEdit(record = {}) {
showModal({
type: 'edit',
title: '编辑客户',
})
try {
showSpining()
const { data, success } = await apis.customer.getItem(record.id).catch()
if (!success) {
hideModal()
return
}
hideSpining()
formData.value = { ...data }
formData.value.birthday = dayjs(data.birthday)
if (data.avatar) {
formData.value.fileList = [config('http.apiBasic') + data.avatar]
}
} catch (error) {
message.error({ content: error.message })
hideSpining()
}
}
const uploadSuccess = (data) => {
fileList.value.push(data)
}
/**
* 确定
*/
function handleOk() {
formRef.value.validateFields().then(async (values) => {
try {
showLoading()
const params = {
...values
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.customer.createCustomer(params).catch((error) => {
console.log(error)
throw new Error(error)
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
console.log(error)
message.error({ content: error.detail })
hideLoading()
}
})
.catch((e) => {
hideLoading()
})
}
/**
* 取消
*/
function handleCancel() {
hideModal()
}
/**
* 关闭后
*/
function onAfterClose() {
resetForm()
hideLoading()
}
defineExpose({
handleCreate,
handleEdit,
})
</script>
<style lang="less" scoped></style>

View File

@ -3,22 +3,27 @@
<template #default="{ gutter, colSpan }">
<a-form :model="searchFormData" layout="inline">
<a-row :gutter="gutter">
<a-col v-bind="colSpan">
<a-col >
<a-form-item label="姓名" name="name">
<a-input placeholder="请输入姓名" v-model:value="searchFormData.name"></a-input>
</a-form-item>
</a-col>
<a-col >
<a-form-item label="手机号" name="phone">
<a-input placeholder="请输入手机号" v-model:value="searchFormData.phone"></a-input>
</a-form-item>
</a-col>
<a-col v-bind="colSpan">
<a-col>
<a-form-item label="状态" name="status">
<a-select v-model:value="searchFormData.status" allowClear>
<a-select v-model:value="searchFormData.status" allowClear style="width: 150px;">
<a-select-option value="">全部</a-select-option>
<a-select-option value="enabled">启用</a-select-option>
<a-select-option value="disabled">停用</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col class="align-right" v-bind="colSpan">
<a-col class="align-right" >
<a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
<a-button ghost type="primary" @click="handleSearch">
@ -40,6 +45,12 @@
</template>
新增客户
</a-button>
<a-button type="primary" @click="$refs.homerDialogRef.handleCreate()" style="margin-left: 10px;">
<template #icon>
<plus-outlined></plus-outlined>
</template>
添加业主
</a-button>
</x-action-bar>
<a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
:pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
@ -78,6 +89,7 @@
</a-row>
<edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
<homer-dialog ref="homerDialogRef"></homer-dialog>
</template>
<script setup>
@ -90,6 +102,7 @@ import dayjs from 'dayjs'
import { usePagination } from '@/hooks'
import { customersEnum, areaEnum } from "@/enums/useEnum"
import EditDialog from './components/EditDialog.vue'
import HomerDialog from './components/HomerDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'
import defaultAvatar from '@/assets/default.jpg'