积分兑换

pages/exchange/exchange.js

@@ -4,13 +4,28 @@ const app = getApp()
 
 Page({
   data: {
-
+    form: {
+      type: '支付宝',
+      name: '顾红伟',
+      phone: '17319450324',
+      isNum: '100.00',
+    },
+    number: ''
   },
   //事件处理函数
-  bindViewTap: function () {
-    wx.navigateTo({
-      url: '../index/index'
-    })
+  formSubmit: function (e) {
+    let data = this.data.form;
+    data.number = e.detail.value.number;
+    // 判断提现金额是否大于已拥有的金额
+    if (data.number <= data.isNum) {
+      console.log(data);
+    } else {
+      wx.showToast({
+        title: '输入错误，请重新输入',
+        icon: 'none',
+        duration: 2000
+      })
+    }
   },
   onLoad: function () {
   },

pages/exchange/exchange.wxml

@@ -3,6 +3,30 @@
     积分兑换
   </view>
   <view class="two">
-    积分兑换
+    <form bindsubmit="formSubmit" bindreset="formReset">
+      <view class="twoType">
+        <text>兑换账号</text>
+        <text>{{form.type}}</text>
+      </view>
+      <view class="twoUser">
+        <text>{{form.name}}</text>
+        <text>{{form.phone}}</text>
+      </view>
+      <view class="twojf">
+        <view>输入兑换积分（当前可兑换积分为：<text>{{form.isNum}}</text>)</view>
+        <view>
+          <input type="number" name="number" value="{{number}}" placeholder="请输入兑换积分" />
+        </view>
+      </view>
+      <view class="twoSave">
+        <view>
+          <text>提现需要6%的手续费</text>
+          <text>兑换记录</text>
+        </view>
+        <view>
+          <button form-type="submit">确认</button>
+        </view>
+      </view>
+    </form>
   </view>
 </view>

pages/exchange/exchange.wxss

@@ -20,4 +20,113 @@
   position: absolute;
   top: 80rpx;
   width: 100%;
+  background-color: #f6f6f6;
+}
+
+.two .twoType {
+  float: left;
+  width: 94%;
+  height: 80rpx;
+  line-height: 80rpx;
+  background-color: #fff;
+  padding: 0 20rpx;
+  margin: 0 0 15rpx 0;
+}
+
+.two .twoType text:nth-child(1) {
+  float: left;
+  width: 20%;
+}
+
+.two .twoType text:nth-child(2) {
+  float: left;
+  width: 80%;
+  text-align: right;
+}
+
+.two .twoUser {
+  float: left;
+  width: 94%;
+  background-color: #fff;
+  padding: 0 20rpx;
+  margin: 0 0 15rpx 0;
+}
+
+.two .twoUser text {
+  float: left;
+  width: 100%;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-bottom: 1px solid #ccc;
+}
+
+.two .twoUser text:nth-child(2) {
+  border-bottom: none;
+}
+
+.two .twojf {
+  float: left;
+  width: 94%;
+  background-color: #fff;
+  padding: 0 20rpx;
+  margin: 0 0 15rpx 0;
+}
+
+.two .twojf view {
+  float: left;
+  width: 100%;
+  height: 80rpx;
+  line-height: 80rpx;
+}
+
+.two .twojf view:nth-child(1) text {
+  color: #ff0000;
+}
+
+.two .twojf view:nth-child(2) {
+  height: 100rpx;
+  line-height: 100rpx;
+}
+
+.two .twojf view:nth-child(2) input {
+  height: 100rpx;
+  line-height: 100rpx;
+}
+
+.two .twoSave {
+  float: left;
+  width: 94%;
+  padding: 0 20rpx 20rpx 20rpx;
+  background-color: #f6f6f6;
+}
+
+.two .twoSave view {
+  float: left;
+  width: 100%;
+}
+
+.two .twoSave view:nth-child(1) {
+  float: left;
+  width: 100%;
+  margin: 0 0 60rpx 0;
+}
+
+.two .twoSave view:nth-child(1) text:nth-child(1) {
+  float: left;
+  width: 80%;
+}
+
+.two .twoSave view:nth-child(1) text:nth-child(2) {
+  float: left;
+  width: 20%;
+  text-align: right;
+  color: #ff0000;
+}
+
+.two .twoSave view button {
+  float: left;
+  width: 100%;
+  background-color: #ff0000;
+  border-radius: 50rpx;
+  color: #fff;
 }