247 lines
7.0 KiB
Vue
247 lines
7.0 KiB
Vue
<template>
|
|
<div class="district-action-box">
|
|
<el-dialog
|
|
:title="title"
|
|
:visible.sync="dialogVisible"
|
|
:width="width"
|
|
:before-close="handleClose"
|
|
:close-on-click-modal="false"
|
|
class="el-dialogs"
|
|
>
|
|
<el-row>
|
|
<el-col :span="span">
|
|
<el-form
|
|
ref="formDisCode"
|
|
:model="params"
|
|
:rules="rules"
|
|
style="padding:20px"
|
|
label-width="120px"
|
|
:label-position="labelPosition"
|
|
>
|
|
<el-form-item label="账号" prop="name">
|
|
<el-input v-model="params.name" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码:" prop="password">
|
|
<el-input v-model="params.password" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="商区类型:" prop="discType">
|
|
<el-select v-model.number="params.discType" style="width:100%" size="small">
|
|
<el-option label="CPS" :value="0"></el-option>
|
|
<el-option label="CPA" :value="1"></el-option>
|
|
<el-option label="CPT" :value="2"></el-option>
|
|
<el-option label="CPC" :value="3"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="用户单价(元):" v-if="params.discType===1" prop="userUnitYuan">
|
|
<el-input v-model.number="params.userUnitYuan" type="number" step="0.1" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="分红比例(%):" prop="dividendRatio" v-if="params.discType===0">
|
|
<el-input v-model.number="params.dividendRatio" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="商区码:">
|
|
<el-input v-model="params.discCode" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="子渠道数量:">
|
|
<el-input v-model.number="params.childMax" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="落地页模板:">
|
|
<el-input v-model="params.templet" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="备注:" prop="remark">
|
|
<el-input type="textarea" rows="3" v-model="params.remark" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="handleClose" size="small">取 消</el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="submitForm('formDisCode')"
|
|
:loading="flag"
|
|
size="small"
|
|
>确 认</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
</el-row>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import API from "@/api";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeName: "first",
|
|
labelPosition: "left",
|
|
checkList: [],
|
|
title: "",
|
|
flag: false,
|
|
width: "600px",
|
|
span: 24,
|
|
// 外层弹出框
|
|
dialogVisible: false,
|
|
// 新增商区代理参数
|
|
params: {
|
|
name: "",
|
|
password: "",
|
|
discCode: "",
|
|
dividendRatio: 50,
|
|
discType: 0,
|
|
deductType: 0,
|
|
conDeductionRatio: "",
|
|
conDedLowerOutset: "",
|
|
nuDeductionRatio: "",
|
|
nuDedLowerOutset: "",
|
|
userUnitYuan: 2,
|
|
remark: "",
|
|
childMax: "",
|
|
templet: ""
|
|
},
|
|
// 验证规则
|
|
rules: {
|
|
// 用户名
|
|
name: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
|
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
|
// 分红比例
|
|
dividendRatio: [
|
|
{ required: true, message: "请输入分红比例", trigger: "blur" }
|
|
],
|
|
userUnitYuan: [
|
|
{ required: true, message: "请输入单价", trigger: "blur" }
|
|
],
|
|
// 商区类型
|
|
discType: [
|
|
{ required: true, message: "请选择商区类型", trigger: "change" }
|
|
],
|
|
deductionRatio: [{ required: true, message: "必填", trigger: "blur" }]
|
|
}
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
// 数据提交验证
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate(valid => {
|
|
if (valid) {
|
|
this.flag = true;
|
|
this.addDistrict();
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
// 将多选框转换成数字
|
|
changeNumber() {
|
|
if (this.checkList.length === 2) {
|
|
this.params.deductType = 3;
|
|
} else if (this.checkList.length === 1) {
|
|
if (this.checkList.indexOf("扣消费") > -1) {
|
|
this.params.deductType = 1;
|
|
}
|
|
if (this.checkList.indexOf("扣用户") > -1) {
|
|
this.params.deductType = 2;
|
|
}
|
|
} else {
|
|
this.params.deductType = 0;
|
|
}
|
|
},
|
|
// 新增商区代理
|
|
addDistrict() {
|
|
API.addDistrict(this.params)
|
|
.then(res => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: "新增成功！",
|
|
type: "success"
|
|
});
|
|
this.$emit("handlerAddDistrict");
|
|
} else {
|
|
if (res.tip) {
|
|
this.$message.error(res.tip);
|
|
} else {
|
|
this.$message.error("新增失败！");
|
|
}
|
|
}
|
|
this.handleClose();
|
|
this.flag = false;
|
|
})
|
|
.catch(() => {
|
|
this.flag = false;
|
|
this.handleClose();
|
|
});
|
|
},
|
|
// 关闭弹窗
|
|
handleClose() {
|
|
this.isShow = true;
|
|
this.dialogVisible = false;
|
|
// this.checkList = []
|
|
// this.params = {
|
|
// name:'',
|
|
// password:'',
|
|
// discCode:'',
|
|
// dividendRatio: 50,
|
|
// discType: 0,
|
|
|
|
// deductType: 0,
|
|
// conDeductionRatio: '',
|
|
// conDedLowerOutset: '',
|
|
// nuDeductionRatio: '',
|
|
// nuDedLowerOutset: '',
|
|
// userUnitYuan: '',
|
|
// remark: '',
|
|
// };
|
|
// this.$refs.formDisCode.resetFields();
|
|
},
|
|
// 打开编辑视频弹窗、传递需要编辑的参数
|
|
open() {
|
|
this.dialogVisible = true;
|
|
this.width = "500px";
|
|
this.span = 24;
|
|
this.type = "add";
|
|
this.title = "新增商区代理";
|
|
this.checkList = [];
|
|
// this.params= {
|
|
// name:'',
|
|
// password:'',
|
|
// discCode:'',
|
|
// dividendRatio: 50,
|
|
// discType: 0,
|
|
// deductType: 0,
|
|
// conDeductionRatio: '',
|
|
// conDedLowerOutset: '',
|
|
// nuDeductionRatio: '',
|
|
// nuDedLowerOutset: '',
|
|
// userUnitYuan: 2,
|
|
// remark: '',
|
|
// }
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.district-action-box {
|
|
// .el-input {
|
|
// width: 220px;
|
|
// }
|
|
.checked {
|
|
margin-left: 10px;
|
|
}
|
|
.avatar-uploader {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
.page-box {
|
|
margin-top: 35px;
|
|
position: relative;
|
|
height: 40px;
|
|
}
|
|
.el-pagination {
|
|
margin-top: 0 !important;
|
|
}
|
|
}
|
|
.form-item {
|
|
display: flex;
|
|
}
|
|
</style>
|