VAVABUY/pages/user/invite.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="邀请有礼" fixed border>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <view class="qrcode">
          <image
            :src="BaseUrl + '/api/other/qrcode?text=' + detail.app_url"
            alt=""
            class="img"
          />
        </view>

        <view class="invite-code-section">
          <text class="invite-label"> <trans _t="我的邀请码"></trans>: </text>
          <text class="invite-code">{{ userInfo.share_code }}</text>
        </view>

        <!-- <view class="invite-link-section">
          <text class="invite-link">{{ detail.text }}</text>
        </view> -->
        <up-copy
          class="invite-copy-btn"
          :content="userInfo.share_code"
          :notice="t('复制成功')"
        >
          <trans class="copy" _t="复制" />
        </up-copy>
      </view>

      <view class="tips_content">
        <view class="tips_content-head">
          <view class="tips_content-head__tag">
            <trans _t="推广步骤"></trans>：
          </view>
        </view>
        <view class="tips_content-body">
          <view v-html="detail.share_info"></view>
        </view>
      </view>

      <view class="invitation-records-page">
        <view class="page-title">
          <trans _t="邀请记录" />
        </view>

        <view class="records-list">
          <view
            class="record-item"
            v-for="(record, index) in records"
            :key="index"
          >
            <view class="inviter-info">
              <view class="avatar">
                <image
                  :src="record.comfrom?.userimg"
                  mode="widthFix"
                  class="avatar-img"
                  alt="用户头像"
                ></image>
              </view>

              <!-- 姓名 -->
              <view class="inviter-name">
                <text>{{ record.comfrom?.username }}</text>
              </view>
            </view>

            <!-- 优惠券信息 -->
            <view class="coupon-info">
              <view class="coupon-name">
                <text>{{ record.title }}</text>
              </view>
              <view class="coupon-amount">
                <text class="symbol">{{ symbol.symbol }}</text>
                <text class="amount">{{ Moneyhtml(record.money) }}</text>
              </view>
            </view>
          </view>
          <view class="empty-state" v-if="records.length === 0">
            <trans class="empty-text" _t="暂无邀请记录"></trans>
          </view>
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import { BaseUrl, Moneyhtml } from "@/utils";
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import { computed, ref, nextTick } from "vue";
import { OTHER_CONFIG, SHOP_SHOPCOUNPON_LIST } from "@/api";
import { t } from "@/locale";
import { useUserStore, useSystemStore } from "@/store";
import { onShow } from "@dcloudio/uni-app";

const useUser = useUserStore();
const userInfo = computed(() => useUser.getuserInfo);
const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);

const detail = ref({});
const records = ref([]);

const getDetail = async () => {
  try {
    const res = await OTHER_CONFIG("share");
    detail.value = res.data;
  } catch (error) {}
};

const getDataList = async () => {
  try {
    const res = await SHOP_SHOPCOUNPON_LIST();
    records.value = res.data || [];
  } catch (error) {
    Toast(error.msg);
  }
};

const getStatusText = (status) => {
  switch (status) {
    case "used":
      return "已使用";
    case "unused":
      return "未使用";
    case "expired":
      return "已过期";
    default:
      return "";
  }
};

onShow(() => {
  nextTick(() => {
    getDetail();
    getDataList();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background: var(--bg);
  min-height: 100vh;

  .content {
    position: relative;
    z-index: 3;
    margin: 10% 8% 0;
    border-radius: 2.667vw;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    padding: 20rpx;

    .qrcode {
      .hor();

      .img {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .invite-code-section {
      .flex_center();
      padding-bottom: 40rpx;
      color: var(--black);

      .invite-label {
        font-size: 28rpx;
        display: block;
      }

      .invite-code {
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .invite-link-section {
      background-color: var(--bg);
      border: 1rpx solid var(--borderColor);
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 40rpx;
      word-break: break-all;

      .invite-link {
        font-size: 28rpx;
      }
    }

    .invite-copy-btn {
      max-width: 40vw;
      height: 70rpx;
      background-color: var(--black);
      color: @white;
      border-radius: 12rpx;
      padding: 0 24rpx;
      font-size: 32rpx;
      text-align: center;
      line-height: 70rpx;
      margin: 0 auto;

      &:active {
        opacity: 0.8;
      }
    }
  }

  .tips_content {
    margin: 30px 8% 0;
    // border-radius: 2.667vw;
    // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    padding: 0 0rpx;

    .tips_content-head__tag {
      display: inline-block;
      padding: 12rpx 20rpx;
      background-color: var(--black);
      border-radius: 10rpx;
      color: #fff;
      font-size: 30rpx;
      font-weight: 500;
    }

    .tips_content-body {
      margin-top: 18px;
    }
  }

  .invitation-records-page {
    padding-bottom: 20rpx;

    .page-title {
      height: 120rpx;
      line-height: 120rpx;
      text-align: center;
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      background-color: #fff;
      border-bottom: 1rpx solid #eee;
    }

    .records-list {
      padding: 20rpx;

      .record-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f5f5f7;
        border-radius: 16rpx;
        padding: 30rpx 24rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.99);
          box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.03);
        }

        .inviter-info {
          display: flex;
          align-items: center;

          .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20rpx;
            background-color: #f0f0f0;

            .avatar-img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .inviter-name {
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
          }
        }

        .coupon-info {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .coupon-name {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 8rpx;
          }

          .coupon-amount {
            display: flex;
            align-items: baseline;

            .symbol {
              font-size: 28rpx;
              color: #ff4d4f;
            }

            .amount {
              font-size: 36rpx;
              color: #ff4d4f;
              font-weight: 600;
            }
          }
        }
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30rpx 0;

        .empty-text {
          font-size: 30rpx;
          color: #999;
        }
      }
    }
  }
}
</style>