微信小程序lin-ui表单订单

前台：

<view class="page">  

   <!-- 时间段 -->  

    <view class="picker_group">  

      <picker mode="date" value="{{date}}"  end="{{date2}}" bindchange="bindDateChange">  

        <view class="picker">  

          {{date}}  

        </view>  

      </picker>  

      至  

      <picker mode="date" value="{{date2}}" start="{{date}}" end="2050-01-01" bindchange="bindDateChange2">  

        <view class="picker">  

          {{date2}}  

        </view>  

      </picker>        

    </view>  

  </view>

  <text>共{{day}}晚</text>

  <view>{{roomDetail.name}}</view>

  <view>{{roomDetail.price}}</view>

<view><button bindtap="add" size="mini">+</button>{{num}}<button bindtap="sub" size="mini">-</button></view>

<l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit">

    <l-form-item label="入住人:" name="studentName">

        <l-input id="studentName" value="{{student.name}}" hide-label show-row="{{false}}"/>

    </l-form-item>

    <l-form-item label="手机:" name="studentAge">

        <l-input id="studentAge" value="{{student.age}}" hide-label show-row="{{false}}"/>

       

    </l-form-item>

    <view>待支付金额：<text class="money">￥{{roomDetail.price*num}}</text></view>

    <view>已减：￥{{roomDetail.sum}}元</view>

    <view slot="submit">

        <l-button>提交</l-button>

    </view>

</l-form>

<modal id="modal" hidden="{{isShow}}" title="密码" confirm-text="提交" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm">

 <input type='text' placeholder="请输入密码" bindinput="getPwd"/>

 </modal>

 <view hidden="{{tiemShow}}"><l-countdown time-type="second" time="1800" format="{%m}:{%s}" status='{{status}}'/></view>

wxss:

.l-form-btn-class{

  display: flex;

  justify-content: space-around;

  margin-top: 10rpx;

}

/* 日期选择 */

.picker_group {

  height: 85rpx;

  line-height: 85rpx;

  justify-content: center;

  display: flex;

  align-items: center;

  font-size: 30rpx;

  color: #888;

  border-bottom: 1rpx solid #efefef;

}

.picker_group picker {

  /* background-color: yellow; */

  color: #64bff1;

  height: 55rpx;

  line-height: 55rpx;

  margin: 0 2%;

  padding: 0 2%;

  border: 1rpx solid #64bff1;

  border-radius: 30rpx;

}

.money{

  color: red;

  font-size: 50rpx;

}

.content .countdown-blue {

  width: 52rpx ;

  height: 52rpx;

  border: 2rpx solid #3683D6;

  border-radius: 50%;

  background:transparent;

  color: #3683D6;

}

.content .countdown-text {

  color: #3683D6;

}

js:

var app = getApp()

