kxmall-ui/kxmall-app-ui/pages/user/promotion/UserCash.vue

<template>
  <view class="cash-withdrawal">
    <!-- 头部背景 -->
    <view class="promoterHeader">
      <view class="headerCon acea-row row-between-wrapper">
        <view>
          <view class="name">提现申请</view>
          <view class="money">
            <text class="num">可提现: ￥{{ commissionCount || '0' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="sign-record">
      <div class="pos-order-list">
        <view class="nav acea-row row-around row-middle">
          <view v-for="(item, navListIndex) in navList" class="item" :class="currentTab === navListIndex ? 'on' : ''"
                @click="swichNav(navListIndex, item)" :key="navListIndex">{{item.name}}</view>
        </view>
      </div>

      <view class="wrapper">
        <view :hidden="currentTab !== 0" class="list">
          <view class="item acea-row row-between-wrapper">
            <view class="name">微信号</view>
            <view class="input">
              <input placeholder="请输入微信号" v-model="post.weixin" />
            </view>
          </view>
          <view class="item acea-row row-between-wrapper">
            <view class="name">提现金额</view>
            <view class="input">
              <input :placeholder="'最低提现金额' + minPrice" v-model="post.money" />
            </view>
          </view>
          <view class="bnt bg-color-red" @click="submitted">提现</view>
        </view>

        <view :hidden="currentTab !== 1" class="list">
          <view class="item acea-row row-between-wrapper">
            <view class="name">用户名</view>
            <view class="input">
              <input placeholder="请填写您的支付宝用户名" v-model="post.name" />
            </view>
          </view>
          <view class="item acea-row row-between-wrapper">
            <view class="name">账号</view>
            <view class="input">
              <input placeholder="请填写您的支付宝账号" v-model="post.alipay_code" />
            </view>
          </view>
          <view class="item acea-row row-between-wrapper">
            <view class="name">提现金额</view>
            <view class="input">
              <input :placeholder="'最低提现金额' + minPrice" v-model="post.money" />
            </view>
          </view>
          <view class="bnt bg-color-red" @click="submitted">提现</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "UserCash",
  data: function() {
    return {
      navList: [
        {
          name: "微信",
          type: "weixin",
          icon: "icon-weixin2"
        },
        {
          name: "支付宝",
          type: "alipay",
          icon: "icon-icon34"
        }
      ],
      post: {
        extract_type: "weixin",
        alipay_code: "",
        money: "",
        name: "",
        bankname: "",
        cardnum: "",
        weixin: ""
      },
      currentTab: 0,
      minPrice: 0,
      banks: [],
      commissionCount: 0,
      loading: false,
      loaded: false
    };
  },
  mounted: function() {
    this.getBank();
  },
  methods: {
    swichNav: function(index, item) {
      this.currentTab = index;
      this.post.extract_type = item.type;
    },
    getBank: function() {
      let that = this;
      if (that.loading) return;
      that.loading = true;
      uni.showLoading({
        title: '加载中...'
      });
      this.$api.request('get', 'user/app/extract/bank', {}).then(
          res => {
            uni.hideLoading();
            that.loading = false;
            that.banks = res.data.extractBank;
            that.minPrice = res.data.minPrice;
            that.commissionCount = res.data.commissionCount;
          },
          err => {
            uni.hideLoading();
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: "none",
              duration: 2000
            });
          }
      );
    },
    async submitted() {
      let bankname = this.post.bankname,
          alipay_code = this.post.alipay_code,
          money = this.post.money,
          name = this.post.name,
          cardnum = this.post.cardnum,
          weixin = this.post.weixin,
          that = this;

      if (parseFloat(money) > parseFloat(that.commissionCount) || parseFloat(that.commissionCount) == 0) {
        uni.showToast({
          title: "余额不足",
          icon: "none",
          duration: 2000
        });
        return;
      }

      if (parseFloat(money) < parseFloat(that.minPrice)) {
        uni.showToast({
          title: "最低提现金额" + that.minPrice,
          icon: "none",
          duration: 2000
        });
        return;
      }

      if (that.loading) return;
      that.loading = true;
      uni.showLoading({
        title: '提交中...'
      });

      try {
        let params = {};
        if (that.post.extract_type === "alipay") {
          if (!name) {
            uni.showToast({
              title: "请输入支付宝用户名",
              icon: "none",
              duration: 2000
            });
            return;
          }
          if (!alipay_code) {
            uni.showToast({
              title: "请输入支付宝账号",
              icon: "none",
              duration: 2000
            });
            return;
          }
          params = {
            extractType: that.post.extract_type,
            alipayCode: alipay_code,
            name: name,
            money: money
          };
        } else {
          if (!weixin) {
            uni.showToast({
              title: "请输入提现微信号",
              icon: "none",
              duration: 2000
            });
            return;
          }
          params = {
            extractType: that.post.extract_type,
            weixin: weixin,
            money: money
          };
        }

        this.$api.request('post', 'user/app/extract/cash', params).then(
            res => {
              uni.hideLoading();
              that.loading = false;
              uni.showToast({
                title: res.msg,
                icon: "none",
                duration: 2000
              });
              // 5 秒后返回上一页
              setTimeout(() => {
                uni.navigateBack();
              }, 2000); // 5000 毫秒 = 5 秒
            },
            err => {
              uni.hideLoading();
              that.loading = false;
              uni.showToast({
                title: err.msg || err.response.data.msg || err.response.data.message,
                icon: "none",
                duration: 2000
              });
            }
        );
      } catch (e) {
        uni.hideLoading();
        that.loading = false;
        uni.showToast({
          title: e.message || "提交失败",
          icon: "none",
          duration: 2000
        });
      }
    }
  }
};
</script>

