首页 > 小程序教程 > 微信小程序预约信息详情页面设计教程下载

微信小程序预约信息详情页面设计教程下载

上一篇 下一篇
本文给大家带来的是微信小程序预约信息详情页面设计教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="page">
    <view class="page__bd">
        <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{errorMsg}}</view>

        <form bindsubmit="formSubmit" report-submit="true">
            <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="{{data.name}}" disabled="true" placeholder="请输入姓名"/>
                    </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="{{data.phone}}" disabled="true" 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 StartAndStop">
                    <view class="weui-cell__hd">
                        <view class="weui-label">出发地</view>
                    </view>
                    <view class="weui-cell__bd">
                        <view class="weui-input" bindtap="sexDeparture">{{data.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">{{data.destination}}</view>
                    </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="{{data.time}}" type="number" disabled="true"/>
                    </view>
                </view>               
        </view>

        <view class="weui-btn-area" wx:if="{{data.status == 0}}">
            <button class="weui-btn submit" type="primary" bindtap="yes" formType="submit">同意拼车</button>
            <button class="weui-btn " type="normal" bindtap="no" formType="submit">拒绝拼车</button>
        </view>

        </form>
    </view>
</view>
 
二、wxss样式文件代码如下:
/* pages/info/add.wxss */
.page{background: #efefef;height: 560px;}
.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;}
.submit{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 type = 1;
var id = 0;
Page({
  data: {
  },
  onLoad: function (options) {
    var that = this;
    id = options.id;
    util.req('appointment/detail', { id: options.id, sk: app.globalData.sk }, function (data) {
      console.log(data);
      data.data.time = util.formatTime(new Date(data.data.time * 1000));
      that.setData({ data: data.data });
    })
  },
  formSubmit: function (e) {
    var that = this;
    wx.showLoading({
      title: '',
      mask: true
    })
    setTimeout(function(){
      util.req('appointment/submit', { id: id, sk: app.globalData.sk, type: type, form_id: e.detail.formId}, function (data) {
        wx.hideLoading();
        if(data.status == 1){
          if(type == 1){
            wx.showToast({
              title: '拼车成功,请留意与乘客联系',
              icon: 'success',
              duration: 2000
            })
          }else{
            wx.showToast({
              title: '拒绝成功',
              icon: 'success',
              duration: 2000
            })
          }
          that.setData({'data.status':type});
        } else {
          util.isError(data.msg, that);
        }
      })
    },1000)
    
  },
  no: function () {
    type = 2;
  }
})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 24,590次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-25
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
单页式简历模板 企业网站 微信素材 微信公众平台 html5 自适应 微信模板 响应式 微信图片 微信文章
您可能会喜欢的其他模板