先安装oss扩展
后台处理数据
public function upload()
{
$filePath=$_FILES['file']['tmp_name'];
$fileName = (new Oss())->uploadFile($filePath);
return json(['code'=>200,'msg'=>"上传成功",'url'=>$fileName]);
}
//图片上传
onChangeTap(evn){
//获取最新上传的所有图片临时路径
let tempFilePaths = evn.detail.current;
//定义一个空数组,进行存放上传图片url
var urlArr = [];
for (let index = 0; index<tempFilePaths.length; index++) {
wx.uploadFile({
url: 'http://www.zc.com/api/upload', //仅为示例,非真实的接口地址
filePath: tempFilePaths[index],
name: 'file',
success: res => {
const data = JSON.parse(res.data);
//do something
urlArr.push(data.url)
this.setData({
urls: urlArr
})
}
})
}
},
//删除图片,处理数据
removeImage(event) {
//图片数组
let urls = this.data.urls;
//js根据指定下标删除元素,第一个参数是下标,第二个参数是从这个下标移出几个元素
urls.splice(event.detail.index, 1)
this.setData({
urls
})
},
表单添加页面
<form bindsubmit="formAdd">
<l-input label="名称:" name="fang_name" placeholder="请输入房源名称" />
<l-image-picker count="9" bind:linchange="onChangeTap" bind:linremove="removeImage"/>
<l-l-form-item>
<l-input label="地址:" name="city" bindtap="map" />
{{date}}
</l-l-form-item>
<l-form-item label="房源类型:" >
<view class="section">
<picker bindchange="bindPicker" name="state" value="{{array[index].name}}" range="{{array}}" range-key="name">
<view class="picker" >
当前选择:{{array[index].name}}
</view>
</picker>
</view>
</l-form-item>
<l-form-item label="户型:" >
<view class="section">
<picker bindchange="Change" name="states" value="{{dataRes[inde].name}}" range="{{dataRes}}" range-key="name">
<view class="picker">
当前选择:{{dataRes[index].name}}
</view>
</picker>
</view>
</l-form-item>
<l-form-item label="卧室类型:" >
<view class="section">
<picker bindchange="bind" name="stata" value="{{datas[ind].name}}" range="{{datas}}" range-key="name">
<view class="picker">
当前选择:{{datas[index].name}}
</view>
</picker>
</view>
</l-form-item>
<l-input label="面积:" name="fang_mianji" placeholder="请输入面积" />
<l-input label="室友要求" name="fang_shi" placeholder="请输入室友性别" />
<l-input label="租金" name="fang_price" placeholder="请输入租金价格" />
<button type="default" form-type="submit">提交</button>
</form>
js处理页面
page({
data: {
//图片
urls: [],
//选择地址
date:"请选择地址",
//房源类型
array: [],
//户型
datas:[],
//卧室类型
dataRes:[]
},
//地址绑定事件
map(){
wx.chooseLocation({
success:ret=>{
this.setData({
date:ret.name +ret.address
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.request({
url: 'http://www.zc.com/api/fang_attr',
success:res=>{
this.setData({
array:res.data.data,
dataRes:res.data.dataRes,
datas:res.data.datas
})
}
})
},
//房源类型
bindPicker: function(e) {
this.setData({
index: e.detail.value
})
},
//户型
Change:function(e){
console.log(e)
this.setData({
inde:e.detail.value
})
},
//卧室类型
bind:function(e){
console.log(e)
this.setData({
ind:e.detail.value
})
},
//添加数据
formAdd:function(e){
console.log(e)
// return
// // return
wx.request({
url: 'http://www.zc.com/api/create',
method:"POST",
data:{
city:this.data.date,
fang_name:e.detail.value.fang_name,
state:e.detail.value.state,
states:e.detail.value.states,
stata:e.detail.value.stata,
fang_mianji:e.detail.value.fang_mianji,
fang_price:e.detail.value.fang_price,
fang_shi:e.detail.value.fang_shi,
},
success:ret=>{
console.log(ret)
}
})
},
})
后台处理数据
public function fangAttr()
{
//房源类型
$data=FangAttr::where('fang_name','=','fang_direction')->find()->value('id');
$data = FangAttr::where('pid','=',$data)->select()->toArray() ;
//户型
$dataRes=FangAttr::where('fang_name','=','fang_type')->find()->id;
$dataRes = FangAttr::where('pid','=',$dataRes)->select()->toArray();
$datas=FangAttr::where('fang_name','=','fang_bedroom _type')->find()->id;
$datas = FangAttr::where('pid','=',$datas)->select()->toArray();
return json(['code'=>200,'msg'=>'查询成功','data'=>$data,'dataRes'=>$dataRes,'datas'=>$datas]);
}