微信小程序预约取车车牌号查询页面样式设计制作开发教程

本文给大家带来的是微信小程序预约取车车牌号查询页面样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--查询到停车记录-->
<block wx:if="{{hasUnpaidOrders}}">
  <view class="menu-annotation">查询到您的{{orders.length}}条停车记录：</view>
  <block wx:for="{{orders}}">
    <view class="info-list-container" style="">
      <view class="info-list-item">
        <image class="info-list-icon" src="/images/icon/crib.png"></image>
        <view class="info-list-content">
          <view class="info-list-key">车牌号</view>
          <view class="info-list-value">{{item.PlateNumber}}</view>
        </view>
      </view>
      <view class="info-list-item">
        <image class="info-list-icon" src="/images/icon/location.png"></image>
        <view class="info-list-content">
<view class="info-list-key">车辆位置</view>
        <view class="info-list-value">{{item.ParkingPosition}}</view>
        </view>
        
      </view>
      <view class="info-list-item">
        <image class="info-list-icon" src="/images/icon/steering_wheel.png"></image>
        <view class="info-list-content">
        <view class="info-list-key">入库时间</view>
        <view class="info-list-value">{{item.GenerateDate}}</view>
        </view>
        
      </view>
      <view class="info-list-item">
        <image class="info-list-icon" src="/images/icon/alarm_clock.png"></image>
        <view class="info-list-content">
        <view class="info-list-key">停放时间</view>
        <view class="info-list-value">1小时12分</view>
        </view>
        
      </view>
      <view class="text-center" style="margin:40rpx 0 10rpx 0;font-size:16px;color:grey;">共计消费</view>
      <view class="text-center" style="margin:10rpx 0 40rpx 0;font-size:40px">¥{{item.Total}}</view>
      <view class="bottom-btn-group" style="position:static">
        <view class="bottom-btn primary u-auto" bindtap="bindPaymentBtnTap">
          立即支付
        </view>
        <!--<view class="bottom-btn plain u-auto" style="" bindtap="openParkingMap">
          <image class="button-icon" src="/images/icon/location.png"></image>
          查看车辆位置
        </view>-->
      </view>
    </view>
  </block>
  <view class="link text-center" bindtap="queryOtherPlate">查询其它车牌</view>
</block>
<!--未查询到停车记录-->
<block wx:else>
  <view class="menu-annotation text-center" style="margin:40rpx 0">未查询到停车记录,请尝试直接输入车牌查询</view>
  <view animation="{{animationData}}" class="plate-input-box-container center">
      <view class="flex plate-input-box">
        <block wx:for="{{inputBoxData}}">
          <view class="plate-input-digit {{item.hover}}" id='{{index}}' bindtap="bindDigitTap">{{item.char}}</view>
        </block>
      </view>
  </view>

  <block wx:if="{{currentPos!=null}}">
    <view class="flex plate-keyboard-container" wx:if="{{currentPos==0}}">
      <block wx:for="{{plateAreaCharset}}">
        <view class="plate-keyborad-key" hover-stay-time='100' hover-class="plate-keyborad-key-hover" data-char='{{item}}' bindtap="bindKeyTap">{{item}}</view>
      </block>
    </view>

    <view class="flex plate-keyboard-container" wx:else>
      <block wx:for="{{plateDigitCharset}}">
        <view class="plate-keyborad-key" hover-stay-time='100' hover-class="plate-keyborad-key-hover" data-char='{{item}}' bindtap="bindKeyTap">{{item}}</view>
      </block>
    </view>
  </block>
  <view class="spinner" wx:if="{{showLoading}}">
    <view class="double-bounce1"></view>
    <view class="double-bounce2"></view>
  </view>
  <!--<view class="bottom-btn-group">
    <view class="bottom-btn primary" style="width:100%" bindtap="preOrder">查询</view>
  </view>-->
  <view class="cicle-btn" bindtap="query" hover-stay-time='100' hover-class="cicle-btn-hover">查询</view>

</block>

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

/* pages/getCar/getCar.wxss */

.plate {
  border: 3px silver solid;
  border-radius: 10px;
  background-color: #2b73c5;
  color: white;
  padding: 15rpx;
  position: absolute;
  top: -40rpx;
  right: 10rpx;
}

.plate-input-box-container {
  /*background-color: white;
  margin: 15rpx 0;
  padding: 0 10rpx;
  display: flex;
  flex-direction: column;
  box-shadow: 0rpx 1rpx 5px #888;*/
  position: relative;
  top:-500rpx;
}

.plate-input-box {

  margin: 30rpx auto;
  width: 85%;
  background-color: white;
  justify-content: center;
  align-items: center;
  border: 1rpx dodgerblue solid;
  border-radius: 15rpx;
}

