feat(pages):预支付页面

pages/quantify/quantify.js

@@ -0,0 +1,92 @@
+// pages/quantify/quantify.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    nozzleId:'',
+    quantify:'元',
+    fastInputs:[10,20,50,100,200,500],
+    type:[
+      { name:'金额',checked:true},
+      { name:'升数',checked:false}
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    const id = decodeURIComponent(options.q) // 获取到二维码原始链接内容
+    this.setData({
+      nozzleId:id
+    })
+    wx.showToast({
+      title: id,
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  /** 当选择定量类型 */
+  onTypeChange(event) {
+    var type = event.detail.value;
+    if(type == '升数') {
+      this.setData({
+        quantify:'升'
+      })
+    } else {
+      this.setData({
+        quantify:'元'
+      })
+    }
+  }
+})

pages/quantify/quantify.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/quantify/quantify.wxml

@@ -0,0 +1,45 @@
+
+<view class="quantifyContainer">
+  <!-- 提示 -->
+  <view class="tip">
+    <icon color="#fbac15" type="warn" />
+    <text>请勿在油机旁使用手机</text>
+  </view>
+
+  <view class="quantifyBox">
+    <!-- 油品信息 -->
+    <view class="oilInfoBox">
+      <image src="../../images/oil.svg" mode="aspectFill" />
+      <view class="oilInfo">
+        <text class="oil">92#汽油</text>
+        <text class="price">￥7.49/升</text>
+      </view>
+    </view>
+
+    <!-- 定值区 -->
+    <view class="inputBox">
+      <!-- 输入 -->
+      <view class="input">
+        <text>请输入金额</text>
+        <input type="digit" placeholder="0.00{{quantify}}"/>
+      </view>
+
+      <!-- 分割线 -->
+      <view class="line" />
+
+      <!-- 快速输入 -->
+      <view class="fastInput">
+        <text class="fastItem" wx:for="{{fastInputs}}" wx:key="{{index}}">{{item}}{{quantify}}</text>
+      </view>
+
+      <!-- 定量类型选择 -->
+      <radio-group class="typeSelect" bindchange="onTypeChange">
+        <radio wx:for="{{type}}" checked="{{item.checked}}"
+        color="#d81e07" value="{{item.name}}">{{item.name}}</radio>
+      </radio-group>
+    </view>
+  </view>
+
+  <text class="anthorization">授权</text>
+
+</view>

pages/quantify/quantify.wxss

@@ -0,0 +1,116 @@
+.quantifyContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f2f2f2;
+  height: 100vh;
+}
+
+.tip{
+  display: flex;
+  align-self: flex-start;
+  margin: 3%;
+  width: 100%;
+}
+.tip text{
+  color: #fbac15;
+  margin-left: 3%;
+}
+.quantifyBox{
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+}
+
+.oilInfoBox{
+  display: flex;
+  align-items: center;
+  background-color: #FFFFFF;
+  border-radius: 10rpx;
+  height: 18vh;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.oilInfoBox image {
+  width: 200rpx;
+  height: 200rpx;
+}
+.oilInfo{
+  display: flex;
+  flex-direction: column;
+  margin-left: 10%;
+}
+
+.oil{
+  font-weight: 600;
+  font-size: x-large;
+}
+
+.price{
+  border: #d81e07 solid 1rpx;
+  background-color: #ffebec;
+  border-radius: 18rpx;
+  margin-top: 5%;
+}
+
+.inputBox{
+  display: flex;
+  flex-direction: column;
+  background-color: #FFFFFF;
+  border-radius: 10rpx;
+  height: 30vh;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-top: 5%;
+  padding: 5%;
+}
+.input{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 3%;
+}
+.input input{
+  text-align: end;
+}
+
+.line{
+  width: 100%;
+  background-color: #8a8989;
+  height: 1rpx;
+  margin-bottom: 5%;
+}
+.fastInput{
+  display: flex;
+  flex-wrap: wrap;
+  height: 50%;
+}
+.fastItem{
+  flex:1 1 25%;
+  box-sizing: border-box;
+  text-align: center;
+  border: #f2f2f2 solid 2rpx;
+  background-color: #f2f2f2;
+  border-radius: 30rpx;
+  margin: 1%;
+  height: 100rpx;
+  line-height: 100rpx;
+  color: #acacac;
+}
+
+.typeSelect{
+  display: flex;
+  margin-top: 5%;
+}
+.typeSelect radio{
+  margin: 3% 3% 0% 3%;
+}
+
+.anthorization{
+  background-color: #d81e07;
+  color: #FFFFFF;
+  margin-top: 5%;
+  width: 90%;
+  height: 7vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 20rpx;
+}