454 lines
13 KiB
Vue
454 lines
13 KiB
Vue
<template>
|
||
<view class="invite-page">
|
||
<!-- 自定义导航栏 -->
|
||
<!-- 自定义导航栏 -->
|
||
<wd-navbar :bordered="false"
|
||
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
||
safeAreaInsetTop fixed placeholder>
|
||
<template #left>
|
||
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
||
@click="toPages({type:'nav'})"></text>
|
||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
||
@click="toPages({type:'home'})"></text>
|
||
<text class="li-text-42">邀请业主</text>
|
||
</view>
|
||
</template>
|
||
</wd-navbar>
|
||
<!-- 导航栏背景 -->
|
||
<view class="nav-bg-layer"></view>
|
||
|
||
<!-- 邀请卡片区域 -->
|
||
<view class="invite-card li-w-92% li-mx-auto li-mt-40 li-bg-white li-rd-20 li-shadow-sm li-p-30">
|
||
<view class="card-header li-flex li-justify-between li-items-center">
|
||
<text class="li-text-36 li-text-#333">邀请福利</text>
|
||
<text class="li-text-28 li-text-#0070F0" @click="showRules">活动规则</text>
|
||
</view>
|
||
<view class="card-content li-mt-30">
|
||
<!-- 主要返佣说明 -->
|
||
<view
|
||
class="commission-card li-bg-gradient-to-r li-from-#4481EB li-to-#0070F0 li-rd-20 li-p-30 li-mb-30">
|
||
<view class="li-flex li-items-center li-mb-20">
|
||
<text class="ri-shopping-bag-3-line li-text-48 li-text-white"></text>
|
||
<text class="li-text-34 li-text-white li-ml-15">业主消费返佣</text>
|
||
</view>
|
||
<view class="li-flex li-items-baseline li-mb-15">
|
||
<text class="li-text-70 li-text-white li-font-bold">5</text>
|
||
<text class="li-text-34 li-text-white li-ml-10">%</text>
|
||
</view>
|
||
<text class="li-text-26 li-text-white li-opacity-80">邀请的业主每笔消费，您都可获得返佣</text>
|
||
</view>
|
||
|
||
<!-- 收益说明 -->
|
||
<view class="benefit-list li-bg-#f8faff li-rd-16 li-p-30">
|
||
<view class="benefit-item li-flex li-items-center li-mb-30">
|
||
<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
|
||
<text class="ri-user-add-line li-text-36 li-text-#0070F0"></text>
|
||
</view>
|
||
<view class="li-ml-20">
|
||
<text class="li-text-30 li-text-#333">邀请入驻</text>
|
||
<text class="li-text-26 li-text-#666 li-block li-mt-5">邀请业主注册并完成实名认证</text>
|
||
</view>
|
||
</view>
|
||
<view class="benefit-item li-flex li-items-center li-mb-30">
|
||
<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
|
||
<text class="ri-link-m li-text-36 li-text-#0070F0"></text>
|
||
</view>
|
||
<view class="li-ml-20">
|
||
<text class="li-text-30 li-text-#333">永久绑定</text>
|
||
<text class="li-text-26 li-text-#666 li-block li-mt-5">与业主建立永久绑定关系</text>
|
||
</view>
|
||
</view>
|
||
<view class="benefit-item li-flex li-items-center">
|
||
<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
|
||
<text class="ri-money-cny-box-line li-text-36 li-text-#0070F0"></text>
|
||
</view>
|
||
<view class="li-ml-20">
|
||
<text class="li-text-30 li-text-#333">持续收益</text>
|
||
<text class="li-text-26 li-text-#666 li-block li-mt-5">业主每次消费都可获得返佣</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="invite-button li-mt-40">
|
||
<wd-button type="primary" block custom-class="share-btn" @click="showSharePopup">
|
||
<text class="ri-share-forward-line li-mr-10"></text>立即邀请
|
||
</wd-button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 邀请记录区域 -->
|
||
<view class="invite-records li-w-92% li-mx-auto li-mt-40">
|
||
<view class="records-header li-flex li-justify-between li-items-center">
|
||
<view class="li-flex li-items-center">
|
||
<text class="li-text-34 li-text-#333">邀请记录</text>
|
||
<text class="li-text-26 li-text-#666 li-ml-15">(共{{inviteList.length}}人)</text>
|
||
</view>
|
||
<view class="li-flex li-items-center">
|
||
<text class="ri-money-cny-box-line li-text-32 li-text-#0070F0"></text>
|
||
<text class="li-text-26 li-text-#666 li-ml-10">累计返佣：¥1280.50</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="records-list li-mt-20" @scrolltolower="loadMore">
|
||
<view v-for="(item, index) in inviteList" :key="index"
|
||
class="record-item li-bg-white li-rd-20 li-p-30 li-mb-20 li-shadow-sm">
|
||
<view class="li-flex li-justify-between li-items-center">
|
||
<view class="li-flex li-items-center">
|
||
<image :src="item.avatar" class="avatar"></image>
|
||
<view class="li-ml-20">
|
||
<view class="li-text-32 li-text-#333">{{item.name}}</view>
|
||
<view class="li-text-26 li-text-#999 li-mt-10">{{item.time}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="status-tag" :class="item.status === 1 ? 'success' : 'pending'">
|
||
{{item.status === 1 ? '已绑定' : '待认证'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="loading" class="loading li-text-center li-py-30 li-text-28 li-text-#999">
|
||
加载中...
|
||
</view>
|
||
<view v-if="!hasMore && inviteList.length > 0" class="li-text-center li-py-30 li-text-28 li-text-#999">
|
||
没有更多了
|
||
</view>
|
||
<view v-if="inviteList.length === 0" class="empty-state li-py-60">
|
||
<wd-status-tip image="search" tip="暂无邀请记录" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 分享组件 -->
|
||
<share-popup ref="sharePopupRef" :visible.sync="showShare" @update:visible="showShare = $event"
|
||
@close="showShare = false" @generate="generatePoster" @share="handleShare" />
|
||
|
||
<!-- 规则弹窗 -->
|
||
<wd-popup v-model="showRulePopup" position="center" @close="showRulePopup = false">
|
||
<view class="rules-popup li-bg-white ">
|
||
<view class="rules-header li-py-20 li-px-30 li-flex li-justify-between li-items-center li-border-b">
|
||
<text class="li-text-34 li-font-medium">活动规则</text>
|
||
<text class="ri-close-line li-text-44 li-text-#999" @click="showRulePopup = false"></text>
|
||
</view>
|
||
<view class="rules-content li-p-30">
|
||
<view class="rule-item li-mb-15 li-flex li-items-center">
|
||
<text class="rule-icon li-mr-15">1</text>
|
||
<text class="li-text-28 li-text-#333">邀请业主加入平台并完成实名认证后，您将与业主建立永久绑定关系</text>
|
||
</view>
|
||
<view class="rule-item li-mb-15 li-flex li-items-center">
|
||
<text class="rule-icon li-mr-15">2</text>
|
||
<text class="li-text-28 li-text-#333">每当业主在商城消费时，您都可获得订单金额5%的返佣</text>
|
||
</view>
|
||
<view class="rule-item li-flex li-items-center">
|
||
<text class="rule-icon li-mr-15">3</text>
|
||
<text class="li-text-28 li-text-#333">返佣将在订单完成后自动发放，可随时提现至银行卡</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</wd-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
defineExpose
|
||
} from 'vue'
|
||
import {
|
||
useToast
|
||
} from '@/uni_modules/wot-design-uni'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import SharePopup from './components/SharePopup.vue'
|
||
import { useNavigation } from '@/hooks/useNavigation'
|
||
const {
|
||
hasMultiplePages, // 是否有多个页面在路由栈中
|
||
isTabBarPage, // 当前页面是否为 tabBar 页面
|
||
checkRouteStack // 检查当前路由栈状态的方法
|
||
} = useNavigation()
|
||
const Toast = useToast()
|
||
const sharePopupRef = ref(null)
|
||
const showShare = ref(false)
|
||
const loading = ref(false)
|
||
const hasMore = ref(true)
|
||
const page = ref(1)
|
||
const inviteList = ref([])
|
||
const showRulePopup = ref(false)
|
||
|
||
onLoad(() => {
|
||
checkRouteStack()
|
||
})
|
||
|
||
// 显示分享弹窗
|
||
const showSharePopup = () => {
|
||
showShare.value = true
|
||
}
|
||
|
||
// 生成海报
|
||
const generatePoster = () => {
|
||
// 调用分享组件的生成海报方法
|
||
sharePopupRef.value?.generatePoster()
|
||
}
|
||
|
||
// 处理分享
|
||
const handleShare = (type) => {
|
||
if (type === 'wechat') {
|
||
// #ifdef APP-PLUS
|
||
plus.share.sendWithSystem({
|
||
type: 'text',
|
||
content: '邀请链接',
|
||
href: 'https://example.com/invite'
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
// 小程序分享通过 onShareAppMessage 处理
|
||
// #endif
|
||
}
|
||
}
|
||
|
||
// 加载邀请记录
|
||
const loadInviteRecords = async () => {
|
||
if (loading.value || !hasMore.value) return
|
||
|
||
loading.value = true
|
||
try {
|
||
// 模拟接口调用
|
||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||
|
||
const mockData = Array(10).fill().map((_, index) => ({
|
||
id: page.value * 10 + index,
|
||
name: `业主${page.value * 10 + index}`,
|
||
avatar: '/static/swiper/1.png',
|
||
time: '2024-03-26 12:00:00',
|
||
status: Math.random() > 0.5 ? 1 : 0
|
||
}))
|
||
|
||
inviteList.value.push(...mockData)
|
||
hasMore.value = page.value < 3 // 模拟只有3页数据
|
||
page.value++
|
||
} catch (error) {
|
||
Toast.error('加载失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 页面跳转
|
||
const toPages = (item) => {
|
||
if (item.type === 'nav') {
|
||
uni.navigateBack()
|
||
} else if (item.type === 'home') {
|
||
// 这里是项目内部的跳转逻辑
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 滚动加载更多
|
||
const loadMore = () => {
|
||
loadInviteRecords()
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadInviteRecords()
|
||
})
|
||
|
||
// 显示规则弹窗
|
||
const showRules = () => {
|
||
console.log('显示规则弹窗')
|
||
showRulePopup.value = true
|
||
}
|
||
|
||
// 微信小程序分享配置
|
||
const onShareAppMessage = () => {
|
||
return {
|
||
title: '邀请您加入我们的物业管理平台',
|
||
path: '/pagesA/invite/index',
|
||
imageUrl: '分享图片地址'
|
||
}
|
||
}
|
||
|
||
// 分享定义到组件实例上
|
||
defineExpose({
|
||
onShareAppMessage
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f7f8fc;
|
||
}
|
||
|
||
.invite-page {
|
||
min-height: 100vh;
|
||
padding-bottom: 40rpx;
|
||
|
||
// 导航背景层
|
||
.nav-bg-layer {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: calc(var(--status-bar-height) + 88rpx);
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||
z-index: -1;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.invite-card {
|
||
.card-content {
|
||
.commission-card {
|
||
background: linear-gradient(135deg, #4481EB 0%, #0070F0 100%);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.ri-shopping-bag-3-line {
|
||
font-size: 48rpx;
|
||
color: #fff;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.li-text-34 {
|
||
font-size: 34rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.li-text-26 {
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.benefit-list {
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
background: #f8faff;
|
||
|
||
.benefit-item {
|
||
.icon-box {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 12rpx;
|
||
background: #E1F0FF;
|
||
margin-right: 20rpx;
|
||
padding: 15rpx;
|
||
|
||
.ri-user-add-line,
|
||
.ri-link-m,
|
||
.ri-money-cny-box-line {
|
||
font-size: 36rpx;
|
||
color: #0070F0;
|
||
}
|
||
}
|
||
|
||
.li-text-30 {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.li-text-26 {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
display: block;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.share-btn {
|
||
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
|
||
border: none !important;
|
||
height: 90rpx !important;
|
||
font-size: 32rpx !important;
|
||
}
|
||
}
|
||
|
||
.invite-records {
|
||
.records-list {
|
||
height: calc(100vh - 600rpx);
|
||
|
||
.record-item {
|
||
.avatar {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.status-tag {
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
|
||
&.success {
|
||
color: #07c160;
|
||
background-color: rgba(7, 193, 96, 0.1);
|
||
}
|
||
|
||
&.pending {
|
||
color: #f0ad4e;
|
||
background-color: rgba(240, 173, 78, 0.1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rules-popup {
|
||
width: 580rpx;
|
||
overflow: hidden;
|
||
|
||
.rules-header {
|
||
border-color: rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 30rpx;
|
||
right: 30rpx;
|
||
bottom: 0;
|
||
height: 1px;
|
||
background: rgba(0, 0, 0, 0.05);
|
||
transform: scaleY(0.5);
|
||
}
|
||
|
||
.ri-close-line {
|
||
padding: 10rpx;
|
||
}
|
||
}
|
||
|
||
.rules-content {
|
||
padding:40rpx 30rpx 50rpx;
|
||
|
||
.rule-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
|
||
.rule-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 50%;
|
||
background: #0070F0;
|
||
color: white;
|
||
font-size: 24rpx;
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |