503 lines
26 KiB
HTML
503 lines
26 KiB
HTML
{layout name="layout2" /}
|
||
<link rel="stylesheet" href="/static/admin/css/goods.css" media="all">
|
||
<div class="">
|
||
<div class="layui-tab-content layui-form">
|
||
<div class="layui-tab-item goods-content layui-show">
|
||
<div class="layui-card-body" pad15>
|
||
<div lay-filter="">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="form-label-asterisk">*</span>用户姓名：</label>
|
||
<input type="hidden" id="id" name="id">
|
||
<div class="layui-input-block">
|
||
<input type="text" name="name" lay-verify="custom_required" lay-verType="tips"
|
||
autocomplete="off"
|
||
switch-tab="0" verify-msg="请输入用户的姓名" placeholder="请输入用户名称"
|
||
class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">性别：</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="sex" value="0" title="未知">
|
||
<input type="radio" name="sex" value="1" title="男" >
|
||
<input type="radio" name="sex" value="2" title="女">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">用户电话：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="phone" lay-verType="tips" verify-msg="请输入用户电话号码" placeholder="请输入用户联系电话" autocomplete="off" switch-tab="0" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="form-label-asterisk">*</span>联系地址：</label>
|
||
<div class="layui-input-inline">
|
||
<select name="first_category_id" lay-filter="first_category" lay-verify="custom_required"
|
||
lay-verType="tips" switch-tab="0" verify-msg="请选择地区">
|
||
<option value="">请选择地区</option>
|
||
</select>
|
||
</div>
|
||
<div class="layui-input-inline">
|
||
<select name="second_category_id" lay-filter="second_category" lay-verify="custom_required"
|
||
lay-verType="tips" switch-tab="0" verify-msg="请选择地区">
|
||
<option value="">请选择地区</option>
|
||
</select>
|
||
</div>
|
||
<div class="layui-input-inline">
|
||
<select name="third_category_id" lay-filter="third_category" lay-verify="custom_required"
|
||
lay-verType="tips" switch-tab="0" verify-msg="请选择地区">
|
||
<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="areas" lay-verType="tips" autocomplete="off" switch-tab="0" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item" style="display:flex">
|
||
<label class="layui-form-label">是否宠物：</label>
|
||
<div class="layui-col-sm1" style="width: 40%;">
|
||
<input type="radio" name="pet" value="0" title="无" >
|
||
<input type="radio" name="pet" value="1" title="有">
|
||
<input type="radio" name="pet" value="2" title="未知">
|
||
</div>
|
||
|
||
<label class="layui-form-label">超厚玻璃：</label>
|
||
<div class="layui-col-sm1" style="width: 40%;">
|
||
<input type="radio" name="hbl" value="0" title="无" >
|
||
<input type="radio" name="hbl" value="1" title="有">
|
||
<input type="radio" name="hbl" value="2" title="未知">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" style="margin-top: 10px;">渠道来源：</label>
|
||
<div class="layui-col-sm4" style="width: 80%; margin-top: 10px;">
|
||
<select name="brand_id" lay-verType="tips" switch-tab="0" verify-msg="请选择渠道来源">
|
||
<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" id="demo1" lay-verType="tips" autocomplete="off" switch-tab="0" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">位置精度：</label>
|
||
<div class="layui-input-inline" style="width: 20%;">
|
||
<input type="text" name="store_longitude" class="layui-input" placeholder="请输入经度" value="" id="lon" lay-filter="lon" >
|
||
</div>
|
||
<label class="layui-form-label">位置维度：</label>
|
||
<div class="layui-input-inline" style="width: 20%;">
|
||
<input type="text" name="store_latitude" class="layui-input" placeholder="请输入经度" value="" id="lat" lay-filter="lat" >
|
||
</div>
|
||
</div>
|
||
<div id="tMap" class="layui-hide" style="padding: 10px;margin-left: 3%; width: 100%;">
|
||
<div class="layui-form layuimini-form">
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="search_key" id="search_key" class="layui-input" placeholder="请输入地名" >
|
||
</div>
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm searchKey" >查询</button>
|
||
</div>
|
||
</div>
|
||
<div id="maplocation" style="width:1080px;height:400px;"></div>
|
||
</div>
|
||
<style>
|
||
body .layui-ext-yourskin .layui-layer-btn0{
|
||
border: 1px solid #dedede;
|
||
background-color:#fff;
|
||
color: #333;
|
||
}
|
||
body .layui-ext-yourskin .layui-layer-btn1{
|
||
background-color:#1E9FFF;
|
||
border-color:#1E9FFF;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item layui-hide">
|
||
<input type="button" lay-submit lay-filter="adjust_user-submit" id="adjust_user-submit" value="确认">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=EVOBZ-VX7YU-QKJVR-BVESA-AVFT3-7JBWG&libraries=drawing,geometry,place,convertor,visualization"></script>
|
||
<script type="text/javascript">
|
||
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
|
||
var dragstart = 0;
|
||
var swop_element_ed = -1;
|
||
var create_table_by_spec = null;
|
||
var spec_table_data = [];
|
||
var spec_value_temp_id_number = 0;
|
||
|
||
layui.config({
|
||
version:"{$front_version}",
|
||
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
|
||
}).extend({
|
||
index: 'lib/index' //主入口模块
|
||
}).use(['index', 'element', 'jquery', 'like', 'likeedit'], function () {
|
||
var $ = layui.$;
|
||
var like = layui.like;
|
||
var form = layui.form;
|
||
var likeedit = layui.likeedit;
|
||
|
||
$('.first_ratio').bind('input propertychange', function() {
|
||
var that = $(this);
|
||
var value = that.val();
|
||
format(that,value)
|
||
|
||
});
|
||
$(document).on('click','#lon',function(){
|
||
if(!$("#demo1").val()){
|
||
layer.msg('请先填写客户所在地址', { icon: 5, anim: 6 });
|
||
return false;
|
||
}
|
||
var markers = [];
|
||
$("#tMap").removeClass('layui-hide');
|
||
layer.open({
|
||
type:1,
|
||
area:["800px","600px"],
|
||
title:"地图标识",
|
||
btn: ['取消','确定'],
|
||
skin: 'layui-ext-yourskin',
|
||
content:layui.jquery('#tMap'),
|
||
success:function(){
|
||
let map = new qq.maps.Map(document.getElementById("maplocation"), {
|
||
center: new qq.maps.LatLng(26.67865,106.62298), // 地图的中心地理坐标。
|
||
zoom:13, // 地图的中心地理坐标。
|
||
});
|
||
|
||
var latlngBounds = new qq.maps.LatLngBounds();
|
||
searchService = new qq.maps.SearchService({
|
||
|
||
complete:function(results){
|
||
console.log(results)
|
||
var pois = results.detail.pois;
|
||
var infoWin = new qq.maps.InfoWindow({
|
||
map: map
|
||
});
|
||
var latlngBounds = new qq.maps.LatLngBounds();
|
||
for (var i = 0, l = pois.length; i < l; i++) {
|
||
var poi = pois[i];
|
||
//扩展边界范围，用来包含搜索到的Poi点
|
||
latlngBounds.extend(poi.latLng);
|
||
|
||
(function(n) {
|
||
console.log(111)
|
||
var marker = new qq.maps.Marker({
|
||
map: map
|
||
});
|
||
marker.setPosition(pois[n].latLng);
|
||
|
||
marker.setTitle(i + 1);
|
||
markers.push(marker);
|
||
|
||
|
||
qq.maps.event.addListener(marker, 'click', function() {
|
||
let latX = pois[n].latLng.getLat().toFixed(6);
|
||
let lngY = pois[n].latLng.getLng().toFixed(6);
|
||
$('#lon').val(latX);
|
||
$('#lat').val(lngY);
|
||
infoWin.open();
|
||
infoWin.setContent('<div style="width:280px;height:100px;">' + '当前经纬度：' +
|
||
pois[n].latLng + '，名称：' + pois[n].name + '，当前位置：' + pois[n].address +'</div>');
|
||
infoWin.setPosition(pois[n].latLng);
|
||
});
|
||
})(i);
|
||
}
|
||
//调整地图视野
|
||
map.fitBounds(latlngBounds);
|
||
}
|
||
});
|
||
qq.maps.event.addListener(map, 'click', function(event) {
|
||
var marker=new qq.maps.Marker({
|
||
position:event.latLng,
|
||
map:map,
|
||
draggable: true,
|
||
});
|
||
var info = new qq.maps.InfoWindow({
|
||
map: map
|
||
});
|
||
var point = event.latLng;
|
||
let latX = point.getLat().toFixed(6);
|
||
let lngY = point.getLng().toFixed(6);
|
||
$('#lon').val(latX);
|
||
$('#lat').val(lngY);
|
||
|
||
qq.maps.event.addListener(map, 'click', function(event) {
|
||
|
||
marker.setMap(null);
|
||
});
|
||
|
||
qq.maps.event.addListener(marker, 'dragging', function(event) {
|
||
|
||
var latLng = event.latLng;
|
||
let lat = latLng.getLat().toFixed(6);
|
||
let lng = latLng.getLng().toFixed(6);
|
||
$('#lon').val(lng);
|
||
$('#lat').val(lat);
|
||
});
|
||
});
|
||
|
||
} ,
|
||
yes: function(index, layero){
|
||
|
||
//do something
|
||
layer.close(index); //如果设定了yes回调，需进行手工关闭
|
||
},
|
||
cancel: function(index, layero){
|
||
//if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
|
||
document.getElementById("tMap").style.display="none";//通过设置display属性可以使div隐藏后释放占用的页面空间
|
||
layer.close(index)
|
||
// }
|
||
return false;
|
||
} //这里content是一个普通的String
|
||
});
|
||
|
||
$(document).on('click','.searchKey',function(){
|
||
var search_key=$("#search_key").val();
|
||
var city=$(".el-input__inner").val();
|
||
searchService.setLocation(search_key);
|
||
searchService.search(search_key);
|
||
|
||
})
|
||
});
|
||
|
||
|
||
//渲染品牌
|
||
var brands = {$brand_lists | raw};
|
||
setBrand();
|
||
function setBrand(default_id) {
|
||
var brand_select_html = '<option value="">请选择渠道来源</option>';
|
||
for (var i in brands) {
|
||
brand_select_html += '<option value="' + brands[i]['id'] + '">' + brands[i]['name'] + '</option>';
|
||
}
|
||
$('select[name="brand_id"]').html(brand_select_html);
|
||
$('select[name="brand_id"]').val(default_id);
|
||
form.render('select');
|
||
}
|
||
|
||
|
||
//分类联动
|
||
var categorys = {$category_lists | raw};
|
||
|
||
setSelectFirst();
|
||
function setSelectFirst(default_id) {
|
||
var category_select_html = '<option value="">请选择分类</option>';
|
||
for (var i in categorys) {
|
||
if (categorys[i]['level'] == 1) {
|
||
category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
|
||
}
|
||
}
|
||
$('select[name="first_category_id"]').html(category_select_html);
|
||
$('select[name="first_category_id"]').val(default_id);
|
||
form.render('select');
|
||
}
|
||
function setSelectSecond(default_id, parent_id) {
|
||
parent_id = parent_id === undefined ? $('select[name="first_category_id"]').val() : parent_id;
|
||
$('select[name="second_category_id"]').html('<option value="">请选择分类</option>');
|
||
$('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
|
||
var category_select_html = '<option value="">请选择分类</option>';
|
||
|
||
for (var i in categorys) {
|
||
if (categorys[i]['parent_id'] == parent_id) {
|
||
category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
|
||
}
|
||
}
|
||
$('select[name="second_category_id"]').html(category_select_html);
|
||
$('select[name="second_category_id"]').val(default_id);
|
||
form.render('select');
|
||
}
|
||
function setSelectThird(default_id, parent_id) {
|
||
parent_id = parent_id === undefined ? $('select[name="second_category_id"]').val() : parent_id;
|
||
$('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
|
||
var first_category_id = $('select[name="first_category_id"]').val();
|
||
var category_select_html = '<option value="">请选择分类</option>';
|
||
for (var i in categorys) {
|
||
if (categorys[i]['parent_id'] == parent_id) {
|
||
category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
|
||
}
|
||
}
|
||
$('select[name="third_category_id"]').html(category_select_html);
|
||
$('select[name="third_category_id"]').val(default_id);
|
||
form.render('select');
|
||
}
|
||
|
||
form.on('select(first_category)', function (data) {
|
||
setSelectSecond('', data.value);
|
||
});
|
||
form.on('select(second_category)', function (data) {
|
||
setSelectThird('', data.value);
|
||
});
|
||
//------------------------价格库存----------------------------------
|
||
//显示或隐藏规格项删除按钮
|
||
$(document).on('mouseenter', '.goods-spec-value', function () {
|
||
$(this).find('.goods-spec-value-del-x').show();
|
||
});
|
||
$(document).on('mouseleave', '.goods-spec-value', function () {
|
||
$(this).find('.goods-spec-value-del-x').hide();
|
||
});
|
||
|
||
|
||
// 单规格图片
|
||
like.imageUpload('.goods-one-spec-img-add', function (uris, element) {
|
||
if(uris.length>1){
|
||
layer.msg('最多最能选中1张图片');
|
||
return;
|
||
}
|
||
element.hide();
|
||
var key = element.parent().parent().parent().attr('spec-value-temp-ids');
|
||
spec_table_data["spec_image[]"+key] = uris[0];//保存图片地址
|
||
$(element).parent().html('<input name="one_spec_image" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '"><a class="goods-one-spec-img-del-x">x</a><img class="goods-spec-img" src="' + uris[0] + '">');
|
||
});
|
||
$(document).on('mouseenter', '.goods-spec-img-div', function () {
|
||
$(this).find('.goods-one-spec-img-del-x').show();
|
||
});
|
||
$(document).on('mouseleave', '.goods-spec-img-div', function () {
|
||
$(this).find('.goods-one-spec-img-del-x').hide();
|
||
});
|
||
$(document).on('click', '.goods-one-spec-img-del-x', function () {
|
||
$(this).parent().html('<input type="hidden" name="one_spec_image"><img src="/static/common/image/plug/goods-lists-add-image.png" class="goods-one-spec-img-add">');
|
||
});
|
||
|
||
//多规格图片
|
||
like.imageUpload('.goods-spec-img-add', function (uris, element) {
|
||
|
||
if(uris.length>1){
|
||
layer.msg('最多最能选中1张图片');
|
||
return;
|
||
}
|
||
element.hide();
|
||
var key = element.parent().parent().parent().attr('spec-value-temp-ids');
|
||
spec_table_data["spec_image[]"+key] = uris[0];//保存图片地址
|
||
$(element).parent().html('<input name="spec_image[]" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '"><a class="goods-spec-img-del-x">x</a><img class="goods-spec-img" src="' + uris[0] + '">');
|
||
});
|
||
$(document).on('mouseenter', '.goods-spec-img-div', function () {
|
||
$(this).find('.goods-spec-img-del-x').show();
|
||
});
|
||
$(document).on('mouseleave', '.goods-spec-img-div', function () {
|
||
$(this).find('.goods-spec-img-del-x').hide();
|
||
});
|
||
$(document).on('click', '.goods-spec-img-del-x', function () {
|
||
var key = 'spec_image[]' + $(this).parent().parent().parent().attr('spec-value-temp-ids');
|
||
$(this).parent().html('<input type="hidden" name="spec_image[]"><img src="/static/common/image/plug/goods-lists-add-image.png" class="goods-spec-img-add">');
|
||
spec_table_data[key] = '';
|
||
|
||
});
|
||
$(document).on('click', '.goods-spec-img', function () {
|
||
like.showImg($(this).attr('src'),600);
|
||
});
|
||
|
||
//规格生成表格
|
||
createTableBySepc = function () {
|
||
if ($('.goods-spec').size() <= 0) {
|
||
$('#more-spec-lists').hide();
|
||
return;
|
||
}
|
||
|
||
$('#more-spec-lists').show();
|
||
var table_title = [];
|
||
var table_data = [];
|
||
var spec_value_temp_arr = [];
|
||
var i = 0;
|
||
var th_html = $('#template-spec-table-th').html();
|
||
var tr_html = $('#template-spec-table-tr').html();
|
||
|
||
//遍历规格项目
|
||
$('.goods-spec').each(function () {
|
||
var spec_name = $(this).find('.spec_name').first().val();
|
||
if (isEmptyString(spec_name)) {
|
||
return true;
|
||
}
|
||
table_title[i] = spec_name;
|
||
table_data[i] = [];
|
||
spec_value_temp_arr[i] = [];
|
||
var j = 0;
|
||
$(this).find('.goods-spec-value .goods-spec-value-input').each(function () {
|
||
var spec_value = $(this).val();
|
||
var spec_value_temp_id = $(this).attr('spec-value-temp-id');
|
||
if (isEmptyString(spec_value)) {
|
||
return true;
|
||
}
|
||
table_data[i][j] = spec_value;
|
||
spec_value_temp_arr[i][j] = spec_value_temp_id;
|
||
j++;
|
||
});
|
||
i++;
|
||
});
|
||
|
||
table_html = '';
|
||
|
||
//表格头部组装
|
||
spec_th_html = '';
|
||
for (var i in table_title) {
|
||
spec_th_html += '<th>' + table_title[i] + '</th>';
|
||
}
|
||
table_html = th_html.replace('{spec_th}', spec_th_html);
|
||
|
||
spec_value_temp_arr = cartesianProduct(spec_value_temp_arr);
|
||
table_data = cartesianProduct(table_data);
|
||
for (var i in table_data) {
|
||
var spec_tr_html = '';
|
||
var tr_name_arr = [];
|
||
var specs = '';
|
||
if (Array.isArray(table_data[i])) {
|
||
//根据规格创建tr的id
|
||
var spec_value_temp_ids = '';
|
||
for(var j in spec_value_temp_arr[i]){
|
||
spec_value_temp_ids += spec_value_temp_arr[i][j]+',';
|
||
}
|
||
spec_value_temp_ids = spec_value_temp_ids.substring(0, spec_value_temp_ids.lastIndexOf(','));
|
||
spec_tr_html += '<tr spec-value-temp-ids="'+spec_value_temp_ids+'">';
|
||
for (var j in table_data[i]) {
|
||
spec_tr_html += '<td>' + table_data[i][j] + '</td>';
|
||
tr_name_arr[j] = table_data[i][j];
|
||
specs += table_data[i][j].replace(',', '') + ',';
|
||
}
|
||
} else {
|
||
var spec_value_temp_ids = spec_value_temp_arr[i];
|
||
spec_tr_html = '<tr spec-value-temp-ids="'+spec_value_temp_ids+'">';
|
||
spec_tr_html += '<td>' + table_data[i] + '</td>';
|
||
specs += table_data[i].replace(',', '') + ',';
|
||
}
|
||
specs = specs.substring(0, specs.lastIndexOf(','));
|
||
spec_table_data["spec_value_str[]"+spec_value_temp_ids] = specs;
|
||
spec_tr_html += '<td style="display: none"><input type="hidden" name="spec_value_str[]" value="' + specs + '"><input type="hidden" name="item_id[]" value=""></td>';
|
||
table_html += tr_html.replace('{spec_td}', spec_tr_html);
|
||
|
||
}
|
||
$('#more-spec-lists-table').html(table_html);
|
||
setTableValue();
|
||
}
|
||
|
||
{notempty name='info'}
|
||
var goods_info= {$info|raw|default=''};
|
||
console.log(goods_info);
|
||
$('input[name="id"]').val(goods_info['id']);
|
||
$('input[name="address"]').val(goods_info['address']);
|
||
$('input[name="name"]').val(goods_info['contact']);
|
||
$('input[name="phone"]').val(goods_info['telephone']);
|
||
$('input[name="store_latitude"]').val(goods_info['lng']);
|
||
$('input[name="store_longitude"]').val(goods_info['lat']);
|
||
setSelectFirst(goods_info['province_id']);
|
||
setSelectSecond(goods_info['city_id']);
|
||
setSelectThird(goods_info['district_id']);
|
||
$('input[name="areas"]').val(goods_info['areas']);
|
||
setBrand(goods_info['brand_id']); //渲染品牌
|
||
$("input[name=sex][value="+goods_info['sex']+"]").prop("checked",true);
|
||
$("input[name=pet][value="+goods_info['pet']+"]").prop("checked",true);
|
||
$("input[name=hbl][value="+goods_info['hbl']+"]").prop("checked",true);
|
||
form.render();
|
||
{/notempty}
|
||
//------------------------编辑页面----------------------------------
|
||
});
|
||
</script> |