开发静态页面邀请好友得现金活动

pages/activity/invite-user/components/BuyRecordList.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="list-header">
+      <div class="header-text haeder-account">被邀请账号</div>
+      <div class="header-text haeder-pay">付费金额</div>
+      <div class="header-text header-time">购买时间</div>
+      <div class="header-text header-back">佣金</div>
+    </div>
+    <div class="record-list">
+      <div class="record-item" v-for="(item, index) in data" :key="index">
+        <div class="body-text record-account">{{ item.phone }}</div>
+        <div class="body-text record-pay">{{ item.money }}</div>
+        <div class="body-text record-time">{{ item.time }}</div>
+        <div class="body-text record-back">{{ item.status }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BuyRecordList',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-header{
+  background-color: #FFEED7;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+
+  .haeder-account,.record-account{
+    flex: 0.22;
+  }
+  
+  .haeder-pay.record-pay{
+    flex: 0.15;
+  }
+  .header-time,.record-time{
+    flex: 0.37;
+  }
+
+  .header-back,.record-back{
+    flex: 0.1;
+  }
+
+  .header-text{
+    text-align: center;
+    font-weight: 400;
+    font-size: 12px;
+    color: #333;
+    line-height: 24px;
+  }
+}
+
+.record-item{
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+
+  .body-text{
+    text-align: center;
+    line-height: 33px;
+  }
+}
+</style>

