pay-video-applet-uniapp-24-8-22/pages_mine/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">￥{{ money.money }}</view>
          <view class="bottom">可提现金额</view>
        </view>
        <view class="b">
          <view class="bb">
            <view class="top">今日收益</view>
            <view class="bottom">￥{{ money.todayMoney }}</view>
          </view>
          <view class="bb">
            <view class="top">累计收益</view>
            <view class="bottom">￥{{ money.userSumMoney }}</view>
          </view>
          <view class="bb">
            <view class="top">已提现</view>
            <view class="bottom">￥{{ money.userMoney }}</view>
          </view>
        </view>
      </view>

      <!--下部分-->
      <view class="content-bottom">
        <view class="card-record">卡片记录</view>
        <!--具体银行卡-->
        <view class="cards" >
          <view class="cardItem" v-for="(item, index) in list" :key="index">
            <view class="cardImage">
              <!-- <image src="../static/addBankCard/1.svg" style="width: 100%;height: 100%;"></image> -->
            </view>
            <view class="cardInfo">
              <view class="cardNum">
                {{ item.bankId }}
              </view>
              <view class="cardName">
                {{ item.bankAddress }}
              </view>
            </view>
            <view class="cardIcon">
              <image src="../static/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 {
		queryParams: {
			pageNo: 1,
			pageSize: 10
		},
		total : 0,
		list : [],
		money : {}
	};
  },
  onShow() {
  	this.getData()
  	this.infoGetInfoMoney()
  },
	//滚动到屏幕底部
	onReachBottom() {
		console.log(1111111);
		if(this.queryParams.pageSize < this.total){
			this.queryParams.pageSize += 10
			this.getData()
		}
	},
  methods: {
    // 跳转到收益记录页面
    gotoIncomeRecordPage() {
      uni.navigateTo({
      	url: '/pages_mine/mine/incomeRecord'
      });
    },
    // 跳转到提现页面
    gotoWithdrawPage() {
      uni.navigateTo({
      	url:'/pages_mine/mine/withdraw'
      })
    },
	getData(){
		this.$api('infoGetBankCardPage', this.queryParams, res => {
			if(res.code == 200){
				this.list = res.result.records
				this.total = res.result.total
			}
		})
	},
	infoGetInfoMoney(){
		this.$api('infoGetInfoMoney', res => {
			if(res.code == 200){
				this.money = res.result
			}
		})
	},
  }
}
</script>

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

      height: 18vh;

      .aaa {
        color: #000000;

        .top {
          font-size: 50rpx;
        }

        .bottom {
          font-size: 28rpx;
          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;
      overflow: auto;
      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>