wxml 代码:
<!--pages/show/show.wxml-->
<l-tabs bind:linchange="changeTabs">
<l-tabpanel tab="京东物流" key="one" slot="one">
<l-input label="位置" bindtap="map" required="{{true}}" value="{{onenumber}}" placeholder="小区名称或地址" />
<l-image-picker size="3" bind:linchange="onChangeTap" />
<!-- 户型 -->
<view class="section">
<picker bindchange="bindPickeru_house" value="{{i_name}}" range="{{house}}" range-key="i_name">
<view class="picker">
<l-input label="户型" required="{{true}}" value="{{housenumber}}" placeholder="户型" />
</view>
</picker>
</view>
<!-- 卧室类型 -->
<view class="section">
<picker bindchange="bindPickeru_type" value="{{i_name}}" range="{{type}}" range-key="i_name">
<view class="picker">
<l-input label="卧室类型" required="{{true}}" value="{{typenumber}}" placeholder="卧室类型" />
</view>
</picker>
</view>
<!-- 卧室属性 -->
<view class="section">
<picker bindchange="bindPicker_property" value="{{i_name}}" range="{{housing}}" range-key="i_name">
<view class="picker">
<l-input label="卧室属性" required="{{true}}" value="{{housingnumber}}" placeholder="卧室属性" />
</view>
</picker>
</view>
<l-input label="面积" bind:lininput="number" required="{{true}}" type="number" placeholder="单间面积" />
<l-input label="室内要求" bind:lininput="for" required="{{true}}" placeholder="室友/性别/特点" />
<l-input label="租金" bind:lininput="rent" required="{{true}}" type="number" placeholder="月租金价格" />
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
<l-input label="手机验证" bind:lininput="rent" required="{{true}}" type="number" placeholder="手机号码" />
<button bindtap="indexAdd">发布房源</button>
</l-tabpanel>
<l-tabpanel tab="品牌" key="two" slot="two">
<view class="tab-content" bindtap="map">地图</view>
</l-tabpanel>
<l-tabpanel tab="接口" key="three" slot="three">
<view class="tab-content">接口</view>
</l-tabpanel>
<l-tabpanel tab="面板" key="four" slot="four">
<l-segment bind:linchange="changeTabs">
<l-segment-item tab="客厅" key="one" />
<l-segment-item tab="卧室" key="two" />
<l-segment-item tab="厨房" key="three" />
</l-segment>
</l-tabpanel>
</l-tabs>
js 代码
// pages/show/show.js
Page({
/**
* 页面的初始数据
*/
data: {
selector:'selector',
array: ['美国', '中国', '巴西', '日本'],
house: [],
type:[],
housing:[],
urls:[],
//户型
housenumber:'',
//类型
typenumber:'',
//属性
housingnumber:'',
//位置
onenumber:'',
//面积
numberarea:'',
//要求
for:'',
//租金
rent:'',
//经度
latitude:0,
//纬度
longitude:0,
//图片路径
urlArr:[]
},
/**
* 获取下拉框数据
*/
onLoad: function (options) {
var _this = this;
wx.request({
url: 'http://www.showinent.com/Api/index/selController',
success:function(res){
console.log(res);
//户型
var house = res.data.date.house;
//房源类型
var type = res.data.date.type;
//卧室类型
var housing = res.data.date.bedroom
//将值传递给data内
_this.setData({
house,
type,
housing
})
}
})
},
//多文件上传
onChangeTap(evn){
var _this = this;
let tempFilePaths = evn.detail.current;
//定义一个空数组,进行存放上传图片url
var urlArror = [];
for (let index = 0; index < tempFilePaths.length; index++) {
wx.uploadFile({
url: 'http://www.showinent.com/Api/index/upload', //仅为示例,非真实的接口地址
filePath: tempFilePaths[index],
name: 'file',
success:function(res){
let name = res.data;
let jsonname = JSON.parse(name);
urlArror[index] = jsonname.result;
_this.setData({
urlArr:urlArror
})
}
})
}
},
//下拉框取值
bindPickeru_house:function(dare){
var _this=this;
var id = dare.detail.value;
console.log(_this.data.house[id].i_name);
this.setData({
housenumber:_this.data.house[id].i_name
})
},
bindPickeru_type:function(dare){
var _this=this;
var id = dare.detail.value;
console.log(_this.data.type[id].i_name);
this.setData({
typenumber:_this.data.type[id].i_name
})
},
bindPicker_property:function(dare){
var _this=this;
var id = dare.detail.value;
console.log(_this.data.housing[id].i_name);
console.log(_this.data.housing[id].i_name);
this.setData({
housingnumber:_this.data.housing[id].i_name
})
},
//地图获取位置
map:function(res){
var _this = this;
//先查清楚经纬度
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
_this.setData({
latitude,
longitude
})
}
})
//再通过经纬度查询详细地址
wx.chooseLocation({
latitude: _this.data.latitude,
longitude: _this.data.longitude,
success: function(daname){
console.log(daname)
_this.setData({
onenumber:daname.name
})
}
})
},
number:function(numberres){
// console.log(numberres.detail.value);
this.setData({
number:numberres.detail.value
})
},
for:function(forres){
// console.log(forres.detail.value);
this.setData({
for:forres.detail.value
})
},
rent:function(rentres){
// console.log(rentres.detail.value);
this.setData({
rent:rentres.detail.value
})
},
//提交
indexAdd:function(){
var _this = this;
console.log(_this.data);
wx.request({
url: 'http://www.showinent.com/Api/index/submitPost',
data:{
for:_this.data.for,
rent:_this.data.rent,
number:_this.data.number,
housenumber:_this.data.housenumber,
typenumber:_this.data.typenumber,
housingnumber:_this.data.housingnumber,
onenumber:_this.data.onenumber
},
success:function(resIndex){
console.log(resIndex);
}
})
}
})
json 代码
{
"usingComponents": {
"l-image-picker": "/miniprogram_npm/lin-ui/image-picker/index",
"l-input":"/miniprogram_npm/lin-ui/input/index",
"l-radio-group":"/miniprogram_npm/lin-ui/radio-group/index",
"l-tabs":"/miniprogram_npm/lin-ui/tabs/index",
"l-tabpanel":"/miniprogram_npm/lin-ui/tabpanel/index",
"l-list":"/miniprogram_npm/lin-ui/list/index",
"l-segment":"/miniprogram_npm/lin-ui/segment/index",
"l-segment-item":"/miniprogram_npm/lin-ui/segment-item/index"
}
}
wsxx 代码:
pages/show/show.wxss
.nameView{
width: 90%;
height: 50px;
margin: auto;
}
/* fenlei */
.fenlei{
margin: 0 25rpx;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #e6e6e6;
display: flex;
align-items: center;
}
.fenlei text{
font-size: 30rpx;
color: #999999;
margin-left: 15rpx;
}
/* 下拉框 */
.select_box {
background: #fff;
width: 620rpx;
/* margin: 0 auto; */
height: 90rpx;
line-height: 90rpx;
text-align: left;
position: relative;
}
.select {
box-sizing: border-box;
width: 100%;
height: 86rpx;
/* border: 1px solid #efefef; */
border-radius: 8rpx;
display: flex;
align-items: center;
padding: 0 20rpx;
}
.select_text {
font-size: 28rpx;
flex: 1;
color: rgb(102, 102, 102);
line-height: 86rpx;
height: 86rpx;
}
.select_img {
width: 40rpx;
height: 40rpx;
display: block;
transition: transform 0.3s;
}
.select_img_rotate {
transform: rotate(180deg);
}
.option_box {
position: absolute;
top: 86rpx;
width: 100%;
/* border: 1px solid #efefef; */
box-sizing: border-box;
height: 0;
overflow-y: auto;
border-top: 0;
background: #fff;
transition: height 0.3s;
z-index: 100;
}
.option {
display: block;
line-height: 40rpx;
font-size: 28rpx;
border-bottom: 1px solid #efefef;
padding: 10rpx;
color: rgb(102, 102, 102);
}
后台代码:
<?php
declare (strict_types = 1);
namespace app\Api\controller;
use app\api\server\Token;
use app\model\user_img;
use app\model\user_show;
use app\model\zname_property;
use app\model\zrent_house;
use app\model\zrent_housing;
use app\model\zrent_type;
use app\Request;
use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
//use app\cms\model\Banner as BannerModel;
use OSS\OssClient;
use OSS\Core\OssException;
class Index
{
//登录 未完成
public function index(Request $request)
{
$code =input('get.code');
//获取微信授权url
$url = sprintf(config('wx.wxLoginUrl'),config('wx.AppID'),config('wx.AppSecret'),$code);
//获取openid
$data = curlGet($url);
//进行查询数据库里面是否有该用户,如果没有,则进行新增
$user = user_show::where('openid',$data['openid'])->find()->ToArray();
//如果没有用户进行创建
if (empty($user)){
$user = user_show::create([
'openid'=>$data['openid']
]);
}
$id = $user['id'];
//生成token,保存用户登录状态
$token = (new Token())->generateToken($id);
//将token
return json(['token'=>$token,'error_code'=>0,'msg'=>'登录成功','openid'=>$user['openid']]);
}
//轮播图
public function selSlideshow()
{
$date = user_img::select()->ToArray();
return json(['date'=>$date]);
}
//数据查询
public function selController()
{
//房源类型id
$type_id = zname_property::where('enum','fang_type')->value('i_id');
$date['type'] = zname_property::where('pid',$type_id)->select()->toArray();
//户型id
$house_id = zname_property::where('enum','fang_house')->value('i_id');
$date['house'] = zname_property::where('pid',$house_id)->select()->toArray();
//卧室类型id
$bedroom_id = zname_property::where('enum','fang_bedroom')->value('i_id');
$date['bedroom'] = zname_property::where('pid',$bedroom_id)->select()->toArray();
return json(['date'=>$date]);
}
//小程序 图片上传
public function upload()
{
//接收文件上传的值
$file = $_FILES;
//本地的文件路径
$localFilePath = $file['file']['tmp_name'];
//截取文件后缀名
//$suffix = '.jpg';
$suffix = strtolower(substr($file['file']['name'],strpos($file['file']['name'],'.')));
//生成一个唯一的文件名称,重命名 (md5加密原文件名+秒+随机数)
$fileName = md5($file['file']['name']) . date('s',time()) . rand(1,9999999);
$fileName .= $suffix;
//上传七牛云业务逻辑
$accessKey = config('config.AccessKey'); //去控制台的秘钥管理拿AK
$secretKey = config('config.SecretKey');//去控制台的秘钥管理拿SK
$auth = new Auth($accessKey, $secretKey);
//七牛云桶名,根据自己实际进行填写
$bucket = config('config.BUCKET');
// 生成上传Token
$token = $auth->uploadToken($bucket);
// 构建 UploadManager 对象
$uploadMgr = new UploadManager();
// 调用 UploadManager 的 putFile 方法进行文件的上传。
list($ret, $err) = $uploadMgr->putFile($token, $fileName, $localFilePath);
//错误信息提示
if ($err != null) {
//可调整为错误页面
return json([
'msg'=>'上传失败',
'code'=>201,
'result'=>''
]);
}
//把七牛云图片路径存储到我们自己的数据库 七牛云图片路径
$imageUrl = config('config.DOMAIN').'/' . $fileName;
return json([
'msg'=>'上传成功',
'code'=>200,
'result'=>$imageUrl
]);
}
//小程序 提交入库
public function submitPost(Request $request){
$date = input('get.');
//类型
$typenumber = input('get.typenumber');
//户型
$housenumber = input('get.housenumber');
//属性
$housingnumber = input('get.housingnumber');
dump($typenumber,$housenumber,$housingnumber);die();
}
}