317 lines
11 KiB
HTML
317 lines
11 KiB
HTML
{extend name="base"/}
|
||
{block name="resources"}
|
||
<style>
|
||
#container{height: 500px; }
|
||
#container > div {z-index: 500!important}
|
||
.address-content {display: inline-block;vertical-align: top;}
|
||
.layui-layout-admin.admin-style-2 .layui-body .layui-tab + .body-content {padding-top: 63px !important;}
|
||
.empty-address-text{font-size: 14px;color: #f43530;height: 34px;line-height: 34px;}
|
||
</style>
|
||
{/block}
|
||
{block name="main"}
|
||
|
||
<div class="layui-form form-wrap" lay-filter="storeform">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>联系人姓名：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input len-long" value="{$info.name}">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>联系人手机号：</label>
|
||
<div class="layui-input-block">
|
||
<input type="number" name="mobile" lay-verify="required" autocomplete="off" class="layui-input len-long" value="{$info.mobile}">
|
||
</div>
|
||
<div class="word-aux">请输入联系人手机号</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">联系人电话：</label>
|
||
<div class="layui-input-block">
|
||
<input type="number" name="telephone" autocomplete="off" class="layui-input len-long" value="{$info.telephone}">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>联系地址：</label>
|
||
<div class="layui-input-inline 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 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 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>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="address" placeholder="请输入详细地址，以方便买家联系（请勿重复填写省市区）" lay-verify="address" autocomplete="off" class="layui-input len-long address-content" value="{$info.address}">
|
||
<input type="hidden" name="longitude" lay-verify="required" class="layui-input" value="{$info.longitude}"/>
|
||
<input type="hidden" name="latitude" lay-verify="required" class="layui-input" value="{$info.latitude}"/>
|
||
<button class="layui-btn-primary layui-btn" onclick="refreshFrom();">查找地址</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">地图定位：</label>
|
||
{if $tencent_map_key}
|
||
{if $check_map_key.status == 0}
|
||
<div class="layui-input-block special-length">
|
||
<div id="container" class="selffetch-map"></div>
|
||
</div>
|
||
{else/}
|
||
<div class="empty-local-map">
|
||
<div class="word-aux empty-address-text">{$check_map_key.message}。<a href="{:addon_url('/shop/config/map')}" class="text-color">点击配置</a></div>
|
||
</div>
|
||
{/if}
|
||
{else/}
|
||
<div class="empty-local-map">
|
||
<div class="word-aux empty-address-text">腾讯地图尚未配置，无法定位地址。<a href="{:addon_url('/shop/config/map')}" class="text-color">点击配置</a></div>
|
||
</div>
|
||
{/if}
|
||
<div class="word-aux empty-address layui-hide">请选择地理位置！</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">qq：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="qq" value="{$info.qq}" autocomplete="off" class="layui-input len-long">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">阿里旺旺：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="ww" value="{$info.ww}" autocomplete="off" class="layui-input len-long">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">邮箱：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="email" value="{$info.email}" autocomplete="off" class="layui-input len-long">
|
||
</div>
|
||
<div class="word-aux">用于接收消息</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
||
</div>
|
||
|
||
</div>
|
||
{/block}
|
||
|
||
{block name="script"}
|
||
<script type="text/javascript" src="SHOP_JS/address.js"></script>
|
||
<script src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key={$tencent_map_key}"></script>
|
||
<script src="https://map.qq.com/api/js?v=2.exp&key={$tencent_map_key}"></script>
|
||
<script type="text/javascript" src="STATIC_JS/qq_map.js"></script>
|
||
<script type="text/javascript">
|
||
var form, carousel, laydate, repeat_flag, map_class,latlng;
|
||
|
||
layui.use(['laydate','form','carousel'], function() {
|
||
form = layui.form;
|
||
laydate = layui.laydate;
|
||
carousel = layui.carousel;
|
||
repeat_flag = false;//防重复标识
|
||
|
||
form.render();
|
||
carousel.render({
|
||
elem: '#carousel',
|
||
width: '100%',
|
||
arrow: 'always',
|
||
interval: 3500
|
||
});
|
||
|
||
if('{$info.latitude}' == "" || '{$info.longitude}' == ""){
|
||
latlng = {lat:'',lng:''};
|
||
}else{
|
||
latlng = {lat:'{$info.latitude}',lng:'{$info.longitude}'};
|
||
}
|
||
|
||
//初始化联系地址
|
||
var initdata = {province_id : '{$info.province}', city_id : '{$info.city}', district_id : '{$info.district}'};
|
||
initAddress(initdata, "storeform");
|
||
|
||
//初始化工作日
|
||
var workWeek = "{$info.work_week}",
|
||
workArr = workWeek.split(",");
|
||
|
||
for (var i = 0; i < workArr.length; i++){
|
||
$("input[name=work_week"+ workArr[i] +"]").prop("checked",true);
|
||
}
|
||
form.render();
|
||
|
||
//地图展示
|
||
map_class = new mapClass("container", latlng);
|
||
form.render();
|
||
|
||
form.on('submit(save)', function(data) {
|
||
|
||
if( data.field.longitude == "" || data.field.latitude == ""){
|
||
layer.msg('请确认地理位置!');
|
||
$(".empty-address").removeClass("layui-hide");
|
||
return;
|
||
}else{
|
||
$(".empty-address").addClass("layui-hide");
|
||
}
|
||
|
||
var province_name = $("select[name=province_id] option:selected").text();
|
||
var city_name = $("select[name=city_id] option:selected").text();
|
||
var district_name = $("select[name=district_id] option:selected").text();
|
||
|
||
//地址id
|
||
data.field.province = data.field.province_id;
|
||
data.field.city = data.field.city_id;
|
||
data.field.district = data.field.district_id;
|
||
data.field.community = data.field.community_id;
|
||
|
||
//地址name
|
||
data.field.province_name = province_name;
|
||
data.field.city_name = city_name;
|
||
data.field.district_name = district_name;
|
||
|
||
data.field.full_address = province_name + city_name + district_name;
|
||
|
||
if (repeat_flag) return;
|
||
repeat_flag = true;
|
||
|
||
$.ajax({
|
||
url: ns.url("shop/shop/contact"),
|
||
data: data.field,
|
||
type: "POST",
|
||
dataType: "JSON",
|
||
success: function(res) {
|
||
repeat_flag = false;
|
||
layer.msg(res.message);
|
||
if (res.code == 0) {
|
||
location.reload();
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
//表单验证
|
||
form.verify({
|
||
province_id : function(value, item){
|
||
if(value == ''){
|
||
return '请选择省份';
|
||
}
|
||
},
|
||
city_id : function(value, item){
|
||
if(value == ''){
|
||
return '请选择城市';
|
||
}
|
||
},
|
||
district_id : function(value, item){
|
||
if(value == ''){
|
||
return '请选择区/县';
|
||
}
|
||
},
|
||
community_id : function(value, item){
|
||
if(value == ''){
|
||
return '请选择街道';
|
||
}
|
||
},
|
||
address: function(value) {
|
||
if (value == '') {
|
||
return '请输入详细地址';
|
||
}
|
||
},
|
||
});
|
||
});
|
||
|
||
/**
|
||
* 重新渲染表单
|
||
*/
|
||
function refreshFrom(){
|
||
form.render();
|
||
orderAddressChange();//改变地址
|
||
map_class.mapChange();
|
||
}
|
||
|
||
//动态改变订单地址赋值
|
||
function orderAddressChange(){
|
||
map_class.address.province = $("select[name=province_id]").val();
|
||
map_class.address.province_name = $("select[name=province_id] option:selected").text();
|
||
map_class.address.city = $("select[name=city_id]").val();
|
||
map_class.address.city_name = $("select[name=city_id] option:selected").text();
|
||
map_class.address.district = $("select[name=district_id]").val();
|
||
map_class.address.district_name = $("select[name=district_id] option:selected").text();
|
||
map_class.address.township = $("select[name=community_id]").val();
|
||
map_class.address.township_name = $("select[name=community_id] option:selected").text();
|
||
map_class.address.detail_address = $("input[name=address]").val()
|
||
}
|
||
|
||
/**
|
||
* 地址下拉框（主要用于坐标记录）
|
||
*/
|
||
function selectCallBack(){
|
||
$("input[name=longitude]").val(map_class.address.longitude);//坐标
|
||
$("input[name=latitude]").val(map_class.address.latitude);//坐标
|
||
}
|
||
|
||
//地图点击回调事件
|
||
function mapChangeCallBack(){
|
||
$("input[name=address]").val(map_class.address.address);//详细地址
|
||
$("input[name=longitude]").val(map_class.address.longitude);//坐标
|
||
$("input[name=latitude]").val(map_class.address.latitude);//坐标
|
||
|
||
$.ajax({
|
||
type : "POST",
|
||
dataType: 'JSON',
|
||
url : ns.url("shop/address/getGeographicId"),
|
||
async : true,
|
||
data : {
|
||
"address" : map_class.address.area
|
||
},
|
||
success : function(data) {
|
||
map_class.address.province = data.province_id;
|
||
map_class.address.city = data.city_id;
|
||
map_class.address.district = data.district_id;
|
||
map_class.address.township = data.subdistrict_id;
|
||
map_class.map_change = false;
|
||
form.val("storeform", {
|
||
"province_id": data.province_id
|
||
});
|
||
$("select[name=province_id]").change();
|
||
form.val("storeform", {
|
||
"city_id": data.city_id
|
||
});
|
||
$("select[name=city_id]").change();
|
||
form.val("storeform", {
|
||
"district_id": data.district_id
|
||
});
|
||
$("select[name=district_id]").change();
|
||
form.val("storeform", {
|
||
"community_id": data.subdistrict_id
|
||
});
|
||
refreshFrom();//重新渲染form
|
||
map_class.map_change = true;
|
||
}
|
||
});
|
||
}
|
||
|
||
function showDemo(){
|
||
layer.open({
|
||
title: '查看示例',
|
||
type: 1,
|
||
area: ['500px', '660px'],
|
||
content: '<img style="margin: 10px 80px;" src="SHOP_IMG/address.png">'
|
||
})
|
||
}
|
||
</script>
|
||
{/block} |