tp6与微信小程序复杂表单提交

最新推荐文章于 2023-05-24 11:23:26 发布

that_were_you

最新推荐文章于 2023-05-24 11:23:26 发布

阅读量420

点赞数 2

分类专栏： php 文章标签： php thinkphp 小程序

本文链接：https://blog.csdn.net/that_were_you/article/details/119303592

版权

php 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先写一个前台的页面

我这里用了ui所以标签名不一样

效果如下

<l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submitForm">
    <l-image-picker count="9" bind:linchange="onChangeTap" />
    <l-form-item label="位置:" name="address">
        <l-input id="address" bindtap="address" value="{{address}}"  hide-label show-row="{{false}}"/>
    </l-form-item>
    <l-form-item label="房源类型:" name="type_data">
        <picker bindchange="type" value="{{type_index}}" range="{{type_data}}" range-key="name">
            <l-input id="type_data"class="picker" value="{{type_data[type_index].name}}"  hide-label show-row="{{false}}"/>

        </picker>
    </l-form-item>
    <l-form-item label="户型:" name="house_type">
        <picker bindchange="house_type" value="{{house_type_index}}" range="{{house_type_data}}" range-key="name">
            <l-input id="house_type"class="picker" value="{{house_type_data[house_type_index].name}}"  hide-label show-row="{{false}}"/>
        </picker>
    </l-form-item>
    <l-form-item label="卧室类型:" name="bedroom_type_data">
        <picker bindchange="bedroom_type" value="{{bedroom_type_index}}" range="{{bedroom_type_data}}" range-key="name">
            <l-input id="bedroom_type_data"class="picker" value="{{bedroom_type_data[bedroom_type_index].name}}"  hide-label show-row="{{false}}"/>
        </picker>
    </l-form-item>
    <l-form-item label="面积:" name="acreage">
        <l-input id="acreage"  hide-label show-row="{{false}}"/>
    </l-form-item>
    <l-form-item label="租金:" name="price">
        <l-input id="price"  hide-label show-row="{{false}}"/>
    </l-form-item>
    <l-form-item label="手机号:" name="phone">
        <l-input id="phone" bind:lininput="getphone" hide-label show-row="{{false}}"/>
        <l-button type="default" bind:lintap="getcode">获取验证码</l-button>
    </l-form-item>
    <l-form-item label="手机验证码:" name="code">
        <l-input id="code"   hide-label show-row="{{false}}"/>
        
    </l-form-item>
    <view slot="submit">
        <l-button>提交</l-button>
    </view>
    <view slot="reset">
        <l-button type="default" plain>重置</l-button>
    </view>
</l-form>

在js中的data

 data: {
                //图片地址
                urls: [],
                //房源 户型 卧室 的列表
                house_type_data: [],
                type_data:[],
                bedroom_type_data:[],
                //他们的初始下标
                bedroom_type_index:0,
                house_type_index:0,
                type_index:0,
                //他们的id
                bedroom_type_id:0,
                house_type_id:0,
                type_id:0,
                address:'',
                //经纬度
                latitude:'',
                longitude:'',
                //手机号
                phone:''
        
                
        },

接下来比较复杂一步一步来：

首先按效果图第一个多文件上传开始：

前台js

onChangeTap(e){
                
                // console.log(e.detail);
                let filePath = e.detail.current;
                // console.log(tempFilePaths);
                //定义一个空数组，进行存放上传图片url
                var urlArr = [];
                for( let index=0;index<filePath.length;index++){
                        wx.uploadFile({
                                filePath: filePath[index],
                                name: 'file',
                                url: 'http://www.backstage.com/api/upload',
                                header:{'token':wx.getStorageSync('token')},
                                success:res=>{
                                        // console.log(res);
                                        const data = JSON.parse(res.data);
                                //       console.log(data);
                                      urlArr.push(data.url)
                                      this.setData({
                                        urls: urlArr
                                      })
                                      console.log(this.data.urls);
                              }
                              })

                }
                
        },

后台接口

app下创建个server/Oss.php

use OSS\OssClient;
use OSS\Core\OssException;
public function getOss($filePath)
    {

        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
        $accessKeyId = "";
        $accessKeySecret = "";
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        $endpoint = "";
        // 设置存储空间名称。
        $bucket= "";
        // 设置文件名称。
        //这里是由sha1加密生成文件名 之后连接上文件后缀，生成文件规则根据自己喜好，也可以用md5
        //前面video/head/ 这是我的oss目录
        $fileName = date('Y-m-d', time()) . '/' . md5(time() . rand(1111, 9999999)) . '.png';

        try {
            $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
            $result = $ossClient->putObject($bucket, $fileName, file_get_contents($filePath));

        } catch (OssException $e) {
            print $e->getMessage();
        }
//        dump($result);dd();
        return $result['info']['url'];
    }

在控制器中调用：

如果写路由必须是post提交：

public function upLoad(Request $request)
    {
        //要上传文件的临时路径
        $filePath=$_FILES['file']['tmp_name'];
        //阿里云上传对象存储
        $fileName=(new OssServer())->getOss($filePath);
        return json(['error_code'=>0,'url'=>$fileName,'msg'=>'上传成功']);
    }

第二个，获取位置：

js部分

