微信小程序发布拼车详细信息内容填写模板样式制作设计教程

本文给大家带来的是微信小程序发布拼车详细信息内容填写模板样式制作设计教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="page">
    <view class="page__bd">
        <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{errorMsg}}</view>

        <form bindsubmit="formSubmit">
            <view class="weui-cells__title">确认联系人信息</view>
            <view class="weui-cells weui-cells_after-title">
                <view class="weui-cell weui-cell_input">
                    <view class="weui-cell__hd">
                        <view class="weui-label">姓名</view>
                    </view>
                    <view class="weui-cell__bd">
                        <input class="weui-input" type="text" name="name" value="{{name}}" placeholder="请输入姓名"/>
                    </view>
                </view>
                <view class="weui-cell weui-cell_input weui-cell_vcode">
                    <view class="weui-cell__hd">
                        <view class="weui-label">性别</view>
                    </view>
                    <view class="weui-cell__bd">
                        <radio-group bindchange="radioChange">
                            <picker mode="selector" value="{{gender}}" name="gender" range="{{sex}}" bindchange="setSex">
                                <view class="weui-input">{{sex[gender]}}</view>
                            </picker>
                        </radio-group>
                    </view>
                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                </view>
                <view class="weui-cell weui-cell_input">
                    <view class="weui-cell__hd">
                        <view class="weui-label">手机号</view>
                    </view>
                    <view class="weui-cell__bd">
                        <input class="weui-input" name="phone" maxlength="11" value="{{phone}}" type="number" placeholder="请输入手机号"/>
                    </view>
                </view>
            </view>
        
            <view class="weui-cells__title">填写拼车信息</view>
            <view class="weui-cells weui-cells_after-title">
                <view class="weui-cell weui-cell_input">
                    <view class="weui-cell__hd">
                        <view class="weui-label">拼车类型</view>
                    </view>
                    <view class="weui-cell__bd">
                        <radio-group class="radio-group weui-cell weui-check__label" name="type" bindchange="selectType">
                            <label class="radio" wx:for="{{types}}" wx:key="value">
                                <radio value="{{item.name}}" checked="{{item.checked}}"/><text>{{item.value}}</text>
                            </label>
                        </radio-group>
                    </view>
                </view>
                <view class="weui-cell weui-cell_input StartAndStop">
                    <view class="weui-cell__hd">
                        <view class="weui-label">出发地</view>
                    </view>
                    <view class="weui-cell__bd">
                        <view class="weui-input" bindtap="sexDeparture">{{departure}}</view>                 
                    </view>
                </view>
                <view class="weui-cell weui-cell_input StartAndStop">
                    <view class="weui-cell__hd">
                        <view class="weui-label">目的地</view>
                    </view>
                    <view class="weui-cell__bd">
                        <view class="weui-input stop" bindtap="sexDestination">{{destination}}</view>
                    </view>
                </view>
                <!-- <image src="/img/to.png" class="to1"></image> -->
                        
                <view class="weui-cell weui-cell_input">
                    <view class="weui-cell__hd">
                        <view class="weui-label">出发日期</view>
                    </view>
                    <view class="weui-cell__bd">
                        <picker mode="date" name="date" value="{{date}}" start="{{start}}" end="{{end}}" bindchange="bindDateChange">
                            <view class="weui-input">{{date}}</view>
                        </picker>
                    </view>
                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                </view>
                <view class="weui-cell weui-cell_input">
                    <view class="weui-cell__hd">
                        <view class="weui-label">出发时间</view>
                    </view>
                    <view class="weui-cell__bd">
                        <picker mode="time" name="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange">
                            <view class="weui-input">{{time}}</view>
                        </picker>
                    </view>
                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                </view>
                <view class="weui-cell weui-cell_input" wx:if="{{type == 1}}">
                    <view class="weui-cell__hd">
                        <view class="weui-label">拼车价格</view>
                    </view>
                    <view class="weui-cell__bd">
                        <input class="weui-input" name="price" value="{{price}}" placeholder="请填写价格,不填则为面议"/>
                    </view>
                </view>
                <view class="weui-cell weui-cell_input" wx:if="{{type == 1}}">
                    <view class="weui-cell__hd">
                        <view class="weui-label">车型</view>
                    </view>
                    <view class="weui-cell__bd">
                        <input class="weui-input" type="text" name="vehicle" value="{{vehicle}}" placeholder="请填写车型"/>
                    </view>
                </view>
                <view class="weui-cell weui-cell_input"  wx:if="{{type == 1}}">
                    <view class="weui-cell__hd">
                        <view class="weui-label">剩余空位</view>
                    </view>
                    <view class="weui-cell__bd">
                        <picker mode="selector" name="surplus" value="{{surplus}}" range="{{Surpluss}}" bindchange="setsurplus">
                            <view class="weui-input">{{Surpluss[surplus]}}</view>
                        </picker>
                    </view>
                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                </view>
                <view class="weui-cell weui-cell_input"  wx:if="{{type == 2}}">
                    <view class="weui-cell__hd">
                        <view class="weui-label">乘车人数</view>
                    </view>
                    <view class="weui-cell__bd">
                        <picker mode="selector"  name="surplus" value="{{surplus}}" range="{{Surpluss}}" bindchange="setsurplus">
                            <view class="weui-input">{{Surpluss[surplus]}}</view>
                        </picker>
                    </view>
                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                </view>
            </view>
            <view class="weui-cells__title">其他信息</view>
            <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <textarea class="weui-textarea" name="remark" placeholder="更多情况,请输入说明" style="height: 3.3em" />
                </view>
            </view>
        </view>

        <checkbox-group bindchange="bindAgreeChange" name="isAgree">
            <label class="weui-agree" for="weuiAgree">
                <view class="weui-agree__text">
                    <checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
                    <view class="weui-agree__checkbox-icon">
                        <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
                    </view>
                    阅读并同意<navigator url="/pages/notice/index?id=1" class="weui-agree__link">《免责声明》</navigator>
                </view>
            </label>
        </checkbox-group>

        <view class="weui-btn-area">
            <button class="weui-btn" type="primary" formType="submit">确定</button>
        </view>

        </form>
    </view>
