新增余额提现，余额充值功能

pages/mine/deposit/index.vue

@@ -1,14 +1,17 @@
 <template>
   <view class="wap">
+    <u-navbar back-text="" title="预存款列表">
+    </u-navbar>
     <view class="wrapper-show-money">
       <view class="money-view">
         <h3>预存款金额 </h3>
         <view class="money">￥{{walletNum | unitPrice }}</view>
+
       </view>
     </view>
     <view class="wrapper-tabs">
-      
-      <swiper class="swiper-box" @change="changeSwiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
+
+      <swiper class="swiper-box"  :current="swiperCurrent">
         <swiper-item class="swiper-item" v-for="index in list.length" :key="index">
           <scroll-view class="scroll-v view-wrapper" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
             <view v-if="datas.length!=0" class="view-item" v-for="(logItem, logIndex) in datas" :key="logIndex">
@@ -37,12 +40,11 @@
 
 <script>
 import { getUserRecharge, getWalletLog } from "@/api/members";
-import storage from "@/utils/storage.js";
 import { getUserWallet } from "@/api/members";
 export default {
   data() {
     return {
-      walletNum:0,
+      walletNum: 0,
       status: "loadmore",
       current: 0,
       swiperCurrent: 0,
@@ -77,6 +79,7 @@ export default {
     this.walletNum = result.data.result.memberWallet;
   },
   methods: {
+   
     /**分页获取预存款充值记录 */
     getRecharge() {
       this.status = "loading";
@@ -105,10 +108,7 @@ export default {
       });
     },
 
-    // 点击swiper的时候清空数据
-    changeSwiper() {
-      this.groupBuy = [];
-    },
+  
     changed(index) {
       this.datas = [];
       this.swiperCurrent = index;
@@ -121,19 +121,6 @@ export default {
       }
     },
 
-    // swiper-item左右移动，通知tabs的滑块跟随移动
-    transition({ detail: { dx } }) {
-      this.$refs.tabs.setDx(dx);
-    },
-    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
-    // swiper滑动结束，分别设置tabs和swiper的状态
-    animationfinish(e) {
-      // this.groupBuy = []
-      let current = e.detail.current;
-      this.$refs.tabs.setFinishCurrent(current);
-      this.swiperCurrent = current;
-      this.current = current;
-    },
     loadMore() {
       this.params.pageNumber++;
       this.getWallet();
@@ -144,93 +131,96 @@ export default {
 
 <style lang="scss" scoped>
 .green {
-  color: $aider-color-green !important;
-}
-.view-item {
-  padding: 32rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.view-item-change {
-  text-align: right;
-  > .-money {
-    font-size: 36rpx;
-    color: $main-color;
+    color: $aider-color-green !important;
+  }
+  .view-item {
+    padding: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .view-item-change {
+    text-align: right;
+    > .-money {
+      font-size: 36rpx;
+      color: $main-color;
+      font-weight: bold;
+    }
+    > .-time {
+      font-size: 22rpx;
+      color: #999;
+    }
+  }
+  .view-item-detail {
+    line-height: 1.75;
+    > .-title {
+      font-size: 28rpx;
+    }
+    > .-number {
+      font-size: 22rpx;
+      color: #999;
+    }
+  }
+  .submit-btn {
+    line-height: 90rpx;
+    text-align: center;
+  
+    color: #fff;
+    background: $main-color;
+  
+    margin: 0 auto;
+    height: 90rpx;
+  }
+  
+  .operation {
+    font-size: 32rpx;
+    margin-right: 24rpx;
+    color: rgb(96, 98, 102);
+  }
+  .money {
+    font-size: 40rpx;
     font-weight: bold;
   }
-  > .-time {
-    font-size: 22rpx;
-    color: #999;
+  
+  .money-view {
+    height: 100%;
+    width: 100%;
+    padding: 0 32rpx;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    flex-direction: column;
+    color: #fff;
+    background-image: linear-gradient(
+      25deg,
+      $main-color,
+      $light-color,
+      $aider-light-color
+    );
   }
-}
-.view-item-detail {
-  line-height: 1.75;
-  > .-title {
-    font-size: 28rpx;
+  
+  .swiper-item,
+  .scroll-v {
+    height: 100%;
   }
-  > .-number {
-    font-size: 22rpx;
-    color: #999;
+  
+  .swiper-box {
+    /* #ifndef H5 */
+    height: calc(100vh - 200rpx);
+    /* #endif */
+  
+    /* #ifdef H5 */
+    height: calc(100vh - 288rpx);
+    /* #endif */
+  }
+  
+  .wap {
+    width: 100%;
+    height: calc(100vh - 44px);
+  }
+  
+  .wrapper-show-money {
+    height: 200rpx;
+    // background-image: url('/static/img/main-bg.jpg');
   }
-}
-.submit-btn {
-  line-height: 90rpx;
-  text-align: center;
-
-  color: #fff;
-  background: $main-color;
-
-  margin: 0 auto;
-  height: 90rpx;
-}
-.wap {
-}
-
-.money {
-  font-size: 40rpx;
-  font-weight: bold;
-}
-
-.money-view {
-  height: 100%;
-  width: 100%;
-  padding: 0 32rpx;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  flex-direction: column;
-  color: #fff;
-  background-image: linear-gradient(
-    25deg,
-    $main-color,
-    $light-color,
-    $aider-light-color
-  );
-}
-
-.swiper-item,
-.scroll-v {
-  height: 100%;
-}
-
-.swiper-box {
-  /* #ifndef H5 */
-  height: calc(100vh - 200rpx);
-  /* #endif */
-
-  /* #ifdef H5 */
-  height: calc(100vh - 288rpx);
-  /* #endif */
-}
-
-.wap {
-  width: 100%;
-  height: calc(100vh - 44px);
-}
-
-.wrapper-show-money {
-  height: 200rpx;
-  // background-image: url('/static/img/main-bg.jpg');
-}
 </style>

pages/mine/deposit/operation.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="wrapper">
+    <u-navbar :custom-back="back" title="余额"></u-navbar>
+    <div class="box">
+      <div class="deposit">预存款金额</div>
+      <div class="money">￥{{walletNum | unitPrice }}</div>
+      <div class="operation-btns">
+        <div class="operation-btn light" @click="navgition('/pages/mine/deposit/withdrawal')">提现</div>
+        <div class="operation-btn" @click="navgition('/pages/mine/deposit/recharge')">充值</div>
+      </div>
+    </div>
+    <div class="box list" @click="navgition('/pages/mine/deposit/index')">
+      <div class="list-left">预存款明细</div>
+      <div class="list-right">
+        <u-icon name="arrow-right"></u-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserWallet } from "@/api/members";
+export default {
+  data() {
+    return {
+      walletNum: 0,
+    };
+  },
+  async mounted() {
+    let result = await getUserWallet(); //预存款
+    this.walletNum = result.data.result.memberWallet;
+  },
+  methods: {
+    back() {
+      uni.switchTab({
+        url: "/pages/tabbar/user/my",
+      });
+    },
+    /**
+     * 跳转
+     */
+    navgition(url) {
+      uni.navigateTo({
+        url,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.list-left {
+  flex: 8;
+}
+.list-right {
+  flex: 2;
+  text-align: right;
+}
+.wrapper {
+  width: 94%;
+  margin: 0 3%;
+}
+.box {
+  margin: 20rpx 0;
+  background: #fff;
+  border-radius: 20rpx;
+
+  padding: 40rpx;
+}
+.operation-btns {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.money {
+  text-align: center;
+  color: #333;
+  font-size: 50rpx;
+  margin: 20rpx 0 40rpx 0;
+  letter-spacing: 2rpx;
+}
+.deposit {
+  margin-top: 50rpx;
+  text-align: center;
+  color: #999;
+  font-size: 28rpx;
+
+  letter-spacing: 2rpx;
+}
+.operation-btn {
+  background: #ee6d41;
+  color: #fff;
+  height: 90rpx;
+  width: 240rpx;
+  margin: 0 20rpx;
+  border-radius: 10rpx;
+  text-align: center;
+  line-height: 90rpx;
+  font-size: 32rpx;
+}
+.light {
+  background: #fdf2ee;
+  color: #ee6d41;
+}
+</style>

pages/mine/deposit/recharge.vue

@@ -0,0 +1,50 @@
+<template>
+  <view>
+    <view class="-list">
+      <view class="title">充值金额</view>
+      <view class="content">
+        <view class="price">
+          <span> ￥</span>
+          <u-input v-model="price" placeholder="" type="number" />
+        </view>
+
+      </view>
+    </view>
+
+    <view class="submit" :class="{'light':flag}" @click="handlerRecharge">充值</view>
+  </view>
+</template>
+<script>
+import { recharge } from "@/api/members";
+export default {
+  data() {
+    return {
+      price: 0,
+      flag: true,
+    };
+  },
+  watch: {
+    price(val) {
+      val <= 0 ? (this.flag = true) : (this.flag = false);
+    },
+  },
+  mounted() {},
+  methods: {
+    // 充值
+    async handlerRecharge() {
+      if (this.price > 0) {
+       
+        let res = await recharge({ price: this.price });
+        if (res.data.success) {
+          uni.navigateTo({
+            url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
+          });
+        }
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

pages/mine/deposit/style.scss

@@ -0,0 +1,46 @@
+/deep/ .u-input__input,
+.u-input {
+  font-size: 80rpx !important;
+  height: 102rpx !important;
+}
+/deep/ .u-input__input {
+  height: 100%;
+  font-size: 80rpx;
+}
+.content {
+  display: flex;
+  > .price {
+    width: 60%;
+    margin: 20rpx 0;
+    font-size: 80rpx;
+    display: flex;
+  }
+  > .all {
+    justify-content: center;
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
+.-list {
+  margin: 20rpx 0;
+  background: #fff;
+  padding: 16rpx 32rpx;
+}
+.title {
+  font-size: 35rpx;
+}
+.light {
+  opacity: 0.6;
+}
+.submit {
+  margin: 80rpx auto;
+  width: 94%;
+  background: $light-color;
+  height: 90rpx;
+  color: #fff;
+  border-radius: 10rpx;
+  text-align: center;
+  line-height: 90rpx;
+}

pages/mine/deposit/withdrawal.vue

@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <view class="-list">
+      <view class="title">提现金额</view>
+      <view class="content">
+        <view class="price">
+          <span> ￥</span>
+          <u-input v-model="price" placeholder="" type="number" />
+        </view>
+
+        <view class="all">
+          <view @click="handleAll" :style="{ color: $mainColor }">全部</view>
+          <view style="font-size: 24rpx; color: #999">可提现金额<span>{{ walletNum | unitPrice }}</span>元</view>
+        </view>
+      </view>
+    </view>
+
+    <view class="submit" @click="cashd">提现</view>
+  </view>
+</template>
+<script>
+import { getUserWallet,withdrawalApply } from "@/api/members";
+export default {
+  data() {
+    return {
+      price: 0,
+      walletNum: 0,
+    };
+  },
+  async mounted() {
+    let result = await getUserWallet(); //预存款
+    this.walletNum = result.data.result.memberWallet;
+  },
+
+  methods: {
+    cashd() {
+      this.price = this.price + "";
+
+      if (this.$u.test.amount(parseInt(this.price))) {
+        withdrawalApply({ price: this.price }).then((res) => {
+          if (res.data.success) {
+            uni.showToast({
+              title: "提现成功!",
+              duration: 2000,
+              icon: "none",
+            });
+            setTimeout(() => {
+              uni.navigateBack({
+                delta: 1,
+              });
+            }, 1000);
+          }
+        });
+      } else {
+        uni.showToast({
+          title: "请输入正确金额",
+          duration: 2000,
+          icon: "none",
+        });
+      }
+    },
+    handleAll() {
+      this.price = this.walletNum;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./style.scss";
+</style>