微信小程序 个人页面添加处理

此代码示例展示了如何在微信小程序中创建一个表单,用于收集用户姓名、身份证号码、选择地址和上传身份证照片等信息。表单数据通过WxValidate进行验证,并使用wx.request向后台发送POST请求。用户输入信息不完整时,会显示错误提示。lin-ui组件库用于实现页面样式。后台接收到数据后,通过Artisan创建用户信息,返回添加结果。
摘要由CSDN通过智能技术生成

wxml页面

<l-steps active-index="{{show}}">
  <l-step title="主体认证" ></l-step>
  <l-step title="开始挣钱" ></l-step>
</l-steps>

<form bindsubmit="dopost">

<view>
<label>姓名</label>
<input name="name"  placeholder="请输入你的证件名称" />
</view>

<view>
<label>号码</label>
<input name="fication"  placeholder="请输入你的证件号码" />
</view>
请选择地址<l-button type="default" bindtap='map' bind:lininput="city" name="city">{{city}}</l-button>
<view class="section">
              <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" name="date">
                <view class="picker">
                  选择时间: {{date}}
                </view>
              </picker>
            </view>

<view>
<label>身份证照片要求</label>
<view style="height:100rpx;"></view>
<l-image-picker count="9" bind:linchange="onChangeTap" bind:linremove="removeImage"/>
</view>

<view style="height:100rpx;"></view>

<button type="primary" form-type="submit">提交信息</button>


</form>
// pages/city/city.js
import "../../utils/WxValidate"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // .js
    date: '2018-04-10',
    show: false,
    minDate: new Date(2020, 2, 2).getTime(),
    maxDate: new Date(2020, 10, 10).getTime(),
    urls:[],
    content:'',
    show:0,
    city:''
  },


  onLoad: function () {
    
  },

//地图
map() {
  wx.chooseLocation({
   success: result => {
        this.setData({
          city:result.address+result.name
        })
    },
    
  })
},
dopost(evt) {
  // 表单数据

  var data = evt.detail.value;
  console.log(data)
  if(data.name==0){
    wx.showToast({
      title: '证件不能为空',
      icon:'error',
      maxDate:'5'
    })
    return
  }
  if(data.fication==0){
    wx.showToast({
      title: '身份证号码不能为空',
      icon:'error',
    })
    return
  }
  if(data.date==0){
    wx.showToast({
      title: '有效时间不能为空',
      icon:'error',
    })
    return
  }

  wx.request({
    url: 'http://www.cms.com/admin/user',
    data:{
      data
    },
    method:'POST',
    success:res=>{
      console.log(res)
      var msg=res.data.msg

      if(msg=='添加成功'){
           this.setData({
             show:1
           })
      }else{
        this.setData({
          show:0
        })
      }
    }
  })
},
  
  city(city){
    console.log(city)
    this.setData({
      city:city.detail.value
  })
  },
  bindDateChange: function(e) {
    let data = this.data.date
    console.log(data)
    this.setData({
      index: data
    })
  },
  getContent(event) {
    let content = event.detail.value;
    this.setData({
      content
    })
  },
  //文件上传之后的方法
  onChangeTap(event) {
    //获取最新上传的所有图片临时路径
    let tempFilePaths = event.detail.current;
    //定义一个空数组,进行存放上传图片url
    var urlArr = [];
    for (let index = 0; index < tempFilePaths.length; index++) {
      wx.uploadFile({
        url: 'http://www.fronts.com/api/upload', //仅为示例,非真实的接口地址
        filePath: tempFilePaths[index],
        name: 'file',
        header:{
          'thonk':wx.getStorageSync('thonk')
        }, 
        success: res => {
          const data = JSON.parse(res.data);
          //do something
          urlArr.push(data.url)
          this.setData({
            urls: urlArr
          })
        }
      })
 
    }
  },
})




引入lin-ui样式

{
  "usingComponents": {
    "l-steps":"/miniprogram_npm/lin-ui/steps",
    "l-step":"/miniprogram_npm/lin-ui/step",
    "l-input":"/miniprogram_npm/lin-ui/input",
    "l-image-picker":"/miniprogram_npm/lin-ui/image-picker",
    "l-form":"/miniprogram_npm/lin-ui/form-item",
    "l-form-item":"/miniprogram_npm/lin-ui/form-item",
    "l-calendar":"/miniprogram_npm/lin-ui/calendar",
    "l-button":"/miniprogram_npm/lin-ui/button"
  }
}

后台添加

public function user(){
       $data=input('post.data');
       $info=Artisan::create($data);
       if($info){
           return json(['code'=>200,'msg'=>'添加成功','data'=>$info]);
       }
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值