447 lines
13 KiB
Vue
447 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 :style="{backgroundImage:`url(${card_back})`,backgroundSize:'cover',backgroundPosition:'center'}"
|
||
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-#0a4696"></text>
|
||
<text
|
||
class="li-text-34 li-text-#0a4696 li-ml-15 li-font-medium">{{codeInfo?.config?.shop_brokerage_mode==1?'业主消费返佣':'业主关系'}}</text>
|
||
</view>
|
||
<view v-if="codeInfo?.config?.shop_brokerage_mode == 1" class="li-flex li-items-baseline li-mb-15">
|
||
<text
|
||
class="li-text-70 li-text-#0a4696 li-font-bold">{{codeInfo?.config?.employee_shop_brokerage_rate}}</text>
|
||
<text class="li-text-34 li-text-#0a4696 li-ml-10">%</text>
|
||
</view>
|
||
<view v-else class="li-flex li-items-baseline li-mb-15">
|
||
<text class="li-text-70 li-text-#0a4696 li-font-bold">建立</text>
|
||
</view>
|
||
<text
|
||
class="li-text-26 li-text-#0a4696 li-opacity-100">{{codeInfo?.config?.shop_brokerage_mode==1?'邀请的业主每笔消费，您都可获得返佣':'邀请业主建立联系'}}</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 v-if="codeInfo?.config?.shop_brokerage_mode!=1"
|
||
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 v-if="codeInfo?.config?.shop_brokerage_mode==1" 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="openSharePoster">
|
||
<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">(共{{inviteListData?.length}}人)</text>
|
||
</view>
|
||
<view v-if="codeInfo?.config?.shop_brokerage_mode==1" 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">累计返佣：¥{{codeInfo?.sumMoney}}</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="records-list li-mt-20" @scrolltolower="loadMore">
|
||
<view v-for="(item, index) in inviteListData" :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="inviteListData?.length>0">
|
||
<wd-loadmore loading-text="努力加载中" finished-text="没有更多了" :state="state" />
|
||
</view>
|
||
|
||
<view v-if="inviteListData?.length === 0" class="empty-state">
|
||
<wd-status-tip image="search" tip="暂无邀请记录" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
|
||
<!-- 规则弹窗 -->
|
||
<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>
|
||
<zero-loading type="wobble" v-if="loading"></zero-loading>
|
||
|
||
<SharePoster v-model:show="showPoster" :posterInfo="posterInfo" @updateShare="handleUpdateShare"></SharePoster>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
defineExpose
|
||
} from 'vue'
|
||
import {
|
||
inviteList,
|
||
inviteCode
|
||
} from '@/api/invite'
|
||
import {
|
||
useToast
|
||
} from '@/uni_modules/wot-design-uni'
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app'
|
||
import {
|
||
useNavigation
|
||
} from '@/hooks/useNavigation'
|
||
import SharePoster from '@/components/SharePoster.vue'
|
||
|
||
const {
|
||
hasMultiplePages, // 是否有多个页面在路由栈中
|
||
isTabBarPage, // 当前页面是否为 tabBar 页面
|
||
checkRouteStack // 检查当前路由栈状态的方法
|
||
} = useNavigation()
|
||
const Toast = useToast()
|
||
const loading = ref(false)
|
||
const inviteListData = ref([])
|
||
const showRulePopup = ref(false)
|
||
const showPoster = ref(false)
|
||
const posterInfo = ref({})
|
||
const state = ref('loading')
|
||
const codeInfo = ref({})
|
||
const page = ref(1)
|
||
const limit = ref(10)
|
||
const userInfo = ref(uni.getStorageSync('userInfo'))
|
||
const count = ref(0)
|
||
|
||
|
||
const card_back = uni.$globalData?.RESOURCE_URL + 'invite/card-back.png'
|
||
|
||
onLoad(() => {
|
||
checkRouteStack()
|
||
getInviteCode()
|
||
loadInviteRecords()
|
||
})
|
||
|
||
const getInviteCode = async () => {
|
||
var res = await inviteCode()
|
||
if (res.code == 200) {
|
||
codeInfo.value = res.data
|
||
}
|
||
posterInfo.value = {
|
||
title: userInfo.value.owner.name,
|
||
name: userInfo.value.realname,
|
||
qrcode: codeInfo.value.code,
|
||
backImage: uni.$globalData?.RESOURCE_URL + 'invite/poster_back.png'
|
||
}
|
||
}
|
||
|
||
|
||
// 加载邀请记录
|
||
const loadInviteRecords = async () => {
|
||
loading.value = true
|
||
try {
|
||
const res = await inviteList({
|
||
page: page.value,
|
||
limit: limit.value,
|
||
})
|
||
if (res.code == 200) {
|
||
inviteListData.value = [...inviteListData.value, ...res.data]
|
||
count.value = res.count
|
||
}
|
||
|
||
} 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 = () => {
|
||
|
||
if (inviteListData?.value.length >= count.value) {
|
||
state.value = 'finished'
|
||
return
|
||
}
|
||
page++
|
||
loadInviteRecords()
|
||
}
|
||
|
||
onMounted(() => {
|
||
// loadInviteRecords()
|
||
// 初始化海报信息
|
||
|
||
})
|
||
|
||
// 显示规则弹窗
|
||
const showRules = () => {
|
||
console.log('显示规则弹窗')
|
||
showRulePopup.value = true
|
||
}
|
||
|
||
// 打开分享海报
|
||
const openSharePoster = () => {
|
||
showPoster.value = true
|
||
}
|
||
|
||
// 处理分享海报关闭
|
||
const handleUpdateShare = (val) => {
|
||
showPoster.value = val
|
||
}
|
||
</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 {
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.invite-card .card-content .commission-card .ri-shopping-bag-3-line {
|
||
font-size: 48rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.invite-card .card-content .commission-card .li-text-34 {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.invite-card .card-content .commission-card .li-text-26 {
|
||
font-size: 26rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.invite-card .card-content .benefit-list {
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
background: #f8faff;
|
||
}
|
||
|
||
.invite-card .card-content .benefit-list .benefit-item .icon-box {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 12rpx;
|
||
background: #E1F0FF;
|
||
margin-right: 20rpx;
|
||
padding: 15rpx;
|
||
}
|
||
|
||
.invite-card .card-content .benefit-list .benefit-item .icon-box .ri-user-add-line,
|
||
.invite-card .card-content .benefit-list .benefit-item .icon-box .ri-link-m,
|
||
.invite-card .card-content .benefit-list .benefit-item .icon-box .ri-money-cny-box-line {
|
||
font-size: 36rpx;
|
||
color: #0070F0;
|
||
}
|
||
|
||
.invite-card .card-content .benefit-list .benefit-item .li-text-30 {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.invite-card .card-content .benefit-list .benefit-item .li-text-26 {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
display: block;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
.invite-card .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);
|
||
}
|
||
|
||
.invite-records .records-list .record-item .avatar {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.invite-records .records-list .record-item .status-tag {
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.invite-records .records-list .record-item .status-tag.success {
|
||
color: #07c160;
|
||
background-color: rgba(7, 193, 96, 0.1);
|
||
}
|
||
|
||
.invite-records .records-list .record-item .status-tag.pending {
|
||
color: #f0ad4e;
|
||
background-color: rgba(240, 173, 78, 0.1);
|
||
}
|
||
|
||
.rules-popup {
|
||
width: 580rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rules-popup .rules-header {
|
||
border-color: rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
}
|
||
|
||
.rules-popup .rules-header::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 30rpx;
|
||
right: 30rpx;
|
||
bottom: 0;
|
||
height: 1px;
|
||
background: rgba(0, 0, 0, 0.05);
|
||
transform: scaleY(0.5);
|
||
}
|
||
|
||
.rules-popup .rules-header .ri-close-line {
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.rules-popup .rules-content {
|
||
padding: 40rpx 30rpx 50rpx;
|
||
}
|
||
|
||
.rules-popup .rules-content .rule-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.rules-popup .rules-content .rule-item .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;
|
||
}
|
||
|
||
.rules-popup .rules-content .rule-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
</style> |