wechat小程序如果编写提交表单

1、需求简述
a)需求：申请成为一个分销员，提交表单，后台审核通过就返回成功状态
b)字段：用户名 name 手机号码 mobilePhone 是否阅读用户协议 checked
c)页面

2、实际操作

a) wxml部分

<view class="banner">
	<image src="../../images/live/1594292067721.png"></image>
</view>
<view class="shopper-ul">
	<view>欢迎加入 <text class="shop-red">XXXX 商家</text>，请填写申请信息</view>
	<view class="shopper-li" wx:if="{{from.inviterToken}}">
		<text class="shopper-li-text">邀请人</text>
		<text>XXX(请核对)</text>
	</view>
	<view class="shopper-li">
		<text class="shopper-li-text">姓名</text>
		<input type="text" placeholder-class="placeholder-text" data-type="name" bindinput="getInputValue" placeholder="请填写真实姓名"></input>
	</view>
	<view class="shopper-li">
		<text class="shopper-li-text">手机号码</text>
		<input type="text" placeholder-class="placeholder-text" data-type="mobilePhone" bindinput="getInputValue" placeholder="请填写手机号码"></input>
	</view>
	<view class="shopper-li">
		<checkbox-group class="agreement-check" bindchange="checkboxChange">
			<label>
				<checkbox value="{{checked}}"></checkbox> 我已阅读并同意 <text class="color-bule">《分销申请协议》</text>
			</label>
		</checkbox-group>
	</view>
</view>
<button class="button" bindtap="saveShare"> 申请成为分销员</button>

b) css部分

.banner image{width:100%;height:300rpx;}
.shopper-ul{background:#fff; padding:20rpx;}
.shopper-li{display:flex; margin:20rpx 0; padding:10rpx 0;}
.shop-red{color:#e93323;}
.shopper-li-text{width:150rpx; text-align:left;}
.placeholder-text{color:#999;}
.color-bule{color: dodgerblue;}
.button{ background:#e93323;color:#fff;  width:calc(100% - 60rpx); border-radius:50rpx; padding:10px; margin:20px auto;}

c) js部分

import { applyShareUser} from '../../api/share.js';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    form:{
      inviterToken:null,
      mobilePhone:null,
      name:null
    },
    checked:0
  },
  /*把输入框的获取值写成了一个方法，优化了代码，之前会有如下操作*/
  getInputValue(e){
    let type = e.currentTarget.dataset.type
    let value = e.detail.value
    this.data.form[type] = value
    this.setData({
      form: this.data.form
    })
  },
  checkboxChange(e){
    if (e.detail.value[0]) {
      this.setData({
        checked: true
      })
    } else {
      this.setData({
        checked: false
      })
    }
  },
  saveShare(){
    var regPhone = /^1[0-9]{10}$/;
    if(!this.data.checked){
      wx.showToast({
        title: '请阅读分销协议',
        icon:"none"
      })
    }else if(!this.data.form.name){
      wx.showToast({
        title: '未输入姓名',
        icon:"none"
      })

    }else if(!this.data.form.mobilePhone){
      wx.showToast({
        title: '手机号码不能为空',
        icon:"none"
      })
    }else if(!regPhone.test(this.data.form.mobilePhone) ){
      wx.showToast({
        title: '手机格式不正确',
        icon:"none"
      })
    }else{
      applyShareUser().then(res => {
       wx.showToast({
         title: '恭喜你申请成功！',
         icon:"success",
         success(){
           wx.navigateTo({
             url: '/userPages/user/user'
           })
         }
       })
      });
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(options.inviterToken){
      this.data.form.inviterToken = options.inviterToken
      this.setData({
        form: this.data.form,
        userName:options.userName
      })
    }
  }
  })

d) api部分

import request from "./../utils/request.js";

const app = getApp()

/**
 * 查询分销员
 */
export function getShareUser(obj){
  return request.get('/user/shareuser/get_share_user',obj);
}
/**
 * 申请分销员
 */
export function applyShareUser(obj){
  return request.get('/user/shareuser/apply',obj);
}

在输入框的优化提升部分为：

getInputValue(e){
    let type = e.currentTarget.dataset.type
    let value = e.detail.value
    this.data.form[type] = value
    this.setData({
      form: this.data.form
    })
  }

比如之前同样的输入框，我们会写多个分别获取相应的值
实例

下面的代码 店主名称、手机号码、门店名称等，可以优化为一个方法

/**选择门店类型 */
  selectShopTypes(e) {
    //console.log(e.currentTarget.dataset.id);
    if(!this.data.updateBuyerBoolen){
      var value = e.currentTarget.dataset.value
      this.setData({
        currentTab: e.currentTarget.dataset.index,
        vipLevel: value
      })
    }else{
      return
    }

  },
  getContactName(e) {
    //console.log('携带值为', e)
    this.setData({
      contactName: e.detail.detail.value
    })
  },
  getPhone(e) {
    //console.log('携带值为', e)
    this.setData({
      contactTel: e.detail.detail.value
    })
  },
  /** 防止重复门店名称 */
  getBuyerName(e) {
    this.setData({
      buyerName: e.detail.detail.value
    })
    
  },
  getDetialsAddress(e) {
    //console.log(e);
    var that = this
    this.setData({
      address: e.detail.detail.value
    })
  },
  getName(e) {
    //console.log('携带值为', e)
    this.setData({
      contactName: e.detail.detail.value
    })
  },
  bindBuyerTypeChange(e) {
    //console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      buyerType: e.detail.value
    })
  },
  bindCooperationStatusChange(e) {
    //console.log('picker发送选择改变，携带值为', e.detail.value)
    
    cooperationStatus = e.detail.value
  },
  /**
   * 选择省市区
   */
  bindRegionChange(e) {
    regionName = e.detail.value[2];
    cityName = e.detail.value[1];
    provinceName = e.detail.value[0];
    regio= e.detail.value
    //console.log(this.data.region);
  },
  /**
   * 添加门店照片
   */
  uploadImgSuccess(e) {
    headImg = this.data.headImg
    headImg.push(e.detail.data)
    this.setData({
      headImg: headImg
    })
  },```