pay-video-applet-uniapp-24-8-22/pages/mine/purse.vue

<template>
  <view class="purse">
    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="我的钱包"/>


    <!--内容区-->
    <view class="content">

      <!--上部分-->
      <view class="content-top">
        <view class="aaa">
          <view class="top">￥1240,045</view>
          <view class="bottom">可提现金额</view>
        </view>
        <view class="b">
          <view class="bb">
            <view class="top">今日收益</view>
            <view class="bottom">￥1234</view>
          </view>
          <view class="bb">
            <view class="top">累计收益</view>
            <view class="bottom">￥1234</view>
          </view>
          <view class="bb">
            <view class="top">已提现</view>
            <view class="bottom">￥1234</view>
          </view>
        </view>
      </view>

      <!--下部分-->
      <view class="content-bottom">
        <view class="card-record">卡片记录</view>
        <!--具体银行卡-->
        <view class="cards" >
          <view class="cardItem" v-for="(item, index) in 5" :key="index">
            <view class="cardImage">
              <image src="/static/image/addBankCard/1.svg" style="width: 100%;height: 100%;"></image>
            </view>
            <view class="cardInfo">
              <view class="cardNum">
                6222021000000000018
              </view>
              <view class="cardName">
                工商银行
              </view>
            </view>
            <view class="cardIcon">
              <image src="/static/image/purse/1.svg" style="width: 70%;height: 70%;"></image>
            </view>
          </view>

        </view>
      </view>
    </view>


    <!--收益记录和去提现-->
    <span class="income-record" @click="gotoIncomeRecordPage">收益记录</span>


    <!--去提现按钮-->
    <button @click="gotoWithdrawPage" class="bottomBtn">
      去提现
    </button>
  </view>
</template>

<script>
import '../../common.css'; // 引入公共 CSS 文件

export default {
  data() {
    return {};
  },
  methods: {
    // 跳转到收益记录页面
    gotoIncomeRecordPage() {
      this.$utils.navigateTo('/mine/incomeRecord');
    },
    // 跳转到提现页面
    gotoWithdrawPage() {
      this.$utils.navigateTo('/mine/withdraw');
    }
  }
}
</script>

<style lang="scss" scoped>
.purse {
  .content {
    .content-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 60rpx;
      background-color: #f8faff;

      height: 18vh;

      .aaa {
        color: #000000;

        .top {
          font-size: 50rpx;
        }

        .bottom {
          font-size: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .b {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 100rpx;
        width: 100%;
        margin: 30rpx 40rpx 0 40rpx;
        color: #4b4b4d;

        .bb {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 10px;

        }
      }
    }

    .content-bottom {
      border-radius: 50rpx 50rpx 0 0;
      box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, 0.2); /* 仅上边的阴影效果 */
      background-color: #fff;
      height: calc(82vh - 240rpx);
      width: 100vw;

      .card-record {
        font-size: 34rpx;
        padding: 40rpx 0 0 40rpx;
      }

      .cards {
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        //width: 100vw;
        padding: 40rpx;

        .cardItem {
          display: flex;
          gap: 20rpx;
          height: 100rpx;
          //border: 1px solid red;
          //width: 100vw;

          .cardImage {
            width: 30%;
            //height: 100%;
          }

          .cardInfo {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            gap: 6rpx;
            width: 60%;


            .cardName {
              font-size: 28rpx;
              color: #8f92a1;
            }

            .cardNum {
              font-size: 24rpx;
              color: #000000;
            }

          }

          .cardIcon {
            width: 10%;

          }
        }
      }
    }
  }

  .withdraw-button {
    position: fixed;
    bottom: 80rpx;
    left: 16px; // 与页面左边保持一定距离
    right: 16px; // 与页面右边保持一定距离
    background: $uni-linear-gradient-btn-color; // 按钮背景渐变
    color: white; // 按钮文字颜色
    text-align: center; // 文字居中
    padding: 10px 0; // 内边距，增加按钮的高度
    font-size: 18px; // 按钮文字大小
    z-index: 1000; // 确保按钮位于其他内容的上方
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 80rpx;
    border-radius: 10rpx;
  }

  .income-record {
    position: fixed;
    bottom: 160rpx;
    right: 40%;
    margin-bottom: 40rpx;
    background: $uni-linear-gradient-color;
    -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent; /*给文字设置成透明*/
  }
}

</style>