微信小程序> 微信小程序之表单提交

微信小程序之表单提交

浏览量:1592 时间: 来源:weixin_34138377

页面绑定很多事件!

<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.jsconst 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'      }    }})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