couponCenter_mpapp/src/pages-A/withdraw/index.vue

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { LOGIN_PAGE } from '@/router/config'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'

definePage({
    style: {
        navigationBarTitleText: '提现',
    },
})

const userStore = useUserStore()
const tokenStore = useTokenStore()
// 使用storeToRefs解构userInfo
const { userInfo } = storeToRefs(userStore)

const unlockAmount = ref('')

function toBindBank() {
  uni.navigateTo({
    url: '/pages-A/bank/index',
  })
}
</script>

<template>
    <view class="profile-container">
        <view class="widthdraw-select-card">
            <view class="widthdraw-select-card-left">
                <view class="widthdraw-select-card-left-title">
                    提现至
                </view>
                <view class="widthdraw-select-card-left-hanke">
                    <image src="/static/images/income/y-1.png" />
                    <view class="widthdraw-select-card-left-hanke-text">
                        建设银行(8463)
                    </view>
                </view>
            </view>
            <view class="widthdraw-select-card-right">
                <view class="widthdraw-select-card-right-title" @click.stop="toBindBank">
                    去绑卡
                </view>
                <u-icon name="arrow-right" size="13" color="#666" />
            </view>
        </view>
        <view class="income-header-menu">
            <view class="income-header-menu-title">
                提现金额
            </view>
            <view class="income-header-menu-input-box">
                <view class="income-header-menu-input">
                    <text class="income-header-menu-input-symbol">￥</text>
                    <u-input
                        v-model="unlockAmount"
                        type="number"
                        border="none"
                    />
                </view>
                <view class="income-header-menu-input-text">
                    全部提现
                </view>
            </view>
            <view class="income-header-menu-input-tips">
                可提现金额：￥1000000
            </view>
        </view>
        <view class="income-header-menu-btn">
            申请提现
        </view>
        <view class="income-header-menu-btn-cancle">
            提现记录
        </view>
    </view>
</template>

<style lang="scss" scoped>
::v-deep .u-input__content__field-wrapper__field {
  height: 80rpx !important;
  font-size: 80rpx !important;
}
.profile-container {
  font-family: Alibaba PuHuiTi;
  min-height: calc(100vh - 20rpx);
  background-color: #f5f5f5;
  line-height: 1;
  padding: 20rpx 0 0 0;
  //   padding-top: 44px; /* 为固定导航栏留出空间 */
  .widthdraw-select-card {
    height: 88rpx;
    background: #ffffff;
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 26rpx;
    color: #333333;
    padding: 0 20rpx;
    margin: 0 20rpx;
    .widthdraw-select-card-left {
      display: flex;
      align-items: center;
      gap: 38rpx;
      .widthdraw-select-card-left-hanke {
        display: flex;
        align-items: center;
        gap: 15rpx;
        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
    .widthdraw-select-card-right {
      display: flex;
      align-items: center;
      gap: 20rpx;
    }
  }

  .income-header-menu {
    background: #ffffff;
    border-radius: 10rpx;
    margin: 24rpx 24rpx 0;
    .income-header-menu-title {
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      padding: 34rpx 20rpx;
      //   border-bottom: 2rpx solid #eeeeee;
    }
    .income-header-menu-input-box {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .income-header-menu-input {
        display: flex;
        align-items: flex-end;
        gap: 17rpx;
        padding: 66rpx 20rpx;
        .income-header-menu-input-symbol {
          font-weight: 400;
          font-size: 60rpx;
          color: #333333;
        }
      }
      .income-header-menu-input-text {
        width: 200rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #1777ff;
        padding: 66rpx 20rpx;
      }
    }
    .income-header-menu-input-tips {
      font-weight: 400;
      font-size: 28rpx;
      color: #888888;
      padding: 30rpx 0;
      margin: 0 20rpx;
      border-top: 2rpx solid #eeeeee;
    }
  }
  .income-header-menu-btn {
    width: 600rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
    border-radius: 10rpx;
    margin: 100rpx auto 0;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
  }
  .income-header-menu-btn-cancle {
    width: 600rpx;
    line-height: 80rpx;
    margin: 10rpx auto 0;
    font-weight: 400;
    font-size: 30rpx;
    color: #333;
    text-align: center;
  }
}
</style>