cashier_wx/distribution/withdraw/index.vue

<template>
  <view class="min-h-100vh bg-gray">
    <up-navbar
      bg-color="transparent"
      title="提现"
      @leftClick="back"
      :fixed="true"
    ></up-navbar>
    <view class="top">
      <image class="top_bg" src="/distribution/static/top_bg.png"></image>
      <view class="top_content">
        <view class="color-333 font-16"> 提现金额 </view>
        <view class="u-m-t-32 u-flex input-number-box">
          <text class="fuhao">¥</text>
          <input
            type="digit"
            class="input-number"
            placeholder="最小提现金额为30"
          />
          <text class="all-in">全部提现</text>
        </view>
        <view class="color-666 font-12 u-m-t-16">
          <text>可提现金额：￥399.99</text>
          <text class="u-m-l-20">手续费为8%</text>
        </view>

        <view class="btn-group">
          <view class="btn shiming" @click="toShiming">实名认证</view>
          <view class="btn tixian u-m-t-32">立即提现</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="u-flex">
        <view class="title">提现记录</view>
      </view>
      <view class="list">
        <view v-for="(item, index) in 3" :key="index" class="shop-item">
          <view class="u-flex-1">
            <view class="u-flex justify-between">
              <view>
                <view class="name">提现</view>
                <view class="shouxufei u-m-t-16"
                  >手续费9.99元</view
                >
                <view class="font-12 color-999 u-m-t-10">
                    时间：2017/8/9 21:02
                </view>
              </view>
              <view class="u-flex u-flex-col justify-center">
                <template v-if="!true">
                    <view class="lingqu">点击领取</view>
                    <view class="price reduce">-100</view>
                </template>
                <template v-else>
                    <view class="status fail">提现失败</view>
                    <view class="price">-100</view>
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script setup>
function back() {
  uni.navigateBack({
    delta: 1,
  });
}

function toShiming() {
  uni.navigateTo({
    url: "/distribution/shiming/index",
  });
}
</script>
  
  <style scoped lang="scss">
.input-number-box {
  width: 428rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #999;
  font-size: 28rpx;
  align-items: baseline;
  .fuhao {
    font-size: 64rpx;
    color: #333;
  }
  .input-number {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333;
    padding-left: 24rpx;
    padding-right: 10rpx;
  }
  .all-in {
    font-size: 28rpx;
    color: #fe7e00;
  }
}
.list {
  .shop-item {
    padding: 32rpx 28rpx;
    border-bottom: 2rpx solid #ededed;
    font-size: 28rpx;
    color: #666;
    display: flex;
    align-items: center;
    &:last-child {
      border-bottom: none;
    }
    .fufei {
      color: #e8ad7b;
    }
    .tag {
      font-size: 24rpx;
      color: #ff1c1c;
      background-color: #ffe4e4;
      padding: 8rpx 20rpx;
      border-radius: 8rpx;
    }
    .name {
        color: #333;
        font-weight: 700;
    }
    .shouxufei {
    }
    .shouyi {
      font-size: 24rpx;
      color: #666;
      text-align: center;
    }
  }
}
.status{
    font-size: 28rpx;
    font-weight: 700;
    text-align: right;
    color: #333333;
    &.fail{
        color: #ff1c1c;
    }
}
.lingqu{
    font-size: 28rpx;
    border-radius: 8rpx;
    background: #FE6D11;
    padding: 8rpx 16rpx;
    color: #ffffff;
}
.price {
  font-weight: 700;
  font-size: 48rpx;
  margin-top: 16rpx;
  color: #FE7E00;
  text-align: right;
  &.reduce{
    color: #666;
  }
}
.top {
  position: relative;
  .top_content {
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 28rpx;
    right: 28rpx;
    bottom: 52rpx;
    padding: 28rpx 28rpx 52rpx 28rpx;
    border-radius: 16rpx;

    flex-shrink: 0;
    fill: #ffffff3b;
    stroke-width: 2rpx;
    stroke: #fff;
    filter: drop-shadow(2rpx -4rpx 13.4rpx #ff6f0124);
    backdrop-filter: blur(5.1rpx);
    .btn-group {
      position: absolute;
      right: 28rpx;
      top: 50%;
      transform: translateY(-50%);
      .btn {
        padding: 8rpx 16rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        border: 2rpx solid #fe6d11;
        &.shiming {
          color: #fe6d11;
        }
        &.tixian {
          color: #fff;
          background-color: #fe6d11;
        }
      }
    }
  }
}
.top_bg {
  width: 100%;
  height: 580rpx;
}
.bottom {
  margin: 0 28rpx;
  border-radius: 16rpx 16rpx 0 0;
  background-color: #fff;
  transform: translateY(-20rpx);
}
.title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  padding:  28rpx;

}
.small-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #333;
}
</style>