微信小程序之表单提交

页面绑定很多事件!

<view class="content">
     <view class="user personal_func_list">
        <view class="flex align-c personal_func_item">
            <view class="name">
                <text>品牌</text>
            </view>
            <view class="input flex_1">
                <picker bindchange="brandPickerChange" value="{{brand_index}}" range-key="name" range="{{brand_array}}">
                    <view class="picker">
                        {{brand_array[brand_index].name}}
                    </view>
                </picker>
            </view>
            
        </view>
        <view class="flex align-c personal_func_item">
            <view class="name">
                <text>型号</text>
            </view>
            <view class="input flex_1">
                <picker bindchange="modelPickerChange" value="{{model_index}}" range-key="name" range="{{model_array}}">
                    <view class="picker">
                        {{model_array[model_index].name}}
                    </view>
                </picker>
            </view>
            
        </view>

         <view class="flex align-c personal_func_item">
            <view class="name">
                <text>姓名</text>
            </view>
            <view class="input flex_1">
                <input placeholder="请输入真实姓名" bindinput="keyName" />
            </view>
        </view>
        <view class="flex align-c personal_func_item">
            <view class="name">
                <text>电话</text>
            </view>
            <view class="input flex_1">
                <input placeholder="请输入手机号码" bindinput="keyPhone" />
            </view>
        </view>

        <view class="flex align-c personal_func_item">
            <view class="name">
                <text>地址</text>
            </view>
            <view class="input flex_1">
                <input placeholder="请输入地址" bindinput="keyAddress" />
            </view>
        </view>

        <view class="flex align-c personal_func_item">
            <view class="name">
                <text>故障原因</text>
            </view>
            <view class="input flex_1">
                <input placeholder="请输入故障原因" bindinput="keyReason" />
            </view>
        </view>
        
     </view>
     <button class="sub_btn background_color_beauty" bindtap="applyAfterSale">提交</button>
</view>

JS处理很多数据获取与提交!

// pages/mine/index.js
const Api = require("../../config/method.js");
const Session = require('../../common/auth/session')
const tips = require('../../common/tips.js');
const app = getApp();
const session = Session.get();
Page({
    data: {
        brand_array: [],
        brand_index: 0,
        model_array:[],
        model_index: 0,
        brand_id : 0,
        model_id : 0,
        realname:'',
        tel:'',
        address:'',
        reason:''
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
       this.init();
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
        this.init();
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    init: function () {
        let self = this;
        let session = Session.get();
        if (session && session.uid) {
            // 获取品牌数据
            Api.GetBrandList({}).then(res=>{
                self.setData({
                    brand_array:res.data,
                    brand_id : res.data[0]['brand_id']
                })

                // 获取型号数据
                Api.GetModelList({'brand_id':self.data.brand_id}).then(res=>{
                    self.setData({
                        model_array : res.data,
                        model_id: res.data[0]['model_id']
                    })
                })
            })

        } else {
            tips.showAction('系统提示','您还没有登录, 请先登录？',()=>{
                let url = '/pages/mine/index'
                wx.switchTab({ url })
            });
        }
    },
    brandPickerChange: function(e) {
        let self = this;
        let brand_index = e.detail.value;
        let brand_id    = self.data.brand_array[brand_index]['brand_id'];
        this.setData({
          brand_index: brand_index,
          brand_id:brand_id
        })
        // 获取型号数据
        Api.GetModelList({'brand_id':brand_id}).then(res=>{
            self.setData({
                model_array : res.data,
                model_id: res.data[0]['model_id'],
                model_index : 0
            })
        })
    },
    modelPickerChange: function(e) {
        let self = this;
        let model_index = e.detail.value;
        let model_id = self.data.model_array[model_index]['model_id'];
        this.setData({
          model_index: model_index,
          model_id:model_id
        })
    },
    keyName :function(e) {
        let { value } = e.detail;
        this.setData({
            realname:value
        })
    },
    keyPhone :function(e) {
        let { value } = e.detail;
        this.setData({
            tel:value
        })
    },
    keyAddress :function(e) {
        let { value } = e.detail;
        this.setData({
            address:value
        })
    },
    keyReason :function(e) {
        let { value } = e.detail;
        this.setData({
            reason:value
        })
    },
    applyAfterSale : function() {
        // 判断参数是否传递
        var self = this;
        const session = Session.get();
        let uid = session.uid;
        let {brand_id,model_id,realname,tel,address,reason} = this.data;
        if(!brand_id||!model_id||!realname||!tel||!address||!reason){
            tips.showModel('系统提示','请完善信息');
            return;
        }
        Api.ApplyAfterSale({ uid, realname,tel,brand_id,model_id,address,reason }).then(res=>{
            console.log(JSON.stringify(res));
            if (res.errno == 0) {
                tips.showSuccess('申请成功！');
                setTimeout(function () {
                    wx.switchTab({
                        url: '/pages/mine/index'
                    })
                }, 1000)
                
            } else {
                tips.showModel('系统提示',res.errdesc);
            }
        })
    },
    onShareAppMessage: function () {
      // 设置了，页面才可以分享
      return {
        title: '屹族',
        desc: '屹族小程序商铺',
        path: '/pages/index/index'
      }
    }
})