public function list()
{
$arr = Fang::all();
return view('res/list', compact('arr'));
}
/**
* 房源添加
*/
public function del()
{
//查询省
$arr = City::where('pid', '=', 0)->get();
return view('res/res', compact('arr'));
}
/**
* 添加方法
*/
public function add(Request $request)
{
//接受数据
$post = $request->post();
array_shift($post);
unset($post['file']);
//获取省份
$province = City::where('id', $post['fang_province'])->value('name');
//获取城市
$city = City::where('id', $post['fang_city'])->value('name');
//获取区县
$region = City::where('id', $post['fang_region'])->value('name');
//拼接详细地址
$addres = $province . $city . $region . $post['fang_addr'];
//使用函数
$url = sprintf(config('gaode.gaode'), $addres);
//curl
$info = curlGet($url);
//取出经纬度
$location = $info['geocodes'][0]['location'];
//分割成数组
$nexpory = explode(',', $location);
//接值
$post['latitude'] = $nexpory[0];
$post['longitude'] = $nexpory[1];
//添加入库
$arr = Fang::create($post);
$client = ClientBuilder::create()->build();
// 写文档
$params = [
'index' => 'fang',
'type' => '_doc',
'body' => $post,
];
// 添加数据到索引文档中
$client->index($params);
}
public function fangadd()
{
//查询省
$arr = City::where('pid', '=', 0)->get();
return view('', compact('arr'));
}
//获取城市id
//GET /fang/_search
public function city(Request $request)
{
$data = City::where('pid', $request->get('id'))->get(['id', 'name']);
return $data;
}
//处理图片
public function upfile(Request $request)
{
// 默认图标
$pic = config('up.pic');
if ($request->hasFile('file')) {
// 上传
// 参数2 配置的节点名称
$ret = $request->file('file')->store('', 'fangowner');
$pic = '/uploads/fangowner/' . $ret;
$accessKeyId = "LTAI5tGsyR7ppvCCFWw3Ykee";
$accessKeySecret = "MeQyMHXrKlnUK9nbtcUo4gm2i94p9j";
// Endpoint以杭州为例，其它Region请按实际情况填写。
$endpoint = "oss-cn-hangzhou.aliyuncs.com";
// 设置存储空间名称。
$bucket = "zhaochongbin";
// 设置文件名称。
//这里是由sha1加密生成文件名 之后连接上文件后缀
$object = sha1(date('YmdHis', time()) . uniqid()) . '.jpg';
$url = 'https://test.zcblx.cn/' . $object;
// <yourLocalFile>由本地文件路径加文件名包括后缀组成，例如/users/local/myfile.txt。
$filePath = $request->file('file')->getPathname();
try {
$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
$path = $ossClient->uploadFile($bucket, $object, $filePath);
} catch (OssException $e) {
printf(__FUNCTION__ . ": FAILED\n");
printf($e->getMessage() . "\n");
}
return $path['info']['url'];
}
return ['status' => 0, 'url' => $pic];
}
视图展示
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="/static/lib/html5shiv.js"></script>
<script type="text/javascript" src="/static/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/statuc/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="/static/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>房源列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 管理员管理 <span class="c-gray en">></span> 管理员列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
<div class="page-container">
<div class="text-c"> 日期范围：
<input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="datemin" class="input-text Wdate" style="width:120px;">
-
<input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" id="datemax" class="input-text Wdate" style="width:120px;">
<input type="text" class="input-text" style="width:250px" placeholder="输入管理员名称" id="" name="">
<button type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont"></i> 搜用户</button>
</div>
<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量删除</a> <a href="{{route('admin.del')}}" onclick="admin_add('添加管理员','admin-add.html','800','500')" class="btn btn-primary radius"><i class="Hui-iconfont"></i> 添加房源</a></span> <span class="r">共有数据：<strong>54</strong> 条</span> </div>
<table class="table table-border table-bordered table-bg">
<thead>
<tr>
<th scope="col" colspan="9">员工列表</th>
</tr>
<tr class="text-c">
<th width="25"><input type="checkbox" name="" value=""></th>
<th width="40">ID</th>
<th width="150">房源名称</th>
<th width="150">房源小区名称</th>
<th width="150">租金</th>
<th width="50">楼层</th>
<th width="150">房屋描述</th>
<th width="130">加入时间</th>
<th width="100">是否已启用</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
@foreach($arr as $k=>$v)
<tr class="text-c">
<td><input type="checkbox" value="1" name=""></td>
<td>{{$v['id']}}</td>
<td>{{$v['fang_name']}}</td>
<td>{{$v['fang_xiaoqu']}}</td>
<td>{{$v['fang_rent']}}</td>
<td>{{$v['fang_floor']}}</td>
<td>{{$v['fang_desn']}}</td>
<td>2014-6-11 11:11:42</td>
<td class="td-status"><span class="label label-success radius">已启用</span></td>
<td class="td-manage"><a style="text-decoration:none" onClick="admin_stop(this,'10001')" href="javascript:;" title="停用"><i class="Hui-iconfont"></i></a> <a title="编辑" href="javascript:;" onclick="admin_edit('管理员编辑','admin-add.html','1','800','500')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a></td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
/*
参数解释：
title 标题
url 请求的url
id 需要操作的数据id
w 弹出层宽度（缺省调默认值）
h 弹出层高度（缺省调默认值）
*/
/*管理员-增加*/
function admin_add(title,url,w,h){
layer_show(title,url,w,h);
}
/*管理员-删除*/
function admin_del(obj,id){
layer.confirm('确认要删除吗？',function(index){
$.ajax({
type: 'POST',
url: '',
dataType: 'json',
success: function(data){
$(obj).parents("tr").remove();
layer.msg('已删除!',{icon:1,time:1000});
},
error:function(data) {
console.log(data.msg);
},
});
});
}
/*管理员-编辑*/
function admin_edit(title,url,id,w,h){
layer_show(title,url,w,h);
}
/*管理员-停用*/
function admin_stop(obj,id){
layer.confirm('确认要停用吗？',function(index){
//此处请求后台程序，下方是成功后的前台处理……
$(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_start(this,id)" href="javascript:;" title="启用" style="text-decoration:none"><i class="Hui-iconfont"></i></a>');
$(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">已禁用</span>');
$(obj).remove();
layer.msg('已停用!',{icon: 5,time:1000});
});
}
/*管理员-启用*/
function admin_start(obj,id){
layer.confirm('确认要启用吗？',function(index){
//此处请求后台程序，下方是成功后的前台处理……
$(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_stop(this,id)" href="javascript:;" title="停用" style="text-decoration:none"><i class="Hui-iconfont"></i></a>');
$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
$(obj).remove();
layer.msg('已启用!', {icon: 6,time:1000});
});
}
</script>
</body>
</html>
视图添加
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加房源</title>
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"/>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<form action="{{route('admin.add')}}" method="post">
@csrf
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">房源名称</label>
<input type="text" class="form-control" value="上海八维" name="fang_name" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">房源小区名称</label>
<input type="text" class="form-control" value="八维" name="fang_xiaoqu" id="exampleInputPassword1">
</div>
请选择地址
<select name="fang_province" style="width: 100px;" onchange="selectCity(this,'fang_city')">
<option value="0">==请选择省==</option>
@foreach($arr as $k=>$v)
<option value="{{ $v->id }}">{{ $v->name }}</option>
@endforeach
</select>
<select name="fang_city" id="fang_city" style="width: 100px;" onchange="selectCity(this,'fang_region')">
<option value="0">==市==</option>
</select>
<select name="fang_region" id="fang_region" style="width: 100px;">
<option value="0">==区/县==</option>
</select>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">租金</label>
<input type="text" class="form-control" value="100" name="fang_rent" id="exampleInputPassword1">元
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">房源地址</label>
<input type="text" class="form-control" value="上海市奉贤区八维学校" name="fang_addr" id="exampleInputPassword1">元
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">楼层</label>
<input type="text" class="form-control" value="1" name="fang_floor" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">房屋描述</label>
<input type="text" class="form-control" value="这个房子不错" name="fang_desn" id="exampleInputPassword1">
</div>
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋详情：</label>
<textarea id="fang_body" name="fang_body">房屋详情信息添加</textarea>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋图片：</label>
<div class="formControls col-xs-2 col-sm-2">
<div id="picker">房屋图片</div>
</div>
<div class="formControls col-xs-6 col-sm-7">
<!-- 表单提交时，上传图片地址，以#隔开 -->
<input type="hidden" name="fang_pic" id="fang_pic"/>
<!-- 显示上传成功后的图片容器 -->
<div id="imglist"></div>
</div>
</div>
<button type="submit" class="btn btn-primary">添加房源</button>
</form>
</body>
</html>
<script src="/jquery/jquery-3.3.1.min.js"></script>
<!-- webuploader上传js -->
<script type="text/javascript" src="/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<script>
// 富文本编辑器
var ue = UE.getEditor('fang_body', {
initialFrameHeight: 200
});
function selectCity(obj, selectName) {
// 得到选中的值
let value = $(obj).val();
// 以省份ID得到市 发起ajax请求
$.get('{{ route('admin.city') }}', {id: value}).then(jsonArr => {
let html = '<option value="0">==市==</option>';
// 循环 map for for in for of $.each
jsonArr.map(item => {
var {id, name} = item;
html += `<option value="${id}">${name}</option>`;
});
$('#' + selectName).html(html);
});
}
// 富文本编辑器
var ue = UE.getEditor('fang_body', {
initialFrameHeight: 200
});
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后，是否自动上传
auto: true,
// swf文件路径
swf: '/webuploader/Uploader.swf',
// 文件接收服务端 上传PHP的代码
server: '{{ route('admin.upfile') }}',
// 文件上传是携带参数
formData: {
_token: '{{csrf_token()}}'
},
// 文件上传是的表单名称
fileVal: 'file',
// 选择文件的按钮
pick: {
id: '#picker',
// 是否开启选择多个文件的能力
multiple: true
},
// 压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: true,
duplicate:true
});
// 上传成功时的回调方法
uploader.on('uploadSuccess', function (file, ret) {
// 解决表单提交时，图片以#隔开解决
let val = $('#fang_pic').val();
let tmp = val + '#' + ret.url;
$('#fang_pic').val(tmp);
// 图片显示
let imglist = $('#imglist');
// 注：一定要用追加还是不html覆盖
let html = `
<div style="position: relative;;width:100px;">
<img src="${ret.url}" style="width:100px;" />
<strong onclick="delpic(this,'${ret.url}')" style="position: absolute;right: 2px;top: 2px;color: white;font-size: 20px;">X<strong>
</div>
`;
imglist.append(html);
});
</script>
up.php
<?php
return[
// 默认图片
'pic' => '/uploads/article/1.jpg'
]
?>
curl.php
<?php
function curlGet($url)
{
$curl = curl_init();
//设置抓取的url
curl_setopt($curl, CURLOPT_URL, $url);
//设置头文件的信息作为数据流输出
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
//执行命令
$data = curl_exec($curl);
curl_close($curl);
$result = json_decode($data,true);
return $result;
}
|