132 lines
2.6 KiB
Vue
132 lines
2.6 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
import { settleBet } from '@/api/bets'
|
|||
|
|
import type { BetOption } from '@/types'
|
|||
|
|
|
|||
|
|
const visible = defineModel<boolean>({ default: false })
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
betId: string
|
|||
|
|
options: BetOption[]
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
settled: []
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const selectedOption = ref('')
|
|||
|
|
const loading = ref(false)
|
|||
|
|
|
|||
|
|
function handleOpen() {
|
|||
|
|
selectedOption.value = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleSettle() {
|
|||
|
|
if (!selectedOption.value) {
|
|||
|
|
ElMessage.warning('请选择正确选项')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
await settleBet(props.betId, selectedOption.value)
|
|||
|
|
visible.value = false
|
|||
|
|
ElMessage.success('开奖成功')
|
|||
|
|
emit('settled')
|
|||
|
|
} catch (error: any) {
|
|||
|
|
ElMessage.error(error.message || '开奖失败')
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="visible"
|
|||
|
|
title="开奖"
|
|||
|
|
width="420px"
|
|||
|
|
@open="handleOpen"
|
|||
|
|
>
|
|||
|
|
<div class="settle-form">
|
|||
|
|
<p class="settle-form__hint">请选择正确的选项来结算竞猜：</p>
|
|||
|
|
|
|||
|
|
<el-radio-group v-model="selectedOption" class="settle-form__options">
|
|||
|
|
<div
|
|||
|
|
v-for="option in options"
|
|||
|
|
:key="option.id"
|
|||
|
|
class="settle-form__option"
|
|||
|
|
>
|
|||
|
|
<el-radio :value="option.id">
|
|||
|
|
{{ option.content }}
|
|||
|
|
</el-radio>
|
|||
|
|
</div>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button @click="visible = false">取消</el-button>
|
|||
|
|
<button
|
|||
|
|
class="settle-form__submit"
|
|||
|
|
:disabled="loading || !selectedOption"
|
|||
|
|
@click="handleSettle"
|
|||
|
|
>
|
|||
|
|
{{ loading ? '结算中...' : '确认开奖' }}
|
|||
|
|
</button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.settle-form {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settle-form__hint {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: var(--gg-text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settle-form__options {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settle-form__option {
|
|||
|
|
padding: 10px 14px;
|
|||
|
|
border: 1px solid var(--gg-border);
|
|||
|
|
border-radius: var(--gg-radius-sm);
|
|||
|
|
transition: border-color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settle-form__option:hover {
|
|||
|
|
border-color: var(--gg-primary-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settle-form__submit {
|
|||
|
|
padding: 8px 20px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: var(--gg-radius-sm);
|
|||
|
|
background: var(--gg-gradient);
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: opacity 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settle-form__submit:hover {
|
|||
|
|
opacity: 0.85;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settle-form__submit:disabled {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
</style>
|