小程序11

 

 

<view class="page">

  <view>
    <text>欢迎光临神州大酒店</text>
  </view>

  <form bindsubmit="formSubmit" bindreset="formReset" report-submit="true">

  <view class="set1">
    <view>
      <text>房间数</text>
    </view>

    <view class="input">
      <input placeholder="1" name="orderno"></input>
    </view>
  </view>

  <view class="set2">
    <view class="section_title">住宿</view>
    <picker name="orderdate" mode="date" value="{{date}}" start="2022-01-01" end="2022-12-12">
      <view class="picker">
        日期{{date}}
      </view>
    </picker>
  </view>

  <view class="set3">
    <view class="people">
      <text>姓名</text>
    </view>
    <view class="name">
      <input type="text" name="ordername" class="input" placeholder="先生" />
    </view>
  </view>

  <view class="set4">
    <view class="tel">
      <text>电话</text>
    </view>
    <view class="inputtel">
      <input type="text" class="ordertel" placeholder="13445453454" maxlength="11" style="width: 300rpx;" />
    </view>
  </view>
    <view class="btn-area">
      <button form-type="submit" type="primary">提交</button>
      <button form-type="reset">重置</button>
    </view>
  </form>









</view>

.page{
  margin: 0rpx 50rpx 50rpx 50rpx;
  font-size: 50rpx;
  background-color: lavender;
}

.set1{
  margin: 0rpx 0rpx 50rpx 0rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input{
  width: 60%;
}
.set2{
  margin: 0rpx 0rpx 50rpx 0rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.set3{
  margin: 0rpx 0rpx 50rpx 0rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.people{
  flex: 2;
}

.name{
  flex:3;
}

.set4{
  margin: 0rpx 0rpx 50rpx 0rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tel{
  flex: 1;
}

.inputtel{
  flex: 4;
}

.btn-area{
  width: 100%;
}

var app = getApp()
Page({

  data:{
    userInfo:null
  },

  //设置页面加载函数,获得全局变量userInfo
  onLoad:function () {
    // console.log("Hello Wechat test一下啦")
    // console.log(app)
    this.setData({
      userInfo:app.globalData.userInfo
    })
  },

  //设置表单提交函数
  formSubmit : function(e){
    var that = this
    var orderno = e.detail.orderno
    var orderdate = e.detail.value.orderdate
    var ordername = e.detail.value.ordername
    var ordertel = e.detail.ordertel
    var formid = e.detail.formid

    //表单校验
    if(orderno == '' || orderdate == '' || ordername == '' || ordertel == ''){
      wx.showModal({
        title:'提示',
        content:'不能为空'
      })
    }else{
      wx.showToast({
        title: '成功',
        icon:'success',
        duration:2000
      }),
      wx.request({
        url: 'http://',//服务器信息
        data:{
          code:app.globalData.code,
          FORMID:formid,
          date:orderdate,
          no:orderno,
          name:ordername,
          tel:ordertel
        },
        header:{
          'content-type':'application/x-www-form-urlencoded'
        },
        success:function(res){
          console.log(res)
        }
      })
    }
  },

  //表单重置函数
  formReset:function(){
    this.setData({
      data:''
    })
  },

  //日期选择函数
  bindDateChange(){
    this.setData({
      data:e.detail.value
    })
  }



})

数值转字符串：number.toString()/String(number)
字符串转数值：同上，反过来就行了
字符串转对象：JSON.parse() 注意小程序不支持eval()

App()是一个小程序的入口方法，写在app.js文件里。
开发时我们主要是把一些全局变量，全局方法放在App()里面，比如用户名，请求数据时的URL等
// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
 
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    //全局变量
    userInfo: null,
    globalReqUrl: "http://localhost:8080"         //请求数据时的URL
  }
})
那么我们该如何调用这些全局变量呢？请看下一小标题（二、getApp()）解释。
二、getApp()
getApp()方法用于获取App()的实例：
//在其他页面的js文件里
const app = getApp();
this.data.username =  app.globalData.userInfo;
this.data.url=  app.globalData.globalReqUrl;

var item = this.data.list[index];
var app = getApp();
app.item =item;     //注意原来的App()当中并没有item这个数据。
//然后在其它页面的js文件里用上面的方法获取item即可。

showModal(模态框)
showToast消息提示接口

数值转字符串：number.toString()/String(number)

字符串转数值：同上，反过来就行了

字符串转对象：JSON.parse() 注意小程序不支持eval()

App()是一个小程序的入口方法，写在app.js文件里。

开发时我们主要是把一些全局变量，全局方法放在App()里面，比如用户名，请求数据时的URL等

// app.js

App({

  onLaunch() {

    // 展示本地存储能力

    const logs = wx.getStorageSync('logs') || []

    logs.unshift(Date.now())

    wx.setStorageSync('logs', logs)

    // 登录

    wx.login({

      success: res => {

        // 发送 res.code 到后台换取 openId, sessionKey, unionId

      }

    })

  },

  globalData: {

    //全局变量

    userInfo: null,

    globalReqUrl: "http://localhost:8080"         //请求数据时的URL

  }

})

那么我们该如何调用这些全局变量呢？请看下一小标题（二、getApp()）解释。

二、getApp()

getApp()方法用于获取App()的实例：

//在其他页面的js文件里

const app = getApp();

this.data.username =  app.globalData.userInfo;

this.data.url=  app.globalData.globalReqUrl;

var item = this.data.list[index];

var app = getApp();

app.item =item;     //注意原来的App()当中并没有item这个数据。

//然后在其它页面的js文件里用上面的方法获取item即可。

showModal(模态框)

showToast消息提示接口