pages/activity/invite-user/components/InvitePagination.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="pagination-wrap">
+    <div class="left" @click="pageChangeHandle('left')">
+      <van-icon name="arrow-double-left" :color="isDisabled('left')" />
+    </div>
+    <div class="page-num">{{ currentPage }}/{{ pageCount }}</div>
+    <div class="right"  @click="pageChangeHandle('right')">
+      <van-icon name="arrow-double-right" :color="isDisabled('right')"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InvitePagination',
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    pageSize: {
+      type: Number,
+      default: 5
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+  },
+  computed: {
+    isDisabled(type) {
+      return ()=>{
+        let color = '#979797';
+        if (type === 'left' && this.currentPage === 1) {
+          color = '#bbb';
+        }
+        if (type === 'right' && this.currentPage === this.pageCount) {
+          color = '#bbb';
+        }
+        return color;
+      };
+    },
+    pageCount() {
+      return Math.ceil(this.total / this.pageSize);
+    }
+  },
+  methods: {
+    pageChangeHandle(type) {
+      if (type === 'left' && this.currentPage > 1) {
+        this.$emit('onPageChange', this.currentPage - 1);
+      }
+      if (type === 'right' && this.currentPage < this.pageCount) {
+        this.$emit('onPageChange', this.currentPage + 1);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.van-icon-arrow-double-left::before {
+  content: "\e668";
+}
+.van-icon-arrow-double-right::before {
+  content: "\e660";
+}
+.pagination-wrap{
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-items: center;
+
+  .left,.right{
+    width: 17.52px;
+    height: 17.52px;
+    font-size: 12px;
+  }
+
+ .page-num{
+  text-align: center;
+    font-size: 12px;
+    width: 45px;
+    font-weight: 400;
+    font-size: 12px;
+    color: #333;
+ }
+}
+</style>

pages/activity/invite-user/components/RecordList.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="list-header">
+      <div class="header-text haeder-one">被邀请账号</div>
+      <div class="header-text header-two">购买时间</div>
+    </div>
+    <div class="record-list">
+      <div class="record-item" v-for="(item, index) in data" :key="index">
+        <div class="record-title">{{ item.phone }}</div>
+        <div class="record-time">{{ item.time }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RecordList',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-header{
+  background-color: #FFEED7;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+
+  .haeder-one{
+    flex: 0.45;
+  }
+  .header-two{
+    flex: 0.55;
+  }
+
+  .header-text{
+    text-align: center;
+    font-weight: 400;
+    font-size: 12px;
+    color: #333;
+    line-height: 24px;
+  }
+}
+
+.record-item{
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+
+  .record-title,
+  .record-time{
+    text-align: center;
+    line-height: 33px;
+  }
+
+  .record-title{
+    flex: 0.45;
+  
+  }
+
+  .record-time{
+    flex: 0.55;
+  }
+}
+</style>

pages/activity/invite-user/components/SharePopup.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="share-popup">
+    <van-popup
+      v-model="show"
+      :close-on-click-overlay="false"
+    >
+      <div class="share-wrap">
+        <div class="share-content bg-whiter pt-4 pb-4">
+          <!-- 用户信息 -->
+          <div class="userinfo-wrap pl-4 pr-4">
+            <!-- <img class="avatar mr-1" src="~assets/image/activity/invite-user/invite-new-user/avatar.png" alt=""> -->
+            <div class="avatar mr-1"></div>
+            <div class="userinfo-text ml-1">
+              <div class="userinfo-name">15312348305</div>
+              <div class="userinfo-describe">邀请您使用双子星云手机</div>
+            </div>
+          </div>
+          <!-- 分割线 -->
+          <van-divider dashed />
+
+          <!-- 分享文案 -->
+          <div class="share-bright pl-4 pr-4">
+            <div class="share-describe mb-4">现在抢购即可享受活动价格</div>
+            <div class="bright-item">
+              <div class="bright-context">
+                <!-- <img class="bright-img mr-1" src="" alt=""> -->
+                <div class="bright-img mr-1"></div>
+                <div class="bright-main ml-1">
+                  <div class="bright-title">星曜云手机</div>
+                  <div class="title-text">邀请您使用双子星云手机</div>
+                </div>
+              </div>
+              <div class="badge">
+                <img src="~assets/image/activity/invite-user/invite-new-user/badge.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 不规则图背景 -->
+        <div class="share-irregular bg-whiter"></div>
+        <!-- 二维码区域 -->
+        <div class="qrcode-wrap bg-whiter mb-6 pl-6 pr-6 pt-6 pb-6">
+          <div class="qrcode-img mr-4">
+            <!-- <img class="qrcode" src="~assets/image/activity/invite-user/invite-new-user/qrcode.png" alt=""> -->
+          </div>
+          <div class="qrcode-describe">
+            <div class="qrcode-title">双子星云手机</div>
+            <div class="qrcode-text">使用微信扫码购买双子星云手机</div>
+          </div>
+        </div>
+        <div class="share-btn-wrap">
+          <div class="operate-wrap">
+            <div class="copy-link" @click="copyCode">复制链接</div>
+            <div class="save-img" @click="saveImg">保存图片</div>
+          </div>
+          <div class="close-wrap mt-5">
+            <span @click="onClose" class="cancel-btn">取消分享</span>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SharePopup',
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    showPopup() {
+      this.show = true;
+    },
+    onClose() {
+      this.show = false;
+    },
+    async copyCode(text="复制成功") {
+      await this.$native.clipboard.writeText(text);
+      this.$toast.success('复制成功');
+      this.onClose();
+    },
+    async saveImg() {
+      
+      // this.$toast.success('保存成功');
+      this.onClose();
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .bg-whiter{
+    background-color: #fff;
+  }
+
+  .share-popup ::v-deep .van-popup {
+    background-color: transparent;
+    width: 290px;
+  }
+
+  .share-content{
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
+  .userinfo-wrap{
+    display: flex;
+
+    .avatar{
+     flex: 0 0 40px;
+     width: 40px;
+     height: 40px;
+     border-radius: 50%;
+     background-color: #fff;
+    }
+
+    .userinfo-text{
+      .userinfo-name{
+        font-size: 14px;
+        color: #242424;
+      }
+
+      .userinfo-describe{
+        color: #979797;
+      }
+    }
+  }
+
+  .share-describe{
+    font-family: DingTalk, DingTalk;
+    font-size: 18px;
+    color: #0A132B;
+    line-height: 21px;
+  }
+
+  .bright-item{
+    display: flex;
+
+    .bright-context{
+      flex: 1;
+      display: flex;
+
+      .bright-img{
+        flex: 0 0 40px;
+        width: 40px;
+        height: 40px;
+        background-color: red;
+      }
+
+      .bright-main{
+        .bright-title{
+          font-weight: 500;
+          font-size: 14px;
+          color: #0A132B;
+        }
+
+        .title-text{
+          font-weight: 400;
+          font-size: 12px;
+          color: #979797;
+        }
+      }
+    }
+
+
+    .badge{
+      flex: 0 0 36px;
+      width: 36px;
+      height: 36px;
+
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .qrcode-wrap{
+    display: flex;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+
+    .qrcode-img{
+      flex: 0 0 56px;
+      width: 56px;
+      height: 56px;
+      background-color: red;
+    }
+
+    .qrcode-describe{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+     .qrcode-title{
+        font-weight: 600;
+        font-size: 16px;
+        color: #3370FF;
+      }
+
+      .qrcode-text{
+        font-weight: 400;
+        font-size: 12px;
+        color: #666;
+      }
+    }
+  }
+
+  .share-btn-wrap{
+    .operate-wrap{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+    .copy-link, .save-img{
+        width: 113px;
+        flex: 0 0 113px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 36px;
+        text-align: center;
+        border-radius: 18px;
+        position: relative;
+      }
+
+      .copy-link{
+        color: #0A132B;
+        background-color: #fff;
+
+        &::before{
+          position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            background-color: #000;
+            border: inherit;
+            border-color: #000;
+            border-radius: inherit;
+            -webkit-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            content: ' ';
+        }
+
+        &:active::before{
+          opacity: .1;
+        }
+      }
+
+      .save-img{
+        background-color: #3370FF;
+        color: #fff;
+
+        &::before{
+          position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            background-color: #000;
+            border: inherit;
+            border-color: #000;
+            border-radius: inherit;
+            -webkit-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            content: ' ';
+        }
+
+        &:active::before{
+          opacity: .1;
+        }
+      }
+    }
+
+    .close-wrap{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .cancel-btn{
+        display: inline-block;
+        font-weight: 400;
+        font-size: 14px;
+        color: #FFF;
+        line-height: 26px;
+      }
+    }
+  }
+</style>

pages/activity/invite-user/components/layout.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="layout" :class="{'layout-white': !false}">
+    <div style="height: 12.2666666667vw" v-if="isShowNavBar">
+      <van-nav-bar :title="title" left-arrow fixed @click-left="goBackFun">
+        <template #right>
+          <slot name="right"></slot>
+        </template>
+      </van-nav-bar>
+    </div>
+    <div class="layout-container" :style="containerStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+  
+  <script>
+export default {
+  name: 'layout',
+  props: {
+    // 是否显示头部
+    title: {
+      type: String,
+      default: '邀请好友得现金',
+    },
+    // 是否强制像是头部
+    forceShowNavBar: {
+      type: Boolean,
+      default: false
+    },
+    padding: {
+      type: String,
+      default: '16px'
+    },
+    background: {
+      type: String,
+      default: '#F2F4F7'
+    },
+    isRouterBack: {
+      type: Boolean,
+      default: false
+    },
+    // 用于内嵌页面，标识为最后一页
+    isGoBack: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isApp: null,
+      isAndroid: null,
+    };
+  },
+  mounted() {
+    // 如果是安卓的需要判断一下是否显示h5内置的返回按钮
+    // 如果是H5、微信小程序，不需要显示次按钮
+    this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
+    this.isAndroid = this.$userAgent.isAndroid;
+    // if (!this.isApp) return this.visible = false
+    // if (this.isApp && this.isAndroid) {
+    //   this.visible = !!window.native.goneBack
+    //   // 判断是否有注册goneBack方法,有就调用
+    //   if(!!window.native.goneBack){
+    //     console.log('this.visible', this.visible)
+    //     window.native.goneBack() // 安卓隐藏返回按钮
+    //   }
+    // }
+  },
+  computed: {
+    containerStyle() {
+      return { background: this.background, padding: this.padding};
+    },
+    isShowApp() {
+      // 是否是APP
+      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
+      const isAndroid = this.$userAgent.isAndroid;
+      const isIos = this.$userAgent.isIos;
+      const isWx = this.$userAgent.isWx;
+
+      console.log('isApp:' + isApp)
+      console.log('isAndroid:' + isAndroid)
+      console.log('isIos:' + isIos)
+      console.log('isWx:' + isWx)
+
+      // 如果是App并且是安卓，就不显示头部， ios显示
+      // 如果微信小程序环境的，也不显示头部
+      // 如果是h5 就显示头部
+      let bool = false;
+      bool = isApp && (isAndroid || isIos) ? true : false;
+      return bool;
+    },
+    isShowNavBar() {
+      // 是否是APP
+      const isApp = this.isApp;
+      const isAndroid = this.isAndroid;
+      const isIos = this.$userAgent.isIos;
+      const isWx = this.$userAgent.isWx;
+      // 如果是App并且是安卓，就不显示头部， ios显示
+      // 如果微信小程序环境的，也不显示头部
+      // 如果是h5 就显示头部
+      let bool = false;
+      // bool = isApp ? (isAndroid ? !isAndroid : isIos) : (isWx ? !isWx : !isWx);
+
+      bool = (isApp && (isAndroid || !isIos)) || isWx ? false : true;
+      // bool = isWx ? false : true;
+
+      return bool || this.forceShowNavBar;
+    },
+
+  },
+  methods: {
+    goBackFun() {
+      if (this.$listeners.goBack) {
+        this.$emit('goBack');
+        return;
+      }
+      // 如果为true是最前一页
+      if (this.isGoBack) {
+        this.isAndroid ? window.native.backClick() : window.webkit.messageHandlers.appGoBack.postMessage({})
+        return
+      }
+      this.$router.go(-1)
+    },// 退出相关逻辑
+  },
+};
+  </script>
+  
+  <style lang="less" scoped>
+.layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .layout-container {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  ::v-deep .van-nav-bar__arrow {
+    color: #000000;
+    font-size: 24px;
+  }
+
+  ::v-deep .van-nav-bar__title {
+    font-weight: bold !important;
+    font-size: 17px !important;
+    color: #0a132b !important;
+    line-height: 24px !important;
+  }
+
+  .van-nav-bar {
+    z-index: 0;
+  }
+
+  .floating-back {
+    position: fixed; /* 设定定位为固定 */
+    left: 26px; /* 距离右侧10像素 */
+    bottom: 98px; /* 距离底部10像素 */
+    background-color: transparent; /* 背景颜色 */
+    z-index: 1000; /* 确保悬浮在其他内容之上 */
+  }
+}
+.layout-white {
+  .van-nav-bar {
+    background-color: #f2f4f7;
+  }
+
+  ::v-deep [class*='van-hairline']::after {
+    border: 0px;
+  }
+}
+</style>
+  

pages/activity/invite-user/invite-new-user.vue

@@ -1,13 +1,418 @@
 <template>
-  <div>Date: 2025-4-3 oem商户拉新分佣活动</div>
+  <layout title="邀请好友得现金" :isGoBack="true" padding="0">
+    <template #right>
+      <!-- nav right -->
+      <img @click="onRightHandle" src="~assets/image/activity/invite-user/invite-new-user/nav-right.png" alt="">
+    </template>
+
+    <!-- container -->
+    <div class="invite-container">
+      <div class="share-btn mb-8" @click="shareHandle">
+        分享赚佣金
+      </div>
+      <div class="day-statistics mb-3">今日邀请注册人数：1000</div>
+
+      <div class="user-main pt-3 pr-3 pb-3 pl-3 mb-3">
+        <div class="userinfo">
+          <div class="avatar mr-1"></div>
+          <!-- <img class="avatar mr-4" src="~assets/image/activity/invite-user/invite-new-user/avatar.png" alt=""> -->
+          <div class="userinfo-text ml-1">
+            <div class="userinfo-name">用户昵称</div>
+            <div class="userinfo-id">ID：123456789</div>
+          </div>
+        </div>
+        <div class="possess-warp mb-3">
+          <div class="withdrawal-text">可提现<span class="withdrawal-money ml-2">¥30.0</span></div>
+          <div class="withdrawal-btn">提现</div>
+        </div>
+        <div class="userinfo-detail">
+          <div class="userinfo-detail-item pt-4 pr-3 pb-3 pl-3">
+            <div class="userinfo-detail-item-content">1000</div>
+            <div class="userinfo-detail-item-title">累计邀请人数</div>
+          </div>
+          <div style="flex: 0 0 11px"></div>
+          <div class="userinfo-detail-item pt-4 pr-3 pb-3 pl-3">
+            <div class="userinfo-detail-item-content">1000</div>
+            <div class="userinfo-detail-item-title">累计邀请金额</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="record-wrap">
+        <van-tabs v-model="activeTab" shrink background="#FFFBE2">
+          <van-tab v-for="(tab, i) in tabs" :title="tab.title" :key="i">
+            <!-- 邀请记录 -->
+            <RecordList
+              v-if="activeTab === 0"
+              class="mt-3 pr-1 pl-1 list-wrqp"
+              :data="tab.data"
+              :key="i"
+            />
+
+            <!-- 购买记录 -->
+            <BuyRecordList class="mt-3 pr-1 pl-1 list-wrqp" v-if="activeTab === 1" :data="tab.data"/>
+
+            <!-- 提现记录 -->
+            <RecordList
+              v-if="activeTab === 2"
+              class="mt-3 pr-1 pl-1 list-wrqp"
+              :data="tab.data"
+              :key="i"
+            />
+
+            <!-- 分页 -->
+            <InvitePagination v-if="tab.total" :total="tab.total" :pageSize="tab.query.pageSize" :currentPage="tab.query.pageNum" @onPageChange="pageChangeHandle" />
+          </van-tab>
+        </van-tabs>
+      </div>
+
+      <!-- 分享弹窗 -->
+      <SharePopup ref="sharePopup" />
+    </div>
+  </layout>
 </template>
 
 <script>
 /**
  * Date: 2025-4-3 oem商户拉新分佣活动
 */
+import layoutBack from '@/components/layout';
+import layout from './components/layout';
+import RecordList from './components/RecordList';
+import InvitePagination from './components/InvitePagination';
+import BuyRecordList from './components/BuyRecordList';
+import SharePopup from './components/SharePopup';
+
 export default {
   auth: false,
   name: 'OemInviteNewUser',
+  head: {
+    title: '邀请好友得现金',
+  },
+  components: { layout, layoutBack, RecordList, InvitePagination, BuyRecordList, SharePopup },
+  data() {
+    return {
+      activeTab: 0,
+      tabs: [{
+        title: '邀请记录',
+        query: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        data: [{
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '已提现',
+          statusColor: '#FF505C',
+        },
+        {
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '已提现',
+          statusColor: '#FF505C',
+        },
+        {
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '已提现',
+          statusColor: '#FF505C',
+        },
+        {
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '已提现',
+          statusColor: '#FF505C',
+        },
+        {
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '已提现',
+          statusColor: '#FF505C',
+        },
+        // {
+        //   id: 1,
+        //   name: '1305677',
+        //   phone: '13800138000',
+        //   time: '2025-04-03 10:00:00',
+        //   money: '100.00',
+        //   status: '已提现',
+        //   statusColor: '#FF505C',
+        // },
+        // {
+        //   id: 1,
+        //   name: '1305677',
+        //   phone: '13800138000',
+        //   time: '2025-04-03 10:00:00',
+        //   money: '100.00',
+        //   status: '已提现',
+        //   statusColor: '#FF505C',
+        // },
+        // {
+        //   id: 1,
+        //   name: '1305677',
+        //   phone: '13800138000',
+        //   time: '2025-04-03 10:00:00',
+        //   money: '100.00',
+        //   status: '已提现',
+        //   statusColor: '#FF505C',
+        // },
+        // {
+        //   id: 1,
+        //   name: '1305677',
+        //   phone: '13800138000',
+        //   time: '2025-04-03 10:00:00',
+        //   money: '100.00',
+        //   status: '已提现',
+        //   statusColor: '#FF505C',
+        // },
+        // {
+        //   id: 1,
+        //   name: '1305677',
+        //   phone: '13800138000',
+        //   time: '2025-04-03 10:00:00',
+        //   money: '100.00',
+        //   status: '已提现',
+        //   statusColor: '#FF505C',
+        // }
+        ],
+        total: 0,
+      },{
+        title: '购买记录',
+        query: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        data: [{
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '30.00',
+          statusColor: '#FF505C',
+        },{
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '30.00',
+          statusColor: '#FF505C',
+        },{
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '30.00',
+          statusColor: '#FF505C',
+        },{
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '30.00',
+          statusColor: '#FF505C',
+        },{
+          id: 1,
+          name: '1305677',
+          phone: '13800138000',
+          time: '2025-04-03 10:00:00',
+          money: '100.00',
+          status: '30.00',
+          statusColor: '#FF505C',
+        },],
+        total: 0,
+      },{
+        title: '提现记录',
+        query: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        data: [],
+        total: 0,
+      }],
+    }
+  },
+  methods: {
+    // nav right菜单点击事件
+    onRightHandle() {
+      this.$router.push({ path: '/activity/invite-user/invite-new-user-rule' })
+    },
+    // 分享按钮点击事件
+    shareHandle() {
+      this.$refs.sharePopup.showPopup();
+    },
+    // 分页点击事件
+    pageChangeHandle(page) {
+      let active =  this.activeTab;
+      this.tabs[active].query.pageNum = page;
+      console.log('pageChangeHandle', page);
+      // 发起请求
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mb-12{
+  margin-bottom: 12px;
+}
+// 动态生成 从 0 到 100px 的样式
+@for $i from 0 through 100 {
+  .mb-#{$i} {
+    margin-bottom: #{$i}px;
+  }
+
+  .mt-#{$i} {
+    margin-top: #{$i}px;
+  }
+
+  .ml-#{$i} {
+    margin-left: #{$i}px;
+  }
+
+  .mr-#{$i} {
+    margin-right: #{$i}px;
+  }
+}
+$-radeus-12: 12px;
+$-bg-yellow: rgb(255, 253, 241);
+
+.invite-container {
+  font-size: 12px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-image: url('~assets/image/activity/invite-user/invite-new-user/bg-img.png');
+  background-size: 100% auto;
+  background-position: top;
+  background-repeat: no-repeat;
+  background-color: #EB3043;
+  padding: 372px 16px 16px;
+
+  .share-btn {
+    height: 56px;
+    background: #FF505C;
+  }
+
+  .day-statistics{
+    line-height: 32px;
+    font-size: 14px;
+    color: #FA393A;
+    font-weight: 500;
+    border-radius:  $-radeus-12;
+    background-color: $-bg-yellow;
+    text-align: center;
+  }
+
+  .user-main{
+    display: flex;
+    flex-direction: column;
+    background-color: $-bg-yellow;
+    border-radius: $-radeus-12;
+    
+    .userinfo{
+      display: flex;
+      align-items: center;
+
+      .avatar{
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: #FF505C;
+      }
+
+      .userinfo-text{
+        display: flex;
+        flex-direction: column;
+
+        .userinfo-name{
+          font-size: 14px;
+          color: #242424;
+        }
+
+        .userinfo-id{
+          color: #979797;
+        }
+      }
+    }
+
+    .possess-warp{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .withdrawal-text{
+        color: #0A132B;
+
+        .withdrawal-money{
+          color: #FA393A;
+          font-size: 24px;
+          font-weight: bold;
+        }
+      }
+
+      
+      .withdrawal-btn{
+        width: 70px;
+        line-height: 26px;
+        border-radius: $-radeus-12;
+        background-color: #FA393A;
+        color: #fff;
+        font-size: 14px;
+        text-align: center;
+      }
+    }
+
+    .userinfo-detail{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .userinfo-detail-item{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        background-color: rgb(255, 242, 231);
+        border-radius: 12px;
+
+        .userinfo-detail-item-content{
+          font-size: 18px;
+          font-weight: bold;
+          color: #242424;
+        }
+
+        .userinfo-detail-item-title{
+          font-weight: 400;
+          color: #979797;
+        }
+      }
+    }
+  }
+
+  .record-wrap{
+    height: 276px;
+    background-color: $-bg-yellow;
+    border-radius:  $-radeus-12;
+    overflow: hidden;
+  }
 }
-</script>
+</style>

pages/activity/invite-user/invite-passive-user.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    被邀请页面
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InvitePassiveUser',
+  head: {
+    title: '受邀验证',
+  }
+}
+</script>
+
+<style>
+
+</style>