fission-star-applet-250304/pages_order/mine/withdraw.vue

<template>
  <view class="page">
		<navbar title="提现" leftClick @leftClick="$utils.navigateBack" />

    <view class="content">
      <view class="card info">
        <view class="info-row">
          <view class="flex">
            <text class="unit">￥</text>
            <uv-input
              v-model="count"
              placeholder="请输入提现金额"
              :placeholderStyle="{
                color: '#999999',
                fontSize: '38rpx',
                fontWight: 900,
              }"
              :customStyle="{
                flex: 1,
                padding: 0,
                fontWight: 900,
              }"
              fontSize="38rpx"
              color="#1B1B1B"
              border="none"
              focus
            ></uv-input>
            <button plain class="btn-simple btn-withdraw">全部提现</button>
          </view>
          <view class="account">{{ `可用金额：￥${account}` }}</view>
        </view>
        <view class="info-row">
          <view class="flex title">
            <text>提现至</text>
            <image class="icon-wx" src="../static/center/wx.png"></image>
            <text>微信</text>
            <!-- todo: check -->
            <txt>（本人已实名微信账号）</txt>
          </view>
          <view class="flex">
            <view class="desc">余额提现至微信钱包，提现限额2000元/日次日00:00恢复提现额度。</view>
            <button plain class="btn-auth">去授权</button>
          </view>
        </view>
      </view>

      <button class="btn-submit" @click="onConfirm">确定</button>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        count: null,
        account: null,
      }
    },
    onShow() {
      // todo

      // fetch user-info

      this.account = 100.0
    },
    methods: {
      onConfirm() {
        // todo
      },
    },
  }
</script>

<style scoped lang="scss">
.page {
  background-color: $uni-bg-color;
}

.content {
  padding: 20rpx;
}

.info {
  border-radius: 16rpx;
  padding: 60rpx 24rpx 50rpx 24rpx;
  color: #999999;
  font-size: 28rpx;

  &-row {
    padding: 0 17rpx 0 19rpx;

    & + & {
      margin-top: 30rpx;
      border-top: 1rpx solid #CCCCCC;
      padding-top: 33rpx;
    }

    .title {
      justify-content: flex-start;
      color: #666666;
      font-weight: 700;
      margin-bottom: 15rpx;
    }

    .desc {
      flex: 1;
      font-size: 24rpx;
    }
  }

  .unit {
    color: #1B1B1B;
    font-size: 38rpx;
    font-weight: 900;
    margin-right: 13rpx;
  }

  .account {
    padding-left: 19rpx;
    margin-top: 21rpx;
  }

  .icon-wx {
    width: 40rpx;
    height: 34rpx;
    margin: 0 8rpx;
  }

  .btn {
    &-withdraw {
      color: #04D6A3;
      font-weight: 700;
      font-size: 28rpx;
    }

    &-auth {
      color: #04D6A3;
      border-color: #04D6A3;
      font-size: 28rpx;
      line-height: 1;
      padding: 12rpx 34rpx;
      width: auto;
      height: auto;
      box-sizing: border-box;
      border-radius: 33rpx;
      margin-left: 22rpx;
    }
  }
}



.btn-submit {
  width: calc(100% - 40rpx);
  height: 90rpx;
  background-color: $uni-bg-color-highlight;
  color: $uni-text-color-highlight;
  font-size: 36rpx;
  border-radius: 45rpx;

  position: fixed;
  bottom: 159rpx;
  left: 20rpx;
}
</style>