115 lines
2.9 KiB
Vue

<template>
<div class="edit-user-gold-coin-deduction-form">
<el-dialog
:title="$t('pages.editUserDiamondRewardForm.dialog.title')"
:visible="true"
width="450px"
:before-close="handleClose"
:close-on-click-modal="false"
:modal-append-to-body="true"
:append-to-body="true"
>
<el-form
ref="dataForm"
:rules="rules"
:model="formData"
label-position="left"
label-width="70px"
style="width: 300px; margin-left:50px;"
>
<el-form-item :label="$t('pages.propsSourceGroupForm.resourceType.diamond')" prop="candy">
<el-input
v-model.trim="formData.candy"
:placeholder="$t('pages.editUserDiamondRewardForm.placeholder.diamondQuantity')"
/>
</el-form-item>
<el-form-item :label="$t('pages.editUserDiamondRewardForm.form.remarks')" prop="remarks">
<el-input
v-model.trim="formData.remarks"
:placeholder="$t('pages.editUserDiamondRewardForm.placeholder.reason')"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose()">
{{ $t('pages.editUserDiamondRewardForm.action.cancel') }}
</el-button>
<el-button
v-loading="listLoading"
type="primary"
@click="handleSubmit()"
>
{{ $t('pages.editUserDiamondRewardForm.action.submit') }}
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { sendDiamond } from '@/api/app-user'
export default {
name: 'EditUserDiamondRewardForm',
props: {
userId: {
type: String,
required: true
}
},
data() {
return {
listLoading: false,
rules: {
candy: [
{
required: true,
message: this.$t('pages.propsSourceGroupForm.validation.requiredField'),
trigger: 'blur'
},
{
pattern: /^\d{1,7}(\.\d{0,2})?$/,
message: this.$t('pages.editUserDiamondRewardForm.validation.amountRange'),
trigger: 'blur'
}
]
},
formData: {
candy: '',
remarks: ''
}
}
},
methods: {
handleSubmit() {
const that = this
that.$refs.dataForm.validate((valid) => {
if (!valid) {
console.error('error submit!!')
return false
}
that.listLoading = true
sendDiamond({
userId: that.userId,
quantity: that.formData.candy,
remarks: that.formData.remarks
}).then(res => {
that.listLoading = false
that.$emit('success', Object.assign({}, that.formData))
that.handleClose()
}).catch(err => {
that.listLoading = false
that.$emit('fial', err)
that.handleClose()
})
})
},
handleClose() {
this.$emit('close')
}
}
}
</script>