[色子游戏]玩家抽奖记录-优化样式

This commit is contained in:
2026-03-03 16:21:41 +08:00
parent 3606d4635e
commit 878dbbf578
7 changed files with 444 additions and 124 deletions

View File

@@ -61,5 +61,26 @@ export default {
url: '/dice/play_record/DicePlayRecord/destroy',
data: params
})
},
/** 获取玩家选项id、username */
getPlayerOptions() {
return request.get<{ id: number; username: string }[]>({
url: '/dice/play_record/DicePlayRecord/getPlayerOptions'
})
},
/** 获取彩金池配置选项id、name */
getLotteryConfigOptions() {
return request.get<{ id: number; name: string }[]>({
url: '/dice/play_record/DicePlayRecord/getLotteryConfigOptions'
})
},
/** 获取奖励配置选项id、ui_text、tier */
getRewardConfigOptions() {
return request.get<{ id: number; ui_text: string; tier: string }[]>({
url: '/dice/play_record/DicePlayRecord/getRewardConfigOptions'
})
}
}

View File

@@ -8,7 +8,11 @@
<ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
<template #left>
<ElSpace wrap>
<ElButton v-permission="'dice:play_record:index:save'" @click="showDialog('add')" v-ripple>
<ElButton
v-permission="'dice:play_record:index:save'"
@click="showDialog('add')"
v-ripple
>
<template #icon>
<ArtSvgIcon icon="ri:add-fill" />
</template>
@@ -42,6 +46,22 @@
@pagination:size-change="handleSizeChange"
@pagination:current-change="handleCurrentChange"
>
<!-- 彩金池配置 tag -->
<template #lottery_config_id="{ row }">
<ElTag size="small">{{ lotteryConfigNameFormatter(row) }}</ElTag>
</template>
<!-- 抽奖类型 tag -->
<template #lottery_type="{ row }">
<ElTag size="small" :type="row.lottery_type === 0 ? 'warning' : 'success'">
{{ row.lottery_type === 0 ? '付费' : row.lottery_type === 1 ? '赠送' : '-' }}
</ElTag>
</template>
<!-- 中奖 tag -->
<template #is_win="{ row }">
<ElTag size="small" :type="row.is_win === 1 ? 'success' : 'info'">
{{ row.is_win === 0 ? '无' : row.is_win === 1 ? '中奖' : '-' }}
</ElTag>
</template>
<!-- 操作列 -->
<template #operation="{ row }">
<div class="flex gap-2">
@@ -77,11 +97,16 @@
import TableSearch from './modules/table-search.vue'
import EditDialog from './modules/edit-dialog.vue'
// 搜索表单
const searchForm = ref({
const searchForm = ref<Record<string, unknown>>({
username: undefined,
lottery_config_name: undefined,
lottery_type: undefined,
lottery_name: undefined,
is_win: undefined,
win_coin_min: undefined,
win_coin_max: undefined,
reward_ui_text: undefined,
reward_tier: undefined
})
// 搜索处理
@@ -90,6 +115,13 @@
getData()
}
const usernameFormatter = (row: Record<string, any>) =>
row?.dicePlayer?.username ?? row?.player_id ?? '-'
const lotteryConfigNameFormatter = (row: Record<string, any>) =>
row?.diceLotteryConfig?.name ?? row?.lottery_config_id ?? '-'
const rewardTierFormatter = (row: Record<string, any>) =>
row?.diceRewardConfig?.tier ?? row?.reward_config_id ?? '-'
// 表格配置
const {
columns,
@@ -109,14 +141,28 @@
apiFn: api.list,
columnsFactory: () => [
{ type: 'selection' },
{ prop: 'player_id', label: '玩家id' },
{ prop: 'lottery_config_id', label: '彩金池配置' },
{ prop: 'lottery_type', label: '抽奖类型' },
{ prop: 'is_win', label: '中奖' },
{ prop: 'id', label: 'ID', width: 80 },
{
prop: 'player_id',
label: '玩家',
formatter: (row: Record<string, any>) => usernameFormatter(row)
},
{
prop: 'lottery_config_id',
label: '彩金池配置',
width: 120,
useSlot: true
},
{ prop: 'lottery_type', label: '抽奖类型', width: 100, useSlot: true },
{ prop: 'is_win', label: '中奖', width: 80, useSlot: true },
{ prop: 'win_coin', label: '赢取平台币' },
{ prop: 'reward_config_id', label: '奖励配置id' },
{ prop: 'lottery_id', label: '奖池' },
{ prop: 'lottery_name', label: '奖池名' },
{
prop: 'reward_config_id',
label: '奖励配置',
formatter: (row: Record<string, any>) => rewardTierFormatter(row)
},
{ prop: 'create_time', label: '创建时间', width: 170 },
{ prop: 'update_time', label: '修改时间', width: 170 },
{ prop: 'operation', label: '操作', width: 100, fixed: 'right', useSlot: true }
]
}
@@ -133,5 +179,4 @@
handleSelectionChange,
selectedRows
} = useSaiAdmin()
</script>