</view>

二、wxss样式文件代码如下：

/* pages/info/add.wxss */
.page__bd{background: #efefef;}
.weui-cells__title{padding-top:.3rem;margin-top:0;}
.radio-group{padding: 10px 0px !important;}
/* .StartAndStop input{width:70px;float:left}
.to1{width: 30px;height:30px;position:absolute;top:6px;}
.stop{margin-left:40px;}*/
.weui-label{color:black}
.radio text{margin:0rpx 8rpx;}
.radio{margin-right: 12rpx;}
.weui-btn{background: #f4de3b!important;color:#000!important;}
.weui-input{overflow:hidden;}

三、js页面代码如下：

// pages/info/add.js
var util = require('../../utils/util.js');  
var app = getApp();
var today = util.formatTime(new Date((new Date()).getTime() + (1000 * 60 * 60 * 24 * 1))).split(' ')[0];
var minday = util.formatTime(new Date()).split(' ')[0];
var maxday =  util.formatTime(new Date((new Date()).getTime()+(1000*60*60*24*62))).split(' ')[0];
Page({
  data:{
    sex: ['请选择性别','男','女'],
    type:1,
    gender:0,
    date:today,
    start: minday,
    end:maxday,
    time:'请选择时间',
    types:[{name: '1', value: '车找人',checked: true},{name: '2', value: '人找车'}],
    Surpluss:['请选择',1,2,3,4,5,6],
    surplus:0,
    isAgree: false,
    vehicle:'',
    departure:'出发地',
    destination:'目的地'
  },
  setSex:function(e){
    this.setData({gender:e.detail.value})
  },
  bindDateChange:function(e){
    this.setData({
        date: e.detail.value
    })
  },
  bindTimeChange: function (e) {
      this.setData({
          time: e.detail.value
      })
  },
  selectType:function(e){
    this.setData({type:e.detail.value})
  },
  setsurplus:function(e){
    this.setData({surplus:e.detail.value})
  },
  bindAgreeChange: function (e) {
      this.setData({
          isAgree: !!e.detail.value.length
      });
  },
  formSubmit:function(e){
    var data = e.detail.value;
    var that = this;
    console.log(data);

    if(data.name == ''){
      util.isError('请输入姓名', that);
      return false;
    }
    if(data.gender == 0){
      util.isError('请选择性别', that);
      return false;
    }

    if(data.phone == ''){
      util.isError('请输入手机号码', that);
      return false;
    }

    if(!(/^1[34578]d{9}$/.test(data.phone))){
      util.isError('手机号码错误', that);
      return false;
    }
    if(that.data.departure == '出发地'){
      util.isError('请选择出发地', that);
      return false;
    }
    if(that.data.destination == '目的地'){
      util.isError('请选择目的地', that);
      return false;
    }
    if(data.time == '请选择时间'){
      util.isError('请选择出发时间', that);
      return false;
    }
    if(data.surplus == '0'){
      var arr = new Array('','剩余空位','乘车人数');
      util.isError('请选择'+arr[data.type], that);
      return false;
    }

    
    if(!data.isAgree[0]){
      util.isError('请阅读并同意条款',that);
      return false;
    }
    data.sk = app.globalData.sk;
    data.departure = that.data.departure;
    data.destination = that.data.destination;
    util.req('info/add',data,function(data){
      if(data.status == 1){
        wx.redirectTo({
          url: '/pages/info/index?id='+data.info
        });
      }else{
        util.isError(data.msg,that);
        return false;
      }
    })
    util.clearError(that);
  },
  sexDeparture:function(){
    var that = this;
    wx.chooseLocation({
      success:function(res){
        that.setData({
          departure:res.address
        })
      }
    })
  },
  sexDestination:function(){
    var that = this;
    wx.chooseLocation({
      success:function(res){
        that.setData({
          destination:res.address
        })
      }
    })
  },
  onLoad:function(options){
    this.setData({
      gender:app.globalData.userInfo.gender,
      name:(app.globalData.userInfo.name == '')?app.globalData.userInfo.nickName:app.globalData.userInfo.name,
      phone:app.globalData.userInfo.phone,
      vehicle:app.globalData.userInfo.vehicle
    })
  }
})

模板简介：该模板名称为【微信小程序发布拼车详细信息内容填写模板样式制作设计教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。