wagoo-douy3/src/pages/client/recharge/invite-friends.vue

<template>
  <view class="send-friends">
    <image class="diamond" src="https://activity.wagoo.live/poster.png" mode="widthFix" />
    <view class="my-friend">
      <text class="y">新人专属福利</text>
      <view class="my-reward">
        <text class="m">首单更</text> <text class="j">优惠</text>
      </view>
      <view class="my-login" @click="LoginNow">
        <text class="d">立即登录领取</text>
      </view>
      <view class="my-step">
        <view class="c" /> <text class="step">新人专享劵</text>
        <view class="c" />
      </view>
    </view>
    <view class="order-list-content">
      <list-page-temp :requestData="{ use_status: tabsList[curTabIndex].id, type: 0 }"
        :getDataPromise="getOwnCouponData" :reloadFlag="reloadFlag"
        :listExtraFields="{ nearDisabled: curTabIndex === 2 }">
        <template v-slot:item="{ data }">
          <coupon-item :data="data" :showOptBtn="false" :disabled="data.use_status === 2"
            :showCountDown="data.nearDisabled && data.daojishi">
            <!-- <image
              v-if="data.use_status === 2"
              slot="status"
              class="use-icon"
              src="./static/coupon_used.png"
            /> -->
          </coupon-item>
        </template>
      </list-page-temp>
    </view>

  </view>
</template>

<script>
import TabsList from "@/components/TabsList.vue";
import ListPageTemp from "./components/ListPageTemp.vue";
import CouponItem from "@/components/coupon/CouponItem";
import { getOwnCouponData } from "@/api/coupon";

export default {
  components: {
    TabsList,
    ListPageTemp,
    CouponItem,
  },
  computed: {
    tabsList() {
      return [
        {
          name: "",
          id: 1,
        },

      ];
    },
  },
  onLoad(options) {
    if (options?.referrerID) {
      this.$store.dispatch('user/setReferrerID', Number(options.referrerID) || 0);
    }
  },
  data() {
    return {
      curTabIndex: 0,
      reloadFlag: 0,
      userId: ''

    }
  },
  options: {
    styleIsolation: "shared",
  },
  onShow() {
    this.reloadFlag = Math.random();
  },
  methods: {
    getOwnCouponData,
    onTabChange(item, index) {
      this.curTabIndex = index;
    },
    LoginNow() {
      uni.navigateTo({
        url: `/pages/client/auth/index`
      });
    },
    jumpTo(url) {
      uni.navigateTo({
        url,
      });
    },
  },

}
</script>

<style lang="scss" scoped>
.send-friends {
  width: 100%;
  height: 100%;

  .diamond {
    width: 100%;
    height: 676rpx;
  }

  .my-friend {
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 140rpx;
    gap: 32rpx;

    .y {

      font-family: Alibaba PuHuiTi 2.0;
      font-size: 24px;
      font-weight: 500;
      line-height: 24px;
      text-align: center;
      letter-spacing: normal;
      color: #3D3D3D;

    }

    .my-reward {

      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .j {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: normal;
        line-height: 16px;
        text-align: center;
        letter-spacing: normal;
        /* 首单更 */
        color: #FE019B
      }
    }

    .m {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: normal;
      line-height: 16px;
      text-align: center;
      letter-spacing: normal;
      /* 首单更 */
      color: #3D3D3D
    }

    .my-login {
      width: 207px;
      height: 36px;
      /* 自动布局 */
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px;
      gap: 4px;
      z-index: 0;
      border-radius: 100px;
      /* 主色1 */
      background: #FE019B;

      .d {
        font-family: PingFangSC;
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
        text-align: center;
        letter-spacing: normal;
        color: #FFFFFF;
      }
    }

    .my-step {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 26rpx;

      .c {
        width: 120rpx;
        height: 0;
        z-index: 0;
        border-top: 1rpx solid #333333;
      }

      .step {
        width: 138rpx;
        height: 28rpx;
        z-index: 1;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: normal;
        line-height: 28rpx;
        letter-spacing: normal;
        color: #333333;
        margin: 0 30rpx;
      }
    }


  }

  .order-list-content {
    flex: 1;
    overflow: hidden;
    padding-left: 32rpx;
    margin-top: 190rpx;

    ::v-deep {
      .coupon-price {
        color: $app_fc_alarm;
      }

      .coupon-item {
        .circle {
          background: #f7f8fa;
        }
      }
    }

    .use-icon {
      width: 100rpx;
      height: 100rpx;
    }
  }

}
</style>