View File

@@ -8,34 +8,98 @@
@close="handleClose"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="玩家id" prop="player_id">
<el-cascader v-model="formData.player_id" :options="[]" placeholder="请选择玩家id" allow-clear />
<el-form-item label="玩家" prop="player_id">
<el-select
v-model="formData.player_id"
placeholder="请选择玩家(显示用户名)"
clearable
filterable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option
v-for="item in playerOptions"
:key="item.id"
:label="item.username"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="彩金池配置" prop="lottery_config_id">
<el-cascader v-model="formData.lottery_config_id" :options="[]" placeholder="请选择彩金池配置" allow-clear />
<el-select
v-model="formData.lottery_config_id"
placeholder="请选择彩金池配置"
clearable
filterable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option
v-for="item in lotteryConfigOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="抽奖类型" prop="lottery_type">
<el-select v-model="formData.lottery_type" :options="[]" placeholder="请选择抽奖类型" clearable />
<el-select
v-model="formData.lottery_type"
placeholder="请选择"
clearable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option label="付费" :value="0" />
<el-option label="赠送" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="中奖" prop="is_win">
<el-select v-model="formData.is_win" :options="[]" placeholder="请选择中奖" clearable />
<el-select
v-model="formData.is_win"
placeholder="请选择"
clearable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option label="无" :value="0" />
<el-option label="中奖" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="赢取平台币" prop="win_coin">
<el-input-number v-model="formData.win_coin" placeholder="请输入赢取平台币" />
<el-input-number
v-model="formData.win_coin"
placeholder="请输入赢取平台币"
:precision="2"
style="width: 100%"
:disabled="dialogType === 'edit'"
/>
</el-form-item>
<el-form-item label="奖励配置id" prop="reward_config_id">
<el-cascader v-model="formData.reward_config_id" :options="[]" placeholder="请选择奖励配置id" allow-clear />
</el-form-item>
<el-form-item label="奖池" prop="lottery_id">
<el-cascader v-model="formData.lottery_id" :options="[]" placeholder="请选择奖池" allow-clear />
</el-form-item>
<el-form-item label="奖池名" prop="lottery_name">
<el-input v-model="formData.lottery_name" placeholder="请输入奖池名" />
<el-form-item label="奖励配置" prop="reward_config_id">
<el-select
v-model="formData.reward_config_id"
placeholder="请选择奖励配置(显示前端文本)"
clearable
filterable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option
v-for="item in rewardConfigOptions"
:key="item.id"
:label="
item.ui_text
? `${item.ui_text}${item.tier ? ' (' + item.tier + ')' : ''}`
: String(item.id)
"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button @click="handleClose">{{ dialogType === 'edit' ? '关闭' : '取消' }}</el-button>
<el-button v-if="dialogType === 'add'" type="primary" @click="handleSubmit">提交</el-button>
</template>
</el-dialog>
</template>
@@ -66,103 +130,103 @@
const formRef = ref<FormInstance>()
/**
* 弹窗显示状态双向绑定
*/
const visible = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
/**
* 表单验证规则
*/
const rules = reactive<FormRules>({
player_id: [{ required: true, message: '玩家id必需填写', trigger: 'blur' }],
lottery_config_id: [{ required: true, message: '彩金池配置必需填写', trigger: 'blur' }],
lottery_type: [{ required: true, message: '抽奖类型必需填写', trigger: 'blur' }],
is_win: [{ required: true, message: '中奖必需填写', trigger: 'blur' }],
win_coin: [{ required: true, message: '赢取平台币必需填写', trigger: 'blur' }],
reward_config_id: [{ required: true, message: '奖励配置id必需填写', trigger: 'blur' }],
lottery_id: [{ required: true, message: '奖池必需填写', trigger: 'blur' }],
lottery_name: [{ required: true, message: '奖池名必需填写', trigger: 'blur' }],
player_id: [{ required: true, message: '请选择玩家', trigger: 'change' }],
lottery_config_id: [{ required: true, message: '请选择彩金池配置', trigger: 'change' }],
lottery_type: [{ required: true, message: '请选择抽奖类型', trigger: 'change' }],
is_win: [{ required: true, message: '请选择中奖', trigger: 'change' }],
win_coin: [{ required: true, message: '赢取平台币必', trigger: 'blur' }],
reward_config_id: [{ required: true, message: '请选择奖励配置', trigger: 'change' }]
})
/**
* 初始数据
*/
const playerOptions = ref<Array<{ id: number; username: string }>>([])
const lotteryConfigOptions = ref<Array<{ id: number; name: string }>>([])
const rewardConfigOptions = ref<Array<{ id: number; ui_text: string; tier: string }>>([])
const initialFormData = {
id: null,
player_id: null,
lottery_config_id: null,
lottery_type: null,
is_win: null,
win_coin: null,
reward_config_id: null,
lottery_id: null,
lottery_name: '',
id: null as number | null,
player_id: null as number | null,
lottery_config_id: null as number | null,
lottery_type: null as number | null,
is_win: null as number | null,
win_coin: null as number | null,
reward_config_id: null as number | null
}
/**
* 表单数据
*/
const formData = reactive({ ...initialFormData })
/**
* 监听弹窗打开,初始化表单数据
*/
watch(
() => props.modelValue,
(newVal) => {
if (newVal) {
async (open) => {
if (open) {
initPage()
try {
const [players, lotteryConfigs, rewardConfigs] = await Promise.all([
api.getPlayerOptions(),
api.getLotteryConfigOptions(),
api.getRewardConfigOptions()
])
playerOptions.value = Array.isArray(players) ? players : ((players as any)?.data ?? [])
lotteryConfigOptions.value = Array.isArray(lotteryConfigs)
? lotteryConfigs
: ((lotteryConfigs as any)?.data ?? [])
rewardConfigOptions.value = Array.isArray(rewardConfigs)
? rewardConfigs
: ((rewardConfigs as any)?.data ?? [])
} catch {
playerOptions.value = []
lotteryConfigOptions.value = []
rewardConfigOptions.value = []
}
}
}
)
/**
* 初始化页面数据
*/
const initPage = async () => {
// 先重置为初始值
Object.assign(formData, initialFormData)
// 如果有数据,则填充数据
Object.assign(formData, { ...initialFormData })
if (props.data) {
await nextTick()
initForm()
}
}
/**
* 初始化表单数据
*/
const initForm = () => {
if (props.data) {
for (const key in formData) {
if (props.data[key] != null && props.data[key] != undefined) {
;(formData as any)[key] = props.data[key]
}
}
if (!props.data) return
const keys = [
'id',
'player_id',
'lottery_config_id',
'lottery_type',
'is_win',
'win_coin',
'reward_config_id'
]
keys.forEach((key) => {
const val = props.data![key]
if (val != null && val !== undefined) {
;(formData as Record<string, unknown>)[key] = val
}
})
}
/**
* 关闭弹窗并重置表单
*/
const handleClose = () => {
visible.value = false
formRef.value?.resetFields()
}
/**
* 提交表单
*/
const handleSubmit = async () => {
if (!formRef.value) return
try {
await formRef.value.validate()
if (props.dialogType === 'add') {
await api.save(formData)
const rest = { ...formData } as Record<string, unknown>
delete rest.id
await api.save(rest)
ElMessage.success('新增成功')
} else {
await api.update(formData)

View File

@@ -2,20 +2,73 @@
<sa-search-bar
ref="searchBarRef"
v-model="formData"
label-width="100px"
label-width="120px"
:showExpand="false"
@reset="handleReset"
@search="handleSearch"
@expand="handleExpand"
>
<el-col v-bind="setSpan(6)">
<el-form-item label="抽奖类型" prop="lottery_type">
<el-select v-model="formData.lottery_type" :options="[]" placeholder="请选择抽奖类型" clearable />
<el-form-item label="玩家" prop="username">
<el-input v-model="formData.username" placeholder="用户名模糊" clearable />
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="奖池名" prop="lottery_name">
<el-input v-model="formData.lottery_name" placeholder="请输入奖池名" clearable />
<el-form-item label="彩金池配置" prop="lottery_config_name">
<el-input v-model="formData.lottery_config_name" placeholder="名称模糊" clearable />
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="抽奖类型" prop="lottery_type">
<el-select v-model="formData.lottery_type" placeholder="全部" clearable style="width: 100%">
<el-option label="付费" :value="0" />
<el-option label="赠送" :value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="中奖" prop="is_win">
<el-select v-model="formData.is_win" placeholder="全部" clearable style="width: 100%">
<el-option label="无" :value="0" />
<el-option label="中奖" :value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="赢取平台币" prop="win_coin_min">
<div class="range-wrap">
<el-input-number
v-model="formData.win_coin_min"
placeholder="最小"
:precision="2"
controls-position="right"
class="range-input"
/>
<span class="range-sep"></span>
<el-input-number
v-model="formData.win_coin_max"
placeholder="最大"
:precision="2"
controls-position="right"
class="range-input"
/>
</div>
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="奖励配置" prop="reward_ui_text">
<el-input v-model="formData.reward_ui_text" placeholder="前端显示文本模糊" clearable />
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="中奖名(档位)" prop="reward_tier">
<el-select v-model="formData.reward_tier" placeholder="全部" clearable style="width: 100%">
<el-option label="T1" value="T1" />
<el-option label="T2" value="T2" />
<el-option label="T3" value="T3" />
<el-option label="T4" value="T4" />
<el-option label="T5" value="T5" />
</el-select>
</el-form-item>
</el-col>
</sa-search-bar>
@@ -32,41 +85,52 @@
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()
// 展开/收起
const isExpanded = ref<boolean>(false)
// 表单数据双向绑定
const searchBarRef = ref()
const formData = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
// 重置
function handleReset() {
searchBarRef.value?.ref.resetFields()
emit('reset')
}
// 搜索
async function handleSearch() {
emit('search', formData.value)
}
// 展开/收起
function handleExpand(expanded: boolean) {
isExpanded.value = expanded
}
// 栅格占据的列数
const setSpan = (span: number) => {
return {
span: span,
xs: 24, // 手机:满宽显示
sm: span >= 12 ? span : 12, // 平板大于等于12保持否则用半宽
md: span >= 8 ? span : 8, // 中等屏幕大于等于8保持否则用三分之一宽
const setSpan = (span: number) => ({
span,
xs: 24,
sm: span >= 12 ? span : 12,
md: span >= 8 ? span : 8,
lg: span,
xl: span
}
}
})
</script>
<style lang="scss" scoped>
.range-wrap {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.range-input {
flex: 1;
min-width: 0;
}
.range-sep {
color: var(--el-text-color-secondary);
flex-shrink: 0;
}
</style>

View File

@@ -9,6 +9,9 @@ namespace app\dice\controller\play_record;
use plugin\saiadmin\basic\BaseController;
use app\dice\logic\play_record\DicePlayRecordLogic;
use app\dice\validate\play_record\DicePlayRecordValidate;
use app\dice\model\player\DicePlayer;
use app\dice\model\lottery_config\DiceLotteryConfig;
use app\dice\model\reward_config\DiceRewardConfig;
use plugin\saiadmin\service\Permission;
use support\Request;
use support\Response;
@@ -37,8 +40,14 @@ class DicePlayRecordController extends BaseController
public function index(Request $request): Response
{
$where = $request->more([
['username', ''],
['lottery_config_name', ''],
['lottery_type', ''],
['lottery_name', ''],
['is_win', ''],
['win_coin_min', ''],
['win_coin_max', ''],
['reward_ui_text', ''],
['reward_tier', ''],
]);
$query = $this->logic->search($where);
$query->with([
@@ -50,6 +59,49 @@ class DicePlayRecordController extends BaseController
return $this->success($data);
}
/**
* 获取玩家选项id、username
*/
#[Permission('玩家抽奖记录列表', 'dice:play_record:index:index')]
public function getPlayerOptions(Request $request): Response
{
$list = DicePlayer::field('id,username')->select();
$data = $list->map(function ($item) {
return ['id' => $item['id'], 'username' => $item['username'] ?? ''];
})->toArray();
return $this->success($data);
}
/**
* 获取彩金池配置选项id、name
*/
#[Permission('玩家抽奖记录列表', 'dice:play_record:index:index')]
public function getLotteryConfigOptions(Request $request): Response
{
$list = DiceLotteryConfig::field('id,name')->select();
$data = $list->map(function ($item) {
return ['id' => $item['id'], 'name' => $item['name'] ?? ''];
})->toArray();
return $this->success($data);
}
/**
* 获取奖励配置选项id、ui_text、tier
*/
#[Permission('玩家抽奖记录列表', 'dice:play_record:index:index')]
public function getRewardConfigOptions(Request $request): Response
{
$list = DiceRewardConfig::field('id,ui_text,tier')->select();
$data = $list->map(function ($item) {
return [
'id' => $item['id'],
'ui_text' => $item['ui_text'] ?? '',
'tier' => $item['tier'] ?? ''
];
})->toArray();
return $this->success($data);
}
/**
* 读取数据
* @param Request $request

View File

@@ -44,14 +44,7 @@ class DicePlayRecord extends BaseModel
protected $table = 'dice_play_record';
/**
* 奖池名 搜索
*/
public function searchLotteryNameAttr($query, $value)
{
$query->where('lottery_name', 'like', '%'.$value.'%');
}
/**
* 玩家
* 关联模型 dicePlayer
*/
public function dicePlayer(): BelongsTo
@@ -60,6 +53,7 @@ class DicePlayRecord extends BaseModel
}
/**
* 中奖配置
* 关联模型 diceRewardConfig
*/
public function diceRewardConfig(): BelongsTo
@@ -68,6 +62,7 @@ class DicePlayRecord extends BaseModel
}
/**
* 彩金配置
* 关联模型 diceLotteryConfig
*/
public function diceLotteryConfig(): BelongsTo
@@ -75,4 +70,91 @@ class DicePlayRecord extends BaseModel
return $this->belongsTo(DiceLotteryConfig::class, 'lottery_config_id', 'id');
}
/** 按玩家用户名模糊dicePlayer.username */
public function searchUsernameAttr($query, $value)
{
if ($value === '' || $value === null) {
return;
}
$ids = DicePlayer::where('username', 'like', '%' . $value . '%')->column('id');
if (!empty($ids)) {
$query->whereIn('player_id', $ids);
} else {
$query->whereRaw('1=0');
}
}
/** 按彩金池配置名称模糊diceLotteryConfig.name */
public function searchLotteryConfigNameAttr($query, $value)
{
if ($value === '' || $value === null) {
return;
}
$ids = DiceLotteryConfig::where('name', 'like', '%' . $value . '%')->column('id');
if (!empty($ids)) {
$query->whereIn('lottery_config_id', $ids);
} else {
$query->whereRaw('1=0');
}
}
/** 抽奖类型 */
public function searchLotteryTypeAttr($query, $value)
{
if ($value !== '' && $value !== null) {
$query->where('lottery_type', '=', $value);
}
}
/** 中奖 */
public function searchIsWinAttr($query, $value)
{
if ($value !== '' && $value !== null) {
$query->where('is_win', '=', $value);
}
}
/** 赢取平台币下限 */
public function searchWinCoinMinAttr($query, $value)
{
if ($value !== '' && $value !== null) {
$query->where('win_coin', '>=', $value);
}
}
/** 赢取平台币上限 */
public function searchWinCoinMaxAttr($query, $value)
{
if ($value !== '' && $value !== null) {
$query->where('win_coin', '<=', $value);
}
}
/** 按奖励配置前端显示文本模糊diceRewardConfig.ui_text */
public function searchRewardUiTextAttr($query, $value)
{
if ($value === '' || $value === null) {
return;
}
$ids = DiceRewardConfig::where('ui_text', 'like', '%' . $value . '%')->column('id');
if (!empty($ids)) {
$query->whereIn('reward_config_id', $ids);
} else {
$query->whereRaw('1=0');
}
}
/** 按奖励档位diceRewardConfig.tier中奖名 T1-T5 */
public function searchRewardTierAttr($query, $value)
{
if ($value === '' || $value === null) {
return;
}
$ids = DiceRewardConfig::where('tier', '=', $value)->column('id');
if (!empty($ids)) {
$query->whereIn('reward_config_id', $ids);
} else {
$query->whereRaw('1=0');
}
}
}

View File

@@ -23,22 +23,18 @@ class DicePlayRecordValidate extends BaseValidate
'is_win' => 'require',
'win_coin' => 'require',
'reward_config_id' => 'require',
'lottery_id' => 'require',
'lottery_name' => 'require',
];
/**
* 定义错误信息
*/
protected $message = [
'player_id' => '玩家id必须填写',
'player_id' => '玩家必须填写',
'lottery_config_id' => '彩金池配置必须填写',
'lottery_type' => '抽奖类型必须填写',
'is_win' => '中奖必须填写',
'win_coin' => '赢取平台币必须填写',
'reward_config_id' => '奖励配置id必须填写',
'lottery_id' => '奖池必须填写',
'lottery_name' => '奖池名必须填写',
'reward_config_id' => '奖励配置必须填写',
];
/**
@@ -52,8 +48,6 @@ class DicePlayRecordValidate extends BaseValidate
'is_win',
'win_coin',
'reward_config_id',
'lottery_id',
'lottery_name',
],
'update' => [
'player_id',
@@ -62,8 +56,6 @@ class DicePlayRecordValidate extends BaseValidate
'is_win',
'win_coin',
'reward_config_id',
'lottery_id',
'lottery_name',
],
];