address(e){
                wx.getLocation({
                        type: 'wgs84',
                        success :res=> {
                                wx.chooseLocation({
                                        //经度
                                        latitude: res.latitude,
                                        //纬度
                                        longitude:res.longitude,
                                        success:ret=>{
                                                console.log(ret);
                                                this.setData({
                                                        address:ret.address+ret.name,
                                                        latitude:ret.latitude,
                                                        longitude:ret.longitude
                                                })
                                        }
                                      })
                        }
                       })
                
        },

第三个：下拉列表：

这个比较复杂

首先需要一个递归的数据库

比如说像我这样

也可以比我正规写我写的这个主要是方便看

接下来是js部分：

先在onLoad中获取值

onLoad: function (options) {
                //这个是ui的激活组件可以忽略
                wx.lin.initValidateForm(this)
                wx.request({
                  url: 'http://www.backstage.com/api/attr',
                  header:{'token':wx.getStorageSync('token')},
                  success:res=>{
                          console.log(res.data.data);
                          this.setData({
                                house_type_data:res.data.data.house_type_data,
                                bedroom_type_data:res.data.data.bedroom_type_data,
                                type_data:res.data.data.type_data
                          })
                          
                  }
                })
                
                
        },

选中后获取下标，下标再获取id

               type(e) {
                this.setData({
                        type_index:e.detail.value
                })
                var indes = e.detail.value;
                var dataid = this.data.type_data[indes]['id'];
                this.setData({
                        type_id:dataid
                })
                // console.log(this.data.type_id);
        
              },
              house_type(e) {
                this.setData({
                        house_type_index:e.detail.value
                })
                var indes = e.detail.value;
                var dataid = this.data.house_type_data[indes]['id'];
                this.setData({
                        house_type_id:dataid
                })
                // console.log(this.data.house_type_id);
        
              },
              bedroom_type(e) {
                this.setData({
                        bedroom_type_index:e.detail.value
                })
                var indes = e.detail.value;
                var dataid = this.data.bedroom_type_data[indes]['id'];
                this.setData({
                        bedroom_type_id:dataid
                })
                // console.log(this.data.bedroom_type_id);
        
              },

接口部分：

模型层中：

public static function attr()
    {
        $type_id=self::where('name','房源类型')->value('id');
        $type_data=self::where('pid',$type_id)->select();
        $house_type_id=self::where('name','户型')->value('id');
        $house_type_data=self::where('pid',$house_type_id)->select();
        $bedroom_id=self::where('name','卧室类型')->value('id');
        $bedroom_type_data=self::where('pid',$bedroom_id)->select();
        return $data=[
            'type_data'=>$type_data,
            'house_type_data'=>$house_type_data,
            'bedroom_type_data'=>$bedroom_type_data
        ];
    }

然后是控制器调用：

public function attr()
    {
        $data=HouseAttr::attr();
        return json(['error_code'=>0,'data'=>$data,'msg'=>'ok']);
    }

第四是按钮获取手机号然后发送短信验证

需要input输入监听事件

//将手机号存入data
getphone(e){
                this.setData({
                        phone:e.detail.value
                })
                console.log(this.data.phone);
        },
//发送手机号获取code验证
        getcode(e){
                let phone=this.data.phone;
                if(phone==''){
                        console.log('手机号不能空');
                        return;
                }
                wx.request({
                  url: 'http://www.backstage.com/api/getphone',
                  data:{phone:phone},
                  header:{'token':wx.getStorageSync('token')},
                  success:res=>{
                          console.log(res.data);
                          wx.setStorageSync('phone_code', res.data.phone_code)
                  }
                })
        },

最后是最重要的提交部分

图片在后台data中获取

位置在后台data中获取

下拉列表从后台data中获取

面积从表单中获取

租金从表单中获取

手机号哪里都可以获取

验证码从表单中获取

打包发送后台

submitForm(e){
                const {detail} = e;
                console.log(e.detail.values.code);
                if(e.detail.values.code!=wx.getStorageSync('phone_code')){
                        console.log('验证码错误');
                        return
                }
                wx.request({
                  url: 'http://www.backstage.com/api/store',
                  data:{
                          type_id:this.data.type_id,
                          house_type_id:this.data.house_type_id,
                          bedroom_type_id:this.data.bedroom_type_id,
                          acreage:e.detail.values.acreage,
                          price:e.detail.values.price,
                          phone:e.detail.values.phone,
                          pic:this.data.urls,
                          address:this.data.address,
                          latitude:this.data.latitude,
                          longitude:this.data.longitude
                  },
                  header:{'token':wx.getStorageSync('token')},
                  success:res=>{
                          console.log(res);
                          if(res.data.error_code==0){
                                  wx.switchTab({
                                    url: '/pages/index/index',
                                  })
                          }
                  }
                })
                
        },

不要学我前台验证code 非常不安全我只是讲解流程正常要在后台验证

所以正常在加一个字段code 也传到后台

后台代码：

验证字段验证code 自己写

验完了弹出去剩下的入库

public function store(Request $request)
    {
        $data=$request->param();
        $result=Rent::create($request->param());
        return json(['error_code'=>0,'data'=>'','msg'=>'ok']);
    }

完成觉得哪里接受不了的下面留言

that_were_you

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
tp6与微信小程序复杂表单提交

首先写一个前台的页面我这里用了ui所以标签名不一样效果如下<l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submitForm"> <l-image-picker count="9" bind:linchange="onChangeTap" /> <l-form-item label="位置:" name="address"> ..
复制链接

扫一扫