欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

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

    2018-06-22 09:45 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序发布拼车详细信息内容填写模板样式制作设计教程,制作好以后效果图如下:
    一、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>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议