Page({

  /**

   * 页面的初始数据

   */

  data: {

    isShow: true,

    tiemShow:true,

    status:false,

    student: [{

      name: '',

      age: '',

    }],

    num:1,

    total:"",

    date: '2018-01-01',//默认起始时间  

    date2: '2018-01-24',//默认结束时间 

    day:"",

    pwd:''

  }, 

  getPwd(e){

    // console.log(e.detail.value)

    // 密码

    var pwd=e.detail.value;

    this.data.pwd=pwd;

  },

    //取消按钮

cancel: function () {

  this.setData({  

  isShow: true ,

  tiemShow:false,

    status:true,

  });  

  

  }, 

//提交

confirm: function () {

  var _this=this

  // console.log(this.data)

  let token=wx.getStorageSync('token')

    var num=this.data.num;

    var price=this.data.roomDetail.price

    var time=this.data.day

    var room_name=this.data.roomDetail.name

    var student=this.data.student[0];

    var pwd=this.data.pwd

    // console.log(time)

    var total=num*price*time

    // console.log(total)

    _this.setData({total})

    // 添加入住信息

    wx.request({

      url: 'http://www.day.com/index.php/messageAdd',

      method:"post",

      data:{

        student:student,

        room_name:room_name,

        num:num,

        total:total,

        pwd:pwd

      },

      header:{

        "token":token

      },

      success(res){ 

        console.log(res.data)      

        if(res.data.code==500){

          wx.showToast({

            title: '支付失败',

            icon:'error'

          })

        }

        if(res.data.code==200){                

        let id=res.data.data.id

        // console.log(id)

        wx.redirectTo({

          url: '/pages/order/order?id='+id,

        })

        }       

      }

    })

  this.setData({  

  isShow: true 

  }) 

  },

      // 时间段选择  

      bindDateChange(e) {

        let that = this;

        that.setData({

          date: e.detail.value,

        })

      },

      bindDateChange2(e) {

        let that = this;

        that.setData({

          date2: e.detail.value,

        })

        let start = this.data.date

        let end = this.data.date2

        let start_num = new Date(start.replace(/-/g,"/"))

        let end_num = new Date(end.replace(/-/g,"/"))

        let day = parseInt((end_num.getTime() - start_num.getTime()) / (1000*60*60*24))

        that.data.day=day

        that.setData({day:day})

      },

  add(){

   let num=this.data.num+1

    this.setData({num:num})

  },

  sub(){

    let num=this.data.num-1

    if(num>0){   

      this.setData({num:num})

    }  

  },

   submit(event){

     var _this=this

    const {detail} = event; 

    // console.log(detail)

    var tel=detail.values.studentAge

    var name=detail.values.studentName

   var student=[{

      name:name,

      age:tel

    }]

    _this.setData({student:student})

    if(tel==""|| name==""){

wx.showToast({

  title: '请输入用户信息',

  icon:"error"

})

}else{

_this.setData({isShow:false})

    }  

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    let _this=this

    wx.lin.initValidateForm(this)

    let token=wx.getStorageSync('token')

    // console.log(options.id)

    var id=options.id

    // 房间详情

    wx.request({

      url: 'http://www.day.com/index.php/roomDetail',

      method:"GET",

      data:{id:id},

      header:{

        "token":token

      },

      success(res){

        // console.log(res.data.data)

        let roomDetail=res.data.data

        // // 渲染数据

        _this.setData({roomDetail})

      }

    })

  },})

json:

{

  "usingComponents": {

    "l-form":"/miniprogram_npm/lin-ui/form",

    "l-form-item":"/miniprogram_npm/lin-ui/form-item",

    "l-input":"/miniprogram_npm/lin-ui/input",

    "l-button":"/miniprogram_npm/lin-ui/button",

    "l-countdown":"/miniprogram_npm/lin-ui/countdown"

  }

}

后台：

//添加入住人信息
    public function messageAdd(Request $request)
    {
        $postData = $request->param();
        $id=$request->user_id;
//        查询密码
        $pwd=\app\model\Index::selectPwd($id)->toArray();
        if($postData['pwd']!=$pwd['pwd']){
            return json(['code'=>500,'msg'=>'支付失败']);
        }
        $name=$postData['student']['name'];
        $tel=$postData['student']['age'];
        $room_name=$postData['room_name'];
        $num=$postData['num'];
        $total=$postData['total'];
        (new \app\model\Index)->changePrice($id,$total);
        $res=[
            'name'=>$name,
            'tel'=>$tel,
            'room_name'=>$room_name,
            'num'=>$num,
            'total'=>$total
        ];
        $data = Message::messageAdd($res);
        return json(['data' => $data,'code'=>200]);
    }

//    查询密码
public static function selectPwd($id)
{
    return self::where('id', $id)->find();
}
//    修改价格
public function changePrice($id,$total)
{
    $data=$this->where('id', $id)->find();
    if($data->blance>$total){
        $data->blance-=$total;
    }
    return $data->save();
}

protected $table = "day_message";
//   添加
    public static function messageAdd($res)
    {
        return self::create($res);
    }