Files
huangguo_admin/src/views/tran/rechargeProvider/components/AddOrEdit.vue
T
2025-06-10 17:11:41 +07:00

272 lines
9.5 KiB
Vue

<template>
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
<el-form :model="form" :rules="rules" label-position="center" label-width="120px" ref="ruleForm">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="支付渠道名字" prop="channelName">
<el-input placeholder="请输入支付渠道名字" v-model="form.channelName" style="width:180px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="激活时间段" prop="activePeriod">
<el-input placeholder="请输入时间段" v-model="form.activePeriod" style="width:180px" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="权重" prop="weight">
<el-input placeholder="使用数字" v-model.number="form.weight" style="width:180px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="渠道费率" prop="rate">
<el-input placeholder v-model="form.rate" style="width:180px">
<template slot="append">%</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="充值对象" prop="rchgFor">
<el-select placeholder="请选择充值对象" v-model="form.rchgFor" clearable>
<el-option label="app" value="app"></el-option>
<el-option label="game" value="game"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否激活" prop="active">
<el-switch :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" v-model="form.active"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="金额类别" prop="category">
<el-select placeholder="请选择类别" v-model="form.amountType" clearable>
<el-option label="范围金额" value="range"></el-option>
<el-option label="固定金额" value="fixed"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.amountType == 'fixed'">
<el-form-item label="金额种类" prop="amounts">
<el-input placeholder v-model="form.amounts" style="width:180px" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.amountType == 'range'">
<el-form-item label="最小金额" prop="minMoney">
<el-input placeholder v-model.number="form.minMoney" style="width:180px">
<template slot="append"></template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.amountType == 'range'">
<el-form-item label="最大金额" prop="maxMoney">
<el-input placeholder v-model.number="form.maxMoney" style="width:180px">
<template slot="append"></template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="支付方式" prop="channelPlatType">
<el-select filterable allow-create default-first-option v-model="form.channelPlatType" placeholder="请选择支付方式" clearable>
<el-option v-for="item in payTypeList" :key="item.value" :label="item.value" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="扩展的充值类型" prop="rchgType">
<el-select filterable allow-create default-first-option v-model="form.rchgType" placeholder="请选择扩展充值类型" clearable>
<el-option v-for="item in payTypeList" :key="item.value" :label="item.value" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="扩展的充值类型名字" prop="rchgTypeName">
<el-select filterable allow-create default-first-option v-model="form.rchgTypeName" placeholder="请选择" clearable>
<el-option v-for="item in payTypeList" :key="item.value" :label="item.label" :value="item.label" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="渠道" prop="cid">
<el-select placeholder="请选择渠道" v-model="form.channelId" clearable>
<el-option v-for="(item, index) in pchanneList" :key="index" :label="item.cName" :value="item.cid"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="要求的系统类型" prop="sysType">
<el-select placeholder="请选择系统类型" v-model="form.sysType" clearable>
<el-option label="苹果" value="ios"></el-option>
<el-option label="安卓" value="android"></el-option>
<el-option label="移动" value="bothmb"></el-option>
<el-option label="PC" value="pc"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> </el-button>
<el-button type="primary" @click="submit"> </el-button>
</div>
</el-dialog>
</template>
<script>
import { rechargeChanAdd, paychannelList, rechargeChanEidt } from '@/api/tran'
import { payTypeList } from '@/filters/tran/rechargeProvider'
export default {
name: 'AddOrEdit',
props: ['data'],
data() {
return {
Visible: true,
title: '',
pchanneList: [],
payTypeList: payTypeList(),
rules: {
weight: [{ required: true, message: '必填', trigger: 'blur' }],
},
// 表单数据
form: {
active: false,
activePeriod: undefined,
amountType: undefined,
amounts: undefined,
channelId: undefined,
channelName: undefined,
channelPlatType: undefined,
maxMoney: undefined,
minMoney: undefined,
rate: undefined,
rchgFor: undefined,
rchgType: undefined,
rchgTypeName: undefined,
sysType: undefined,
weight: undefined,
},
}
},
mounted() {
this.getPaychanneList()
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.$set(
this.form,
'minMoney',
this.form.minMoney ? Number(this.form.minMoney) / 100 : 0
)
this.$set(
this.form,
'maxMoney',
this.form.maxMoney ? Number(this.form.maxMoney) / 100 : 0
)
if (this.form.amounts) {
const a = []
this.form.amounts.filter((item) => {
a.push(item / 100)
})
this.form.amounts = this.form.amounts ? a.toString() : ''
}
} else {
this.form = {
active: false,
activePeriod: undefined,
amountType: undefined,
amounts: undefined,
channelId: undefined,
channelName: undefined,
channelPlatType: undefined,
maxMoney: undefined,
minMoney: undefined,
rate: undefined,
rchgType: undefined,
rchgTypeName: undefined,
sysType: undefined,
weight: undefined,
}
}
},
methods: {
//TODO:新增支付渠道列表数据
add(data) {
rechargeChanAdd(data).then((res) => {
if (res.code === 200) {
this.$message.success('新增成功')
this.Visible = false
} else {
this.$message.error('新增失败')
}
})
},
//TODO:编辑支付渠道列表数据
update(data) {
rechargeChanEidt(data).then((res) => {
if (res.code === 200) {
this.$message.success('更新成功')
this.Visible = false
} else {
this.$message.error('更新失败')
}
})
},
//TODO:请求渠道列表数据
async getPaychanneList() {
paychannelList({ pageNum: 1, pageSize: 1000, param: {} }).then((res) => {
if (res.code === 200) {
this.pchanneList = res.data.list
} else {
this.pchanneList = []
this.$message.error('请求失败')
}
})
},
// 提交按钮
submit() {
const data = { ...this.form }
if (data.amountType === 'range') {
data.minMoney = Number(data.minMoney) * 100
data.maxMoney = Number(data.maxMoney) * 100
data.amounts = undefined
} else if (data.amountType === 'fixed') {
const a = []
if (data.amounts) {
data.amounts.split(',').filter((item) => {
a.push(Number(item) * 100)
})
data.amounts = a
data.minMoney = undefined
data.maxMoney = undefined
} else {
data.amounts = []
}
}
if (this.title === '新增') {
this.add(data)
} else if (this.title === '编辑') {
this.update(data)
}
},
// 关闭编辑
close() {
this.$emit('close')
},
},
}
</script>