<style lang="less">
.cash-withdrawal {
  .promoterHeader {
    background-image: url('https://kxmalls.oss-cn-hangzhou.aliyuncs.com/bg/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 300rpx;
    padding: 0 50rpx;
    box-sizing: border-box;
    color: #fff;

    .headerCon {
      padding: 50rpx 0;

      .name {
        font-size: 28rpx;
        opacity: 0.9;
        margin-bottom: 10rpx;
      }

      .money {
        font-size: 36rpx;
        font-weight: bold;
        line-height: 1.2;
        font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', sans-serif;
        text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

        .num {
          font-size: 48rpx;
          font-family: 'GuildfordProBook 5';
        }
      }
    }
  }

  .sign-record {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    margin-top: -20rpx;
    padding: 0 30rpx;

    .pos-order-list {
      .nav {
        padding: 30rpx 0;

        .item {
          font-size: 28rpx;
          color: #666;
          padding: 10rpx 0;
          position: relative;

          &.on {
            color: #eb3729;
            font-weight: bold;

            &:after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 60rpx;
              height: 4rpx;
              background-color: #eb3729;
              border-radius: 2rpx;
            }
          }
        }
      }
    }

    .wrapper {
      .list {
        .item {
          padding: 30rpx 0;
          border-bottom: 1rpx solid #f5f5f5;

          .name {
            font-size: 28rpx;
            color: #333;
            width: 150rpx;
          }

          .input {
            flex: 1;

            input {
              text-align: right;
              font-size: 28rpx;
              color: #666;
            }
          }
        }

        .bnt {
          margin: 50rpx auto;
          width: 90%;
          height: 80rpx;
          border-radius: 40rpx;
          text-align: center;
          line-height: 80rpx;
          color: #fff;
          font-size: 30rpx;
          font-weight: bold;
        }
      }
    }
  }
}

.acea-row {
  display: flex;
  flex-wrap: wrap;
}
.row-between-wrapper {
  justify-content: space-between;
  align-items: center;
}
.row-around {
  justify-content: space-around;
}
.row-middle {
  align-items: center;
}
.font-color-red {
  color: #2AAC34;
}
.bg-color-red {
  background-color: #2AAC34;
}
</style>