<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>代理商管理-代理商列表 </title>
<link rel="stylesheet" href="__STATIC__/css/element.index.css">
<link rel="stylesheet" href="__STATIC__/sagent/layui/css/layui.css">
<link rel="stylesheet" href="__STATIC__/sagent/layui/css/admin.css">
<style>
.el-select {
width: 30%;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 150px;
}
.left_Line {
height: 24px;
line-height: 24px;
padding-left: 5px;
border-left: 2px solid #409eff;
margin-bottom: 20px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<div id="page">
<div class="layui-fluid">
<div id="eletest" element-loading-text="拼命执行中" element-loading-spinner="el-icon-loading">
<div class="el-card is-always-shadow">
<!---->
<input type="hidden" name="id" value="{$id}">
<div class="el-card__body">
{if condition="!empty($id)"}
<div class="left_Line">编辑代理商</div>
{else/}
<div class="left_Line">添加代理商</div>
{/if}
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" style="width: 75%;">
<el-form-item label="代理商名称" prop="name">
<el-input v-model="form.name" style="width: 380px;" placeholder="请输入代理商名称"></el-input>
</el-form-item>
<el-form-item label="是否签约" prop="sign">
<el-select v-model="form.sign" placeholder="是否签约">
<el-option label="待签约" value="2"></el-option>
<el-option label="已签约" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="合作类型" prop="type">
<el-select v-model="form.type" placeholder="请选择合作类型">
<el-option label="间连" value="1"></el-option>
<el-option label="直连" value="2"></el-option>
<el-option label="间直连" value="3"></el-option>
</el-select>
<!-- <el-select v-model="form.hezuo.zhi" placeholder="请选择支付通道">-->
<!-- <el-option label="全部" value="quanbu"></el-option>-->
<!-- <el-option label="新大陆" value="xindal"></el-option>-->
<!-- <el-option label="云闪付" value="yunshanfu"></el-option>-->
<!-- </el-select>-->
</el-form-item>
<!---->
<!---->
<el-form-item label="微信费率" prop="wxpay">
<el-input type="number" v-model="form.wxpay" style="width: 380px;"
placeholder="百分比0.2~0.6之间"></el-input>
<span style="color: red; margin-left: 5px;">%</span>
</el-form-item>
<el-form-item label="支付宝费率" prop="alipay">
<el-input v-model="form.alipay" style="width: 380px;"
placeholder="百分比0.2~0.6之间"></el-input>
<span style="color: red; margin-left: 5px;">%</span>
</el-form-item>
<el-form-item label="联系人名称" prop="real_name">
<el-input v-model="form.real_name" style="width: 380px;" placeholder="请输入联系人名称"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input type="number" v-model="form.phone" style="width: 380px;"
placeholder="请输入联系电话"></el-input>
</el-form-item>
<el-form-item label="地址" prop="district_name" prop="city_name" prop="province_name">
<el-select @change="changecity" v-model="form.province_name" placeholder="请选择经营省份">
<el-option
v-for="v in form.province"
:label="v.city_name"
:value="v.cityid"></el-option>
</el-select>
<el-select @change="changeprovince_name" v-model="form.city_name" placeholder="请选择市">
<el-option
v-for="v in form.city"
:label="v.city_name"
:value="v.cityid"></el-option>
</el-select>
<el-select v-model="form.district_name" placeholder="请选择经营县/区">
<el-option v-for="v in form.district"
:label="v.city_name"
:value="v.cityid"></el-option>
</el-select>
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="form.address" style="width: 380px;"
placeholder="请输入详细地址"></el-input>
</el-form-item>
<el-form-item label="永久有效" prop="iseffective">
<el-switch v-model="form.iseffective"
:active-value='1'
:inactive-value='2'
></el-switch>
</el-form-item>
<el-form-item v-if="form.iseffective==1" hidden label="有效期">
<el-date-picker style="width: 380px;" v-model="form.begin_end" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item prop="begin_end" v-else label="有效期">
<el-date-picker style="width: 380px;" v-model="form.begin_end" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="提现银行" prop="bank">
<el-select v-model="form.bank" placeholder="请选择提现银行">
<el-option
v-for="v in form.banklist"
:label="v.bank_name"
:value="v.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="持卡人" prop="bank_name">
<el-input v-model="form.bank_name" style="width: 380px;" placeholder="请输入持卡人"></el-input>
</el-form-item>
<el-form-item label="银行卡号" prop="bankcard">
<el-input type="number" v-model="form.bankcard" style="width: 380px;"
placeholder="请输入银行卡号"></el-input>
</el-form-item>
<el-form-item label="身份证号码" prop="id_card">
<el-input type="number" v-model="form.id_card" style="width: 380px;"
placeholder="请输入身份证号码"></el-input>
</el-form-item>
<div class="el-input">
<!----><input type="hidden" autocomplete="off" class="el-input__inner">
<!---->
<!---->
<!---->
<!---->
</div>
<div class="el-form-item el-form-item--medium">
<!---->
<div class="el-form-item__content" style="margin-left: 115px;">
<button @click="add('ruleForm')" type="button"
class="el-button el-button--primary el-button--small"><!---->
<!----><span>确定</span></button>
<button type="button" class="el-button el-button--default el-button--small"
data-url="{:url('index')}"><!----><!----><span>取消</span></button>
<!---->
</div>
</div>
</el-form>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="__STATIC__/sagent/js/public/vue.js"></script>
<script src="__STATIC__/sagent/js/public/element.index.js"></script>
<script src="__STATIC__/sagent/js/public/jquery.min.js"></script>
<script src="__STATIC__/sagent/js/public/pub.js"></script>
<script src="__STATIC__/sagent/layui/lay/modules/layer.js"></script>
<script>
new Vue({
el: '#page',
data: function () {
var wx = (rule, value, callback) => {
if (value >= 0.2 && value <= 0.6) {
callback();
} else {
callback(new Error('百分比0.2 ~ 0.6 之间'));
}
};
var phone = (rule, value, callback) => {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
if (reg.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的手机号'));
}
};
return {
form: {
name: '',
sign: '',
type: '',
wxpay: '',
alipay: '',
real_name: '',
phone: '',
province_name: '',
city_name: '',
district_name: '',
province: '',
city: '',
district: '',
address: '',
iseffective: '',
begintime: '',
endtime: '',
banklist: '',
bank: '',
bank_name: '',
bankcard: '',
id_card: '',
},
rules: {
name: [
{required: true, message: '请输入代理商名称', trigger: 'blur'}
],
sign:
[
{required: true, message: '请选择是否签约', trigger: 'blur'}
],
type:
[
{required: true, message: '请选择合作类型', trigger: 'blur'}
],
wxpay:
[
{validator: wx, trigger: 'blur'},
{required: true, message: '请输入微信费率', trigger: 'blur'},
],
alipay:
[
{validator: wx, trigger: 'blur'},
{required: true, message: '请输入支付宝费率', trigger: 'blur'},
],
real_name:
[
{required: true, message: '请输入联系人名称', trigger: 'blur'}
],
phone:
[
{validator: phone, trigger: 'blur'},
{required: true, message: '请输入联系电话', trigger: 'blur'}
],
province_name: [
{required: true, message: '请输入地址', trigger: 'blur'}
],
city_name: [
{required: true, message: '请输入地址', trigger: 'blur'}
],
district_name: [
{required: true, message: '请输入地址', trigger: 'blur'}
],
address: [
{required: true, message: '请输入详细地址', trigger: 'blur'}
],
iseffective: [
{required: true, message: '请选择有效期限', trigger: 'blur'}
],
begin_end: [
{required: true, message: '请选择时间', trigger: 'change'}
],
bank: [
{required: true, message: '请选择提现银行', trigger: 'blur'}
],
bank_name: [
{required: true, message: '请选择持卡人', trigger: 'blur'}
],
bankcard: [
{required: true, message: '请选择银行卡号', trigger: 'blur'}
],
id_card: [
{required: true, message: '请选择身份证号码', trigger: 'blur'}
],
}
}
},
//页面加载时触发的函数
mounted: function () {
this.adddata();
this.banklist();
this.editdata();
},
methods: {
adddata: function () {
var that = this;
$.ajax({
type: "post",
data: {cityid: ''},
url: "{:url('agent/adddata')}",
success: function (data) {
that.form.province = data;
},
});
},
changecity: function () {
var that = this;
$.ajax({
type: "post",
data: {cityid: that.form.province_name},
url: "{:url('agent/adddata')}",
success: function (data) {
that.form.city = data;
that.form.city_name = '';
},
});
},
changeprovince_name: function () {
var that = this;
$.ajax({
type: "post",
data: {cityid: that.form.city_name},
url: "{:url('agent/adddata')}",
success: function (data) {
that.form.district = data;
that.form.district_name = '';
},
});
},
banklist: function () {
var that = this;
$.ajax({
type: "post",
url: "{:url('agent/bank')}",
success: function (data) {
that.form.banklist = data;
},
});
},
add: function (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//验证通过
// console.log(this.form);
//
if (this.form.iseffective === 2) {
d = this.form.begin_end[0];
d1 = this.form.begin_end[1];
function timeAdd0(num) {
str = num.toString();
if (str.length <= 1) {
str = '0' + str;
}
return str
}
console.log(this.form.begin_end);
if (this.form.begin_end[0] === undefined ||this.form.begin_end[1] === undefined ) {
return layer.alert('请输入时间');
}
time = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + timeAdd0(d.getDate()) + ' ';
time1 = d1.getFullYear() + '-' + (d1.getMonth() + 1) + '-' + timeAdd0(d.getDate()) + ' ';
var begin_end = time + time1;
} else {
var begin_end = this.form.begin_end;
}
$.ajax({
type: "post",
url: "{:url('agent/doadd')}",
data: {
// form:this.form
id: $("input[name='id']").val(),
name: this.form.name,
sign: this.form.sign,
type: this.form.type,
wxpay: this.form.wxpay,
alipay: this.form.alipay,
real_name: this.form.real_name,
phone: this.form.phone,
province_name: this.form.province_name,
city_name: this.form.city_name,
district_name: this.form.district_name,
address: this.form.address,
iseffective: this.form.iseffective,
begin_end: begin_end,
bank: this.form.bank,
bank_name: this.form.bank_name,
bankcard: this.form.bankcard,
id_card: this.form.id_card,
},
success: function (data) {
if (data.code) {
layer.alert(data.msg, function () {
window.location.href = 'index';
});
} else {
layer.alert(data.msg);
}
},
});
} else {
//验证未通过
return false;
}
})
},
editdata: function () {
var id = $("input[name='id']").val();
var that = this;
that.$options.methods.adddata();
$.ajax({
type: "post",
data: {
id: id
},
url: "{:url('agent/editdata')}",
success: function (data) {
data['begin_end'] = [that.parserDate(data['begintime']), that.parserDate(data['endtime'])];
that.form = data;
},
});
},
parserDate: function (date) {
var t = Date.parse(date)
if (!isNaN(t)) {
return new Date(Date.parse(date.replace(/-/g, '/')))
}
}
}
})
</script>
</html>
vue 的首次使用 记录
最新推荐文章于 2023-02-03 17:39:27 发布