discounts-minapp/invite/index.vue

<template>
  <view class="page">
    <image class="cover"
      src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/657c35e3cae1326607ea9ed2/ext/SHOP_INFO/20240816134523.png/1.png"
      mode="aspectFit"></image>
    <view class="info-card">
      <view class="header">
        <view class="titile">我的邀请</view>
        <view class="btn" @click="jump('/invite/wallet/withdraw?amount='+amount)">
          <view>去提现</view>
          <image class="icon" src="/static/right-arrow.png"></image>
        </view>
      </view>
      <view class="content">
        <view class="item">
          <view class="title">已邀请</view>
          <view class="value">{{ invite.inviteCount }}</view>
        </view>
        <view class="item">
          <view class="title">成功邀请</view>
          <view class="value">{{ invite.success }}</view>
        </view>
        <view class="item">
          <view class="title">累积获得</view>
          <view class="value">{{ currency(invite.totalAmount, { fromCents: true, symbol: '' }) }}元</view>
        </view>
      </view>
    </view>

    <view class="card-content">
      <u-cell-group :border="false">
        <u-cell title="我的邀请码" isLink rightIcon="arrow-right" :border="false" @click="jump('./invite')">

        </u-cell>
        <!-- <u-cell title="邀请记录" isLink rightIcon="arrow-right" :border="false" @click="jump('./history')"></u-cell> -->
        <u-cell title="我的钱包" isLink rightIcon="arrow-right" :border="false" @click="jump('./wallet/index')"></u-cell>
        <u-cell title="邀请奖励明细" rightIcon="arrow-right" :border="false" @click="jump('./detail')"></u-cell>
      </u-cell-group>
    </view>

  </view>
</template>

<script>

import { myInvite } from "@/api/invite"
import { getWallet } from "@/api/wallet"
import currency from '@/utils/currency'
export default {
  data() {
    return {
      invite: {
        inviteCount: 0,
        success: 0,
        totalAmount: 0,
      },
      amount:0,
      currency: currency

    };
  },
  methods: {
    jump(url) {
      uni.navigateTo({
        url
      })
    },
  },
  onShow() {
    myInvite().then(({ content }) => {
      if (content) {
        this.invite = content
      }
    })
    getWallet().then(({ content }) => {
      if (content) {
        if (content.id) {
          uni.setStorageSync('walletId', content.id);
          this.amount = content.amount
        }
      }
    })
  }
};
</script>

<style lang="scss" scoped>
.page {
  background: #F9F9F9;
  min-height: 100vh;

  .cover {
    width: 100%;
    height: 440rpx;
    vertical-align: bottom;
  }

  .info-card {
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 28rpx 24rpx;

    margin: -100rpx 24rpx 24rpx 24rpx;
    // overflow: overlay;
    position: relative;
    z-index: 2;

    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;

      .title {
        color: #181818;
        font-size: 28rpx;
      }

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #0C6FFE;
        font-size: 28rpx;

        .icon {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    .content {
      display: flex;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .title {
          color: #CCCCCC;
          font-size: 24rpx;
          margin: 0 8rpx 8rpx 8rpx;

        }

        .value {
          color: #222222;
          font-weight: bold;
          font-size: 36rpx;

        }
      }
    }
  }

  .card-content {
    padding: 28rpx 24rpx;
    border-radius: 16rpx;
    background: #fff;
    margin: 20rpx 24rpx 0 24rpx;
  }
}
</style>