2021-08-01

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();
    }

}