用户提现管理页面内容布局调整优化

2 years ago · ff2e81c286
7 changed files with 331 additions and 6 deletions
--- a/app.json
+++ b/app.json
@ -2,8 +2,8 @@
  "pages": [
    "pages/merchant-login/merchant-login",
    "pages/home-page/home-page",
-    "pages/user-orders/user-orders"
-
+    "pages/user-orders/user-orders",
+    "pages/withdrawal-management/withdrawal-management"
  ],
  "requiredPrivateInfos": [
    "chooseAddress"
--- a/pages/user-orders/user-orders.wxml
+++ b/pages/user-orders/user-orders.wxml
@ -1,6 +1,8 @@
 <view class="page-bg">
 <view class="withdrawal-management">
+  <navigator hover-class="none"  url="/pages/withdrawal-management/withdrawal-management">
  <button class="withdrawal-button">提现管理</button>
+  </navigator>
 </view>
 <view class="withdrawal-limit">
  <view class="limit-symbol">￥</view>
@ -72,6 +74,4 @@
    </view>
  </view>
 </view>
-
-
 </view>
--- a/pages/user-orders/user-orders.wxss
+++ b/pages/user-orders/user-orders.wxss
@ -25,7 +25,7 @@ button.withdrawal-button{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 40rpx;
+  border-bottom-left-radius: 30rpx;
 }
 button::after{
  border: none;
--- a/pages/withdrawal-management/withdrawal-management.js
+++ b/pages/withdrawal-management/withdrawal-management.js
@ -0,0 +1,127 @@
+// pages/pregnant-mother/pregnant-mother.js
+
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: true,
+    interval: 2000,
+    duration: 500,
+    nvabarData: {
+        title: '', //导航栏 中间的标题
+        keyWord: '',
+        search: true
+    },
+    height: ''
+  },
+
+  
+  changeIndicatorDots() {
+    this.setData({
+      indicatorDots: !this.data.indicatorDots
+    })
+  },
+
+  changeAutoplay() {
+    this.setData({
+      autoplay: !this.data.autoplay
+    })
+  },
+
+  intervalChange(e) {
+    this.setData({
+      interval: e.detail.value
+    })
+  },
+
+  durationChange(e) {
+    this.setData({
+      duration: e.detail.value
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+   
+     // 清除搜索框 调用子组件的清空函数
+     this.selectComponent('#bar').clearInput();
+     // 每个机型的尺寸不一致  
+     // 在app.js中获取到的 statusBarHeight 用于控制头部的高度
+     
+     this.setData({
+       //  height: app.globalData.height,
+     })
+     this.setData({
+         'nvabarData.inputValue': ''
+     })
+
+     if (typeof this.getTabBar === 'function' &&
+        this.getTabBar()) {
+        this.getTabBar().setData({
+          selected: 1
+        })
+      }
+  },
+
+  search: function(e) {
+    this.getTask(e.detail);
+},
+
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
--- a/pages/withdrawal-management/withdrawal-management.json
+++ b/pages/withdrawal-management/withdrawal-management.json
@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "用户提现",
+  "enablePullDownRefresh": false,
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTextStyle": "black"
+}
--- a/pages/withdrawal-management/withdrawal-management.wxml
+++ b/pages/withdrawal-management/withdrawal-management.wxml
@ -0,0 +1,31 @@
+<view class="user-withdrawal-bg">
+  <view class="withdrawal-management">
+    <navigator hover-class="none"  url="/pages/withdrawal-management/withdrawal-management">
+    <button class="withdrawal-button">提现历史</button>
+    </navigator>
+  </view>
+  <view class="withdrawal-limit">
+    <view class="limit-symbol">￥</view>
+    <view class="withdrawal-volume">458.00</view>
+  </view>
+  <view class="Withdrawable-text">可提现</view>
+  <view class="withdrawal-content">
+    <image class="withdrawal-line" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/withdrawal-line.png" />
+  </view>
+  <view class="total-withdrawal">总提现：￥500.00</view>
+  <view class="to-be-credited">
+    <view class="credited-text">待入账：￥200.00</view>
+    <view class="credited-line"></view>
+    <view class="withdrawal-in-progress">提现中：458元</view>
+  </view>
+</view>
+<view class="withdrawal-account">
+  <view class="withdrawal-account-left">
+    <image class="alipay-account" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/alipay-account.png" />
+    <view class="account-left-text">支付宝账户</view>
+  </view>
+  <view class="withdrawal-account-right">
+    <view class="account-right-text">去开通</view>
+    <image class="open-minded" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/open-minded.png" />
+  </view>
+</view>
--- a/pages/withdrawal-management/withdrawal-management.wxss
+++ b/pages/withdrawal-management/withdrawal-management.wxss
@ -0,0 +1,161 @@
+page{
+  background: #F7F7F7;
+}
+.user-withdrawal-bg{
+  width: 750rpx;
+  height: 414rpx;
+  background: url("https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/user-withdrawal-bg.png") no-repeat center center;
+  background-size:cover;
+  padding: 0 30rpx;
+}
+.withdrawal-management{
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+button.withdrawal-button{
+  width: 160rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  font-family: "Microsoft YaHei";
+  font-size: 24rpx;
+  color: #fff;
+  background: #FCC565;
+  margin: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 30rpx;
+}
+button::after{
+  border: none;
+}
+.withdrawal-limit{
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  padding-top: 40rpx;
+  text-align: center;
+}
+.limit-symbol{
+  font-family: "Microsoft YaHei";
+  font-size: 30rpx;
+  color: #fff;
+}
+.withdrawal-volume{
+  font-family: "Din";
+  font-size: 60rpx;
+  color: #fff;
+  font-weight: bold;
+  margin-left: 10rpx;
+}
+.Withdrawable-text{
+  font-family: "Microsoft YaHei";
+  font-size: 30rpx;
+  color: #fff;
+  text-align: center;
+  margin-top: 30rpx;
+}
+.withdrawal-content{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx 0;
+}
+image.withdrawal-line{
+  text-align: center;
+  width: 200rpx;
+  height: 1rpx;
+  background-size: cover;
+}
+.to-be-credited{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Microsoft YaHei";
+  font-size: 30rpx;
+  color: #fff;
+  text-align: center;
+  margin-top: 30rpx;
+}
+.total-withdrawal{
+  font-family: "Microsoft YaHei";
+  font-size: 30rpx;
+  color: #fff;
+  text-align: center;
+  border-bottom: 1rpx solid #F75965;
+  padding-bottom:  30rpx;
+}
+.credited-text{
+  font-family: "Microsoft YaHei";
+  font-size: 28rpx;
+  color: #fff;
+}
+.credited-line{
+  width: 1rpx;
+  height: 40rpx;
+  background: #F75965;
+  margin: 0 60rpx;
+}
+.withdrawal-in-progress{
+  font-family: "Microsoft YaHei";
+  font-size: rpx;
+  color: #fff;
+}
+.withdrawal-account{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 30rpx;
+}
+.withdrawal-account-left{
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+image.alipay-account{
+  width: 40rpx;
+  height: 40rpx;
+  background-size: cover;
+}
+.account-left-text{
+  font-family: "Microsoft YaHei";
+  font-size: 28rpx;
+  color: #454545;
+  font-weight: bold;
+  margin-left: 20rpx;
+}
+.withdrawal-account-right{
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+.account-right-text{
+  font-family: "Microsoft YaHei";
+  font-size: 24rpx;
+  color: #999;
+}
+image.open-minded{
+  width: 14rpx;
+  height: 24rpx;
+  background-size: cover;
+  margin-left: 15rpx;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+