.plate-input-digit {
  text-align: center;
  font-size: 30px;
  flex: 1;
  border-left: 1rpx lightgrey solid;
  height: 90rpx;
  line-height: 90rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.plate-input-digit-hover {
  border: 1px orangered solid;
  line-height: 90rpx;
  overflow: hidden;
}

.plate-input-digit:first-child {
  border-top-left-radius: 13rpx;
  border-bottom-left-radius: 13rpx;
  border-left: none;
  background-color: dodgerblue;
  color: white;
}

.plate-input-digit:nth-child(2) {
  background-color: dodgerblue;
  color: white;
}

.plate-input-digit:last-child {
  border-top-right-radius: 13rpx;
  border-bottom-right-radius: 13rpx;
}

.plate-keyboard-container {
  margin: 20rpx auto;
  width: 85%;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  border: 1px lightgray solid;
  border-radius: 15rpx;
  flex-wrap: wrap;
  padding: 0;
}

.plate-keyborad-key {
  width: 70rpx;
  height: 70rpx;
  background-color: white;
  border: 1rpx lightgray solid;
  border-radius: 50%;
  line-height: 70rpx;
  margin: 10rpx;
  text-align: center;
  font-weight: bold;
}

.plate-keyborad-key-hover {
  background-color: royalblue;
  color: white;
  width: 70rpx;
  height: 70rpx;
  border: 1rpx lightgray solid;
  border-radius: 50%;
  line-height: 70rpx;
  margin: 10rpx;
  text-align: center;
}

三、js页面代码如下：

// pages/getCar/getCar.js
var app = getApp();
const serviceUrl = app.globalData.serviceUrl;
const apiUrl = serviceUrl + '/ordersapi'
const paymentUrl = apiUrl +"/setPaidStatus"
Page({
  data: {
    plateAreaCharset: ['京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼'],
    plateDigitCharset: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M'],
    inputBoxData: [{ char: '', hover: '' }, { char: '', hover: '' }, { char: '', hover: '' }, { char: '', hover: '' }, { char: '', hover: '' }, { char: '', hover: '' }, { char: '', hover: '' }],
    currentPos: null,
    showAreaKeyBoard: false,
    showKeyBoard: false,
    hasUnpaidOrders: false,
    orders: [],
    animationData: {},
    showLoading: true
  },
  onLoad: function (options) {
    var that = this
    wx.setNavigationBarTitle({
      title: '预约取车'
    })


  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    animation.top('20rpx').step()
    this.setData({
      animationData: animation.export()
    })
    this.putPlateInputBox()
    this.query()
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  onPullDownRefresh: function () {
    this.query()
    
  },
  openParkingMap: function () {
    wx.navigateTo({
      url: '../parkinglotMap/parkinglotMap',
      success: function (res) {
        // success
      },
      fail: function (res) {
        // fail
      },
      complete: function (res) {
        // complete
      }
    })
  },
  bindDigitTap: function (res) {
    let inputBoxData = this.data.inputBoxData
    let id = res.currentTarget.id
    let currentPos = id
    console.log('res', res)
    if (id > 6) {
      id = 6
      currentPos = null;
    } else {
      inputBoxData[id].hover = 'plate-input-digit-hover'
    }
    if (this.data.currentPos != null) inputBoxData[this.data.currentPos].hover = ''

    this.setData({
      inputBoxData: inputBoxData,
      currentPos: currentPos
    })

  },
  bindKeyTap: function (res) {
    console.log(res)
    let char = res.currentTarget.dataset.char
    let inputBoxData = this.data.inputBoxData
    inputBoxData[this.data.currentPos].char = char
    let passOnData = {
      currentTarget: {
        id: parseInt(this.data.currentPos) + 1
      }
    }
    this.bindDigitTap(passOnData)
  },

  query: function () {
    let that = this
    let plateNumber = this.getPlateNumberString()
    this.setData({
      showLoading:true
    })
    wx.request({
      url: apiUrl,
      data: {
        plateDigit: plateNumber
      },
      success: function (res) {
        console.log(res)
        if (res.data.Status == 'ok') {
          console.log('ok')
          that.setData({
            orders: res.data.Data,
            hasUnpaidOrders: true
          })
          wx.setStorage({
            key: 'plateNumber',
            data: that.data.inputBoxData
          })
        }else{
          wx.showModal({
            title: '提示',
            content: '未找到车牌为 '+plateNumber+' 的车辆数据，请重试。',
          })
        }
      },
      complete:function(res){
        that.setData({
          showLoading: false
        })
        wx.stopPullDownRefresh()
      }
    })
  },
  getPlateNumberString: function () {
    return this.data.inputBoxData[0].char
      + this.data.inputBoxData[1].char
      + this.data.inputBoxData[2].char
      + this.data.inputBoxData[3].char
      + this.data.inputBoxData[4].char
      + this.data.inputBoxData[5].char
      + this.data.inputBoxData[6].char
  },
  putPlateInputBox: function () {
    var plateNumber = wx.getStorageSync('plateNumber')
    if (plateNumber != []) {
      this.setData({
        inputBoxData: plateNumber
    })
    }else{
      wx.showModal({
        title: '提示',
        content: '请输入车牌来查询您的停车记录。',
      })
      let passOnData = {
        currentTarget: {
          id: 0
        }
      }
      this.bindDigitTap(passOnData)
    }
  },
  bindPaymentBtnTap: function(){
    var that=this
    wx.showModal({
      title: '请注意',
      content: '支付成功后，您将有30分钟时间将车辆驶出。超时将按照车辆停入时间继续计费，请您合理安排时间。',
      confirmText:"确认支付",
      success:function(res){
        if(res.confirm){
          wx.request({
            url: apiUrl + "/" + that.data.orders[0].ID,
            method:"PUT",
            success:function(res){
              console.log(res)
            },
            complete:function(res){
              console.log(res)
            }
          })
          console.log(that.data.orders[0])
          console.log(that.data.orders[0].ID)
          wx.navigateTo({
            url: './paidSuccess/paidSuccess',
          })
        }else if(res.cancel){
        }
      },

    })
  },
  queryOtherPlate:function(){
    this.setData({
      hasUnpaidOrders:false
    })
  }
})

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