页面绑定很多事件!
<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' } }})













