admin/addon/fenxiao/shop/view/area/add.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
	.layui-form {
		position: relative;
	}
	.layui-form-label {
		text-align: right;
		margin-left: 60px;
	}
	.layui-form-item {
		margin-bottom: 22px;
	}
	.fenxiao-select {
		    position: absolute;
		    left: 400px;
		    top: 135px;
	}
	.layui-unselect.layui-form-radio.layui-form-radioed i:after {
		background-color: #fff;
	}
	.layui-table-body {
		max-height: 530px;
	}
	.member-select {
		position: absolute;
		left: 400px;
		top: 195px;
	}
	.fenxiao-header {
		padding: 50px 0 100px 50px;
		font-size: 20px;
		font-weight: 600;
	}
</style>
{/block}
{block name="main"}
<div class="layui-form ns-form">
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>代理等级：</label>
		<div class="layui-input-inline ns-len-mid">
			<select name="level_id" lay-verify="required" lay-filter="level_id" id="level_id">
				<option value="">请选择</option>
				{volist name="$level_list" id="level"}
				<option value="{$level.level_id}">{$level.level_name}</option>
				{/volist}
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>区域设置：</label>
		<div class="layui-input-inline ns-len-mid area-select">
			<select name="province_id" lay-filter="province_id" lay-verify="province_id">
				<option value="">请选择省份</option>
				{foreach $province_list as $k => $v}
				<option value="{$v.id}">{$v.name}</option>
				{/foreach}
			</select>
		</div>
		<div class="layui-input-inline ns-len-mid area-select">
			<select name="city_id"  lay-filter="city_id" lay-verify="city_id">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="layui-input-inline ns-len-mid area-select">
			<select name="district_id"  lay-filter="district_id" lay-verify="district_id">
				<option value="">请选择区/县</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">管理分销商：</label>
		<button class="layui-btn layui-btn1 ns-bg-color" onclick="addFenxiao()">选择分销商</button>
	</div>
	<div class="fenxiao-select"></div>
	<div class="ns-form-row">
		<button class="layui-btn  ns-bg-color" lay-submit lay-filter="save">保存</button>
		<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/html" id="addFenxiao">
	<div class="layui-form">
		<div class="layui-input-inline" style="width: 205px;">
			<input type="text" style="width: 205px;" name="fenxiao_search" placeholder="请输入分销商名称" autocomplete="off" class="layui-input ">
			<button type="button" class="layui-btn layui-btn-primary fenxiao-search" style="height: 32px; line-height: 32px; position: absolute; right: 1px; top: 1px; border-width: 0; border-left-width: 1px;" lay-filter="search" lay-submit>
				<i class="layui-icon"></i>
			</button>
		</div>
		<table id="fenxiao_list" lay-filter="fenxiao_list"></table>
	</div>
</script>
<script type="text/javascript" src="SHOP_JS/address.js"></script>
<script type="text/javascript">
	var new_fenxiao_id = 0,agent_level_name='';
	layui.use(['form', 'laytpl','table','laypage'], function() {
		laytpl = layui.laytpl;
		form = layui.form;
		laypage = layui.laypage;
		table = layui.table;
		repeat_flag = false;
		form.render();
		/**
		 * 监听提交
		 */
		form.on('submit(save)', function(data) {
			data.field.fenxiao_id  = new_fenxiao_id;
			data.field.agent_level_name  = agent_level_name;
			console.log(data);
			$.ajax({
				url: ns.url("fenxiao://shop/area/add"),
				data: data.field,
				dataType: 'JSON', //服务器返回json格式数据
				type: 'POST', //HTTP请求类型
				success: function(res) {
					repeat_flag = false;
					if (res.code == 0) {
						layer.msg(res.message);
						location.href = ns.url("fenxiao://shop/area/lists")
					} else {
						layer.msg(res.message);
					}
				}
			});
		});
		form.on('select(level_id)', function(data){
			var e = data.elem;
			agent_level_name =e[e.selectedIndex].text;
		});
	});
	function addFenxiao() {
		var add_attr = $("#addFenxiao").html();
		form.on('radio(layfenxiaoid)', function(obj){
			new_fenxiao_id = obj.value;
			var title2 = ($(this).data('index'))
			console.log(title2);
			$('.layui-btn1').parents('.layui-form-item').next('.fenxiao-select').html(title2)
		});
		laytpl(add_attr).render({}, function(html) {
				add_attr_index = layer.open({
					title: '选择分销商',
					skin: 'layer-tips-class',
					type: 1,
					area: ['1000px', '800px'],
					content: html,
					btn:["保存","返回"],
					yes: function(){
						layer.close(add_attr_index);
					}
				});
			});
			//展示已知数据
			table = new Table({
			    elem: '#fenxiao_list',
				url: ns.url("fenxiao://shop/area/getfenxiaolist"),
			    cols: [
			        [{
						width: "12%",
						title: '商户选择',
						unresize: 'false',
						templet: function(data) {
							var html = '';
							html += `
								<div>
								<input type="radio" name="layTableRadioc"  value="${data.fenxiao_id}" data-index="${data.fenxiao_name}" lay-type="layTableRadio" lay-filter="layfenxiaoid">
								</div>
							`;
							return html;
						}
					},{
		                title: '分销商名称',
						width: '50%',
		                unresize: 'false',
						 field: 'fenxiao_name',
		            }, {
		                field: 'account',
		                title: '佣金',
		                unresize: 'false',
						width: '30%',
		            },
					]
			    ],
			});
			/**
			 * 搜索功能
			 */
			form.on('submit(search)', function (data) {
				table.reload({
					page: {
						curr: 1
					},
					where: data.field
				});
			});
			$(document).keydown(function (event) {
				if (event.keyCode == 13) {
					$(".fenxiao-search").trigger("click");
				}
			});
		}
	function back() {
		location.href = ns.url("fenxiao://shop/area/lists");
	}
</script>
{/block}